/* ============================================================
   商品ページ（タブ構成）＋ 課題から探す
   方針: 分離は「面の色の対比」と余白だけ。罫線・角丸・影・パステル装飾は使わない。
   参考: astecpaints.jp 製品詳細（冒頭要約 → タブで 効果／用途／仕様／資料／FAQ）
   ============================================================ */
:root{ --pd-hdr:92px; }
@media(max-width:1080px){ :root{ --pd-hdr:68px; } }

.pd{
  --pd-ink:#171a1e; --pd-text:#2c3138; --pd-muted:#5f6670;
  --pd-band:#f2f3f5; --pd-band2:#e5e8ec; --pd-accent:#1f2a3a; --pd-hl:#b8892c; --pd-dark:#1b1e23;
  color:var(--pd-text); background:#fff; overflow-x:clip;
}
.pd--charcoal{ --pd-accent:#3a2a1e; --pd-band:#f6f2ec; --pd-band2:#ebe3d7; --pd-hl:#b8892c; --pd-dark:#1c1a17; }
.pd--hydrosky{ --pd-accent:#0f3d70; --pd-band:#eef3f8; --pd-band2:#dbe5ef; --pd-hl:#c8102e; --pd-dark:#0b1f3a; }
.pd--aqua{     --pd-accent:#0b6fa8; --pd-band:#ecf6fa; --pd-band2:#d6e9f2; --pd-hl:#d94b77; --pd-dark:#0a3c5c; }
.pd *{ box-sizing:border-box; }
.pd img{ max-width:100%; height:auto; display:block; }
.pd .container{ max-width:1180px; margin:0 auto; padding:0 28px; }
.pd .container--narrow{ max-width:900px; }
.pd a{ text-decoration:none; }
.pd ul, .pd ol{ list-style:none; margin:0; padding:0; }
.pd h1,.pd h2,.pd h3,.pd h4{ font-weight:700; }
.pd .ic{ width:18px; height:18px; flex:none; }
.pd-mincho{ font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-weight:600; }

/* ---------- 見出し・本文 ---------- */
.pd-h2{ font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-weight:600; font-size:clamp(1.5rem,2.6vw,2.05rem);
  line-height:1.45; letter-spacing:.01em; margin:0 0 14px; color:var(--pd-ink); text-wrap:balance; word-break:auto-phrase; }
.pd-h3{ font-size:1.2rem; margin:0 0 10px; color:var(--pd-ink); line-height:1.5; }
.pd-lead{ font-size:.97rem; line-height:2; color:var(--pd-text); max-width:840px; margin:0 0 30px; word-break:auto-phrase; }
.pd-lead:last-child{ margin-bottom:0; }
.pd-src{ font-size:.72rem; color:var(--pd-muted); line-height:1.7; margin:10px 0 0; }
.pd-note-text{ font-size:.8rem; color:var(--pd-muted); line-height:1.8; margin:16px 0 0; }
.pd-p{ margin:0 0 12px; line-height:2; font-size:.95rem; }
.pd-p:last-child{ margin-bottom:0; }
.pd-list li{ position:relative; padding-left:18px; line-height:1.85; font-size:.92rem; margin-bottom:6px; }
.pd-list li::before{ content:""; position:absolute; left:2px; top:.72em; width:7px; height:7px; background:var(--pd-hl); }
.is-dark .pd-list li::before{ background:#fff; }

/* ---------- ボタン ---------- */
.pd .pd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:0 26px;
  background:var(--pd-accent); color:#fff; font-weight:700; font-size:.94rem; line-height:1.3; white-space:nowrap;
  transition:background .25s, color .25s; cursor:pointer; font-family:inherit; }
.pd .pd-btn:hover{ background:var(--pd-dark); color:#fff; }
.pd .pd-btn--hl{ background:var(--pd-hl); } .pd .pd-btn--hl:hover{ background:var(--pd-dark); }
.pd .pd-btn--ghost{ background:var(--pd-band2); color:var(--pd-ink); } .pd .pd-btn--ghost:hover{ background:var(--pd-accent); color:#fff; }
.pd .pd-btn--white{ background:#fff; color:var(--pd-accent); } .pd .pd-btn--white:hover{ background:var(--pd-hl); color:#fff; }
.pd-btn--sm{ min-height:42px; padding:0 18px; font-size:.84rem; }
.pd-btns{ display:flex; flex-wrap:wrap; gap:12px; }
.pd-btns--center{ justify-content:center; }

/* ---------- ファーストビュー（フルワイド） ----------
   photo: 写真を画面いっぱいに敷き、左に暗いグラデをかけて白文字
   dark : 黒の帯。右に黒背景の写真を素のまま置く（境目が出ない）
   light: 淡い色の帯。右の画像の左端をぼかして帯に溶かす */
.pd-hero{ position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:min(88vh, 720px); padding:calc(var(--pd-hdr) + 48px) 0 56px; background:var(--pd-band); }
.pd-hero__bg{ position:absolute; inset:0; z-index:0; }
.pd-hero__bg img{ width:100%; height:100%; object-fit:cover; }
.pd-hero__inner{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center; width:100%; }
.pd-hero__crumb{ display:flex; flex-wrap:wrap; gap:8px; font-size:.78rem; color:var(--pd-muted); margin:0 0 22px; }
.pd-hero__cat{ display:inline-block; margin:0 0 16px; padding:5px 12px; font-size:.78rem; font-weight:700; color:#fff; background:var(--pd-accent); letter-spacing:.06em; }
.pd-hero h1{ font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-weight:600; font-size:clamp(2rem,3.6vw,2.9rem);
  line-height:1.25; letter-spacing:.01em; margin:0 0 14px; color:var(--pd-ink); }
.pd-hero h1 small{ display:block; font-size:.4em; font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; font-weight:700; color:var(--pd-muted); margin-top:10px; letter-spacing:.04em; }
.pd-hero__catch{ font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-weight:600; font-size:clamp(1.2rem,2.1vw,1.6rem);
  line-height:1.6; color:var(--pd-accent); margin:0 0 20px; text-wrap:balance; word-break:auto-phrase; }
.pd-hero__lead p{ margin:0 0 12px; font-size:1rem; line-height:1.95; color:var(--pd-text); word-break:auto-phrase; max-width:34em; }
.pd-hero__btns{ margin-top:28px; }
.pd-hero__btns .pd-btn{ min-height:56px; padding:0 30px; font-size:1rem; }
.pd-hero__media{ position:relative; min-width:0; }
.pd-hero__img{ width:100%; height:auto; display:block; }
.pd-hero__side{ position:absolute; right:16px; bottom:16px; width:min(32%,170px); }
.pd-hero__cap{ font-size:.76rem; margin:10px 0 0; color:var(--pd-muted); }

/* photo */
.pd-hero--photo{ color:#fff; background:var(--pd-dark); }
.pd-hero--photo .pd-hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.74) 38%, rgba(10,10,10,.28) 66%, rgba(10,10,10,.12) 100%),
             linear-gradient(0deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 40%); }
.pd-hero--photo .pd-hero__crumb, .pd-hero--photo .pd-hero__crumb a{ color:rgba(255,255,255,.72); }
.pd-hero--photo .pd-hero__cat{ background:rgba(255,255,255,.18); color:#fff; }
.pd-hero--photo h1{ color:#fff; } .pd-hero--photo h1 small{ color:rgba(255,255,255,.75); }
.pd-hero--photo .pd-hero__catch{ color:#f1dfb8; }
.pd-hero--photo .pd-hero__lead p{ color:rgba(255,255,255,.9); }
.pd-hero--photo .pd-hero__cap{ color:rgba(255,255,255,.75); }
.pd-hero--photo .pd-hero__media{ display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end; min-height:320px; text-align:right; }
.pd-hero--photo .pd-hero__side{ position:static; width:min(38%,200px); }

/* dark */
.pd-hero--dark{ color:#fff; background:#070707; }
.pd-hero--dark .pd-hero__crumb, .pd-hero--dark .pd-hero__crumb a{ color:rgba(255,255,255,.7); }
.pd-hero--dark .pd-hero__cat{ background:rgba(255,255,255,.14); color:#fff; }
.pd-hero--dark h1{ color:#fff; } .pd-hero--dark h1 small{ color:rgba(255,255,255,.72); }
.pd-hero--dark .pd-hero__catch{ color:#cfe1f7; }
.pd-hero--dark .pd-hero__lead p{ color:rgba(255,255,255,.88); }
.pd-hero--dark .pd-hero__cap{ color:rgba(255,255,255,.7); }
.pd-hero--dark .pd-hero__img{ max-width:800px; margin-left:auto; }

/* light */
.pd-hero--light{ background:linear-gradient(100deg, #eef6fb 0%, #dbecf6 100%); }
.pd-hero--light .pd-hero__img{ -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%); mask-image:linear-gradient(90deg, transparent 0, #000 22%); max-width:760px; margin-left:auto; }
.pd--aqua .pd-hero--light .pd-hero__cat{ background:#0b6fa8; }

/* ボタンの色（暗い帯の上では白ボタン＋強調色） */
.pd-hero--photo .pd-btn, .pd-hero--dark .pd-btn{ background:#fff; color:var(--pd-ink); }
.pd-hero--photo .pd-btn:hover, .pd-hero--dark .pd-btn:hover{ background:var(--pd-hl); color:#fff; }
.pd-hero--photo .pd-btn--hl, .pd-hero--dark .pd-btn--hl{ background:var(--pd-hl); color:#fff; }
.pd-hero--photo .pd-btn--hl:hover, .pd-hero--dark .pd-btn--hl:hover{ background:#fff; color:var(--pd-ink); }

/* 要点表（ファーストビューの直下・白地） */
.pd-facts{ background:#fff; padding:44px 0 0; }
.pd-table--facts th{ width:200px; font-size:.95rem; }
.pd-table--facts td{ font-size:.97rem; line-height:1.9; }

/* ---------- 追従タブ ---------- */
.pd-tabs__top{ height:0; margin-top:40px; }  /* タブ帯の本来の位置を示す目印（JSがスクロール先に使う） */
.pd-tabs{ position:sticky; top:var(--pd-hdr); z-index:900; background:#fff; margin-top:0; padding:6px 0; transition:box-shadow .25s; }
.pd-tabs.is-stuck{ box-shadow:0 10px 22px -16px rgba(0,0,0,.35); }
.pd-tabs__list{ display:flex; gap:4px; background:var(--pd-band); padding:6px; }
.pd-tab{ flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center;
  min-height:62px; padding:8px 10px; background:transparent; color:var(--pd-text); font-weight:700; font-size:1.02rem;
  line-height:1.3; cursor:pointer; font-family:inherit; transition:background .2s, color .2s; white-space:nowrap; }
.pd-tab:hover{ color:var(--pd-ink); background:#fff; }
.pd-tab.is-on{ background:var(--pd-accent); color:#fff; }
.pd-panel[hidden]{ display:none !important; }

/* ---------- ブロック共通 ---------- */
.pd-block{ padding:62px 0; }
.pd-block + .pd-block:not(.is-band):not(.is-dark){ padding-top:18px; }
.pd-block.is-band{ background:var(--pd-band); }
.pd-block.is-dark{ background:var(--pd-dark); color:#fff; }
.is-dark .pd-h2, .is-dark .pd-h3{ color:#fff; }
.is-dark .pd-lead, .is-dark .pd-p, .is-dark .pd-src, .is-dark .pd-note-text{ color:rgba(255,255,255,.82); }
.pd-block__head{ margin-bottom:34px; }
.pd-block__head--center{ text-align:center; }
.pd-block__head--center .pd-lead{ margin-left:auto; margin-right:auto; }
.pd-fig{ background:var(--pd-band); padding:12px; }
.is-band .pd-fig{ background:#fff; }
.is-dark .pd-fig{ background:rgba(255,255,255,.06); }
.pd-fig img{ width:100%; }
.pd-fig figcaption{ font-size:.8rem; color:var(--pd-muted); margin-top:10px; line-height:1.7; }
.is-dark .pd-fig figcaption{ color:rgba(255,255,255,.75); }
.pd-fig--contain img{ object-fit:contain; background:#fff; }

/* 2カラム（導入） */
.pd-intro{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.pd-intro.is-rev > .pd-intro__fig{ order:-1; }

/* 特長（番号つき・写真と交互） */
.pd-feat{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:30px 0; }
.pd-feat:nth-child(even) .pd-feat__fig{ order:-1; }
.pd-feat__n{ display:block; font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-size:2rem; color:var(--pd-hl); line-height:1; margin-bottom:12px; font-variant-numeric:tabular-nums; }
.pd-feat h3{ font-size:1.42rem; margin:0 0 14px; line-height:1.5; color:var(--pd-ink); word-break:auto-phrase; }
.pd-feat p{ margin:0 0 12px; line-height:2; font-size:.95rem; }
.pd-feat .pd-list{ margin-top:10px; }
.pd-feat__stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin:16px 0 0; }
.pd-feat__stats > div{ background:var(--pd-band); padding:12px 12px 10px; }
.is-band .pd-feat__stats > div{ background:#fff; }
.pd-feat__stats .v{ display:block; font-size:1.35rem; font-weight:700; color:var(--pd-accent); line-height:1.2; }
.pd-feat__stats .l{ display:block; font-size:.72rem; color:var(--pd-muted); margin-top:3px; line-height:1.5; }

/* 比較（本製品 vs 一般） */
.pd-cmp{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.pd-cmp__a{ background:var(--pd-accent); color:#fff; padding:32px 34px; }
.pd-cmp__b{ background:var(--pd-band2); color:var(--pd-text); padding:32px 34px; }
.is-band .pd-cmp__b{ background:#fff; }
.pd-cmp h3{ margin:0 0 6px; font-size:.95rem; opacity:.85; }
.pd-cmp__lead{ font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-weight:600; font-size:1.35rem; margin:0 0 16px; line-height:1.5; }
.pd-cmp li{ position:relative; padding-left:18px; line-height:1.9; font-size:.92rem; margin-bottom:4px; }
.pd-cmp li::before{ content:""; position:absolute; left:0; top:.78em; width:7px; height:7px; background:currentColor; opacity:.7; }

/* データ・試験 */
.pd-data{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; }
.pd-data__i{ background:#fff; padding:24px 24px 22px; display:flex; flex-direction:column; }
.pd-block:not(.is-band) .pd-data__i{ background:var(--pd-band); }
.is-dark .pd-data__i{ background:rgba(255,255,255,.07); }
.pd-data__i h3{ font-size:1.05rem; margin:0 0 12px; line-height:1.5; }
.pd-data__i p{ font-size:.88rem; line-height:1.9; margin:0 0 12px; }
.pd-data__i .pd-fig{ padding:0; background:transparent; margin-top:auto; }
.pd-data__i .pd-fig img{ background:#fff; }
.pd-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.pd-stat{ background:var(--pd-band); padding:26px 18px; text-align:center; }
.is-band .pd-stat{ background:#fff; }
.is-dark .pd-stat{ background:rgba(255,255,255,.08); }
.pd-stat .v{ display:block; font-size:2.1rem; font-weight:700; color:var(--pd-accent); font-variant-numeric:tabular-nums; line-height:1.15; }
.pd-stat .v small{ font-size:46%; margin-left:2px; }
.is-dark .pd-stat .v{ color:#fff; }
.pd-stat .l{ display:block; margin-top:10px; font-size:.8rem; line-height:1.7; color:var(--pd-text); }
.pd-stat .s{ display:block; margin-top:6px; font-size:.7rem; color:var(--pd-muted); line-height:1.6; }
.is-dark .pd-stat .l{ color:rgba(255,255,255,.85); } .is-dark .pd-stat .s{ color:rgba(255,255,255,.6); }
.pd-bars{ background:#fff; padding:24px; }
.pd-block:not(.is-band) .pd-bars{ background:var(--pd-band); }
.pd-bars__cap{ font-size:.8rem; color:var(--pd-muted); margin:0 0 14px; }
.pd-bar{ display:grid; grid-template-columns:170px 1fr 74px; gap:12px; align-items:center; margin-bottom:8px; font-size:.86rem; color:var(--pd-text); }
.pd-bar__t{ height:18px; background:var(--pd-band2); }
.pd-bar__t > span{ display:block; height:100%; background:var(--pd-muted); }
.pd-bar__v{ text-align:right; font-variant-numeric:tabular-nums; }
.pd-bar.is-own{ font-weight:700; color:var(--pd-accent); }
.pd-bar.is-own .pd-bar__t > span{ background:var(--pd-accent); }

/* 写真カード */
.pd-grid{ display:grid; gap:18px; }
.pd-grid--2{ grid-template-columns:repeat(2,1fr); }
.pd-grid--3{ grid-template-columns:repeat(3,1fr); }
.pd-grid--4{ grid-template-columns:repeat(4,1fr); }
.pd-card{ background:var(--pd-band); display:block; color:inherit; min-width:0; }
.is-band .pd-card{ background:#fff; }
.is-dark .pd-card{ background:rgba(255,255,255,.07); }
.pd-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.pd-card__b{ padding:14px 16px 16px; }
.pd-card__tag{ display:block; font-size:.7rem; color:var(--pd-hl); font-weight:700; letter-spacing:.06em; margin-bottom:4px; }
.pd-card h3{ font-size:.98rem; margin:0 0 6px; line-height:1.5; }
.pd-card p{ font-size:.82rem; line-height:1.75; margin:0; color:var(--pd-muted); }
.is-dark .pd-card p{ color:rgba(255,255,255,.75); }
a.pd-card:hover img{ opacity:.88; }
a.pd-card:hover h3{ color:var(--pd-accent); }

/* チップ（適用素材など） */
.pd-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pd-chips span{ background:var(--pd-band); padding:9px 14px; font-size:.86rem; font-weight:700; color:var(--pd-accent); line-height:1.4; }
.is-band .pd-chips span{ background:#fff; }

/* 2大用途 */
.pd-two{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.pd-two__i{ background:#fff; display:flex; flex-direction:column; }
.pd-block:not(.is-band) .pd-two__i{ background:var(--pd-band); }
.pd-two__i > img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.pd-two__b{ padding:26px 28px 24px; }
.pd-two__b h3{ font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-weight:600; font-size:1.4rem; margin:0 0 6px; line-height:1.45; }
.pd-two__b .sub{ font-size:.8rem; color:var(--pd-hl); font-weight:700; margin:0 0 12px; letter-spacing:.04em; }
.pd-two__b p{ font-size:.92rem; line-height:1.95; margin:0 0 12px; }
.pd-two__pics{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:0 4px 4px; margin-top:auto; }
.pd-two__pics img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

/* 表 */
.pd-table__wrap{ overflow-x:auto; }
.pd-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.pd-table th{ text-align:left; width:30%; padding:14px 16px; background:var(--pd-band2); font-weight:700; color:var(--pd-ink); vertical-align:top; line-height:1.7; }
.pd-table td{ padding:14px 16px; background:#fff; line-height:1.8; vertical-align:top; }
.pd-table tr:nth-child(even) td{ background:var(--pd-band); }
.pd-block:not(.is-band) .pd-table tr:nth-child(odd) td{ background:var(--pd-band); }
.pd-block:not(.is-band) .pd-table tr:nth-child(even) td{ background:#fff; }
.pd-table--grid th{ width:auto; }
.pd-table--grid td{ text-align:center; }
.pd-table--grid td:first-child{ text-align:left; font-weight:700; }
.pd-table + .pd-table{ margin-top:28px; }
.pd-table__title{ font-size:1.05rem; margin:0 0 12px; display:flex; align-items:baseline; gap:12px; }
.pd-table__title small{ font-size:.78rem; color:var(--pd-muted); font-weight:500; }
.pd-tablegroup + .pd-tablegroup{ margin-top:40px; }

/* 手順 */
.pd-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pd-step{ background:#fff; padding-bottom:20px; }
.pd-block:not(.is-band) .pd-step{ background:var(--pd-band); }
.pd-step img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.pd-step__n{ display:inline-block; background:var(--pd-accent); color:#fff; font-weight:700; padding:4px 12px; font-size:.78rem; margin:-13px 0 0 16px; position:relative; }
.pd-step h4{ margin:10px 18px 6px; font-size:1rem; line-height:1.5; }
.pd-step p{ margin:0 18px; font-size:.84rem; line-height:1.8; }
.pd-step .pd-list{ margin:8px 18px 0; } .pd-step .pd-list li{ font-size:.82rem; }

/* 注意事項 */
.pd-notes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.pd-note{ background:#fff; padding:22px 24px 20px; }
.pd-block:not(.is-band) .pd-note{ background:var(--pd-band); }
.pd-note h4{ margin:0 0 10px; font-size:.98rem; color:var(--pd-accent); }
.pd-note li{ position:relative; padding-left:16px; font-size:.86rem; line-height:1.8; margin-bottom:6px; }
.pd-note li::before{ content:""; position:absolute; left:0; top:.72em; width:6px; height:6px; background:var(--pd-hl); }

/* シリーズ製品 */
.pd-series{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pd-ser{ background:#fff; display:flex; flex-direction:column; min-width:0; }
.pd-block:not(.is-band) .pd-ser{ background:var(--pd-band); }
.pd-ser > img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.pd-ser__b{ padding:18px 18px 20px; flex:1; display:flex; flex-direction:column; }
.pd-ser__code{ font-size:1.45rem; font-weight:700; color:var(--pd-accent); line-height:1.1; }
.pd-ser__role{ font-size:.72rem; font-weight:700; color:var(--pd-hl); margin:8px 0 6px; letter-spacing:.03em; }
.pd-ser__sub{ font-size:.8rem; color:var(--pd-muted); margin:0 0 10px; line-height:1.6; }
.pd-ser p{ font-size:.86rem; line-height:1.8; margin:0 0 12px; }
.pd-ser__use{ font-size:.78rem; color:var(--pd-muted); line-height:1.7; margin:0 0 12px; }
.pd-ser a{ margin-top:auto; font-size:.82rem; font-weight:700; color:var(--pd-accent); }
.pd-ser a:hover{ color:var(--pd-hl); }
.pd-flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:24px; }
.pd-flow__i{ background:var(--pd-accent); color:#fff; padding:20px 22px; }
.pd-flow__i b{ display:block; font-size:1.02rem; margin-bottom:6px; }
.pd-flow__i small{ display:block; font-size:.7rem; opacity:.8; margin-bottom:8px; letter-spacing:.06em; }
.pd-flow__i p{ margin:0; font-size:.84rem; line-height:1.75; opacity:.92; }

/* 動画 */
.pd-videos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.pd-yt{ position:relative; aspect-ratio:16/9; background:#000; cursor:pointer; overflow:hidden; }
.pd-yt img{ width:100%; height:100%; object-fit:cover; opacity:.92; transition:opacity .25s; }
.pd-yt:hover img{ opacity:1; }
.pd-yt::after{ content:""; position:absolute; left:50%; top:50%; width:64px; height:64px; transform:translate(-50%,-50%);
  background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23171a1e'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 26px; }
.pd-yt.is-loaded::after{ display:none; }
.pd-yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.pd-video__t{ font-weight:700; font-size:.92rem; margin:10px 0 2px; line-height:1.5; }
.pd-video__s{ font-size:.76rem; color:var(--pd-muted); }
.pd-vids{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pd-vids .vid-card{ box-shadow:none; }
.pd-vids .vid-thumb{ aspect-ratio:9/16; }
.pd-pending{ background:#fff; padding:22px 24px; font-size:.86rem; line-height:1.8; color:var(--pd-muted); }
.pd-block:not(.is-band) .pd-pending{ background:var(--pd-band); }

/* 資料（横型カード：縦長の表紙を小さく左に置く） */
.pd-docs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr)); gap:14px; }
.pd-doc{ background:#fff; display:flex; gap:16px; padding:14px; align-items:stretch; }
.pd-block:not(.is-band) .pd-doc{ background:var(--pd-band); }
.pd-doc__cover{ position:relative; flex:none; width:104px; aspect-ratio:3/4; background:var(--pd-band2); overflow:hidden; }
.pd-doc__cover img{ width:100%; height:100%; object-fit:cover; }
.pd-doc__lock{ position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.72); color:#fff; font-size:.64rem; font-weight:700; padding:4px 6px; display:flex; align-items:center; justify-content:center; gap:4px; }
.pd-doc__lock .ic{ width:11px; height:11px; }
.pd-doc__badge{ display:inline-block; background:var(--pd-accent); color:#fff; font-size:.66rem; font-weight:700; padding:3px 8px; margin-bottom:6px; }
.pd-doc__b{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pd-doc__t{ font-weight:700; font-size:.98rem; line-height:1.5; }
.pd-doc__m{ font-size:.78rem; color:var(--pd-muted); margin-top:4px; }
.pd-doc__acts{ display:flex; gap:6px; margin-top:auto; padding-top:12px; }
.pd-doc__acts a{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:10px 6px; font-size:.82rem; font-weight:700; background:var(--pd-band2); color:var(--pd-ink); }
.pd-doc__acts a.is-dl{ background:var(--pd-accent); color:#fff; }
.pd-doc__acts a:hover{ background:var(--pd-dark); color:#fff; }
.pd-doc__acts .ic{ width:14px; height:14px; }
@media(max-width:560px){ .pd-docs{ grid-template-columns:1fr; } .pd-doc__cover{ width:84px; }
  /* min-width:auto（既定）のままだと中身の最小幅より小さくなれず、狭幅でカードが画面からはみ出す */
  .pd-doc{ min-width:0; } .pd-doc__acts{ flex-wrap:wrap; } .pd-doc__acts a{ min-width:0; } }

/* FAQ */
.pd-faq details{ background:#fff; margin-bottom:8px; }
.pd-block:not(.is-band) .pd-faq details{ background:var(--pd-band); }
.pd-faq summary{ display:flex; align-items:flex-start; gap:14px; padding:18px 52px 18px 22px; font-weight:700; cursor:pointer; list-style:none; position:relative; line-height:1.7; color:var(--pd-ink); }
.pd-faq summary::-webkit-details-marker{ display:none; }
.pd-faq summary .q{ flex:none; color:var(--pd-hl); font-family:"Zen Old Mincho",serif; font-size:1.1rem; line-height:1.5; }
.pd-faq summary::after{ content:"＋"; position:absolute; right:20px; top:16px; font-size:1.1rem; color:var(--pd-muted); font-weight:400; }
.pd-faq details[open] summary::after{ content:"−"; }
.pd-faq__a{ padding:0 24px 22px 56px; font-size:.92rem; line-height:2; color:var(--pd-text); }
.pd-faq__a p{ margin:0 0 10px; } .pd-faq__a p:last-child{ margin-bottom:0; }

/* 引用 */
.pd-quote{ background:var(--pd-accent); color:#fff; padding:36px 40px; }
.pd-quote p{ margin:0; font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-weight:600; font-size:1.2rem; line-height:1.9; }
.pd-quote cite{ display:block; margin-top:12px; font-size:.8rem; opacity:.82; font-style:normal; }

/* インラインCTA */
.pd-ctai{ background:var(--pd-dark); color:#fff; padding:36px 40px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.pd-ctai h3{ margin:0 0 6px; font-size:1.2rem; font-family:"Zen Old Mincho",serif; font-weight:600; }
.pd-ctai p{ margin:0; font-size:.88rem; opacity:.85; line-height:1.8; }

/* 関連（タブの下：施工事例・コラム） */
.pd-related{ padding:72px 0 60px; }
.pd-related + .pd-related{ padding-top:0; }
.pd-related__head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.pd-related__head a{ font-size:.86rem; font-weight:700; color:var(--pd-accent); }
.pd-related__head a:hover{ color:var(--pd-hl); }

/* 締めのCTA */
.pd-cta{ background:var(--pd-dark); color:#fff; padding:78px 0; text-align:center; }
.pd-cta h2{ font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-weight:600; font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.5; margin:0 0 14px; text-wrap:balance; }
.pd-cta p{ margin:0 auto 30px; max-width:640px; font-size:.95rem; line-height:1.9; opacity:.85; }

/* 右端の固定導線（基礎ロングライフシステム） */
.pd .pd-side{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:950; writing-mode:vertical-rl;
  background:var(--pd-hl); color:#fff; padding:24px 15px 22px; font-weight:700; font-size:.9rem; letter-spacing:.1em; line-height:1.3;
  display:flex; align-items:center; gap:10px; transition:background .25s; }
.pd-side small{ font-size:.68rem; opacity:.85; letter-spacing:.08em; }
.pd-side .ic{ width:16px; height:16px; transform:rotate(90deg); }
.pd .pd-side:hover{ background:var(--pd-dark); color:#fff; }
@media(max-width:820px){
  /* 横並びに戻すが、狭幅では「基礎ロングライフシステ/ム」のように単語の途中で折れて潰れていた。
     主文言・補足それぞれは折り返さず、入りきらないときだけ行ごと折り返す。 */
  .pd .pd-side{ writing-mode:horizontal-tb; top:auto; bottom:0; left:0; right:0; transform:none;
    justify-content:center; align-items:center; flex-wrap:wrap; gap:4px 8px; text-align:center;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom)); font-size:.8rem; letter-spacing:.02em; line-height:1.4; }
  .pd .pd-side > span{ white-space:nowrap; }
  .pd .pd-side small{ font-size:.68rem; white-space:nowrap; }
  .pd .pd-side .ic{ transform:none; width:14px; height:14px; }
  .pd--has-side{ padding-bottom:calc(60px + env(safe-area-inset-bottom)); }
}

/* ---------- レスポンシブ ---------- */
@media(max-width:960px){
  .pd-hero__inner, .pd-intro, .pd-feat, .pd-cmp, .pd-two{ grid-template-columns:1fr; }
  .pd-hero{ min-height:0; }
  .pd-hero--photo .pd-hero__media{ min-height:0; justify-content:flex-start; }
  .pd-hero--dark .pd-hero__img, .pd-hero--light .pd-hero__img{ margin-left:0; max-width:560px; }
  .pd-intro.is-rev > .pd-intro__fig, .pd-feat:nth-child(even) .pd-feat__fig{ order:0; }
  .pd-feat{ gap:24px; }
  .pd-grid--3, .pd-grid--4, .pd-series, .pd-steps, .pd-vids{ grid-template-columns:repeat(2,1fr); }
  .pd-table--facts th{ width:7.5em; font-size:.88rem; }
  .pd-flow{ grid-template-columns:1fr; }
  .pd-bar{ grid-template-columns:110px 1fr 60px; font-size:.78rem; }
}
@media(max-width:820px){
  /* 以前は横スクロール（overflow-x:auto）にしていたが、5つ並ぶと画面外に出たタブの存在が
     利用者に伝わらない（幅375pxで表示339px／中身679px＝半分が画面外だった）。
     横スクロールをやめ、タブ自身を縮めて5つとも1行に収める。ラベルは2行になってよい。 */
  .pd-tabs__list{ overflow-x:visible; scroll-snap-type:none; }
  .pd-tab{ flex:1 1 0; min-width:0; padding:8px 10px; min-height:52px; font-size:.92rem; white-space:normal; scroll-snap-align:none; }
}
@media(max-width:560px){
  /* この幅では1行5列だと1つ68pxしかなくラベルが読めない。2列に折り返す。
     3段になり追従させると画面を占有しすぎるため、追従もやめる。
     タブを押すとタブ帯が画面上端へ戻る挙動（product.js の scrollToBar）は変えていない。 */
  .pd-tabs{ position:static; }
  .pd-tabs.is-stuck{ box-shadow:none; }
  .pd-tabs__list{ flex-wrap:wrap; }
  .pd-tab{ flex:1 1 auto; min-width:calc(50% - 2px); padding:8px 14px; }
}
@media(max-width:560px){
  .pd .container{ padding:0 18px; }
  /* ボタンが white-space:nowrap ＋ 固定padding で縮まず、狭幅・文字拡大時にはみ出していた */
  .pd .pd-btn{ white-space:normal; padding:12px 18px; height:auto; max-width:100%; text-align:center; }
  .pd .pd-btn--sm{ padding:10px 14px; }
  .pd-block{ padding:44px 0; }
  .pd-grid--3, .pd-grid--4, .pd-grid--2, .pd-series, .pd-steps, .pd-vids, .pd-data{ grid-template-columns:1fr; }
  .pd-cmp__a, .pd-cmp__b, .pd-quote, .pd-ctai{ padding:24px 20px; }
  .pd-two__b{ padding:20px 18px; }
  .pd-hero{ padding:calc(var(--pd-hdr) + 28px) 0 40px; }
  .pd-hero--photo .pd-hero__side{ width:120px; }
  .pd-faq summary{ padding:14px 44px 14px 16px; } .pd-faq__a{ padding:0 16px 18px 16px; }
}

/* ============================================================
   課題から探す（写真主導）
   ============================================================ */
.sol-hero{ position:relative; min-height:min(62vh,560px); display:flex; align-items:flex-end; color:#fff; overflow:hidden; padding-top:var(--pd-hdr); }
.sol-hero__bg{ position:absolute; inset:0; }
.sol-hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.sol-hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,12,14,.15) 0%, rgba(10,12,14,.72) 100%); }
.sol-hero__inner{ position:relative; z-index:1; width:100%; padding:80px 0 56px; }
.sol-hero__crumb{ display:flex; gap:8px; font-size:.78rem; color:rgba(255,255,255,.75); margin-bottom:22px; }
.sol-hero h1{ font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-weight:600; font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.3; margin:0 0 14px; }
.sol-hero p{ margin:0; max-width:640px; font-size:1rem; line-height:1.95; color:rgba(255,255,255,.9); }

.sol-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pd .sol-tile{ position:relative; display:block; color:#fff; overflow:hidden; aspect-ratio:4/3.3; background:var(--pd-dark); }
.sol-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.sol-tile:hover img{ transform:scale(1.05); }
.sol-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,12,14,0) 30%, rgba(10,12,14,.86) 100%); }
.sol-tile__b{ position:absolute; left:0; right:0; bottom:0; padding:22px 22px 20px; z-index:1; }
.sol-tile__no{ display:block; font-family:"Zen Old Mincho",serif; font-size:.9rem; letter-spacing:.14em; color:var(--pd-hl); margin-bottom:6px; }
.sol-tile h3{ font-size:1.25rem; margin:0 0 8px; line-height:1.45; font-family:"Zen Old Mincho",serif; font-weight:600; }
.sol-tile p{ margin:0 0 10px; font-size:.84rem; line-height:1.7; color:rgba(255,255,255,.88); }
.sol-tile__to{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; background:#fff; color:var(--pd-ink); padding:6px 12px; }
.sol-tile__to .ic{ width:14px; height:14px; }

.sol-places{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.sol-place{ display:block; color:inherit; background:#fff; }
.sol-place img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.sol-place__b{ padding:12px 12px 14px; }
.sol-place b{ display:block; font-size:.95rem; margin-bottom:4px; }
.sol-place span{ display:block; font-size:.74rem; color:var(--pd-muted); line-height:1.6; }
.sol-place:hover img{ opacity:.88; }

.sol-matrix th, .sol-matrix td{ font-size:.86rem; }
.sol-matrix td:first-child{ width:34%; }
.sol-matrix .yes{ color:var(--pd-accent); font-weight:700; font-size:1.05rem; }
.sol-matrix .sub{ color:var(--pd-muted); font-size:.72rem; display:block; }

.sol-others{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.sol-other{ display:flex; gap:18px; align-items:center; background:#fff; padding:18px 20px; color:inherit; }
.pd-block:not(.is-band) .sol-other{ background:var(--pd-band); }
.sol-other b{ display:block; font-size:1rem; margin-bottom:4px; }
.sol-other span{ font-size:.82rem; color:var(--pd-muted); line-height:1.6; }
.sol-other .ic{ width:22px; height:22px; color:var(--pd-accent); }

@media(max-width:960px){ .sol-tiles{ grid-template-columns:repeat(2,1fr); } .sol-places{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .sol-tiles, .sol-others{ grid-template-columns:1fr; } .sol-places{ grid-template-columns:repeat(2,1fr); } .sol-hero__inner{ padding:56px 0 36px; } }

/* ============================================================
   商品ラインナップ（/products/）
   冒頭と主要5商材の帯は、商品詳細のファーストビュー（.pd-hero--studio）と同じ見た目にする。
   帯は .pd-hero .pd-hero--studio .pdx-fv（暗いスタジオ写真＋左に文章）。ここでは一覧用に高さと余白だけを変える。
   ============================================================ */
.pdx-head{ background:#0a0b0d; color:#fff; padding:calc(var(--pd-hdr) + 56px) 0 52px; }
.pdx-head .pd-hero__crumb, .pdx-head .pd-hero__crumb a{ color:rgba(255,255,255,.7); }
.pdx-head__h1{ font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-weight:600; font-size:clamp(2.2rem,4vw,3.1rem); margin:0 0 14px; line-height:1.25; color:#fff; }
.pdx-head__lead{ margin:0; max-width:46em; font-size:1rem; line-height:2; color:rgba(255,255,255,.82); }
/* 各商品への目次（押すとその商品の帯へ） */
.pdx-index{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:8px; margin-top:36px; }
.pdx-index a{ display:flex; flex-direction:column; justify-content:flex-start; gap:6px; min-height:44px; padding:14px 16px 16px; background:rgba(255,255,255,.07); color:#fff; text-decoration:none; transition:background .2s; }
.pdx-index a:hover{ background:rgba(255,255,255,.15); color:#fff; }
.pdx-index a > small{ font-size:.72rem; font-weight:700; line-height:1.5; letter-spacing:.03em; color:rgba(255,255,255,.62); }
.pdx-index a > span{ font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-weight:600; font-size:1.02rem; line-height:1.45; }

/* 商品の帯：詳細のファーストビューより少し低く（5つ続けて見るため） */
.pdx-fv.pd-hero--studio{ min-height:clamp(480px, 40vw, 620px); padding:72px 0; }
.pdx-fv .pd-hero__bg{ display:block; }
.pdx-fv__name{ font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-weight:600; font-size:clamp(2rem,3.4vw,2.7rem); line-height:1.25; letter-spacing:.01em; margin:0 0 14px; color:#fff; }
.pdx-fv__name a{ color:inherit; text-decoration:none; }
.pdx-fv__name a:hover{ color:#fff; opacity:.82; }
.pd .pdx-fv__points{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:8px; }
.pdx-fv__points li{ position:relative; padding-left:20px; font-size:.95rem; line-height:1.75; color:rgba(255,255,255,.88); }
.pdx-fv__points li::before{ content:""; position:absolute; left:2px; top:.7em; width:7px; height:7px; background:var(--pd-hl); }
.pdx-fv .pd-hero__btns{ margin-top:30px; }

/* そのほかの取り扱い商材：帯と同じ暗い面に */
.pdx-others-sec{ background:#121314; color:#fff; }
.pdx-others-sec .pd-h2{ color:#fff; }
.pdx-others-sec .pd-lead{ color:rgba(255,255,255,.78); }
.pdx-others-sec .pdx-other{ background:rgba(255,255,255,.06); color:#fff; }
.pdx-others-sec .pdx-other h3{ color:#fff; }
.pdx-others-sec .pdx-other:hover h3{ color:#e7d6ae; }
.pdx-others-sec .pdx-other p{ color:rgba(255,255,255,.8); }
.pdx-others-sec .pd-card__tag{ background:none; color:#e7d6ae; }
.pdx-others-sec .pdx-other__points > span{ background:rgba(255,255,255,.1); color:#fff; }
.pdx-others-sec .pdx-other__more{ color:#e7d6ae; }
.pdx-others-sec .pd-btn--ghost{ background:rgba(255,255,255,.12); color:#fff; }
.pdx-others-sec .pd-btn--ghost:hover{ background:#fff; color:var(--pd-ink); }

@media(max-width:1080px){
  .pdx-index{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  /* 詳細のファーストビューと同じく、文章を上・商品の写真を下に分ける（上の余白は帯どうしの間隔だけ） */
  .pdx-fv.pd-hero--studio{ padding:48px 0 0; }
}
@media(max-width:374px){
  /* 最小幅（320px）では「ハイドロスカイ」が目次の枠に入りきらず「ハイドロスカ／イ」と割れた */
  .pdx-index a{ padding:12px 12px 14px; }
  .pdx-index a > span{ font-size:.92rem; }
}
@media(max-width:560px){
  .pdx-head{ padding:calc(var(--pd-hdr) + 36px) 0 36px; }
  .pdx-index{ grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:28px; }
  .pdx-index a{ padding:12px 14px 14px; }
  .pdx-fv.pd-hero--studio{ padding-top:40px; }
}

.pdx-others{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.pdx-other{ display:grid; grid-template-columns:38% 1fr; background:#fff; color:inherit; }
.pdx-other img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.pdx-other__b{ padding:24px 26px; }
.pdx-other h3{ margin:4px 0 8px; font-size:1.15rem; }
.pdx-other p{ margin:0 0 12px; font-size:.86rem; line-height:1.8; color:var(--pd-text); }
.pdx-other__more{ font-size:.84rem; font-weight:700; color:var(--pd-accent); }
.pdx-other:hover h3{ color:var(--pd-accent); }

@media(max-width:960px){
  .pdx-others{ grid-template-columns:1fr; }
}
@media(max-width:560px){
  .pdx-other{ grid-template-columns:1fr; }
  .pdx-other img{ aspect-ratio:16/10; }
}

/* トップページに埋め込む「課題から探す」タイル（/solutions/ と同じ見た目） */
.pd.sol-embed{ background:transparent; margin-top:44px; }
.sol-embed .sol-tiles{ margin-bottom:28px; }

/* トップページ「根拠」セクション（実物の登録証・認証・試験グラフ・採用実績） */
.evd{ padding:72px 0 76px; background:#fff; }
.evd-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.evd-card{ display:flex; flex-direction:column; background:var(--pd-band); color:inherit; }
.evd-card__img{ aspect-ratio:4/3; overflow:hidden; background:#fff; }
.evd-card__img img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.evd-card__img.is-top img{ object-position:center 12%; }
.evd-card__img.is-contain{ padding:22px; } .evd-card__img.is-contain img{ object-fit:contain; }
.evd-card__b{ padding:16px 18px 18px; }
.evd-card h3{ margin:4px 0 8px; font-size:1rem; line-height:1.5; }
.evd-card p{ margin:0; font-size:.83rem; line-height:1.8; color:var(--pd-text); }
.evd-card:hover h3{ color:var(--pd-accent); }
.evd-cases{ margin-top:40px; }
.evd-cases__h{ margin:0 0 12px; font-weight:700; font-size:1rem; }
.evd-cases__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.evd-case{ display:block; color:inherit; background:var(--pd-band); }
.evd-case img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.evd-case b{ display:block; padding:12px 16px 2px; font-size:.98rem; }
.evd-case span{ display:block; padding:0 16px 14px; font-size:.8rem; color:var(--pd-muted); }
.evd-cases__more{ margin:12px 0 0; font-size:.84rem; color:var(--pd-muted); }
.evd-company{ margin-top:36px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.evd-company img{ height:64px; width:auto; }
.evd-company p{ margin:0; font-size:.84rem; color:var(--pd-muted); line-height:1.8; }
@media(max-width:960px){ .evd-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .evd-grid, .evd-cases__grid{ grid-template-columns:1fr; } }
/* シリーズカード: 小さい荷姿写真は切り抜かず全体を見せる */
.pd-ser > img.is-contain{ object-fit:contain; background:#fff; padding:14px; }

/* ============================================================
   共通ブロック（トップ／会社案内／選ばれる理由）: 線画アイコンを使わず写真・登録証・文字面で見せる
   ============================================================ */
.pd.pd-embed{ background:transparent; }
.rsn-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px 32px; }
.rsn-item{ background:var(--pd-band); }
.rsn-fig{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; aspect-ratio:3/2; background:#fff; }
.rsn-fig > div{ position:relative; overflow:hidden; background:#fff; min-width:0; }
.rsn-fig img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.rsn-fig > .is-contain{ padding:18px; } .rsn-fig > .is-contain img{ object-fit:contain; }
/* 上下に重ねる（横長のロゴ・図を切らずに見せる） */
.rsn-fig--stack{ grid-auto-flow:row; grid-template-rows:2fr 3fr; grid-auto-columns:auto; }
.rsn-fig--stack > .is-contain{ padding:14px 22px; } .rsn-fig--stack img{ object-position:center; }
/* 資料の表紙（高さをそろえて全体を見せる。白い表紙が背景に溶けないよう背景は帯の色） */
.rsn-fig--docs{ display:flex; align-items:center; justify-content:center; gap:16px; padding:22px; background:var(--pd-band2); }
.rsn-fig--docs > div{ background:transparent; overflow:visible; }
.rsn-fig--docs img{ object-fit:contain; object-position:center; }
.rsn-body{ padding:22px 26px 26px; }
.rsn-body .n{ display:block; font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-size:1.05rem; color:var(--pd-hl); letter-spacing:.06em; }
.rsn-body h3{ margin:6px 0 10px; font-size:1.18rem; line-height:1.5; color:var(--pd-ink); }
.rsn-body p{ margin:0; font-size:.92rem; line-height:1.9; color:var(--pd-text); }
.rsn-body p.cap{ margin-top:12px; font-size:.76rem; color:var(--pd-muted); }
@media(max-width:760px){ .rsn-grid{ grid-template-columns:1fr; gap:18px; } .rsn-body{ padding:18px 20px 22px; } }

.crt-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.crt-tile{ background:var(--pd-band); }
.section-dark .crt-tile{ background:#fff; }
.crt-tile__fig{ aspect-ratio:4/3; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; }
.crt-tile__fig img{ width:100%; height:100%; object-fit:cover; object-position:center 10%; }
.crt-tile__fig.is-contain{ padding:20px; } .crt-tile__fig.is-contain img{ object-fit:contain; }
.crt-tile__fig.is-text{ background:var(--pd-accent); color:#fff; font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-size:1.55rem; font-weight:600; letter-spacing:.04em; text-align:center; padding:18px; line-height:1.35; }
.section-dark .crt-tile__fig.is-text{ background:var(--pd-band2); color:var(--pd-ink); }
.crt-tile__b{ padding:14px 16px 16px; }
.crt-tile__b b{ display:block; font-size:.95rem; line-height:1.5; color:var(--pd-ink); }
.crt-tile__b span{ display:block; margin-top:4px; font-size:.78rem; line-height:1.7; color:var(--pd-muted); }
@media(max-width:960px){ .crt-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .crt-grid{ grid-template-columns:1fr; } }

/* minmax(340px,1fr) は画面が340px未満のとき列が340pxのまま残り、カードが画面外へ出る。
   （@media(max-width:560px) の .pd-docs 指定は詳細度が低くこの行に負けていた） */
.dh .pd-docs{ grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); }
.dh .pd-doc{ background:var(--pd-band); }
.dh-foot{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
.dh-foot p{ margin:0; font-size:.9rem; color:var(--pd-text); }

/* 商品テーマ（ヒーター／クリーナー） */
.pd--heater{  --pd-accent:#5b2b1b; --pd-band:#f7f2ed; --pd-band2:#ebe0d6; --pd-hl:#c2410c; --pd-dark:#1f1512; }
.pd--cleaner{ --pd-accent:#174a66; --pd-band:#eef4f6; --pd-band2:#d9e6ec; --pd-hl:#0f7c8c; --pd-dark:#0e2733; }

/* 課題から探す「そのほかの取り扱い商品」: アイコン → 商品写真 */
.sol-other img{ width:96px; aspect-ratio:4/3; object-fit:cover; flex:none; }
/* 長い商品名は見出しを一段小さく（「スーパーラジエントヒーター」が途中で折れないように） */
.pd--heater .pd-hero h1, .pd--cleaner .pd-hero h1{ font-size:clamp(1.7rem,3vw,2.4rem); }

/* ---------- ボタンと文章の余白（計測して狭かった箇所だけ個別に） 2026-09-06 ---------- */
/* 商品ページ末尾CTA: 見出し直後にボタンが来る場合（説明文なし）は14px→32px */
.pd-cta h2 + .pd-btns{ margin-top:32px; }
/* 課題から探すタイル: 説明文→リンクチップ 10px→14px */
.sol-tile p{ margin-bottom:14px; }
/* トップ資料案内の下段: スマホで縦積みになったときの案内文→ボタン 14px→22px */
@media(max-width:760px){ .dh-foot{ gap:22px; } }

/* ---------- 文章と画像の余白（計測して狭かった箇所だけ） 2026-09-06 ---------- */
/* 共通ブロック（選ばれる理由・認証タイル・資料カード）は旧グリッドの mt-5 相当の上余白を持たせる: 見出し／数字帯→画像が4〜9pxだった */
.pd.pd-embed{ margin-top:44px; }
/* 動画カード: サムネ→タイトル 10px→14px */
.pd-video__t{ margin-top:14px; }
/* データカード: 本文→図版 16px→22px（figure は下揃えのまま） */
.pd-data__i p:last-of-type{ margin-bottom:22px; }

/* ============================================================
   スタジオ写真のファーストビュー（2026-09-17）
   商品写真を黒背景ごと全幅に敷き、左に文章を置く。
   写真の背景と帯の背景が同じ暗さなので、写真が「浮いた四角」にならない。
   ============================================================ */
.pd--kr250{ --pd-accent:#12456e; --pd-band:#eef4f9; --pd-band2:#dae7f1; --pd-hl:#0f7c8c; --pd-dark:#0a2740; }

.pd-hero--studio{ color:#fff; background:#0a0b0d; min-height:min(84vh, 660px); }
.pd--charcoal .pd-hero--studio{ background:#161514; }
.pd--hydrosky .pd-hero--studio{ background:#0e0f10; }
.pd--kr250    .pd-hero--studio{ background:#04101f; }
.pd-hero--studio .pd-hero__bg img{ object-position:right center; }
.pd-hero--studio .pd-hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.42) 30%, rgba(0,0,0,.12) 52%, rgba(0,0,0,0) 66%); }
.pd-hero--studio .pd-hero__inner{ grid-template-columns:minmax(0,1fr); }
.pd-hero--studio .pd-hero__text{ max-width:min(52%, 620px); }
.pd-hero--studio .pd-hero__media{ display:none; }
.pd-hero--studio .pd-hero__crumb, .pd-hero--studio .pd-hero__crumb a{ color:rgba(255,255,255,.7); }
.pd-hero--studio .pd-hero__cat{ background:rgba(255,255,255,.16); color:#fff; }
.pd-hero--studio h1{ color:#fff; } .pd-hero--studio h1 small{ color:rgba(255,255,255,.72); }
.pd-hero--studio .pd-hero__catch{ color:#e7d6ae; }
.pd--hydrosky .pd-hero--studio .pd-hero__catch{ color:#cfe1f7; }
.pd--kr250 .pd-hero--studio .pd-hero__catch{ color:#bfe0ef; }
.pd-hero--studio .pd-hero__lead p{ color:rgba(255,255,255,.88); }
.pd-hero--studio .pd-btn{ background:#fff; color:var(--pd-ink); }
.pd-hero--studio .pd-btn:hover{ background:var(--pd-hl); color:#fff; }
.pd-hero--studio .pd-btn--hl{ background:var(--pd-hl); color:#fff; }
.pd-hero--studio .pd-btn--hl:hover{ background:#fff; color:var(--pd-ink); }
/* 写真の説明は文章の下に小さく置く（写真の上に文字を重ねない） */
.pd-hero--studio .pd-hero__note{ margin:24px 0 0; font-size:.78rem; line-height:1.8; color:rgba(255,255,255,.62); }

@media(max-width:1080px){
  /* 商品が右端に寄っているので、狭い画面では写真を下、文章を上に分ける */
  .pd-hero--studio{ min-height:0; display:flex; flex-direction:column; align-items:stretch; padding:calc(var(--pd-hdr) + 28px) 0 0; }
  .pd-hero--studio .pd-hero__inner{ order:1; }
  .pd-hero--studio .pd-hero__text{ max-width:none; }
  .pd-hero--studio .pd-hero__bg{ order:2; position:relative; inset:auto; margin:30px calc(50% - 50vw) 0; width:100vw; height:min(56vw, 330px); }
  .pd-hero--studio .pd-hero__bg img{ object-position:86% center; }
  .pd-hero--studio .pd-hero__bg::after{ background:linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 45%); }
}

/* そのほかの取り扱い商材が1点のときは、写真2枚の横型に（カードがぽつんと残らないように） */
.pdx-others--one{ grid-template-columns:1fr; }
.pdx-other__pic{ display:grid; grid-template-rows:1fr; }
.pdx-others--one .pdx-other{ grid-template-columns:46% 1fr; align-items:stretch; }
/* 写真は絶対配置。カードの高さは文章側で決める（帯と同じ考え方） */
.pdx-others--one .pdx-other__pic{ display:block; position:relative; min-height:390px; }
.pdx-others--one .pdx-other__pic img{ position:absolute; left:0; width:100%; height:calc(50% - 3px); aspect-ratio:auto; object-fit:cover; top:0; }
.pdx-others--one .pdx-other__pic .pdx-other__pic2{ top:auto; bottom:0; }
.pdx-others--one .pdx-other__b{ padding:38px 40px; align-self:center; }
.pdx-others--one .pdx-other h3{ font-size:1.5rem; font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-weight:600; }
.pdx-others--one .pdx-other p{ font-size:.92rem; max-width:40em; }
.pdx-other__points{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.pdx-other__points > span{ font-size:.8rem; line-height:1.5; padding:6px 12px; background:var(--pd-band2); color:var(--pd-ink); }
@media(max-width:860px){
  .pdx-others--one .pdx-other{ grid-template-columns:1fr; }
  .pdx-others--one .pdx-other__pic{ min-height:0; }
  .pdx-others--one .pdx-other__pic img{ position:static; width:100%; height:auto; aspect-ratio:16/10; }
  .pdx-others--one .pdx-other__pic2{ display:none; }
  .pdx-others--one .pdx-other__b{ padding:24px 22px; }
  .pdx-others--one .pdx-other h3{ font-size:1.3rem; }
}

/* 商品名が長い商材は、詳細のファーストビュー（.pd--heater .pd-hero h1）と同じく少し小さく */
.pd--heater .pdx-fv__name{ font-size:clamp(1.7rem,3vw,2.4rem); }

/* トップの「そのほかの取扱い商材」から /products/#others へ飛んだとき、見出しが固定ヘッダーに隠れないように */
#others{ scroll-margin-top:calc(var(--pd-hdr) + 24px); }

/* ============================================================
   トップの商材一覧（%LINEUP%）
   商品詳細のファーストビュー（スタジオ写真＋分類タグ＋明朝の商品名＋キャッチ）と
   商品ラインナップの帯（要点3つ＋くわしく見る）を、カードの大きさに落としたもの。
   ============================================================ */
.pdh-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pdh-card{ display:flex; flex-direction:column; background:var(--pd-band); color:inherit; }
.pdh-card__media{ display:block; position:relative; overflow:hidden; background:var(--pd-dark); aspect-ratio:4/3; }
.pdh-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1); }
.pdh-card:hover .pdh-card__media img{ transform:scale(1.04); }
.pdh-card__b{ display:flex; flex-direction:column; flex:1; padding:26px 26px 28px; }
.pdh-card__cat{ align-self:flex-start; padding:5px 11px; font-size:.74rem; font-weight:700; letter-spacing:.05em;
  color:#fff; background:var(--pd-accent); }
.pdh-card__name{ margin:14px 0 0; font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-weight:600;
  font-size:1.4rem; line-height:1.35; color:var(--pd-ink); }
/* 3列のときのカード内幅は306px固定。「スーパーラジエントヒーター」（13字）が1行に収まる字送りにする */
.pdh-card--long .pdh-card__name{ font-size:1.28rem; }
.pdh-card__catch{ margin:10px 0 0; font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-weight:600;
  font-size:1.02rem; line-height:1.65; color:var(--pd-accent); }
.pdh-card__points{ display:block; margin:16px 0 22px; }
.pdh-card__points > span{ display:block; position:relative; padding-left:18px; margin-bottom:6px;
  font-size:.88rem; line-height:1.8; color:var(--pd-text); }
.pdh-card__points > span::before{ content:""; position:absolute; left:2px; top:.72em; width:7px; height:7px; background:var(--pd-hl); }
.pdh-card__more{ margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:.9rem; font-weight:700; color:var(--pd-accent); }
.pdh-card__more .ic{ width:16px; height:16px; transition:transform .25s; }
.pdh-card:hover .pdh-card__more .ic{ transform:translateX(4px); }
.pdh-card:hover .pdh-card__name{ color:var(--pd-accent); }

/* 6枠目＝そのほかの取扱い商材。写真を暗くして白文字（5枚のスタジオ写真と同じ暗さ） */
.pdh-card--more{ position:relative; background:#14171a; min-height:100%; }
.pdh-more__bg{ position:absolute; inset:0; overflow:hidden; }
.pdh-more__bg img{ width:100%; height:100%; object-fit:cover; opacity:.42;
  transition:transform .7s cubic-bezier(.2,.7,.3,1); }
.pdh-card--more:hover .pdh-more__bg img{ transform:scale(1.04); }
.pdh-more__b{ position:relative; display:flex; flex-direction:column; flex:1; padding:34px 26px 30px; }
.pdh-card--more .pdh-card__cat{ background:rgba(255,255,255,.16); color:#fff; }
.pdh-card--more .pdh-card__name{ color:#fff; }
.pdh-card--more .pdh-card__catch{ color:rgba(255,255,255,.82); font-size:.95rem; }
.pdh-card--more .pdh-card__more{ color:#fff; margin-top:auto; padding-top:22px; }
.pdh-card--more:hover .pdh-card__name{ color:#fff; }

@media(max-width:1180px){
  .pdh-grid{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .pdh-card__b{ padding:22px 22px 24px; }
  .pdh-card__name, .pdh-card--long .pdh-card__name{ font-size:1.3rem; }
}
@media(max-width:560px){
  .pdh-grid{ grid-template-columns:1fr; }
  .pdh-card__media{ aspect-ratio:16/10; }
}

/* Beauty Aqua「ナノバブルとは」のデータカード（2026-11-04 ご指摘）: 左のカードは文章が短く、図版を下揃えにすると文章と図の間に大きな空きが出ていた。
   この商品だけ、カードの高さをそろえず図を文章のすぐ下に置く（ほかの商品ページは下揃えのまま）。 */
.pd--aqua .pd-data{ align-items:start; }
.pd--aqua .pd-data__i .pd-fig{ margin-top:0; }

/* Beauty Aqua「導入するメリット」の数字カード（+2.3℃・32% など。2026-11-04 ご指摘）: 数字 21.6px・説明 11.5px で読みにくかった。
   この商品のメリット欄（.pd-feat__text）だけ、数字を大きくして説明を横に並べる。「ナノバブルとは」の発生数カードも同じ部品なので含めない（ほかの商品ページはそのまま）。 */
.pd--aqua .pd-feat__text .pd-feat__stats > div{ display:flex; align-items:center; gap:20px; padding:16px 22px; }
.pd--aqua .pd-feat__text .pd-feat__stats .v{ font-size:2.4rem; line-height:1; white-space:nowrap; flex:none; }
.pd--aqua .pd-feat__text .pd-feat__stats .v small{ font-size:.5em; margin-left:3px; }
.pd--aqua .pd-feat__text .pd-feat__stats .l{ font-size:.92rem; line-height:1.6; color:var(--ink, #2c3138); }

/* 右端の縦の導線（2026-11-04 ご指摘）: 画面の高さが低いと「基礎ロングライフシス／テム」のように語の途中で折れていた。
   どこかの指定で bottom:0 が付き、高さが画面の下半分に固定されていたので解除し、文言は span.kt のかたまり単位でだけ折り返す
   （「基礎ロングライフ／システム」「工務店向け／サービスを見る」）。高さが足りる画面では1列のまま。 */
@media(min-width:821px){
  .pd .pd-side{ bottom:auto; }
  .pd .pd-side .kt{ display:inline-block; white-space:nowrap !important; }
}

/* ハイドロ・スカイ「コンクリートの寿命を縮める最大要因は「中性化」です。」：文章が写真の高さの真ん中にそろい、見出しの下に大きな余白が出ていた。
   文章を見出しのすぐ下から始め、文字を少し大きくして写真と高さをそろえる（PCの2列表示のときだけ） */
@media(min-width:961px){
  .pd--hydrosky .pd-block--intro .pd-intro{ align-items:start; }
  .pd--hydrosky .pd-block--intro .pd-intro__text{ padding-top:14px; }
  .pd--hydrosky .pd-block--intro .pd-intro__text .pd-p{ font-size:16.5px; line-height:2.05; }
}

/* ハイドロ・スカイ「5つの効果」：効果の名前だけが並んでいた。番号つきのカードにして、効果ごとに一言の説明を添える */
.pd-feat--fx .pd-list{ counter-reset:fx; display:grid; gap:10px; margin:18px 0 0; padding:0; }
.pd-feat--fx .pd-list li{ counter-increment:fx; position:relative; margin:0; padding:14px 18px 14px 62px; background:var(--pd-band); border-left:3px solid var(--pd-accent); list-style:none; }
.pd-feat--fx .pd-list li::before{ content:counter(fx, decimal-leading-zero); left:18px; top:14px; width:auto; height:auto; background:none; color:var(--pd-hl); font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif; font-size:1.3rem; font-weight:700; line-height:1.2; }
.pd-feat--fx .fx-t{ display:block; font-size:1rem; font-weight:700; color:var(--pd-ink); line-height:1.55; }
.pd-feat--fx .fx-p{ display:block; margin-top:4px; font-size:.86rem; line-height:1.75; color:var(--pd-text); }
.pd-feat--fx .pd-feat__fig .pd-fig img{ background:#fff; }

/* 「一般的な防水材との違い」に比較の模式図を添えられるようにした（compare の img。2026-11-04 ハイドロ・スカイ） */
.pd-cmp__fig{ max-width:900px; margin:28px auto 0; }
.pd-cmp__fig .pd-fig{ background:#fff; }

/* ハイドロ・スカイ「効果は、第三者試験の実測値でご説明します。」の3枚：写真のある左に高さがそろい、中央と右の下が空いていた。
   数字の欄を白いパネルにしてカードの残りいっぱいに広げ、数字を大きく中央に置く（PCの3列表示のときだけ） */
@media(min-width:961px){
  .pd--hydrosky .pd-data{ align-items:stretch; }
  .pd--hydrosky .pd-data__i{ display:flex; flex-direction:column; }
  .pd--hydrosky .pd-data__i > .pd-feat__stats{ flex:1; margin:10px 0 0 !important; padding:28px 20px; background:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:28px 40px; text-align:center; }
  .pd--hydrosky .pd-data__i > .pd-feat__stats > div{ background:none; padding:0; }
  .pd--hydrosky .pd-data__i > .pd-feat__stats .v{ font-size:3.4rem; line-height:1; }
  .pd--hydrosky .pd-data__i > .pd-feat__stats .v small{ font-size:.45em; margin-left:2px; }
  .pd--hydrosky .pd-data__i > .pd-feat__stats .l{ font-size:.82rem; margin-top:10px; }
  .pd--hydrosky .pd-data__i > .pd-feat__stats > div + div .v{ color:var(--pd-muted); font-size:2.4rem; }
}

/* ハイドロ・スカイ「早く施工するほど、性能維持期間が長くなります」：説明が1段落だけだった。新築とリフォーム（劣化が進んでいても回復させてから守る）の2つの場面をカードで示し、まとめの一文を添える */
.pd-feat--tm .pd-list{ display:grid; gap:12px; margin:20px 0 0; padding:0; }
.pd-feat--tm .pd-list li{ margin:0; padding:16px 20px 16px; background:var(--pd-band); border-top:3px solid var(--pd-accent); list-style:none; }
.pd-feat--tm .pd-list li:nth-child(2){ border-top-color:var(--pd-hl); }
.pd-feat--tm .pd-list li::before{ display:none; }
.pd-feat--tm .tm-k{ display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.06em; color:#fff; background:var(--pd-accent); padding:3px 10px; line-height:1.5; }
.pd-feat--tm .pd-list li:nth-child(2) .tm-k{ background:var(--pd-hl); }
.pd-feat--tm .tm-t{ display:block; margin-top:8px; font-size:1.04rem; font-weight:700; color:var(--pd-ink); line-height:1.55; }
.pd-feat--tm .tm-p{ display:block; margin-top:4px; font-size:.86rem; line-height:1.8; color:var(--pd-text); }
.pd-feat--tm .pd-feat__after{ margin-top:18px; padding:14px 18px; border-left:3px solid var(--pd-accent); background:#fff; box-shadow:0 1px 0 var(--pd-band2) inset, 0 -1px 0 var(--pd-band2) inset; }
.pd-feat--tm .pd-feat__after p{ margin:0; font-weight:700; color:var(--pd-accent); line-height:1.85; font-size:.95rem; }

/* 商品ページの一番上のスタジオ写真（暗い背景に製品）：横長のデスクトップや大きなモニターでは幅に合わせて拡大され、製品の上下がヘッダーの裏や画面外で切れていた（KR-250 で発覚）。
   PCでは高さに合わせて右寄せにし、上はヘッダーの分だけ下げる。左端は各写真の背景の色になじませる（2026-11-05）。1080px以下は写真が文章の下に回る別の作りなので対象外。
   商品ラインナップ（/products/）の各商品の帯（.pdx-fv）は同じ部品なので除外（そちらは従来どおり右寄せの全面表示）。
   11/05 追記：小さく右端に寄りすぎていたので、写真を少し大きく（高さ＋100px、下は少しはみ出す）、製品が本文の右側の中ほどに来るよう右の余白を画面幅に応じて取る */
@media(min-width:1081px){
  .pd-hero--studio:not(.pdx-fv) .pd-hero__bg{ background:#090909; }
  .pd--aqua .pd-hero--studio:not(.pdx-fv) .pd-hero__bg, .pd--kr250 .pd-hero--studio:not(.pdx-fv) .pd-hero__bg{ background:#02060c; }
  .pd-hero--studio:not(.pdx-fv) .pd-hero__bg img{ position:absolute; top:16px; right:max(0px, calc(50% - 660px)); left:auto; width:auto; height:calc(100% + 100px); max-width:none; object-fit:cover;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 18%); mask-image:linear-gradient(to right, transparent 0, #000 18%); }
}

/* KR-250 だけ製品が縦に長く、ほかの商品と同じ大きさだと上下が切れて見えた。少し小さくし、上はヘッダーから十分下げる（2026-11-05） */
@media(min-width:1081px){
  .pd--kr250 .pd-hero--studio:not(.pdx-fv) .pd-hero__bg img{ top:64px; height:calc(100% - 40px); right:max(0px, calc(50% - 620px)); }
}


/* KR-250「フィルターの特性比較」の表を見やすく（2026-11-06）
   列幅をそろえ、見出しと値を中央に。KR-250用フィルターの列を色で目立たせ、各項目に「大きい/小さいほど良い」を小さく添える。
   スマホでは横に動かして見る作り（項目の列は左に固定） */
.pd--kr250 .pd-table--grid{ table-layout:fixed; min-width:760px; }
.pd--kr250 .pd-table--grid th, .pd--kr250 .pd-table--grid td{ vertical-align:middle; text-align:center; padding:14px 12px; }
.pd--kr250 .pd-table--grid thead th{ background:var(--pd-band2); font-size:.9rem; line-height:1.5; }
.pd--kr250 .pd-table--grid thead th:first-child{ width:17%; }
.pd--kr250 .pd-table--grid thead th:nth-child(2){ width:21%; background:var(--pd-accent); color:#fff; }
.pd--kr250 .pd-table--grid td:first-child{ text-align:left; white-space:nowrap; position:sticky; left:0; z-index:1; }
.pd--kr250 .pd-table--grid td:first-child small{ display:block; margin-top:2px; font-size:.72rem; font-weight:500; color:var(--pd-muted); }
.pd--kr250 .pd-table--grid td:nth-child(2){ background:#e3eef8; color:var(--pd-accent); font-weight:700; }
.pd--kr250 .pd-table--grid tbody tr:last-child td:nth-child(2){ box-shadow:inset 0 -3px 0 var(--pd-accent); }


/* KR-250「資料・動画」の縦型動画（Vimeo）。動画を左、題名と説明を右に。スマホでは縦に並べ、動画は300px幅で中央に（2026-11-06） */
.pd-vmo{ display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:36px; align-items:center; max-width:860px; }
.pd-vmo__frame{ position:relative; aspect-ratio:9/16; background:#000; overflow:hidden; }
.pd-vmo__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.pd-vmo__b .pd-video__t{ font-size:1.08rem; margin:0 0 6px; }
.pd-vmo__b .pd-p{ margin-top:14px; }
@media(max-width:640px){
  .pd-vmo{ grid-template-columns:1fr; gap:18px; }
  .pd-vmo__frame{ width:100%; max-width:300px; margin:0 auto; }
}