/* ============ NEWS一覧・詳細CSS：WP化時はNEWS一覧・詳細ページで読み込む ============ */
@layer page {
  .p-news-list {
    .p-news-list__head {
      /* .p-products__headと同じ考え方（タイトルとタブがぶつかったらタブ群ごと折り返す） */
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 2rem 4rem;
      padding-inline: var(--page-padding-89) var(--page-padding-100);
    }

    .p-news-list__title {
      /* cap-height実測から逆算したfont-size（.p-products__titleと同じ頭打ち構造） */
      font-size: clamp(8rem, 4rem + 7.5vw, 12.7rem);
      font-weight: var(--fw-heavy);
      line-height: 1;
      white-space: nowrap;
    }

    .p-news-list__list {
      display: flex;
      flex-direction: column;
      gap: 4rem; /* PDF実測（区切り線から次カード上端まで） */
      margin-block-start: 7rem; /* PDF実測（見出し下端からカード上端まで） */
      /* PDF実測320px(1920px時)。768pxは他セクションと揃え3remに比例接続 */
      padding-inline: var(--page-padding-320);
    }

    .p-news-list__item {
      padding-block-end: 4rem; /* PDF実測（本文下端から区切り線まで） */
      border-block-end: 1px solid var(--color-border);
    }

    .p-news-list__card {
      display: flex;
      align-items: flex-start;
      gap: 2.8rem; /* PDF実測（画像右端からカテゴリタグまで） */
    }

    .p-news-list__thumb {
      display: block;
      flex-shrink: 0;
      overflow: hidden; /* ホバー時に拡大する画像がテキスト側へはみ出さないよう囲う */
      /* PDF実測300px。画面が縮んでも画像は固定し、テキスト側だけを縮める */
      width: 30rem;
      /* 高さは固定比率にせず画像の比率に任せる（PC/SP・メインカード共通） */
    }

    .p-news-list__image {
      display: block;
      width: 100%;
      height: auto;
      transition: transform var(--transition-base);
    }

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

    /* メインカードは画像が大きい（実測552px）。比例縮小し、通常カードと同じ300pxで止める */
    .p-news-list__item--main .p-news-list__thumb {
      width: clamp(30rem, -3.5rem + 30.6vw, 55.2rem);
    }

    .p-news-list__body {
      min-width: 0; /* flexアイテムがテキストで縮まずはみ出すのを防ぐ */
    }

    .p-news-list__category {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding-inline: 2.2rem; /* カテゴリ文字数に応じて幅が変わる（可変幅） */
      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-list__date {
      /* PDF実測：カテゴリ下端から11.8px */
      margin-block-start: 2rem;
      font-size: var(--fs-sm);
      letter-spacing: 0.05em;
    }

    .p-news-list__headline {
      /* PDF実測：日付下端から8px */
      margin-block-start: 1.5rem;
      font-size: 1.9rem; /* PDF実測19.1px。.p-news__headline(1.8rem)より一回り大きい専用サイズ */
      font-weight: var(--fw-bold);
      line-height: 1.3; /* PDF実測の行送り25.7px÷フォントサイズ19.1px */
      letter-spacing: 0.05em;
    }

    .p-news-list__excerpt {
      /* PDF実測：タイトル下端から3.9px */
      margin-block-start: 2rem;
      display: -webkit-box;
      overflow: hidden;
      font-size: var(--fs-sm);
      line-height: 2; /* PDF実測の行送り30px÷フォントサイズ14px */
      -webkit-box-orient: vertical;
      line-clamp: 2;
      -webkit-line-clamp: 2;
    }

    .p-news-list__item--main .p-news-list__excerpt {
      line-clamp: 5;
      -webkit-line-clamp: 5;
    }

    /* 1095px以下はメインの画像も通常カードと同じ300pxになるため行数も揃える */
    @media (max-width: 1095px) {
      .p-news-list__excerpt,
      .p-news-list__item--main .p-news-list__excerpt {
        line-clamp: 3;
        -webkit-line-clamp: 3;
      }
    }

    /* SPはタブがグリッド、カードは画像フルブリード+テキスト縦積みに大きく変わる */
    @media (max-width: 767px) {
      .p-news-list__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding-inline: 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
      }

      .p-news-list__title {
        /* SP cap-height実測から逆算したfont-size（.p-products__titleと同じ頭打ち構造） */
        font-size: clamp(7rem, 21.9vw, 14rem);
        white-space: normal;
        margin-inline-start: -2.7rem; /* 親のpadding-inline(2rem)を打ち消す */
      }

      .p-news-list__list {
        gap: 3rem; /* SVGカンプ実測（p-news__listのSP値と同じ考え方） */
        margin-block-start: 3rem;
        padding-inline: 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
      }

      .p-news-list__item {
        padding-block-end: 3rem;
      }

      /* 画像の右にcategory/dateを縦積み。1行目は画像とタグ/日付の高い方に合わせる */
      .p-news-list__card {
        display: grid;
        --thumb-w: clamp(18rem, 56.3vw, 36rem);
        --card-gap: 2rem; /* 画像とタグ/日付の間隔 */
        grid-template-columns: var(--thumb-w) 1fr;
        grid-template-rows: auto auto auto;
        column-gap: var(--card-gap);
        row-gap: 0; /* PC版のgap:4.8rem(row-gap分)を打ち消す。行間は各要素のmarginで管理する */
      }

      .p-news-list__thumb {
        grid-column: 1;
        grid-row: 1;
        width: 100%; /* 実際の幅はgrid-template-columnsのvar(--thumb-w)が決める */
      }

      .p-news-list__body {
        display: contents; /* このdiv自体は透過し、子要素を直接gridアイテムにする */
      }

      .p-news-list__category {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        padding-inline: 0; /* SPは文字量で幅が変わらないよう固定幅にする（下記width参照） */
        /* SP実測：badge幅172px固定。thumb-wと同じ比率でvw縮小、8rem未満は文字が収まらない */
        width: clamp(8rem, 26.9vw, 17.2rem);
      }

      .p-news-list__date {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        /* categoryと同じセルに重ね、高さ+実測余白ぶん下げて直下に縦積みさせる */
        margin-block-start: calc(3rem + 1.2rem);
      }

      .p-news-list__headline {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-block-start: 1.5rem; /* PDF実測（画像下端からタイトル上端まで） */
      }

      .p-news-list__excerpt {
        grid-column: 1 / -1;
        grid-row: 3;
      }

      /* メインカードは画像フルブリード+縦積み。flexに戻しulのpadding-inline(2rem)を打ち消す */
      .p-news-list__item--main .p-news-list__card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0; /* PC版のgap:4.8remを打ち消す。間隔は各要素のmarginで管理する */
        margin-inline: -2rem;
      }

      .p-news-list__item--main .p-news-list__thumb {
        width: 100%;
      }

      .p-news-list__item--main .p-news-list__body {
        display: block; /* 通常カード用のdisplay:contentsを打ち消す */
        padding-inline: 2rem; /* 画像だけフルブリードでテキストはヘッダーと同じ余白 */
      }

      .p-news-list__item--main .p-news-list__date {
        margin-block-start: 1.2rem; /* 通常カード用の縦積みオフセットを打ち消す */
      }

      .p-news-list__item--main .p-news-list__headline {
        margin-block-start: 0.8rem; /* PC版と同じ実測値に戻す */
      }

      /* メインカードは画像下にcategoryが来るため上マージンが必要（通常カードは不要） */
      .p-news-list__item--main .p-news-list__category {
        margin-block-start: 2rem;
      }

      .p-news-list__date {
        /* 375px→14px(400px以下はclampの下限でPC値に張り付く)、640px→20px。誤差ゼロで両端一致 */
        font-size: clamp(1.4rem, 0.4rem + 2.5vw, 2rem);
      }

      .p-news-list__headline {
        font-size: clamp(1.4rem, 0.7rem + 1.9vw, 1.9rem);
      }
    }
  }

  /* ここから：NEWS詳細 */
  .p-news-detail {
    .p-news-detail__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 4rem; /* デザインに明記なし。テキスト列に余裕を持たせる判断値 */
      padding-inline: var(
        --page-padding-320
      ); /* 一覧の本文カラムと同じ左右余白 */
    }

    .p-news-detail__head-text {
      min-width: 0; /* flexアイテムがテキストで縮まずはみ出すのを防ぐ */
    }

    /* 一覧のカテゴリバッジと同じ見た目。SP用grid配置と衝突するためクラスは共有しない */
    .p-news-detail__category {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding-inline: 2.2rem;
      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-detail__date {
      margin-block-start: 1rem; /* PDF実測：カテゴリ下端から24px */
      font-size: var(--fs-sm);
      letter-spacing: 0.05em;
    }

    .p-news-detail__title {
      margin-block-start: 9rem; /* PDF実測：日付下端から90px */
      font-size: 2.2rem; /* PDFテキストオブジェクト実測値 */
      font-weight: var(--fw-bold);
      line-height: 2.1; /* PDF実測の行送り46px÷フォントサイズ22px */
      letter-spacing: 0.05em;
    }

    .p-news-detail__hero {
      display: block;
      /* flex:1 1 autoだとbasisが不定でclampが効かないためwidthを直接可変にする */
      flex: 0 0 auto;
      width: clamp(
        48.1rem,
        11.65rem + 30.39vw,
        70rem
      ); /* 1800px以下での折り返し崩れを防ぐ比例縮小 */
      aspect-ratio: 350 / 223; /* PDF実測700×446 */
      object-fit: cover;
    }

    .p-news-detail__body {
      margin-block-start: 8.7rem; /* PDF実測：KV画像下端から本文1行目まで */
      padding-inline: var(--page-padding-320);
    }

    .p-news-detail__body-inner {
      max-width: 70rem; /* PDF実測：本文カラム幅700px。右側はデザイン意図の余白 */

      /* 既定：画像前後の間隔（見出し・先頭要素は個別に上書き） */
      > * {
        margin-block-start: 6rem; /* PDF実測の画像前後余白(約57px)を丸めた値 */
      }

      > :first-child {
        margin-block-start: 0;
      }

      > h2 {
        margin-block-start: 8.3rem; /* PDF実測：見出し前の余白 */
        font-size: var(--fs-sm); /* PDF実測：本文と同じサイズ・ウェイト */
        font-weight: var(--fw-regular);
        line-height: 2.1;
        letter-spacing: 0.05em;
      }

      > h2 + p {
        margin-block-start: 0; /* PDF実測：見出し直後の段落は行送り分のみで詰まる */
      }

      > p + p {
        margin-block-start: 0; /* 段落が連続する場合は行送り分のみで詰める */
      }

      p {
        font-size: var(--fs-sm);
        line-height: 2.1; /* PDF実測の行送り30px÷フォントサイズ14px */
        letter-spacing: 0.05em;
      }

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

    .p-news-detail__back {
      display: flex;
      justify-content: center;
      margin-block-start: 7.9rem; /* PDF実測：本文最終行からボタンまで */
      padding-inline: var(--page-padding-320);
    }

    /* 767pxより先、1200px付近でテキスト列がheroに圧迫され崩れるため崩れ始める幅で切替 */
    @media (max-width: 1199px) {
      .p-news-detail__head {
        flex-direction: column;
        gap: 0;
        padding-inline: 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
      }

      .p-news-detail__hero {
        order: -1;
        flex: none;
        max-width: none;
        width: calc(
          100% + 4rem
        ); /* 親のpadding-inline(2rem×2)を打ち消しフルブリード化 */
        margin-inline: -2rem;
        aspect-ratio: 80 / 51; /* SP実測640×408 */
        margin-bottom: 2rem;
      }

      .p-news-detail__title {
        margin-block-start: 1rem; /* PDF実測：SPは日付直下からの間隔が狭い */
        /* SPは375px基準の連続比例縮小。下限1.6remは指摘を受けた調整値 */
        font-size: clamp(1.6rem, 0.5rem + 3vw, 2.4rem);
        line-height: 1.7; /* PDF実測の行送り40px÷フォントサイズ24px */
      }
    }

    /* SPはKV画像が先頭にフルブリードで来て、その下にテキストが縦積みになる */
    @media (max-width: 767px) {
      .p-news-detail__body {
        margin-block-start: 1rem; /* PDF実測：タイトル下端から本文1行目まで */
        padding-inline: 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
      }

      .p-news-detail__body-inner {
        max-width: none; /* PC専用の右側余白デザインをSPでは解除 */

        > * {
          margin-block-start: 2.7rem; /* PDF実測：SPの画像前後余白 */
        }

        > h2 {
          margin-block-start: 7.7rem; /* PDF実測：SPの見出し前余白 */
          /* 375px→14px(400px以下はclampの下限でPC値に張り付く)、640px→20px。誤差ゼロで両端一致 */
          font-size: clamp(1.4rem, 0.4rem + 2.5vw, 2rem);
        }

        p {
          font-size: clamp(1.4rem, 0.4rem + 2.5vw, 2rem);
        }
      }

      .p-news-detail__back {
        margin-block-start: 6.7rem; /* PDF実測 */
        padding-inline: 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
      }
    }
  }
}