@charset "utf-8";
/* :::::: Header :::::: */
.l-header {
	width: 100%;
	gap: 0.3em 1em;
	position: fixed;
	margin-inline: auto;
	padding: 0 var(--sidegap);
	z-index: 10;
	background-color: #005D64;
}
/* .header_bg-color{
	width: 100%;
	position:fixed;
	z-index: 9;
	height:80px;
	top: 0;
	background-color: #9d9e9e;
	mix-blend-mode: multiply;
} */
.l-header a {display: block;}
.l-header .logo {stroke: var(--themecolor);line-height: 1; display: flex;width: 100%;align-items:center; gap:var(--sidegap);}
.l-header .logo img{height: 30px;}
.l-header .nav_list {display: flex;position: relative;font-size: .875rem;line-height: 1.2;font-weight: 700;white-space: nowrap;}
.l-header .nav_list a {padding: 1em;}

/* 下向き矢印のとこまでリンクエリアを広げる */
.l-header .nav_list a:not(:last-child) {position: relative;}
.l-header .nav_list a:not(:last-child)::after {content: "";position: absolute;inset: 0 -2em 0 0;}
.l-header .nav_list a:not(:last-child) {padding-right: 0;}

/* ドロップダウン用のボタンを追加 */
.l-header .nav_list button {width: 3.2em;padding: 1em 2em 1em .5em;color: inherit;line-height: 0;}
.is-touch .l-header .nav_list button {position: relative;}
.l-header .nav_list button svg {pointer-events: none;width: .5em;height: .5em;fill: none;stroke: currentcolor;stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;}
@media (any-hover: hover) {
	.l-header .nav_list a {transition: color .4s;}
	.l-header .nav_list a:hover {color: #86c0de;transition-duration: .1s;}
}

	.l-header {justify-content: center;justify-items: center;padding-block: 1em;display: flex;justify-content: space-between;}
	.l-header .nav {z-index: 2;position: relative;inset: 0;height: 100%;}
	.l-header .nav::before {content: "";z-index: -1;position: fixed;inset: 0;background: var(--themecolor);opacity: .1;transition: opacity .4s;}
	.l-header .nav_list {flex-direction: column;row-gap: .3em;overflow: auto;position: fixed;top: 0;right: 0;padding: 56px 2em;background: white;height: 100%;clip-path: inset(0);}
	
	/* スクロールバーを消す */
	.l-header .nav_list {scrollbar-width: none;scrollbar-color: transparent;-webkit-overflow-scrolling: touch;}
	.l-header .nav_list::-webkit-scrollbar {width: 0;height: 0;}
	.l-header .nav_list::-webkit-scrollbar-thumb,
	.l-header .nav_list::-webkit-scrollbar-track {background: transparent;}
	.l-header .nav_list li {display: grid;grid-template-columns: auto auto 1fr;}
	/* JavaScript で .is-open を付けてドロワーする */
	.l-header .nav_list.is-anim {transition: clip-path .4s var(--easeInOut);}
	.l-header .nav:not(.is-open) {pointer-events: none;}
	.l-header .nav:not(.is-open)::before {opacity: 0;}
	.l-header .nav_list:not(.is-open) {clip-path: inset(0 0 0 100%);}
	.l-header .nav_list li.is-active svg {color: #86c0de;}
	
	/* ハンバーガーボタン */
	.l-header .nav_toggle {pointer-events: auto;display: grid;place-items: center;z-index: 1;position: relative;width: 48px;height: 48px;color: var(--color-light);}
	.l-header .nav_toggle svg {grid-area: 1 / 1;position: absolute;overflow: visible;fill: none;stroke: currentcolor;stroke-width: 2;stroke-linecap: round;transition: opacity .4s var(--easeInOut), transform .4s var(--easeInOut);}
	.l-header .nav_toggle .b1 {transform: translateY(-8px);}
	.l-header .nav_toggle .b3 {transform: translateY(8px);}
	/* カーソルを乗せると色が変わる */
	@media (any-hover: hover) {
		.l-header .nav_toggle {transition: color .4s;}
		.l-header .nav_toggle:hover {color: #86c0de;transition-duration: .1s;}
		.l-header .nav_toggle {cursor: pointer;}
	}
	/* ドロワーが開くとバツになる */
	.l-header .nav_toggle.is-open .b1 {transform: rotate(-45deg);color: var(--themecolor);}
	.l-header .nav_toggle.is-open .b2 {opacity: 0;transform: rotate(-90deg);}
	.l-header .nav_toggle.is-open .b3 {transform: rotate(-135deg);color: var(--themecolor);}