/* ===================================================================
   SUP+30 公式サイト — 共通スタイル（site.css）
   全ページ共通の「器」：トークン / 流体スケール土台 / ヘッダー（ドロップダウン＋追従＋モバイル）
   / 共通フッター（ライブ） / 共通CTA / モーション / 共通SPリフロー。
   ページ固有のセクションCSSは各 assets/css/<page>.css に分離。
   土台アーキ＝確定カンプ index-site.html（流体スケール+SP専用・西川さん選択）を踏襲＝ドリフト0方針。
   =================================================================== */

/* ====== トークン（guide.css 正本値＋確定カンプ実測色）====== */
:root{
  --cobalt:#0030C9; --cobalt-deep:#0026A0; --cta-pill:#073AB6;
  --ink:#15171E; --ink-lead:#14202E; --ink-feat:#14181F;
  --body-lead:#3A4452; --body-feat:#4A5160; --sub:#5A6173; --note:#9AA3B8; --note2:#67718A;
  --line:#DCE0EA; --paper:#FFFFFF; --mist-lead:#F2F5F8; --card-mist:#F1F4FA;
  --chip:#E8ECFF; --ph:#E7EBF3; --feat-imgline:#E6E9F2; --wm:#F4F4F4;
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  --en:"Oswald","Noto Sans JP",sans-serif;
  --serif:"Noto Serif JP",serif;
  --board:1440px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--jp);color:var(--ink);background:#E9EBF0;line-height:1.9;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ====== 流体スケール土台 ======
   .stage が viewport 幅、その中で 1440 の .board を JS が transform:scale(vw/1440) で丸ごと縮める。
   PC〜768px は確定カンプのピクセル比を保ったまま縮小＝ズレ0。768px↓は JS が transform を外し SP CSS が効く。*/
.stage{position:relative;width:100%;overflow:hidden}
.board{width:var(--board);background:var(--paper);overflow:hidden;position:relative;
  transform-origin:0 0;will-change:transform}

/* ====== 共通プレースホルダ（事例写真・未生成カード・準備中）====== */
.ph{background:var(--ph);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center}
.ph .ic{font-family:var(--jp);font-weight:700;font-size:11px;letter-spacing:.18em;color:var(--note)}
.ph .lb{font-family:var(--jp);font-size:11px;font-weight:700;color:var(--note2)}

/* ===================================================================
   ヘッダー G-HEADER（コバルトバー・カタログトップ/商品ラインナップ▾/かんたん診断/お問い合わせ）
   .gh＝最上部（ヒーロー上にオーバーレイ）／.ghf＝追従（PCのみ・viewport固定・headroom）
   両方とも .navbar を共有し中身（nav/dropdown）は共通スタイル。
   =================================================================== */
.gh{position:absolute;top:0;left:0;right:0;z-index:30;background:var(--cobalt);height:72px;box-shadow:0 4px 2px rgba(0,0,0,.25)}
.gh-in{max-width:var(--board);margin:0 auto;padding:0 40px;height:72px;display:flex;align-items:center;justify-content:space-between}
.navbar .logo img{width:229px;height:57px;object-fit:fill;display:block}/* 確定カンプ495:806 実測：白枠が221×49px になる画像寸法（内側余白ぶん拡大） */
.navbar .right{display:flex;align-items:center;gap:30px}
.navbar nav{display:flex;align-items:center;gap:28px}
.navbar nav > a,.navbar nav .menu > .menu-top{color:#fff;font-weight:500;font-size:15px;letter-spacing:.02em;opacity:.95;white-space:nowrap;cursor:pointer;background:none;border:0;font-family:var(--jp);display:inline-flex;align-items:center;gap:6px}
.navbar nav > a:hover,.navbar nav .menu:hover .menu-top{opacity:1}
.navbar nav > a.cur{font-weight:700;opacity:1}
.navbar nav .menu.cur > .menu-top{font-weight:700;opacity:1}
.navbar .hcta{background:#fff;color:var(--cobalt);font-weight:700;font-size:14px;padding:11px 20px;border-radius:6px;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.navbar .hcta:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.18)}

/* --- 商品ラインナップ ドロップダウン --- */
.navbar nav .menu{position:relative}
.navbar nav .menu .caret{font-size:9px;transition:transform .25s ease;display:inline-block}
.navbar nav .menu:hover .caret,.navbar nav .menu:focus-within .caret{transform:rotate(180deg)}
.navbar nav .submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(2px);
  background:#fff;min-width:248px;border-radius:10px;box-shadow:0 16px 36px rgba(0,16,80,.22);
  padding:8px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:40}
.navbar nav .menu:hover .submenu,.navbar nav .menu:focus-within .submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(8px)}
.navbar nav .submenu a{display:flex;flex-direction:column;gap:2px;color:var(--ink);padding:11px 14px;border-radius:7px;opacity:1;border:0}
.navbar nav .submenu a:hover{background:var(--chip)}
.navbar nav .submenu a .nm{font-size:14.5px;font-weight:700;letter-spacing:.01em}
.navbar nav .submenu a .ds{font-size:11px;font-weight:500;color:var(--sub);letter-spacing:.02em}
.navbar nav .submenu a:hover .nm{color:var(--cobalt)}
.navbar nav .submenu a.soon{cursor:default}
.navbar nav .submenu a.soon .nm{color:var(--note2)}
.navbar nav .submenu a.soon .ds::after{content:"  準備中";color:var(--note);font-weight:700}

/* --- 追従ナビ（PCのみ・board の外＝viewport 固定・headroom）--- */
.ghf{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--cobalt);height:72px;
  box-shadow:0 6px 18px rgba(0,16,80,.26);display:none;will-change:transform;
  transform:translateY(-100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.ghf.show{transform:translateY(0)}
.ghf-in{max-width:var(--board);margin:0 auto;padding:0 40px;height:72px;display:flex;align-items:center;justify-content:space-between}
@media (min-width:768px){ .ghf{display:block} }
@media (prefers-reduced-motion:reduce){ .ghf{transition:none} }

/* --- バーガー／モバイルメニュー（SPのみ表示・PCでは hidden）--- */
.burger{display:none}
.mnav{display:none}

/* ===================================================================
   共通フッター G-FOOTER（コバルト・ライブHTML＝リンク有効・h475）
   ※確定カンプ 413:442 を 1:1 転写。promo 3枚は焼きロゴ画像（/assets/img/promo-*）。
     リンクは実ルートへ。「最後の砦（地下埋設）」は確定カンプ表記のまま＝要確認（実体は屋内据置）。
   =================================================================== */
/* G-FOOTER ＝ 確定カンプ413:442 のレンダーを画像で1:1転写＋透明リンクゾーン（手書きCSSで再現しない＝comp-sync-gate） */
.gf{position:relative;width:100%;background:var(--cobalt);line-height:0}
.gf-stage{position:relative;width:100%}
.gf-img{display:block;width:100%;height:auto}
.gf-z{position:absolute;display:block;z-index:2;border-radius:6px;cursor:pointer;
  transition:background .15s ease,box-shadow .15s ease}
.gf-z:hover{background:rgba(255,255,255,.10)}/* 枠(inset box-shadow)は廃止＝薄い色ハイライトのみ。文字は焼き込み画像なので色変化/浮きは出さない(2026-06-22 西川さん確定) */
.gf-z:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gf-sp{display:none}/* SP（〜767px）でのみ表示＝下の @media。PCは画像転写(.gf-stage) */

/* ===================================================================
   共通CTA（暗コラージュ・青ピル2）h629 — 製品ページ／カタログトップ共用
   =================================================================== */
.cta{position:relative;width:100%;height:629px;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-top:137px}
.cta__bg{position:absolute;inset:0;z-index:0;background:url("/assets/img/cta-bg.jpg") center/cover no-repeat;transform:scale(1.04);filter:blur(1.56px) saturate(.9) brightness(.92)}
.cta__scrim{position:absolute;inset:0;z-index:1;background:
  radial-gradient(120% 90% at 50% 38%, rgba(10,14,26,.40) 0%, rgba(8,11,22,.72) 100%),
  linear-gradient(180deg, rgba(7,10,20,.56) 0%, rgba(7,10,20,.64) 100%)}
.cta__inner{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center}
.cta__head{font-family:var(--jp);font-weight:500;font-size:34px;letter-spacing:.08em;line-height:47.6px;color:#F2F2F2;text-align:center;text-shadow:0 1px 24px rgba(0,0,0,.35)}
.cta__lead{margin-top:26px;font-family:var(--jp);font-weight:400;font-size:15px;line-height:30px;letter-spacing:.04em;color:rgba(255,255,255,.74);text-align:center}
.cta__actions{display:flex;gap:24px;margin-top:108px}
.pill{position:relative;display:flex;align-items:center;justify-content:center;width:488px;height:88px;border-radius:44px;
  background:var(--cta-pill);box-shadow:0 10px 15px rgba(0,0,0,.28);transition:transform .2s,background .2s}
.pill:hover{transform:translateY(-2px);background:#0843cc}
.pill__label{font-family:var(--jp);font-size:17px;font-weight:500;letter-spacing:.06em;color:#fff}
.pill__arrow{position:absolute;right:30px;font-size:13px;color:#fff}

/* ===================================================================
   モーション層 — 型を1回定義→class/属性で全セクションに一括付与
   =================================================================== */
.reveal{opacity:0;translate:0 22px;
  transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--d,0s),translate .7s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.reveal.is-in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;translate:none;transition:none} }

/* ===================================================================
   7つのキホン モーダル（フラット画像 lightbox・Homeのキホングリッドから）
   =================================================================== */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,11,22,.82);display:none;
  align-items:center;justify-content:center;padding:40px 20px;opacity:0;transition:opacity .25s ease}
.lb.open{display:flex}
.lb.show{opacity:1}
.lb img{max-width:min(620px,92vw);max-height:90vh;width:auto;height:auto;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb__close{position:absolute;top:22px;right:26px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer;line-height:1}
.lb__close:hover{background:rgba(255,255,255,.26)}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:24px;cursor:pointer}
.lb__nav:hover{background:rgba(255,255,255,.26)}
.lb__prev{left:24px} .lb__next{right:24px}

/* ===================================================================
   共通 SP（〜767px）— ヘッダー固定＋ハンバーガー、フッター/CTA リフロー
   ページ固有セクションのSPは各 <page>.css。
   =================================================================== */
@media (max-width:767px){
  body{background:#fff}
  .stage{display:block;overflow:visible}
  .board{width:100%;transform:none!important;overflow:hidden}

  /* --- 固定ヘッダー＋ハンバーガー --- */
  .gh{position:fixed;height:56px;transition:height .25s ease,box-shadow .25s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
  .gh.scrolled{height:48px;box-shadow:0 4px 16px rgba(0,16,80,.22)}
  .gh.gh--hidden{transform:translateY(-100%)}
  .gh-in{padding:0 18px;height:100%}                          /* 確定カンプ828:795 SP：px-18 */
  .navbar .logo img{width:auto;height:36px;object-fit:contain} /* 確定カンプ：ロゴ h-36（w≈142） */
  .gh nav,.gh .right .hcta{display:none}
  .gh .right{gap:0}
  .ghf{display:none!important}
  /* バーガー＝確定カンプ：3本 w26×h2、pitch8px（top 0/8/16）。40px はタップ確保（アイコン26×18は内側） */
  .burger{display:flex;flex-direction:column;justify-content:center;gap:6px;width:40px;height:40px;
    background:transparent;border:0;cursor:pointer;padding:0;align-items:flex-end}
  .burger span{display:block;height:2px;width:26px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
  body.nav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.nav-open .burger span:nth-child(2){opacity:0}
  body.nav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .mnav{display:block;position:fixed;top:56px;left:0;right:0;bottom:0;z-index:25;background:var(--cobalt);
    padding:14px 18px 28px;overflow-y:auto;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .28s ease,opacity .28s ease}
  body.nav-open .mnav{transform:translateY(0);opacity:1;pointer-events:auto}
  .mnav a{display:block;color:#fff;font-weight:600;font-size:16px;letter-spacing:.02em;
    padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.16)}
  .mnav .mgroup{padding:16px 4px 6px;font-size:12px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.6)}
  .mnav .msub{padding-left:16px;font-size:15px;font-weight:500}
  .mnav .msub .ds{font-size:11px;color:rgba(255,255,255,.6);font-weight:400}
  .mnav a.soon{color:rgba(255,255,255,.5)}
  .mnav a.mcta{margin-top:18px;background:#fff;color:var(--cobalt);text-align:center;border-radius:8px;border:0;font-weight:700;padding:14px}

  /* --- フッター SP＝確定カンプ 724:425（G-FOOTER｜cobalt SP375）の M2 転写 ---
         中央寄せ縦積み・gap37px：見出し画像／3バナー画像（+30→WiZUP→WiZNAVI・各350×103・縦pitch115px）／
         本文text(14/26.6 白)／罫線(#dce0ea .5)／注記(12/19.2 白.78)／©(11.5/21.85 白.7)。
         外:py40／内:px20 pt40 pb26。色・余白・文字サイズはカンプ実値。ナビ3列はカンプに無い＝省略。 --- */
  .gf-stage{display:none}            /* PC用の画像転写はSPで隠す（カンプが各幅で別＝同期しない） */
  .gf{line-height:1.7}
  .gf-sp{display:flex;flex-direction:column;align-items:center;gap:37px;
    padding:80px 12.5px 66px}        /* 外py40＋内pt40/pb26＝上80/下66。横はカンプ実効＝内容350を375中央(左右12.5)に */
  /* 見出し画像（220×57 のレンダーを 1:1） */
  .gf-sp-head{display:block;width:220px;max-width:100%;height:auto;margin:0}
  /* 3バナー縦積み＝カンプ：各350×103、top 0/115/230 → gap 12px。コンテナ幅は内容幅(350)に追従 */
  .gf-sp-banners{display:flex;flex-direction:column;gap:12px;width:100%;max-width:350px}
  .gf-sp-banner{display:block;line-height:0;border-radius:6px;overflow:hidden;transition:opacity .15s ease}
  .gf-sp-banner:hover{opacity:.92}
  .gf-sp-banner:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .gf-sp-banner img{display:block;width:100%;height:auto}
  /* 本文＝カンプ実値 14px / 行26.6px / 白・幅350 左寄せ */
  .gf-sp-body{width:100%;max-width:350px;margin:0;font-size:14px;line-height:26.6px;
    color:#fff;letter-spacing:0;word-break:break-word}
  /* 罫線＝カンプ #dce0ea opacity.5 1px・幅100%（max350） */
  .gf-sp-rule{width:100%;max-width:350px;height:1px;background:#dce0ea;opacity:.5}
  /* 製造注記＝カンプ 12px / 行19.2px / rgba(255,255,255,.78) */
  .gf-sp-note{width:100%;max-width:350px;margin:0;font-size:12px;line-height:19.2px;
    color:rgba(255,255,255,.78);letter-spacing:0;word-break:break-word}
  /* ©＝カンプ 11.5px / 行21.85px / rgba(255,255,255,.7) */
  .gf-sp-copy{width:100%;max-width:350px;margin:0;font-size:11.5px;line-height:21.85px;
    color:rgba(255,255,255,.7);letter-spacing:0}

  /* --- CTA：ピル縦積み --- */
  .cta{height:auto;padding:60px 20px 64px}
  .cta__head{font-size:clamp(21px,6.2vw,32px);line-height:1.5}
  .cta__lead{margin-top:18px;font-size:clamp(13px,3.6vw,15px);line-height:1.9}
  .cta__actions{flex-direction:column;gap:14px;margin-top:38px;width:100%;align-items:center}
  .pill{width:100%;max-width:420px;height:64px;border-radius:32px}
  .pill__arrow{right:24px}

  .lb img{max-width:94vw}
  .lb__nav{width:42px;height:42px} .lb__prev{left:10px} .lb__next{right:10px}
}