/* ==========================================================================
   お知らせ一覧（home.php / archive.php / index.php）
   出典: docs/design-spec/05_news.md「A. お知らせ一覧」（Zeplin 実測 px）
         docs/design-spec/99_buttons.md（B4 CTAボタン / B5・B6 ページネーション）

   使用アセット（コピー元）
     images/news/wave-white-pc.svg / -sp.svg ← design/assets/layer__6877.svg
        （PC）と layer__6674.svg（SP）から波形の輪郭を
        抽出して生成。お知らせ画面の波形（layer__6792 / layer__6611 / layer__6648 /
        layer__6605）は書き出しが壊れていて（1bit マスクが全面白）形が入っていない。
        形状は同一なので色だけ白に差し替えた。→ REQUESTS_news.md
     images/news/cta-staff.webp   ← design/assets/staff__6720.svg（271×196）
     images/news/cta-illust.webp  ← design/assets/1__6706.png（71×104）

   PC 座標は 1920 アートボード基準（x=380 がコンテンツ左端 / x=1540 が右端）。
   ========================================================================== */

/* --------------------------------------------------------------------
   本体（ページヘッダーの緑帯に波形で食い込む白い領域）
   PC: 帯下端 500 に対し波形の頂点 409 → 91px 重ねる。波の深さ 84px。
       最初の要素（カテゴリータブ y=581）まで 409 から 172px。
       ページネーション下端 1723 → CTA帯 1843 で 120px。
   -------------------------------------------------------------------- */
.p-news__main {
  margin-top: -91px;
  padding-block: 172px 120px;
  /* 波形は components.css の [data-wave]（画像なし・マスク）。地色は波の下から敷く。 */
  --wave-fill: var(--c-white);
  background-image: linear-gradient(var(--c-white), var(--c-white));
  background-repeat: no-repeat;
  background-position: center var(--wave-h);
  background-size: 100% calc(100% - var(--wave-h));
}

/* --------------------------------------------------------------------
   A-4 カテゴリータブ
   PC: Bold 22px / 中央揃え / カレントは緑文字 + 4px の緑下線（角丸2px）
   -------------------------------------------------------------------- */
.p-news__tabs-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 22px;              /* 項目間は原稿では全角スペース1個 */
  line-height: 1;
}
.p-news__tab a {
  position: relative;
  display: inline-block;
  padding-bottom: 9px;      /* テキスト下端 603 → 下線 612 */
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--c-text);
}
.p-news__tab.is-current a { color: var(--c-green); }
.p-news__tab.is-current a::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  border-radius: 2px;
  background: var(--c-green);
}

/* --------------------------------------------------------------------
   A-5 投稿ループ（1行 = 日付 + カテゴリーバッジ + タイトル / 行全体がリンク）
   PC: 日付 x=410(w68) / バッジ x=508(w124) / タイトル x=664(w845) / 区切り線 1160
   -------------------------------------------------------------------- */
.p-news__list { margin-top: 27px; }   /* 下線 616 → リスト上端 643 */

.p-news__link {
  display: grid;
  grid-template-columns: 68px 124px minmax(0, 1fr);
  column-gap: 30px;
  align-items: center;
  padding: 26px 31px 27px 30px;       /* 1行の行高 83px（30 + 26 + 27） */
  border-bottom: 1px solid var(--c-text-sub);
  color: var(--c-text);
}
.p-news__link .c-badge { justify-self: start; }

.p-news__date {
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 30px;
  white-space: nowrap;
}
.p-news__badge-empty { display: block; }

.p-news__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;              /* PC は2行で省略（05_news.md A-5） */
  overflow: hidden;
  padding-left: 2px;                  /* バッジ右端 632 → タイトル 664 は 32px */
  font-size: 18px;
  font-weight: var(--fw-bold);
  line-height: 30px;
  text-align: justify;
}

/* 投稿が0件のとき（デザイン未支給の文言） */
.p-news__empty {
  margin-top: 60px;
  font-size: 18px;
  font-weight: var(--fw-bold);
  text-align: center;
}

/* --------------------------------------------------------------------
   A-6 ページネーション（B5 / B6）
   20×30px・角丸0・間隔4px。カレントは緑地に白文字。
   矢印は Noto Sans JP Medium 500（テーマは Zen Maru Gothic のみ読み込むため
   フォントスタックで受ける。読み込み追加の要望は REQUESTS_news.md）。
   -------------------------------------------------------------------- */
.p-news__pager {
  margin-top: 121px;                  /* 最終区切り線 1572 → 1693 */
  text-align: center;
  line-height: 1;
}
.p-news__pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 30px;
  margin-inline: 2px;                 /* ボックス間隔 4px */
  border: 1px solid var(--c-text);
  background: var(--c-white);
  color: var(--c-text);
  font-size: 16px;
  font-weight: var(--fw-bold);
  vertical-align: middle;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.p-news__pager .page-numbers.current {
  border-color: var(--c-green);
  background: var(--c-green);
  color: var(--c-white);
}
.p-news__pager a.page-numbers:hover {  /* hover はデザイン未定義（99_buttons B6 の提案） */
  border-color: var(--c-green);
  background: var(--c-green);
  color: var(--c-white);
}
.p-news__pager .page-numbers.prev,
.p-news__pager .page-numbers.next,
.p-news__pager .page-numbers.dots {
  width: auto;
  min-width: 11px;
  border: 0;
  background: none;
  color: var(--c-text);
  font-family: "Noto Sans JP", var(--font-base);
  font-weight: var(--fw-medium);
}
.p-news__pager .page-numbers.prev { margin-right: 9px; }
.p-news__pager .page-numbers.next { margin-left: 9px; }
.p-news__pager a.page-numbers.prev:hover,
.p-news__pager a.page-numbers.next:hover { color: var(--c-text-hover); }

/* --------------------------------------------------------------------
   A-7 CTA「あなたの一歩を私たちと。」（下層共通の誘導帯）
   帯 1843–2351（h=508）/ #FCD68C
   ※ お知らせ記事（css/page-single.css）にも同じ指定がある。本来は共通部品
     （.c-cta + template-parts/cta.php）にすべき。→ REQUESTS_news.md
   -------------------------------------------------------------------- */
.p-news__cta {
  background: var(--c-orange-light);
  padding-block: 80px 90px;           /* 帯上端 1843 → 見出し 1923 / ボタン下端 2261 → 2351 */
}
.p-news__cta-inner {
  position: relative;
  width: min(100% - var(--gutter) * 2, var(--w-content));
  margin-inline: auto;
}
/* 🚨 テキストに幅 465px を持たせると見出し（40px × 12 文字 = 480px）も
   リード 1 行目（480px）も収まらず、両方 2 行に折り返して崩れる
   （2026-09-16 市川様のご指摘）。
   /work/ /flow/ の CTA と同じく「右のスタッフ写真ぶんを padding で除いて
   残りの領域の中央に寄せる」方式にする。
   デザイン（05_01_news_index_pc.png）実測: 文字の中心 x=845
   ＝ コンテナ左端 380 +（1160 − 230）/ 2。写真は x=1098（左端から 718）。 */
.p-news__cta-head { position: relative; }
.p-news__cta-text { padding-right: 230px; }
.p-news__cta-title {
  font-size: 40px;
  line-height: 1;
  text-align: center;
  color: var(--c-text);
}
.p-news__cta-lead {
  margin-top: 54px;                   /* 見出し下端 1961 → リード 2017 */
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 40px;
  text-align: center;
  color: var(--c-text);
}
.p-news__cta-staff {
  position: absolute;
  top: -2px;     /* 帯上端 1843 + padding 80 = 1923 に対し写真上端 1921 */
  left: 718px;   /* x=1098（コンテンツ左端 380 から 718px） */
  width: 271px;
  height: 196px;
}

/* CTAボタン（99_buttons.md B4）560×90 / 白地 + 2px オレンジ枠 / radius 20 */
.p-news__cta-btn {
  position: relative;
  display: flex;
  align-items: center;
  width: 560px;
  height: 90px;
  margin: 46px auto 0;                /* リード下端 → ボタン上端 2171 */
  padding-left: 132px;                /* 枠左端 +132 がテキスト左端 */
  border: 2px solid var(--c-orange);
  border-radius: var(--radius-l);
  background: var(--c-white);
  color: var(--c-text);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
/* hover: 白地＋橙枠 → 橙ベタ＋白文字（2026-09-16 市川様のご指定 / #F7B52C） */
.p-news__cta-btn:hover {
  border-color: var(--c-cta-hover);
  background: var(--c-cta-hover);
  color: var(--c-white);
}
.p-news__cta-btn-illust {
  position: absolute;
  left: 23px;
  bottom: 0;                          /* 枠の上へ 14px はみ出す */
  width: 71px;
  height: auto;
}
.p-news__cta-btn-lg {
  font-size: 30px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.p-news__cta-btn-sm {
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

/* --------------------------------------------------------------------
   SP（375 アートボード基準）
   -------------------------------------------------------------------- */
@media (max-width: 1079px) {

  /* 帯下端 440 / 波形の頂点 296 → 144px 重ね、波の深さ 30px。
     タブ y=385 まで 296 から 89px。ページネーション下端 1491 → CTA帯 1564。 */
  .p-news__main {
    margin-top: -144px;
    padding-block: 89px 73px;
    /* 波の深さと地色の起点は --wave-h（components.css）。 */
  }

  .p-news__tabs-list { gap: 0 20px; }
  .p-news__tab a {
    padding-bottom: 0;
    font-size: 20px;
    line-height: 50px;
  }
  .p-news__tab.is-current a::after { bottom: 6px; }

  .p-news__list { margin-top: 10px; }

  /* 2段組み: 1段目 日付 + バッジ / 2段目 タイトル（3行）。行ピッチ 187px */
  .p-news__link {
    grid-template-columns: 98px minmax(0, 1fr);
    padding: 24px 0 25px;
  }
  .p-news__date { padding-left: 30px; }   /* x=23 + 30 = 53 */
  .p-news__title {
    grid-column: 1 / -1;
    -webkit-line-clamp: 3;
    margin-top: 18px;
  }

  .p-news__pager { margin-top: 61px; }

  /* CTA: スタッフ写真を上、テキストを下に積む。写真は帯から 13px はみ出す */
  .p-news__cta { padding-block: 0 39px; }
  /* SP は写真を上、テキストを下に積む（PC の絶対配置を解除する） */
  .p-news__cta-head {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 30px;                        /* 写真下端 1747 → 見出し 1777 */
  }
  .p-news__cta-text { padding-right: 0; }
  .p-news__cta-title { font-size: 26px; }
  .p-news__cta-lead {
    margin-top: 26px;
    font-size: 16px;
    line-height: 24px;
  }
  .p-news__cta-staff {
    position: static;
    width: 271px;
    max-width: 100%;
    height: auto;
    margin-top: -13px;
  }

  .p-news__cta-btn {
    width: min(100%, 330px);
    height: 80px;
    margin-top: 34px;
    padding-left: 104px;              /* テキスト x=128 − 枠 x=24 */
  }
  .p-news__cta-btn-illust { width: 64px; }
  .p-news__cta-btn-lg { font-size: 26px; }
  .p-news__cta-btn-sm { font-size: 16px; }
  .p-news__cta-btn-tail { display: block; }   /* SP は2行 */
}