/* ===================================================================
   SUP+30 — 製品ページ共通テンプレート（ground.css）
   /catalog/ground「サバイブ」が正本。/catalog/last-fort「最後の砦」が @import で再利用。
   ＝製品固有色は付けない。確定カンプ node 315:127 を 1:1 転写（内容カラム 792px 中央／台紙 1440）。
   共通トークン・ヘッダー・フッター・CTA・モーションは site.css。ここは製品ページ固有セクションのみ。
   =================================================================== */

/* ====== ① HERO（案A・明朝特大／焼き込み写真上）h672 ====== */
.phero{position:relative;width:100%;height:672px;overflow:hidden;background:#0a0e12}
.phero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.phero-scrim{position:absolute;inset:0;width:1120px;height:672px;
  background:linear-gradient(90deg,rgba(8,10,18,.78) 0%,rgba(8,10,18,.32) 55%,rgba(8,10,18,0) 100%)}
.phero-copy{position:absolute;left:112px;top:184px;display:flex;flex-direction:column;align-items:flex-start;gap:22px;white-space:nowrap}
.phero-label{font-family:var(--jp);font-weight:500;font-size:15px;letter-spacing:1.2px;color:#e5ebf5;line-height:normal}
.phero-h1{font-family:"Zen Old Mincho",var(--serif);font-weight:900;font-size:104px;line-height:1.04;letter-spacing:4.16px;color:#fff}
.phero-prod{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.phero-prod-jp{font-family:"Zen Old Mincho",var(--serif);font-weight:900;font-size:34px;letter-spacing:2.04px;color:#fff;line-height:normal}
.phero-prod-en{font-family:var(--en);font-weight:500;font-size:15px;letter-spacing:5.4px;color:#e5ebf5;line-height:normal}
.phero-tag{font-family:var(--jp);font-weight:500;font-size:22px;letter-spacing:.88px;color:#e5ebf5;line-height:normal}

/* SP専用ブロック（FV焼き込み画像／SPEC刷新スタック／SP CTA）は PC では非表示＝@media で表示に切替。
   ※ last-fort.css は ground.css を @import するが SP は自前カンプで上書きする。
     CTA は last-fort 側に .cta-sp が無い＝ground 専用なので body[data-page=ground] で隔離（last-fort の共有CTAを誤って畳まない）。 */
.phero-sp,.pspec-sp{display:none}
body[data-page="ground"] .cta-sp{display:none}

/* ====== 製品ページ本体ラッパ（中身カラム 792px 中央）====== */
.pwrap{max-width:792px;margin:0 auto;padding:84px 0 0;position:relative}

/* ====== セクション共通：eyebrow（CONCEPT / FEATURE / GALLERY 型）====== */
.psec{position:relative}
.psec-eyebrow{display:flex;align-items:baseline;gap:0;position:relative;height:29.9px}
.psec-eyebrow .en{font-family:var(--en);font-weight:600;font-size:25px;letter-spacing:3.25px;color:var(--cobalt);line-height:25px}
.psec-eyebrow .jp{font-family:var(--jp);font-weight:400;font-size:11px;letter-spacing:1.32px;color:var(--sub);line-height:20.9px;margin-left:16px;align-self:center}

/* セクション見出し（Specifications / Works / Voice / Flow 型）= 小ラベル＋黒見出し横並び */
.psec-head{display:flex;align-items:baseline;gap:13px;height:41.8px;margin-bottom:22px}
.psec-head .en{font-family:var(--en);font-weight:600;font-size:12px;letter-spacing:1.92px;text-transform:uppercase;color:var(--cobalt);line-height:1}
.psec-head .jp{font-family:var(--jp);font-weight:900;font-size:22px;letter-spacing:.88px;color:var(--ink);line-height:1.9}

/* ====== ② CONCEPT ====== */
.pconcept-lead{font-family:var(--jp);font-weight:700;font-size:22px;line-height:37.84px;letter-spacing:.44px;color:var(--ink);margin-top:22px}
.pconcept-body{font-family:var(--jp);font-weight:400;font-size:13.5px;line-height:27.675px;color:var(--body-lead);margin-top:18px;max-width:600px}
.pconcept-img{margin-top:30px;width:792px;height:377px;border:1px solid var(--line);overflow:hidden}
.pconcept-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ====== ③ FEATURE（4カード・2×2）====== */
.pfeature{margin-top:70px}
.pfeat-grid{display:grid;grid-template-columns:386px 386px;gap:20px;margin-top:26px}
.pfeat-card{position:relative;background:var(--paper);border:1px solid var(--line);
  min-height:199px;padding:31px 27px 29px;display:flex;flex-direction:column;align-items:center;text-align:center}
.pfeat-no{position:absolute;left:27px;top:18px;font-family:var(--en);font-weight:600;font-size:12px;letter-spacing:1.2px;color:var(--cobalt);line-height:22.8px}
.pfeat-h{font-family:var(--jp);font-weight:700;font-size:17px;line-height:32.3px;letter-spacing:.51px;color:var(--cobalt)}
.pfeat-p{font-family:var(--jp);font-weight:400;font-size:12px;line-height:23.4px;color:var(--body-lead);max-width:242px;margin-top:12px}
.pfeat-tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.ptag{display:inline-flex;align-items:center;justify-content:center;height:27.945px;padding:0 12px;
  background:rgba(0,48,201,.07);border:1px solid rgba(0,48,201,.13);border-radius:3px;
  font-family:var(--jp);font-weight:400;font-size:10.5px;line-height:19.95px;color:var(--cobalt);white-space:nowrap}

/* ====== ④ GALLERY ====== */
.pgallery{margin-top:80px}
.pgal-eyebrow{display:flex;align-items:center;gap:13px;height:25px}
.pgal-eyebrow .en{font-family:var(--en);font-weight:600;font-size:25px;letter-spacing:3.25px;color:var(--cobalt);line-height:25px}
.pgal-eyebrow .jp{font-family:var(--jp);font-weight:400;font-size:11px;letter-spacing:1.32px;color:var(--sub);line-height:20.9px}
.pgal-eyebrow .rule{flex:1;height:1px;background:var(--line);margin-left:6px}
.pgal-big{margin-top:24px;width:792px;height:603px;border:1px solid var(--line);overflow:hidden}
.pgal-big img{width:100%;height:100%;object-fit:cover;display:block}
.pgal-pair{display:grid;grid-template-columns:386px 386px;gap:20px;margin-top:20px}
.pgal-half{height:535px;border:1px solid var(--line);overflow:hidden}
.pgal-half img{width:100%;height:100%;object-fit:cover;display:block}

/* ====== ⑤ SPEC（仕様表）====== */
.pspec{padding:64px 0}
.pspec-table{width:792px;border-collapse:collapse;border-top:3px solid var(--cobalt)}
.pspec-table th,.pspec-table td{text-align:left;vertical-align:middle;padding:15px 20px;border-bottom:1px solid var(--line);
  font-family:var(--jp);font-size:13.5px;line-height:1.8}
.pspec-table th{width:185px;background:rgba(0,48,201,.07);font-weight:700;color:var(--ink)}
.pspec-table td{width:607px;font-weight:400;color:#2a313f}
.pspec-table td.strong{font-weight:700;color:var(--ink)}

/* ====== ⑥ WORKS（施工事例・掲載準備中）====== */
.pworks{padding:64px 0}
.pworks-grid{display:flex;justify-content:center;gap:20px}
.pworks-card{width:250.664px;background:var(--paper);border:1px solid var(--line)}
.pworks-img{position:relative;height:140px;background:#edeff4;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center}
.pworks-img .lb{font-family:var(--jp);font-weight:400;font-size:12.5px;letter-spacing:.625px;color:#9aa1b2;text-align:center}
.pworks-img .ic{position:absolute;left:11px;top:9px;font-family:var(--en);font-weight:400;font-size:10px;letter-spacing:2.2px;color:#b6bccb}
.pworks-body{padding:15px 16px 18px}
.pworks-pill{display:inline-flex;align-items:center;height:27px;padding:0 9px;background:var(--cobalt);border-radius:3px;
  font-family:var(--jp);font-weight:700;font-size:10px;color:#fff;line-height:1}
.pworks-body h4{font-family:var(--jp);font-weight:700;font-size:13.5px;line-height:20.25px;color:var(--ink);margin-top:14px}
.pworks-body p{font-family:var(--jp);font-weight:400;font-size:11.5px;line-height:21.85px;color:var(--sub);margin-top:5px}

/* ====== ⑦ VOICE（お客様の声・掲載準備中・フルブリード白帯）====== */
.pvoice{padding:64px 0}
.pvoice-grid{display:grid;grid-template-columns:386px 386px;gap:20px}
.pvoice-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:4px;
  min-height:146.844px;padding:25px 27px;display:flex;flex-direction:column;justify-content:flex-end}
.pvoice-quote{position:absolute;left:16px;top:6px;font-family:var(--en);font-weight:400;font-size:46px;line-height:46px;color:rgba(0,48,201,.13)}
.pvoice-body{font-family:var(--jp);font-weight:400;font-size:13px;line-height:25.35px;color:var(--body-lead);
  position:relative;z-index:1;max-width:332px}
.pvoice-name{font-family:var(--jp);font-weight:700;font-size:11.5px;line-height:21.85px;color:var(--cobalt);margin-top:13px}
.pvoice-note{font-family:var(--jp);font-weight:400;font-size:11px;line-height:20.9px;color:var(--sub);margin-top:14px}

/* ====== ⑧ FLOW（設置の流れ）====== */
.pflow{padding:64px 0}
.pflow-list{list-style:none}
.pflow-list li{display:flex;align-items:flex-start;gap:26px;padding:15px 0;min-height:83.344px;border-bottom:1px solid var(--line)}
.pflow-no{flex:none;width:40px;height:40px;border-radius:20px;background:var(--cobalt);
  display:flex;align-items:center;justify-content:center;margin-top:6.17px;
  font-family:var(--en);font-weight:700;font-size:17px;color:#fff;line-height:32.3px}
.pflow-txt{display:flex;flex-direction:column}
.pflow-txt .t{font-family:var(--jp);font-weight:700;font-size:15px;line-height:28.5px;color:var(--ink)}
.pflow-txt .d{font-family:var(--jp);font-weight:400;font-size:11.5px;line-height:21.85px;color:var(--sub);margin-top:2px}

/* ===================================================================
   SP（〜767px・基準幅375）— 確定SPカンプ 742:766 の M2 転写（再解釈禁止）
   ・色/コピー/書体/サイズはPC固定（カンプ実値）。変えるのはレイアウト軸（幅・カラム数・積み順）のみ。
   ・本文（CONCEPT/FEATURE/GALLERY/WORKS/VOICE/FLOW）＝PCと同一内容のライブreflow（健全）。
     カンプの内容カラム＝342px／側余白16.5px（375中央）。
   ・別物2点＝① FV（742:768 焼き込み画像差替）／② CTA（769:1034 実コラージュ別インスタンス）。
   ・SPEC＝750:504「SP刷新」ラベル上/値下の縦stack。
   =================================================================== */
@media (max-width:767px){
  /* === ① FV：PCライブ合成を隠し、SPカンプの焼き込み画像(742:768)を出す === */
  .phero{display:none}
  .phero-sp{display:block;width:100%;line-height:0;background:#0a0e12}
  .phero-sp img{display:block;width:100%;height:auto}/* カンプ375×500.25＝原比のまま幅フィット */

  /* === 本体ラッパ：内容カラム342／側余白16.5px（375中央）=== */
  .pwrap{max-width:none;padding:36px 16.5px 0}

  /* eyebrow（CONCEPT/FEATURE/GALLERY 型）＝カンプ：EN Oswald 21px ls2.52／JP 11px ls0.99 */
  .psec-eyebrow{height:auto}
  .psec-eyebrow .en{font-size:21px;letter-spacing:2.52px;line-height:18.75px}
  .psec-eyebrow .jp{font-size:11px;letter-spacing:.99px;margin-left:16px}
  /* セクション見出し（Specifications/Works/Voice/Flow 型）＝カンプ：JP 19px・EN小ラベル */
  .psec-head{height:auto;gap:9px;margin-bottom:14px}
  .psec-head .jp{font-size:19px;letter-spacing:.76px;line-height:1.5}

  /* === ② CONCEPT（742:770）＝左寄せ・カンプ実値 === */
  .pconcept-lead{font-size:19px;line-height:24.225px;letter-spacing:.33px;margin-top:13.5px}
  .pconcept-body{font-size:13.5px;line-height:19.744px;margin-top:10.5px;max-width:none}
  .pconcept-img{width:100%;height:auto;aspect-ratio:340.5/161.25;margin-top:18px;border:.75px solid var(--line)}

  /* === ③ FEATURE（742:783）＝1カラム・カード中央寄せ（カンプ通り） === */
  .pfeature{margin-top:54px}
  .pfeat-grid{grid-template-columns:1fr;gap:15px;margin-top:21px}
  .pfeat-card{min-height:0;padding:26px 22px 24px}
  .pfeat-h{font-size:17px;line-height:24px}
  .pfeat-p{font-size:13.5px;line-height:1.72;max-width:250px;margin-top:9px}

  /* === ④ GALLERY（742:840）＝大画像→2枚並び（カンプ通り） === */
  .pgallery{margin-top:54px}
  .pgal-eyebrow .en{font-size:21px;letter-spacing:2.52px}
  .pgal-eyebrow .jp{font-size:11px;letter-spacing:.99px}
  .pgal-big{width:100%;height:auto;aspect-ratio:340.5/258.75;margin-top:21px}
  .pgal-pair{grid-template-columns:1fr 1fr;gap:9px;margin-top:21px}
  .pgal-half{height:auto;aspect-ratio:165/229.5}

  /* === ⑤ SPEC：PCテーブルを隠し、SPカンプ750:504「SP刷新」スタックを出す === */
  .pspec{padding:48px 0 0}
  .pspec-table{display:none}
  .pspec-sp{display:flex;flex-direction:column;border-top:2px solid var(--cobalt);padding-top:14px}
  .pspec-sp-row{display:flex;flex-direction:column;gap:7px;padding:15px 0;border-bottom:1px solid var(--line)}
  .pspec-sp .k{font-family:var(--jp);font-weight:700;font-size:13px;letter-spacing:.26px;color:var(--cobalt);line-height:normal}
  .pspec-sp .v{font-family:var(--jp);font-weight:400;font-size:14.5px;line-height:1.72;color:#2a313f}
  .pspec-sp .v.strong{font-weight:700;color:var(--ink)}/* サイズ（外寸）＝カンプは太字#15171e */
  .pspec-sp .v p{margin:0}

  /* === ⑥ WORKS（742:896・掲載準備中）＝2枚横並び維持（カンプ通り） === */
  .pworks{padding:48px 0 0}
  .pworks-grid{gap:10.5px}
  .pworks-card{width:100%;max-width:165.75px}
  .pworks-img .lb{display:none}/* SPカンプ742:913：小カードは中央ラベル無し＝IMAGE(左上)のみ */

  /* === ⑦ VOICE（742:927・掲載準備中）＝1カラム === */
  .pvoice{padding:48px 0 0}
  .pvoice-grid{grid-template-columns:1fr;gap:13.5px}
  .pvoice-card{min-height:0}
  .pvoice-body{max-width:none}

  /* === ⑧ FLOW（742:953）＝番号丸＋テキスト（カンプ通り） === */
  .pflow{padding:48px 0 0}
  .pflow-list li{gap:13.5px;min-height:0;padding:13.5px 0}
  .pflow-no{width:28px;height:28px;font-size:16px;margin-top:12px}
  .pflow-txt .t{font-size:14px;line-height:1.5}
  .pflow-txt .d{font-size:12px;line-height:1.5}

  /* === ⑨ CTA：共通PC CTAを隠し、SPカンプ769:1034（別インスタンス）を出す ===
     ground 専用に隔離（last-fort は共有 .cta を SP でも使う＝畳まない）。 */
  body[data-page="ground"] .cta{display:none}
  body[data-page="ground"] .cta-sp{display:block}
  .cta-sp{position:relative;width:100%;min-height:332.625px;overflow:hidden}
  /* 背景＝実コラージュ画像 cta-bg.jpg（カンプは blur1.217px・cover） */
  .cta-sp__bg{position:absolute;inset:0;z-index:0;
    background:url("/assets/ground/sp/cta-bg.jpg") center/cover no-repeat;filter:blur(1.217px)}
  /* scrim＝カンプ：radial(rgba(10,14,26,.4)→rgba(8,11,22,.72)) ＋ linear(rgba(7,10,20,.56)→.64) */
  .cta-sp__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-sp__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
    padding:44.81px 15px 0;text-align:center}
  /* 見出し＝カンプ：Noto Sans JP Medium 23.25px／行34.875px／ls1.86／#f2f2f2・2行 */
  .cta-sp__head{font-family:var(--jp);font-weight:500;font-size:23.25px;line-height:34.875px;letter-spacing:1.86px;color:#f2f2f2}
  /* リード＝カンプ：Regular 11.25px／行21.375px／ls0.45／rgba(255,255,255,.74) */
  .cta-sp__lead{margin-top:13.5px;font-family:var(--jp);font-weight:400;font-size:11.25px;line-height:21.375px;letter-spacing:.45px;color:rgba(255,255,255,.74)}
  /* 青ピル2＝カンプ：縦積み・#073ab6・h48／w315(max)・radius24・gap10.5 */
  .cta-sp__actions{display:flex;flex-direction:column;align-items:center;gap:10.5px;margin-top:28.5px;width:100%}
  .cta-sp__pill{position:relative;display:flex;align-items:center;justify-content:center;
    width:100%;max-width:315px;height:48px;border-radius:24px;background:#073ab6;
    box-shadow:0 7.5px 5.625px rgba(0,0,0,.28);transition:transform .2s,background .2s}
  .cta-sp__pill:hover{transform:translateY(-1px);background:#0843cc}
  .cta-sp__pill .lbl{font-family:var(--jp);font-weight:500;font-size:12.75px;letter-spacing:.765px;color:#fff}
  .cta-sp__pill .arw{position:absolute;right:18px;font-size:9.75px;color:#fff}
}