@charset "utf-8";

/* 基本CSS */
html.hidden {
	overflow:hidden;
}
ul,
div,
img {
	margin: 0px;
	padding: 0px;
	list-style: none;
	font-weight: normal;
}
/*header*/
header {
	width:100%;
}
.header_box {
	width:100%;
}
/* チェックボックスを非表示 */
#navi input {
	display: none;
}
#menunavi {
	display: none;
	cursor: pointer;
	cursor: hand;
}
/* ドロップダウンメニュー */
.m_parent {
	position: relative;
}
/* ハンバーガー */
#navi #navibtn {
	display: none;
}


@media screen and (min-width: 1025px) {
	/*PC*/
	#navi {
		background-color: #006fb7;
		position:relative;
		width: 100%;
		margin:auto;
		top: 0;
		left: 0;
		height: 65px;
		z-index:10;
	}
	.menu_box {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	/* 左上ロゴ --------------------------------------------*/
	.menu_box .menu_left {
		width:540px;
		height:65px;
	}
	.menu_left h1 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		height: 65px;
		padding-left:40px;
		margin:0;
		font-size:16px;
		line-height:1.3;
		font-weight:bold;
	}
	.menu_left h1 a {
		display: grid;
		place-items:center;
		padding:0;
		width:auto;
		max-width:280px;
		color:#fff;
	}
	.menu_right {
		width:calc(100% - 540px);
	}
	/* 上部メニュー --------------------------------------------*/
	ul.menu {
		width:100%;
		display: flex;
		flex-wrap: wrap;
		height:65px;
	}
	.menu > li.m_parent {
		display:inline-block;
		position:relative;
		padding-right:23px;
	}
	/* 上部メニューの最後の項目 */
	.m_parent:last-child {
		margin-right: 0px;
	}
	.menu > li.m_parent:not(:last-child)::after {
		content:"/";
		display:inline-block;
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		color:#fff;
		font-size:16px;
	}
	.m_parent.pc-item-box span {
		height: 65px;
	}
	.m_parent > a, .m_parent.pc-item-box {
		display: flex;
		justify-content: center;
		align-items: center;
		position:relative;
		height:65px;
		color:#fff;
		text-decoration:none;
		cursor: pointer;
		transition: initial;
	}
	.m_parent > a >span, span.pc-item {
		display: grid;
		place-items: center;
		font-weight:bold;
		font-size:16px;
	}
	.m_parent > a, span.pc-item {
		position:relative;
	}
	.m_parent > a:hover::after, span.pc-item:hover::after {
		content:"";
		display:block;
		position:absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		width:18px;
		height:14px;
		background-image:url(../img/tmp/m_current.svg);
		background-repeat:no-repeat;
		background-size: contain;
	}
	.m_parent.pc-item-box label {
		display:none;
	}
	.m_parent .m_child {
		display: none;
	}
	.m_parent .sp-item {
		display:none;
	}
	/*PC*/
	.pc_m_child {
		visibility: hidden;
		opacity: 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s, padding 0.3s;
	}
	.pc_m_child.active {
		visibility: visible;
		opacity: 1;
		max-height: initial;
		width:200px;
		background:#fff;
		border-radius: 0 0 1em 1em;
		padding:1.8em 1em 0.5em;
		position:relative;
		border:solid 2px #006fb7;
		overflow: visible;
		margin-left:8px;
	}
	.pc_m_child.active::before {
		content:"";
		position:absolute;
		top: -16px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		width:24px;
		height:16px;
		background-image:url(../img/tmp/pc_m_child_current.svg);
		background-repeat:no-repeat;
		background-size: contain;
		background-color:#006fb7;
	}
	.pc_m_child.active ul {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	.pc_m_child.active ul li {
		width: 50%;
		padding-right:0.3em;
		margin-bottom:0.7em;
		font-size:16px;
		text-align:center;
	}
	.pc_m_child.active ul li:first-child {
		border-right:solid 1px #006fb7;
	}
	.pc_m_child.active ul li > a {
		color: #006fb7;
		font-weight:bold;
	}
	.pc_m_child.active ul li > a:hover {
		text-decoration:underline;
	}

	/* 子メニュー */
	.m_child li {
		border-bottom: 1px solid #E6E2D4;
		background:#FFFBEB;
		padding-left: 40px;
	}
}

@media screen and (max-width: 1360px) {
	/* 左上ロゴ --------------------------------------------*/
	.menu_box .menu_left {
		width:35%;
	}
	.menu_right {
		width:65%;
	}
}
@media screen and (max-width: 1100px) { 
	/* 左上ロゴ --------------------------------------------*/
	.menu_box .menu_left {
		width: 350px;
	}
	.menu_right {
		width:calc(100% - 350px);
	}
}

@media screen and (max-width: 1024px) {
	/*SP*/
	html.hidden header {
		height:65px;
	}
	.header_box {
		padding:0;
	}
	#navi {
		position:relative;
		width: 100%;
		margin:0;
		top: 0;
		left: 0;
		height: 65px;
		z-index:10;
	}
	/* SP V を表示 */
	.m_parent .pd {
		display: inline-block;
		width: 100%;
	}
	/* 左上ロゴ --------------------------------------------*/
	.menu_box {
		background:#006fb7;
	}
	.menu_left {
		height:65px;
		width:100%;
		max-width:100%;
	}
	.menu_left h1 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		height: 65px;
		padding-left:40px;
		margin:0;
		font-size:16px;
		line-height:1.3;
		font-weight:bold;
	}
	.menu_left h1 a {
		display: grid;
		place-items:center;
		padding:0;
		width:auto;
		max-width:280px;
		color:#fff;
	}
	.menu_right {
		width:100%;
		padding: 0 1em;
        background: #00509e;
	}
	
	/* ドロップダウンメニュー */
	.m_parent {
		height: auto;
		width: 100%;
		padding: 0px 10px;
		border-bottom: 1px solid #E6E2D4;
	}
	.m_parent.pc-item-box {
		padding: 0px;
	}
	.m_parent a span,
	.m_parent span.sp-item {
		font-weight:bold;
		padding:0.65em 0;
		display:inline-block;
	}
	.m_parent span.sp-item {
		padding-left:10px;
	}
	.m_parent:first-child {
		padding-top:1em;
	}
	.m_parent:last-child {
		margin-bottom:2em;
	}
	.m_parent .pc-item {
		display:none;
	}
	.m_parent i {
		padding: 0px 6px;
		font-style: normal;
		display: inline-block;
		width: 30px;
		height: 27px;
	}
	/* メニューを移動させないため */
	#menunavi:checked ~ #navi {
		position: fixed;
		overflow-y: scroll;
		overflow-x: hidden;
		height: 100vh;
		height: 100dvh;
	}
	#menunavi:checked ~ .fade {
		visibility: visible;
		opacity: 0.2;
		transition-delay: 0.2s;
		z-index:9;
	}
	.pc_m_child {
		display:none;
	}
	.menu {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.4s ease-in-out;
		background:#00509e;
		color:#fff;
	}
	.menu a {
		color:#fff;
		text-decoration:none;
		display:block;
	}
	/* ハンバーガーメニューがクリックされた時 */
	#menunavi:checked ~ * .menu {
		max-height: calc(100dvh - 65px);
    	overflow-y: auto;
    	transition: max-height 0.4s ease-in-out;
	}
	#menunavi:checked ~ * .m_parent {
    	max-height: inherit;
    	overflow-y: visible;
	}
	#menunavi .m_parent {
    	max-height: inherit;
    	overflow-y: visible;
	}
	/* 子メニュー */
	.m_parent .m_child {
		visibility:visible;
		position: relative;
		padding: 0;
		opacity: 1;
		top: 0;
		margin-left: auto;
		left: auto;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	/* 子メニュー */
	.m_child li {
		padding-left:0;
		width:50%;
		text-align:center;
	}
	.m_child li a {
		padding-bottom:0.5em;
	}
	.m_parent > label:hover {
    	cursor: pointer;
    	cursor: hand;
	}
	#navi #navibtn {
		display: block;
		position: absolute;
		top: 10px;
		right: 10px;
	}
	#navibtn span {
		display: block;
		width: 40px;
		height: 40px;
	}
	#navibtn span span {
		display: block;
		overflow: hidden;
		width: 1px;
		height: 1px;
	}
	#navibtn span span::before,
	#navibtn span span::after,
	#navibtn span::after {
		position: absolute;
		left:5px;
		content:"";
		width: 30px;
		height: 2px;
		background-color: #fff;
	}
	/* 上の棒 */
	#navibtn span span::before {
    	top:10px;
		transition: transform 0.3s ease;
	}
	#menunavi:checked ~ #navi label#navibtn span span::before {
		top:19px;
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}
	/* 下の棒 */
	#navibtn span::after {
		bottom:10px;
		transition: transform 0.3s ease;
	}
	#menunavi:checked ~ #navi label#navibtn > span::after {
		bottom:18px;
		transform: rotate(-135deg);
		-webkit-transform: rotate(-135deg);
	}
	/* 中の棒 */
	#navibtn span span::after {
		top:18px;
	}
	#menunavi:checked ~ #navi label#navibtn span span::after {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	.menu_box .menu_left {
		width: calc(100% - 60px);
	}
	.menu_right {
		width:100%;
	}
	.menu_left h1 {
		padding-left:10px;
	}
}
@media screen and (max-width: 399px) {
	.menu_left h1 {
		font-size: 4vw;
	}
}

/*背景を暗くする部分*/
.fade {
	position: fixed;
	top:0px;
	left: 0;
	width:100%;
	height:100%;
	background-color:#000000;
	visibility: hidden;
	opacity: 0;
	transition: transform .2s;
}
.fade.open_delay{
	visibility: visible;
	opacity: 0.2;
	transition-delay: 0.2s;
	z-index:9;
}