@charset "utf-8";
@import url("./font.css");
@import url("./reset.css");
/*----------------------------------------------------------------------------------
全デバイス
----------------------------------------------------------------------------------*/
/*-----------ベース-----------*/
html{font-size:62.5%;}
body{
	font-family:YakuHanJP,"Zen Kaku Gothic New","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Osaka,sans-serif;
	font-weight: 400;
	font-size:1.8em;
	line-height:1.8;
	color:#0e2b3e;
	background-color: #f9f9f9;
	-webkit-text-size-adjust: none;
	/*font-feature-settings: "palt";*/
}
::selection{background:#004099; color:#5cb8e6;}
::-moz-selection {background:#004099;color:#5cb8e6;}
a{
	text-decoration:none;
	color:#0e2b3e;
	transition:.2s;
}
.sp_only{display: none!important}
.tab_only{display: none!important}
img{
	max-width: 100%;
	height: auto;
}
ruby {font-weight: inherit}
rt {
	font-size: 0.5em;
	letter-spacing: 0;
}
.title_ruby rt {font-size: 0.325em;}
.preload * {
	-webkit-transition:none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}
.rapperfix{
	width: 1000px;
	margin: 0 auto;
	position: relative;
}
.inview{
	opacity: 0;
	-webkit-transform: translateY(50px);
	-ms-transform: translateY(50px);
	transform: translateY(50px);
	transition: opacity 0.8s ease-out 0s, transform 0.8s ease-out 0s;
}
.inview.incontents{
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform:translateY(0);
}
/*-----------ヘッダー-----------*/
#header{
	position: relative;
	width: 100%;
}
#header header{
	z-index: 999;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	box-sizing: border-box;
	
}
#header header h1{
	position: absolute;
	max-width: 120px;
	width: 8%;
	left: 1.5%;
	top: 0;
}
#header header h1 a{
	display: block;
	background-color: #fff;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	box-sizing: border-box;
	padding: 35px 15px;
}
#header header #nav-toggle,
#header header nav{
	position: fixed;
	right: 0;
	top: 0;
}
#header header #nav-toggle{
	cursor: pointer;
	z-index: 4;
	width: 100px;
	height: 100px;
	position: fixed;
	right: 1.5%;
	top: 15px;
	
}
#header header #nav-toggle > div,
#header header #nav-toggle > div::before{
	width: 100%;
	height: 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
	transition: .4s;
}
#header header #nav-toggle > div{
	position: relative;
	background-image: url("../images/common/hamburger_open.png");
	
}
#header header #nav-toggle > div::before{
	opacity: 0;
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	background-image: url("../images/common/hamburger_close.png");
}
#header header nav,
#header header nav ul,
#header header nav ul li{transition: .4s;}
#header header nav,
#header header nav ul{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
}
#header header nav{
	opacity: 0;
	right: 0;
	top: 0;
	width:100vw;
	height: 100vh;
	margin-right: -100vw;
	background-color: rgba(0,0,0,.75);
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
	overflow-x: hidden;
	z-index: 2;
	/*box-shadow: 0 0 5px rgba(0,0,0,.15);*/
	align-items: center;
}
#header header nav > ul{
	width: 70%;
	max-width: 700px;
	opacity: 0;
	transition: .7s .55s;
	margin: 0 auto;
}
#header header nav > ul{justify-content: space-between;}
#header header nav > ul > li{
	width: 32%;
	border-top: solid 1px #fff;
	text-align: center;
}
#header header nav > ul > li:first-child,
#header header nav > ul > li.f_navi_more{width: 100%;}
#header header nav > ul > li > a{
	display: block;
	position: relative;
	font-size: 2.15rem;
	letter-spacing: -0.03em;
	font-weight: 900;
	color: #fff;
	line-height: 1.3;
	padding: 25px 0;
}
#header header nav > ul > li > a > span{
	position: relative;
	font-weight: inherit;
}
#header header nav > ul > li > a > span::after {
	text-align: center;
	position: relative;
	display: block;
	content: attr(data-after-content);
	font-family: 'Barlow', sans-serif;
	font-size: 1.4rem;
	letter-spacing: 0;
	font-weight: 700;
	color: #fff;
	opacity: .75;
}
#header header nav .subnavi{
	border-top: solid 1px rgba(255,255,255,.4);
	padding: 20px 0;
	justify-content: space-around;
}
#header header nav .subnavi.subnavi_sp{display: none;}
#header header nav .subnavi li{}
#header header nav .subnavi li:not(:last-child){margin-right: 3em;}
#header header nav .subnavi li a{
	font-size: 1.6rem;
	display: block;
	color: #fff;
	text-align: left;
	font-weight: 500;
	margin-bottom: 10px;
}


#header header.open #nav-toggle > div::before{opacity: 1;}
#header header.open nav{
	margin-right: 0;
	opacity: 1;
}
#header header.open nav ul{opacity: 1;}



/*-----------共通-----------*/
.section_base{
	box-sizing: border-box;
	position: relative;
	padding-left:5%;
}
.section_rapper{
	position: relative;
	padding-right: 5%;
}
.title_style01{
	position: relative;
	padding: 0 5% 30px 0;
	margin-bottom: 60px;
}
.title_style01::before,
.title_style01::after{
	content: " ";
	width: 100%;
	height: 1px;
	position: absolute;
	left: 0;
	background-color: #5d6a74;
}
.title_style01::before{bottom: 3px;}
.title_style01::after{bottom: 0;}


.title_style01 span{
	font-size: 6rem;
	font-weight: 700;
	letter-spacing: -0.075em;
	line-height: 1.2;
}
.title_style01 .gradient{
	display: inline-block;
	font-weight: inherit;
}
.title_style01 .title_s{
	font-weight: inherit;
	font-size: .85em;
}
.title_style01 span::before {
	position: relative;
	display: block;
	content: attr(data-before-content);
	font-size: 3rem;
	letter-spacing: 0;
	font-weight: 900;
	color: #0e2b3e;
}
.title_style01 span::after {
	position: relative;
	display: block;
	content: attr(data-after-content);
	font-family: 'Barlow', sans-serif;
	font-size: 2.6rem;
	letter-spacing: 0;
	font-weight: 700;
	color: #0e2b3e;
	margin-left: 0.1em;
}
.title_style01 .gradient.gradient01{
	background: linear-gradient(90deg, #3d62a7 0%,#3197b5 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.title_style01 .gradient.gradient01_02{
	background: linear-gradient(90deg, #32a671 0%,#71a632 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.title_style01 .gradient.gradient02{
	background: linear-gradient(90deg, #e27c21 0%,#fcc740 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.title_style01 .gradient.gradient03{
	background: linear-gradient(90deg, #603c0b 0%,#a5865b 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.title_style01 .gradient.gradient04{
	background: linear-gradient(90deg, #6638f0 0%,#a14aa2 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.title_style01 .gradient.gradient05{
	background: linear-gradient(90deg, #000001 0%,#383677 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.title_style02{
	position: relative;
	font-size: 3.6rem;
	font-weight: 900;
	color: #fff;
	text-shadow: 0 0 7px rgba(0,0,0,.4);
	margin-bottom: 20px;
	padding-left: 28px;
	letter-spacing: -0.05em;
}
.title_style02::before{
	content: " ";
	position: absolute;
	width: 18px;
	height: 3px;
	background-color: #ddd;
	left: 0;
	top: 32px;
}
.title_style02.cate01::before{background-color: #5a9300;}
.title_style02.cate02::before{background-color: #008a93;}
.title_style02.cate02_002::before{background-color: #785fa1;}
.title_style02.cate03::before{background-color: #d61818;}
.title_style02.cate04::before{background-color: #ff628b;}
.title_style02.cate05::before{background-color: #089938;}
.title_style02.cate06::before{background-color: #db840d;}
.title_style02.cate07::before{background-color: #7e979b;}

.title_style03{
	position: relative;
	color: #fff;
	font-size: 2.2rem;
	font-weight: 900;
	margin-bottom: 30px;
}
.title_style03 span{
	position: relative;
	display: inline-block;
	font-weight: inherit;
	border:  solid 1px #fff;
	background-color: #a49646;
	line-height: 1.2;
	padding: 10px 1em;
}
.title_style03::before{
	content: " ";
	width: 100%;
	height: 1px;
	background-color: #fff;
	position: absolute;
	left: 0;
	top: 50%;
}
.button_style01{position: relative;}
.button_style01{text-align: center;}
.button_style01 a{
	position: relative;
	display: inline-block;
	font-weight: 700!important;
	color: #fff;
	border: solid 2px #fff;
	background-color: #666;
	background-position: 94% center;
	background-repeat: no-repeat;
	background-size: 20px auto;
	box-sizing: border-box;
	min-width: 300px;
	text-align: center;
	padding: 15px 10%;
	border-radius: 100px;
	box-shadow: 0 0 8px rgba(0,0,0,.35);
	margin-right: 0.5em;
	margin-left: 0.5em;
}
.button_style01 a.link01{background-image: url("../images/common/button_icon01.png");}
.button_style01 a.link02{background-image: url("../images/common/button_icon02.png");}
.button_style01 a.link03{background-image: url("../images/common/button_icon03.png");}
.button_style01 a.link04{background-image: url("../images/common/button_icon04.png");}

.button_style01.category01 a{background-color: #2857af;}
.button_style01.category02 a{background-color: #32a671;}
.button_style01.category03 a{background-color: #e27c21;}
.button_style01.category04 a{background-color: #5a9300;}
.button_style01.category05 a{background-color: #008a93;}
.button_style01.category06 a{background-color: #005093;}
.button_style01.category07 a{background-color: #c03636;}
.button_style01.category08 a{background-color: #e25579;}
.button_style01.category09 a{background-color: #007d52;}
.button_style01.category10 a{background-color: #db840d;}
.button_style01.category11 a{background-color: #5b7d82;}
.button_style01.category12 a{background-color: #a5865b;}


/*-----------ページトップ-----------*/
#pagetop{
	position:fixed;
	bottom:20px;
	right:1%;
	display:none;
	z-index:998;
	
}
#pagetop a{
	box-sizing: border-box;
	transition: .4s;
	position:relative;
	display: block;
	width: 80px;
	height: 80px;
}
/*-----------footer-----------*/
#footer footer{
	position: relative;
	padding: 90px 6% 30px;
	background-position: left bottom;
	background-repeat: no-repeat;
	background-image: url("../images/common/f_bg_pc.jpg");
	color: #fff;
}
#footer footer .footer_navi{
	width: 640px;
	margin-bottom: 40px;
}
#footer footer .footer_navi ul{
	position: relative;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
}
#footer footer .footer_navi > ul{justify-content: space-between;}
#footer footer .footer_navi > ul > li{
	width: 32%;
	border-top: solid 1px #fff;
	text-align: center;
}
#footer footer .footer_navi > ul > li:first-child,
#footer footer .footer_navi > ul > li.f_navi_more{width: 100%;}
#footer footer .footer_navi > ul > li > a{
	display: block;
	position: relative;
	font-size: 2.15rem;
	letter-spacing: -0.03em;
	font-weight: 900;
	color: #fff;
	line-height: 1.3;
	padding: 25px 0;
}
#footer footer .footer_navi > ul > li > a > span{
	position: relative;
	font-weight: inherit;
}
#footer footer .footer_navi > ul > li > a > span::after {
	text-align: center;
	position: relative;
	display: block;
	content: attr(data-after-content);
	font-family: 'Barlow', sans-serif;
	font-size: 1.4rem;
	letter-spacing: 0;
	font-weight: 700;
	color: #fff;
	opacity: .75;
}
#footer footer .footer_navi .subnavi{
	border-top: solid 1px rgba(255,255,255,.4);
	padding: 20px 0;
	justify-content: space-around;
}
#footer footer .footer_navi .subnavi.subnavi_sp{display: none;}
#footer footer .footer_navi .subnavi li{}
#footer footer .footer_navi .subnavi li:not(:last-child){margin-right: 3em;}
#footer footer .footer_navi .subnavi li a{
	font-size: 1.6rem;
	display: block;
	color: #fff;
	text-align: left;
	font-weight: 500;
	margin-bottom: 10px;
}
#footer footer .footer_box01{
	position: relative;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content: flex-end;
}
#footer footer .footer_box01 dl{
	max-width: 360px;
	width: 35%;
	text-align: center;
}
#footer footer .footer_box01 dl dt{
	position: relative;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content: space-between;
}
#footer footer .footer_box01 dl dt .f_logo01{width: 60%;}
#footer footer .footer_box01 dl dt .f_logo02{margin-top: 5px; width: 38%;}
#footer footer .footer_box01 dd small{
	font-size: 1.4rem;
	font-weight: 500;
}


.button_style01 a:hover{opacity: .7!important;}

/*digest*/
#digest { text-align: center;}
#digest p{ font-weight: 500; 
 color: #ff0054; margin-left: auto; margin-right: auto; width: 90%;}
  #digest ul{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 623px;  }
  #digest ul,
  #digest li a{  margin: 0 auto; }
  #digest li .textbox { display: block;
  margin-top: 10px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5; }


/*----------------------------------------------------------------------------------
PCのみ
----------------------------------------------------------------------------------*/
@media screen and (min-width:1001px){
	html{overflow-x: hidden;}
	body{min-width: 1000px;}
	#header header h1 a:hover,
	#header header #nav-toggle > div:hover,
	#header header nav ul li a:hover,
	#pagetop a:hover,
	#footer footer .footer_navi ul li a:hover,
	#footer footer .footer_box01 dl dt a:hover{opacity: .7;}

}

@media screen and (max-width: 1000px) and (min-width: 641px) {
	#digest li a{width: 32.5%;}
}
/*----------------------------------------------------------------------------------
タブレット・SP
----------------------------------------------------------------------------------*/
@media screen and (max-width:1000px){
	.pc_only{display: none!important;}
	.rapperfix{width: 90%;}
	#header header nav{
		align-items: flex-start;
		overflow-y: scroll;
	}
	#header header nav > ul{
		padding: 16vw 0 10vw;
	}

}
/*----------------------------------------------------------------------------------
タブレット
----------------------------------------------------------------------------------*/
@media screen and (max-width:999px) and (min-width:641px){
	.tab_only{display: block!important;}
	#header header h1{
		max-width: 200px;
		width: 13%;
	}
	#header header h1 a{padding:25px 20px;}
	#footer footer .footer_navi{width: 100%;}
	#footer footer .footer_box01 dl{
		width: 100%;
		margin: 0 auto;
	}
	
	
	
	.title_style01 span{font-size: 4.5rem;}
	.title_style01 span::after{font-size: 1.8rem;}
}
/*----------------------------------------------------------------------------------
SP
----------------------------------------------------------------------------------*/
@media screen and (min-width: 641px) {
	#digest p{ font-size: 2.2rem; line-height: 1.8; margin-top:60px; margin-bottom: 30px;}
	#digest li a{width: 70%;}
}

@media screen and (max-width: 640px){
	body{font-size:1.45em;}
	.sp_only{display: block!important;}
	
	/*-----------ヘッダー-----------*/
	#header header h1{
		width: 18%;
		left: 2.5%;
	}
	#header header h1 a{padding: 5vw 3vw 3vw;}
	#header header #nav-toggle{
		width: 65px;
		height: 65px;
		right: 1.5%;
		top: 1.5vw;
	}
	#header header nav{

	}
	#header header nav > ul{
		width: 100%;
		display: block;
	}
	#header header nav > ul > li{
		width: 100%;
		border-top: none;
		text-align: left;
	}
	#header header nav > ul > li:not(:last-child){border-bottom: solid 1px #fff;}
	#header header nav > ul > li > a{
		font-size: 1.45rem;
		padding: 20px 4.5%;
		background: url("../images/common/f_icon.png") no-repeat 95% center;
		background-size: 12px auto;
	}
	#header header nav > ul > li > a > span::after {
		text-align: left;
		display: inline-block;
		font-size: 1rem;
		margin-left: 0.65em;
	}
	#header header nav > ul .subnavi{
		/*display: none;*/
		padding: 10px 6%;
		justify-content: space-between;
	}
	#header header nav > ul .subnavi.subnavi_sp{display: flex;}
	#header header nav > ul .subnavi li{width: 48%;}
	#header header nav > ul .subnavi li:not(:last-child){margin-right: 0;}
	#header header nav > ul .subnavi li a{
		font-size: 1.285rem;
		margin-bottom: 10px;
		line-height: 1.35;
	}
	/*-----------共通-----------*/
	.title_style01{
		padding: 0 5% 20px 0;
		margin-bottom: 25px;
	}
	.title_style01 span{font-size: 2.8rem;}
	.title_style01 span::before {font-size: 1.4rem;}
	.title_style01 span::after {
		font-size: 1.4rem;
		margin-left: 0.05em;
	}
	.title_style02{
		font-size: 2.15rem;
		margin-bottom: 10px;
		padding-left: 18px;
	}
	.title_style02::before{
		width: 12px;
		height: 2px;
		top: 19px;
	}
	.title_style03{
		font-size: 1.6rem;
		margin-bottom: 10px;
	}
	.title_style03 span{padding: 8px 1.25em;}
	.button_style01 a{
		background-position: 94% center;
		background-size: 14px auto;
		min-width: 80%;
		padding: 12px 10%;
		margin-right: 0.5em;
		margin-left: 0.5em;
		margin-bottom: 10px;
	}
	/*-----------ページトップ-----------*/
	#pagetop{
		position:relative;
		bottom:0;
		right:0;
		display:block;
		z-index:1;
	}
	#pagetop a{
		text-align: center;
		background-color: #0e0b01;
		width: 100%;
		height: auto;
		padding: 18px 48.5% 14px;
	}
	/*-----------footer-----------*/
	#footer footer{
		padding: 0 0 30px;
		background-position: center bottom;
		background-image: url("../images/common/f_bg_sp.jpg");
		background-color: #140001;
		background-size: 100% auto;
	}
	#footer footer .footer_navi{
		width: 100%;
		margin-bottom: 50vw;
	}
	#footer footer .footer_navi > ul{display: block;}
	#footer footer .footer_navi > ul > li{
		width: 100%;
		border-top: none;
		text-align: left;
	}
	#footer footer .footer_navi > ul > li:not(:last-child){border-bottom: solid 1px #fff;}
	#footer footer .footer_navi > ul > li > a{
		font-size: 1.45rem;
		padding: 20px 4.5%;
		background: url("../images/common/f_icon.png") no-repeat 95% center;
		background-size: 12px auto;
	}
	#footer footer .footer_navi > ul > li > a > span::after {
		text-align: left;
		display: inline-block;
		font-size: 1rem;
		margin-left: 0.65em;
	}
	#footer footer .footer_navi .subnavi{
		/*display: none;*/
		padding: 10px 6%;
		justify-content: space-between;
	}
	#footer footer .footer_navi .subnavi.subnavi_sp{display: flex;}
	#footer footer .footer_navi .subnavi li{
		width: 48%;
	}
	#footer footer .footer_navi .subnavi li:not(:last-child){margin-right: 0;}
	#footer footer .footer_navi .subnavi li a{
		font-size: 1.285rem;
		margin-bottom: 7px;
		line-height: 1.35;
	}
	#footer footer .footer_box01{display: block;}
	#footer footer .footer_box01 dl{
		max-width: 9999px;
		width: 100%;
	}
	#footer footer .footer_box01 dl dt{
		width: 65%;
		margin: 0 auto 5px;
	}
	#footer footer .footer_box01 dd small{font-size: 1.2rem;}

	#digest { margin-bottom: 20px; }
	#digest p { font-size: 1.5rem; text-align: left;
    line-height: 1.7;  margin-top:30px;  margin-bottom: 20px; }
	#digest li{width: 90%;}
	#digest li .textbox {margin-top: 5px; font-size: 1.35rem; line-height: 1.5;}

}