/* ==========================================================================
   MAKE MEDICAL — 製品ラインナップのメガメニュー（2026-08-25）
   PCパネル＝.mm-mega（parts/megamenu.php）／モバイルのアコーディオン＝.mm-mega-m（parts/megamenu-mobile.php）
   ・全ページ共通ヘッダーに載るので、このファイルの指定は .mm-mega／.mm-mega-m の配下に限定する
     （例外＝JSが開いている間だけトリガーの li に付ける .mm-mega-on。クラスが無ければ何も変えない）
   ・トップページは _shared.css を読まず _top.css だけを読む。両方の :root に共通で存在するトークンは
       --tiffany --tiffany-rgb --teal-ink --gold --sand --serif --sans --line --on-tiff --sub --tx --ink
     の12個だけなので、それ以外はここでフォールバック付きの自前変数にしてから使う
   ・型＝ぞろ屋 parts-catalog megamenu-05（画像カード型＋全リンク帯）＋ megamenu-01 の hover 意図判定
   ========================================================================== */

.mm-mega,.mm-mega-m{
  --mm-gold-d:var(--gold-d,#8a6800);
  --mm-gold-h:var(--gold-h,#a97f00);
  --mm-tx-d:var(--tx-d,#0d6470);
  --mm-muted:var(--muted,#69727d);
  --mm-tiff-l:var(--tiff-l,#81d8d0);
  --mm-tiff-pale:var(--tiff-pale,#f2fbfa);
  --mm-cyan-br:var(--cyan-br,#00dfda);
  --mm-mono:var(--mono,'Space Grotesk',ui-monospace,monospace);
}

/* ---------- トリガー（WPメニューの「製品ラインナップ」）：開いている間だけ下線を出す ---------- */
.nav ul li.mm-mega-on>a{color:var(--on-tiff);border-color:var(--gold-on-tiff,#6f5400)}

/* ---------- PCパネル：ヘッダー直下・全幅・白地・上に細いティファニー罫・下だけ角丸16px ---------- */
.mm-mega{position:absolute;left:0;right:0;top:100%;z-index:5;
  background:#fff;color:var(--ink);font-family:var(--sans);text-align:left;line-height:1.6;
  border-top:1px solid var(--tiffany);border-radius:0 0 16px 16px;
  box-shadow:0 34px 56px -30px rgba(4,52,58,.45);
  max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
.mm-mega.is-open{opacity:1;visibility:visible;transform:none;
  transition:opacity .22s ease,transform .22s ease,visibility 0s}
.mm-mega__in{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:26px 0 26px}

/* 見出し署名：英字の小見出し（罫＋モノ）＋日本語 */
.mm-mega__lb{display:flex;align-items:center;gap:12px;margin:0 0 12px;
  font-family:var(--mm-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--mm-gold-d)}
.mm-mega__lb::before{content:"";flex:0 0 auto;width:22px;height:2px;background:var(--tiffany)}
.mm-mega__lb b{font-family:var(--sans);font-size:.92rem;letter-spacing:.02em;text-transform:none;color:var(--teal-ink);font-weight:700}

/* ① 水素吸入器：5機種の画像カード（1120px幅で1枚≒213px） */
.mm-mega__cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.mm-mega__card{position:relative;display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  text-decoration:none;color:var(--ink);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.mm-mega__card:hover,.mm-mega__card:focus-visible{transform:translateY(-3px);border-color:var(--mm-tiff-l);
  box-shadow:0 18px 30px -22px rgba(4,52,58,.5)}
.mm-mega__card:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.mm-mega__card.is-hero{border-color:var(--gold)}
.mm-mega__ph{display:flex;align-items:center;justify-content:center;height:150px;padding:10px;
  background:linear-gradient(180deg,#fff,var(--sand))}
.mm-mega__ph img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:0}
.mm-mega__bd{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px}
.mm-mega__nm{font-family:var(--serif);font-weight:700;font-size:1.05rem;line-height:1.3;letter-spacing:.02em;color:var(--teal-ink)}
.mm-mega__tag{font-size:.74rem;line-height:1.5;color:var(--sub)}
.mm-mega__spec{font-family:var(--mm-mono);font-size:.7rem;line-height:1.5;letter-spacing:.04em;color:var(--tx)}
.mm-mega__pr{font-family:var(--serif);font-weight:700;font-size:.95rem;line-height:1.3;color:var(--mm-tx-d);margin-top:4px;white-space:nowrap}
.mm-mega__pr small{font-family:var(--sans);font-size:.68rem;font-weight:400;color:var(--mm-muted);margin-left:.35em}
.mm-mega__badge{position:absolute;top:10px;left:10px;z-index:1;background:var(--gold);color:#fff;
  font-size:.62rem;font-weight:700;letter-spacing:.06em;line-height:1;padding:5px 10px;border-radius:99px}
.mm-mega__more{display:inline-flex;align-items:center;gap:.4em;margin-top:12px;min-height:36px;padding:0 2px;
  font-size:.88rem;font-weight:700;color:var(--tx);text-decoration:none}
.mm-mega__more span{color:var(--tiffany);transition:transform .2s}
.mm-mega__more:hover{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.mm-mega__more:hover span{transform:translateX(3px)}

/* ②③ 下段：左＝付属品4カード（2×2）、右＝ご購入・レンタル */
.mm-mega__row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:36px;
  margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.mm-mega__col{min-width:0}
.mm-mega__acc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.mm-mega__ai{display:flex;align-items:center;gap:12px;min-height:68px;padding:8px 12px 8px 8px;
  background:#fff;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.mm-mega__ai:hover,.mm-mega__ai:focus-visible{transform:translateY(-2px);border-color:var(--mm-tiff-l);
  box-shadow:0 14px 26px -20px rgba(4,52,58,.5)}
.mm-mega__ai:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.mm-mega__ai img{flex:0 0 auto;width:52px;height:52px;object-fit:contain;display:block;margin:0;padding:4px;
  background:#fff;border:1px solid var(--line);border-radius:8px}
.mm-mega__ai span{min-width:0}
.mm-mega__ai b{display:block;font-size:.88rem;font-weight:700;line-height:1.4;color:var(--teal-ink)}
.mm-mega__ai small{display:block;font-size:.74rem;line-height:1.5;color:var(--sub);margin-top:2px}

.mm-mega__buy{display:flex;flex-direction:column;gap:12px}
/* 主導線：ゴールド地＋濃い文字（_shared.css の .btn.gold と同じ配色） */
.mm-mega__trial{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:50px;padding:12px 20px;
  background:var(--gold);color:#2a1f00;font-weight:700;font-size:.95rem;letter-spacing:.02em;border-radius:6px;
  text-decoration:none;box-shadow:0 10px 24px -14px rgba(191,145,0,.7);transition:background .25s,transform .25s}
.mm-mega__trial:hover{background:var(--mm-gold-h);color:#2a1f00;transform:translateY(-2px)}
.mm-mega__trial:focus-visible{outline:3px solid var(--teal-ink);outline-offset:2px}
.mm-mega__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
.mm-mega__lk{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:8px 2px;
  border-bottom:1px solid var(--line);font-size:.88rem;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.mm-mega__lk::after{content:"→";color:var(--tiffany);font-size:.9em;transition:transform .2s}
.mm-mega__lk:hover{color:var(--tx)}
.mm-mega__lk:hover::after{transform:translateX(3px)}
.mm-mega__lk:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ナビが隠れる幅（_shared.css／_top.css とも 1040px）ではPCパネルを出さない。モバイルはアコーディオンが担う */
@media(max-width:1040px){.mm-mega{display:none}}

/* ---------- モバイルメニュー内のアコーディオン（.mobile-menu > .mm-inner の中） ---------- */
.mm-mega-m{display:flex;flex-direction:column;border-bottom:1px solid rgba(255,255,255,.14)}
/* 開閉ボタンは .mm-inner>a と同じ見た目（明朝 1.32rem・白） */
.mm-mega-m__tg{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:16px 4px;cursor:pointer;text-align:left;
  font-family:var(--serif);font-size:1.32rem;font-weight:700;line-height:1.3;color:#fff}
.mm-mega-m__tg:hover{color:var(--mm-cyan-br)}
.mm-mega-m__tg:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.mm-mega-m__ic{position:relative;flex:0 0 auto;width:18px;height:18px}
.mm-mega-m__ic::before,.mm-mega-m__ic::after{content:"";position:absolute;background:currentColor;transition:transform .3s,opacity .3s}
.mm-mega-m__ic::before{top:8px;left:0;width:18px;height:2px}
.mm-mega-m__ic::after{top:0;left:8px;width:2px;height:18px}
.mm-mega-m.is-open .mm-mega-m__ic::after{transform:rotate(90deg);opacity:0}
/* 開閉は grid の 0fr→1fr。閉じている間は visibility で隠してタブ順から外す */
.mm-mega-m__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.mm-mega-m.is-open .mm-mega-m__body{grid-template-rows:1fr}
.mm-mega-m__inner{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .32s}
.mm-mega-m.is-open .mm-mega-m__inner{visibility:visible;transition:visibility 0s}
.mm-mega-m__pad{display:flex;flex-direction:column;gap:2px;padding:2px 4px 18px}
.mm-mega-m__all{display:inline-flex;align-items:center;gap:.4em;min-height:44px;padding:8px 6px;
  font-size:.92rem;font-weight:700;color:var(--tiffany);text-decoration:none}
.mm-mega-m__all:hover{color:#fff}
.mm-mega-m__lb{margin:12px 0 4px;padding:0 6px;font-family:var(--mm-mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:700;color:var(--tiffany)}
.mm-mega-m__it{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 6px;border-radius:10px;
  text-decoration:none;color:#fff;transition:background .2s}
.mm-mega-m__it:hover,.mm-mega-m__it:focus-visible{background:rgba(255,255,255,.08)}
.mm-mega-m__it:focus-visible{outline:3px solid var(--gold);outline-offset:0}
.mm-mega-m__it img{flex:0 0 auto;width:40px;height:40px;object-fit:contain;display:block;margin:0;padding:3px;background:#fff;border-radius:8px}
.mm-mega-m__it span{min-width:0}
.mm-mega-m__it b{display:block;font-family:var(--serif);font-size:1rem;font-weight:700;line-height:1.3;color:#fff}
.mm-mega-m__it small{display:block;font-size:.76rem;line-height:1.5;color:rgba(255,255,255,.78);margin-top:2px}
.mm-mega-m__it--acc b{font-family:var(--sans);font-size:.92rem}
.mm-mega-m__it.is-hero b::after{content:"一番人気";display:inline-block;margin-left:8px;vertical-align:2px;
  font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.06em;line-height:1;padding:3px 8px;
  background:var(--gold);color:#fff;border-radius:99px}

/* ---------- 動きを減らす設定 ---------- */
@media(prefers-reduced-motion:reduce){
  .mm-mega{transition:none;transform:none}
  .mm-mega.is-open{transition:none}
  .mm-mega__card,.mm-mega__ai,.mm-mega__trial,.mm-mega__more span,.mm-mega__lk::after{transition:none}
  .mm-mega__card:hover,.mm-mega__ai:hover,.mm-mega__trial:hover{transform:none}
  .mm-mega-m__body,.mm-mega-m__inner,.mm-mega-m__ic::before,.mm-mega-m__ic::after{transition:none}
}