@charset "utf-8";

/*------------------------------------------------------------
色
------------------------------------------------------------*/
:root {
	--color_main: #0A3864;
	--color_main_rgb: 10,56,100;
	--color_light: #e4f0fc;
	--color_light_gray: #f6f6f6;
	--color_sub: #F00;
	--color_nav: #0F5495;
}

.home .body_wrap > div:nth-of-type(odd) {
	background: var(--color_light);
}

/*------------------------------------------------------------
ヘッダー
------------------------------------------------------------*/
.g-nav{
	font-size: 14px;
	font-feature-settings: "palt";
	letter-spacing: .06em;
}

.g-nav ul{
	display: flex;
	justify-content: flex-end;
}

.g-nav ul ul{
	display: block;
}

.g-nav ul li{
	position: relative;
}

.g-nav ul li a,
.g-nav ul li span{
	display: block;
	font-weight: bold;
	padding: 15px;
	transition: all .3s;
}

.g-nav_logo img{
	display: block;
	height: 30px;
	filter: drop-shadow(0 0 10px #fff);
}

@media (min-width:1001px){
	.g-nav_inner{
		width: 80%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.g-nav ul li a:hover,
	.g-nav ul li span:hover{
		cursor: pointer;
	}

	/*1階層目*/
	.g-nav > div > ul > li > a,
	.g-nav > div > ul > li > span{
		display: flex;
		justify-content: center;
		align-items: center;
		/*min-width: 120px;*/
		height: 70px;
		text-align: center;
	}
}

@media screen and (max-width:1000px){
	.g-nav_logo{
		display: none;
	}

	.g-nav ul{
		display: block;
	}

	.g-nav ul li a,
	.g-nav ul li span{
		padding: 15px 15px 15px 40px;
	}

	/*1階層目*/
	.g-nav > div > ul > li > a,
	.g-nav > div > ul > li > span{
		position: relative;
	}

	.g-nav > div > ul > li > a:before,
	.g-nav > div > ul > li > span:before{
		content: "";
		position: absolute;
		left: 20px;
		top: calc(50% - 5px);
		width: 5px;
		height: 10px;
		clip-path: polygon(0 0, 100% 50%, 0% 100%);
		background: var(--color_main);
	}

	/*登録ボタン*/
	.signup{
		padding: 15px 15px 60px;
	}

	.signup a{
		border-radius: 100px;
		text-align: center;
	}

	.signup a span{
		position: relative;
		display: inline-block;
		padding: 0 0 0 30px;
	}

	.signup a span:before{
		display: inline-block;
		content: '';
		position: absolute;
		top: calc(50% - 10px);
		left: 0;
		width: 20px;
		height: 20px;
		background: url(../images/signup_white.svg) center / auto 20px no-repeat;
	}
}

/*----------------------------------------
アコーディオン
----------------------------------------*/
.g-nav li.has-child ul{
	position: absolute;
	left: calc(50% - 100px);
	z-index: 4;
	width: 200px;
	visibility: hidden;
	opacity: 0;
	transition: all .3s;
}

.g-nav li.has-child:hover > ul,
.g-nav li.has-child ul li:hover > ul,
.g-nav li.has-child:active > ul,
.g-nav li.has-child ul li:active > ul{
	visibility: visible;
	opacity: 1;
}

.g-nav li.has-child ul ul{
	top: 0;
	left: -200px;
}

@media screen and (max-width:1000px){
	.g-nav li.has-child ul,
	.g-nav li.has-child ul ul{
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		visibility: visible;
		opacity: 1;
		display: none;
		transition: none;
	}

	.g-nav li.has-child ul li a:before,
	.g-nav li.has-child ul li span:before{
		content: "－";
		padding: 0 0.5em 0 1em;
	}

	.g-nav li.has-child ul ul li a:before,
	.g-nav li.has-child ul ul li span:before{
		padding-left: 2em;
	}
}

/*----------------------------------------
スマホ開閉
----------------------------------------*/
@media screen and (max-width:1000px){
	.g-nav{
		position: fixed;
		z-index: 999;
		top: 0;
		right: -120%;
		width: 70%;
		height: 100vh;
		padding-top: 60px;
		transition: all 0.6s;
	}
	
	.g-nav.panelactive{
		right: 0;
	}
	
	.g-nav.panelactive .g-nav_inner{
		height: calc(100vh - 130px);
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	/*--------------------
	ハンバーガーボタン
	--------------------*/
	.openbtn{
		position :fixed;
		z-index: 9999;
		top: 0;
		right: 0;
		cursor: pointer;
		width: 60px;
		height: 60px;
		/*メインカラーの薄い色*/
		/*「coolors」で一番薄い色推奨*/
		background: var(--color_light);
		border-radius: 0 0 0 10px;
	}
	
	.openbtn:before{
		content: '';
	}
	
	.openbtn span{
		top: 28px;
		right: 15px;
		overflow: visible;
	}
	
	.openbtn span,
	.openbtn span:before,
	.openbtn span:after{
		position: absolute;
		content: '';
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background: var(--color_main);
		transition: all 0.5s;
	}
	
	.openbtn span:before{
		bottom: 8px;
	}
	
	.openbtn span:after{
		top: 8px;
	}
	
	.openbtn.active span{
		background: transparent;
	}
	
	.openbtn.active span:before{
		bottom: 0;
		transform: rotate(45deg);
	}
	
	.openbtn.active span:after{
		top: 0;
		transform: rotate(-45deg);
	}
}

/*----------------------------------------
色設定
----------------------------------------*/
.signup a{
	padding: 15px;
	/*メインカラー*/
	background: var(--color_main);
	color: #fff;
}

@media (min-width:1001px){
	#header.fixed .g-nav{
		background: rgba(255,255,255,0.8);
	}

	.g-nav li.has-child ul{
		/*メインカラーより少し薄い色*/
		/*「coolors」で2つ上の色推奨*/
		background: var(--color_nav);
	}

	/*1階層目*/
	.g-nav > div > ul > li > a,
	.g-nav > div > ul > li > span{
		color: var(--color_main);
	}

	/*1階層目（トップページ）*/
	.home .g-nav > div > ul > li > a,
	.home .g-nav > div > ul > li > span{
		color: #fff;
	}

	/*1階層目（トップページ固定）*/
	.home .fixed .g-nav > div > ul > li > a,
	.home .fixed .g-nav > div > ul > li > span{
		color: var(--color_main);
	}

	/*1階層目　ホバー時*/
	.g-nav > div > ul > li > a:hover,
	.g-nav > div > ul > li > span:hover{
		opacity: 0.8;
	}

	/*2～3階層目*/
	.g-nav li.has-child ul li a,
	.g-nav li.has-child ul li span{
		color: #fff;
		border-bottom: 1px solid rgba(255,255,255,0.6);
	}
	
	.g-nav li.has-child ul li:last-child a,
	.g-nav li.has-child ul li:last-child span{
		border-bottom: none;
	}

	/*2～3階層目　ホバー時*/
	.g-nav li.has-child ul li a:hover,
	.g-nav li.has-child ul li a:active,
	.g-nav li.has-child ul li span:hover,
	.g-nav li.has-child ul li span:active{
		background: var(--color_main);
	}

	/*登録ボタン*/
	.signup a:hover{
		opacity: 0.8;
		color: #fff;
	}
}

@media screen and (max-width:1000px){
	.g-nav{
		background: var(--color_light);
	}
}

/*----------------------------------------
固定
----------------------------------------*/
@media (min-width:1001px){
	.home .g-nav,
	#header.fixed .g-nav{
		width: 100%;
		left: 0;
		top: 0;
		z-index: 99999;
	}

	.home .g-nav{
		position: absolute;
	}

	#header.fixed .g-nav{
		position: fixed;
		animation: slideDown 0.5s ease;
	}
	
	body:not(#home) #header.fixed+.body_wrap {
		padding-top: 70px;
	}

	@keyframes slideDown{
		0% {
			top: -50px;
		}
		100% {
			top: 0px;
		}
	}
}

/*----------------------------------------
表示非表示
----------------------------------------*/
@media (min-width:1001px){
	.g-nav_sp-only{
		display: none;
	}
}

@media screen and (max-width:1000px){
	.g-nav_pc-only{
		display: none;
	}
}

/*----------------------------------------
スマホ下層ページ　トップロゴ
----------------------------------------*/
@media (min-width:1001px){
	.header_logo{
		display: none;
	}
}

@media screen and (max-width:1000px){
	.header_logo{
		display: flex;
		align-items: center;
		height: 60px;
		padding: 0 70px 0 10%;
	}

	.header_logo img{
		display: block;
		height: 24px;
	}
}

@media screen and (max-width:767px){
	.header_logo{
		padding: 0 70px 0 15px;
	}
}