/* ============ 商品一覧・詳細CSS：WP化時はproducts関連ページで読み込む ============ */
@layer page {
  /* PDF実測：ヘッダー直下余白は下層既定の11remより狭い6rem。下端余白は各ブロック側で持つ */
  #main:has(.p-product-detail, .p-products-list) {
    padding-block: 6rem 0;
  }

  /* ============ 商品一覧ページ：絞り込みの表示切替はproducts-list.jsが担当 ============ */

  /* PDF実測：左カラムは画面左端まで、右カラムだけ右余白100px。縮小時も両カラムを比例させる */
  .p-products-list__layout {
    display: grid;
    grid-template-columns: clamp(28rem, 9.333rem + 24.306vw, 56rem) 1fr; /* PDF実測：左カラム背景幅560px */
    column-gap: clamp(2.5rem, 0.833rem + 2.1701vw, 5rem); /* PDF実測(50px) */
    padding-inline-end: var(--page-padding-100);
  }

  .p-products-list__title {
    margin-block-end: 3.6rem; /* PDF実測(36.1px)：タイトル下端から次の見出しまで */
    font-size: clamp(6.5rem, 2.167rem + 5.642vw, 13rem); /* PDF実測(130px) */
    font-weight: var(--fw-heavy);
    line-height: 1;
  }

  /* ---- サイドバー：PCは静止カラム、SPはfixedのフルスクリーン（要素は1つを共有） ---- */
  .p-products-list__sidebar {
    position: sticky;
    inset-block-start: 6rem; /* ヘッダー実高さ(6rem)ぶん下からスクロール追従させる */
    /* 縦に長い画面で下に地色が出ないよう画面の高さに揃え、中身が長い時は内部スクロールにする */
    height: calc(100vh - 6rem);
    overflow-y: auto;
    align-self: start; /* 追従の基準はグリッドセルの高さではなく要素自身の高さにする */
    min-width: 0;
    /* 上端はH1下端に線が来るよう見た目で決めた判断値。右余白(160px)は左の1.6倍 */
    padding-block-start: clamp(3rem, -5rem + 8.5vw, 15rem);
    padding-block-end: var(--page-padding-100);
    padding-inline: var(--page-padding-100)
      clamp(4.8rem, -2.72rem + 9.76vw, 16rem);
    background-color: #f8f8f8; /* PDF実測(rgb 248,248,248)：#mainの#f0f0f0よりわずかに明るい */
  }

  .p-products-list__sidebar-header,
  .p-products-list__sidebar-close {
    display: none; /* PCでは非表示。SPのみ@media内で表示する */
  }

  .p-products-list__filter-group {
    /* fieldsetの既定枠線・paddingを解除(囲み枠は無く、見出し下のborderだけが正解) */
    margin: 0;
    padding: 0;
    border: none;
  }

  .p-products-list__filter-group + .p-products-list__filter-group {
    margin-block-start: 2.9rem; /* PDF実測(28.7px) */
  }

  .p-products-list__filter-heading {
    /* legendの既定paddingを解除 */
    display: block;
    width: 100%;
    padding: 0 0 0.5rem;
    margin-block-end: 1rem;
    font-size: 1.4rem; /* PDF実測(14px) */
    font-weight: var(--fw-bold);
    border-block-end: 1px solid var(--color-border);
  }

  .p-products-list__filter-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* PDF実測：行間隔30px－チェックボックス高16px */
  }

  /* ---- メインエリア：シリーズごとのカードグリッド ---- */
  .p-products-list__content {
    min-width: 0;
    padding-block: 4.15rem 8rem; /* デザイン指定値 */
  }

  /* +だと間のシリーズが隠れた時に余白が消えるため、~で前に見えているシリーズがあるものに付ける */
  .p-products-list__series:not([hidden])
    ~ .p-products-list__series:not([hidden]) {
    margin-block-start: 5.6rem; /* PDF実測(56.1px) */
  }

  .p-products-list__series-heading {
    display: flex;
    align-items: baseline;
    gap: 2.5rem; /* PDF実測(25px) */
    font-size: 5.3rem; /* PDF実測(53px) */
    font-weight: var(--fw-heavy);

    span {
      font-size: 1.6rem; /* PDF実測(16px) */
      font-weight: var(--fw-regular);
    }
  }

  .p-products-list__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem; /* PDF実測(20px) */
    row-gap: 1.9rem; /* PDF実測(18.6px) */
  }

  /* 0件時のみJSでhiddenを外す */
  .p-products-list__empty {
    padding-block: 8rem;
    font-size: var(--fs-md);
    text-align: center;
  }

  /* ---- SPのみ：フローティング絞り込みボタン ---- */
  .p-products-list__filter-btn {
    position: fixed;
    /* PDF実測(640px基準30px)。130px超のUI要素なので他のSP数値と同じくvwで比例縮小する */
    inset-block-end: clamp(1.5rem, 4.6875vw, 3rem);
    inset-inline-end: clamp(1.5rem, 4.6875vw, 3rem);
    z-index: var(--z-filter-btn);
    display: none; /* PCでは非表示。SPのみ@media内で表示する */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: clamp(6.5rem, 20.3125vw, 13rem); /* PDF実測(640px基準130px) */
    height: clamp(6.5rem, 20.3125vw, 13rem);
    border-radius: 50%;
    background-color: var(--color-text);
    color: var(--color-text-invert);
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
  }

  .p-products-list__filter-btn-icon {
    width: 2.4rem;
    height: 2.4rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
  }

  @media (max-width: 767px) {
    .p-products-list__title {
      /* PDF実測(PRODUCT-TOP-SP.jpg相当)：SP640px時143px、WORKS一覧と同じ値・同じ考え方 */
      font-size: clamp(7rem, 22.3vw, 14.3rem);
      margin-inline-start: -3rem; /* p-works-list__titleと同じく親(.content)の余白2remを打ち消す */
      margin-block-end: 2rem;
    }

    .p-products-list__layout {
      display: block; /* サイドバーがposition:fixedのオーバーレイに変わるため通常のgridは不要 */
      padding-inline-end: 0; /* PC用の10rem(右余白)を解除。SPは.content側のpadding-inline(2rem)に一本化 */
      /* margin-block-startは持たせない。.title自前の余白と二重になるため */
    }

    .p-products-list__content {
      padding-inline: 2rem;
    }

    /* ハンバーガーメニューと同じ「フルスクリーンオーバーレイ＋is-open切替」を流用 */
    .p-products-list__sidebar {
      position: fixed;
      inset: 0;
      z-index: var(--z-filter-menu);
      overflow-y: auto;
      overscroll-behavior: contain; /* 最下部まで来ても背後のページへスクロールが伝播しないように */
      -webkit-overflow-scrolling: touch; /* iOSでスクロールの慣性が効かない場合があるため明示 */
      /* 100vhはiOSでアドレスバー分を含み箱が短くなるため、対応ブラウザでは100dvhを使う */
      max-height: none;
      height: 100vh;
      height: 100dvh;
      padding: 0; /* PC用の4remを解除。SPは中のsidebar-header/filter側で個別に余白を持つ */
      background-color: var(--color-bg);
      visibility: hidden;
      transition: visibility var(--transition-fast);

      &.is-open {
        visibility: visible;
        transition: visibility var(--transition-base);
      }
    }

    /* 既存ヘッダーのSP時の見た目に合わせる：高さ5rem、ロゴ側3rem・アイコン側は右端ぴったり */
    .p-products-list__sidebar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 5rem;
      padding-inline-start: 3rem;
      padding-inline-end: 0;
      /* 既存ヘッダーの白背景時(.l-header:not(:has(...)))と同じくロゴ・アイコンはグレー */
      color: var(--color-header-muted);
      background-color: var(--color-bg);
    }

    .p-products-list__sidebar-header-btns {
      display: flex;
      align-items: center;
      /* 既存ヘッダーの.l-header__btnsもgapなし。アイコン自体の当たり領域で間隔ができる */
    }

    .p-products-list__sidebar-close-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 5rem; /* c-icon-btnのSP時と同じ当たり領域 */
      height: 5rem;
    }

    .p-products-list__sidebar-close-icon svg {
      width: 2.4rem;
      height: 2.4rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
    }

    .p-products-list__filter {
      padding: 1rem 2rem 10rem; /* 下部固定の閉じるバーに本文が隠れないよう余白を確保 */
    }

    .p-products-list__filter-heading {
      /* PDF実測(PRODUCT-TOP-SP-MENU.jpg)：SP640px時20px。見出しもラベルも同じ大きさ */
      font-size: var(--fs-sp-default);
    }

    .p-products-list__filter-btn {
      display: flex;
    }

    .p-products-list__sidebar-close {
      position: fixed;
      inset-block-end: 0;
      inset-inline: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.8rem;
      height: 6rem;
      background-color: var(--color-text);
      color: var(--color-text-invert);
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);

      svg {
        width: 1.8rem;
        height: 1.8rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
      }
    }

    .p-products-list__series-heading {
      flex-direction: column;
      align-items: flex-start;
      margin-block-end: 2.5rem;
      gap: 0.4rem;
      /* PDF実測(PRODUCT-TOP-SP.jpg)：SP640px時70px */
      font-size: clamp(3.5rem, 10.9375vw, 7rem);
      line-height: 1;

      span {
        /* PDF実測(SP640px時22px) */
        font-size: clamp(1.1rem, 3.4375vw, 2.2rem);
      }
    }

    .p-products-list__grid {
      grid-template-columns: 1fr;
      row-gap: 3rem;
    }
  }

  /* ============ 商品詳細ページ ============ */

  .p-product-detail {
    /* ============ 01/02選択＋ビューア：PCは2カラム、SPはproduct.jsがビューアを移動 ============ */
    .p-product-detail__intro {
      @media (min-width: 1100px) {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
    }

    .p-product-detail__viewer {
      /* 写真・CADの基準は内側の.viewer-frameに切り出してあるので、この要素が伸びても影響しない */
      background-color: var(--color-bg);
    }

    .p-product-detail__viewer-media {
      /* 1100px以上：panel側が長くても、viewer(背景)の高さの範囲内で追従・内部スクロールする */
      @media (min-width: 1100px) {
        position: sticky;
        inset-block-start: 6rem; /* ヘッダー実高さぶん */
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
      }
    }

    .p-product-detail__viewer-frame {
      position: relative; /* CADを写真の右下に重ねて配置するための基準。写真の高さで確定する */
      container-type: inline-size; /* 受賞ロゴを写真の幅に比例させるため（cqw） */
    }

    /* 受賞ロゴは写真の左上。デザイン実測：写真幅960pxで左・上95px、高さ47px */
    .p-product-detail__awards {
      position: absolute;
      inset-block-start: 9.9cqw;
      inset-inline-start: 9.9cqw;
      display: flex;
      gap: 1.96cqw; /* 複数並ぶデザインが無いため、カードのバッジと同じ高さ比(10/25)で決めた */
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .p-product-detail__award {
      &[hidden] {
        display: none;
      }

      img {
        display: block;
        width: auto;
        height: 4.9cqw;
      }
    }

    .p-product-detail__viewer-img {
      display: block;
      width: 100%;
      height: auto; /* 画像ファイル自体の比率をそのまま使う(強制crop・余白の誤差を避ける) */
      background-color: var(
        --color-bg-alt
      ); /* 先読み完了前に一瞬見える背景色 */
      /* IMAGE写真の上部トリミングはis-cropped（common.css）。付け外しはproduct.js */

      /* 商品詳細だけ正方形より上を残す。PCデザイン幅960pxで+30px、他の幅は比例 */
      &.is-cropped {
        aspect-ratio: 960 / 990;
      }
    }

    /* 断面図は写真の右下に重ねる。枠線はSVG自体に描画済みのためCSSでborderを足さない */
    .p-product-detail__cad-img {
      position: absolute;
      right: 3rem;
      bottom: 3rem;
      width: 35.86rem;
      height: auto;
    }

    /* PDF実測：左右余白は他ページ(works.css等)と同じclamp式に揃える */
    .p-product-detail__panel {
      padding-block: 10rem;
      padding-inline: clamp(3rem, -1.7rem + 6.1vw, 8rem);
    }

    .p-product-detail__name {
      font-size: 7.1rem; /* PDF実測(71px) */
      font-weight: var(--fw-heavy);
      line-height: 1;
    }

    .p-product-detail__subtitle {
      margin-block-start: 0.8rem;
      font-size: var(--fs-sm);
    }

    .p-product-detail__step {
      margin-block-start: 3rem;
      @media screen and (max-width: 1099px) {
        margin-block-start: 1.5rem;
      }
    }

    .p-product-detail__step-heading {
      display: flex;
      align-items: baseline;
      gap: 1rem;
      font-size: 1.8rem; /* PDF実測(18px) */
      font-weight: var(--fw-bold);
    }

    .p-product-detail__step-number {
      font-family: var(--font-base);
      font-size: 2.6rem; /* PDF実測(26px) */
      font-weight: var(--fw-heavy);
    }

    /* ---- 01: タイプタブ ---- */
    .p-product-detail__type-tabs {
      display: flex;
      gap: 1rem; /* PDF実測(10.5px)：タブ同士がくっつかないように */
      max-width: 56rem; /* PDF実測(560px)：右カラム全幅まで伸ばさない */
      margin-block-start: 1rem;
      @media screen and (max-width: 1099px) {
        margin-block-start: 0;
      }
    }

    .p-product-detail__type-tab {
      flex: 1 1 0;
      display: flex;
      align-items: center;
      justify-content: center;
      /* 行間(body基準1.7)の非対称で文字が上寄りに見えるため下側の余白を減らす */
      padding-block: 0.7rem 0.3rem;
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      color: var(--color-text);
      background-color: var(--color-bg);
      border: 1px solid var(--color-text);

      &.is-active {
        color: var(--color-text-invert);
        background-color: var(--color-text);
      }
    }

    /* ---- 01: 型番リスト ---- */
    .p-product-detail__item-list {
      display: flex;
      flex-direction: column;
      gap: 1rem; /* PDFベクター矩形実測(10px)：サムネ下端から次のサムネ上端まで */
      max-width: 56rem; /* PDF実測(560px) */
      margin-block-start: 1rem; /* PDF実測(10.5px)：タブとの間の余白 */
      padding-block: 2rem; /* PDF実測(上19.5px/下20.5px)：白背景カード自体の上下内側余白 */
      background-color: var(--color-bg);

      /* [hidden]属性はdisplay:flexという著者スタイルに負けて効かなくなるため明示する */
      &[hidden] {
        display: none;
      }
      @media screen and (max-width: 1099px) {
        padding-block: 1rem;
      }
    }

    /* gridで2行分またがせるとスパン分だけ各行が高くなり余白を詰められないためflexにする */
    .p-product-detail__item {
      display: flex;
      gap: 1.6rem;
      width: 100%;
      /* 項目間の間隔はitem-list側のgapで管理するのでpadding-blockは持たせない */
      padding-inline: 2rem;
      text-align: start;
      @media screen and (max-width: 1099px) {
        padding-inline: 1rem;
      }
    }

    .p-product-detail__item-thumb {
      flex-shrink: 0;
      width: 12.6rem; /* PDF実測(126px) */
      height: auto;
      aspect-ratio: 126 / 70;
      object-fit: cover;
    }

    /* imgはbox-shadow:insetが下に隠れるため、常に最前面のoutlineを内側に重ねる(PC4px) */
    .p-product-detail__item.is-active .p-product-detail__item-thumb {
      outline: 4px solid var(--color-border); /* PDF実測：黒ではなく薄いグレー */
      outline-offset: -4px;
    }

    .p-product-detail__item-text {
      display: flex;
      flex-direction: column;
      gap: 0.6rem; /* デザインに合わせた判断値 */
      min-width: 0; /* flexアイテムのmin-width:auto対策 */
      @media screen and (max-width: 1099px) {
        gap: 0;
      }
    }

    .p-product-detail__item-name {
      display: block;
      font-size: 1.9rem; /* PDF実測(19px) */
      font-weight: var(--fw-bold);
      line-height: 1.2;
    }

    .p-product-detail__item-new {
      margin-inline-start: 2em; /* Previo FのJPG実測(24px)。SPで文字と一緒に縮むようemにする */
      font-size: var(--fs-xs); /* Previo FのJPG実測（大文字の高さ8px→12px） */
      font-weight: var(--fw-medium);
      color: var(--color-new);
    }

    .p-product-detail__item-desc {
      display: block;
      font-size: var(--fs-xs);
      line-height: 1.2;
    }

    /* ---- 02: 仕上げスウォッチ ---- */
    .p-product-detail__finish-list {
      display: flex;
      flex-wrap: wrap; /* 極端に狭い幅でスウォッチ同士が詰まらないよう折り返す */
      gap: 0.8rem;
      max-width: 56rem; /* PDF実測(560px) */
      margin-block-start: 1.6rem;
      padding: 2rem 2rem 1rem;
      background-color: var(--color-bg);
      @media screen and (max-width: 1099px) {
        margin-block-start: 0;
        padding: 1rem 1rem 0.3rem;
      }
    }

    .p-product-detail__finish {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.2rem;

      /* 03：仕上げがIMAGEの間はタイヤの選択が結果に反映されないためdisabledにする(js側) */
      &:disabled {
        cursor: not-allowed;
        opacity: 0.4;
      }

      /* [hidden]はdisplay:flexに負けて効かなくなるため明示(.item-listと同じ対策) */
      &[hidden] {
        display: none;
      }
    }

    .p-product-detail__finish-thumb {
      width: 4.8rem;
      height: 4.8rem;
      object-fit: cover;
    }

    /* PDF実測：非選択のスウォッチには枠が無い。選択中だけ薄いグレーの枠が画像の上に重なる(PC4px) */
    .p-product-detail__finish.is-active .p-product-detail__finish-thumb {
      outline: 4px solid var(--color-border);
      outline-offset: -4px;
    }

    .p-product-detail__finish-label {
      font-size: var(--fs-xs);
      font-weight: var(--fw-medium);
    }

    /* ---- お気に入りボタン ---- */
    .p-product-detail__actions {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      max-width: 56rem; /* PDF実測(560px) */
      margin-block-start: 4rem;
    }

    .p-product-detail__fav-btn,
    .p-product-detail__fav-list-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.8rem;
      height: 4.6rem;
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      line-height: 1; /* 既定の1.7だとalign-items:centerでも文字が上下中央からズレる */
      background-color: var(--color-bg);
      border: 1px solid var(--color-text);
    }

    /* PDF実測：枠線は水色でなく黒(リストを見るボタンと同じ)。水色はアイコンと文字色だけ */
    .p-product-detail__fav-btn {
      color: var(--color-fav);

      /* 登録済みは色を反転し、押せば削除できる状態だと分かるようにする */
      &.is-added {
        color: var(--color-bg);
        background-color: var(--color-fav);
        border-color: var(--color-fav);
      }

      /* 仕上げがIMAGEの間は組み合わせが定まらないためdisabledにする(js側) */
      &:disabled {
        cursor: not-allowed;
        opacity: 0.4;
      }
    }

    .p-product-detail__fav-icon {
      width: 1.8rem;
      height: auto;
      fill: currentColor;
    }

    .p-product-detail__fav-list-icon {
      width: 1.8rem;
      height: 1.8rem;
      stroke: currentColor;
      /* PDF実測：線が太い塗りつぶし系のアイコンのため、既定の線幅より大幅に太くする */
      stroke-width: 3;
      fill: none;
    }

    /* actionsと同じ幅・左揃え。margin-inline:autoだとpanel全体基準になりズレるため避ける */
    .p-product-detail__fav-note {
      max-width: 56rem;
      margin-block-start: 1.2rem;
      font-size: 1.4rem; /* PDF実測(14px) */
      text-align: center;
    }

    /* ============ SP下部固定バー：specに到達し、お気に入りが押せる時だけ出す ============ */
    .p-product-detail__sp-bar {
      display: none;

      @media (max-width: 1099px) {
        display: flex;
        position: fixed;
        inset-block-end: 0;
        inset-inline: 0;
        z-index: var(--z-sp-bar);
        align-items: center;
        /* 640px実測値を上限に、375px等でも崩れないよう下限を半分にして比例縮小する */
        gap: clamp(0.53rem, 1.64vw, 1.05rem); /* 640px時10.5px */
        height: clamp(7.7rem, 24.06vw, 15.4rem); /* 640px時154px */
        padding-inline: clamp(1.5rem, 4.69vw, 3rem); /* 640px時30px */
        background-color: var(--color-fav); /* PDF実測 */
        translate: 0 100%; /* 既定でIMAGEの型番が多いため初期状態は非表示 */
        /* iOSの下部UIに水色が透ける不具合対策：隠す時はアニメ完了後にvisibility:hiddenにする */
        visibility: hidden;
        transition:
          translate var(--transition-base),
          visibility 0s var(--transition-base); /* 変数がeaseを含むためlinearを重ねると宣言ごと無効になる */

        &.is-spec-reached:has(.js-fav-btn:not(:disabled)) {
          translate: 0 0;
          visibility: visible;
          transition: translate var(--transition-base);
        }
      }
    }

    .p-product-detail__sp-bar-fav-btn {
      flex: 1 1 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(0.98rem, 3.05vw, 1.95rem); /* 640px時19.5px */
      height: clamp(3.7rem, 11.56vw, 7.4rem); /* 640px時74px */
      color: var(--color-fav);
      font-size: clamp(1.1rem, 3.44vw, 2.2rem); /* 640px時22px */
      font-weight: var(--fw-bold);
      line-height: 1;
      white-space: nowrap; /* 375pxでも折り返して崩れないよう1行固定 */
      background-color: var(--color-bg);

      /* バー自体が水色なので、反転時は白枠で境目を残す */
      &.is-added {
        color: var(--color-bg);
        background-color: var(--color-fav);
        box-shadow: inset 0 0 0 1px var(--color-bg);
      }

      &:disabled {
        cursor: not-allowed;
        opacity: 0.4;
      }
    }

    .p-product-detail__sp-bar-fav-icon {
      flex-shrink: 0; /* 文字幅が縮む時にハート側が潰れないようにする */
      width: clamp(1.27rem, 3.95vw, 2.53rem); /* 640px時25.3px */
      height: auto;
      fill: currentColor;
    }

    .p-product-detail__sp-bar-list-btn {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: clamp(3.7rem, 11.56vw, 7.4rem); /* 640px時74px、正方形 */
      height: clamp(3.7rem, 11.56vw, 7.4rem);
      background-color: var(--color-bg);
    }

    .p-product-detail__sp-bar-list-icon {
      width: clamp(1.4rem, 4.375vw, 2.8rem); /* 640px時28px */
      height: clamp(1.4rem, 4.375vw, 2.8rem);
      stroke: currentColor;
      /* PDF実測：線が太い塗りつぶし系のアイコンのため、既定の線幅より大幅に太くする */
      stroke-width: 3;
      stroke-linecap: round;
      fill: none;
    }

    /* ============ 説明文＋仕様dl（PDF実測：背景はintroより一段濃い） ============ */
    .p-product-detail__spec {
      display: grid;
      grid-template-columns: 1fr minmax(0, 56rem); /* デザイン実測：右カラム(品番〜価格)は幅560px。左が残りを使う */
      gap: 4rem;
      padding-block: 10rem; /* デザイン実測：上の罫線まで・下のボタンの下端から100px（T・Rで同じ） */
      /* 固定32remのままだと右カラム(560px固定)と合わせて左カラムだけが潰れるため比率にする */
      padding-inline: clamp(3rem, -16.33rem + 25.17vw, 32rem);
      background-color: var(--color-bg-alt);
    }

    .p-product-detail__desc-label {
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
    }

    .p-product-detail__desc-text {
      margin-block-start: 2rem;
      font-size: var(--fs-sm);
      line-height: 1.8;
    }

    .p-product-detail__designer {
      margin-block-start: 2rem;
      font-size: 1.4rem; /* PDF実測(14px) */
    }

    /* 発売のお知らせ。デザイン実測(14px基準)をemにし、SPでも文字サイズに比例させる */
    .p-product-detail__release {
      display: flex;
      align-items: center;
      gap: 1em; /* 帯から文字まで14px */
      margin-block-start: 3.2em; /* DESIGNERの字面から帯まで49px。DESIGNERの行の下の余白4pxを引く */
      font-size: 1.4rem;
      line-height: 1;
    }

    .p-product-detail__release-new {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 5.83em; /* 帯70px（文字12px基準） */
      height: 2em; /* 帯24px */
      font-size: 0.86em; /* 12px */
      color: var(--color-text-invert);
      background-color: #e70012; /* デザイン実測。この帯専用の色のため変数化していない */
    }

    .p-product-detail__spec-list {
      grid-column: 2;
    }

    /* ラベルは全角スペースで桁を揃えてあるため固定幅は不要(付けると逆に余白が空く) */
    .p-product-detail__spec-row {
      display: flex;
      padding-block: 1.2rem;
      font-size: var(--fs-sm);
      line-height: 1.6;
      border-block-end: 1px solid var(--color-border);

      /* PDF/カンプ実測：品番(先頭行)の上にも罫線がある */
      &:first-child {
        border-block-start: 1px solid var(--color-border);
      }

      dt {
        flex-shrink: 0;
        margin-inline-end: 0.64em; /* デザイン実測：「：」から中身まで9px */
      }

      dt::after {
        content: "：";
      }
    }

    /* デザイン実測：品番の列は一番長い品番にそろえ、そこから金額まで17px。仕上げの見出しは全幅 */
    .p-product-detail__price-list {
      display: grid;
      grid-template-columns: max-content 1fr;
      column-gap: 1.2em;

      li {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: baseline;
      }

      /* 見出しは列に分けないため、li の grid を打ち消す */
      .p-product-detail__price-heading {
        display: block;
      }
    }

    /* 金額〜異掛率〜赤字注記まで1行に並ぶ。デザイン実測：長い金額から異掛率まで28px */
    .p-product-detail__price-detail {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0 2em;
    }

    /* デザイン実測：普通の金額の行は異掛率の位置がそろう（金額から異掛率の頭まで104px）。長い金額は押し出す */
    .p-product-detail__price-amount {
      min-width: 5.4em;
    }

    .p-product-detail__price-rate {
      color: #5b3932;
    }

    .p-product-detail__price-note {
      color: #d21a1a; /* カンプ実測：赤字注記 */
    }

    .p-product-detail__doc-links {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-block-start: 1rem;
    }

    /* 2行はspan2つ+flex-direction:columnで積む。brだとSPで横並びに変える時に行を消せない */
    .p-product-detail__doc-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 4rem; /* PDF実測(40px)：1行でも2行でも高さは揃って固定 */
      padding-inline: 1.2rem;
      text-align: center;
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      line-height: 1.2;
      background-color: var(--color-bg);
      border: 1px solid var(--color-text);
    }

    /* ============ ギャラリー：PC/SPで合成済み画像が別なため<picture>で出し分ける ============ */
    .p-product-detail__gallery {
      background-color: var(--color-bg);

      img {
        display: block;
        width: 100%;
        height: auto;
      }
    }

    /* ============ FAQ：背景は画面幅いっぱい、中身だけ1083px幅で中央寄せ ============ */
    .p-product-detail__faq {
      background-color: var(--color-bg);
    }

    .p-product-detail__faq-inner {
      max-width: 108.3rem;
      margin-inline: auto;
      padding-block: 9rem 6rem;
    }

    .p-product-detail__faq-heading {
      display: flex;
      align-items: baseline;
      gap: 2.5rem;
      font-size: 3rem; /* PDF実測(30px) */
      font-weight: var(--fw-heavy);
      border-block-end: 1px solid var(--color-border);

      span {
        font-size: 1.6rem; /* PDF実測(16px) */
        font-weight: var(--fw-regular);
      }
    }

    .p-product-detail__faq-item {
      padding-block: 1.6rem;
      border-block-end: 1px solid var(--color-border);

      summary {
        display: flex;
        align-items: baseline;
        gap: 1rem;
        padding-inline-end: 1rem; /* PDF実測：矢印は右端ぴったりではなく少し余白がある */
        font-size: 1.8rem; /* PDF実測(18px) */
        font-weight: var(--fw-bold);
        cursor: pointer;
        list-style: none; /* 既定の三角マーカーを消し、自前のchevronに差し替える */

        &::-webkit-details-marker {
          display: none;
        }

        &::after {
          content: "";
          width: 1.2rem;
          height: 1.2rem;
          margin-inline-start: auto;
          /* PDF実測：矢印は黒文字ではなく罫線と同じ薄いグレー */
          border-inline-end: 1px solid var(--color-border);
          border-block-end: 1px solid var(--color-border);
          transform: rotate(-135deg); /* 開いている時は上向き */
          transition: transform var(--transition-base);
        }
      }

      &:not([open]) summary::after {
        transform: rotate(45deg); /* 閉じている時は下向き */
      }

      p {
        display: flex;
        align-items: flex-start; /* A.を1行目の高さぶんの箱として先頭に置く(下記line-height参照) */
        gap: 1rem;
        font-size: var(--fs-sm);
        line-height: 1.8;
      }
    }

    /* Q1./A.は文字幅が違うため、幅を揃えて本文の開始位置を合わせる */
    .p-product-detail__faq-q,
    .p-product-detail__faq-a {
      flex-shrink: 0;
      width: 3.4rem;
      font-size: 2.1rem; /* PDF実測(21px) */
      font-weight: var(--fw-heavy);
    }

    /* 本文と同じ行高にして、複数行の本文でも1行目とだけ縦中央が揃うようにする */
    .p-product-detail__faq-a {
      line-height: 2.52rem;
    }

    /* ============ 関連事例 ============ */
    .p-product-detail__related {
      background-color: var(--color-bg);
      padding: 6rem var(--page-padding-100) 8rem;
    }

    .p-product-detail__related-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 3.3rem;
    }

    .p-product-detail__related-more {
      display: flex;
      justify-content: center;
      margin-block-start: 4rem;
    }
  }

  @media (max-width: 1099px) {
    .p-product-detail {
      /* PC用gridが効かなくなり縦積みに戻る。viewerの移動はproduct.js側の担当 */
      .p-product-detail__panel {
        padding: 3rem 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
      }

      /* PCで実測560pxに制限していた白背景カードを、SPでは画面幅いっぱいに戻す */
      .p-product-detail__type-tabs,
      .p-product-detail__item-list,
      .p-product-detail__finish-list,
      .p-product-detail__actions,
      .p-product-detail__fav-note {
        max-width: none;
      }

      /* 以下、フォントサイズはSP実測値を上限に640px→320pxへvwで比例縮小する */
      .p-product-detail__name {
        font-size: clamp(3.55rem, 11.09vw, 7.1rem); /* SP実測(71px) */
      }

      .p-product-detail__subtitle {
        font-size: var(--fs-sp-default); /* SP実測(20px) */
      }

      .p-product-detail__step-number {
        font-size: clamp(1.7rem, 5.3125vw, 3.4rem); /* SP実測(34px) */
      }

      .p-product-detail__step-heading {
        font-size: clamp(1.2rem, 3.75vw, 2.4rem); /* SP実測(24px) */
      }

      /* タブ名は1つの欄のため、SPで収まらない時は自然に折り返す */
      .p-product-detail__type-tab-label {
        font-size: clamp(0.9rem, 2.8125vw, 1.8rem); /* SP実測(18px) */
        line-height: 1.5;
        text-align: center;
      }

      .p-product-detail__item-name {
        font-size: clamp(1.4rem, 4.375vw, 2.8rem); /* SP実測(28px) */
      }

      .p-product-detail__item-new {
        font-size: clamp(
          0.9rem,
          2.8125vw,
          1.8rem
        ); /* 型番名と同じ比率で縮める */
      }

      .p-product-detail__item-desc {
        font-size: clamp(0.9rem, 2.8125vw, 1.8rem); /* SP実測(18px) */
      }

      /* サムネがPC固定幅のままだと画面が狭い時にテキストが1文字ずつ改行するため比例縮小 */
      .p-product-detail__item-thumb {
        width: clamp(6.3rem, 19.6875vw, 12.6rem);
      }

      .p-product-detail__item.is-active .p-product-detail__item-thumb {
        outline-width: 3px; /* SP実測：PCの4pxより細い */
        outline-offset: -3px;
      }

      .p-product-detail__finish-label {
        font-size: clamp(0.9rem, 2.8125vw, 1.8rem); /* SP実測(18px) */
      }

      /* SP実測：スウォッチとラベルの間はPCの0.4remより広い(約12px) */
      .p-product-detail__finish {
        gap: 0.5rem;
      }

      .p-product-detail__finish.is-active .p-product-detail__finish-thumb {
        outline-width: 3px; /* SP実測：PCの4pxより細い(型番サムネと同じ考え方) */
        outline-offset: -3px;
      }

      /* SP実測：写真は画面幅いっぱい(フルブリード)。panelのpadding2remの外まで広げる */
      .p-product-detail__viewer {
        margin-inline: -2rem;
        width: calc(100% + 4rem);
        margin-block-start: 2rem; /* SP実測：仕上げカードとの間 */
      }

      /* SPは写真が小さく読みにくいため、図面と同じ余白まで左上に寄せて大きくする */
      .p-product-detail__awards {
        inset-block-start: 3.28cqw;
        inset-inline-start: 3.28cqw;
        gap: 2.8cqw;
      }

      .p-product-detail__award img {
        height: 7cqw;
      }

      /* 位置指定の考え方はPCと共通。固定remだと375px等で比率が大きすぎるためvw比例縮小 */
      .p-product-detail__cad-img {
        right: clamp(1.05rem, 3.28125vw, 2.1rem); /* SP実測(21px) */
        bottom: clamp(1.05rem, 3.28125vw, 2.1rem); /* SP実測(21px) */
        width: clamp(14.95rem, 46.71875vw, 29.9rem); /* SP実測(299px) */
      }

      .p-product-detail__fav-btn,
      .p-product-detail__fav-list-btn {
        font-size: clamp(1.1rem, 3.4375vw, 1.5rem);
      }

      .p-product-detail__fav-note {
        font-size: var(--fs-sp-default); /* SP実測(20px) */
      }

      .p-product-detail__spec {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 4rem 2rem 6rem;
      }

      .p-product-detail__spec-list {
        grid-column: 1;
      }

      .p-product-detail__desc-label {
        font-size: clamp(1.1rem, 3.4375vw, 2.2rem); /* SP実測(22px) */
      }

      .p-product-detail__desc-text,
      .p-product-detail__designer,
      .p-product-detail__release,
      .p-product-detail__spec-row {
        font-size: var(--fs-sp-default); /* SP実測(20px) */
      }

      .p-product-detail__doc-links {
        grid-template-columns: 1fr;
      }

      /* SP実測：ボタンは全て1行。PCのspan縦積み(2行)を横並びに変えて収める */
      .p-product-detail__doc-link {
        height: auto; /* SP実測：1行表示のためPC同様の固定高さは不要 */
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 0.3em;
        padding-block: 1rem;
        font-size: clamp(1rem, 3.125vw, 1.5rem); /* SP実測(20px) */
      }

      .p-product-detail__faq-inner {
        max-width: none;
        padding-inline: 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
        padding-block: 3rem 1rem;
      }

      /* SP実測：サブテキストはPCの同行表示ではなく改行して2行になる */
      .p-product-detail__faq-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        font-size: clamp(1.9rem, 5.9375vw, 3.8rem); /* SP実測(38px) */

        span {
          font-size: var(--fs-sp-default); /* SP実測(20px) */
        }
      }

      .p-product-detail__faq-item summary {
        font-size: clamp(1.2rem, 3.75vw, 2.4rem); /* SP実測(24px) */

        /* SP実測：矢印はPCの1.2remより一回り小さい(約11px) */
        &::after {
          width: 0.8rem;
          height: 0.8rem;
        }
      }

      .p-product-detail__faq-item p {
        font-size: var(--fs-sp-default); /* SP実測(20px) */
      }

      .p-product-detail__faq-q,
      .p-product-detail__faq-a {
        width: 3rem;
        font-size: clamp(1.4rem, 4.375vw, 2.8rem); /* SP実測(28px) */
      }

      /* 本文側のline-heightがSPで可変になるため、A.の行高も同じ式で追従させる */
      .p-product-detail__faq-a {
        line-height: clamp(1.8rem, 5.625vw, 3.6rem);
      }

      /* SP実測：カード画像はフルブリード。テキストはc-work-card側で2rem内側に戻す */
      .p-product-detail__related {
        padding: 4rem 0 6rem;
      }

      .p-product-detail__related-list {
        grid-template-columns: 1fr;
        row-gap: 4rem;

        /* c-work-card側の戻し余白は767px基準のまま。768〜1099でズレるためここで補う */
        .c-work-card__tags,
        .c-work-card__name {
          margin-inline: 2rem;
        }
      }

      .p-product-detail__related-more {
        padding-inline: 2rem; /* ボタンだけ下層ページ共通のSP左右余白に戻す */
      }
    }
  }
}