/* ==========================================================================
   お知らせ記事（single.php）
   出典: docs/design-spec/05_news.md「B. お知らせ記事」（Zeplin 実測 px）
         docs/design-spec/99_buttons.md（B3「戻る」/ B4 CTAボタン）

   使用アセット（コピー元）
     images/news/wave-white-pc.svg / -sp.svg ← design/assets/layer__6877.svg（PC）と
                                  layer__6674.svg（SP）から波形を抽出して生成
     images/news/cta-staff.webp   ← design/assets/staff__6720.svg
     images/news/cta-illust.webp  ← design/assets/1__6706.png
     images/icon-allow-w.webp（共通・配置済み）

   本文（h2/h3/ul/ol/blockquote/table）はデザイン未設計。B-4 の提案値をトークンの
   範囲で実装した。採用値は docs/design-spec/REQUESTS_news.md に記載。
   ========================================================================== */

/* --------------------------------------------------------------------
   本体（ページヘッダーの緑帯に波形で食い込む白い領域）
   PC: 波形の頂点 409（帯下端 500 から 91px 上）/ 波の深さ 84px
       記事メタの行上端 611 まで 202px。戻るボタン下端 1776 → CTA帯 1896 で 120px。
   -------------------------------------------------------------------- */
.p-single__main {
  margin-top: -91px;
  padding-block: 202px 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));
}

/* --------------------------------------------------------------------
   B-2 記事メタ（投稿日 + カテゴリーバッジ + 下罫線）
   X座標は一覧の行と同一（PC 日付 410 / バッジ 508、SP 53 / 151）。
   -------------------------------------------------------------------- */
.p-single__meta {
  display: grid;
  grid-template-columns: 68px 124px;
  column-gap: 30px;
  align-items: center;
  padding-left: 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--c-text-sub);
}
.p-single__meta .c-badge { justify-self: start; }
.p-single__date {
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 30px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------
   B-3 記事タイトル（28px / lh 30 / 本文と同じ 32px 内寄せ）
   ページヘッダーが h1（「お知らせ」）を持つため、ここは h2 で出す。
   -------------------------------------------------------------------- */
.p-single__title {
  margin-top: 47px;                 /* 罫線 667 → タイトル 715 */
  padding-inline: 32px;             /* 本文内寸 1096px = 1160 − 32×2 */
  font-size: 28px;
  font-weight: var(--fw-bold);
  line-height: 30px;
  text-align: justify;
  color: var(--c-text);
}

/* --------------------------------------------------------------------
   B-4 記事本文
   実測は「段落 20px / lh40」と「画像 800×600・中央」のみ。
   見出し・リスト・引用・表は提案値（REQUESTS_news.md に記載）。
   -------------------------------------------------------------------- */
.p-single__body {
  margin-top: 46px;                 /* タイトル下端 740 → 画像 790 */
  padding-inline: 32px;
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 40px;
  text-align: justify;
  color: var(--c-text);
}
.p-single__body > * + * { margin-top: 40px; }

.p-single__thumb {
  max-width: 800px;
  margin-inline: auto;
}
.p-single__thumb img { width: 100%; height: auto; }

.p-single__body figure,
.p-single__body .wp-block-image,
.p-single__body > img { margin-block: 47px; }
.p-single__body figure img,
.p-single__body .wp-block-image img { display: block; margin-inline: auto; }
.p-single__body figcaption {
  margin-top: 8px;
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1.8;
  text-align: center;
  color: var(--c-text-sub);
}

/* 見出し（提案値） */
.p-single__body h2 {
  margin-top: 48px;
  margin-bottom: 24px;
  padding-left: 16px;
  border-left: 4px solid var(--c-green);
  font-size: 28px;
  line-height: 40px;
  color: var(--c-text);
}
.p-single__body h3 {
  margin-top: 40px;
  margin-bottom: 16px;
  font-size: 22px;
  line-height: 36px;
  color: var(--c-text);
}
.p-single__body h4 {
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 32px;
  color: var(--c-text);
}

/* リスト（base.css で list-style を外しているので戻す） */
.p-single__body ul,
.p-single__body ol {
  padding-left: 1.5em;
  list-style: disc;
}
.p-single__body ol { list-style: decimal; }
.p-single__body li::marker { color: var(--c-green); }
.p-single__body li + li { margin-top: 8px; }

/* 引用（提案値） */
.p-single__body blockquote {
  margin-inline: 0;
  padding: 24px 28px;
  border-left: 4px solid var(--c-green-light);
  background: var(--c-cream);
  font-size: 18px;
  line-height: 36px;
}

/* 表（提案値） */
.p-single__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
  line-height: 30px;
}
.p-single__body th,
.p-single__body td {
  padding: 12px 16px;
  border: 1px solid var(--c-rule);
  text-align: left;
  vertical-align: top;
}
.p-single__body th { background: var(--c-green-pale); }

/* 本文中のリンク・強調 */
.p-single__body a { text-decoration: underline; }
.p-single__body strong { color: var(--c-red); }

/* --------------------------------------------------------------------
   B-5「戻る」ボタン（99_buttons.md B3）
   260×40 / radius 20 / テキスト中央 / 矢印は枠右端から 13px
   ※ 共通部品に B3（.c-btn--action）が無いため、ページ側で寸法を与えている。
     → REQUESTS_news.md
   -------------------------------------------------------------------- */
.p-single__back-wrap {
  margin-top: 121px;                /* 本文下端 1615 → ボタン 1736 */
  text-align: center;
}
.p-single__back {
  position: relative;
  justify-content: center;
  width: 260px;
  height: 40px;
  padding-inline: 0;
  border-radius: var(--radius-l);
  font-size: 18px;
  font-weight: var(--fw-medium);
}
.p-single__back .c-btn__icon {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------
   A-7 CTA「あなたの一歩を私たちと。」（下層共通の誘導帯）
   帯 1843–2351（h=508）/ #FCD68C
   ※ お知らせ一覧（css/page-news.css）にも同じ指定がある。本来は共通部品
     （.c-cta + template-parts/cta.php）にすべき。→ REQUESTS_news.md
   -------------------------------------------------------------------- */
.p-single__cta {
  background: var(--c-orange-light);
  padding-block: 80px 90px;           /* 帯上端 1843 → 見出し 1923 / ボタン下端 2261 → 2351 */
}
.p-single__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-single__cta-head { position: relative; }
.p-single__cta-text { padding-right: 230px; }
.p-single__cta-title {
  font-size: 40px;
  line-height: 1;
  text-align: center;
  color: var(--c-text);
}
.p-single__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-single__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-single__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-single__cta-btn:hover {
  border-color: var(--c-cta-hover);
  background: var(--c-cta-hover);
  color: var(--c-white);
}
.p-single__cta-btn-illust {
  position: absolute;
  left: 23px;
  bottom: 0;                          /* 枠の上へ 14px はみ出す */
  width: 71px;
  height: auto;
}
.p-single__cta-btn-lg {
  font-size: 30px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.p-single__cta-btn-sm {
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

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

  /* 波形の頂点 296（帯下端 440 から 144px 上）/ 波の深さ 30px。
     記事メタの行上端 382 まで 86px。戻るボタン下端 1043 → CTA帯 1116。 */
  .p-single__main {
    margin-top: -144px;
    padding-block: 86px 73px;
    /* 波の深さと地色の起点は --wave-h（components.css）。 */
  }

  .p-single__title {
    margin-top: 26px;               /* 罫線 438 → タイトル 465 */
    padding-inline: 2px;            /* SP の本文内寸は 330px（内寄せなし） */
    font-size: 20px;
    line-height: 32px;
  }

  .p-single__body {
    margin-top: 30px;               /* タイトル下端 515 → 画像 546 */
    padding-inline: 0;
    font-size: 16px;
    line-height: 24px;
  }
  .p-single__body > * + * { margin-top: 24px; }
  .p-single__thumb { max-width: none; }
  .p-single__body figure,
  .p-single__body .wp-block-image,
  .p-single__body > img { margin-block: 27px; }

  .p-single__body h2 { margin-top: 32px; margin-bottom: 16px; font-size: 20px; line-height: 32px; }
  .p-single__body h3 { margin-top: 28px; margin-bottom: 12px; font-size: 18px; line-height: 30px; }
  .p-single__body h4 { margin-top: 24px; margin-bottom: 10px; font-size: 16px; line-height: 28px; }
  .p-single__body blockquote { padding: 16px 18px; font-size: 16px; line-height: 28px; }
  .p-single__body table { font-size: 15px; line-height: 26px; }
  .p-single__body th,
  .p-single__body td { padding: 8px 10px; }

  .p-single__back-wrap { margin-top: 73px; }   /* 本文下端 930 → ボタン 1003 */

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

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