@charset "UTF-8";
/* ==================================================================
 * ヘッダー・ロゴ・グローバルナビ（共通パーツ / 1-b）
 *
 * 🚨 **画像パスに注意**
 * このファイルは `css/parts/` にあるため、`url()` の相対パスは
 * 既存のCSSの `../img/` ではなく **`../../img/`** になる。
 * 1階層深くなったことを見落とすとハンバーガーの画像が消える。
 *
 * 【方針】
 * - ベンダープレフィックスを削除
 * - 4pxスケールに乗る値は tokens.css の変数へ
 * ★スケールに乗らない一点物（8vw / 4vw / 22px など）は**そのまま残す**。
 * 無理に近い値へ寄せると見た目が変わるため。
 *
 * 🚨 **トークンを使ってよいのは「既存のCSSにPC用の上書きがある宣言」だけ。**
 * トークンは751pxで vw → px に切り替わる。既存のCSSに上書きが無い宣言は
 * PC幅でも vw のまま効くので、トークンにすると**PCでの値が変わる**。
 * ================================================================== */

/* --- ヘッダーの器 --------------------------------------------------- */

@media screen and (max-width: 751px) {
	.m-header-container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
	}

	.m-header-container .bg {
		width: 100%;
		background: var(--color-bg);
	}
}

/* --- ロゴ ----------------------------------------------------------- */

.m-logo-primary a {
	display: block;
	width: 29.33333vw;   /* = 110px @375。一点物 */
	padding: 4vw;        /* = 15px @375。一点物 */
}

/* 🚨 img に width/height 属性を付けてはいけない（CSSで幅だけ指定しているため） */
.m-logo-primary a img {
	width: 100%;
}

.m-logo-secondary {
	display: block;
	width: 41.86667vw;   /* = 157px @375 */
}

.m-logo-secondary img {
	width: 100%;
	padding: var(--space-10);
}

.m-logo-copyright {
	display: inline-block;
	font-size: var(--font-10);
}

.m-logo-trademark {
	display: inline-block;
	padding-top: 20px;   /* ★スマホでも px */
	font-size: var(--font-10);
}

@media screen and (min-width: 751px) {
	.m-logo-primary a {
		width: 200px;
		padding: var(--space-20);
	}

	.m-logo-secondary {
		width: 314px;
	}

	.m-logo-secondary img {
		padding: var(--space-20);
	}

	.m-logo-copyright {
		font-size: var(--font-12);
	}

	.m-logo-trademark {
		font-size: .5rem;   /* = 8px。トークンのスケール外の一点物 */
	}
}

/* --- グローバルナビ -------------------------------------------------- */

.m-gnav-item {
	color: var(--color-bg);
	background-color: var(--color-text);
	border-bottom: var(--border-thin) solid var(--color-gray-300);
}

.m-gnav-item > a {
	display: block;
	padding: var(--space-16);
	font-size: var(--font-16);
	color: var(--color-bg);
}

@media screen and (min-width: 751px) {
	.m-gnav-item {
		color: inherit;
		background-color: var(--color-bg);
		border: none;
	}

	.m-gnav-item > a {
		padding: 22px var(--space-20);   /* 22px は一点物 */
		font-size: var(--font-16);
		font-weight: normal;
		color: inherit;
	}

	.m-gnav-item > a:hover {
		opacity: .6;
	}
}

/* --- スマホのナビ開閉 ------------------------------------------------ */

@media screen and (max-width: 751px) {
	.js-gnav-container-sp.m-header-gnav {
		height: 100vh;
		background-color: var(--color-white-a85);
	}

	.js-gnav-container-sp[data-toggle-state="open"] {
		display: block;
	}

	.js-gnav-container-sp[data-toggle-state="close"] {
		display: none;
	}
}

/* 閉じるボタン */
/*
 * 🚨 ここはトークンを使わない。
 * 既存のCSSに **PC用の上書きが無い**ため、PC幅でも vw のまま効く。
 * トークン（751pxで px に切り替わる）を使うと **PCでの値が変わってしまう**
 * （例: 3.2vw は 1280px 幅で約41px。--space-12 の 12px とは別物）。
 */
.m-header-gnav-closer {
	position: absolute;
	top: 1.06667vw;
	right: 3.2vw;
	z-index: 10;
	width: 8vw;            /* = 30px @375 */
	height: 10.66667vw;    /* = 40px @375 */
	font-size: 3.2vw;
}

/*
 * 🚨 既存のCSSは `<a class="m-icon-hamburger">` だが、このテーマは **<button>** にした
 * （リンクではなく操作なので button が正しい）。
 * そのため既存の `.m-header-gnav-closer a` が当たらず、
 * **幅・高さが無くなってハンバーガーが消える**。
 * 要素名ではなくクラスで指定する。
 */
.m-header-gnav-closer a,
.m-header-gnav-closer .m-icon-hamburger {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 1.33333vw;
	text-align: center;
}

.m-header-gnav-closer a::after,
.m-header-gnav-closer .m-icon-hamburger::after {
	position: absolute;
	bottom: 15%;
	left: 50%;
	display: block;
	font-size: 1.86667vw;   /* = 7px @375。トークンのスケール外 */
	content: attr(data-toggle-text);
	transform: translate(-50%, 0);
}

/* ハンバーガー */
.m-icon-hamburger span {
	display: none;
}

.m-icon-hamburger span:first-child {
	display: block;
	width: 100%;
	height: 80%;
	margin: 0;
	background: url("../../img/cmn/open.png") center no-repeat;
	background-size: contain;
}

.m-icon-hamburger[data-toggle-state="open"] span {
	display: none;
}

.m-icon-hamburger[data-toggle-state="open"] span:first-child {
	display: block;
	background-image: url("../../img/cmn/close.png");
}