/* ===================================================================
   SUP+30 公式サイト — Home（ / ）固有スタイル（home.css）
   確定カンプ 495:688（1440×5571）を転写。ほぼ完成コラージュ＝各バンドは
   exported render を1枚絵で背景に置き、その上に「透明クリックゾーン」を
   絶対配置で重ねる（遷移・モーダルトリガ）。共通の器（header/footer/CTA/
   lightbox/トークン/流体スケール）は site.css が持つ＝ここには重複させない。

   バンド構成（Figma node → 画像）:
     ① FV｜ヒーロー        495:689  /assets/home/fv.png     1440×718
     ② 保有率0.02%｜市松帯  495:700  /assets/home/band02.png 1440×1114
     ③ 7つのキホン・備える  495:706  /assets/home/band03.png 1419×2121（x=19・CTA含む）
     ④ マスコット・下部帯    495:740  /assets/home/band04.png 1440×1112
   =================================================================== */

.home{position:relative;width:1440px;padding-top:72px}/* G-HEADER 72px の下に内容＝確定カンプ495:688（header y0-72／FV y=72）に一致・旧=ヘッダーがヒーロー上端を隠していた */

/* ====== 共通：1枚絵バンド ＋ 透明クリックゾーン ====== */
.hb{position:relative;width:100%;display:block;line-height:0}
.hb > img.bandimg{width:100%;height:auto;display:block}
/* 透明クリックゾーン（コラージュ上に重ねる・hover で軽く知覚）*/
.hzone{position:absolute;display:block;z-index:2;cursor:pointer;
  border-radius:10px;transition:background .18s ease,box-shadow .18s ease}
.hzone:hover{background:rgba(0,48,201,.08);box-shadow:0 0 0 2px rgba(0,48,201,.28) inset}
.hzone:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}

/* ====== ① FV｜ヒーロー（495:689） ======
   大カード2枚に透明ゾーン：左 SURVIVE→/catalog/ground、右 SECRET GUILD→
   /catalog/secret-guild（地下＝準備中スタブ）。中央ロゴ／下段4枚は非リンク。*/
.fv{position:relative;width:100%}
/* FV 生きたレイヤー版：背景(製品6枚合成)＋オーバーレイ(タグ/ロゴ/コピー) */
.fvs{position:relative;width:100%;aspect-ratio:1440 / 718;overflow:hidden;background:#ffffff}
.fvs > *{position:absolute}
.fvs img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.fvs-bg{z-index:1}
.fvs-art{z-index:2}

/* ====== ② 保有率0.02%｜市松帯（495:700） ====== */
/* 全面1枚絵・リンクなし */

/* ====== ③ 7つのキホン（495:706）— 生きたレイヤー版 ======
   band03 の1枚絵を廃し、カンプのスライスを座標(%)で再配置。アニメ後の停止状態はカンプ一致。
   ・箱（白カード）まるごと→モーダル（クリックは .ks-box に集約、アート画像は透過）
   ・番号=ポップ／吹き出し=フェードイン（IntersectionObserver の .reveal）*/
.keys{position:relative;width:100%;background:#fff}
.ks{position:relative;width:98.542%;margin-left:1.32%;aspect-ratio:1419 / 2121}
.ks > *{position:absolute}
.ks img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.ks-photo{z-index:1}            /* バナー写真：マットの下。カンプの子順=写真→bg-column の通り、マットが上で写真の縁をクリップする（z逆だと写真が白カード/青枠の上にはみ出す＝2026-06-19事故） */
.ks-bg{z-index:2}               /* 白カード＋青枠＋Click here バッジのマット（43%透明窓）：バナーの上に重ね、透明窓から写真を覗かせ縁を隠す */
.ks-art{z-index:3}
.ks-num{z-index:4}
.ks-bub{z-index:5}
/* クリック面：箱まるごと（カードの上に重ねた透明リンク） */
.ks-box{z-index:2;display:block;cursor:pointer;border-radius:10px;
  transition:background .18s ease,box-shadow .18s ease}
.ks-box:hover{background:rgba(0,48,201,.06);box-shadow:0 0 0 2px rgba(0,48,201,.25) inset}
.ks-box:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
/* 下部CTA → かんたん診断 */
.ks-cta{z-index:6;display:block;cursor:pointer;border-radius:14px;
  transition:background .18s ease,box-shadow .18s ease}
.ks-cta:hover{background:rgba(255,255,255,.10);box-shadow:0 0 0 2px rgba(255,255,255,.45) inset}
.ks-cta:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* 番号＝ポップ出現（.reveal の opacity に scale を重ねる・translate は無効化） */
.reveal-pop{translate:none;scale:.45;transform-origin:center center;
  transition:opacity .5s ease,scale .55s cubic-bezier(.2,1.25,.3,1)}
.reveal-pop.is-in{scale:1}

/* ====== ④ マスコット・下部帯（495:740） ====== */
/* 全面1枚絵・リンクなし */

/* SP 専用ブロック（hero / 0.02%+30%帯 / 7つのキホン）は PC では非表示＝下の @media で表示に切替 */
.fv-sp,.keys-sp,.sp-bands{display:none}

/* ===================================================================
   SP（〜767px）＝SPカンプ 697:224 の転写（横375px・breakpoint 767px）。
   固定座標コラージュ（.fvs / .ks）は1440/1419px前提の絶対配置で375幅では破綻＝隠し、
   SPカンプ自身の素材で再構成する：
     FV(697:227)        = 製品6枚合成bg + 黒スクリム + 白ロゴ画像 + タグラインlive text（375×420固定）
     0.02%帯(697:234)   = 1枚絵
     30%帯(697:250)     = 1枚絵 ★PCでは最下部 → SPカンプではキホンの前へ繰上げ
     7つのキホン(697:235)= 見出し画像 + card-1..7（各1枚絵）+ CTA画像
   色/コピー/書体/タイプスケールは確定カンプ実値で固定（再解釈ゼロ）。変えるのはレイアウト軸のみ。
   =================================================================== */
@media (max-width:767px){
  .home{width:100%;padding-top:56px}/* SP は fixed header 56px の下＝G-HEADER(SP390) 56px に一致 */

  /* --- PC コラージュ/PC帯 を隠し、SP 再構成を出す --- */
  .fv .fvs{display:none}
  .fv-sp{display:block}
  .hb-pc{display:none}        /* PC band02/band04（30%帯はSPでは .sp-bands に繰上げ済）*/
  .sp-bands{display:block}
  .keys .ks{display:none}
  .keys-sp{display:block}

  /* --- ① SP ヒーロー（697:227・375×420固定）：bg(697:228) cover ＋ 黒スクリム(697:229) ＋ 白ロゴ(225×89.871・697:231) ＋ タグライン(697:233) --- */
  .fv-sp{position:relative;width:100%;height:420px;overflow:hidden;background:#0a0e12}
  .fv-sp-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
  .fv-sp-scrim{position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(8,10,18,.62) 0%,rgba(8,10,18,.5) 42%,rgba(8,10,18,.82) 100%)}/* 697:229 のグラデ実値 */
  .fv-sp-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:16.5px;padding:0 19.5px;text-align:center}/* gap=16.5 / px=19.5（697:230） */
  .fv-sp-logo{width:225px;height:auto;flex:none;
    filter:drop-shadow(0 3px 33px rgba(0,0,0,.45))}/* 697:231 の影 0 3 33 rgba(0,0,0,.45) */
  .fv-sp-tag{display:block;font-family:"Zen Old Mincho",var(--serif);font-weight:900;color:#fff;
    font-size:15px;line-height:28.5px;letter-spacing:.45px;white-space:normal}/* 697:233 実値（Zen Old Mincho Black 15px / 行間28.5 / 字間0.45） */

  /* --- ② SP 帯：0.02%(697:234) → 30%(697:250) を1枚絵で縦置き（FV直下・キホンの前）--- */
  .sp-bands{line-height:0;background:#fff}
  .sp-band{display:block;width:100%;height:auto}

  /* --- ③ SP 7つのキホン（697:235）：見出し(697:238) + card-1..7(697:240〜246) + CTA(697:249) 縦積み --- */
  /* container 697:236 = 左右 padding 13.5px。section 上に title block(y=39)。下端余白 ~4.5px */
  .keys-sp{padding:39px 13.5px 4.5px;background:#fff}
  .keys-sp-title{display:block;width:225px;height:auto;margin:0 auto}/* 697:238 = 225px・中央 */
  .keys-sp-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin:19.5px 0 0;padding:0}/* 697:239 リスト・card間 12px・title→list 19.5px */
  .keys-sp-list img{width:100%;height:auto;display:block}/* 各カードは確定カンプの自己完結画像＝枠/影は付けない（カンプに無い） */
  .keys-sp-cta{display:block;margin-top:16.5px}/* 697:247 link block・list→CTA 16.5px */
  .keys-sp-cta img{width:100%;height:auto;display:block}

  /* タッチではホバー知覚を消す（PC コラージュ残骸の保険）*/
  .hzone:hover{background:transparent;box-shadow:none}
}