/* ==========================================================================
   JCP サポーター TOP page
   Figma: JCPサイト / TOP (node 1:5195)
   ========================================================================== */

:root {
  /* --- 配色(Figmaのスタイルより) --- */
  --color-text-main: #131314;
  --color-white: #ffffff;
  --color-gray: #999999;
  --color-bg: #fafafa;
  --color-bg-main: #fafafa;
  --color-green: #83e783; /* Figma dev-mode確認(SVG実データ): fill="#83E783"。
    直前に一度#58ea76へ変更したが、それは「VS Codeで開く」のCSS変数
    フォールバック値(var(--JCP-Green, #58EA76))から拾ったもので、実際に
    塗られている色とは食い違っていた。SVGコード直書き出しの方が信頼でき
    るため、こちらの値(=元の値)に差し戻し(2026-09-08)。 */
  --color-primary: #ff83a2;
  --color-secondary: #8f66f6;
  --color-link: #e31649;
  --color-pink: #ffd2d8;
  --color-bg-sub: #e1e8fe; /* Figma dev-mode確認(Frame146, 2026-09-09): var(--JCP-Background-Sub, #E1E8FE)。旧#e2e8fcは推定値 */
  --color-text-sub: #5e5d63;
  --color-donation: #eb4f41; /* Figma dev-mode確認: JCP/Donation (旧#ce3224は推定値) */
  --color-donation-text: #ce3224; /* Figmaスポイトでキャンバス上のボタンを直接吸い取って確認(2026-09-09): JCP/Text-donation。Fillパネルの表示値(#E0150F)やスタイル詳細の表示値(色々出たため要注意)とも食い違ったため、実描画ピクセルの値を採用。--color-donationとは別トークンで、「寄付をする」ボタンと「毎月の寄付金額」ラベルに使用 */
  --color-text-link: #f80044; /* Figma dev-mode確認(Registration > Frame93, 2026-09-10): JCP/Text-Link。index.html/donation.html両方のRegistrationコンポーネントインスタンスで同一値を確認。--color-link(#E31649)とは別トークンで、「LINEでJCPサポーターに登録する」の文字色に使用 */

  /* --- タイポグラフィ --- */
  /* 「Noto Sans JP」を先頭に — index.htmlの<head>でGoogle Fonts経由で
     実際に読み込んでいるWebフォント(400/500/700)。直後の「Noto Sans CJK JP」は、
     万一その端末にローカルで同名フォントが入っていた場合用の無害な
     フォールバック名として残してあるだけ(同じ字形に対するFigma側の
     呼び方)。上のWebフォントが読み込まれた後はこちらが実際に使われる
     ことはない。 */
  --font-base: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-number: "Futura", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;

  /* --- レイアウト --- */
  --content-width: 22.5625rem; /* 361px、Figmaフレームのコンテンツカラムと一致 */
  --gutter: 1rem;              /* 393pxフレームの左右パディング16px */

  /* PC 3-pane layout (.page-layout below).
     2026-09-30 update — client re-confirmed against Figma node 1:5129
     (Main_TOP: width 500px, left 390px on the 1280px-wide "PC版" frame,
     i.e. exactly (1280-500)/2 = 390px per side): page-main is the FIXED
     column, page-nav/page-share are the FLEXIBLE ones (their solid blue
     background reaches the true viewport edge on wide screens, instead
     of stopping at a fixed 288px like before). Replaces the old
     --pc-grid-gap-based column gap + the bleed calc() hacks that used
     to cross it (see .page-layout's own comment below for why those are
     gone now). */
  --page-main-width: 31.25rem; /* 500px — FigmaのMain_TOPフレームより */
  --side-content-width: 14.875rem; /* 238px — Figmaのpage-nav__actionsボタン/page-nav__list幅、同一node */
  --side-inset: 1rem; /* 16px — page-mainの端からnav/shareのコンテンツまでの間隔(Figma実測は
   左14px/右16pxだったが、サイト共通の8pxグリッドに合わせて左右対称に丸めた) */
}

/* ==========================================================================
   8pxスペーシンググリッド — 2026-08-27対応
   クライアント指定: ブロック間のmargin/padding/gapはサイト全体で8px単位
   (8/16/24/32/40/48/56/64...)に揃えるべきで、12pxや20pxのような値は
   本来出てこないはず。スクリーンショットからの目測で実装した箇所が
   多く、実際にはそこから外れた値が紛れ込んでいた(このセッションの間、
   Figma MCPアクセスがレート制限にかかり続けていたため、箇所ごとの
   正確な値を個別に検証できない状態だった)。
   以下「8px grid:」と注記した箇所はすべて、実際のFigmaの値で確認した
   わけではなく、機械的に最も近い8pxの倍数へ丸めただけ(中間値は0から
   遠い方へ丸め)— これはクライアントの指示に基づく暫定対応であり、
   実際のデザインと突き合わせて確認のうえ、フィードバックに応じて
   修正されるべきもの。このブロック間隔のルールに含まれないコンポーネント
   内部の値(例: .btn--large自身の12px/24pxパディングは、クライアントの
   赤入れで正しいと確認済み)は、意図的にここでは触れていない。
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  padding-top: 4.875rem; /* 固定ヘッダーの下に隠れないようにするため */
  background: var(--color-bg);
  color: var(--color-text-main);
  font-family: var(--font-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 2026-10-03: height: autoが無かったため、本文中にwidth/height属性付き
   (例: width="1040" height="1040")で貼られた画像が、max-width: 100%で
   横幅だけ縮小され、高さはHTML属性の値のまま保たれて縦に間延びして
   見える不具合があった(ニュースレター記事で発覚)。height: autoを追加し、
   どんなwidth/height属性が付いていても縦横比を保ったまま縮小されるように
   修正。 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, p {
  margin: 0;
}

.contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem; /* 80px */
  padding: 0 var(--gutter);
  margin-top: 5rem; /* hero直後の余白80px、Figmaの「Contents」上オフセットのリズムと一致 */
}

.section {
  container-type: inline-size;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==========================================================================
   ボタン / リンク
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* クライアント指定: アイコンとラベルの間隔8px(旧4px) */
  border-radius: 6rem; /* 96px、完全な丸みのピル形状 */
  font-weight: 700;
  line-height: 1; /* Figma dev-mode確認(Button/Lage_Strong, 2026-09-09): 100% */
  text-align: center;
  white-space: nowrap;
}

/* 2026-10-02追記: 寄付ページのマンスリー申込フォーム送信ボタンで、
   初めて<a>ではなく実際の<button type="submit">に.btnクラスを使う
   ことになったため、ブラウザ既定のbutton外観(枠線・背景・フォント等)
   を打ち消す最小限のリセット。背景色・枠線自体は.btn--donate等の
   個別クラス側で指定済みなので、ここではUA既定値の除去のみ行う。 */
button.btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

.btn--large {
  width: 100%;
  height: 3.5rem; /* 56px */
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem; /* 18px */
  letter-spacing: 0.05em;
}

.btn--small {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem; /* 14px */
}

.btn--strong {
  background: var(--color-primary);
  color: var(--color-text-main);
  border: 0.125rem solid var(--color-text-main);
}

/* Hover(PC)/Tap(Mobile): サイト内で唯一、塗りつぶしピンクのCTAなのに
   インタラクション状態が一切無かったもの — クライアントから「反応する
   ボタン/リンクと反応しないものがある」と指摘があった件の1つ。新しい
   カラートークンを選定/確認する必要が無いよう、下の.btn--outlineが
   使っている薄い色のウォッシュパターンではなく、既存の塗りを単純に
   暗くする方式にした。あのウォッシュは白背景を枠線の色へ「薄く染める」
   ためのものなので、すでに塗りつぶされたピンクの上では「薄くする」
   方向の見え方自体が成立しないため。 */
.btn--strong:hover,
.btn--strong:active {
  filter: brightness(0.92);
}

.btn--outline {
  background: var(--color-white);
  color: var(--color-link);
  border: 0.125rem solid var(--color-primary);
}

/* Hover(PC)/Select(Mobile)仕様: 枠線とテキストはそのままで、塗りだけが
   枠線の色のごく薄いティントに染まる。 */
.btn--outline:hover,
.btn--outline:active {
  background: #feedf1;
}

.btn.btn--outline.btn--small,
a.btn[class*="btn--outline"].btn--small {
  border-width: 0.0625rem;
}

/* Figma Jdonation/Button/floating(ヘッダーの「寄付する」ボタン): 白地+
   JCP/Donation(#EB4F41)の枠・文字 — .btn--outlineのピンク(--color-primary
   /--color-link)とは別配色なので独立したモディファイアにした。2px枠は
   .btn--small用の1px上書き(上のルール)を意図的に受けない別クラス名。 */
.btn--donate-outline {
  background: var(--color-white);
  color: var(--color-donation);
  border: 0.125rem solid var(--color-donation);
}

.btn--donate-outline:hover,
.btn--donate-outline:active {
  background: #fdeeec;
}

/* ヘッダーの「JCPサポーターに登録する / ログイン」ボタン専用の組み合わせ
   (btn--strong + btn--small)。他のbtn--strongはデフォルトの2px枠のままで
   問題ないので、ここだけ1pxに絞る(クライアント指定: ボーダー1px)。 */
.btn.btn--strong.btn--small,
a.btn[class*="btn--strong"].btn--small {
  border-width: 0.0625rem;
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 0.0625rem solid var(--color-link);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1; /* Figma dev-mode確認(Link/Text, 2026-09-09): 100% */
  align-self: flex-end;
  transition: opacity 0.15s ease;
}

/* これもインタラクション状態が一切無かった箇所。塗りつぶしボタンでは
   ないため、.btn--outlineと同じ背景ウォッシュ方式は単なるインライン
   テキストにはそぐわない — 要素全体にopacityをかけることで、テキスト・
   下線・矢印アイコン(下の.link-more .icon-more)をまとめて一度に暗く
   でき、パーツごとに個別ルールを書く必要がない。 */
.link-more:hover,
.link-more:active {
  opacity: 0.65;
}

.link-more--center {
  align-self: center;
}

/* .icon-moreはcurrentColorで自分の色を決めるため、そのままでは継承した
   テキスト色をそのまま拾ってしまう — .link-more内では周囲の本文色
   (濃色)になり、すぐ隣の下線は明示的に--color-link(ピンク)だった
   ため、見た目で色が揃っていなかった。.link-more自身の色には触れず、
   矢印だけ--color-linkに固定することで、リンクのテキストではなく矢印
   だけを下線の色に合わせている。 */
.link-more .icon-more {
  color: var(--color-link);
}

.icon-more {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEgOGgxM005IDNsNSA1LTUgNSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") center / contain no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEgOGgxM005IDNsNSA1LTUgNSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") center / contain no-repeat;
}

.icon-sns,
.icon-link {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: currentColor;
}

.icon-sns {
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuOCIvPjxjaXJjbGUgY3g9IjE3LjUiIGN5PSI2LjUiIHI9IjEuMiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=") center / contain no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjgiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuOCIvPjxjaXJjbGUgY3g9IjE3LjUiIGN5PSI2LjUiIHI9IjEuMiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=") center / contain no-repeat;
}

.icon-link {
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTYgM0gzYTEgMSAwIDAgMC0xIDF2OWExIDEgMCAwIDAgMSAxaDlhMSAxIDAgMCAwIDEtMXYtM005IDJoNXY1TTEzLjUgMi41TDcgOSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjMiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") center / contain no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTYgM0gzYTEgMSAwIDAgMC0xIDF2OWExIDEgMCAwIDAgMSAxaDlhMSAxIDAgMCAwIDEtMXYtM005IDJoNXY1TTEzLjUgMi41TDcgOSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjMiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") center / contain no-repeat;
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.875rem; /* 78px */
  padding: 0 var(--gutter);
  background: var(--color-bg);
}

/* Figma Header_Menu(開いた状態専用のヘッダー): 下に1px #999999の線。
   閉じている通常状態には無い — is-menu-openの時だけ表示。 */
.site-header.is-menu-open {
  border-bottom: 0.0625rem solid #999999;
}

/* 2026-10-03: クライアント要望で、従来1つだった「JCPサポーターに登録
   する / ログイン」ボタンを「新規登録する」(btn--strong塗りつぶし)/
   「ログインする」(btn--outline枠線)の2ボタンに分割。header-cta--default
   クラスは下の開閉トグル(.site-header.is-menu-open .header-cta--default
   { display:none })に使うため、HTML側では2ボタンをラップする
   .header-cta-groupに付け替えてあり、このグループごと開閉で表示/非表示
   が切り替わる。ハンバーガーとの横並びスペースが狭いSPヘッダー向けに、
   .btn--smallの標準padding(縦12px/横24px)よりさらに一回り詰めている。 */
.header-cta-group {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
}

.header-cta-group .btn {
  padding: 0.625rem 1rem; /* 10px/16px */
  font-size: 0.8125rem; /* 13px */
}

/* Figma "メニュー" frame: while the off-canvas panel is open, the
   header's left-side CTA swaps from the 2-button 「新規登録する /
   ログインする」group to a plain outline 「寄付する」button — same
   .btn--small box, just the closed/open variant. script.js only ever
   toggles .site-header's is-menu-open class; which button is visible
   is entirely this CSS pair, no text ever gets rewritten by JS. */
.header-cta--menu-open {
  display: none;
  /* Figma Jdonation/Button/floating: 左右32px。.btn--smallの標準
     padding(左右24px)より広いので、このボタンだけ個別に上書き。 */
  padding-left: 2rem;
  padding-right: 2rem;
}

.site-header.is-menu-open .header-cta--default {
  display: none;
}

.site-header.is-menu-open .header-cta--menu-open {
  display: inline-flex;
}

.menu-toggle {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4375rem;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 101;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 0.125rem;
  border-radius: 0.5rem;
  background: var(--color-link);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* SPナビが開いている間、ハンバーガー→Xに変化させる処理。
   2026-09-30修正(クライアント指摘:「Xボタンの中心がズレて見える」):
   ここのtranslateYは3本のバー間のflexの`gap`値(0.4375rem/7px)を
   そのまま流用していたが、これはbar1/3をbar2の中心に合わせるために
   実際に必要な距離とは違う。gap:0.4375rem、各バーheight:0.125remの
   条件下では、.menu-toggleのflexカラム(justify-content:center)は
   bar1の中心をbar2の中心から9px上(バー1本分の高さ+gap1つ分:
   0.125rem + 0.4375rem = 0.5625rem)、bar3は9px下に配置する — 7pxでは
   ない。7pxのままだと、回転した2本のバーはそれぞれbar2の中心から2pxずれた
   位置で交差してしまい(互いに4px離れる)、これがまさに「中心がズレた
   X」の原因だった — 実際の描画結果のバウンディングボックスを計測して
   確認済み。0.5625remにすることで、2本の斜線はちょうどbar2の
   (回転前の)中心で交差するようになり、閉じている時のハンバーガー3本の
   バーと同じ軸に揃う。 */
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(0.5625rem) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-0.5625rem) rotate(-45deg);
}

/* --- グローバルナビ: SPは全幅オフキャンバスパネル、PCはヘッダー内インライン --- */

.global-nav {
  position: fixed;
  top: 4.875rem;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(100vh - 4.875rem); /* top/right/bottom/leftだけに頼らない、念のための明示的なheight指定 */
  background: var(--color-bg); /* Figma dev-mode確認(2026-09-30): メニューフレーム = JCP/Background/Main #FAFAFA、白(--color-white)ではない */
  padding: 1.5rem var(--gutter) 0; /* Figma: Frame175 top:96px − ヘッダー高さ72px = 24px。下paddingは無し — .registration/.global-nav__share側で帯を端まで塗るため */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 0.5rem 1.5rem rgba(19, 19, 20, 0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 99;
}

.global-nav.is-open {
  transform: translateX(0);
}

/* Figma Frame175: 2つの項目グループ+間の区切り線を、全階層共通の
   24pxギャップ1本で並べる(Frame118/Frame119内部の項目間隔も同じ値 —
   下記参照)。旧実装はここに無く、各項目自体にpadding+下線を持たせて
   間隔を作っていた。 */
.global-nav__list {
  display: flex;
  flex-direction: column;
  /* 2026-10-02: 一時的にalign-items:flex-end(右寄せ)にしていたが、
    「右寄せにしてほしいのはハンバーガーメニューのアイコン自体で、
    開いたメニュー内の項目(トップ/お知らせ/...)は従来通り左寄せで
    良い」とクライアントより最終確認があったため撤回し、デフォルトの
    stretchに戻す(=各項目はフル幅のまま、テキストは左詰め)。
    ハンバーガーアイコン自体の右寄せは.site-header側の問題
    (justify-content:space-betweenの子要素がdonation.htmlだけ1個に
    なってしまうバグ)だったため、そちらを個別に修正済み。 */
  gap: 1.5rem;
}

/* Figma Frame118 / Frame119: グループ内の項目もgap24pxで並ぶだけで、
   項目ごとの下線は無い。区切り線はグループ間に1本(.global-nav__divider)
   だけ — 旧実装は逆に「項目ごとに下線、グループの概念なし」だった。 */
.global-nav__group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Figma Rectangle121(Frame175内、Frame118とFrame119の間の1本のみ)。
   高さ2px・角丸8px・色#FFD2D8 — Dev Mode確認値。旧実装の
   `border-bottom: #ececec`(項目ごと)とは別物。 */
.global-nav__divider {
  height: 0.125rem;
  border-radius: 0.5rem;
  background: #ffd2d8;
}

/* Figma Frame112〜117: テキストと矢印はgap8pxで隣接するだけ(行の
   両端に離す space-between ではない)。 */
.global-nav__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.05em; /* Figma仕様: 5% */
  color: var(--color-text-main);
  transition: color 0.15s ease;
}

.global-nav__item:hover,
.global-nav__item:active {
  color: var(--color-link);
}

/* Figma Group61: 全項目で常に#E31649(JCP/Text-Link寄りの赤)。テキスト
   側のcolorから独立させて固定 — hoverでテキストが同じ色になっても
   矢印はそもそも変わらない、という状態を明示的に表す。旧実装の
   `color: var(--color-gray)` は誤り。 */
.global-nav__item .icon-more {
  flex-shrink: 0;
  color: var(--color-link);
}

/* 2026-10-02: 「JCPサポーターとは？」は元々Figma Frame119で「リンクでは
   なく見出し(矢印無し、href無し、下の3項目選挙ボランティア/SNSなどでの
   発信/地域での活動の構造上の親)」という扱いの.global-nav__group-title
   だったが、PC版(.page-nav__list)同様にindex.html#benefitsTitleへの
   ページ内リンクにする指示を受け、<a class="global-nav__item">に統一。
   これにより.global-nav__group-title専用のスタイルは不要になったため削除
   (このクラス自体、現在はどのHTMLからも参照されていない)。 */

/* Figma: 「Registration」と「Footer(シェアブロック)」は、同じ紫
   (#8F66F6)で継ぎ目なく1枚のパネルに見える — 実際に2つのFigmaフレーム
   だが、色が同一かつ隙間が無いためつながって見える構造。.registration
   側は既存のカーブ(::before の巨大楕円)をそのまま使い、ここでは直後に
   隙間ゼロで同じ紫を敷くだけで再現している。 */
.global-nav .registration {
  margin-top: 2rem; /* 2026-10-02: クライアント指示で32pxに変更(旧56pxはFigma実測値
    だったが、「上のテキストとセットなので狭めてよい」とのフィードバックで調整。
    Dev Mode上のpadding16px+margin16px=32pxという読み解きで確定)。 */
}

.global-nav__share {
  width: calc(100% + 2rem);
  margin: 0 -1rem;
  padding: 0 1rem 3.5rem; /* 上0(.registrationの下paddingに乗せる形/下56px=Figma Footerのpadding-bottom実測値) */
  background: var(--color-secondary);
  text-align: center;
}

/* Figma Footerインスタンス実測: タイトル→リード間は16px(共通の
   .site-footer__lead は8pxだが、ここだけ異なる)。ページ本体の
   .site-footer には影響させないよう、この文脈だけに絞って上書き。 */
.global-nav__share .site-footer__lead {
  margin-top: 1rem;
}

/* 2026-09-30の訂正: 上の「白パッチに見える」判断は誤りだった。Figma
   側を選択状態なしで確認したところ、「メールアドレスで仮登録する」は
   Registration内の白いQRカードと同様、単体でも白背景を持つのが正しい
   デザイン — 一度ここを透過にする上書きを入れたが撤回する。紫と地続き
   なのは.registration自体の下端(::after、上のFooterコメント参照)と
   .global-nav__shareとの継ぎ目だけで、このリンク自体は基本スタイル
   (.registration__sub、白背景)のままでよい。 */

/* ==========================================================================
   Hero — スクロール連動の演出
   背の高いスペーサー(.hero-pin)が、ビューポート高さ分のstickyなステージ
   (.hero-pin__sticky)を保持している。JS側がそのスペーサー内のスクロール
   位置を、全体の0→1の--hero-progressと、スクロールの4分の1区間ごとに
   イーズ済みの0→1の値(--hero-blur-progress/-body-progress/
   -closer-progress/-logo-progress — script.jsのHERO_QUARTERSコメント参照)
   に変換する。ぼかし/拡大/色かぶりおよび下の各テキストブロックは、独自に
   スクロールを監視するのではなく、自分に対応するこれらの値をそのまま読む。

   この4つの値はそれぞれ、自分の4分の1区間の「前半だけ」で変化し、後半は
   1のまま静止する — サッと切り替わって一旦止まる、を4回繰り返す。これは
   スクロール全体にわたって連続的に変化させるのではなく、クライアントから
   送られたFigmaプロトタイプの参考録画に合わせたもの。その裏付けとなる
   計測内容はscript.jsのHERO_QUARTERSコメント参照。
   ========================================================================== */

.hero-pin {
  position: relative;
  height: 220vh; /* この演出を駆動するスクロール距離 */
  --hero-progress: 0;
  /* スクロールの4分の1区間ごとにイーズ済みの0→1の値を1つ。各値はその
     区間の途中で自分のトランジションが終わった時点から1のまま静止する
     — それぞれが何を駆動していて、どの録画を基準にタイミングを決めたかは
     script.jsのHERO_QUARTERSコメント参照。 */
  --hero-blur-progress: 0;
  --hero-body-progress: 0;
  --hero-closer-progress: 0;
  --hero-logo-progress: 0;
}

.hero-pin__sticky {
  position: sticky;
  top: 4.875rem; /* 固定ヘッダーの真下にピン留め、ヘッダーの下に潜り込ませない */
  height: calc(100vh - 4.875rem);
  overflow: hidden;
}

.hero {
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: 100%;
}

.hero__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Client walked through this step by step with an annotated diagram
     (02→03 in their numbering) and corrected several things we'd
     guessed wrong before:
       - Blur ceiling is Figma's own "ぼかし12" layer-blur value (12),
         not the 28px estimated earlier from a reference screenshot.
       - The illustration does NOT scale/zoom at all — same size
         throughout. (The old scale-up was only ever there to keep a
         blurred edge from clipping into a hard ring against
         overflow:hidden — at 28px that mattered, at 12px it's subtle
         enough to leave out per the client's explicit "no scale".)
       - No gradient of any kind on the illustration.
       - It's not blur alone: the illustration also fades toward
         transparent, "sinking" into the page's white background as
         you scroll — see the opacity rule below.
     All of this happens once, during the 02→03 step, then — per the
     client's own diagram note ("以下、背景画像の扱いは変わらない") —
     stays fixed while the text blocks reveal one by one afterward.
     That's exactly what --hero-blur-progress already does: it ramps
     during the first half of the first quarter of the scroll (see
     HERO_QUARTERS in script.js) and holds flat at 1 for everything
     after. */
  filter: blur(calc(var(--hero-blur-progress) * 12px));
  transition: filter 0.05s linear, opacity 0.05s linear;

  /* 登場演出: ページ読み込み時、不透明度いきなり全開ではなく透明から
     フェードインさせる — heroPhotoFadeInアニメーション自身の0→1の
     キーフレームが、実行中はこのベース値をどんな値に設定していても
     完全に上書きする。script.js側は、このアニメーションが実際に終わる
     までスクロール連動のぼかし(上記)の適用を待ち、かつその時点で
     アニメーションを解除する(style.animation = 'none'をセット)ことで、
     終了後も`opacity`を固定し続ける状態を止め、以降は下のcalc()ルール
     に制御を渡す — 該当の'animationend'リスナー参照。結果として、
     訪問者がフェード途中でスクロールを始めても、常に「100%までフェード
     してからスクロール制御に切り替わる」という挙動になる。
     「白に沈んでいく」見え方のうち、不透明度とぼかしそれぞれがどれだけ
     寄与しているかは厳密な仕様値ではない(クライアント自身も実測では
     なく見た目からの推測と明言)— 0.55は参考画像におおよそ近づける
     ための目安値で、薄すぎる/薄さが足りない場合は調整すること。 */
  opacity: calc(1 - var(--hero-blur-progress) * 0.55);
  animation: heroPhotoFadeIn 3.2s ease-out forwards;
}

@keyframes heroPhotoFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 写真の上に乗るテキストレイアウト用の箱だけで、自分自身の背景は
   持たない。「白に沈んでいく」見た目は、クライアントの図解によれば
   イラスト自身の不透明度フェード(上の.hero__bg img参照)だけによる
   ものであり、その上に重ねる別のウォッシュ層ではない — そのため以前は
   ここに`background: rgba(...)`のランプを持たせていたが、今は無くした:
   写真自体がページの白背景に向かって透明にフェードしていく以上、ここに
   さらに白いウォッシュを重ねると同じ効果が二重にかかり、意図より
   速く/強く白く沈んで見えてしまう。 */
.hero__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 1.5rem; /* 8pxグリッド: 20px→24px */
  text-align: center;
}

/* パネル自体は画面端まで伸びるようになったが、テキストは読みやすい
   幅のまま留める — フル幅を使っていいのはロゴだけ。 */
.hero__text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--content-width); /* 361px、Figmaのテキストボックスと完全に一致 */
}

/* 出現タイミングは行単位ではなく「ブロック単位」 — Figmaプロトタイプ
   自身のフレーム(TOP_3→TOP_4で本文段落全体が1行ずつではなく一緒に
   現れる)で確認済みのため、あるブロック内の.reveal-lineはすべて、
   個別の区間を持つのではなく、そのブロック共通のイーズ済み進捗変数を
   そのまま継承する。.reveal-line自体は共通の見た目の仕組みだけを
   設定し、それを駆動する変数は下の各ブロック単位のセレクタ側が渡す。 */
.reveal-line {
  display: block;
  opacity: var(--hero-reveal-progress, 0);
  transform: translateY(calc((1 - var(--hero-reveal-progress, 0)) * 0.75rem));
}

.hero__headline {
  width: 100%;
  font-weight: 700;
  font-size: clamp(1.875rem, 10.5cqw, 2.75rem);
  line-height: 1.4;
  /* 見出しはぼかし/色かぶりの後ではなく、同時に動く — どちらも同じ
     最初の4分の1区間の変数を読んでいる(上のHERO_QUARTERS参照)。 */
  --hero-reveal-progress: var(--hero-blur-progress);
  /* Used to also carry a soft white text-shadow glow here (and on
     .hero__body / .hero__closer below) for legibility over the photo
     — client flagged it as unwanted "white haze" around the text
     ("文字周りが白くなってしまう") and asked for it gone, so removed
     from all three. */
}

.hero__body {
  font-size: 1rem; /* 16px、Figma通り */
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.64; /* 164%、Figma通り */
  /* 2番目の4分の1区間。確認済みのフレーム内容の通り、1ブロックとして
     まとめて出現 — ここの各行は全て同じ変数を共有し、行ごとの
     ずらしは無し。 */
  --hero-reveal-progress: var(--hero-body-progress);
}

.reveal-line--gap {
  margin-top: 1rem;
}

.hero__closer {
  font-weight: 700;
  font-size: clamp(1.375rem, 8cqw, 2rem);
  line-height: 1.4;
  white-space: nowrap;
  /* 3番目の4分の1区間。 */
  --hero-reveal-progress: var(--hero-closer-progress);
}

.hero__logo {
  display: flex;
  justify-content: center;
  width: 100%;
  /* 4番目の4分の1区間。 */
  --hero-reveal-progress: var(--hero-logo-progress);
}

/* 大画面向け: Figma仕様本来のインセットフレーム(写真がビューポートの
   端に接しない)に戻す — PCではこの見た目で問題ないことを確認済み。 */
@media (min-width: 48rem) {
  .hero__bg {
    top: 0.5rem;
    right: 1rem;
    bottom: 0;
    left: 1rem;
    border-radius: 1rem;
  }

  .hero__panel {
    top: 0.5rem;
    right: 1rem;
    bottom: 0;
    left: 1rem;
    border-radius: 1rem; /* .hero__bgのradiusと必ず一致させること。ズレると、写真の丸角からこちらの角ばった角がはみ出して見える */
  }
}

/* No-JS / reduced-motion時のフォールバック: 全て表示し、ピン留め演出はスキップ */
.no-js .hero-pin,
.reduced-motion .hero-pin {
  height: auto;
}

.no-js .hero-pin__sticky,
.reduced-motion .hero-pin__sticky {
  position: relative;
  height: auto;
}

.no-js .hero__bg img,
.reduced-motion .hero__bg img {
  filter: none;
  transform: none;
  opacity: 1;
  animation: none;
}

.no-js .hero__panel,
.reduced-motion .hero__panel {
  background: rgba(250, 250, 250, 0.85);
}

.no-js .reveal-line,
.reduced-motion .reveal-line {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   セクション見出し
   ========================================================================== */

.section-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 2rem;
}

.section-title--center {
  align-items: center;
  gap: 1rem; /* 8pxグリッド: 12px→16px */
  text-align: center;
}

.section-title__main {
  font-size: clamp(1.375rem, 7cqw, 2rem); /* shrinks on narrow screens so long spans like "日本共産党を支えます！" stay on one line */
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  width: 100%;
}

.section-title__main span {
  display: block;
}

.section-title__bar {
  position: relative;
  width: 100%;
  height: 0.3125rem; /* 5px */
}

.section-title__bar::before,
.section-title__bar::after {
  content: "";
  position: absolute;
  top: 0;
  width: 52.1%; /* Figma dev-mode確認(SVG実データ、235px中122.438px=52.1%)、一致 */
  height: 100%;
  border-radius: 1.5rem; /* Figma: rx=2.5(高さ5pxに対して常にフルピル型になるため実質一致) */
}

.section-title__bar::before {
  left: 0;
  background: var(--color-green);
}

.section-title__bar::after {
  right: 0;
  background: var(--color-primary);
}

.section-title__sub {
  font-size: clamp(1.125rem, 6cqw, 1.5rem); /* 狭い画面では縮小し、各span行が2行に折り返さないようにする */
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}

.section-title__sub span {
  display: block;
}

.section-title__rule {
  width: 100%;
  max-width: 21.5rem; /* 344px */
  height: 0.1875rem;
  border-radius: 0.1875rem;
  background: var(--color-primary);
}

.section-title__rule--short {
  max-width: 12.625rem; /* 202px */
}

/* ==========================================================================
   カード一覧(お知らせ / ゆる部アーカイブ)
   ========================================================================== */

.card-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

/* 2026-10-03: TOPページ お知らせセクションの「もっと見る」上の余白が
   詰まって見えるとクライアント指摘。.sectionにはgapが無く、.card-list
   直後に.link-moreがそのまま並ぶ構造だったため、ここだけ余白を追加。
   .newsはTOPページのお知らせセクション専用クラスなので、他ページの
   .link-more(donation.html/volunteer.html/sns.html/ゆる部一覧など)
   には影響しない。 */
.news .link-more {
  margin-top: 1.5rem;
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0.5rem;
  border-radius: 0.25rem;
}

.news-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.0625rem solid var(--color-gray);
}

.news-card__date {
  font-size: 0.875rem;
  color: var(--color-text-sub);
}

.tag {
  padding: 0.25rem 1rem; /* 8pxグリッド: 12px→16px(縦方向の4pxは微小値のためそのまま) */
  border-radius: 0.125rem;
  background: var(--color-pink);
  font-size: 0.75rem;
}

.news-card__title {
  font-weight: 700;
  font-size: 1rem;
}

.news-card__title a {
  display: block;
}

.news-card__title a:hover,
.news-card__title a:active {
  color: var(--color-link);
}

.yurube .news-card .news-card__date {
  padding-bottom: 0.5rem;
  border-bottom: 0.0625rem solid var(--color-gray);
  width: 100%;
  color: var(--color-link);
  font-weight: 700;
}

.link-more.yurube__more {
  margin-top: 0;
}

/* ==========================================================================
   寄付セクション
   ========================================================================== */

.donation {
  background: var(--color-bg-sub);
  border-radius: 4.5rem; /* 72px */
  padding: 2.5rem 1.5rem 2rem;
  gap: 1rem;
}

/* Figma仕様: 見出し+区切りバーは左揃え(他の箇所の中央揃えのセクション
   見出しとは異なる)で、バー自体もセクション幅いっぱいには伸びない。 */
/* ここでは見出し+区切りバーは中央揃え(Figmaで確認済み — 以前の
   左揃えという読み取りは誤りだった)。セクション標準のmargin-bottom
   (2rem)のままだと、白いカードのラッパーを外した後はイラストまでの
   余白が広すぎて見えたため、寄付セクションだけこのより小さい値に
   詰めている。 */
.donation__title {
  align-items: center;
  margin-bottom: 0;
}

.donation__title .section-title__bar {
  width: 70%;
}

/* ここには白いカードは無い — イラストと説明文は、Figma通りセクション
   自体のラベンダー背景の上に直接乗る。 */
.donation-card__illust {
  width: 100%;
  margin-top: 1rem; /* Figma dev-mode確認: 見出し→イラスト32px(セクションの
    gap:1rem(16px)と合わせてnet32px。旧-1remは推定値で、実際にはnetが
    0pxになってしまっていた、2026-09-07)。 */
  display: flex;
  justify-content: center;
}

.donation-card__illust img {
  display: block; /* インラインの<img>がデフォルトで作る数pxのベースライン分の隙間を消す */
  max-width: 19.5rem;
}

.donation-card__text {
  width: 100%;
  /* Figma dev-mode確認(2026-09-07): イラスト→本文は16px。セクションの
     gap:1remで既に16px確保できているため、この要素自体の追加marginは
     不要(0)。旧1.5remはスクショ実測による推定値で、netが40pxまで
     開いてしまっていた。 */
  margin-top: 0;
  font-size: 1rem;
  font-weight: 500; /* Figma: Medium(700/boldだったのを修正) */
  letter-spacing: 0.03em;
  line-height: 1.6;
  text-align: left;
}

.donation .btn--large {
  margin-top: 1rem; /* Figma dev-mode確認: 本文→ボタン32px(セクションのgap
    1rem(16px)と合わせてnet32px。旧0.5remだとnetが24pxだった、2026-09-07) */
}

.donation__note {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500; /* Figma: Medium(未指定→ブラウザのデフォルト/regularだったのを修正) */
  letter-spacing: 0.03em;
}

.donation .link-more--center {
  margin-top: -0.5rem;
}

/* ==========================================================================
   Benefits ("JCPサポーターになることで")
   ========================================================================== */

.benefits__intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 500; /* Figma: Medium(未指定→ブラウザのデフォルト/regularだったのを修正) */
  letter-spacing: 0.03em;
  margin-bottom: 2rem; /* Figma dev-mode確認: 本文→特典リスト32px(旧3.5rem/
    56pxは推定値、2026-09-07) */
}

.benefit-list {
  display: flex;
  flex-direction: column;
  gap: 3.5rem; /* 56px */
  width: 100%;
}

.benefit-item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 8pxグリッド: 20px→24px — これは以前クライアントの赤入れで確認済みの
                  体験談→ボタン間の間隔ともちょうど一致するため、共通の
                  値自体が24pxになった今は、その組み合わせ専用の
                  上書きルールはもう不要。 */
}

.benefit-item__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-pink);
  border-radius: 0.5rem;
  padding: 1px; /* クライアント指定: 0.5remだったのを、ほぼ隙間無しにしたいとのこと */
}

.benefit-item__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto; /* 固定3.375remだったのを、クライアントの希望で数字に沿う幅に変更 */
  padding: 8px; /* クライアント指定。widthをautoにしたため追加 */
  height: 4.6875rem; /* 75px */
  border: 0.125rem solid var(--color-pink);
  border-radius: 0.5rem;
  background: var(--color-white);
  font-family: var(--font-number);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--color-donation);
  letter-spacing: 0.05em;
}

.benefit-item__title p {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.4;
}

.benefit-item__image {
  /* Figma dev-mode確認(2026-09-07): タイトル→画像は16px。.benefit-itemの
     共通gap(1.5rem/24px)から8px分だけ詰める。画像→本文/本文→ボタンは
     このgapのままで別途調整(下記.benefit-item__voice参照)。 */
  margin-top: -0.5rem;
}

.benefit-item__image img {
  width: 100%;
  border-radius: 0.5rem;
}

.benefit-item__voice {
  /* Figma dev-mode確認: 画像→本文は8px。共通gap(24px)から16px分詰める。
     本文→ボタンは共通gapのままの24pxで正しい(変更なし)。 */
  margin-top: -1rem;
  font-size: 0.875rem;
  font-weight: 500; /* Figma: Medium(未指定→ブラウザのデフォルト/regularだったのを修正) */
  letter-spacing: 0.03em;
  line-height: 1.6;
}

.benefit-item__caption {
  margin-top: -0.5rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500; /* Figma: Medium(未指定→ブラウザのデフォルト/regularだったのを修正) */
  color: var(--color-text-sub);
}

.benefit-item__calendar {
  align-self: flex-end; /* centerだったのを、クライアントの希望でこれだけ右揃えに(.link-more--centerを上書き) */
}

/* ==========================================================================
   ゆる部
   ========================================================================== */

.yurube__lead,
.yurube__body {
  text-align: center;
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.yurube__lead {
  font-weight: 500; /* Figma: Medium(未指定→ブラウザのデフォルト/regularだったのを修正)。
   下の.yurube__bodyは別の、より小さい(0.875rem)スタイルだが、
   こちらも2026-08-28の対応で500に修正済み。 */
  /* Figma dev-mode確認(2026-09-07): 見出し→本文は32px。.section-titleの
     margin-bottom(32px)で既に確保できているため、ここでの追加marginは
     不要(0)。旧1.5rem(24px)だと合計56pxまで開いてしまっていた。 */
  margin-top: 0;
}

.yurube__body {
  font-size: 0.875rem;
  font-weight: 500; /* Figma: Medium(未指定→ブラウザのデフォルト/regularだったのを修正) */
  /* Figma dev-mode確認: 本文1→本文2は32px(旧1rem/16pxは推定値)。 */
  margin-top: 2rem;
  /* 2026-10-02: text-align:left override削除。クライアント指示でこのブロック
     全体をcenter揃えに変更(以前のleft化は上書き取り消し)。 */
}

.yurube__archive {
  width: 100%;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem; /* 8pxグリッド: 28px→32px */
}

/* Figma dev-mode確認(2026-09-07): .yurube__archiveの共通gap(2rem/32px)
   から、カード一覧→「もっと見る」だけ24pxに詰め、「もっと見る」→
   instagramボタンは56pxに広げる。他のペア(ラベル→カード一覧、
   カード同士)は32pxのままで正しいので変更なし。 */
.yurube__archive .link-more.yurube__more {
  margin-top: -0.5rem;
}

.yurube__archive .btn--outline {
  margin-top: 1.5rem;
}

.tab-label {
  align-self: flex-start;
  padding: 0.125rem 0.5rem;
  border-left: 0.1875rem solid var(--color-green);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
}

/* サブページの.tab-labelは常に.page-subsection内の<p>なので、
   詳細度で.page-subsection p(font-size:0.9375rem)に負けて実際には
   15pxで表示されてしまっていた不具合(amount-display__noteと同じ
   パターン)。クライアント指摘の「タイトル部分のfont-sizeが違う」は
   これが原因だったため、親クラスを足して詳細度を上げ20pxを確実に効かせる。 */
.page-subsection .tab-label {
  font-size: 1.25rem;
  font-weight: 700; /* 同じ理由でfont-weightも0.9375remのp側(500)に
    負けて表示が細くなっていたため、合わせて上書き */
  line-height: 1; /* Figma dev-mode確認(SNSページ「日本共産党公式SNS」で
    確認、2026-09-08): 100%(20px)。同じ理由で.page-subsection pの
    line-height(1.8 / sns-pageは1.6)を継承し、実際より行高が広く
    なっていた。 */
}

/* Sub-page headings that don't get the green accent bar (e.g.
   SNSなどで発信の「フォローして拡散」). */
.tab-label--plain {
  padding-left: 0;
  border-left: none;
}

/* A little breathing room when a tab-label doubles as a link caption
   (e.g. "JCPサポーター youtube ↗") and carries an icon right after
   the text. */
.tab-label .icon-link,
.tab-label .icon-more {
  margin-left: 0.25rem;
  vertical-align: -0.125em;
}

/* ==========================================================================
   登録導線
   ========================================================================== */

.registration {
  container-type: inline-size; /* 下のPC向けclampによる縮小(.registration__card-text)が、この要素自身の幅を基準にサイズを決められるようにする。他の.sectionと同じ手法 */
  position: relative;
  z-index: 0;
  /* .contentsの左右1remのガター分をはみ出させ、下の紫色の::before形状が
     そのガターで止まらず実際のビューポート端まで届くようにする
     (クライアントから左右に隙間があると指摘)。カード/リンクが元の
     見た目の位置のままになるよう、paddingを左右とも同じ1rem分増やす。 */
  width: calc(100% + 2rem);
  margin: 0 -1rem;
  overflow: hidden;
  /* Client feedback (2026-08-29): the white card's own left/right
     margin from the true screen edge should be 16px, not 32px — the
     24px "LINEでJCPサポーター" line was wrapping because the card
     didn't have enough room next to the QR code. Since this padding
     is what actually sets that screen-edge-to-card gap (the bleed
     above only cancels .contents' own gutter, landing back at 0),
     dropping it from 2rem to 1rem directly satisfies the 16px ask.
     Checked the wrap at this new width: the headline only stays on
     2 lines from ~392px viewports up (e.g. 414px) — common phone
     widths in between (360/375/390) still wrap to 3 lines, flagged
     separately for the client. */
  padding: 4rem 1rem 3rem; /* 8pxグリッド: 上60px→64px、左右32px→16px(クライアント指定) */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem; /* 8pxグリッド: 12px→16px */
}

/* Figma dev-mode赤入れ(2026-08-28): クライアントから、上下のカーブが
   弱すぎると指摘。Figma側の実際の形は、文字通りの巨大な楕円
   (「Ellipse 6」: 764.87×253)をフレーム(そこでは幅約403px)で
   切り取ったもの — 4隅のradiusではない。従来のborder-radiusによる
   近似(999px / 3rem)は、暗黙の楕円が常にこのボックス自身の幅ちょうど
   のサイズになり、本来より平坦で弱いカーブになってしまう。代わりに
   実際の巨大楕円を再現 — この要素自身の幅に対して764.87:403.03の比率
   (約1.898倍)、高さはこの要素の100%、中央揃えとすることで、
   どのビューポート幅でもFigmaと比例的に同じカーブを保つ。 */
.registration::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 189.8%;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1;
  background: var(--color-secondary);
  border-radius: 50%;
}

/* クライアントからのフィードバック(2026-09-30、スクリーンショット付き):
   オフキャンバスメニュー内では、上の楕円が.registration自身の下端
   付近で引っ込んでしまう(完全な楕円形なので上下両方がカーブする)
   — このため、このセクションがすぐ下の塗りつぶし紫.global-nav__share
   とシームレスに繋がるべき箇所で、メニューの背景色が細く透けて見えて
   しまっていた(.global-nav .registrationの上にある「同じ塗り、
   隙間なし」コメント参照)。他の場所(volunteer.htmlなど)の単体の
   .registrationは、意図的に上下対称のカーブのまま残すため、この
   フラットな蓋はオフキャンバスの文脈だけに限定している: 下半分に
   ::beforeの後に描画する単純な矩形を重ねることで、このボックス自身の
   下端まで確実にフル幅の紫を保証する。 */
.global-nav .registration::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  z-index: -1;
  background: var(--color-secondary);
}

.registration__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Figma dev-mode確認(Frame93, 2026-09-10): index.html/donation.html
     両方のRegistrationインスタンスで同一値を確認(gap14px, padding
     上7/右19/下7/左8)。旧: 2026-08-28のクライアントfeedback(「文字が
     カードの端にぶつかる」)を受けてgap0.75rem→0.5rem・padding均等
     16pxに手動調整していたが、実際のFigma側は非対称paddingで右側
     (テキスト側)によりゆとりを持たせる形で解決していた模様。 */
  gap: 0.875rem; /* 14px */
  width: 100%;
  max-width: 22.5625rem;
  min-height: 5.625rem; /* 90px */
  padding: 0.4375rem 1.1875rem 0.4375rem 0.5rem; /* 7px 19px 7px 8px */
  border-radius: 0.5rem; /* Figma dev-mode赤入れ(2026-08-28): 8px、12pxだったのを修正 */
  background: var(--color-white);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
}

/* Hover(PC)/Select(Mobile)仕様: セクションの紫のアクセントカラーの
   ごく薄いティントに染まる。 */
.registration__card:hover,
.registration__card:active {
  background: #f5f0ff;
}

.registration__qr {
  flex-shrink: 0;
  width: 4.75rem;
  height: 4.75rem;
  object-fit: contain;
}

.registration__card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-weight: 700;
  font-size: 1.5rem; /* Figma dev-mode赤入れ(2026-08-28): 24px、18pxだったのを修正 */
  line-height: 1.4; /* Figma仕様: 140% */
  letter-spacing: 0; /* Figma仕様: 0% — -0.01emだったのを修正。24pxで折り返しを再確認した結果、不要と判明(.registration__cardのgap/QRサイズ参照) */
  line-break: strict; /* explicit kinsoku shori — without this Chromium's "auto" line-breaker can start a wrapped line with a prohibited character like the ー in "サポーター" */
  color: var(--color-text-link); /* Figma dev-mode確認(2026-09-10): JCP/Text-Link(#F80044)。旧--color-linkは推定値で誤り(寄付ページでは--color-donationに上書きされる別トークンだったため特に混同していた) */
}

.registration__card-text span {
  /* white-space: nowrapだったのを修正 — 旧18pxサイズ向けに調整された
     値で、Figma仕様の24pxでは、幅の狭いスマートフォン(320pxまで確認)で
     QRコードの隣にこの行が収まらなくなる。.registration__cardが
     height ではなく min-height を使っているのは、まさにこの行が
     折り返した場合に伸びられるようにするため。 */
}

/* Figma dev-mode赤入れ(2026-08-28): これはパディング付きのボタン風の
   箱ではなく、下に細い罫線を引いた、ただのインライン行(テキスト+
   矢印アイコン)。クライアントからデザインに対して大きすぎると指摘
   された、従来のパディング付き/角丸/塗りつぶしの箱(0.5rem 1.5rem
   パディング、0.25rem radius)を置き換えたもの。 */
.registration__sub {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem; /* Figma仕様: 4px、変更なし */
  margin-top: -0.25rem;
  padding: 0 0 0.25rem; /* Figma仕様: 下のみ4px、左右上は無し */
  border: none;
  border-bottom: 0.0625rem solid var(--color-link); /* Figma仕様: 1px、内側揃え */
  border-radius: 0;
  background: var(--color-white);
  font-size: 0.875rem;
  color: var(--color-link);
}

/* すぐ上の.registration__cardと同じ薄紫のホバーウォッシュ —
   同じ仕様、同じセクションのアクセントカラー。 */
.registration__sub:hover,
.registration__sub:active {
  background: #f5f0ff;
}

.registration__sub > span:first-child {
  font-weight: 500; /* Figma: Medium(箱から継承していた700/boldを修正) */
  color: var(--color-text-main); /* Figma: #131314(クライアント確認済み) — すぐ後ろの矢印アイコンは別の
   兄弟spanなので影響を受けず、箱の--color-link(赤)のまま変わらない */
}

/* Client feedback (2026-08-29): even after widening the card (16px
   side margins, previous fix) "LINEでJCPサポーター" at Figma's 24px
   still wraps to 3 lines on ordinary phones — confirmed by the client
   on an iPhone SE simulator. The 24px card only has room to keep this
   on 2 lines from ~392px-wide viewports up (where it matches Figma
   exactly), so shrink it specifically below that, SP-only, using the
   same max-width: 47.9375rem (767px) breakpoint as the other SP-only
   text pinches in this file (e.g. .donation-page__heading--wrap
   above). 20px keeps a comfortable 2-line fit down to ~360-375px
   phones (checked: iPhone SE/375px, 360px). Very old 320px-class
   phones may still wrap to 3 lines even at 20px — flagged as a rare
   edge case, not chased further. */
@media (max-width: 47.9375rem) {
  .registration__card-text {
    font-size: 1.25rem; /* 20px、SP限定(以前は全幅で1.5rem/24pxだった) */
  }
}

/* ==========================================================================
   フッター
   ========================================================================== */

.site-footer {
  margin-top: 5rem;
  padding: 1.5rem var(--gutter) 0;
  /* 以前は実際のborder-topだったが、borderはpadding boxの外側に乗るため、
     その下のコンテンツが使っている--gutterの内側寄せを無視してしまう —
     線自体は実際の左右端まで届くのに、テキストは16px内側のまま、という
     ズレをクライアントから指摘された。線を(100% - 2*gutter)サイズの
     背景レイヤーとして中央揃えで描くことで、マークアップを変えずに
     左右とも同じ16px内側寄せにしつつ、元のborderと同じく箱の上端に
     ぴったり沿わせている。 */
  background:
    linear-gradient(var(--color-gray), var(--color-gray)) top center / calc(100% - 2 * var(--gutter)) 0.0625rem no-repeat,
    var(--color-bg);
  text-align: center;
}

.site-footer__title {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.03em;
}

.site-footer__lead {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500; /* Figma: Medium(未指定→ブラウザのデフォルト/regularだったのを修正) */
  letter-spacing: 0.03em;
}

.sns-list {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.sns-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 6.5rem; /* 104px */
  overflow: hidden;
}

.sns-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-footer__bottom {
  margin: 2.5rem calc(var(--gutter) * -1) 0; /* ビューポートの端まではみ出させる */
  padding: 2rem var(--gutter);
  background: #000000;
  display: flex;
  justify-content: center;
}

/* 2026-10-01: MT移植時、現行本番フッターにあった「JCPサポーター会員
   ガイドライン」本文をそのまま残す必要があったが、Figmaの新デザインには
   この文言の置き場所が無かったため、ひとまず素のテキストブロックとして
   フッター下部に追加しておく(内容は現行のまま、デザインは未確定 —
   クライアント確認待ち、index_MT.html側のコメント参照)。 */
.site-footer__guidelines {
  max-width: 40rem;
  margin: 2rem auto 0;
  padding-bottom: 2rem;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--color-gray, #767676);
}

.site-footer__guidelines h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--color-text-main);
}

.site-footer__guidelines ul {
  padding-left: 1.2em;
}

.site-footer__guidelines li {
  margin-bottom: 0.4em;
  /* 2026-10-03: liの文頭に全角「・」をテキストとして直接入れているため、
     折り返した2行目以降が「・」の真下(文字の手前)に戻ってしまう。
     text-indentでぶら下げインデントにし、2行目以降は「・」の後ろの
     本文と同じ位置で揃えるようにしている。 */
  padding-left: 1em;
  text-indent: -1em;
}

/* 合成ロゴマーク: Figma側の元データが1枚のフラットな画像ではなく、
   重なり合う3つのパスグループに分かれているため、ここで同じ相対位置
   関係のまま組み直している。 */
.logo-mark {
  display: block;
  width: min(16.75rem, 62vw); /* 固定268pxだったのを、幅の狭いスマートフォンではみ出さず縮むように修正 */
  height: auto;
}

/* ==========================================================================
   レスポンシブ対応: 余裕がある画面では読みやすい幅まで広げる。
   元のデザインはスマートフォン専用(393px)のみなので、これは本格的な
   ブレークポイント体系というより、タブレット/デスクトップ向けの
   簡易的な安全策。
   ========================================================================== */

@media (min-width: 56.25rem) { /* 900px — 確認済みのPCブレークポイントと一致 */
  /* ヘッダー(登録/ログインボタン + global-nav + ハンバーガー)は今は
     SP専用 — PCでは左側のpage-nav自身のリンクとCTAボタンがその役割を
     引き継ぐ。子要素だけでなくヘッダー全体を非表示にしているのが
     ポイントで、これによりPCでは登録/ログインボタンとナビが消え、
     SPではどちらも完全にそのまま残る: 同じDOMのままで、SP用マークアップ
     を複製も削除もしていない。 */
  .site-header {
    display: none;
  }

  body {
    padding-top: 0; /* 固定ヘッダーが無くなったので、その高さ分の余白を確保する必要も無い */
  }
}

@media (min-width: 48rem) {
  .contents {
    gap: 6rem;
  }

  .hero {
    max-width: 40rem;
    margin: 0 auto;
    padding-top: 1.5rem;
  }

  /* タブレット/PC向けに、Figmaフレーム通りの固定幅に戻す。中央カラム
     自身のコンテンツ幅は、下の3ペインラッパーによって変わらない —
     新たに追加されるのは左右のnav/shareカラムだけ。 */
  .section,
  .btn--large {
    max-width: var(--content-width);
  }
}

/* ==========================================================================
   PC 3-pane layout — [page-nav] [page-main] [page-share]
   Figma: JCPサイト (node 1:5129), confirmed 3-pane PC spec.
   SP: .page-nav / .page-share are hidden and .page-layout is a plain
   wrapper, so mobile is untouched by any of this.
   ========================================================================== */

.page-nav,
.page-share {
  display: none;
}

.page-main {
  min-width: 0; /* stickyなheroに幅を押し広げられず、グリッドのカラムが縮められるようにする */
}

/* .page-nav内のページ内リンクのジャンプ先 — ジャンプした時に固定
   ヘッダーがセクションの上部に被らないようにする。scroll-marginは
   実際にidが付いている要素にしか効かないため、周囲の
   .section/.benefit-itemではなく、id自体に直接(見出し要素に付いて
   いる場合もある)指定している。 */
#heroPin,
#newsTitle,
#monthlyTitle,
#benefitsTitle,
#benefit-volunteer,
#benefit-sns,
#benefit-community,
#donationMonthlyTitle,
#donationPerksTitle,
#donationFaqTitle {
  scroll-margin-top: 6rem;
}

@media (min-width: 56.25rem) { /* 900px — ヘッダーのナビ切り替えと同じブレークポイント */
  .page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--page-main-width) minmax(0, 1fr);
    align-items: start;
    gap: 0;
    /* 2026-09-30(クライアントがFigma node 1:5129と照合し再確認済み):
       page-mainが今は固定カラム(500px)になり、page-nav/page-shareの方が
       可変の2カラムになった — これらの塗りつぶし青背景は常に実際の
       左右ビューポート端まで届く。以前の「左右18rem固定、中央可変」の
       グリッドのように、固定288pxの箱で止まってしまうことはない。
       .page-nav/.page-share自身のコンテンツ(ナビリスト/ボタン、share
       パネル)が、トラックの残りに合わせて伸びるのではなく、固定幅の
       まま内側の端(page-mainの隣)に留まる仕組みは下記参照。
       カラム間のgapは無し: page-main自身の端が、今はpage-nav/page-share
       とぴったり隙間なく接しているため、page-main内の単純な
       width:100%の要素はすでにその境界まで届く。これにより、以前
       .hero-pin/.registration/.donation/.site-footer__bottomがその
       隙間を越えるために必要としていた、古いvar(--pc-grid-gap)の
       「はみ出し」ハックが不要になった — それぞれの(PC以外の)基本
       ルールは、すでに.contents自身のガター分だけはみ出す形になって
       おり、それだけで十分事足りる。 */
  }

  /* PCでは固定ヘッダー自体がもう存在しないため(上のヘッダー用メディア
     クエリ参照)、hero-pin__stickyとこれらのサイドパネルは、ヘッダーの
     高さを避けるのではなく、ビューポートの最上部にそのままピン留めする。 */
  .hero-pin__sticky {
    top: 0;
    height: 100vh;
  }

  /* PC-only pinch fix: the 3-pane grid's fixed 18rem side columns +
     2rem gaps eat so much of the viewport that right around the
     900px breakpoint threshold, .page-main's own middle column is
     briefly narrower than any real phone screen — narrower than the
     SP/tablet widths .section-title__main's 1.375rem floor (below)
     was tuned against. A long heading like "日本共産党を支えます！"
     hit that floor and wrapped mid-word instead of staying on its
     own line. Lowering the floor ONLY inside this PC-only override
     (SP keeps its original, untouched 1.375rem) fixes that pinch
     without changing anything at normal PC widths, where 7cqw is
     already well above either floor. */
  .section-title__main {
    font-size: clamp(0.875rem, 7cqw, 2rem);
  }

  /* Same pinch, different element: "寄付をやめたい、金額を変更したい
     などの" doesn't use a shrinking clamp at all normally (SP has
     plenty of room for its fixed 0.875rem), so at the same narrow PC
     pinch it just wraps outright. Give it the same cqw-based shrink,
     PC-only, so it also holds to one line through that pinch instead
     of only being fixed-size everywhere. */
  .donation__note {
    font-size: clamp(0.5rem, 4.7cqw, 0.875rem);
    letter-spacing: 0.01em;
  }

  /* Same PC-only pinch as .donation__note above, same ratio even —
     this paragraph's line breaks are hard <br>s rather than a
     shrink-to-fit heading, and its longest line ("暮らし・平和・民主主義
     を壊す政治を許さず") needs roughly this exact curve to stay on one
     row all the way down to the 900px floor without overshooting back
     past 1rem before the container's actually wide enough for it. */
  .benefits__intro {
    font-size: clamp(0.5rem, 4.7cqw, 1rem);
  }

  /* 同じPC専用の縮小調整が、.registration__card-textにも必要 —
     20px(SP限定の縮小、登録導線コンポーネント近くの
     max-width: 47.9375rem上書き参照)はこのブレークポイントより下しか
     カバーしない。900px付近では.registration自体が再び狭まり、同じ
     折り返し問題が一時的に発生してから、最終的に余裕を持って24px
     フルサイズに戻っていく。cqwを使ったclamp()(.registration自身の幅
     基準、上のcontainer-type参照)なら、2つ目の固定ブレークポイントを
     追加しなくても、この谷間をなめらかにカバーできる。 */
  .registration__card-text {
    font-size: clamp(1rem, 5cqw, 1.5rem);
  }

  /* .amount-display__row自身のPC専用の縮小調整は、ここではなくずっと
     下、自身の基本ルールのすぐ後ろにある — この項目に限ってソース内の
     順序が重要な理由は、そちらのコメント参照。 */

  /* 48remのタブレット用ルールにあったmax-width:40rem/margin:0 autoを
     打ち消す — あれは旧来の単一カラムのタブレット表示向けのサイズ
     だった。実際の3ペインレイアウトでは.page-mainがすでに読みやすい
     幅のカラムそのもの(左右のnav/shareパネルで区切られている)な
     ので、heroはその中で幅の狭い島のように浮かせるのではなく、100%
     埋めるべき(この隙間のせいで、ぼかし/拡大による端の回避処理 —
     端まで届く箱を前提に調整していた — が、はっきりした輪郭線として
     見えてしまっていた: 箱が、拡大の補正量が想定していたよりずっと
     小さかったため)。 */
  .hero {
    max-width: none;
    width: 100%;
    margin: 0;
  }

  /* 48remのタブレット用ルールにあったインセットフレーム
     (top:0.5rem/right:1rem/left:1rem + border-radius:1rem)を打ち消す。
     このインセット+radiusは--hero-progressとは無関係な、幾何学的に
     固定された境界であり、画像側でぼかし/拡大をどれだけ調整しても
     和らげることはできない — 角丸がスクロール位置に関わらず常に固定
     境界で画像を切り取ってしまうため。これが、以前の.hero幅修正の後も
     残っていた「くっきりした枠線」の実際の原因だった: 写真自体は
     すでにフル幅になっていたが、overflow:hidden角丸マスクの裏で、
     依然として実際の端から1rem内側に額装されていた。実際の端まで届く
     PCレイアウトでは、写真はぼかし/拡大の計算式(端まで届く箱を前提に
     調整済み)が想定している通り、.hero自身の端にぴったり揃えるべき。 */
  .hero__bg,
  .hero__panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0;
  }

  /* Undo the 48rem tablet rule's max-width:22.5625rem (361px) cap on
     .section/.btn--large. That width was sized for the old
     single-column tablet view; inside the real 3-pane layout
     .page-main IS the reading column already (bounded by the two
     18rem side panels), so content sections should fill it the same
     way .hero now does, instead of floating a fixed 361px island with
     large gutters on either side (the "マンスリー寄付" card the gutters
     were most visible on is a .section like any other). */
  .section,
  .btn--large {
    max-width: none;
    width: 100%;
  }

  /* Client feedback (2026-09-28): on PC the two lavender Donation
     blocks ("マンスリー寄付が…" / "あなたの寄付が…") should butt
     directly against page-nav/page-share with no gap, same as the
     .registration purple shape (see its own override further up).
     Figma node 1:5129 shows the same flush shape for both.
     MUST come after the ".section, .btn--large { width:100% }" rule
     just above: .donation carries class="section" too, so at equal
     specificity the later rule in the cascade wins — placed earlier,
     this override's own width got silently discarded (only its
     margin survived, bleeding the box out without widening it, which
     left a fixed ~48px gap on both sides no matter the viewport).
     Unlike .registration/.hero-pin, .donation has no SP-side bleed
     rule to build on (SP keeps its normal 1rem .contents gutter,
     unchanged, matching Figma there too) — this override supplies
     the full bleed amount outright rather than adding to a base
     value. 2026-09-30: with .page-layout's column gap now 0 (see its
     own comment), this only needs to escape .contents' 1rem gutter —
     same amount as .registration's base rule — so the old "+ 2 *
     var(--pc-grid-gap)" term is gone. */
  .donation {
    width: calc(100% + 2rem);
    margin: 0 -1rem;
  }

  #heroPin,
  #newsTitle,
  #monthlyTitle,
  #benefitsTitle,
  #benefit-volunteer,
  #benefit-sns,
  #benefit-community,
  #donationMonthlyTitle,
  #donationPerksTitle,
  #donationFaqTitle {
    scroll-margin-top: 2rem; /* ヘッダーの高さを避ける必要が無くなったので、今はただの余白 */
  }

  .page-nav,
  .page-share {
    display: flex; /* display:blockだったのを、flexカラムに変更。align-itemsで固定幅の
   コンテンツを内側の端(page-mainの隣)に留めつつ、この可変トラックの
   残りはただの背景のままにできる */
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh; /* コンテンツに合わせた大きさのカードではなく、上下とも端まで届く背景パネル */
    overflow-y: auto; /* 縦が低い/ズームされたビューポートで、ナビリスト+ボタン(またはSNSリスト)が一度に収まらない場合の保険 */
    background: var(--color-bg-sub);
    border-radius: 0;
    padding: 2rem 0; /* 今は縦方向の余白のみ — コンテンツまでの横方向の間隔は下のvar(--side-inset)が担当し、外側(ビューポート側)の端はあえてpaddingを付けず、純粋な背景のままにしている */
  }

  .page-nav {
    align-items: flex-end; /* ナビリスト/ボタンを右端、page-mainの隣に固定 */
    padding-right: var(--side-inset); /* page-mainとの間隔16px、Figma node 1:5129に基づく */
  }

  .page-share {
    align-items: flex-start; /* shareパネルを左端、page-mainの隣に固定 */
    padding-left: var(--side-inset); /* page-mainとの間隔16px、Figma node 1:5129に基づく */
  }

  .page-nav__list {
    display: flex;
    flex-direction: column;
    width: min(var(--side-content-width), 100%); /* 238px、Figma通り。下の.page-nav__actionsと同じ箱 — 可変トラックが
   それより狭くなってもはみ出さず縮む(ファイル末尾近くの900–1008px
   squeeze-zoneルール参照) */
    gap: 1rem; /* 8pxグリッド: 18px→16px */
    font-size: 0.9375rem;
    font-weight: 700;
  }

  .page-nav__list a {
    position: relative;
    display: block;
    padding: 0.25rem 1.5rem 0.25rem 0; /* 8pxグリッド: 22px→24px。右側は矢印アイコンのための余白 */
    color: var(--color-text-main);
    transition: color 0.15s ease, font-size 0.15s ease;
  }

  /* 矢印は::afterで描画しているため、リンクごとに余分なマークアップは
     不要。サイト既存の.icon-moreシェブロンと同じmask/形状。 */
  .page-nav__list a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEgOGgxM005IDNsNSA1LTUgNSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") center / contain no-repeat;
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEgOGgxM005IDNsNSA1LTUgNSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") center / contain no-repeat;
  }

  .page-nav__list a:hover,
  .page-nav__list a:active {
    color: var(--color-link);
  }

  /* Current section, set by script.js via IntersectionObserver. Every
     link (including "JCPサポーターになってできること") follows the same
     Active/NonActive spec: black+default size when not current, this
     red+larger override when it is — no per-item exceptions. */
  .page-nav__list li.is-current > a {
    color: var(--color-link);
    font-size: 1.0625rem;
    font-weight: 700;
  }

  .page-nav__actions {
    display: flex;
    flex-direction: column;
    width: min(var(--side-content-width), 100%); /* 上の.page-nav__listと同じ固定幅の箱。Figma通り、ボタンとテキストリンクが左端を揃えて共有する */
    gap: 1rem; /* 8pxグリッド: 12px→16px */
    margin-top: 2rem;
  }

  /* 238pxのサイドバーカラムに収まるサイズ — 本文中のボタンと同じ形状/
     色で、ただ一回り小さく、はみ出す代わりに2行に折り返せるようにして
     ある。white-spaceは、このカラムが常に固定18rem/288px(十分な余裕)
     だった頃は"nowrap"だった。今はこのカラムが900–1008pxの
     squeeze zone(ファイル末尾近くのそのルール参照)で縮む可能性が
     あるため、折り返しを許可しておく必要がある — min-height/
     line-heightはすでに2行のラベルを見込んだ値にしてある。 */
  .page-nav__actions .btn--large {
    height: auto;
    min-height: 3rem;
    padding: 0.5rem 1rem; /* 8pxグリッド: 10px→8px、12px→16px */
    font-size: 0.875rem;
    line-height: 1.3;
  }

  .btn--outline-neutral {
    background: var(--color-white);
    color: var(--color-text-main);
    border: 0.0625rem solid var(--color-gray);
  }

  .page-share {
    text-align: left;
  }

  .page-share__title {
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.4;
  }

  .page-share__list {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.5rem; /* 8pxグリッド: 20px→24px */
    margin-top: 1.5rem;
  }
}

/* 2026-09-30: 以前ここにあった900–1020px向けの凝った「圧縮修正」
   (左右18remのサイドカラムを15remに、グリッドgapを0.25remに縮める
   というもの — 昔の経緯が必要になったらgitの履歴参照)は、もう存在
   しない問題を解決するためのものだった: 以前は.page-mainが可変カラム
   だったため、900px付近で約260–380pxまで狭まり、短い段落でも強制的に
   折り返されてしまっていた。Figma node 1:5129の通り、page-mainは今や
   PCのどの幅でもvar(--page-main-width)(500px)固定であり、一切狭まら
   ない — そのためこの種の折り返し不具合は構造上もう起こり得ず、この
   上書きルール自体が不要になった。
   新しい固定幅のパーツ(.page-nav__list/.page-nav__actions、
   var(--side-content-width)=238px)は、それぞれ独自の、狭い
   ビューポート向けの処理を別に持っている: 各要素の
   `width: min(var(--side-content-width), 100%)`
   (上の.page-nav__list/.page-nav__actions/.page-nav参照)がすでに
   可変のサイドトラックの残り幅に合わせて縮めてくれるし、
   .btn--largeも`white-space: nowrap`を強制しなくなったので、コンテンツ
   は単にはみ出す代わりに折り返すだけで済む — こちらにも専用の
   ブレークポイントは不要。 */

/* ==========================================================================
   Sub-pages — 選挙ボランティア / SNSなどでの発信 / お知らせ / お知らせ詳細
   Figma: JCPサイト (node 1:5278, 1:5315, 1:5393, 1:5420)
   These reuse .section / .section-title / .tab-label / .btn--outline /
   .link-more / .card-list / .news-card / .tag from the TOP page as-is —
   the classes below are only the handful of components that don't
   already exist there (tag grid, sns chips, video embed, poster grid,
   news filter, pagination, and the detail page's "back" header link).
   ========================================================================== */

/* 選挙ボランティア: 2x2 grid of plain (non-interactive) info chips
   ("ビラ配り" / "証紙貼り" / ...). Not a button — no border, just a
   light gray fill, distinct from .btn--outline's pink-outline look. */
.tag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem; /* クライアント指定: それぞれのブロックのmarginは8px */
  width: 100%;
}

/* Figma dev-mode確認(2026-09-07): タグ一覧↔直後の本文は16px。
   .page-subsectionの基本gap(24px)から8px詰める。.tag-gridはこの
   ページでしか使っていないので範囲を絞らず直接指定でOK。
   2026-10-02: クライアント指示でvolunteer.htmlの本文⇄タグ一覧の
   上下順を反転(本文が先→タグ一覧が後)したため、セレクタも
   .tag-grid + p → p + .tag-grid に変更して同じ詰め量を維持。 */
p + .tag-grid {
  margin-top: -0.5rem;
}

.tag-grid__item {
  padding: 1rem 0.5rem; /* 8pxグリッド: 14px→16px */
  /* クライアント指定: 4隅均等ではなく、左上・右下を18px、右上・左下を
     2pxにした非対称の角丸(Figma dev-mode実測値)。 */
  border-radius: 1.125rem 0.125rem 1.125rem 0.125rem;
  background: #eeeaea;
  font-weight: 700;
  font-size: 0.9375rem;
}

/* .page-subsection p { text-align:left; font-weight:500 } の方が詳細度
   (クラス+要素)が高く負けてしまっていたため(amount-display__noteと同じ
   問題)、親クラス.tag-gridを足して詳細度を上げ、中央揃え・700ウェイト
   (クライアント指定、2026-09-30)の両方を確実に効かせる。 */
.tag-grid .tag-grid__item {
  text-align: center;
  font-weight: 700;
}

/* SNSなどでの発信: small pink-outline pills with a brand-colored icon
   + label, wrapping onto multiple lines as needed. Figma dev-mode
   確認(2026-09-08)ではdisplay:gridで3列×2行の均等グリッド(各セル幅
   固定)だったが、そのままSP実機幅(320〜393px)に当てはめると
   「X(旧Twitter)」のラベルが: minmax(0,1fr)ではピル内で2行折り返し、
   minmax(max-content,1fr)では逆にコンテナ幅を突き破って右端が
   見切れる、のどちらかになってしまい、どちらもFigmaの見た目(1行で
   ちゃんと収まってる)を実機で再現できなかった。折り返し優先で
   flex-wrapに戻し、パディング・gap・font-weight・アイコンサイズなど
   確認できた値はそのまま反映。結果的にFigmaと同じ「4個は2行×3列、
   1個は単独」という見た目は保ったまま、実機で崩れない形にしている。
   The 4 platform icons are plain inline SVGs (not the currentColor
   mask icons used elsewhere) since each one needs to keep its own
   brand color. */
.sns-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* 8px、Figma: row-gap/column-gapとも8px */
  width: 100%;
}

.sns-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* Figma dev-mode確認: 8px(旧6px) */
  padding: 0.25rem 0.5rem; /* Figma dev-mode確認: 4px 8px(旧8px 16px) */
  border: 0.0625rem solid var(--color-primary); /* Figmaのvar(--JCP-primary,
    #FF70A2)というコード上の値は現在の#ff83a2と食い違っていたが、
    Frame 126のSVG実データ(stroke="#FF83A2" / display-p3 1.0000 0.5141
    0.6356)で#ff83a2と確認済み(2026-09-08)。変数フォールバックの方が
    古い/別モードだったと判断し、#ff83a2のまま確定。 */
  border-radius: 1.5rem; /* Figma: 24px(旧6remも高さ的に結果は同じピル型) */
  font-weight: 500; /* Figma dev-mode確認: Medium(旧700=Bold) */
  font-size: 0.75rem; /* クライアント指定: 12px */
  color: var(--color-text-main);
  background: var(--color-white);
  transition: background 0.15s ease;
}

/* .btn--outlineと同じ白地にピンク枠線の形なので、同じHover(PC)/
   Tap(Mobile)処理を適用 — これも以前はインタラクション状態が
   一切無く、クライアントの報告がほぼ確実に指していたリンクの1つ。 */
.sns-chip:hover,
.sns-chip:active {
  background: #feedf1;
}

.sns-chip__icon {
  flex-shrink: 0;
  width: 1.5rem; /* Figma dev-mode確認: 24px(旧20px) */
  height: 1.5rem;
  border-radius: 50%;
}

/* Caption line above each video embed ("公式youtube ↗") — reuses
   .icon-link (already the "opens elsewhere" glyph) for the arrow. */
.video-caption {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  color: var(--color-text-main); /* クライアント指定(推定): 文字は黒に。旧: var(--color-link) */
}

.video-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0.0625rem solid var(--color-primary);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--color-white);
  transition: opacity 0.15s ease;
}

/* サムネイル画像が箱全体を埋めているため(下の.video-embed img参照)、
   背景のウォッシュを敷いても裏に隠れて見えない — 代わりにリンク全体を
   少し暗くする、.link-moreのopacity処理と同じ考え方。これも以前は
   インタラクション状態が無かった。 */
.video-embed:hover,
.video-embed:active {
  opacity: 0.85;
}

.video-embed img,
.video-embed iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* SNSなどでの発信: "フォローして拡散" 3-across poster thumbnails. */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  width: 100%;
}

.poster-grid img {
  width: 100%;
  aspect-ratio: 5 / 6; /* クライアント指定(実測): 115×138px */
  object-fit: cover;
  border-radius: 0.5rem; /* クライアント指定: 8px(旧4px) */
  border: 0.0625rem solid var(--color-gray);
}

/* ポスター画像はクライアント選定中(2026-09-08時点)のため、確定するまで
   "?" のプレースホルダー表示。画像が決まったら .poster-grid img と同じ
   見た目の <img src="images_2026_10/sns-poster-N.png"> に差し替える。 */
.poster-grid__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 5 / 6;
  border-radius: 0.5rem;
  border: 0.0625rem dashed var(--color-gray);
  background: #f5f5f5;
  color: var(--color-gray);
  font-size: 1.5rem;
  font-weight: 700;
}

/* お知らせ一覧: region filter above the card list. Real filtering is
   presumably an MT/JS concern once this is wired up for real — this
   is just the static shell the client's screenshot showed. */
.news-filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid var(--color-gray);
  font-size: 0.875rem;
}

.news-filter select {
  padding: 0.375rem 1rem; /* 8pxグリッド: 12px→16px(縦方向の6pxは微小値のためそのまま) */
  border: 0.0625rem solid var(--color-text-main);
  border-radius: 0.25rem;
  background: var(--color-white);
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--color-text-main);
}

/* お知らせ一覧: pager. Numeric MTPaginate-style links + "…" gaps —
   swap in whatever the real MT pagination tags produce. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  font-weight: 700;
  font-size: 0.9375rem;
}

.pagination__pages {
  display: flex;
  align-items: center;
  gap: 1rem; /* 8pxグリッド: 12px→16px */
}

.pagination a,
.pagination__current {
  color: var(--color-text-sub);
}

.pagination a:hover,
.pagination a:active {
  color: var(--color-link);
}

.pagination__current {
  color: var(--color-text-main);
}

.pagination__ellipsis {
  color: var(--color-gray);
}

.pagination__arrow {
  display: inline-flex;
  color: var(--color-text-main);
}

.pagination__arrow.is-disabled {
  color: var(--color-gray);
  pointer-events: none;
}

/* お知らせ詳細: header swaps the SP register/login button for a
   "back to list" link — same .site-header shell and layout, only the
   button slot's content changes, so no new header CSS needed. */
.header-back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  color: var(--color-text-main);
}

/* 共通のシェブロン/矢印アイコンを左向きに反転 — 詳細ページの「戻る」
   リンクと、お知らせのページャーの「前へ」矢印で使用。それぞれ専用の
   反転SVGを別途用意する必要が無い。 */
.icon--flip {
  transform: scaleX(-1);
}

/* お知らせ詳細: body copy + "関連LINK" list. */
.article-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  font-size: 0.9375rem;
  font-weight: 500; /* Figma: Medium(未指定→ブラウザのデフォルト/regularだったのを修正) */
  line-height: 1.8;
  text-align: left;
}

.related-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

/* サブページのレイアウト: 左揃えのページタイトル(TOPページの
   .section-titleとは別物 — あちらは「left」バリアントでも常に
   text-align:center)+その下のコンテンツカラム。サブセクションごとに
   まとめてあり、tab-labelの見出しの前には、サブセクション内の段落間
   よりも大きい余白が入る。 */
.page-title {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 3.5rem; /* 旧クライアント指定56px。sns.htmlは未確認のため
    このまま。ボランティアページはFigma dev-mode確認により下で32pxに
    上書き(2026-09-07)。 */
}

/* Figma dev-mode確認: ボランティアページの見出し→本文は32px(旧56pxは
   クライアント指定の推定値)。.page-titleはsns.htmlとも共有クラスなので
   ここではボランティアページだけ上書きし、sns側は確認でき次第見直す。 */
.volunteer-page .page-title {
  margin-bottom: 2rem;
}

.page-title__heading {
  font-size: 2rem; /* クライアント指定: 32px固定(以前はclampで縮小していた) */
  font-weight: 700;
  line-height: 1; /* Figma dev-mode確認: 100%(32px)。bodyの1.6を継承していたため
    見出し文字と下線バーの間の余白が意図より広く空いていた(2026-09-08) */
  letter-spacing: 0.05em; /* Figma dev-mode確認: 1.6px = 32px×0.05em、一致 */
  text-align: center; /* クライアント指定: 中央揃え */
}

/* PC-only pinch (900px、他の見出しと同じ理由): 32px固定にしたことで
   3カラムグリッド直後の.sectionが一時的にせまくなる900px付近で
   「ボランティア（β版）」が2行に折り返してしまうため、他の見出し
   (.section-title__mainなど)と同じcqwベースの縮小をこの帯域だけ適用。
   SP/タブレットは上のflat 2remのまま変更なし。 */
@media (min-width: 56.25rem) {
  .page-title__heading {
    font-size: clamp(1.375rem, 7cqw, 2rem);
  }
}

.page-title__heading > span {
  /* 直下の子spanのみを改行させる(子孫セレクタだと.page-title__suffixの
     入れ子spanまでblock化してしまい、「（β版）」が意図せず3行目に
     押し出される不具合があったため、直接子セレクタに修正)。 */
  display: block;
}

.page-title__suffix {
  font-size: 1rem; /* クライアント指定: 16px */
  font-weight: 700; /* クライアント指定: Bold(前回500に変更したのは誤りだったため訂正) */
  color: var(--color-text-sub);
  margin-left: 0.25rem;
}

.page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  width: 100%;
  text-align: center;
}

/* 寄付ページ・ボランティアページ・SNSページとも、セクション同士(寄付
   ページ:「一度限りで寄付をする」→「マンスリー寄付の特典」見出しなど/
   ボランティアページ:各page-subsection・registration・「サイトトップ
   にもどる」の間/SNSページ:各page-subsection間)の間隔がFigma dev-mode
   確認でどれも56px(旧48px)だったため、この3ページだけ広げる。SNSページ
   はFigma上の「SNS」オートレイアウトフレーム内、リード文→「日本共産党
   公式SNS」間・「日本共産党公式SNS」→「JCPサポーターSNS」間ともに
   スペーシング表示で56pxと確認(2026-09-08)。お知らせは未確認のため
   .page-contentは48pxのまま(確認でき次第見直す)。 */
.donation-page .page-content,
.volunteer-page .page-content,
.sns-page .page-content {
  gap: 3.5rem;
}

.page-subsection {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* 8pxグリッド: 20px→24px */
  width: 100%;
}

/* SNSページ「フォローして拡散」セクション専用(tab-label--plainは現状
   ここでしか使っていない): クライアント実測でタイトル→本文→画像の
   間隔が16px、画像→ボタンの間隔は24pxのままだったため、セクション
   全体のgapを16pxに縮め、ボタンの上だけ8px足して24pxに戻す。 */
.page-subsection:has(.tab-label--plain) {
  gap: 1rem;
}

.page-subsection:has(.tab-label--plain) .btn {
  margin-top: 0.5rem;
}

/* 選挙ボランティアページ「国政選挙」「地方選挙」ボタン同士の間隔だけ
   クライアント実測で16pxとのことだったため、.page-subsectionの基本
   gap(24px)から8px分だけ詰める。前(本文→1つ目のボタン)は24pxのまま
   変えたくないので、gap自体は変えずボタンが連続するここだけ
   margin-topで individually調整。
   →2026-09-07 Figma dev-mode確認により、ボタン同士16pxは実測値と
   一致(変更なし)。
   →2026-10-02: 直後にあった「地区事務所連絡先ページへ」リンクと
   その下の本文のブロックをクライアント指示で丸ごと削除したため、
   そのリンクへの間隔調整ルール(.volunteer-page .btn + .link-more--center)
   は対象が無くなり不要になったので削除。 */
.page-subsection > .btn + .btn {
  margin-top: -0.5rem;
}

/* Figma dev-mode確認: 「JCPサポーターになる」セクションの2つの本文
   段落同士(p+p)は16px(.page-subsectionの基本gap24pxから8px詰める)。
   .tab-labelも実は<p>要素なので、単純な"p + p"だと他のsubsection
   (tab-label直後にpが続く箇所)まで誤って巻き込んでしまう
   ("p:not(.tab-label)"で除外、2026-09-07に発覚・修正)。
   →2026-09-16追記: 同じ理由で.tag-grid__itemも<p>要素なので、この
   ルールが2〜4個目のタグにmargin-top:-8pxを誤って適用してしまい、
   .tag-gridのgap(8px)を相殺してタテのマージンが0になる
   (ビラ配り/ポスター貼りが接触して見える)不具合が発生していた。
   .tag-grid__itemも前後どちらの位置でも除外して修正。 */
.volunteer-page .page-subsection p:not(.tab-label):not(.tag-grid__item) + p:not(.tag-grid__item) {
  margin-top: -0.5rem;
}

/* Figma dev-mode確認: 「お問い合わせ」セクションの本文→ボタンは32px
   (.page-subsectionの基本gap24pxに+8px)。.btn--strongが
   .page-subsectionの直接の子として出てくるのはこの1箇所だけ。 */
.volunteer-page .page-subsection > .btn--strong {
  margin-top: 0.5rem;
}

.page-subsection p {
  width: 100%; /* 短い1行文だと align-items:center で内容幅に縮んでしまい、
    text-align:leftを指定していても見た目は中央寄りになる不具合があった
    ため明示。クライアント指定: 「JCPサポーターSNS」の説明文の左揃え */
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 500; /* Figma: Medium(未指定→ブラウザのデフォルト/regularだったのを修正) */
  line-height: 1.8;
}

/* SNSページのみFigma dev-mode確認済み(2026-09-08): 本文は16px/Medium/
   line-height160%。.page-subsection pは寄付・ボランティア・お知らせ
   詳細ページとも共有してるクラスだが、そちらはまだ未確認のため base
   (15px/1.8)のままとし、SNSページだけ上書き。他ページも確認でき次第
   同じ値に統一するかも含めて見直す。 */
.sns-page .page-subsection p:not(.tab-label) {
  /* :not(.tab-label)必須: .tab-labelも<p>要素なので、これを付けないと
     詳細度で.page-subsection .tab-label(20px指定)に勝ってしまい、見出し
     まで16pxに縮んでしまう不具合が出る(2026-09-08に発覚・即修正、
     volunteer.htmlのp+p問題と同系統のバグ)。 */
  font-size: 1rem; /* 16px */
  line-height: 1.6; /* 160% */
}

/* お知らせ詳細: plain title, no gradient bar under it. */
.article-title {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 8pxグリッド: 12px→16px */
  width: 100%;
  text-align: left;
}

.article-title__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-sub);
}

.article-title__heading {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}

/* ==========================================================================
   寄付ページ (donation.html)
   Figma: JCPサイト (node 1:5438) — スクリーンショットベースで実装。
   Figma MCP側がツール呼び出し上限に達していて正式なデザインデータが
   取得できなかったため、クライアントから共有された「05寄付TOP.png」
   スクリーンショット(393x4923の実寸PNG)を読み取って再現しています。
   このページ固有のコンポーネントのみここに追加。ヘッダー/フッター/
   page-nav/page-share/registrationは他ページと同じマークアップを
   そのまま流用しているので、対応するCSSは上記の各セクションが
   共通で効きます。
   ========================================================================== */

/* ヘッダー直下〜見出しの空白が広すぎた分の調整(修正依頼#1)。
   .contents自体の margin-top:5rem はTOPページのhero直後の余白と
   共通なので、hero を持たないサブページ(寄付ページ/選挙ボランティア
   ページ)の時だけ狭める。 */
.contents:has(> .donation-page),
.contents:has(> .sns-page) {
  margin-top: 1.5rem; /* 24px。旧スクショ実測ベース。ボランティアページで
    Figma dev-mode確認したところ実際は32pxだったため(下の.volunteer-page
    向けルールで上書き)、寄付/SNSページも確認でき次第見直す。 */
}

/* Figma dev-mode確認(2026-09-09): 寄付ページの#寄付ページ_TOP > Contents は
   auto-layout gap:56pxだった。.contentsの共通値(gap:5rem/80px)とは異なる
   ので、このページだけ上書き。 */
.contents:has(> .donation-page) {
  gap: 3.5rem; /* 56px */
}

/* Figma dev-mode確認(2026-09-07): ボランティアページはヘッダー→本文
   32px(旧1.5rem/24pxは推定値)。 */
.contents:has(> .volunteer-page) {
  margin-top: 2rem;
}

/* 寄付ページ専用の配色差し替え(2026-09-02 フィードバック)。
   ページ全体の背景色と、リンク/アクセントカラー(ハンバーガー、
   下線+矢印、注意事項アイコン、見出し左のバー、金額ラベル、
   FAQ連絡先リンクなど)が他ページのピンク系ではなく赤系という
   指摘。--color-link はサイト共通変数だが、body:has()で寄付
   ページの<body>だけに絞ってカスタムプロパティを上書きすれば、
   ヘッダー(サイト共通markup)を含む配下要素全てにカスケードして
   他ページには一切影響しない。既存の--color-donation(赤)を流用。
   正確な色番号がFigmaと違う場合は教えてください。 */
body:has(.donation-page) {
  --color-bg: #f5f6fa;
  --color-link: var(--color-donation);
}

/* 毎月の寄付金額ボタン(.amount-pill)は枠線に--color-primary(ピンク)
   を使っているので、上のカスタムプロパティ上書きでは変わらない。
   サンプルでは枠線も赤だったため個別に上書き。 */
body:has(.donation-page) .amount-pill {
  border-color: var(--color-donation);
}

/* ヘッダーの「JCPサポーターに登録する / ログイン」ボタンはサンプルの
   寄付ページには存在しない(クライアント指示: 「メニューにログイン
   ボタンはいらないです」)。ヘッダーはサイト共通markupなので、
   このページの<body>配下だけボタンを非表示にする(ハンバーガー
   メニュー自体は残す)。
   2026-10-02追記: .site-headerは justify-content:space-between で
   「左のCTAボタン/右のハンバーガー」の2点を両端に振り分けている
   (.global-navはposition:fixedなのでflexの並び計算に参加しない)。
   このページだけ上のルールで.btnを両方(header-cta--default/
   header-cta--menu-open)非表示にすると、flexの子要素がハンバーガー
   1つだけになり、space-betweenは子要素が1つだと先頭(=左端)に
   詰めてしまうため、donation.htmlだけハンバーガーが左に寄って
   見えるバグになっていた。正しくは常に右端固定なので明示的に
   flex-endを指定して解消。
   2026-10-03追記: 登録/ログインボタンを2つに分割した際、HTML側で
   header-cta--defaultを.btnクラスの付いた<a>単体から、.btnクラスの
   無い<div class="header-cta--default header-cta-group">に付け替えた
   ため、このセレクタ(.site-header > .btn)だけでは新しいラップdivを
   拾えなくなっていた。.header-cta-groupも明示的に対象へ追加。 */
body:has(.donation-page) .site-header > .btn,
body:has(.donation-page) .site-header > .header-cta-group {
  display: none;
}

body:has(.donation-page) .site-header {
  justify-content: flex-end;
}

/* ページ最下部の「サイトトップにもどる」。Figma dev-mode確認(Content >
   Link/Text, 2026-09-10)で下線はJCP/Text-Link(--color-text-link、
   #F80044)、矢印アイコンはSVG実データのstroke="#E31649"で別々の色
   だと判明(旧: 両方#E31649という推定値で下線側が誤りだった)。
   .page-content直下のリンクはこの1つだけなので、これで一意に特定できる
   (上のbody:has()による--color-link上書きの対象から除外)。 */
.page-content > .link-more--center {
  border-bottom-color: var(--color-text-link);
}

.page-content > .link-more--center .icon-more {
  color: #e31649;
}

/* Figma dev-mode確認(2026-09-09): ページ内リンク(jumplinks)に相当する
   レイヤーはFigma上に存在しなかった(実装時の独自追加だったため削除)。
   .donation-page__lead-copy は元は<p>だったが、実質的な見出しなので
   h1に変更(旧.donation-page__titleの「寄付ページ」という仮テキストは
   Figmaに存在しなかったため削除)。 */
.donation-page__lead-copy {
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.8; /* Figma dev-mode確認(Contents直下, 2026-09-10): 180%(旧1.6は推定値) */
  letter-spacing: 0; /* 旧0.03em。文字間を詰めて<br>位置での2行折り返しの
    余地を広げる(2026-09-02)。 */
}

/* 2026-10-02 クライアントやり取り: 見出し→直後のバナー画像の間隔について
   「実装が小さい気がする」との指摘に対し、デザインのfont-sizeは18px
   (=実装の1.125remと一致)、間隔は.donation-page .page-content側の
   基本gap(56px、2026-09-08追記の3ページ共通調整)から詰めている旨を
   回答したところ、「フォントは18pxのままでOK、見出し→画像の間隔を
   24pxにしてほしい」と確定。56px − 32px = 24pxとなるようmargin-topで
   個別調整(page-content自体のgapは他の間隔用に56pxのまま変えない)。 */
.donation-page__lead-copy + .donation-page__banner {
  margin-top: -2rem; /* 56px → 24px */
}

/* 旧: SP幅で3行に折り返すのを防ぐため48rem未満だけ15pxに縮小していた
   (ver2 修正#2)。393px幅で実測したところ基本サイズ18px/line-height
   1.6のままでも意図した2行(<br>の位置)にきちんと収まっており、
   クライアントからも「font-sizeが小さいのでデザインに合わせて
   ください」と指摘されたため、この縮小を撤回して基本サイズを
   そのまま使う(2026-09-02)。
   →その後、iPhone SE/Galaxy S系などの実測幅360〜373px程度だと、
   letter-spacingを詰めても18pxのままでは1行目「継続的なサポートが、
   日本共産党とともに」がわずかに収まりきらず、意図しない3〜4行に
   折り返してしまう不具合が確認された(クライアントSPスクショで確認、
   2026-09-02)。基本は18pxを維持しつつ、374px未満の狭い幅のときだけ
   17pxに1px縮小して2行を確実に保つ(15pxへの逆戻りはしない)。 */
@media (max-width: 23.3125rem) { /* 373px以下 */
  .donation-page__lead-copy {
    font-size: 1.0625rem; /* 17px */
  }
}

/* ファーストビュー画像。TOPページの.hero-pinと違いスクロール連動の
   演出はなく、素のイラスト画像1枚。コピーは画像に被らない仕様で
   (Figmaの見た目上は画像に重なって見えるが、クライアント指示により
   HTMLでは画像の上に独立して配置)、画像側(donation-hero.png)は
   スクリーンショットから書き出した仮アセット — 正式なアセットが
   Figmaから取得できるようになったら差し替えてください。 */
.donation-page__banner {
  width: 100%;
  border-radius: 0.5rem; /* 8px — Figma FRAME46(2026-09-30クライアント確認済み)、1rem/16pxだったのを修正 */
  overflow: hidden;
}

.donation-page__banner img {
  width: 100%;
}

/* 導入文3段落。サブページの.page-subsection pと同じ左寄せ本文スタイル
   なので、gapだけこのページ用に少し広げて流用。 */
.donation-page__lead {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.donation-page__lead p {
  text-align: left;
  font-size: 0.875rem; /* Figma dev-mode確認(Frame145, 2026-09-09): 14px(旧15px/0.9375remは推定値) */
  font-weight: 500; /* Figma: Medium(未指定→ブラウザのデフォルト/regularだったのを修正) */
  line-height: 1.66; /* Figma dev-mode確認(Frame145, 2026-09-09): 166%(旧1.8は推定値) */
}

/* 「毎月の寄付をする」「マンスリー寄付の特典」「よくある質問」
   「マンスリーサポーターが増えると〜」の各ブロック見出し。既存の
   .tab-label(緑のバー、サブ見出し用)より一段階大きく、スクリーン
   ショットではバーの色も赤系だったため、別コンポーネントとして追加。 */
.donation-page__heading {
  align-self: flex-start;
  padding: 0.125rem 0.5rem; /* Figma dev-mode確認(Title/Sub, 2026-09-09): 2px 8px(旧padding-left:16pxは推定値) */
  border-left: 0.1875rem solid var(--color-link); /* クライアント指定: 3px(旧4px) */
  font-weight: 700;
  font-size: 1.25rem; /* クライアント指定: 20px(旧22px) */
  line-height: 1; /* Figma dev-mode確認(Title/Sub, 2026-09-09): 100%(旧1.4は推定値) */
  letter-spacing: 0.05em; /* Figma dev-mode確認(Title/Sub, 2026-09-09): 1px(20px×0.05em)と一致 */
  /* 親.page-contentのtext-align:centerを上書き。1行に収まる見出しは
     見た目上どちらでも変わらないが、2行に折り返す「マンスリー
     サポーターが増えると〜」だけは中央寄せだと不自然だったため
     (修正依頼#4)、見出し全体を左寄せに統一。 */
  text-align: left;
}

/* 「マンスリーサポーターが増えると〜」の見出しだけFigma dev-mode確認
   (Group92 > Title/Sub, 2026-09-10)でline-height160%(他の見出しは
   100%)。2行見出しなので行間を広めに取る仕様。 */
.donation-page__heading--wrap {
  line-height: 1.6; /* 32px(20px×1.6) */
}

/* 「マンスリーサポーターが増えると〜」だけ、<br>で強制的に2行にして
   いる関係でSPだと2行目以降がさらに折り返し4行になってしまっていた
   問題(ver2 修正#3)。他の見出し(1行に収まる分は影響なし)は変えず、
   この見出しだけ48rem未満で少し詰めて確実に2行に収める。 */
@media (max-width: 47.9375rem) {
  .donation-page__heading--wrap {
    font-size: 1.0625rem;
    letter-spacing: 0;
    padding-left: 0.5rem;
    border-left-width: 0.1875rem;
  }
}

/* 注意事項ボックス */
.notice-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Figma dev-mode確認(Frame146): 間隔24px(旧16px) */
  background: var(--color-bg-sub);
  border-radius: 0.25rem; /* Figma dev-mode確認(Frame146, 2026-09-09): 4px(旧16px/1remは推定値) */
  padding: 1.5rem 0.5rem; /* Figma dev-mode確認(Frame146): 上下24px/左右8px(旧24px一律) */
}

.notice-box__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1; /* Figma dev-mode確認(Frame148, 2026-09-09): 100% */
  letter-spacing: 0.03em; /* Figma dev-mode確認(Frame148, 2026-09-09): 0.54px(18pxの3%) */
}

/* Figma dev-mode確認(Frame148, 2026-09-09): icon-park-solid:attention、
   24x24。旧実装は"!"を書いた22pxの丸バッジ(自作)だったが、実際のアイコン
   素材(赤丸+くり抜きの!マスク)に差し替え。色は--color-link経由で寄付
   ページの赤(--color-donation)にカスケードする。 */
.notice-box__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-link);
}

.notice-box ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.notice-box li {
  position: relative;
  padding-left: 1rem;
  text-align: left;
  font-size: 0.875rem; /* クライアント指定: 14px(旧15px) */
  line-height: 1.7;
}

.notice-box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--color-text-main);
}

/* 毎月の寄付金額セレクター。実体は隠しラジオ+ラベルのトグルボタン。
   デフォルトは500円(HTML側でchecked)。「毎月の寄付金額」表示欄は
   script.jsのchangeイベントで書き換える(donation-amount-pillsが
   存在するページだけで動くようガードしてあるので他ページには影響なし)。 */
.amount-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem; /* クライアント指定(推定): ボタン同士のmarginは8px */
  width: 100%;
}

.amount-pill-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.amount-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  height: 3.375rem; /* Figma dev-mode確認(Jdonation/Button/Nomal, 2026-09-09): 54px(旧3.75rem/60pxは推定値) */
  border-radius: 5rem; /* Figma dev-mode確認(Jdonation/Button/Nomal, 2026-09-09): 80px(旧6rem/96pxは推定値、どちらもピル形状には十分な値だが実値に合わせる) */
  border: 0.0625rem solid var(--color-primary); /* Figma dev-mode確認(Jdonation/Button/Nomal, 2026-09-09): 1px(旧0.125rem/2pxは推定値) */
  background: var(--color-white);
  font-weight: 700;
  font-size: 1rem; /* Figma dev-mode確認: Jdonation/Button/Nomal 16px(旧17px) */
  line-height: 1; /* Figma dev-mode確認(Jdonation/Button/Nomal, 2026-09-09): 100% */
  letter-spacing: 0.03em;
  color: var(--color-text-main);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.amount-pill__badge {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-link);
}

/* 「おすすめ！」バッジ付きのピルはバッジ分2行になる — 数字側の
   フォントサイズだけ他のピルと合わせて少し詰める。 */
.amount-pill--recommend .amount-pill__value {
  font-size: 0.9375rem;
}

.amount-pill-input:checked + .amount-pill {
  background: var(--color-text-main);
  border-color: var(--color-text-main);
  color: var(--color-white);
}

.amount-pill-input:checked + .amount-pill .amount-pill__badge {
  color: var(--color-primary);
}

.amount-pill-input:focus-visible + .amount-pill {
  outline: 0.125rem solid var(--color-link);
  outline-offset: 0.125rem;
}

/* amount-gridとamount-displayの間のキャプション。Figma dev-mode確認
   (Group 85 "もし10名の方が1年間サポートしてくれたら…", 2026-09-09)。
   スクリーンショット起こし時には存在に気づけなかった要素。
   .page-subsection p { text-align:left; font-size:0.9375rem; line-height:1.8 }
   の方が詳細度で負けてしまう(tab-label/amount-display__noteと同じ問題)
   ため、親クラス.page-subsectionを足して詳細度を上げる。 */
.page-subsection .amount-hint {
  width: 100%;
  text-align: center;
  color: var(--color-text-main); /* Figma仕様: JCP/Text-Main、#131314 */
  font-size: 0.75rem; /* 12px */
  font-weight: 500;
  line-height: 1; /* 100% */
}

/* 選択金額の表示欄。上下の太い罫線+内側にもう1本細い罫線で
   「金額」と「注釈」を区切る、スクリーンショット通りの2分割構成。 */
.amount-display {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0 1.5rem; /* Figma dev-mode確認(Frame171): 上16px(旧24px)/下24pxは変更なし */
  border: 0.0625rem solid var(--color-text-main); /* Figma dev-mode確認(Frame163, 2026-09-09): 全周1px(旧: 上下のみ2px)。確認済み(2026-09-16): 全要素box-sizing:border-box(style.css冒頭)のおかげで、この1px枠は.section幅の内側に収まる形で計算される。320px〜1920pxの間で26パターン実測したが左右のはみ出しは一切なし(誤差ゼロ)。安全と判断。 */
}

.amount-display__row {
  display: flex;
  align-items: flex-end; /* Figma dev-mode確認(Frame171, 2026-09-09): flex-end(旧baselineは推定) */
  justify-content: center;
  gap: 1rem; /* 8pxグリッド: 12px→16px */
  padding-bottom: 1rem;
  border-bottom: 0.125rem solid var(--color-gray); /* Figma dev-mode確認(Arrow 1, 2026-09-09): 2px(旧0.0625rem/1pxは推定値) */
}

.amount-display__label {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4; /* Figma dev-mode確認(Frame171, 2026-09-09): 140% */
  color: var(--color-donation-text); /* Figma dev-mode確認(Frame171, 2026-09-09): --JCP-Text-donation。Button/Lage_Strongと同じトークン名なので同色(#E0150F)を適用 */
}

.amount-display__value {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: 2.5rem; /* Figma dev-mode確認(Group84 "500", 2026-09-09): 40px(旧2.25rem/36pxは推定値) */
  line-height: 1; /* Figma dev-mode確認: 100% */
}

.amount-display__value .amount-display__unit {
  font-family: var(--font-base);
  font-size: 1rem; /* Figma dev-mode確認(Group84 "円", 2026-09-09): 16px(旧1.25rem/20pxは推定値) */
  line-height: 1.4; /* Figma dev-mode確認: 140% */
  margin-left: 0.125rem;
}

/* 「ピープとジョーイの新シーズンが作れます」はスクリーンショットに
   書かれていた文言をそのまま転記したもの — 寄付の使い道の例として
   出すには文脈が読み取れない一文なので、内容についてはご確認を
   お願いします(誤字/仮テキストの可能性もあります)。 */
/* .page-subsection p { text-align:left } の方が詳細度が高く負けて
   しまっていたため、親クラスを足して詳細度を上げてセンタリングを
   確実に効かせる。 */
.amount-display .amount-display__note {
  text-align: center;
  font-weight: 700;
  font-size: 0.9375rem;
  /* クライアント指摘: 「目が滑るのでデザインのように背景に白に
     してください」— ページ背景色(寄付ページは薄いラベンダー系に
     変更済み)に対してこのテキストだけ白背景で視認性を上げる。 */
  background: var(--color-white);
  padding: 0.5rem;
  border-radius: 0.5rem;
}

/* PC-only pinch fix, bounded (unlike most pinch fixes in the 900px+
   block near the layout grid, which apply at every PC width — this one
   deliberately lives down here, right after .amount-display__row's own
   base rule, not up there. Same specificity + a later media query
   still loses to an unconditional rule that comes AFTER it in the
   file, so putting this override before the base rule silently did
   nothing except get beaten by align-items:flex-end — that was the
   exact bug reported and reverted once already.) .amount-display__row
   ("毎月の寄付金額" + the big amount, e.g. "1,000円") needs ~277px
   inline (112px label + 16px gap + up to ~150px for the widest value,
   "10,000円") to stay on one row. .page-main only regains that much
   room once the viewport reaches ~960px (confirmed empirically:
   label+value share a row from 960px, sit on separate rows below it)
   — below that, "10,000円"/"1,000円" were wrapping mid-character
   ("毎月の寄付金<br>額" / "1,000<br>円"). Both the label and the value
   are Figma dev-mode-confirmed exact sizes (16px / 40px), so unlike
   .section-title__main etc. we don't want to shrink them here —
   instead stack the row as two whole lines, label above/value below,
   so each piece stays intact at its exact Figma font-size. Forced with
   flex-direction:column (not just flex-wrap) so every amount breaks
   the same way through this whole band, including short ones like
   "500円" that would otherwise still fit inline — client asked for one
   consistent look across all amounts rather than only the ones that
   don't fit. The base rule's align-items:flex-end is meant for the ROW
   cross-axis (vertical) when this is a row — switching to
   flex-direction:column flips the cross axis to horizontal, so that
   same flex-end would push both lines to the right edge instead of
   the bottom; align-items is reset to center below so that can't
   happen. justify-content:center is also re-stated (it now governs the
   vertical axis instead of horizontal) though it was already center in
   the base rule. The 61.25rem (980px) upper bound is the 960px natural
   break point + a small buffer; past it this rule doesn't apply at
   all, so it's a single inline row exactly like Figma, same as
   narrower SP/tablet widths which never enter this media query in the
   first place. */
@media (min-width: 56.25rem) and (max-width: 61.25rem) {
  .amount-display__row {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.donation-page .btn--donate {
  margin-top: 0.5rem;
}

/* CTAボタン。他ページの.btn--strong(ピンク地+黒文字)とは別配色で、
   赤地+白文字のベタ塗り仕様だったため専用モディファイアを追加。 */
.btn--donate {
  background: var(--color-donation-text); /* Figma dev-mode確認(Button/Lage_Strong Fillパネル実測, 2026-09-09): #E0150F */
  color: var(--color-white);
  border: 0.125rem solid var(--color-donation-text); /* Figma dev-mode確認(Button/Lage_Strong, 2026-09-09): 2px、塗りと同色 */
}

.btn--donate:hover,
.btn--donate:active {
  filter: brightness(0.88);
}

/* マンスリー寄付の特典 ①②。TOPページの.benefit-item(丸数字バッジ+
   タイトル+画像+口コミ)ほど要素が多くないため、テキスト+画像だけの
   軽量版として別コンポーネントにしています。 */
.perk-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
}

.perk-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

/* ①②の折り返し2行目以降を1文字分ぶら下げインデント(修正依頼#4)。
   text-indentを負値にして1行目を頭出しし、padding-leftで折り返し
   以降だけ①/②の文字幅ぶん字下げする定番テクニック。 */
.perk-item__text {
  width: 100%;
  text-align: left;
  text-indent: -1em;
  padding-left: 1em;
  font-weight: 700;
  line-height: 1.6;
}

/* .page-subsection p { font-size:0.9375rem }の方が詳細度(クラス+要素)
   で.perk-item__text単体より高く、実際には15pxで表示されてしまって
   いた不具合(tab-label/amount-display__noteと同じ問題)。親クラスを
   足して詳細度を上げ、クライアント指定の16pxを確実に効かせる。 */
.page-subsection .perk-item__text {
  font-size: 1rem; /* クライアント指定: 16px(以下同様、旧17px相当) */
}

.perk-item__image {
  width: 100%;
  max-width: 22.5rem; /* Figma dev-mode確認: 360px(旧320px) */
  margin: 0 auto;
  aspect-ratio: 361 / 178; /* Figma dev-mode確認(Group88 > Frame150, 2026-09-10): 画像はコンテナ内でクロップ表示されている(角丸+overflow hidden) */
  overflow: hidden;
  border-radius: 0.5rem; /* Figma dev-mode確認(Frame150, 2026-09-10): 8px(旧: 角丸なし) */
}

.perk-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Figma側は特典1の画像を上下でクロップして表示しているため */
  display: block;
}

/* 特典2(寄付者限定のイベント)だけ、Figma dev-mode確認(Group87 > Frame151,
   2026-09-10)で特典1とは異なる比率・内側パディングが指定されていた。
   コンテナ361×183pxに対し画像は341×177px(上1px/右10px/下5px/左10pxの
   内側パディングで囲まれている)。特典1(edge-to-edge)とは別仕様のため
   個別に上書き。 */
.perk-list .perk-item:nth-of-type(2) .perk-item__image {
  aspect-ratio: 361 / 183;
  padding: 0.0625rem 0.625rem 0.3125rem; /* 1px 10px 5px */
}

/* よくある質問。アコーディーム化はスクリーンショットからは判断できず
   (開閉トリガーらしき矢印/アイコンが見当たらなかった)、ひとまず全文
   常時表示の静的な一覧にしてあります。将来的にアコーディオンにする
   場合はQ/A行にボタン化+details要素などへの置き換えを検討してください。 */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* クライアント指定: 質問同士のmarginは40px */
  width: 100%;
  text-align: left;
}

.faq-item {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Figma dev-mode確認(Frame172/Frame200, 2026-09-10): 16px(旧8px) */
}

/* よくある質問: 見出し→質問一覧の間隔だけFigma dev-mode確認(Frame173)で
   40px(旧24px、.page-subsectionの基本gap分)。他の.donation-page__heading
   (毎月の寄付をする/マンスリー寄付の特典)は直後が.faq-listではないので
   このセレクタでは影響しない。 */
.donation-page__heading + .faq-list {
  margin-top: 1rem; /* 24px(gap) + 16px = 40px */
}

.faq-item__body {
  font-weight: 500; /* Figma: Medium(未指定→ブラウザのデフォルト/regularだったのを修正) */
  color: var(--color-text-main); /* Figma dev-mode確認(2026-09-10): JCP/Text-Main(旧--color-text-subは推定値で誤り) */
  /* Figma dev-mode確認(Frame199, 2026-09-10): 本文を白背景+角丸のボックスで
     囲む仕様(amount-display__noteと同じ「白背景で視認性を上げる」パターン)。 */
  background: var(--color-white);
  padding: 0.5rem; /* 8px */
  border-radius: 0.25rem; /* 4px */
}

.faq-contact {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  text-align: left;
  font-weight: 500; /* Figma: Medium(未指定→ブラウザのデフォルト/regularだったのを修正) */
  line-height: 1.8;
}

/* .page-subsection p { font-size:0.9375rem; font-weight:500;
   line-height:1.8 }の方が詳細度(クラス+要素)で.faq-item__q/
   .faq-item__a/.faq-item__body/.faq-contact p単体より高く、指定して
   いたスタイルが実際には負けて表示されてしまっていた不具合
   (tab-label/amount-display__noteと同じ問題、2026-09-02発見/
   2026-09-10にfont-weight・line-height・letter-spacingでも同じ問題を
   再確認)。親クラスを足して詳細度を上げ、クライアント指定を確実に
   効かせる(Q/A=16px、本文/連絡先=14px)。 */
.page-subsection .faq-item__q,
.page-subsection .faq-item__a {
  font-size: 1rem; /* 16px */
  font-weight: 700;
  line-height: 1; /* Figma dev-mode確認(2026-09-10): 100%(旧1.6は推定値) */
  letter-spacing: 0.03em; /* Figma dev-mode確認(2026-09-10): 0.48px(16px×0.03em)と一致 */
}

.page-subsection .faq-item__body {
  font-size: 0.875rem; /* 14px */
  line-height: 1.6; /* Figma dev-mode確認(Frame199, 2026-09-10): 160%(旧1.8は推定値) */
}

/* Figma dev-mode確認(Q&A > 担当窓口…, 2026-09-10): 連絡先ブロックは
   14pxではなく16px/line-height160%だった(旧: faq-item__bodyと同じ
   14px/180%という推定値で誤り)。 */
.page-subsection .faq-contact p {
  font-size: 1rem; /* 16px */
  line-height: 1.6; /* 160% */
}

.faq-contact a {
  color: var(--color-link);
  text-decoration: underline;
  transition: opacity 0.15s ease;
}

.faq-contact a:hover,
.faq-contact a:active {
  opacity: 0.65;
}

/* マンスリーサポーターが増えると〜。スクリーンショットには矢印や
   リンクらしい装飾が見当たらなかったため、クリック不可の静的カード
   として実装しています。実際にリンク/アコーディオンにする場合は
   要相談。 */
.info-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Figma dev-mode確認(Frame174, 2026-09-10): 8px(旧16px は推定値) */
  width: 100%;
}

.info-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Figma dev-mode確認(Frame152/153/154, 2026-09-10): 3枚とも高さは
     約68pxで揃っており、行数の違い(1行/2行)に応じてpaddingが微妙に
     違うだけ(例: Frame152は上14/右46/下10/左23、Frame153は上下23/
     左右20、Frame154は上下12/左右13、いずれも合計するとだいたい
     68pxに収まる)。カード1の左右非対称paddingはアイコン用の余白かと
     思い確認したところ、実際はアイコン無しの単なる数値のズレとのこと
     だったので、見た目通り3枚とも左右対称・中央揃えの共通スタイルに
     統一(12px 20px、2026-09-10クライアント確認のスクショに合わせて
     視覚的に揃えた)。 */
  padding: 0.75rem 1.25rem; /* 12px 20px */
  min-height: 4.25rem; /* 68px */
  border-radius: 0.5rem; /* Figma dev-mode確認(Frame152/153/154, 2026-09-10): 8px(旧12pxは推定値) */
  background: var(--color-white);
  font-weight: 500; /* Figma dev-mode確認(2026-09-10): Medium(旧700/Boldは推定値で誤り) */
  font-size: 0.875rem; /* Figma dev-mode確認(2026-09-10): 14px(旧15pxは推定値) */
  line-height: 1.6; /* 160% */
}

/* ====================================================================
   News card accordion — 2026-10-02 (popup-modalから変更)
   当初は現行本番のjQuery + Magnific Popup相当をvanilla JSで自前実装した
   popup-modal方式(別要素の#newsModalへappendChildしてposition:fixedの
   オーバーレイ表示)だったが、本番デプロイ後に「パネルの中身が空(閉じる
   ボタンだけ)・暗転オーバーレイが出ない・記事本文がページの上下に漏れて
   見える」という不具合が発生。script.js/style.cssとも正しい内容が実際に
   本番へデプロイされていること、jQuery/Magnific Popup等の競合スクリプトが
   読み込まれていないことまで確認したが、position:fixedオーバーレイが
   実機で機能しない根本原因は特定できなかった(ローカル環境では再現できず)。
   公開期限の都合もあり、appendChildもposition:fixedの重ね表示も一切
   使わない、その場で開閉するアコーディオン方式に変更。記事本文
   (.news-card__body、旧.news-modal__content相当)は最初から各
   <li class="news-card">の内側にあり、クリックしてもDOM上の位置は
   一切動かない — 要素移動や重ね表示に起因するこの種の不具合が構造的に
   起こり得なくなる。 */
.news-card__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.news-card__toggle:hover,
.news-card__toggle:active {
  color: var(--color-link);
}

/* .icon-moreは元々「→」(右向き)の矢印。閉じている間はそのまま「開く」の
   合図として使い、開いたら90度回して「↓」にする(アイコン画像自体は
   他の.icon-more使用箇所と共有しているため、回転だけで表現)。 */
.news-card__toggle-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.news-card__toggle[aria-expanded="true"] .news-card__toggle-icon {
  transform: rotate(90deg);
}

.news-card__body {
  display: none;
}

.news-card__body.is-active {
  display: block;
  padding-top: 1rem;
}