/* ============ トップページCSS（page レイヤー） ============ */
@layer page {
  /* ============ p-kv：ファーストビュー ============ */
  .p-kv {
    position: relative;
    height: 100vh; /* svhを知らない古いブラウザ用の保険 */
    height: 100svh; /* 対応ブラウザはこちらで上書き */
    overflow: hidden; /* object-fit:coverではみ出した画像を隠す */

    /* pictureに高さが無いとimgのheight:100%が解決できない */
    picture {
      display: block;
      width: 100%;
      height: 100%;
    }

    .p-kv__bg {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 静止画の上に重ね、再生開始後にフェードインさせて黒い画面を挟まない */
    .p-kv__video {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1s ease;

      &.is-playing {
        opacity: 1;
      }
    }

    .p-kv__scroll {
      position: absolute;
      inset-inline: 0;
      inset-block-end: var(--space-lg);
      display: flex;
      justify-content: center;
      color: var(--color-text-invert);
    }

    .p-kv__scroll-icon {
      width: 2.7rem;
      height: 4.6rem;
    }

    /* transform-boxが無いとviewBox原点基準になり位置がずれる */
    .p-kv__scroll-dot {
      transform-box: fill-box;
      transform-origin: center;
      animation: p-kv-scroll-dot 1.6s ease-in-out infinite;
    }
  }

  @keyframes p-kv-scroll-dot {
    0% {
      /* デザイン上の丸の位置（カプセル上寄り）からスタート */
      transform: translateY(0);
      opacity: 1;
    }

    80% {
      opacity: 1;
    }

    100% {
      /* 移動範囲の中心がカプセルの天地中央に来るよう、開始位置から対称な距離まで移動 */
      transform: translateY(2.2rem);
      opacity: 0;
    }
  }

  /* ============ p-lead：くらしの視点 ============ */
  .p-lead {
    /* 1280px幅がそのままコンテンツ幅で左右パディングなし */
    max-width: 128rem;
    margin-inline: auto;
    padding-block-start: 10.4rem; /* FV下端からの余白 */
    padding-block-end: 10.4rem; /* 次セクション未実装のため暫定 */

    .p-lead__row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: start;
    }

    .p-lead__text {
      /* 44.3remだと本文1行が折返すため実測幅まで広げる */
      max-width: 48.5rem;
    }

    .p-lead__eyebrow {
      font-size: var(--fs-md);
      font-weight: var(--fw-heavy);
      letter-spacing: 0.1em;

      /* 罫線は装飾のみのため疑似要素にする */
      &::after {
        content: "";
        display: block;
        width: 6.2rem;
        height: 0.1rem;
        margin-block-start: 2.6rem;
        background-color: var(--color-border);
      }
    }

    .p-lead__heading {
      margin-block-start: 2.2rem;
      font-size: var(--fs-xl);
      font-weight: var(--fw-medium);
      letter-spacing: 0.1em;
    }

    .p-lead__body {
      margin-block-start: 3.2rem;
      letter-spacing: 0.1em;
      line-height: 2;
    }

    .p-lead__image img {
      display: block;
      width: 100%;
      height: auto;
    }

    .p-lead__features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7.75rem;
      /* 画像下端から罫線まで */
      margin-block-start: 7.85rem;
      border-top: 1px solid var(--color-border);
      /* 罫線から見出しまで */
      padding-block-start: 6.4rem;
      /* 3列の下にも同幅の罫線。本文下端から6.1rem */
      padding-block-end: 6.1rem;
      border-bottom: 1px solid var(--color-border);
    }

    .p-lead__feature-en {
      font-size: var(--fs-md);
      font-weight: var(--fw-heavy);
      letter-spacing: 0.1em;
    }

    .p-lead__feature-body {
      margin-block-start: 1rem;
      letter-spacing: 0.1em;
      line-height: 2;
    }

    /* 1000〜1280pxはmax-width制約で余白ゼロになるため、他セクションと同じ余白まで補間する */
    @media (min-width: 1000px) and (max-width: 1280px) {
      & {
        padding-inline: clamp(3rem, -6.368rem + 9.368vw, 5.623rem)
          clamp(3rem, -8.107rem + 11.107vw, 6.11rem);
      }
    }

    /* 950px付近でgapが0になり詰まるため767pxを待たず縦積みに */
    @media (max-width: 999px) {
      /* デザイン範囲外。本文接触を防ぐためSPと同じ3remを先取り */
      & {
        padding-inline: 3rem;
      }

      .p-lead__row {
        grid-template-columns: 1fr;
        row-gap: 2rem; /* テキスト～画像の間。jpgから明確な実測が取れなかった暫定値 */
      }

      .p-lead__text {
        max-width: none;
      }

      .p-lead__image {
        /* 画像だけフルブリードにする（767px以下のSPと同じ扱い） */
        margin-inline: -3rem;
      }
    }

    @media (max-width: 767px) {
      /* SPは独自の文字サイズ。PCの単純な縮小比ではない */
      padding-inline: 2rem; /* ヘッダーと同じSP余白 */
      padding-block-start: 3rem;
      padding-block-end: 3.747rem; /* SVGカンプ実測（閉じ罫線からp-series画像上端まで） */

      .p-lead__eyebrow {
        /* .cls-38実測22px(640px時)。320pxまで比例縮小 */
        font-size: clamp(1.1rem, 3.4375vw, 2.2rem);
      }

      .p-lead__heading {
        /* SVG上1行組みのため375px=PC値だと折返す。320pxまで比例縮小（cls-15実測34px） */
        font-size: clamp(1.7rem, 5.3125vw, 3.4rem);
      }

      .p-lead__image {
        /* padding-inlineが3remになったので、打ち消す量もそれに合わせる */
        margin-inline: -3rem;
      }

      .p-lead__features {
        grid-template-columns: 1fr;
        gap: 0;
        margin-block-start: 3rem; /* 画像下端から罫線まで（jpg実測） */
        border-top: 1px solid var(--color-border);
        padding-block-start: 2rem; /* 罫線から見出しまで（jpg実測） */
        padding-block-end: 2rem; /* 最後のfeature本文から閉じ罫線まで（jpg実測、他の罫線と同じ間隔） */
        border-bottom: 1px solid var(--color-border); /* 3つ目の下にも閉じ罫線がある（jpg実測） */
      }

      .p-lead__feature-en {
        /* .cls-41実測24px(640px時)。320pxまで比例縮小 */
        font-size: clamp(1.2rem, 3.75vw, 2.4rem);
      }

      .p-lead__feature-body {
        /* SP640px実測44px。375pxはPC値10pxまで縮小してよい */
        margin-block-start: clamp(1rem, -3.8113rem + 12.8302vw, 4.4rem);
      }

      /* 2つ目以降は区切り線を自前で持つ（1つ目はdividerが兼ねる） */
      .p-lead__feature + .p-lead__feature {
        margin-block-start: 2rem; /* 前ブロック本文から罫線まで（jpg実測） */
        padding-block-start: 2rem; /* 罫線から見出しまで（jpg実測、dividerと同じリズム） */
        border-top: 1px solid var(--color-border);
      }
    }
  }

  /* ============ p-series：シリーズ紹介スライド（Swiper） ============ */
  .p-series {
    .p-series__slide {
      position: relative;
    }

    /* スライド全体を商品詳細へのリンクにするため、写真と文字の上に透明な面を重ねる */
    .p-series__link {
      position: absolute;
      inset: 0;

      /* swiperの外枠がはみ出しを切るため、フォーカス枠を内側に描く */
      &:focus-visible {
        outline-offset: -4px;
      }
    }

    .p-series__image {
      display: block;
      width: 100%;
      height: auto;
    }

    .p-series__overlay {
      position: absolute;
      /* 半行送りに加えフォントのascent/descent分を差し引いた値 */
      inset-block-end: 8.1rem;
      inset-inline-start: 10rem; /* SVGカンプ実測 */
      color: var(--color-text-invert);
    }

    .p-series__heading {
      display: flex;
      /* centerはOSでフォントの上下余白が変わりずれるため、どの環境でも同じ位置になるベースラインで揃える */
      align-items: baseline;
      gap: 2.5rem;
    }

    .p-series__name {
      font-size: 5.6rem;
      font-weight: var(--fw-heavy);
      line-height: 1; /* 既定のline-heightだとmargin計算が狂う */
    }

    .p-series__awards {
      display: flex;
      gap: 2.4rem;
      /* 大文字の高さ(0.708em=39.6px)とバッジ35pxの差の半分だけ上げ、大文字の上下中央に置く */
      translate: 0 -0.23rem;
    }

    /* SVGの縦横比が種類ごとに違うため高さだけ揃えて幅は成り行き */
    .p-series__award {
      display: block;
      width: auto;
      height: 3.5rem; /* 原寸25pxの1.4倍 */
    }

    .p-series__category {
      /* ベースライン間実測からフォントメトリクス分を差し引いた値 */
      margin-block-start: 4.5rem;
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: 0.1em;
      line-height: 1;
    }

    .p-series__desc {
      /* categoryと同じ理由でフォントメトリクス分を差し引いた値 */
      margin-block-start: 2.2rem;
      max-width: 40rem; /* Previo Bは手動改行のため実質無効。他シリーズの仮文言用の上限 */
      font-size: var(--fs-sm);
      line-height: 2.14; /* SVGカンプ実測: 行間30px/14px */
    }

    .p-series__nav {
      /* navボタンはこの2変数で決まる。vendorレイヤーなので上書きできる */
      --swiper-navigation-size: 5.2rem;
      /* overlayのinset-inline-startと揃え、テキスト位置を合わせる */
      --swiper-navigation-sides-offset: 10rem;

      display: flex;
      align-items: center;
      justify-content: center;
      /* 要素opacityだと矢印まで薄くなるため背景色のアルファ値で表現 */
      background-color: rgb(255 255 255 / 50%);
      border-radius: 50%;

      &::after {
        content: none; /* Swiper標準の矢印（フォントアイコン）を消し、独自SVGに差し替える */
      }
    }

    .p-series__nav-icon {
      /* Swiperバンドルcssはvendorレイヤーなので上書きできる */
      width: auto;
      height: 1.9rem;
      stroke: #231815; /* SVGカンプ実測：背景の白丸に対して矢印自体は反転しない */
      stroke-width: 1;
      fill: none;
    }

    /* 画像高さが縮み矢印(中央固定)とoverlayが重なるため、768〜1200pxは矢印を上寄りに固定 */
    @media (min-width: 768px) and (max-width: 1200px) {
      .p-series__nav {
        top: 20%;
      }
    }

    @media (max-width: 767px) {
      .p-series__overlay {
        /* PCと同じくフォントメトリクス分を差し引いた値 */
        inset-block-end: 2.4rem;
        inset-inline-start: 2rem; /* ヘッダーと同じSP余白 */
        inset-inline-end: 3rem;
      }

      /* SPはバッジをシリーズ名の下に回す */
      .p-series__heading {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(1rem, 3.125vw, 2rem); /* 640pxで20px。比例縮小 */
      }

      .p-series__name {
        /* PC値56pxは狭い画面では大きすぎるため320pxまで比例縮小する */
        font-size: clamp(3.1rem, 9.6875vw, 6.2rem);
      }

      .p-series__awards {
        gap: clamp(1.45rem, 4.53vw, 2.9rem); /* 640px実測29pxから比例縮小 */
        translate: none; /* 縦積みのSPでは大文字中央への補正が不要 */
      }

      .p-series__award {
        height: clamp(2.1rem, 6.5625vw, 4.2rem); /* 640pxで42px。比例縮小 */
      }

      /* バッジ下端から小見出しまでは640px実測67px。バッジの無いスライドは従来値のまま */
      .p-series__heading:has(.p-series__awards) + .p-series__category {
        margin-block-start: clamp(3.15rem, 9.84vw, 6.3rem);
      }

      .p-series__category {
        /* PC同様フォントメトリクス分を差し引いた値 */
        margin-block-start: 3rem;
        /* nameと同じ理由で320pxまで比例縮小する */
        font-size: clamp(1.1rem, 3.4375vw, 2.2rem);
      }

      .p-series__desc {
        /* SP640px実測30px。375pxはPC値22pxまで縮小してよい */
        margin-block-start: clamp(2.2rem, 1.0679rem + 3.0189vw, 3rem);
        max-width: none;
        font-size: var(--fs-sp-default);
        line-height: 1.8; /* SVGカンプ実測: 行間36px/20px */
      }

      .p-series__nav {
        /* overlayのinset-inline-start/endと揃える */
        --swiper-navigation-sides-offset: 2rem;
        /* PC=640px値52pxのまま。375pxはタップ領域として40pxまで縮小 */
        --swiper-navigation-size: clamp(4rem, 2.302rem + 4.528vw, 5.2rem);
      }

      .p-series__nav-icon {
        /* 矢印円の縮小に連動 */
        height: clamp(1.46rem, 0.8374rem + 1.66vw, 1.9rem);
      }
    }
  }

  /* ============ p-products：商品カテゴリタブ + スライド（Swiper） ============ */
  .p-products {
    padding-block: 12rem 8rem; /* 上端はSVGカンプ実測（p-series画像下端からProductsタイトルまで） */
    background-color: var(--color-bg-alt); /* SVGカンプ実測 */
    overflow: hidden; /* 万一の水平はみ出しを吸収する保険（根本対策は各要素側で行う） */

    .p-products__head {
      display: flex;
      flex-wrap: wrap; /* タイトルとタブがぶつかる幅になったら、タブ群ごと次の行に落とす */
      align-items: baseline;
      justify-content: space-between;
      gap: 2rem 4rem;
      /* max-width制約が無くwidth:1920pxのため全区間比例縮小 */
      padding-inline: var(--page-padding-89) var(--page-padding-100);
    }

    .p-products__title {
      /* 15.6rem基準に767px以下のSP実測値まで縮める */
      font-size: clamp(8rem, 4rem + 10vw, 15.6rem);
      font-weight: var(--fw-heavy);
      line-height: 1;
      white-space: nowrap;
    }

    .p-products__tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem; /* SVGカンプ実測 */
      /* baseline揃えだと下端が15.8px離れるため実測差分を引き上げる */
      translate: 0 -1.413rem;
      /* 折り返して単独行になった時、space-betweenが効かず左寄りになるため明示 */
      margin-inline-start: auto;
    }

    .p-products__tab {
      /* buttonのUA既定センタリングはブラウザ差があるため明示 */
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0; /* 矢印と同様、タブも縮めず折り返しで対応する */
      width: 13rem; /* SVGカンプ実測 */
      height: 4rem;
      /* フォントの非対称で文字が上寄りに見えるためpaddingで下げる */
      padding-block: 0.23em 0;
      font-size: 1.2rem;
      font-weight: var(--fw-bold);
      letter-spacing: 0.1em;
      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);
      }
    }

    .p-products__body {
      position: relative;
      margin-block-start: 7rem; /* SVGカンプ実測（タブ下端からカード上端まで） */
    }

    .p-products__swiper {
      transition: opacity 0.25s ease; /* タブ切替時、JS側でopacityを操作してフェードさせる */
    }

    .p-products__slide {
      position: relative;
    }

    .p-products__card {
      display: block;
    }

    /* 画像はアイキャッチ1枚。PCはデザインの横長比で切り、SPは縦長のまま(上部はis-croppedで切る) */
    .p-products__image {
      @media (min-width: 768px) {
        aspect-ratio: 1252 / 704; /* SVGカンプ実測 */
        object-fit: cover;
        object-position: center; /* is-croppedの下基準を打ち消す */
      }
    }

    .p-products__caption {
      padding-inline-start: 3rem; /* カード左端から（SVGカンプ実測） */
    }

    .p-products__name {
      margin-block-start: 3rem; /* カード下端から（SVGカンプ実測） */
      font-size: var(--fs-lg);
      font-weight: var(--fw-heavy);
      line-height: 1;
    }

    .p-products__new {
      margin-inline-start: 1.7rem; /* SVGカンプ実測 */
      font-size: var(--fs-xs);
      font-weight: var(--fw-medium);
      color: #fe4c26; /* SVGカンプ実測（NEWバッジ専用色。他箇所での使用が無いため変数化していない） */
    }

    .p-products__category {
      margin-block-start: 1rem; /* 商品名から（SVGカンプ実測） */
      font-size: var(--fs-sm);
      letter-spacing: 0.05em;
    }

    .p-products__controls {
      position: relative; /* p-products__moreを中央に絶対配置する基準 */
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      min-height: 6.5rem; /* moreを絶対配置にしても行の高さを保つ */
      /* p-products__headと同じ式で縮小時のはみ出しを防ぐ */
      padding-inline: var(--page-padding-89) var(--page-padding-100);
      margin-block-start: 4rem; /* カード下のキャプションから */
    }

    .p-products__nav-group {
      /* ボタン中心から47.4rem左が矢印群の左端。1008px未満は3remが下限 */
      position: absolute;
      inset-inline-start: max(3rem, calc(50% - 47.4rem));
      display: flex;
      gap: 1rem; /* prev/next矢印の間隔 */
    }

    .p-products__nav {
      --swiper-navigation-size: 6.5rem; /* SVGカンプ実測 */

      position: static; /* Swiper既定のabsoluteを解除しflexアイテムに */
      margin-block-start: 0; /* Swiper既定のmargin-topで上ズレするため打ち消す */
      display: flex;
      flex-shrink: 0; /* 矢印は大きさ固定 */
      align-items: center;
      justify-content: center;
      background-color: transparent; /* 通常時は枠のみ */
      /* サイト共通のホバーアニメーション(0.3s)に揃える */
      transition: background-color var(--transition-base);

      &::after {
        content: none; /* Swiper標準矢印を消し独自SVGに差し替え */
      }

      /* スライド不要枚数でSwiperが付与するクラス。矢印ごと消す */
      &.swiper-button-lock {
        display: none;
      }
    }

    .p-products__nav-icon {
      width: auto;
      height: 2.375rem; /* p-seriesと同形状で円が一回り大きい分拡大 */
      stroke: #231815;
      stroke-width: 1;
      fill: none;
      /* サイト共通のホバーアニメーション(0.3s)に揃える */
      transition: stroke var(--transition-base);
    }

    /* PCのみホバーで背景黒・矢印白に反転（SPはタッチのため付けない） */
    @media (hover: hover) and (pointer: fine) {
      .p-products__nav:hover {
        background-color: var(--color-text);

        .p-products__nav-icon {
          stroke: var(--color-text-invert);
        }
      }
    }

    .p-products__more {
      /* 見た目はc-buttonに集約。PC/SPとも中央揃えでabsolute配置 */
      position: absolute;
      inset-inline-start: 50%;
      translate: -50% 0;
      flex-shrink: 0; /* 画面が狭くなっても縮めない。縮むと文字がボタンからはみ出す */
      white-space: nowrap;
    }

    /* SPはタブ2行×3列・カード1枚縦長とPCから大きく違うため作り直す */
    @media (max-width: 767px) {
      /* &なしだと子孫セレクタ扱いになり自分自身に効かない */
      & {
        padding-block: 3.5rem 6rem;
      }

      .p-products__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 3rem;
        padding-inline: 3rem; /* ヘッダーと同じSP余白 */
      }

      .p-products__title {
        /* .cls-40実測143px(640px時)。320pxまで比例縮小 */
        font-size: clamp(7.15rem, 22.34375vw, 14.3rem);
        white-space: normal;
        /* headのpaddingを負marginで打ち消し、"P"の左サイドベアリング0.07875em分も詰める */
        margin-inline-start: calc(-3rem - 0.07875em);
      }

      .p-products__tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* SVGカンプ実測：3列×2行 */
        /* 上下左右で同じ間隔にし320px下限〜640px実測13.17pxで比例 */
        column-gap: clamp(0.5rem, -0.317rem + 2.553vw, 1.317rem);
        row-gap: clamp(0.5rem, -0.317rem + 2.553vw, 1.317rem);
        /* タブ列幅を少し広げるためコンテナpaddingへ左右2pxずつ食い込む */
        margin-inline: -0.2rem;
        width: calc(100% + 0.4rem);
      }

      .p-products__body {
        /* SP版指定漏れでPC値7remのまま適用されていたバグ修正。SVG実測51.08px */
        margin-block-start: 2rem;
      }

      .p-products__tab {
        width: auto; /* グリッドの列幅に追従させる */
        /* 320pxでも収まる86px下限〜640px実測171.22pxで比例 */
        min-width: clamp(8.6rem, 0.078rem + 26.631vw, 17.122rem);
        /* PC値のheight:4remが残り2行折返し時に溢れるため打ち消す */
        height: auto;
        min-height: clamp(4rem, 2.2057rem + 4.7849vw, 5.268rem);
        /* .cls-24実測15.8px(640px時)。375pxは列幅に収まる11.2pxまで縮小 */
        font-size: clamp(1.12rem, 0.469rem + 1.736vw, 1.58rem);
        /* PC値のletter-spacing:0.1emが残り列幅を圧迫するため打ち消す */
        letter-spacing: normal;
      }

      .p-products__cad {
        /* カード幅=画面幅のため固定pxだと326.67px未満ではみ出す */
        inset-block-end: clamp(1rem, 3.125vw, 2rem);
        inset-inline-end: clamp(1rem, 3.125vw, 2rem);
        width: clamp(15rem, 47.917vw, 30.667rem);
      }

      .p-products__caption {
        /* 右は矢印グループ+隙間ぶんを確保しテキストと重ねない。矢印幅の縮小に連動 */
        padding-inline: 2rem clamp(11.5rem, 3.717rem + 20.75vw, 17rem);
      }

      .p-products__name {
        /* .cls-42実測32px(640px時)。375pxはPC値20pxまで縮小してよい */
        font-size: clamp(2rem, 0.3019rem + 4.5283vw, 3.2rem);
      }

      .p-products__new {
        /* .cls-16実測20px(640px時)、本文既定と同じ値なので共通変数を使う */
        font-size: var(--fs-sp-default);
      }

      .p-products__category {
        /* .cls-29実測20px(640px時)、本文既定と同じ値なので共通変数を使う */
        font-size: var(--fs-sp-default);
      }

      .p-products__controls {
        /* PCのposition:relativeを解除。矢印はp-products__body基準に配置し直す */
        position: static;
        flex-direction: column;
        align-items: center;
        min-height: 0;
        padding-inline: 3rem;
      }

      .p-products__nav-group {
        /* カンプ実測: 矢印は商品名の行に重なる配置。p-products__body基準で絶対配置 */
        position: absolute;
        inset-inline-start: auto; /* PCのinset-inline-start指定を解除 */
        /* 表示中の画像高さ(top.jsが実測)+caption上のmargin(3rem)で商品名行に合わせる。既定は正方形 */
        inset-block-start: calc(var(--products-media-h, 100vw) + 3rem);
        inset-inline-end: 3rem;
        /* 375pxでは商品名がNEWバッジと1行に収まるよう詰める。640pxは実測10pxのまま */
        gap: clamp(0.5rem, -0.208rem + 1.887vw, 1rem);
      }

      .p-products__nav {
        /* 375pxで商品名がNEWバッジと1行に収まるよう詰める。640pxは実測65pxのまま */
        --swiper-navigation-size: clamp(4rem, 0.4623rem + 9.434vw, 6.5rem);
      }

      .p-products__nav-icon {
        /* 矢印ボタンの縮小に連動。640pxは実測26pxのまま */
        height: clamp(1.6rem, 0.185rem + 3.77vw, 2.6rem);
      }

      .p-products__more {
        /* PCのabsolute中央寄せを解除。幅等はc-buttonのSP値のまま */
        position: static;
        translate: none;
      }
    }
  }

  /* ============ p-works：施工事例 ============ */
  .p-works {
    padding-block: 11.72rem 12.15rem; /* SVGカンプ実測（p-products下端から/次セクションまで） */

    .p-works__head {
      display: flex;
      justify-content: flex-end; /* SVGカンプ実測（タイトルは右寄せ） */
      /* p-products__headと同じ余白・同じ理由で比率化する */
      padding-inline: var(--page-padding-89) var(--page-padding-100);
    }

    .p-works__title {
      font-size: 15.6rem; /* SVGカンプ実測 */
      font-weight: var(--fw-heavy);
      line-height: 1;
    }

    .p-works__list {
      display: flex;
      gap: 3.2rem; /* SVGカンプ実測 */
      margin-block-start: 7.72rem; /* SVGカンプ実測（タイトルからカードまで） */
      /* max-width制約なくwidth:1920pxのため同じ式で比率化 */
      padding-inline: var(--page-padding-100);
    }

    .p-works__item {
      flex: 1 1 0;
      /* 既定のmin-width:autoだとtagsに押し上げられはみ出すため0に */
      min-width: 0;
    }

    .p-works__more {
      /* 見た目は c-button に集約。ここに残すのは配置のみ */
      margin-block-start: 6.321rem; /* SVGカンプ実測（建物名から） */
      margin-inline: auto; /* PC/SPともに中央揃え（p-products__moreと同じ考え方） */
    }

    @media (max-width: 767px) {
      /* &なしだと子孫セレクタ扱いになり自分自身に効かない */
      & {
        padding-block: 3rem 5rem;
      }

      .p-works__head {
        justify-content: flex-start; /* SVGカンプ実測（SPはタイトル左寄せ。PCは右寄せ） */
        padding-inline: 3rem; /* ヘッダーと同じSP余白 */
      }

      .p-works__title {
        /* .cls-40実測143px(640px時)。320pxまで比例縮小 */
        font-size: clamp(7.15rem, 22.34375vw, 14.3rem);
        /* 4タイトルとも左端ぴったり。headのpaddingを負marginで打ち消す */
        margin-inline-start: -3rem;
      }

      .p-works__list {
        flex-direction: column;
        gap: 3rem; /* SVGカンプ実測（建物名から次カード画像上端まで） */
        margin-block-start: 1rem;
        padding-inline: 0; /* SPは画像が画面幅いっぱい（フルブリード） */
      }

      .p-works__more {
        /* 幅・高さ・文字サイズはc-buttonのSP値のまま一致 */
        margin-block-start: 3rem; /* 建物名から */
      }
    }
  }

  .p-designers {
    /* p-works__titleと同フォント同サイズで11.72rem。endは紹介文最終行から実測 */
    padding-block: 9rem 12rem;
    background-color: var(--color-bg-alt);

    .p-designers__head {
      /* p-works__headと同じ左右89pxを同じ式で比率化 */
      padding-inline: var(--page-padding-89);
    }

    .p-designers__title {
      font-size: 15.6rem;
      font-weight: var(--fw-heavy);
      line-height: 1;
    }

    .p-designers__list {
      display: flex;
      gap: 10rem; /* 1人目右端〜2人目顔写真左端 */
      /* 実測コンテンツ幅で制約。paddingだとborder-box内側にズレる */
      max-width: 127.3rem;
      margin-block-start: 13rem; /* タイトル下端〜顔写真上端 */
      margin-inline: auto;
    }

    .p-designers__item {
      display: grid;
      grid-template-columns: 31rem 1fr;
      column-gap: 3rem; /* SVGカンプ実測（顔写真〜テキスト） */
    }

    .p-designers__photo {
      display: block;
      grid-column: 1;
      grid-row: 1 / 3;
      width: 31rem;
      height: 46.8rem;
      object-fit: cover;
    }

    .p-designers__meta {
      grid-column: 2;
      grid-row: 1;
    }

    .p-designers__role {
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      letter-spacing: 0.1em;
    }

    .p-designers__name {
      margin-block-start: 1rem; /* SVGカンプ実測（肩書きから） */
      font-size: var(--fs-lg);
      font-weight: var(--fw-bold);
      letter-spacing: 0.1em;
    }

    .p-designers__bio {
      grid-column: 2;
      grid-row: 2;
      margin-block-start: 1rem; /* SVGカンプ実測（名前から） */
      max-width: 24.3rem; /* SVGカンプ実測（折返し幅） */
      font-size: var(--fs-sm);
      line-height: 2.14; /* SVGカンプ実測（行送り30px ÷ フォントサイズ14px） */
    }

    /* listのmax-width(1273px)を下回ると崩れるため1339pxを切替点に */
    @media (max-width: 1339px) {
      /* &なしだと子孫セレクタ扱いになり自分自身に効かない */
      & {
        padding-block: 3rem 3.5rem;
      }

      .p-designers__head {
        padding-inline: 3rem; /* ヘッダーと同じSP余白 */
      }

      .p-designers__title {
        /* .cls-40実測143px(640px時)。320pxまで比例縮小 */
        font-size: clamp(7.15rem, 22.34375vw, 14.3rem);
        /* 9文字で幅を超えるため字間を詰めて収める */
        letter-spacing: -0.01em;
        /* headのpaddingを負marginで打ち消し、左だけ"D"のサイドベアリング0.07875em分も詰める */
        margin-inline: calc(-3rem - 0.07875em) -3rem;
      }

      .p-designers__list {
        flex-direction: column;
        gap: 3rem; /* 1人目紹介文下端〜2人目顔写真上端 */
        margin-block-start: 2.847rem; /* タイトル下端〜顔写真上端 */
        padding-inline: 2rem;
      }

      .p-designers__item {
        /* gridだとphotoが2行目にはみ出すため、flexで写真とmetaを横並びにする */
        display: flex;
        flex-wrap: wrap;
        column-gap: 2.9rem; /* 顔写真〜テキスト */
      }

      .p-designers__photo {
        /* jpg実測(写真310px:テキスト261px:gap29px、640px時)の比率のまま縮小 */
        width: clamp(14rem, 51.6667vw - 2.0667rem, 31rem);
        /* PC元寸法の縦横比を保つためaspect-ratio任せにする */
        height: auto;
        aspect-ratio: 31 / 46.8;
        flex-shrink: 0; /* flex-wrapで縮まないようにする */
      }

      .p-designers__meta {
        /* 写真heightが可変なため固定距離だとズレる。常に中央に */
        align-self: center;
      }

      .p-designers__role {
        /* 640px時点20px(jpg実測)。320pxまで比例縮小 */
        font-size: var(--fs-sp-default);
      }

      .p-designers__name {
        margin-block-start: 0; /* 肩書きから。SPはPCと文字サイズが違う */
        /* 640px時点26px(jpg実測)。320pxまで比例縮小 */
        font-size: clamp(1.3rem, 4.0625vw, 2.6rem);
      }

      .p-designers__bio {
        flex-basis: 100%; /* flex-wrapで強制的に改行させ、写真下に全幅で配置する */
        max-width: none;
        margin-block-start: 1.5rem; /* SVGカンプ実測（顔写真下端から） */
        /* .cls-28実測20pxはSP版デフォルト本文と一致するため共有変数を使う */
        font-size: var(--fs-sp-default);
        line-height: 1.8; /* SVGカンプ実測（行送り36px ÷ フォントサイズ20px） */
      }
    }
  }

  .p-news {
    /* p-works__titleと同フォント同サイズで11.72rem。endはボタン下端から実測 */
    padding-block: 11.72rem 2.65rem;

    .p-news__head {
      display: flex;
      justify-content: flex-end; /* SVGカンプ実測（タイトルは右寄せ、p-worksと同じ考え方） */
      /* p-products__headと同じ余白・同じ理由で比率化する */
      padding-inline: var(--page-padding-89) var(--page-padding-100);
    }

    .p-news__title {
      font-size: 15.6rem;
      font-weight: var(--fw-heavy);
      line-height: 1;
    }

    .p-news__list {
      display: flex;
      gap: 3.2rem; /* SVGカンプ実測（p-works__listと同じ値） */
      margin-block-start: 8.37rem; /* SVGカンプ実測（タイトル下端〜画像上端） */
      /* p-works__listと同じ余白・同じ理由で比率化する */
      padding-inline: var(--page-padding-100);
    }

    .p-news__item {
      flex: 1 1 0;
      /* p-works__itemと同じ理由でmin-width:0（タグ分縮まずはみ出す） */
      min-width: 0;
    }

    .p-news__card {
      position: relative;
      display: block;
    }

    .p-news__thumb {
      display: block;
      overflow: hidden; /* 拡大した画像がテキスト側へはみ出さないよう画像だけで囲う */
    }

    .p-news__image {
      display: block;
      width: 100%;
      height: auto;
      /* アイキャッチの比率がばらばらでもカードの高さがそろうよう、デフォルト画像の比率で切る */
      aspect-ratio: 1104 / 704;
      object-fit: cover;
      transition: transform var(--transition-base);
    }

    /* PCのみ：画像をホバーで拡大する（SPはタッチデバイスなので付けない） */
    @media (hover: hover) and (pointer: fine) {
      .p-news__card:hover .p-news__image {
        transform: scale(1.05);
      }
    }

    .p-news__date {
      margin-block-start: 2.502rem; /* SVGカンプ実測（画像下端から） */
      font-size: var(--fs-sm);
      letter-spacing: 0.05em;
    }

    .p-news__headline {
      margin-block-start: 2.363rem; /* SVGカンプ実測（日付から） */
      /* 行数が可変だとタグ位置がズレるため2行に固定し省略 */
      display: -webkit-box;
      overflow: hidden;
      height: 5.4rem; /* line-height(1.5) × font-size(1.8rem) × 2行 */
      font-size: 1.8rem;
      font-weight: var(--fw-bold);
      line-height: 1.5;
      letter-spacing: 0.05em;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      -webkit-line-clamp: 2;
    }

    .p-news__category {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /* headline固定後の下端起点で計算し直した値 */
      margin-block-start: 1.838rem;
      padding-inline: 2.2rem; /* カテゴリ文字数に応じて幅が変わる（SVGカンプ実測でも可変幅） */
      /* フォントの非対称で文字が上寄りに見えるためpaddingで下げる */
      padding-block: 0.3em 0;
      height: 3rem;
      background-color: var(--color-text);
      color: var(--color-text-invert);
      font-size: 1.2rem;
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
    }

    .p-news__more {
      /* 見た目は c-button に集約。ここに残すのは配置のみ */
      margin-block-start: 7.247rem; /* SVGカンプ実測（カテゴリタグから） */
      margin-inline: auto;
    }

    @media (max-width: 767px) {
      & {
        padding-block-start: 3rem;
        /* SP640px実測77.83px。375pxはPC値26.5pxまで縮小してよい */
        padding-block-end: clamp(5rem, -4.6137rem + 19.3698vw, 7.783rem);
      }

      .p-news__head {
        justify-content: flex-start; /* SVGカンプ実測（SPはタイトル左寄せ。PCは右寄せ） */
        padding-inline: 3rem; /* ヘッダーと同じSP余白 */
      }

      .p-news__title {
        /* .cls-40実測143px(640px時)。320pxまで比例縮小 */
        font-size: clamp(7.15rem, 22.34375vw, 14.3rem);
        /* headのpaddingを負marginで打ち消し、"N"の左サイドベアリング0.07875em分も詰める */
        margin-inline-start: calc(-3rem - 0.07875em);
      }

      .p-news__list {
        flex-direction: column;
        gap: 3rem; /* SVGカンプ実測（カテゴリタグ下端〜次カード画像上端） */
        margin-block-start: 1rem; /* SVGカンプ実測（タイトル下端〜画像上端。近似値、ブラウザ確認済み） */
        padding-inline: 0; /* SPは画像が画面幅いっぱい（フルブリード） */
      }

      .p-news__card {
        margin-inline: 0;
      }

      .p-news__date,
      .p-news__headline,
      .p-news__category {
        margin-inline: 2rem; /* SPは画像だけフルブリードで、テキストはヘッダーと同じ余白 */
      }

      .p-news__date {
        /* SP640px実測33px。375pxは15pxまで縮小 */
        margin-block-start: clamp(1.5rem, -1.0472rem + 6.7925vw, 3.3rem);
        /* デフォルト本文と数値一致するが役割が違うため独立clamp化 */
        font-size: clamp(1.4rem, 0.5509rem + 2.2642vw, 2rem);
      }

      .p-news__headline {
        /* SP640px実測30px。375pxはPC値23.63pxまで縮小してよい */
        margin-block-start: clamp(1rem, -1.83rem + 7.547vw, 3rem);
        /* PCと同じ理由でheadlineの高さを2行分に固定する。320pxまで比例縮小 */
        height: clamp(3.3rem, 10.3125vw, 6.6rem); /* line-height(1.5)×font-size×2行 */
        /* .cls-21実測22px(640px時)。320pxまで比例縮小 */
        font-size: clamp(1.1rem, 3.4375vw, 2.2rem);
      }

      .p-news__category {
        /* headline固定後の下端起点で計算し直した値 */
        margin-block-start: 1.813rem;
        /* 640px実測42px。375pxはPC値30pxまで縮小してよい */
        height: clamp(3rem, 1.3019rem + 4.5283vw, 4.2rem);
        /* .cls-22実測16.8px(640px時)。375pxはPC値12pxまで縮小してよい */
        font-size: clamp(1.2rem, 0.5208rem + 1.8113vw, 1.68rem);
      }

      .p-news__more {
        /* 幅・高さ・文字サイズはc-buttonのSP値のまま一致 */
        margin-block-start: 3rem; /* SVGカンプ実測（カテゴリタグから） */
      }
    }
  }

  .p-catalog {
    /* endはグレー背景下端からfooter開始までの実測140px */
    padding-block: 9.308rem 14rem;
    /* innerでなく親に持たせる。innerだとborder-boxで位置がズレる */
    padding-inline: 2rem;

    .p-catalog__inner {
      /* テキスト背景と表紙画像の横並び構成。絶対配置は崩れるためflexに */
      display: flex;
      justify-content: space-between;
      /* space-betweenだけだと768pxでbody/coverが接触するためgapで保証 */
      gap: 3rem;
      align-items: flex-start;
      /* 背景矩形1280pxが左右均等余白なのでmax-width+auto中央寄せ */
      max-width: 128rem;
      margin-inline: auto;
      /* heightは指定しない。固定だと折返し増加でボタンがはみ出す */
      padding-block: 6rem 7rem;
      /* 固定だと縮小時に圧迫するため1128px未満から30pxへ比例縮小 */
      padding-inline: clamp(3rem, -26.867rem + 38.889vw, 17rem);
      background-color: #eee;
    }

    .p-catalog__cover {
      /* SP表示順のためHTMLはcoverが先。PCはorderで後ろに回す */
      order: 1;
      flex-shrink: 0; /* テキストが増えても画像幅は縮めない */
      display: block;
      width: 32rem;
      height: auto;
    }

    .p-catalog__content {
      /* 改行はbr+u-pc/sp-onlyで制御。ここは画像と重ならない上限幅 */
      max-width: 60rem;
    }

    .p-catalog__copy {
      margin-block-start: 0.56rem; /* SVGカンプ実測（画像topとキャッチコピーtopの差） */
      font-size: 2.2rem;
      font-weight: var(--fw-bold);
      line-height: 1.727; /* SVGカンプ実測（行送り38px ÷ フォントサイズ22px） */
      letter-spacing: 0.1em;
    }

    .p-catalog__text {
      margin-block-start: 2.663rem; /* SVGカンプ実測（キャッチコピーから） */
      font-size: var(--fs-sm);
      line-height: 2.14; /* SVGカンプ実測（行送り30px ÷ フォントサイズ14px） */
    }

    .p-catalog__more {
      /* 見た目はc-buttonに集約。widthだけここで上書き */
      width: 24rem; /* 他セクションの20remと異なる */
      margin-block-start: 3.309rem; /* SVGカンプ実測（説明文から） */
    }

    @media (max-width: 767px) {
      /* SPは画像が上・テキストが下の縦積み */
      & {
        /* グレー背景下端からfooter開始までの実測86px */
        padding-block: 0 5rem;
        /* rect(cls-171) x=30 width=580(640幅)実測。左右余白30px */
        padding-inline: 2rem;
      }

      .p-catalog__inner {
        flex-direction: column;
        align-items: center; /* 画像中心=画面幅の中央 */
        max-width: none;
        padding-inline: 0; /* グレー背景自体は左右0。余白はcontent側で持つ */
      }

      .p-catalog__cover {
        order: 0; /* SPは画像が上なのでPCのorderをリセット */
        /* 固定幅だとimgのmax-width:100%リセットに負けるためclamp化 */
        width: clamp(18.38rem, 57.44vw, 36.762rem);
      }

      .p-catalog__content {
        /* flex-startだと__moreの固定幅にshrink-to-fitされはみ出す */
        align-self: stretch;
        /* PC用max-width(60rem)が640-767pxでstretchを阻害するため解除 */
        max-width: none;
        /* 背景矩形左端(x30)からテキスト(x61)まで31px実測 */
        padding-inline: 2rem;
      }

      .p-catalog__body {
        /* contentのpaddingで左右が確保されるためmax-width指定は不要 */
        max-width: none;
      }

      .p-catalog__copy {
        /* contentのmargin-block-startと二重に間隔が付くため打ち消す */
        margin-block-start: 0;
        /* .cls-19実測28px(640px時)。320pxまで比例縮小 */
        font-size: clamp(1.4rem, 4.375vw, 2.8rem);
        line-height: 1.643; /* SVGカンプ実測(行送り46px÷フォントサイズ28px) */
      }

      .p-catalog__text {
        /* SP640px実測63.61px。375pxはPC値26.63pxまで縮小してよい */
        margin-block-start: clamp(2.663rem, -2.57rem + 13.9547vw, 6.361rem);
        font-size: var(--fs-sp-default);
        line-height: 1.8; /* SVGカンプ実測（行送り36px ÷ フォントサイズ20px） */
      }

      .p-catalog__more {
        /* 640px実測336px。375pxはPC値24remまで縮小してよい（高さ・文字はc-buttonのまま） */
        width: clamp(24rem, 10.4151rem + 36.2264vw, 33.6rem);
        max-width: 100%; /* 336px固定だと狭い実機幅でコンテナからはみ出す */
        /* ボタン中心=画像中心。contentがstretchで同じ幅を持つのでautoで揃う */
        margin-inline: auto;
        /* SP640px実測53.53px。375pxはPC値33.09pxまで縮小してよい */
        margin-block-start: clamp(3.309rem, 0.4166rem + 7.7132vw, 5.353rem);
      }
    }
  }
}