/* =========================================================
   記事ページ（お知らせ44本 ＋ 社員ブログ4本）の見た目
   ---------------------------------------------------------
   狙い: 本番 news/*.html・blog/*.html が使っているクラス名（.news-article 系 / .bp-* /
   .page-hero / .breadcrumb / .page-section / .inner / .section.cta / .btn-cta）に、
   そのまま新デザインを与える。HTMLを1本ずつ書き換えずに、このCSSの差し替えだけで
   48本の記事がまとめて新デザインになる状態を保つのが目的。

   前提:
   ・読み込み順は top.css → page.css → motion.css → このファイル（最後に上書きする）
   ・本番 css/style.css は読み込まない。記事ページに要る指定はすべてここに書く
   ・色・字サイズ・太さは top.css の :root 変数だけを使う（生の色は書かない）。
     半透明が要るところは color-mix(in srgb, var(--token) N%, transparent) で作る
   ・本文の組み（.news-article-body / .bp-lead / .bp-sec）は page.css の .prose と
     同じ値をそのまま使う＝規約ページなどと本文の見え方が揃う
   ・ヘッダーは position:fixed（高さ var(--hd-h)）。ページ先頭の要素が
     その下に潜らないよう、先頭ブロックで padding-top を確保する
   ・ページ最上部は必ず紺地にする。shell.js のヘッダーは data-theme="dark"（白文字）が
     既定なので、上端が白いと未スクロール時にロゴとナビが消えるため
   ========================================================= */


/* ---------------------------------------------------------
   1) ページ見出し（お知らせ記事の .page-hero）
   本番の中身は h1="News"（英字）＋ p.page-jp="お知らせ"（和文）。
   このサイトの他ページ（.phero）は「英字＝小さいラベル／和文＝大きい見出し」で統一して
   いるので、同じ見え方になるよう h1 を英字ラベル、.page-jp を見出しとして組む。
   HTMLの見出しレベルは本番のまま（h1が実際の見出し）＝機械可読性は変えていない。
   --------------------------------------------------------- */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(210px, 25vw, 320px);
  padding: calc(var(--hd-h) + 56px) var(--gut) clamp(20px, 2.2vw, 30px);
  overflow: hidden;
  color: var(--white);
  background: var(--navy-900);
}
/* 光は上半分だけに置き、下端は必ず単色 var(--navy-900) に落とす。
   直下に続く .breadcrumb（同じ単色）との継ぎ目を出さないため。 */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(54% 66% at 82% -6%, color-mix(in srgb, var(--c2) 44%, transparent), transparent 62%),
    radial-gradient(58% 72% at 4% 8%, color-mix(in srgb, var(--c1) 48%, transparent), transparent 66%),
    linear-gradient(180deg, transparent 38%, var(--navy-900) 100%);
}
.page-hero-inner {
  position: relative;
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
}
/* h1="News" は英字ラベル（page.css の .phero__en と同値）。末尾の罫は擬似要素で描く */
.page-hero h1 {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--f-en);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: .24em;
  line-height: 1.8;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--white) 70%, transparent);
}
.page-hero h1::after {
  content: "";
  flex: none;
  width: 54px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}
/* .page-jp="お知らせ" が視覚上の主見出し（page.css の .phero h1 と同値） */
.page-jp {
  margin-top: 18px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: 1.32;
  letter-spacing: .02em;
  color: var(--white);
}


/* ---------------------------------------------------------
   2) パンくず（.breadcrumb）
   本番では お知らせ＝ヒーローの「下」、ブログ＝main の「先頭」に置かれる。
   どちらでも紺地の帯として隣のブロックと地続きに見えるよう、単色 var(--navy-900) で敷く。
   --------------------------------------------------------- */
.breadcrumb {
  background: var(--navy-900);
  color: color-mix(in srgb, var(--white) 62%, transparent);
}
/* top.css の list リセットは ul だけ＝ol は自前で潰す */
.breadcrumb ol {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--gut) clamp(34px, 3.6vw, 58px);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: var(--fs-eyebrow);
  line-height: 1.9;
}
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li + li::before {
  content: "／";
  margin-right: 10px;
  color: color-mix(in srgb, var(--white) 34%, transparent);
}
.breadcrumb a { transition: color .3s var(--ease); }
.breadcrumb a:hover { color: var(--white); }
/* ブログ記事は main の先頭がパンくず＝固定ヘッダーの逃げをここで作る */
.bp-page > .breadcrumb ol {
  padding-top: calc(var(--hd-h) + clamp(26px, 3vw, 44px));
  padding-bottom: 0;
}


/* ---------------------------------------------------------
   3) セクションの枠（.page-section / .inner）
   .page-section は上下の余白だけを持つ（page.css の .sec と同値）。
   左右の余白は お知らせ＝.inner、ブログ＝.bp-wrap が持つ。
   お知らせの .inner は本番HTMLに style="max-width:860px" が直接入っている＝
   ここでは中央寄せと左右余白だけを与える（インラインの幅指定を尊重する）。
   --------------------------------------------------------- */
.page-section { padding-block: clamp(48px, 5.5vw, 96px); }
.inner {
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gut);
}


/* ---------------------------------------------------------
   4) お知らせ記事の見出し部（.news-article-head）
   日付＋カテゴリの行は top.css の .meta / .meta .cat と同じ組み。
   タイトルは .h2 と同値。
   見出しと本文は罫で切る（お知らせは本文が短い記事が多く、罫が無いと
   タイトルと本文1段落目が地続きに見えるため）。
   --------------------------------------------------------- */
.news-article-head {
  padding-bottom: clamp(18px, 2vw, 28px);
  border-bottom: 1px solid var(--line);
}
.news-article-meta {
  display: flex;
  align-items: center;
  font-family: var(--f-en);
  font-weight: var(--fw-medium);
  font-size: var(--fs-date);
  line-height: 1.8;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.news-cat {
  font-family: var(--f-jp);
  font-weight: var(--fw-regular);
  font-size: var(--fs-meta);
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--c3);
}
/* 区切りの縦罫。color を先に決めて currentColor で塗る（top.css の .meta .cat::before と同じ手） */
.news-cat::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 16px;
  vertical-align: -1px;
  color: var(--ink-3);
  background: currentColor;
  opacity: .5;
}
.news-article-title {
  margin-top: 16px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--ink);
}


/* ---------------------------------------------------------
   5) 本文の組み（.news-article-body / .bp-lead / .bp-sec）
   値は page.css の .prose をそのまま写している＝規約・事業案内の本文と同じ見え方。
   見出しはタグ名で対応させる（本番の記事本文は h3 始まり）。
   --------------------------------------------------------- */
.news-article-body {
  margin-top: clamp(26px, 2.8vw, 42px);
  font-size: var(--fs-body-sub);
  line-height: 2;
  color: var(--ink-2);
}
.bp-sec {
  font-size: var(--fs-body-sub);
  line-height: 2;
  color: var(--ink-2);
}
:is(.news-article-body, .bp-lead, .bp-sec) > * + * { margin-top: 1.4em; }
:is(.news-article-body, .bp-lead, .bp-sec) p { color: inherit; }
:is(.news-article-body, .bp-lead, .bp-sec) :is(strong, b) {
  font-weight: var(--fw-bold);
  color: var(--ink);
}
:is(.news-article-body, .bp-lead, .bp-sec) a {
  color: var(--c1);
  border-bottom: 1px solid currentColor;
  transition: color .3s var(--ease);
}
:is(.news-article-body, .bp-lead, .bp-sec) a:hover { color: var(--c3); }

.news-article-body h2 {
  margin-top: 2.2em;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink);
}
.news-article-body h2::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-top: 14px;
  border-radius: 2px;
  background: var(--grad);
}
.news-article-body h3 {
  margin-top: 1.8em;
  font-size: var(--fs-item-title);
  font-weight: var(--fw-bold);
  line-height: 1.6;
  color: var(--ink);
}
/* h4 は本番の記事1本だけが使う。h3 の一段下として見せる */
.news-article-body h4 {
  margin-top: 1.6em;
  font-size: var(--fs-card-title);
  font-weight: var(--fw-bold);
  line-height: 1.7;
  color: var(--ink);
}

:is(.news-article-body, .bp-sec) :is(ul, ol) { padding-left: 1.4em; }
:is(.news-article-body, .bp-sec) li + li { margin-top: .5em; }
:is(.news-article-body, .bp-sec) ul > li { list-style: none; position: relative; }
:is(.news-article-body, .bp-sec) ul > li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: .82em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c3);
}
/* top.css は ul の既定マージンだけを 0 にしている（ol は対象外）。
   そのままだと ul と ol で本文末尾の余白が変わるので、ol も揃えて 0 にする。 */
:is(.news-article-body, .bp-sec) ol { list-style: decimal; margin-block: 0; }
:is(.news-article-body, .bp-sec) ol > li::marker {
  color: var(--c1);
  font-family: var(--f-en);
  font-weight: var(--fw-semibold);
}

/* 引用ブロック。本番のお知らせ2本が使っている
   （20260716-fc5becfb は p が1つ、20260805-feb5ddfe は p が7つの長い引用）。
   見え方は page.css の .prose blockquote と同値（左の縦罫＋濃い文字色）。
   ここで2つ潰しておかないと崩れる:
   ・top.css は blockquote の既定マージンを消さない → 左右40pxの字下げが残る
   ・中の p は top.css の「h1,h2,h3,h4,p { margin:0 }」で余白ゼロになり、
     上の「> * + *」は .news-article-body の直接の子にしか効かない＝引用の中まで届かず、
     7段落が一続きの塊になる。段落間の空きはこの中で作る。
   ブログの抜き文は .bp-quote 側で別に組むので、ここは .news-article-body に限定する。 */
.news-article-body blockquote {
  margin: 1.4em 0 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--c3);
  color: var(--ink);
}
.news-article-body blockquote > * + * { margin-top: 1.2em; }
:is(.news-article-body, .bp-sec) hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: 2.2em;
}

/* 記事写真。figure のブラウザ既定 margin（左右40px）を必ず潰す。
   height:auto が無いと、width/height 属性を持つ画像が横だけ縮んで縦に伸びる。 */
.news-article-body figure,
.news-photo { margin: 1.8em 0 0; }
.news-article-body img,
.news-photo img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: var(--paper);
}
.news-article-body figcaption {
  margin-top: 10px;
  font-size: var(--fs-eyebrow);
  color: var(--ink-3);
}
/* 目次や関連リンクのように「1行まるごとがリンク」の箇所はタップ高 24px を確保する
   （文中に埋まったリンクは対象外＝WCAG 2.5.8 のインライン例外）。page.css の .prose と同じ扱い。 */
.news-article-body :is(li, p) > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}


/* ---------------------------------------------------------
   6) 記事の足（.news-article-foot / .more-link ／ .bp-foot / .bp-back）
   「一覧へ戻る」は本番だと素のリンク。新デザインの .link-u と同じ
   「下線＋矢印」に揃えるが、ラベルが和文なので字送りは詰めたままにする。
   --------------------------------------------------------- */
.news-article-foot {
  margin-top: clamp(32px, 3.4vw, 56px);
  padding-top: clamp(28px, 3vw, 48px);
  border-top: 1px solid var(--line);
}
.more-link,
.bp-back {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: 1.8;
  letter-spacing: .06em;
  color: var(--ink);
  border-bottom: 1.5px solid currentColor;
  transition: color .3s var(--ease);
}
/* 左向きの矢尻。transform（回転）と translate（移動）を別プロパティにして、
   ホバーで動かしても回転が戻らないようにする。 */
.more-link::before,
.bp-back::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: translate .35s var(--ease);
}
.more-link:hover,
.bp-back:hover { color: var(--c3); }
.more-link:hover::before,
.bp-back:hover::before { translate: -4px 0; }


/* =========================================================
   ここからブログ記事（.bp-*）
   構成: パンくず → .bp-head（紺）→ .bp-key（キービジュアル）→ .bp-wrap（本文・白）
   キービジュアルは紺地から白地へまたがせる。またぎ量は画像の縦横比に左右されない
   よう、画像の負のマージン（--bp-overlap）で固定する。
   ========================================================= */
.bp-page { --bp-overlap: clamp(36px, 6vw, 110px); }

/* --- 記事ヘッダー --- */
.bp-head {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2vw, 28px) var(--gut) clamp(34px, 3.6vw, 56px);
  color: var(--white);
  background: var(--navy-900);
}
/* 光は中央だけ。上下端は単色に戻して、パンくず・キービジュアルとの継ぎ目を消す */
.bp-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 78% at 86% 18%, color-mix(in srgb, var(--c3) 34%, transparent), transparent 64%),
    radial-gradient(56% 84% at 2% 52%, color-mix(in srgb, var(--c1) 46%, transparent), transparent 68%),
    linear-gradient(180deg, var(--navy-900) 0%, transparent 26%, transparent 74%, var(--navy-900) 100%);
}
/* 背景の大きな英字（aria-hidden の飾り）。塗らずに輪郭だけ出して本文の邪魔をしない */
.bp-bgtype {
  position: absolute;
  right: calc(var(--gut) * -.4);
  top: 0;
  z-index: 0;
  font-family: var(--f-en);
  font-weight: var(--fw-bold);
  font-size: clamp(56px, 12vw, 190px);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  pointer-events: none;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--white) 12%, transparent);
}
.bp-head-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin-inline: auto;
}
.bp-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--f-en);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: .24em;
  line-height: 1.8;
  color: color-mix(in srgb, var(--white) 70%, transparent);
}
/* 英字ラベルに続く和文（「社員ブログ」）は字送りを詰める */
.bp-eyebrow .jp {
  font-family: var(--f-jp);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--white) 52%, transparent);
}
.bp-dash {
  display: block;
  width: 54px;
  height: 2px;
  margin-top: 20px;
  border-radius: 2px;
  background: var(--grad);
}
.bp-title {
  margin-top: 20px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: 1.34;
  letter-spacing: .01em;
  color: var(--white);
}
.bp-metaline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 22px;
  font-family: var(--f-en);
  font-weight: var(--fw-medium);
  font-size: var(--fs-date);
  letter-spacing: .08em;
  line-height: 1.8;
  color: color-mix(in srgb, var(--white) 72%, transparent);
}
/* top.css の .bar は 64px のグラデ罫。ここでは日付と氏名の区切りなので縦罫に上書きする */
.bp-metaline .bar {
  width: 1px;
  height: 12px;
  border-radius: 0;
  background: color-mix(in srgb, var(--white) 34%, transparent);
}
.bp-metaline .who {
  font-family: var(--f-jp);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-meta);
  letter-spacing: .06em;
  color: var(--white);
}
.bp-metaline .role {
  font-family: var(--f-jp);
  font-weight: var(--fw-regular);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--white) 56%, transparent);
}
.bp-rule {
  position: relative;
  z-index: 1;
  max-width: 900px;
  height: 1px;
  margin: clamp(26px, 2.8vw, 42px) auto 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--white) 26%, transparent), transparent);
}

/* --- キービジュアル --- */
.bp-key {
  padding: clamp(24px, 2.8vw, 40px) var(--gut) 0;
  background: var(--navy-900);
}
.bp-key-inner {
  max-width: 1100px;
  margin-inline: auto;
  /* flow-root＝ここで独立したブロック整形文脈を作る。これが無いと下の
     .bp-key-photo の負のマージンが親（.bp-key は下パディング0）へ抜けて相殺され、
     「紺地の外へ画像がはみ出す」効果が消える（実測で確認）。 */
  display: flow-root;
}
.bp-key-type {
  font-family: var(--f-en);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: .24em;
  line-height: 1.9;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--white) 50%, transparent);
}
/* 本番のHTMLは「Make what<em>nobody made yet.</em>」で語間の半角スペースを持たない。
   本文テキストは1文字も変えられないので、空きはCSSの余白で作る。 */
.bp-key-type em {
  margin-left: .45em;
  font-style: italic;
  font-weight: var(--fw-semibold);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* 負のマージンで、画像の下端を次の白いブロックへ食い込ませる。
   画像の縦横比が記事ごとに違っても、またぐ量は常に --bp-overlap で一定になる。 */
.bp-key-photo {
  margin-top: clamp(16px, 1.8vw, 26px);
  margin-bottom: calc(var(--bp-overlap) * -1);
  overflow: hidden;
  border-radius: 10px;
  background: var(--navy-800);
  box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--navy-950) 85%, transparent);
}
/* 本番のキービジュアルは 4:3 の縦長（1440x1080）で、幅1100pxだと高さが825pxになり
   1画面を占有してしまう。記事ごとに縦横比が違っても1画面に収まるよう高さで頭を打たせ、
   はみ出す分は cover で切る。人物写真なので切る位置は上寄せ（顔を残す）。 */
.bp-key-photo img {
  width: 100%;
  height: auto;
  max-height: clamp(260px, 64vh, 560px);
  object-fit: cover;
  object-position: 50% 24%;
}

/* --- 本文の器 --- */
.bp-wrap {
  padding-inline: var(--gut);
  padding-top: var(--bp-overlap); /* 食い込ませた画像の下に本文が潜らないようにする */
}
/* 上の余白は .bp-wrap（画像の食い込み分）がすでに作っているので、
   ここは .page-section の既定より詰める。下は末尾CTAまでの間なので広めに取る。 */
.bp-body-section {
  padding-top: clamp(34px, 3.8vw, 64px);
  padding-bottom: clamp(56px, 6vw, 108px);
}
.bp-panel {
  max-width: 900px;
  margin-inline: auto;
}
.bp-lead {
  font-size: var(--fs-lead);
  line-height: 1.95;
  letter-spacing: .016em;
  color: var(--ink-2);
}

/* --- 目次（本番の器をそのまま使う。現在地ハイライトの JS は未移植） --- */
.bp-toc {
  margin-top: clamp(30px, 3.2vw, 48px);
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.bp-toc-ttl {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-meta);
  letter-spacing: .1em;
  color: var(--ink);
}
.bp-toc ol {
  margin: 14px 0 0;
  padding-left: 1.4em;
  list-style: decimal;
  font-size: var(--fs-body-sub);
  line-height: 1.9;
  color: var(--ink-2);
}
.bp-toc li + li { margin-top: .5em; }
.bp-toc ol > li::marker {
  color: var(--c1);
  font-family: var(--f-en);
  font-weight: var(--fw-semibold);
}
.bp-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.bp-toc a:hover { color: var(--c1); border-bottom-color: currentColor; }

/* --- 本文の節 --- */
.bp-sec { margin-top: clamp(44px, 4.6vw, 76px); }
.bp-sec-head { margin-bottom: clamp(16px, 1.8vw, 26px); }
.bp-sec-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-en);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: .22em;
  line-height: 1.8;
  color: var(--ink-3);
}
.bp-sec-no {
  font-weight: var(--fw-bold);
  font-size: var(--fs-meta);
  letter-spacing: .06em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.bp-sec-head h2 {
  margin-top: 12px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--ink);
}
/* .bp-sec-head は .bp-sec の最初の子＝上の「> * + *」の 1.4em を受けない。
   節の間隔は .bp-sec 自体の margin-top で作っている。 */

/* --- 引用（抜き文） --- */
.bp-quote {
  margin: clamp(30px, 3.2vw, 48px) 0;
  padding: 2px 0 2px clamp(18px, 2vw, 26px);
  border-left: 2px solid var(--c3);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: 1.7;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* --- 本文中の強調3種 --- */
.bp-ink { font-weight: var(--fw-bold); color: var(--ink); }
/* 下線マーカー。文字の下 38% だけを塗る＝行間を変えずに引ける */
.bp-mark {
  font-weight: var(--fw-semibold);
  color: var(--ink);
  background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--c3) 22%, transparent) 62%);
}
.bp-grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --- 著者 --- */
.bp-author {
  margin-top: clamp(48px, 5vw, 84px);
  padding-top: clamp(26px, 2.8vw, 42px);
  border-top: 1px solid var(--line);
}
.bp-author-note {
  font-size: var(--fs-eyebrow);
  line-height: 1.85;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.bp-author-card {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: 18px;
}
.bp-author-card img {
  flex: none;
  width: clamp(64px, 7vw, 88px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--paper);
}
/* .bp-author-name は日付行（紺地）でも使われているので、著者カードの中だけを指す */
.bp-author .bp-author-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-item-title);
  line-height: 1.5;
  color: var(--ink);
}
.bp-author-role {
  margin-top: 6px;
  font-size: var(--fs-note);
  line-height: 1.8;
  color: var(--ink-3);
}

/* --- 記事の足 --- */
.bp-foot {
  max-width: 900px;
  margin: clamp(38px, 4vw, 62px) auto 0;
  padding-top: clamp(26px, 2.8vw, 42px);
  border-top: 1px solid var(--line);
}


/* ---------------------------------------------------------
   7) 記事末尾のCTA（.section.cta / .btn-cta）
   本番の記事48本すべてが持つ。直後に shell.js のフッターCTA（紺）が来るので、
   ここは淡い地色にして面を続けない。
   ラベルは和文なので、top.css の .btn-grad（英字用・字送り .16em）ではなく
   和文用の字送りで組む。
   --------------------------------------------------------- */
.section.cta {
  padding: clamp(46px, 5vw, 84px) var(--gut);
  text-align: center;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.section.cta h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--ink);
}
.section.cta p {
  max-width: 44em;
  margin: 14px auto 0;
  font-size: var(--fs-lead);
  line-height: 1.9;
  letter-spacing: .016em;
  color: var(--ink-2);
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 64px;
  margin-top: clamp(24px, 2.6vw, 36px);
  padding: 0 44px;
  border-radius: 999px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-btn);
  line-height: 1.8;
  letter-spacing: .08em;
  color: var(--white);
  background: var(--grad);
  background-size: 180% 100%;
  background-position: 0 0;
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--c2) 72%, transparent);
  transition: background-position .45s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-cta::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: translate .35s var(--ease);
}
.btn-cta:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--c2) 80%, transparent);
}
.btn-cta:hover::after { translate: 4px 0; }


/* ---------------------------------------------------------
   8) 画面幅の調整
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .page-hero {
    min-height: 0;
    padding-top: calc(var(--hd-h) + 36px);
  }
  .bp-page > .breadcrumb ol { padding-top: calc(var(--hd-h) + 26px); }
  .bp-bgtype { top: 2%; right: calc(var(--gut) * -.2); }
}
@media (max-width: 560px) {
  .btn-cta {
    height: 56px;
    padding-inline: 26px;
    max-width: 100%;
  }
  .bp-author-card { align-items: flex-start; }
  /* 飾りの大きな英字は、狭い幅だと本文の裏で目立ちすぎるので出さない */
  .bp-bgtype { display: none; }
}

/* 動きを減らす設定では、ホバーの移動・浮きを止める */
@media (prefers-reduced-motion: reduce) {
  .btn-cta:hover { transform: none; }
  .btn-cta:hover::after,
  .more-link:hover::before,
  .bp-back:hover::before { translate: none; }
}

/* --- 記事の外枠（.news-article そのもの）
   本番は白いカード（背景＋角丸＋影＋内側の余白）で本文を囲っていた。
   新デザインは「紙の上に本文を直に置く」組みなので、囲いは持たせず
   幅と上下の余白だけを受け持つ。クラス名は本番のまま＝44本の記事に
   そのまま当たる。 --- */
.news-article { display: block; max-width: 100%; margin-inline: auto; padding-block: clamp(8px, 1vw, 16px); }

/* パンくずのリンクも 24px の当たり判定を確保する（.crumbs と同じ扱い） */
.breadcrumb a { display: inline-block; min-height: 24px; }   /* inline-flex は中の要素ごとに分かれて崩れる */