/* ==========================================================================
   TOKENS — foundation — 色・フォント・余白の基礎設定
   ==========================================================================
   全セクション共通の「土台」。個別セクションのスタイルは style.css に書く。
   命名規則は ../../../CLAUDE.md を参照。
   ========================================================================== */

:root{
  /* 色 -------------------------------------------------------------------
     クライアント指定のブランドカラー。詳細（使用比率の方針等）はコード注記.md参照。 */
  --color-bg-base: #ffffff;
  --color-bg-alt: #ebebe8;
  --color-bg-soft: #f5f2ea; /* USAGE専用の薄いベージュ（暫定） */
  --color-line: #d8d5cf;
  --color-ink: #222222;
  --color-ink-soft: #5c5955;
  --color-ink-faint: #8f8b85;
  --color-accent: #311a53;
  --color-accent-soft: rgba(49, 26, 83, 0.08);
  --color-gold: #c9ac71; /* 紫背景の上でだけ使う控えめなゴールド */
  --color-button-text: #ffffff;

  /* フォント ---------------------------------------------------------------
     数字はLato、日本語はShippori Minchoにフォールバックさせている。
     詳細はコード注記.md参照。 */
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-label: "Lato", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* 文字サイズ・行間・文字間 ---------------------------------------------------
     本文の基準サイズは一般的なWeb標準より大きめの18px相当。詳細はコード注記.md参照。 */
  --fs-body: 1.125rem;      /* 約18px */
  --fs-title: clamp(1.75rem, 1.3rem + 2.3vw, 2.625rem); /* 約42px。全ての大見出しに共通 */
  --lh-body: 1.95;
  --lh-heading: 1.6;
  --ls-body: 0.03em;
  --ls-heading: 0.03em;

  /* 余白・レイアウト --------------------------------------------------------
     Figmaデザインのゆったりした余白感を基準に、一般的なLPよりやや広めに設定。 */
  --edge: clamp(24px, 6vw, 96px);
  --section-padding: clamp(80px, 12vw, 160px);
  --container-width: 1040px;

  /* ボタンのタップ領域。60〜80代の操作を考慮し、一般的な44pxより大きめに確保。 */
  --tap-min-height: 56px;
}


/* ==========================================================================
   RESET — base — 最低限のリセット
   ========================================================================== */

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

html{
  -webkit-text-size-adjust: 100%;
  /* ページ内リンク（例: 「寄付額を選択する」→選べる寄付の形）をなめらかに
     スクロール移動させる（装飾ではなく、画面が瞬時に切り替わる違和感をなくす目的） */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  margin: 0;
  /* スマホ幅で右端に1px程度の隙間・線が入る不具合の原因（サブピクセルの丸め誤差等）を
     特定しきれなかったため、微小なはみ出しがあっても横スクロール・隙間が出ないよう
     bodyに指定している。横スクロールさせる要素を持たない設計のため安全。 */
  overflow-x: hidden;
  background: var(--color-bg-base);
}

/* 【重要】共通ヘッダー・フッターに影響させないため、bodyではなく:where(#body_main)の
   中だけに指定している。詳細はコード注記.md参照。 */
:where(#body_main){
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  /* 【注意】text-wrap: pretty は指定しないこと。詳細はコード注記.md参照。 */
}

:where(#body_main) img,
:where(#body_main) svg{ display: block; max-width: 100%; }

:where(#body_main) a{ color: inherit; }

:where(#body_main) h1,
:where(#body_main) h2,
:where(#body_main) h3,
:where(#body_main) p,
:where(#body_main) ul,
:where(#body_main) ol{ margin: 0; }

/* 【注意】スクリーンリーダー専用（見た目には表示しない）。fieldsetのlegend等に使用。
   Bootstrap 5にも同名のクラス（.visually-hidden）があるため、u-プレフィックスで
   区別している（詳細はコード注記.md参照）。 */
.u-visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* スクロールでのフェードイン演出用ユーティリティ。詳細はコード注記.md参照。 */
.u-reveal{
  width: 100%; /* Safari対策。詳細はコード注記.md参照 */
}
.js-ready .u-reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 3.2s cubic-bezier(.16,1,.3,1), transform 3.2s cubic-bezier(.16,1,.3,1);
}
.js-ready .u-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .u-reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ==========================================================================
   TYPOGRAPHY — type — 見出し・本文の共通スタイル
   ========================================================================== */

/* 各セクションの見出しはSVG画像なので、.heading-jpは見出し画像をまとめる共通クラス。
   フォント関連の指定は、画像が読み込めなかった場合のalt文字の表示用に残している。
   実際の画像サイズは下の「.heading-jp img」で指定。 */
.heading-jp{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}
.heading-jp img{
  display: block;
  height: calc(1em * 1.2); /* 見出し画像は--fs-titleの1.2倍の高さ */
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
/* 見出しが2枚の画像（複数行）に分かれる場合は縦に並べる（closing__title等） */
.heading-jp:has(> img + img){
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
}


/* ==========================================================================
   BUTTON — button — ボタン（寄付CTA・ナビゲーション）
   ==========================================================================
   主要CTAは.button--primary、副次的な導線は.button--ghost。矢印アイコンは
   Phosphor Icons「arrow-right」のSVGを直接埋め込み。詳細はコード注記.md参照。
   ========================================================================== */

.button{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: var(--tap-min-height);
  padding: 0 2.2em;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 8px; /* ボタンの基本の角丸（個別に上書きする箇所のみ例外） */
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background-color .2s cubic-bezier(.45,0,.55,1), border-color .2s cubic-bezier(.45,0,.55,1), color .2s cubic-bezier(.45,0,.55,1);
}
.button:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* 主要CTA。ピル形状・グラデーションはこの基本形で共通。矢印の白丸バッジ
   （.button__arrow内の円形の背景）は.plan__submit配下だけの特別な装飾で、
   それ以外（hero__cta・closing__cta）は背景のない矢印アイコンのみ。 */
.button--primary{
  position: relative;
  isolation: isolate;
  display: inline-flex;
  justify-content: space-between;
  gap: 1em;
  padding: 0.7em 0.7em 0.7em 1.6em;
  border-radius: 999px; /* 丸みの強いピル形状 */
  background: linear-gradient(160deg, #2c2c2c, #000000);
  border-color: transparent;
  color: var(--color-button-text);
  text-align: left;
}
/* 【注意】var()を使わず色を直接指定し、!importantも付けている。詳細はコード注記.md参照。 */
.button--primary:visited{
  color: #ffffff !important;
}
/* 【注意】:visitedより後ろに書くこと（同じ詳細度・!important同士は記述順で
   勝敗が決まる）。詳細はコード注記.md参照。 */
.button--primary.is-disabled{
  color: #ffffff !important;
}
/* ホバーで「黒→白」に色を反転させるための白い面。グラデーションはCSSで滑らかに
   切り替えられないため、白い面（::before）の透明度を変えて切り替えている。
   z-index:-1＋isolationで、文字・矢印より下、ボタン本体の背景より上に置く。 */
.button--primary::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--color-bg-base);
  opacity: 0;
  transition: opacity .2s cubic-bezier(.45,0,.55,1);
}
/* ホバーできる端末（マウス）だけで反転する。タッチ端末では、タップ後に反転した状態が
   残り続けるのを避けるため何も起きない。押せない状態（.is-disabled）でも反転しない。 */
@media (hover: hover){
  .button--primary:not(.is-disabled):hover{
    color: var(--color-ink);
  }
  .button--primary:not(.is-disabled):hover::before{
    opacity: 1;
  }
}
/* white-space:nowrapで、<br>で指定した箇所以外の意図しない折り返しを防ぐ。
   詳細はコード注記.md参照。 */
.button__label{
  line-height: 1.5;
  white-space: nowrap;
}
.button__arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-arrow-right{
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.button--ghost{
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink-faint);
}
/* 【注意】var()を使わず直接指定・!important付き（理由は.button--primary:visited参照）。
   --color-inkの値（#222222）が変わった場合は、ここも合わせて変更すること。 */
.button--ghost:visited{
  color: #222222 !important;
}
.button--ghost:hover{
  border-color: var(--color-ink);
  transform: translateY(-2px);
  color: var(--color-ink);
}


/* ==========================================================================
   LAYOUT — layout — 共通レイアウトユーティリティ
   ========================================================================== */

/* 【注意】共通ヘッダー・フッター側の.containerと衝突しないよう別名にしている。
   詳細はコード注記.md参照。 */
.lp-container{
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: var(--edge);
  padding-right: var(--edge);
}

/* 全幅にしたい場合はページ専用CSSで上書きしてよい、との先方確認済み。
   詳細はコード注記.md参照。 */
body > .container{
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* セクション背景の切り替え（白基調のサイトに合わせ、白とグレージュを交互に使う）
   各セクションのルート要素にどちらか一方を付ける。 */
.bg-base{ background: var(--color-bg-base); }
.bg-alt{ background: var(--color-bg-alt); }

/* スクロール演出は基本使わない方針の例外として、ギャラリーのみCSSアニメーションを
   使用している（style.css参照）。詳細はコード注記.md参照。 */
/* ==========================================================================
   HERO — hero — トップビジュアル
   ========================================================================== */

.hero{
  position: relative;
  overflow: hidden;
  /* 左右の余白は内側の.hero__innerだけに持たせる（二重掛けを避ける）。
     詳細はコード注記.md参照。 */
  padding: clamp(32px, 6vw, 64px) 0 var(--section-padding);
  text-align: center;
}

/* ファーストビューは紫背景・白文字。詳細（ロゴ・背景画像の扱い）はコード注記.md参照。 */
.hero--purple{
  background: var(--color-accent);
  color: var(--color-button-text);
}
.hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 写真の上に重ねる紫の半透明オーバーレイ。文字の可読性とブランドカラーの
   存在感を両立するため、不透明度は60%程度。 */
.hero--purple::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(49, 26, 83, 0.6);
}
.hero--purple .hero__label,
.hero--purple .hero__lead{
  color: var(--color-button-text);
}
.hero--purple .hero__cta{
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-accent);
}
/* 【注意】var()を使わず直接指定・!important付き（理由はfoundation.cssの
   .button--primary:visited参照。requirements.md 169章）。--color-accentの値
   （#311a53）が変わった場合は、ここも合わせて変更すること。 */
.hero--purple .hero__cta:visited{
  color: #311a53 !important;
}
.hero--purple .hero__cta::before{
  display: none; /* 塗りが単色のため、白い面は不要（背景色そのものを切り替える） */
}
.hero--purple .hero__cta .button__arrow{
  color: var(--color-accent);
  transition: color .2s cubic-bezier(.45,0,.55,1);
}
/* ホバーで「ゴールド→紫」に反転（背景・枠線が紫、文字・矢印がゴールド） */
@media (hover: hover){
  .hero--purple .hero__cta:hover{
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-gold);
  }
  .hero--purple .hero__cta:hover .button__arrow{
    color: var(--color-gold);
  }
}

.hero__inner{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.hero__mark{ margin-bottom: 4px; }

.hero__label{
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}

/* 見出しはインラインSVG（1文字ずつフェードインする演出のため）。表示演出の詳細は
   コード注記.md参照。 */
.hero__title{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
}
.hero__title-svg{
  display: block;
  height: calc(var(--fs-title) * 1.2); /* 見出し画像は--fs-titleの1.2倍の高さ */
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  overflow: visible; /* 個々の文字（path）がtranslateYで動く際に見切れないようにする */
}
/* 文字（path）1つずつを個別にフェードイン・アップさせる。translateYは%指定＋
   transform-box: fill-boxで各文字自身の大きさを基準にし、文字サイズが変わっても
   動く距離が破綻しないようにしている。色は紫背景で視認できるよう白で塗る。 */
.hero__title-svg path{
  fill: var(--color-button-text);
  opacity: 0;
  transform: translateY(60%);
  transform-box: fill-box;
  transform-origin: center bottom;
  /* 1文字あたりのtransition時間。index.html末尾のJSのcharDurationMsと合わせる */
  transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}
.hero__title.is-visible .hero__title-svg path{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .hero__title-svg path{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* 見出し以外（ロゴ・ラベル・リード文・ボタン）は、見出しの演出が終わるまで
   非表示にしておき、スクリプト側でタイミングを揃えてまとめて表示する */
.hero__inner--sequenced .hero__mark,
.hero__inner--sequenced .hero__label,
.hero__inner--sequenced .hero__lead,
.hero__inner--sequenced .hero__cta{
  opacity: 0;
  transform: translateY(16px);
  /* 末尾の3行は、ボタン（.hero__cta）のホバー時の色の切り替え用。この指定で.buttonの
     transitionを上書きしているため、ここにも書かないとホバーで色が一瞬で切り替わる */
  transition: opacity 2.5s cubic-bezier(.2,.7,.2,1), transform 2.5s cubic-bezier(.2,.7,.2,1),
              background-color .2s cubic-bezier(.45,0,.55,1), border-color .2s cubic-bezier(.45,0,.55,1), color .2s cubic-bezier(.45,0,.55,1);
}
.hero__inner--sequenced.is-visible .hero__mark,
.hero__inner--sequenced.is-visible .hero__label,
.hero__inner--sequenced.is-visible .hero__lead,
.hero__inner--sequenced.is-visible .hero__cta{
  opacity: 1;
  transform: translateY(0);
}

.hero__lead{
  max-width: 34em;
  font-size: 1rem; /* 本文基準（18px）よりやや小さく */
  letter-spacing: 0.05em;
}

.hero__cta{ margin-top: 12px; }

/* スマホ幅（720px以下）の調整。ロゴは縦幅に関係なく常に非表示。詳細はコード注記.md参照。 */
@media (max-width: 720px){
  /* 【重要】FVの高さは、共通ヘッダー・下の固定バーの間にきっちり収める。実際の高さは
     末尾のスクリプト（applyHeroSafeHeight）が実測してCSS変数にセットする。JS未動作時は
     下記のフォールバック値を使う。詳細はコード注記.md参照。 */
  .hero{
    /* 【注意】上だけ下より16px広い（意図的な非対称）。詳細はコード注記.md参照。 */
    padding-top: calc(clamp(32px, 6vw, 64px) + 16px);
    padding-bottom: clamp(32px, 6vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh; /* 100dvh未対応の古いブラウザ向けフォールバック */
    min-height: 100dvh;
    min-height: calc(100dvh - var(--hero-header-h, 149px) - var(--hero-footer-h, 56px)); /* JSが動く前の一瞬だけのフォールバック */
    min-height: var(--hero-safe-height, calc(100dvh - var(--hero-header-h, 149px) - var(--hero-footer-h, 56px))); /* JSが実測した正確な値（優先） */
  }
  .hero__mark{
    display: none;
  }
  .hero__label{
    font-weight: 700;
  }
  .hero__lead-break{ display: none; }
}

/* ブラウザの縦幅が小さいとき、FVの中にボタンが収まるよう、縦幅に応じてロゴを非表示に
   し、それでも足りない縦幅ではさらに余白・文字を詰める。このブロックをまるごと削除
   すれば元の表示に戻る。【注意】スマホ幅（720px以下）はロゴが既に常時非表示のため、
   このブロックは実質デスクトップ幅のみ有効。詳細はコード注記.md参照。 */
@media (max-height: 836px){
  .hero__mark{ display: none; }
}
/* 【注意】ロゴが非表示になるこの縦幅・デスクトップ幅では、上下の余白を揃えるため
   下側も詰めている。詳細はコード注記.md参照。 */
@media (max-height: 836px) and (min-width: 721px){
  .hero{
    padding-bottom: clamp(32px, 6vw, 64px);
  }
}
/* 縦幅が約630px以下: さらに、上の余白・要素間の間隔・見出しとリード文の大きさを少し詰める */
@media (max-height: 630px){
  .hero{ padding-top: 24px; padding-bottom: 24px; }
  .hero__inner{ gap: 10px; }
  .hero__label{ line-height: 1.6; }
  .hero__title-svg{ height: calc(var(--fs-title) * 0.9); }
  .hero__lead{ font-size: 0.9rem; line-height: 1.7; }
  .hero__cta{ margin-top: 4px; }
}


/* ==========================================================================
   PHILOSOPHY — philosophy — 理念・活動の説明
   ========================================================================== */

/* 背景の雲は「アニメーション基本なし」方針の例外。詳細はコード注記.md参照。 */
.philosophy{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--section-padding) 0;
}

.philosophy__cloud{
  position: absolute;
  z-index: 0;
  /* サイズは「1238px幅のブラウザで横幅40〜50%程度、それより広い画面では
     それ以上大きくしない」という指定に合わせ、vw指定＋px上限のmin()。 */
  width: min(50vw, 620px);
  height: auto;
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}
.philosophy__cloud--a{
  top: 2%;
  left: -10%;
  animation: cloud-drift-a 64s ease-in-out infinite;
}
.philosophy__cloud--b{
  top: 40%;
  right: -12%;
  width: min(44vw, 540px);
  animation: cloud-drift-b 78s ease-in-out infinite;
}
.philosophy__cloud--c{
  bottom: 0%;
  left: -8%;
  width: min(38vw, 460px);
  animation: cloud-drift-c 70s ease-in-out infinite;
}
@keyframes cloud-drift-a{
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3%); }
}
@keyframes cloud-drift-b{
  0%, 100% { transform: scaleX(-1) translateX(0); }
  50% { transform: scaleX(-1) translateX(4%); }
}
@keyframes cloud-drift-c{
  0%, 100% { transform: scaleX(-1) translateX(0); }
  50% { transform: scaleX(-1) translateX(-3%); }
}
@media (prefers-reduced-motion: reduce){
  .philosophy__cloud--a,
  .philosophy__cloud--b,
  .philosophy__cloud--c{ animation: none; }
  .philosophy__cloud--b{ transform: scaleX(-1); }
  .philosophy__cloud--c{ transform: scaleX(-1); }
}

.philosophy__inner{
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2em;
  text-align: left; /* 改行なしの流し込み文章のため左揃え */
}

.philosophy__text{
  letter-spacing: 0.05em;
}


/* ==========================================================================
   GALLERY — gallery — 活動写真ギャラリー（横一列・自動無限スクロール）
   ==========================================================================
   gallery__row を2セット横に並べ、track全体を-50%までtranslateXし続けることで
   途切れなくループする「無限スライドショー」を実現している（JS不要）。
   2セット目はaria-hidden（HTML側で指定）。
   ========================================================================== */

.gallery{
  overflow: hidden;
}

.gallery__track{
  display: flex;
  width: max-content;
  animation: gallery-scroll 36s linear infinite;
}

.gallery__row{
  display: flex;
  flex-shrink: 0;
}

/* 【重要】隙間は画像同士のmargin-rightで均等に付けること（行の間にだけ足すと
   ループの継ぎ目がズレる）。写真はクロップしない方針で、高さ固定・幅は実寸の
   aspect-ratioから自動計算。詳細はコード注記.md参照。 */
.gallery__item{
  height: 422px;
  flex-shrink: 0;
  background: var(--color-line); /* 画像読み込み前・読み込み失敗時の背景 */
  overflow: hidden;
  margin-right: 2px;
}

/* スマホ幅だけ1枚を縮小し、隣の写真が少し見えるようにする（高さを基準に縮小） */
@media (max-width: 720px){
  .gallery__item{
    height: 366px;
  }
}
.gallery__item img{
  display: block;
  width: 100%;
  height: 100%;
  /* aspect-ratio（.gallery__item側）が写真の実寸と同じ比率のため、本来はcoverでも
     containでも見た目は同じになるはずだが、丸め誤差で1px未満はみ出た場合に
     切り取られてしまわないよう、絶対にクロップしないcontainにしている */
  object-fit: contain;
}

@keyframes gallery-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .gallery__track{ animation: none; }
}


/* ==========================================================================
   PLAN — plan — 選べる寄付の形
   ========================================================================== */

.plan{
  position: relative;
  overflow: hidden; /* 紋（.plan__crest）を左右半分だけ見切れさせるためのクリップ */
  /* 左右の余白は内側の.plan__inner（.lp-container）だけに持たせる（二重掛けを避ける）。
     カード内部の余白（.plan__amounts等）はそのままで、カードの実質的な横幅を確保。 */
  padding: var(--section-padding) 0;
  text-align: center;
}

.plan__inner{
  position: relative;
  z-index: 1; /* 紋（.plan__crest、z-index:0）より手前に表示する */
  max-width: 900px;
  margin: 0 auto;
}

/* ブランドブックの紋のあしらい。セクション左右の端に配置し、幅の半分だけ画面外に
   はみ出させて「半分見切れている」状態にしている。PLANはLPの主要CTAのため、
   他セクションと違う特別な装飾。 */
.plan__crest{
  position: absolute;
  top: 50%;
  width: clamp(140px, 22vw, 240px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  transform: translateY(-50%);
}
/* 【注意】見切れ量はtransform(%)ではなくwidthと同じclamp式で指定（左右のズレ防止）。
   詳細はコード注記.md参照。 */
.plan__crest--left{
  left: calc(clamp(140px, 22vw, 240px) / -2);
}
.plan__crest--right{
  right: calc(clamp(140px, 22vw, 240px) / -2);
}

.plan__title{ font-size: var(--fs-title); }

.plan__tagline{
  margin-top: 2em;
  padding-block: 0.9em;
  border-top: 1px solid var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
  letter-spacing: 0.05em;
}

.plan__lead{
  margin-top: 2em;
  letter-spacing: 0.05em;
}

/* 「毎月の寄付」「今回の寄付」2つの選択肢カード */
.plan__options{
  margin-top: 3em;
  display: grid;
  /* minmax(320px, 1fr)の320pxという最小値は、.lp-containerのpadding分を差し引いた
     実際のコンテンツ幅（狭いスマホ幅では320px未満）を上回り、カードがグリッドから
     はみ出すため、min(320px, 100%)にして、その時点の利用可能幅を上限にしている。 */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 32px;
  text-align: left;
}

/* 縦にflex化し、申し込みボタンをmargin-top:autoで下端に揃える（選択肢の数が
   違っても揃う）。詳細はコード注記.md参照。 */
.plan__option{
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-ink);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg-base);
}

/* 「毎月」「今回」の2枚のカードが順番にフェードインする演出。詳細はコード注記.md参照。 */
.js-ready .plan__option{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 3.2s cubic-bezier(.16,1,.3,1), transform 3.2s cubic-bezier(.16,1,.3,1);
}
.js-ready .plan__options.is-visible .plan__option:nth-child(2){
  transition-delay: .25s;
}
.js-ready .plan__options.is-visible .plan__option{
  opacity: 1;
  transform: translateY(0);
}

.plan__option-heading{
  background: var(--color-accent);
  color: var(--color-button-text);
  text-align: center;
  padding: 0.9em;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
/* 「今回のみの寄付」カードは、毎月の定期寄付カードと一目で見分けられるよう、
   「毎月＝紫／今回のみ＝ゴールド」の色分けをカード全体（見出し帯・枠線・金額選択）で
   徹底している。ゴールドの背景は明るいため、文字色はhero__ctaの金ボタンと同様に紫。 */
.plan__option--once .plan__option-heading{
  background: var(--color-gold);
  color: var(--color-accent);
}
.plan__option--once{
  border-color: var(--color-gold);
}

.plan__option-desc{
  padding: 1.2em 1.4em 0;
  font-size: 0.95rem;
  line-height: 1.9;
}

/* 金額選択（固定金額をボタン風に並べる。選んだ金額でStripeの決済URLが変わる）。
   詳細はコード注記.md参照。 */
.plan__amounts{
  margin: 1.2em 1.4em 1.4em;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.plan__amount-choice{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.4em 0.6em;
  border: 1px solid var(--color-ink-faint);
  border-radius: 4px;
  background: var(--color-bg-alt);
  font-family: var(--font-label);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-align: center;
  cursor: pointer;
}
/* 「その他（自由入力）」用のボタン。grid-column: 1 / -1（行の端から端まで）にして、
   カラム数が変わっても常に1行を専有する。「10万円以上」（主表記）＋注記の2行構成の
   ため、横並び中央揃え（.plan__amount-choice共通）から縦積みにしている。 */
.plan__amount-choice--wide{
  grid-column: 1 / -1;
  flex-direction: column;
  gap: 0.2em;
}
/* 注記は高齢の方でも読めるよう、文字を大きく（約10px→約14px）・やや太く・濃い色にしている
   （ラベル本体との強弱は、文字の大きさの差と、この濃いめのグレーで付ける） */
.plan__amount-choice-note{
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-ink-soft);
}
/* 狭い幅で折り返すとき、文の途中（「いただ／けます」等）で切れて、1〜2文字だけ次の行に
   残らないよう、文節ごとにまとめて折り返す */
.plan__amount-choice-phrase{
  display: inline-block;
}
/* チェック済みの背景色（紫／ゴールド）に乗る際は、注記もラベル本体と同じ色を継承させ、
   薄いグレーのまま埋もれてしまわないようにする（少しだけ不透明度を落として弱める） */
.plan__amount-choice:has(input:checked) .plan__amount-choice-note{
  color: inherit;
  opacity: 0.85;
}
.plan__amount-choice input{
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* 選択時は塗りを紫・文字を白にし、未選択（ベージュ地）とはっきり区別できるようにする */
.plan__amount-choice:has(input:checked){
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-button-text);
  font-weight: 700;
}
.plan__amount-choice:has(input:focus-visible){
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* 「今回のみの寄付」カード内は、選択時の塗りもゴールド。ゴールド地に白文字だと
   視認性が落ちるため、hero__ctaの金ボタンと同様に文字は紫にしている。 */
.plan__option--once .plan__amount-choice:has(input:checked){
  border-color: var(--color-gold);
  background: var(--color-gold);
  color: var(--color-accent);
}
.plan__option--once .plan__amount-choice:has(input:focus-visible){
  outline-color: var(--color-gold);
}

/* 決済に関する説明（クレジットカード決済・Stripeへの遷移）は、毎月／今回のみ両カードで
   内容が同一のため、.plan__options（両カード）の下に共通の1ブロックとして配置している。
   白背景＋角丸＋薄いグレーの1px枠のカード状。 */
.plan__payment-info{
  /* max-widthは指定せず、同じ親（.plan__inner）の中で上の2枚のカードと同じ幅にする */
  margin: 3em 0 0;
  padding: 1.4em 0.8em;
  background: var(--color-bg-base);
  border: 1px solid var(--color-line);
  border-radius: 8px;
}
.plan__payment-info-text{
  font-size: 16px;
  color: var(--color-ink-soft);
  line-height: 1.8;
  text-align: left; /* 改行（<br>）なしの自然な折り返し、左揃え */
}
/* 文中の「Stripe」の位置にロゴ画像をインライン埋め込み。詳細はコード注記.md参照。 */
.plan__payment-info-logo{
  display: inline-block;
  height: 1em;
  width: auto;
  vertical-align: -0.15em;
}
/* Stripeとは何かを補足する説明文（上の説明文と同じ文字サイズ・色） */
.plan__payment-info-note{
  margin-top: 1.8em; /* 上の説明文とくっつかず、別の段落として見える間隔 */
  font-size: 16px;
  color: var(--color-ink-soft);
  line-height: 1.7;
  text-align: left; /* 上の.plan__payment-info-textと揃えないと行ごとに揃え方が変わって見える */
}

/* 申し込みボタンは実際の寄付導線の起点となる主要CTA。共通デザインは.button--primary側で、
   ここではカード内で横幅いっぱいに広げるレイアウト差分のみを指定する。矢印の白丸バッジは
   .plan__submitだけの特別な装飾（hero__cta・closing__ctaは背景のない矢印のみ）。 */
.plan__submit{
  display: flex;
  width: calc(100% - 2.8em);
  /* 下端揃えの余白の吸収は.plan__consent側（margin-top:auto）で行うため、ここは
     同意チェック欄からの余白をどのカードでも同じ固定値にしている */
  margin: 1.4em 1.4em 1.4em;
}
.plan__submit .button__arrow{
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background: var(--color-bg-base);
  color: var(--color-ink);
  transition: background-color .2s cubic-bezier(.45,0,.55,1), color .2s cubic-bezier(.45,0,.55,1);
}
/* ボタンが白に反転するのにあわせて、矢印の丸も「白地に黒」→「黒地に白」に反転する */
@media (hover: hover){
  .plan__submit:not(.is-disabled):hover .button__arrow{
    background: var(--color-ink);
    color: var(--color-button-text);
  }
}
/* 寄付申込規約・個人情報保護方針への同意チェックが両方入るまで、申し込みボタンを
   淡色表示にする。pointer-eventsは殺さず、クリック自体はJS側で受け取って
   「同意が必要」というメッセージを出せるようにしている（index.html末尾のスクリプト参照）。 */
.plan__submit.is-disabled{
  opacity: 0.45;
  cursor: not-allowed;
}
/* 動的ラベル（例:「5,000円で／毎月寄付を申し込む」）の2行目が、スマホ幅ではボタンの
   文字用スペースに収まりきらず、foundation.cssのwhite-space:nowrapの影響ではみ出す
   可能性があるため、スマホ幅では文字サイズを1段階小さくしている。 */
@media (max-width: 720px){
  .plan__submit .button__label{
    font-size: 0.85rem;
  }
}

/* 寄付申込規約・個人情報保護方針への同意チェック。詳細はコード注記.md参照。 */
.plan__consent{
  margin: auto 1.4em 0;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.plan__consent-item{
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
  cursor: pointer;
}
.plan__consent-item input{
  flex-shrink: 0;
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.15em;
  accent-color: var(--color-accent);
  cursor: pointer;
}
/* 「今回のみ単発で寄付」カードは、他の選択済み状態の配色に合わせ、チェックボックスの色も
   ゴールドにする */
.plan__option--once .plan__consent-item input{
  accent-color: var(--color-gold);
}
/* 「寄付申込規約」「個人情報保護方針」の文中リンク。ボタン要素（寄付申込規約）にも
   同じ見た目を適用するため、リセットしたうえでリンクと同じスタイルを当てている */
.plan__consent-link{
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #0083b7;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.plan__consent-message{
  margin: 0.2em 0 0;
  font-size: 0.8rem;
  color: #b3392c;
}
/* 「個人情報保護方針」は寄付申込規約と違いオーバーレイではなく外部ページへのリンクの
   ため、別ウィンドウ（新しいタブ）が開くことを小さい文字で補足している */
.plan__consent-hint{
  font-size: 0.85em;
  color: var(--color-ink-faint);
}

/* 寄付申込規約オーバーレイ（PLANの2枚のカードで共有する単一のオーバーレイ） */
body.has-overlay{
  overflow: hidden;
}
/* 【注意】共通ヘッダー・下の固定バーに重ならないよう、高さはJS（fitTermsOverlay）が
   実測してセットする。詳細はコード注記.md参照。 */
.terms-overlay{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--terms-top, 124px) + 16px) var(--edge) calc(var(--terms-bottom, 56px) + 16px);
}
.terms-overlay[hidden]{
  display: none;
}
.terms-overlay__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(33, 26, 44, 0.6);
}
.terms-overlay__panel{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: min(100%, 720px);
  background: var(--color-bg-base);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.terms-overlay__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2em 1.4em;
  border-bottom: 1px solid var(--color-line);
}
.terms-overlay__title{
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}
.terms-overlay__close{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-ink-soft);
  cursor: pointer;
}
.terms-overlay__close svg{
  width: 1.2em;
  height: 1.2em;
}

.terms-overlay__body{
  flex: 1;
  overflow-y: auto;
  padding: 1.4em;
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--color-ink-soft);
}
/* 寄付申込規約の条文を流し込むための最小限の見出し・段落・箇条書きスタイル。
   冒頭の前文（.terms-overlay__intro）はやや強調し、各条はh3見出し＋本文の構成。 */
.terms-overlay__intro{
  margin: 0 0 1.6em;
  color: var(--color-ink);
}
.terms-overlay__body h3{
  margin: 1.6em 0 0.6em;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
}
.terms-overlay__body h3:first-of-type{
  margin-top: 0;
}
.terms-overlay__body p{
  margin: 0 0 1em;
}
.terms-overlay__body ul{
  margin: 0 0 1em;
  padding-left: 1.4em;
}
.terms-overlay__body li{
  margin-bottom: 0.3em;
}
.terms-overlay__org,
.terms-overlay__enact{
  color: var(--color-ink);
}
.terms-overlay__enact{
  color: var(--color-ink-faint);
  font-size: 0.85em;
}
.terms-overlay__footer{
  padding: 1em 1.4em 1.4em;
  border-top: 1px solid var(--color-line);
}
.terms-overlay__confirm{
  width: 100%;
  justify-content: center;
}


/* ==========================================================================
   USAGE — usage — 寄付の使い道
   ========================================================================== */

/* セクション自体にはpaddingを持たせず、余白はusage__text側だけが持つ。
   詳細（背景色・テクスチャの理由）はコード注記.md参照。 */
.usage{
  position: relative;
  overflow: hidden; /* 全面ベタ塗りレイアウトのため、丸め誤差でのはみ出し対策 */
  padding: 0;
  background: var(--color-bg-soft);
}
.usage::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(../img/donation/texture-01.webp);
  background-repeat: repeat;
  background-size: 450px;
  opacity: 0.5; /* 写真カード・テキストと共存させるため50%透過 */
  pointer-events: none;
}

/* 左＝テキスト、右＝写真グリッドの2カラム構成（比率45:55）。詳細はコード注記.md参照。 */
.usage__layout{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: stretch;
  /* テキスト量が少なく、paddingだけでは他セクションと並んだ時に縦幅が
     見劣りするため、最低の高さを保証する */
  min-height: clamp(560px, 56vw, 760px);
}

/* 余白はここだけが持つ。テキスト側のpadding（上下）が、そのままこのセクション全体の
   縦幅を決める唯一の要因になっている（usage__gridはこの高さにstretchで合わせる）。
   他セクションと同じ--section-paddingで、縦の見え方を揃えている。 */
.usage__text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4em;
  padding: var(--section-padding) var(--edge);
  text-align: left;
}

.usage__title{ font-size: var(--fs-title); }
/* 見出し画像自体はfoundation.cssの.heading-jp img側でmargin:0 auto（中央寄せ）が
   指定されているため、.usage__textがtext-align:leftでも見出し画像だけ中央に残る。
   ここで上書きし、本文と同じ左端に揃えている。 */
.usage__title img{ margin: 0; }

.usage__lead{
  letter-spacing: 0.05em;
}

/* 活用内容カード。大2枚＋小4枚のグリッド。gapを1pxにして「白線」に見せている。
   詳細はコード注記.md参照。 */
.usage__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 2fr 1fr;
  gap: 1px;
  background: var(--color-bg-base);
  height: 100%;
}

.usage__card{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  /* ラベル文字のぶんだけカードが親のグリッドセルより大きくなろうとするのを防ぎ、
     grid-template-rowsで配分した高さぴったりに収まるようにする */
  min-height: 0;
  min-width: 0;
}
.usage__card img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; /* グラデーション（::before）より下に固定 */
}
/* 【注意】道場の管理（usage-3）だけ、デスクトップ幅で表示位置を16px右にずらしている
   （紫のTシャツの方の腕が見えるように。PC限定の指示、詳細はコード注記.md参照）。
   納品物は src="images/usage-3.webp" の完全一致だが、移植先は画像パスが異なるため末尾一致にしている。 */
@media (min-width: 721px){
  .usage__card img[src$="usage-3.webp"]{
    object-position: calc(50% - 8px) 50%;
  }
}
/* 【重要】z-indexを明示すること。指定しないと::beforeがimgの下に隠れて見えなくなる。
   詳細（グラデーションの数値の理由）はコード注記.md参照。 */
.usage__card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.44) 0%,
    rgba(0, 0, 0, 0.44) 18%,
    rgba(0, 0, 0, 0) 36%
  );
}
.usage__card-label{
  position: relative;
  z-index: 2; /* img(0)・グラデーション(1)より確実に手前にする */
  margin-top: auto;
  padding: 1.4em 1.2em;
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  /* 意図しない位置での折り返しを防ぎ、改行させたい箇所はHTML側の<br>で明示的に指定する
     方式に統一。狭い幅で収まりきらない場合は折り返すのではなく、下の各サイズ別ルールで
     フォントサイズを調整して対応する。 */
  white-space: nowrap;
}

.usage__card--large{
  grid-column: span 2;
}
.usage__card--large .usage__card-label{
  font-size: 1.3rem;
}

.usage__card--small{
  grid-column: span 1;
}
.usage__card--small .usage__card-label{
  /* <br>で2行にしたラベル（「学びの/機会づくり」等）を含め、狭いカード幅でも
     折り返さず収まるサイズ */
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 0.9em 0.8em;
}

/* デスクトップ幅の中でも狭め（721px〜1100px）だと、上記のフォントサイズでも
   一部ラベルが折り返してしまうため、この範囲だけさらに一段階小さくする */
@media (min-width: 721px) and (max-width: 1100px){
  .usage__card--large .usage__card-label{ font-size: 1.05rem; }
  .usage__card--small .usage__card-label{ font-size: 0.78rem; padding: 0.8em 0.7em; }
}
/* モバイル表示に切り替わる直前（721px〜820px）が最も窮屈になるため、
   その範囲だけさらにもう一段階小さくする */
@media (min-width: 721px) and (max-width: 820px){
  .usage__card--large .usage__card-label{ font-size: 1rem; }
  .usage__card--small .usage__card-label{ font-size: 0.7rem; padding: 0.7em 0.6em; }
}

@media (max-width: 720px){
  .usage__layout{
    grid-template-columns: 1fr;
  }
  /* モバイルではテキストと写真が縦に積まれ、隣り合う列の高さに合わせる
     （height:100%）意味がなくなるため、写真側は改めてaspect-ratioで
     自分自身の高さを決める方式に戻す */
  .usage__grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    height: auto;
  }
  .usage__card--large{
    grid-column: span 2;
    aspect-ratio: 16 / 11;
  }
  .usage__card--small{
    grid-column: span 1;
    aspect-ratio: 1 / 1;
  }
}


/* ==========================================================================
   REPORT — report — 活動報告・寄付後
   ========================================================================== */

.report{
  position: relative;
  /* 左右の余白は内側の.report__inner（.lp-container）だけに持たせる（二重掛けを避ける） */
  padding: var(--section-padding) 0;
  text-align: center;
}
/* 質感テクスチャ画像（USAGE・CLOSINGと同じ手法）を背景に追加。position:absoluteの
   オーバーレイは、実際に手前に描画されるようz-indexを明示する（USAGEのグラデーションが
   一度も表示されていなかった件の教訓。.usage__card::before参照）。 */
.report::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(../img/donation/texture-02.webp);
  background-repeat: repeat;
  background-size: 450px;
  opacity: 0.3;
  pointer-events: none;
}

.report__inner{
  position: relative;
  z-index: 1;
  /* 選べる寄付の形（.plan__inner）とカードの表示形式を統一しているため、横幅も同じ900px */
  max-width: 900px;
  margin: 0 auto;
}

.report__title{ font-size: var(--fs-title); }

.report__text{
  margin-top: 1.6em;
  letter-spacing: 0.05em;
  /* 本文だけ左揃え・改行なしの流し込み。見出し（report__title）・特典カードは
     このセクションの元のレイアウト（中央揃え）のまま */
  text-align: left;
}

/* 継続寄付／単発寄付それぞれの特典。PLANのカードと表示形式を統一。詳細はコード注記.md参照。 */
.report__benefits{
  margin-top: 3em;
  display: grid;
  /* minmax(320px, 1fr)の320pxという最小値は、.lp-containerのpadding分を差し引いた
     実際のコンテンツ幅（狭いスマホ幅では320px未満）を上回り、カードがグリッドから
     はみ出すため、min(320px, 100%)にして、その時点の利用可能幅を上限にしている。 */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 32px;
  text-align: left;
}

.report__benefit{
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-ink);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg-base);
}

/* 2枚のカードが順番にフェードインする演出。PLANの.plan__optionと同じ考え方で統一。
   詳細はコード注記.md参照。 */
.js-ready .report__benefit{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 3.2s cubic-bezier(.16,1,.3,1), transform 3.2s cubic-bezier(.16,1,.3,1);
}
.js-ready .report__benefits.is-visible .report__benefit:nth-child(2){
  transition-delay: .25s;
}
.js-ready .report__benefits.is-visible .report__benefit{
  opacity: 1;
  transform: translateY(0);
}

.report__benefit-heading{
  background: var(--color-accent);
  color: var(--color-button-text);
  text-align: center;
  padding: 0.9em;
  /* 【注意】改行位置はHTML側の<br>で指定し、他の位置では折り返さないようnowrapに
     している。詳細はコード注記.md参照。 */
  font-size: 1.08rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
@media (min-width: 1101px){
  .report__benefit-heading{ font-size: 1.15rem; }
}
/* 「今回のみ単発で寄付」カードは、PLANの今回のみカードと同じくオウド色にして差別化 */
.report__benefit--once .report__benefit-heading{
  background: var(--color-gold);
  color: var(--color-accent);
}
/* カードの枠線もゴールドにし、PLANと同じ色分けルールに揃えている */
.report__benefit--once{
  border-color: var(--color-gold);
}

.report__timeline{
  position: relative;
  padding: 1.8em 1.4em 1.8em 2.6em;
}
.report__timeline-item{
  position: relative;
  padding-bottom: 1.6em;
}
.report__timeline-item:last-child{ padding-bottom: 0; }
/* 縦線は.report__timelineに1本通すのではなく、各項目（最後を除く）が「自分の丸の中心」
   から「次の項目の丸の中心」までを個別に引く方式。最後の項目の後ろに線だけが中途半端に
   伸びてしまうのを防いでいる（最後の項目には次に繋ぐ丸がないため、線も描かれない）。 */
.report__timeline-item::before{
  content: "";
  position: absolute;
  /* 丸（.report__timeline-dot、直径15px）の中心に線が来るよう、丸の左端位置（-1.2em）に
     丸の半径分（7.5px）を足し、線自体の太さ（1px）の半分を引いて調整している
     （-1.2em + 7.5px - 0.5px = -1.2em + 7px） */
  left: calc(-1.2em + 7px);
  /* 丸自体の正確な位置は.report__timeline-marker側で自動的に決まる（下記参照）ため、
     ここは見出しバッジのおおよその高さの半分（15px程度）を目安にした値でよい。線の両端は
     丸の円で隠れる設計（z-index参照）のため、多少ズレていても見た目には影響しない。 */
  top: 15px;
  bottom: -15px;
  width: 1px;
  background: rgba(49, 26, 83, 0.45);
}
.report__timeline-item:last-child::before{
  content: none;
}
/* 丸の位置はposition:relative + top:50%/transformによる自動中央揃え。詳細はコード注記.md参照。 */
.report__timeline-marker{
  position: relative;
  text-align: left; /* 本文（.report__timeline-text）と同じ左揃えを明示 */
  margin-bottom: 0.5em;
}
.report__timeline-dot{
  position: absolute;
  left: -1.2em;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-bg-base);
  border: 1.5px solid var(--color-accent);
  /* ::before（線）より手前に描画し、線の端が丸に隠れるようにする */
  z-index: 1;
}
/* 「お申し込み後すぐ／毎月／年に一度」の見出しは地色つきのバッジ表示。詳細はコード注記.md参照。 */
.report__timeline-timing{
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  padding: 0.6em;
  border-radius: 4px;
  margin: 0;
}
.report__timeline-text{
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
}


/* ==========================================================================
   FAQ — faq — よくあるご質問
   ========================================================================== */

.lp-faq{
  /* 【注意】サイト共通の sys/css/common.css に同名の .faq(max-width:860px)があり、
     そのまま .faq を使うとFAQセクションが全幅にならない。.lp-container と同じ考え方で
     lp- を冠して衝突を避けている。子要素の .faq__* は共通側に同名がないためそのまま。 */
  /* 左右の余白は内側の.faq__inner（.lp-container）だけに持たせる（二重掛けを避ける） */
  padding: var(--section-padding) 0;
}

.faq__inner{
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}

.faq__title{ font-size: var(--fs-title); }

.faq__list{
  margin-top: 2.4em;
  text-align: left;
  border-top: 1px solid var(--color-line);
}

.faq__item{
  border-bottom: 1px solid var(--color-line);
  padding-block: 0.4em;
}

/* ネイティブのdetails/summaryで開閉。JS不要・アニメーションなし */
.faq__question{
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 1em 2.2em 1em 0;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}
.faq__question::-webkit-details-marker{ display: none; }
.faq__question::before{
  content: "Q. ";
  color: var(--color-accent);
  font-weight: 700;
}
.faq__question::after{
  content: "";
  position: absolute;
  right: 0.4em;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
  transform: translateY(-70%) rotate(45deg);
}
.faq__item[open] .faq__question::after{
  transform: translateY(-30%) rotate(225deg);
}

.faq__answer{
  margin: 0 0 1.2em;
  padding-right: 2.2em;
  color: var(--color-ink-soft);
  font-size: 0.98rem;
  line-height: 1.9;
}
.faq__answer::before{
  content: "A. ";
  color: var(--color-ink-faint);
  font-weight: 700;
}


/* ==========================================================================
   CLOSING — closing — 最後のメッセージ
   ========================================================================== */

/* 背景にimages/texture-01.webp（紙・布のような質感）を敷いている。USAGE（50%透過）と違い、
   カードや写真と重ならない文字だけのセクションのため、不透明度100%で使用。 */
.closing{
  position: relative;
  /* 左右の余白は内側の.closing__inner（.lp-container）だけに持たせる（二重掛けを避ける） */
  padding: var(--section-padding) 0;
  text-align: center;
}
.closing::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(../img/donation/texture-01.webp);
  background-repeat: repeat;
  background-size: 450px;
  pointer-events: none;
}

.closing__inner{
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.closing__title{ font-size: var(--fs-title); }

.closing__text{
  margin-top: 1.6em;
  letter-spacing: 0.05em;
  /* 本文だけ左揃え・改行なしの流し込み。見出し（closing__title）・ボタン
     （closing__cta）は中央揃えのまま */
  text-align: left;
}

.closing__cta{ margin-top: 2.4em; }


/* ==========================================================================
   SUPPORT — support — 寄付に関するお問い合わせ
   ========================================================================== */

.support{
  /* 上下の余白は他セクションより控えめな位置づけだが、存在感のため--section-paddingの
     1.125倍。左右の余白は内側の.support__inner（.lp-container）だけに持たせる。 */
  padding: calc(var(--section-padding) * 1.125) 0;
  text-align: center;
}
/* LP全体の上と下を紫で締めるため、ファーストビュー（.hero--purple）と同じ紫背景・白文字。
   見出しはSVG画像（元は黒塗り）のため、heroのタイトル画像と同じ手法でfilterにより
   白に変換している。 */
.support--purple{
  background: var(--color-accent);
  color: var(--color-button-text);
}
.support--purple .support__title img{
  filter: brightness(0) invert(1);
}
.support--purple .support__link{
  color: var(--color-button-text);
  border-color: rgba(255, 255, 255, 0.5);
}
.support--purple .support__link:hover{
  border-color: var(--color-button-text);
  color: var(--color-button-text);
}

.support__inner{
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2em;
}

.support__text{
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}
.support--purple .support__text{
  color: var(--color-button-text);
}