@charset "utf-8";
/* ====================================================================================

    MEGA MENU  —  グローバルナビ「商品」ドロップダウン
    2026-08-28 パイグラフィックス

    ★ すべてのセレクタを .mm-panel 配下にスコープしている。
      同じ .Navi--primary--child クラスを使う「よくある質問」のドロップダウンには
      一切影響しない。既存の .Navi--primary--child の定義も変更していない。

    ★ このファイルは wp_enqueue_style で読み込まれるため、header.php に直書きされている
      assets/css/style.css より「前」に出力される（wp_head() が5行目にあるため）。
      そのため読み込み順に頼らず、詳細度で既存定義を上回る形で書いてある。
        既存 .Navi--primary--child          → (0,1,0)
        本CSS .Navi--primary--parent > .mm-panel → (0,2,0)  ← 勝つ
      !important は原則使わない。

    ソースの控えは assets/scss/_megamenu.scss（現状ビルド環境が無いため未コンパイル）

==================================================================================== */

/* ------------------------------------------------------------------
   1. パネル本体
   ------------------------------------------------------------------ */

/* ★落とし穴1対策：既存の bottom / translate を必ず打ち消す。
   打ち消さないまま top を足すと top と bottom の同時指定になり、
   絶対配置要素の高さが 1px に潰れてメニューが消える。 */
.Navi--primary--parent > .mm-panel {
	position: absolute;
	top: 100%;
	bottom: auto;
	left: 0;
	right: auto;
	translate: none;
	height: auto;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-1 * var(--mm-off, 0px));
	background: #fff;
	border-top: 1px solid #ece6dc;
	box-shadow: 0 14px 28px rgba(0, 0, 0, .10);
	padding: 0;
	z-index: 1200;

	/* ★落とし穴2対策：スクロールはこの要素で受ける。
	   マルチカラム（columns）は必ず内側の .mm-inner に置くこと。
	   同じ要素に columns と overflow を置くと、マルチカラムがインライン方向に
	   展開されて scrollWidth が数万pxに伸び、1行分の高さに潰れる。 */
	max-height: var(--mm-max, 70vh);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
}

/* 開くときは遅延なし、閉じるときだけ 250ms 待つ（マウスが少し外れても閉じない） */
.Navi--primary--parent > .mm-panel {
	transition-delay: .25s;
}
/* 開くときは遅延0秒（＝すぐ出る）。さらにメガメニューに限って
   フェードを .4s → .18s に短くし、反応が鈍く感じないようにする。
   ★ .mm-panel にだけ効くので「よくある質問」は従来どおり .4s のまま。 */
.Navi--primary--parent:hover > .mm-panel,
.Navi--primary--parent:focus-within > .mm-panel {
	transition-delay: 0s;
	transition-duration: .18s;
}

/* キーボード操作：Tab でパネル内に入ったら開く（既存の :hover と同じ見え方） */
.Navi--primary--parent:focus-within > .mm-panel {
	visibility: visible;
	opacity: 1;
}

/* Esc で閉じたときは、フォーカスが親リンクに残っていても閉じたままにする */
.Navi--primary--parent.mm-force-close > .mm-panel {
	visibility: hidden;
	opacity: 0;
}

/* ------------------------------------------------------------------
   1-b. JS を使わずに「画面幅いっぱい」「ヘッダー直下」「はみ出さない高さ」を出す

   .Navi--primary > li は position:relative のため、既定ではパネルの基準は li。
   商品の li だけ position:static にすると、基準が #common-header（position:fixed）に移り、
     left/right:0      → ヘッダー幅＝画面幅（左オフセットの計算が要らない）
     top:100%          → ヘッダーの真下（ヘッダー高の取得が要らない）
     calc(100vh - 100%)→ 100% がヘッダー高に解決される（ヘッダー高の取得が要らない）
   となり、.scrolled でヘッダー高が変わっても自動追従する。JS は不要。

   :has() 非対応環境では上の 1. の指定（width:100vw / max-height:70vh）がそのまま使われる。
   ------------------------------------------------------------------ */

@supports selector(:has(*)) {
	.Navi--primary > li:has(> .mm-panel) {
		position: static;
	}
	.Navi--primary--parent > .mm-panel {
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
		margin-left: 0;
		max-height: calc(100vh - 100%);
	}
	/* SP はアコーディオンなので静的配置に戻す */
	@media screen and (max-width: 767px) {
		.Navi--primary > li:has(> .mm-panel) {
			position: relative;
		}
		.Navi--primary--parent > .mm-panel {
			max-height: none;
		}
	}
}

/* ------------------------------------------------------------------
   2. 中身
   ------------------------------------------------------------------ */

.Navi--primary--parent > .mm-panel > .mm-wrap {
	display: block;
	list-style: none;
	/* ★2026-09-21 30px/34px → 24px/26px。ホバー背景を足しても
	   縦800pxに収まるよう、ここで高さを14px取り戻している。 */
	padding: 24px 56px 26px;
	margin: 0;
}

.Navi--primary--parent > .mm-panel .mm-inner {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 4;
	column-gap: 44px;
	/* ★2026-09-21 列の境目が分かるように、ごく薄い縦線を1本だけ引く。
	   余白を広げる案は文字の折り返しが増えるので採らなかった。 */
	column-rule: 1px solid #f1ebe2;
}

.Navi--primary--parent > .mm-panel .mm-group {
	display: block;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.Navi--primary--parent > .mm-panel .mm-head {
	display: block;
	font-family: "Noto Serif JP", "游明朝", "Yu Mincho", serif;
	font-size: 1.15rem;
	letter-spacing: .12em;
	color: #a3937c;
	border-bottom: 1px solid #ece6dc;
	padding: 0 0 7px;
	margin: 0 0 9px;
	line-height: 1.4;
}

.Navi--primary--parent > .mm-panel .mm-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.Navi--primary--parent > .mm-panel .mm-item {
	display: block;
	list-style: none;
	padding: 0;
}

/* 既存 .Navi--primary--child li a (0,1,2) を、(0,4,1) で上回る */
.Navi--primary--parent > .mm-panel .mm-group .mm-list .mm-item > a {
	display: block;

	/* ★2026-09-21 当たり判定を列の端まで広げる。
	   padding で左右に12px足し、同じだけ負の margin で引き戻しているので、
	   文字の位置は変わらないまま、反応する幅と背景だけが外側へ広がる。
	   ★縦は 6px のまま。ここを増やすと1行あたり2px×最大15行で
	     パネルが伸び、47項目が縦800pxに収まらなくなる。 */
	margin: 0 -12px;
	padding: 6px 12px;
	border-radius: 3px;

	font-size: 1.3rem;
	line-height: 1.5;
	color: #3a3a3a;
	text-decoration: none;
	background-color: transparent;
	box-shadow: inset 0 0 0 0 transparent;
	transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* ★2026-09-21 ホバー／フォーカス時は、文字色だけでなく
   行全体に薄い背景と、左端の細いアクセントを出す。
   色はテーマのアクセント #3B1264 を白に7%重ねたもの（#8C6FA9 は同系の中間色）。 */
.Navi--primary--parent > .mm-panel .mm-group .mm-list .mm-item > a:hover,
.Navi--primary--parent > .mm-panel .mm-group .mm-list .mm-item > a:focus-visible {
	color: #3B1264;
	background-color: rgba(59, 18, 100, .07);
	box-shadow: inset 3px 0 0 0 #8C6FA9;
}

/* キーボードのフォーカスは、ホバーと区別できるよう枠線を濃い方の色にする */
.Navi--primary--parent > .mm-panel .mm-group .mm-list .mm-item > a:focus-visible {
	outline: 2px solid #3B1264;
	outline-offset: -2px;
}

/* 「すべての商品」は少し強調 */
.Navi--primary--parent > .mm-panel .mm-group .mm-list .mm-item--all > a {
	font-weight: 600;
}

/* スクリーンリーダー用（テーマに定義が無いため補う） */
.Navi--primary--parent > .mm-panel ~ * .screen-reader-text,
.Navi--primary--parent .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
   3. 画面幅への追従
   ------------------------------------------------------------------ */

/* テーマは 1390px 以下で vw ベースに切り替わるため、余白もそれに合わせる */
@media only screen and (max-width: 1390px) {
	.Navi--primary--parent > .mm-panel > .mm-wrap {
		padding: 1.73vw 4.03vw 1.87vw;
	}
	.Navi--primary--parent > .mm-panel .mm-inner {
		column-gap: 3.17vw;
	}
}

@media only screen and (max-width: 1100px) {
	.Navi--primary--parent > .mm-panel .mm-inner {
		columns: 3;
	}
}

/* ------------------------------------------------------------------
   4. SP（既存のアコーディオンを壊さない）
   ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
	.Navi--primary--parent > .mm-panel {
		position: static;
		width: auto;
		max-width: none;
		margin-left: 0;
		border-top: 0;
		box-shadow: none;
		max-height: none;
		overflow: visible;
		background: rgba(248, 248, 248, .96);
	}
	.Navi--primary--parent > .mm-panel > .mm-wrap {
		padding: 8px 20px 16px;
	}
	.Navi--primary--parent > .mm-panel .mm-inner {
		columns: 1;
	}
	.Navi--primary--parent > .mm-panel .mm-group {
		margin: 0 0 14px;
	}
	.Navi--primary--parent > .mm-panel .mm-head {
		font-size: 1.2rem;
		padding-bottom: 5px;
		margin-bottom: 5px;
	}
	.Navi--primary--parent > .mm-panel .mm-group .mm-list .mm-item > a {
		margin: 0 -10px;
		padding: 9px 10px;
		font-size: 1.4rem;
	}
}