@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;700&display=swap');

@font-face {
	font-family: "YakuHanJP";
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/YakuHanJP-Regular.woff2") format("woff2"),
	url("../fonts/YakuHanJP-Regular.woff") format("woff");
}

@font-face {
	font-family: "YakuHanJP";
	font-style: normal;
	font-weight: bold;
	src: url("../fonts/YakuHanJP-Bold.woff2") format("woff2"),
	url("../fonts/YakuHanJP-Bold.woff") format("woff");
}

html { overflow-y:scroll; font-size: 62.5%}
ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, h7, form, p { margin:0; padding:0; }
img { border:0; }
li { list-style-type:none; }

body {
	width:100%; margin:0; padding:0;
	font-size: 1.6em; line-height:1.5;
	color:#000;
	font-family: "YakuHanJP", 'Noto Sans JP', "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
	letter-spacing: 0.05em;
	-webkit-text-size-adjust: 100%;
}
body.bg-gray {background-color: #f3f4f5;}

table th, table td { font-size:14px; }

a {
	overflow:hidden;
	-webkit-transition:.2s linear;
	-moz-transition:.2s linear;
	-o-transition:.2s linear;
	transition:.2s linear; }
a:link		{ color:#000; text-decoration:none; }
a:visited	{ color:#000; }
a:hover		{ opacity: 0.8; }
a:active	{ opacity: 0.8; }

img { max-width: 100%; height: auto;}

/* clearfix */
.clearfix:after {  
	visibility: hidden;  
	display: block;  
	font-size: 0;  
	content: " ";  
	clear: both;  
	height: 0;  
}  
* html .clearfix { zoom: 1; } /* IE6 */  
*:first-child+html .clearfix { zoom: 1; } /* IE7 */  

.txt_c { text-align:center; }
.txt_l { text-align:left; }
.txt_r { text-align:right; }

.float_l { float:left; }
.float_r { float:right; }
.clear { clear:both; }

.serif { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", serif; }
.en { font-family: 'Hind', sans-serif; font-weight: 700; }
.bold  { font-weight:bold; }
.big   { font-size:120%; }
.small { font-size:88%; }
.red   { color:#c00; }
.mt10  { margin-top:10px; }
.mt20  { margin-top:20px; }

/* 共通 */
#loader-bg {display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #fff; z-index: 99;}
#loader {display: none; position: absolute; top: 50%; left: 50%; width: 30%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); text-align: center; z-index: 100;}
#loader .loader_circle {position: relative; animation:3s linear infinite rotate;}
#loader .loader_logo {position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); width: 66%;}
@keyframes rotate{
	0%{ transform:rotate(0);}
	100%{ transform:rotate(360deg); }
}

.header {position: relative; width: 100%; background-color: #000; z-index: 10;}
.header_inner {display: flex; justify-content: space-between; align-items: center; width: 1320px; margin: 0 auto; padding: 55px 0 35px;}
.header:after {content: ""; position: absolute; bottom: -13px; left: 0; width: 100%; height: 26px; background: url(/img/header/line.png) left top / auto 100% repeat-x;}
.header_nav {position: relative; margin-bottom: 15px;}
.header_nav ul {display: flex; justify-content: flex-end; flex-wrap: wrap; max-width: 100%;}
.header_nav ul li {font-size: 1.7rem; font-weight: bold; line-height: 1.6;}
.header_nav ul li + li {margin-left: 1.5em;}
.header_nav ul li a {position: relative; display: block; color: #fff;}
.header_nav ul li a:after {content:""; width: 100%; height: 0; position: absolute; bottom: 0; left: 0; z-index: -1; transition: all .1s;}
.header_nav ul li:nth-of-type(odd) a:after {background-color: #ff0000;}
.header_nav ul li:nth-of-type(even) a:after {background-color: #ffea00;}
.header_nav ul li a:hover {opacity: 1;}
.header_nav ul li a:hover:after {opacity: 1; height: 8px;}
.header_sns ul {display: flex; justify-content: flex-end;}
.header_sns ul li {font-size: 2.4rem;}
.header_sns ul li + li {margin-left: 10px;}
.header_sns ul li a {color: #fff;}
.header, .header_inner, .header_logo, .header_nav, .header_sns {transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;}

.header_nav_toggle {display: none; position: absolute; right: 10px; top: 18px; width: 34px; height: 25px; cursor: pointer; z-index: 10;}
.header_nav_toggle div {position: relative;}
.header_nav_toggle span {display: block; position: absolute; height: 3px; width: 100%; background: #fff; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out;}
.header_nav_toggle span:nth-child(1) {top: 0;}
.header_nav_toggle span:nth-child(2) {top: 11px;}
.header_nav_toggle span:nth-child(3) {top: 22px;}

.header.fixed {position: fixed; top: 0; z-index: 10;}
.header.fixed .header_inner {width: 1360px; padding: 20px 0;}
.header.fixed .header_logo {width: 13%;}
.header.fixed .header_nav {margin-bottom: 0;}
.header.fixed .header_sns {display: none;}

#contents { padding:50px 20px 20px; text-align:left; }
.contents p { margin-bottom:1em; }
.contents p:last-child { margin-bottom:0; }

.footer {position: relative; color: #fff; background-color: #000; letter-spacing: 0.09em;}
.footer_logo {position: absolute; left: 50%; top: -60%; width: 7%; margin-left: -3.5%; z-index: 5;}
.footer_inner {padding: 40px 0 90px;}
.footer_sns {display: flex; justify-content: center; margin-bottom: 15px;}
.footer_sns li + li {margin-left: 15px;}
.footer_copy {font-size: 1.2rem; font-weight: 300; text-align: center;}

.fadein {opacity: 0.1; transform: translate(0, 50px); transition: all 500ms;}
.fadein.scrollin {opacity: 1; transform: translate(0, 0);}

.bg_line {position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding-left: 20%; z-index: 0; box-sizing: border-box;}
.bg_line ul {position: relative; width: 100%; height: 100%; border-left: 1px solid #e7ecef; overflow: hidden;}
.bg_line ul li {position: relative; float: left; box-sizing: border-box; height: 100%; width: 25%; border-right: 1px solid #e7ecef;}

.section {position: relative; overflow: hidden;}
.section-wt {position: relative; z-index: 1;}
.section-wt:before {content: ""; position: absolute; top: -100%; right: 0; width: 80%; height: 100%; background-color: #fff; -webkit-transition:	all 1s ease; transition:		all 1s ease;}
.section-wt.scrollbg:before {top: 0;}
.section_inner {position: relative; width: 1240px; margin: 0 auto;}

#pagetop {position: fixed; bottom: 120px; right: 20px; z-index: 50;}

/* PC（1400px以下） */
@media (min-width: 1080px) {
	#contents { width:1060px; margin:auto; padding:60px 0 100px; }
}
@media (max-width: 1400px) {
	.header_inner {width: 100%; padding-left: 2%; padding-right: 2%; box-sizing: border-box;}
	.header_logo {width: 26%;}

	.header.fixed .header_inner {width: 100%; padding-left: 2%; padding-right: 2%;}
}
@media (max-width: 1300px) {
	.section_inner {width: 100%; padding-left: 2%; padding-right: 2%; box-sizing: border-box;}
}
/* タブレット */
@media (max-width: 1080px) {
	.header_inner {padding: 30px 2%;}
	.header_nav ul li.current {border-bottom: 2px solid #000;}

	.header.fixed .header_inner {align-items: center;}

	#contents { padding:30px 20px 100px; }
}
@media (max-width: 800px) {
	.header_nav ul li { font-size: 1.5rem;}
	.header.fixed .header_nav ul li + li {margin-left: 0.25em;}
}
/*スマホ*/
@media (max-width: 680px) {
	.header:after {bottom: -6.5px; height: 13px;}
	.header_logo,
	.header_inner {width: 100%; padding: 0;}
	.header_logo {margin-bottom: 0; box-sizing: border-box;}
	.header_logo h1 {text-align: center;}
	.header_logo h1 a {display: block;}
	.header_logo h1 img {width: 50%;}
	.header_menu {position: absolute; top: -485px; width: 100%; text-align: center; padding: 10px 0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; background-color: #000; z-index: 9;}
	.header_nav ul {display: block;}
	.header_nav ul + ul {border-top: 1px solid #e7ecef;}
	.header_nav ul li {font-size: 2rem; line-height: 2; border-bottom: 1px solid #e7ecef;}
	.header_nav ul li + li {margin-left: 0;}
	.header_nav ul li:last-of-type {border-bottom: none;}
	.header_nav ul li.current {border-bottom: 1px solid #e7ecef;}
	.header_sns ul {justify-content: center;}
	.header_nav_toggle {display: block;}
	.open .header_nav_toggle span:nth-child(1) {top: 11px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg);}
	.open .header_nav_toggle span:nth-child(2) {width: 0; left: 50%;}
	.open .header_nav_toggle span:nth-child(3) {top: 11px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg);}
	.open .header_menu {-moz-transform: translateY(548px); -webkit-transform: translateY(548px); transform: translateY(548px);}

	.header.fixed .header_inner {padding: 5px 0;}
	.header.fixed .header_logo {width: 100%;}
	.header.fixed .header_sns {display: block;}

	.footer {padding: 10px;}
	.footer_logo {top: -45%; width: 20%; margin-left: -10%;}
	.footer_inner {padding: 20px 0 45px}

	#pagetop {bottom: 15%; width: 10%;}
}