/* ===================================================================
   /catalog カタログトップ 固有セクション CSS（確定カンプ 413:252・index-site.html 1:1）
   共通の器（header/footer/cta/motion/SP共通）は site.css。
   =================================================================== */

/* ====== ① ヒーロー（FV-scatter・白）h851 ====== */
.hero{position:relative;height:851px;background:var(--paper);overflow:hidden}
.hero .hero-flat{position:absolute;top:0;left:0;width:1440px;height:851px;object-fit:cover;display:none;z-index:0}
.hero-art{position:absolute;top:0;left:0;width:1440px;height:851px;z-index:0}
.hsprite{position:absolute;opacity:0;animation:heroIn .9s cubic-bezier(.2,.85,.25,1) forwards var(--in,0s)}
.hsprite>img{display:block;width:100%;height:auto;animation:floatY var(--fdur,4.5s) ease-in-out infinite var(--fdel,1.4s)}
.hlogo{position:absolute;opacity:0;z-index:2;animation:heroIn 1s cubic-bezier(.2,.85,.25,1) forwards var(--in,.35s)}
.hlogo>img{display:block;width:100%;height:auto}
@keyframes heroIn{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
@keyframes floatY{
  0%{transform:translateY(0) rotate(calc(var(--rot,.6deg)*-1))}
  50%{transform:translateY(calc(var(--amp,4px)*-1)) rotate(var(--rot,.6deg))}
  100%{transform:translateY(0) rotate(calc(var(--rot,.6deg)*-1))}
}
@media (prefers-reduced-motion:reduce){
  .hsprite,.hlogo{opacity:1;animation:none}
  .hsprite>img{animation:none}
}

/* ====== ② 在宅退避／SHELTER UP +30 PROJECT（フルブリード画像コラージュ＋straddle バッジ）h717 ====== */
.sec02{position:relative;height:717px;background:#0a1430;z-index:4}
.sec02 .bg{position:absolute;inset:0;width:1440px;height:717px;object-fit:cover;display:block;z-index:0}
.sec02 .badge{position:absolute;top:-107px;left:50%;transform:translateX(-50%);
  width:804px;background:var(--paper);border-radius:15px;padding:28px 20px 29px;
  box-shadow:0 4px 4px rgba(0,0,0,.25),4px 5px 8px rgba(0,0,0,.25);z-index:3}
.sec02 .badge>img{display:block;width:100%;height:auto}

/* ====== ③ 販売実績 proof-stats（PROVEN AND TRUSTED）h662 ====== */
.proof{background:var(--paper);height:662px;display:flex;align-items:flex-start;padding:92px 70px 30px}
.proof .inner{display:flex;gap:100px;align-items:center;width:100%;max-width:1300px;margin:0 auto}
.proof .photo{width:700px;height:540px;flex:none;position:relative}
.proof .photo img{position:absolute;left:-70px;top:0;width:776px;height:382px;object-fit:cover;border-radius:6px;display:block}
.proof .stats{width:420px;flex:none}
.proof .tag{display:inline-block;font-family:var(--en);font-weight:700;font-size:12px;letter-spacing:.1em;color:#fff;background:var(--cobalt);padding:7px 16px;border-radius:3px;margin-bottom:6px}
.proof .srow{padding:20px 0 21px;border-bottom:1px solid var(--line)}
.proof .srow .en{font-family:var(--en);font-weight:500;font-size:13px;letter-spacing:.05em;color:var(--cobalt)}
.proof .srow .jp{display:flex;align-items:baseline;margin-top:8px}
.proof .srow .jp .term{font-weight:700;font-size:21px;color:var(--ink);width:84px;flex:none;white-space:nowrap}
.proof .srow .jp .fig{font-family:var(--jp);font-weight:900;color:var(--cobalt);margin-left:50px;line-height:1;white-space:nowrap;letter-spacing:.005em}
.proof .srow .jp .fig .n{font-size:74px}
.proof .srow .jp .fig .u{font-size:40px}

/* ====== ④ 製品コレクション product-collection（白・透かし＋マスコット＋4カード）h1088 ====== */
.products{background:var(--paper);height:1088px;position:relative;overflow:hidden;padding-top:10px}
.products .watermark{position:absolute;top:296px;left:803px;transform:translateX(-50%);font-family:var(--jp);font-weight:500;font-size:200px;color:var(--wm);line-height:1;white-space:nowrap;z-index:0;letter-spacing:.01em}
.products .head{position:relative;z-index:1;height:105px;padding:0 72px}
.products .head h2{font-family:var(--jp);font-weight:900;font-size:42px;letter-spacing:.014em;line-height:57px;color:var(--ink)}
.products .lead{position:relative;z-index:1;height:83px;padding:16px 72px 0;font-weight:400;font-size:12.5px;color:var(--ink);line-height:24.4px;max-width:660px}
.products img.mascot{position:absolute;top:147px;left:1010px;width:350px;height:245px;object-fit:contain;z-index:1}
.products .carousel{position:relative;z-index:1;display:flex;gap:10px;padding-left:72px;padding-right:72px;margin-top:168px;
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;scroll-padding-left:72px}/* PCも横スクロール(2026-06-22 西川さん・413:339 カンプ通り右に続く) */
.products .carousel::-webkit-scrollbar{display:none}
.collcard{width:420px;flex:none;display:flex;flex-direction:column;gap:16px;scroll-snap-align:start}
.collcard .img{height:560px;border-radius:10px;overflow:hidden;position:relative;background:var(--ph)}
.collcard .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.collcard .img.ph2{display:flex;align-items:center;justify-content:center}
.collcard .cap{display:flex;flex-direction:column;gap:6px;padding:2px 2px 0}
.collcard .cap .col-lb{font-family:var(--en);font-weight:600;font-size:12px;letter-spacing:.16em;color:var(--sub)}
.collcard .cap .nm{font-family:var(--serif);font-weight:600;font-size:34px;line-height:1.08;color:var(--ink)}
/* ④ pager(dots)は廃止＝2026-06-22 西川さん（PCは横スクロールのみ・SPもFigmaで削除済） */

/* ====== ⑤ 特長 features（白・mistカード1200×角丸20・kanji 明朝96px）h914 ====== */
.features{background:var(--paper);height:914px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:52px}
.fcard{background:var(--card-mist);border-radius:20px;width:1200px;padding:44px 48px;display:flex;gap:120px;align-items:center;overflow:hidden}
.fcard .label{display:flex;gap:8px;align-items:center;flex:none}
.fcard .kanji{font-family:var(--serif);font-weight:900;font-size:96px;line-height:100px;color:var(--ink-feat);text-align:center}
.fcard .ven{display:flex;flex-direction:column;font-family:var(--jp);font-weight:500;font-size:11px;letter-spacing:.09em;color:var(--cobalt);line-height:15px;text-align:center}
.fcard .copy{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:14px}
.fcard .copy h3{font-family:var(--jp);font-weight:900;font-size:24px;line-height:36px;color:var(--ink-feat)}
.fcard .copy p{font-family:var(--jp);font-weight:400;font-size:14.5px;color:var(--body-feat);line-height:26px}
.fcard .chips{display:flex;flex-wrap:wrap;gap:10px}
.fcard .chips span{font-family:var(--jp);font-weight:700;font-size:13px;color:var(--cobalt);background:var(--chip);border-radius:999px;padding:8px 14px;white-space:nowrap}
.fcard .fimg{width:320px;height:240px;flex:none;background:#fff;border:1px solid var(--feat-imgline);border-radius:14px;display:flex;align-items:center;justify-content:center}
.fcard .fimg img{width:236px;height:178px;object-fit:contain;display:block}

/* ====== hover lift（reveal の opacity/translate と1本化）====== */
.collcard{transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--d,0s),translate .7s cubic-bezier(.16,1,.3,1) var(--d,0s),transform .28s ease}
.collcard:hover{transform:translateY(-6px)}
.fcard{transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--d,0s),translate .7s cubic-bezier(.16,1,.3,1) var(--d,0s),transform .3s ease}
.fcard:hover{transform:translateY(-3px)}

/* SP 専用要素は PC では非表示（375 でのみ出す） */
.hero-sp-art,.sec02-sp{display:none}

/* ===================================================================
   SP（〜767px）— カタログトップ＝確定 SPカンプ(699:224) の転写（再解釈禁止）
   ・FV/在宅退避band は SPカンプの焼き込み画像を1枚絵で配置
   ・proof/products/features は確定 SPカンプ実値でライブreflow（色/コピー/書体はPC固定・
     サイズは SPカンプの数値、変えるのはレイアウト軸だけ）
   ・CTA は共通(site.css)＝ここでは触らない
   =================================================================== */
@media (max-width:767px){
  /* ① FV-scatter：PCの sprite collage を隠し、SP専用 sprite散らし(699:301)をライブ転写＝バラバラ出現アニメ */
  .hero{height:auto;overflow:visible}
  .hero-art,.hero .hero-flat{display:none}
  .hero .hero-sp-art{display:block;position:relative;width:100%;aspect-ratio:375/562;overflow:hidden;z-index:1}

  /* ② sec02：PCの bg＋badge を隠し、SPカンプ統合画像(699:376)を1枚で配置
     ＝バッジ straddle も画像内に焼き込み済（負マージン不要） */
  .sec02{height:auto;background:none}
  .sec02 .bg,.sec02 .badge{display:none}
  .sec02 .sec02-sp{display:block;width:100%;height:auto}

  /* ③ proof-stats（699:228）：写真→PROVEN→3指標 縦積み。padding 15px、写真 h169.5/345、
     行 border-bottom #dce0ea・EN cobalt 9.75px・term #15171e 15.75px・数値 cobalt 55.5/30 */
  .proof{height:auto;padding:34.5px 15px;display:block;background:var(--paper)}
  .proof .inner{flex-direction:column;gap:22.5px;max-width:100%;align-items:stretch}
  .proof .photo{width:100%;height:169.5px}
  .proof .photo img{position:static;left:0;top:0;width:100%;height:169.5px;object-fit:cover;border-radius:4.5px}
  .proof .stats{width:100%}
  .proof .tag{font-size:9px;letter-spacing:.1em;padding:5px 12px;border-radius:2.25px;margin-bottom:0}
  .proof .srow{padding:15px 0 16.5px}
  .proof .srow .en{font-size:9.75px;letter-spacing:.05em}
  .proof .srow .jp{align-items:baseline;margin-top:6px}
  .proof .srow .jp .term{width:auto;margin-right:0;font-size:15.75px}
  .proof .srow .jp .fig{margin-left:15px}
  .proof .srow .jp .fig .n{font-size:55.5px}
  .proof .srow .jp .fig .u{font-size:30px}

  /* ④ product-collection（699:303）：透かし/マスコット無し・H2 26.25/lead 10.5・
     4カード横スワイプ(幅247.5・画像h330・角丸7.5)・ドット4(先頭 cobalt 15×6) */
  .products{height:auto;padding:34.5px 0 30px}
  .products .watermark,.products img.mascot{display:none}
  .products .head{height:auto;padding:0 15px}
  .products .head h2{font-size:26.25px;line-height:35.438px;letter-spacing:.014em;white-space:normal;overflow-wrap:anywhere}
  .products .lead{height:auto;padding:9px 15px 0;font-size:10.5px;line-height:19.425px;max-width:none}
  .products .carousel{margin-top:19.5px;padding:3px 15px 10.5px;gap:10.5px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .products .carousel::-webkit-scrollbar{display:none}
  .collcard{width:247.5px;flex:none;scroll-snap-align:start;gap:9px}
  .collcard .img{height:330px;border-radius:7.5px}
  /* 空枠（シークレットギルド/耐震＋酸素）＝SPカンプは無地 #e7ebf3 ボックス（ラベル無し） */
  .collcard .img.ph2{background:var(--ph)}
  .collcard .img.ph2 .lb{display:none}
  .collcard .cap{gap:4.5px;padding:1.5px 1.5px 0}
  .collcard .cap .col-lb{font-size:9px;letter-spacing:.16em}
  .collcard .cap .nm{font-size:25.5px;line-height:27.54px}
  /* pager(dots) は廃止（2026-06-22 西川さん・Figma SPでも削除済） */

  /* ⑤ features（699:264）：mistカード(351・角丸15・bg #f1f4fa) 縦積み内＝
     ラベル中央・kanji 明朝63.75・H3 18・本文 10.875・チップ横並び・図解 白枠h238.5 */
  .features{height:auto;padding:34.5px 12px;gap:16.5px}
  .fcard{width:351px;max-width:100%;flex-direction:column;gap:16.5px;padding:21px 16.5px;align-items:stretch;border-radius:15px}
  .fcard .label{justify-content:center;gap:6px}
  .fcard .kanji{font-size:63.75px;line-height:66.3px}
  .fcard .ven{font-size:8.25px;line-height:11.25px;letter-spacing:.09em}
  .fcard .copy{gap:10.5px}
  .fcard .copy h3{font-size:18px;line-height:27px}
  .fcard .copy p{font-size:10.875px;line-height:20.119px}
  .fcard .chips{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:7.5px}
  .fcard .chips span{font-size:9.75px;padding:6px 10.5px}
  .fcard .fimg{width:100%;height:238.5px;border-radius:10.5px}
  .fcard .fimg img{width:177px;height:133.5px}
}