/*
Theme Name: Soramame Charity Project
Author: haru branding
Description: 令和8年熊本地震 そらまめチャリティProject（チャリティー講演の情報ハブサイト）
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: soramamecharity
Tags: custom-menu, translation-ready
*/

/* ========================================
   このファイルは静的版 site/style.css をそのまま引き継いだもの。
   変更点は2つだけ：
     1. 上のテーマ宣言ヘッダーを追加した
     2. 画像参照を url(/images/…) → url(images/…) に変えた
        （テーマURL起点の相対解決にするため。CODING_GUIDELINES 6.6）
   節の構成・値・順序は静的版と同一。メディアクエリは「8.9 レスポンシブ」に集約されており、
   ベース指定より後に置く前提が崩れると効かなくなる（引継書 §8-5）。
   ======================================== */

@charset "UTF-8";

/* ========================================
   1. Design Tokens (CSS Custom Properties)
   - 値の出典はすべて DESIGN.md（カンプからの機械抽出）
   - 値を変更する場合はここだけ修正すればOK
   ======================================== */

:root {
    /* --- 色 --- */
    --color-primary: #BE0654;
    /* CTA・強調・番号・枠線 */
    --color-sky: #509EF3;
    /* PROJECTセクションの空 */
    --color-text: #292822;
    /* 本文・見出し・黒ボタン */
    --color-bg: #FAF9F8;
    /* 基本背景 */
    --color-surface: #F4F2EC;
    /* ヘッダー地・FV右カラム・表のラベル列 */
    --color-bg-alt: #F0EDEA;
    /* FAQセクションの地 */
    --color-white: #FFFFFF;
    --color-link: #1A6BE0;
    /* Googleカレンダー追加リンク */

    /* グレー階調：ディレクション工程で WCAG AA 適合を確認済みの値。薄くしないこと */
    --gray-900: #1A1A1A;
    --gray-700: #4A4A4A;
    --gray-500: #676767;
    /* 白5.66 / bg-alt 5.23 / surface 5.05 いずれもAA適合 */
    --gray-300: #C8C8C8;
    --gray-200: #DCDCDC;

    /* --- フォント --- */
    --font-jp: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
    /* 欧文優先。Sofia は Latin のみ持つため、混在文字列の和文は自動で Noto にフォールバックする */
    --font-en: "Sofia Sans Condensed", "Noto Sans JP", sans-serif;

    /* --- 文字サイズ --- */
    /* すべてカンプ実測（実装と同倍率のスクショでグリフ帯の高さを直接比較して逆算）。
       2026-08-08 の精度S対応で見直した値 */
    --text-11: 11px;
    /* フッターのお問い合わせ・小ボタン・必須/任意バッジ ⚠️可読性の下限14pxを下回る（カンプ優先） */
    --text-xs: 12px;
    /* インフォバー・寄付累計の日付・Googleカレンダー追加・曜日の丸 */
    --text-13: 13px;
    /* フッターナビ・コピーライト・主催者の本名・パンくず・フォームの注記 */
    --text-sm: 14px;
    /* 注記・キャプション・FAQ回答 */
    --text-15: 15px;
    /* 本文（リード・講師名・FAQ設問） */
    --text-base: 16px;
    /* ナビ・カード見出し・CTAボタン */
    --text-18: 18px;
    /* 主催者プロフィール見出し */
    --text-19: 19px;
    /* 参加の流れのラベル */
    --text-lg: 20px;
    /* 小見出し・日付の時刻 */
    --text-xl: 22px;
    /* 講演タイトル・カード内セクション見出し */
    --text-23: 23px;
    /* Zoomで参加する */
    --text-24: 24px;
    /* 理念の締め1行 */
    --text-25: 25px;
    /* ピンク枠見出し */
    --text-26: 26px;
    /* FAQ の Q / A マーク */
    --text-30: 30px;
    /* セクション見出し・日付 */
    --text-32: 32px;
    /* FV大コピー */
    --text-47: 47px;
    /* 使いみちの番号（Sofia・キャップ高0.658で逆算） */
    --text-37: 37px;
    /* 寄付累計の数字 */
    --text-40: 40px;
    /* セクション大コピー */

    --leading-body: 1.85;
    /* 実測：行ピッチ30px ÷ 16px */
    --leading-tight: 1.4;

    /* --- レイアウト --- */
    --wrap: 1100px;
    /* x150〜1250 */
    --wrap-narrow: 900px;
    /* x250〜1150 */
    --wrap-wide: 1304px;
    /* x48〜1352 */
    --page-pad: 40px;
    /* ヘッダー等の左右余白 */

    --bar-h: 30px;
    /* 上部インフォバー */
    --header-h: 90px;
    /* ヘッダー本体 */
    --fv-h: 688px;
    /* FVの高さ */
    --fv-aside: 619px;
    /* FV右カラムの幅 */

    /* --- 角丸 --- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 9999px;

    /* --- その他 --- */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
    --transition-base: 0.25s ease;
    --accordion-duration: 0.4s;
    /* アコーディオンの開閉 */
    --reveal-duration: 0.7s;
    /* スクロール出現 */
}


/* ========================================
   2. Reset & Base Styles
   ======================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    /* scroll-behavior: smooth はグローバル指定しない（CODING_GUIDELINES 5.9）。main.js で制御する */
    /* ヘッダー本体が sticky で画面最上部に残るため、アンカーの着地位置をその分だけ下げる */
    scroll-padding-top: var(--header-h);
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-jp);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--leading-body);
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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,
h3,
p,
dl,
dd,
figure {
    margin: 0;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* ========================================
   3. Utility Classes
   ======================================== */

/* max-width は「中身の幅＋左右padding」。基準幅1400pxで中身がカンプ実測値と一致する */
.wrap {
    width: 100%;
    max-width: calc(var(--wrap) + 40px);
    margin-inline: auto;
    padding-inline: 20px;
}

.wrap-narrow {
    width: 100%;
    max-width: calc(var(--wrap-narrow) + 40px);
    margin-inline: auto;
    padding-inline: 20px;
}

.wrap-wide {
    width: 100%;
    max-width: calc(var(--wrap-wide) + 40px);
    margin-inline: auto;
    padding-inline: 20px;
}

/* デバイス別の出し分け（CODING_GUIDELINES 4.5） */
@media (max-width: 767px) {
    .pc {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .sp {
        display: none !important;
    }
}

/* 日本語の本文は両端揃えを基本にする（CODING_GUIDELINES 5.7）。
   見出しと、カンプで中央揃えになっている要素（FVリード・理念・白カード）は対象外 */
.use-item__text,
.organizer__text,
.account-note li,
.account-link,
.faq-item__a .faq-item__text,
.seminar-card__detail-inner p,
.seminar-card__detail-inner li,
.flow__text {
    text-align: justify;
}

/* 本文へスキップ（キーボード操作用）。フォーカスした時だけ画面上端に現れる */
.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 200;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 700;
    transform: translateY(-200%);
    transition: transform var(--transition-base);
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.sr-only,
/* WordPress が the_posts_pagination() 等で出す見出しも同じ扱いにする */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ========================================
   4. Typography
   ======================================== */

/* セクションの英字ラベル（PROJECT / CHARITY / REPORT / FAQ 等） */
.sec-label {
    font-family: var(--font-en);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.28em;
    line-height: 1;
    text-align: center;
    color: var(--color-text);
}

/* セクション見出し */
.sec-title {
    font-size: var(--text-30);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: 0.04em;
    text-align: center;
    margin-top: 20px;
}

.sec-title--invert {
    color: var(--color-white);
}

/* カード内（振込先）と活動報告の見出しはカンプ実測 22px で他セクションより小さい */
.sec-title--sm {
    font-size: var(--text-xl);
}

/* ラベル→見出しの間隔はセクションごとに実測値が違う */
.top-project .sec-title {
    margin-top: 26px;
}

.top-faq .sec-title {
    margin-top: 29px;
}

.sec-label+.sec-title {
    margin-top: 20px;
}

/* 日付（欧文数字は Sofia Sans Condensed） */
.date {
    font-family: var(--font-en);
    font-size: var(--text-30);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.date__dow {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-inline: 8px 6px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: var(--text-xs);
    /* 下限12px（DESIGN.md の可読性ルール） */
    line-height: 1;
    vertical-align: 4px;
}

.date__time {
    font-family: var(--font-en);
    font-size: var(--text-lg);
    font-weight: 400;
    letter-spacing: 0.02em;
}

.sep {
    margin-inline: 4px;
    color: var(--gray-300);
}


/* ========================================
   5. Common Components
   ======================================== */

/* --- ボタン ---
   塗り分けは 08_CTA設計ルール を継承：
   塗り = 実行系（Zoom・寄付する）／ghost = 遷移系。塗りを増やさない */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    /* WCAG 2.2 タップターゲット */
    padding: 12px 28px;
    border: 0;
    /* button / input[type=submit] のブラウザ既定の枠線を消す */
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-align: center;
    max-width: 100%;
    /* 伸ばさないが、狭い幅でも溢れない */
    white-space: nowrap;
    /* ボタン内で折り返さない */
    transition: background-color var(--transition-base), color var(--transition-base),
        border-color var(--transition-base);
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn--dark {
    background: var(--color-text);
    color: var(--color-white);
}

.btn--ghost {
    background: var(--color-white);
    color: var(--color-text);
    border: 1px solid var(--color-text);
}

/* ghost のうち、セクション末尾の遷移CTAはピンク文字＋ピンク枠 */
.btn--wide {
    width: 334px;
    height: 70px;
    background: var(--color-white);
    border-color: var(--color-primary);
    color: var(--color-primary);
    letter-spacing: 0.12em;
}

.btn--sm {
    min-height: 33px;
    padding: 5px 14px;
    font-size: var(--text-11);
    letter-spacing: 0.04em;
}

.btn--lg {
    min-height: 60px;
    padding: 14px 32px;
    font-size: var(--text-23);
}

/* インスタライブのボタンだけ文字を落とす。アイコンが入るぶん23pxだと横に伸びすぎるため。
   .btn の align-items:center でアイコンと文字は天地中央で揃う（実測ズレ0.1px） */
.btn--live {
    font-size: var(--text-18);
}

/* 押せない状態（同意チェック前の送信ボタンなど） */
.btn:disabled {
    background: var(--gray-300);
    color: var(--color-white);
    cursor: not-allowed;
}

@media (hover: hover) {

    /* 塗りボタンは色が入れ替わる（赤 ⇄ 黒）。浮き上がりは使わない */
    .btn--primary:not(:disabled):hover {
        background: var(--color-text);
    }

    .btn--dark:not(:disabled):hover {
        background: var(--color-primary);
    }

    .btn--ghost:not(:disabled):hover {
        background: var(--color-surface);
    }

    .btn--wide:not(:disabled):hover {
        background: var(--color-primary);
        color: var(--color-white);
    }
}

.btn-row {
    display: flex;
    justify-content: center;
}

/* --- アイコン（カンプにある最小限のみ・SVGは使わずCSSで描く） --- */
.icon-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.icon-arrow--lg {
    width: 14px;
    height: 14px;
    border-width: 3px;
}

.icon-arrow--back {
    transform: rotate(-135deg);
}

/* 左向き（ページ送りの「前へ」） */

.icon-chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--transition-base);
}

[aria-expanded="true"] .icon-chevron {
    transform: rotate(-135deg) translate(-2px, -2px);
}

/* 別タブで開くことを示す（カンプの小アイコン） */
/* 別タブアイコンは支給SVG（icon-blank.svg・10.5×10.5） */
.icon-external {
    width: 11px;
    height: 11px;
    flex: none;
}

.icon-instagram {
    display: inline-block;
    flex: none;
    /* ボタン等の flex 内で潰れないようにする */
    width: 22px;
    height: 22px;
    border: 2px solid currentColor;
    border-radius: 7px;
    position: relative;
}

.icon-instagram::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.icon-instagram::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 2.5px;
    height: 2.5px;
    background: currentColor;
    border-radius: 50%;
}

/* YouTube（講師のSNSリンク用）。Instagram と同じくCSSで描く＝画像素材を増やさない。
   角丸の横長矩形＋再生三角。色は currentColor に追従する */
.icon-youtube {
    display: inline-block;
    width: 22px;
    height: 22px;
    position: relative;
}

.icon-youtube::before {
    content: "";
    position: absolute;
    inset: 3px 0;
    border: 2px solid currentColor;
    border-radius: 6px;
}

.icon-youtube::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 4px 0 4px 6px;
    /* 右向きの三角 */
    border-color: transparent transparent transparent currentColor;
}


/* ========================================
   6. Layout Components（ヘッダー・フッター）
   ======================================== */

/* --- ヘッダー --- */
/* 上部インフォバーはスクロールで流れ、ヘッダー本体だけが画面最上部に貼り付く。
   header ごと sticky にして、貼り付き位置をバーの高さぶん上（-30px）にずらすことで実現する。
   （.header__main だけを sticky にすると、親 .header の高さ120pxの範囲でしか効かない） */
.header {
    position: sticky;
    top: calc(-1 * var(--bar-h));
    z-index: 95;
    transition: transform 0.3s ease;
}

/* 下スクロールで隠し、上スクロールで戻す（main.js が .is-hidden を付け外しする） */
.header.is-hidden {
    transform: translateY(-100%);
}

/* ドロワーを開いている間は、インフォバーを上へ送ってヘッダー本体を画面上端に貼り付ける。
   バーが見えたままだとドロワーがその上を通過するのが見えるうえ、
   開いた後もヘッダーがバーのぶん下がって邪魔になるため。

   sticky ではなく fixed を使うこと。body に overflow:hidden を掛けると body 自身が
   スクロールコンテナになり、sticky が基準を失って効かなくなるブラウザがある
   （スクロール位置は動いているのにヘッダーだけ取り残される）。

   位置は top で指定し、transform は使わないこと。transform が none 以外の要素は
   子孫の position:fixed の包含ブロックになるため、.header の中にあるドロワー（inset:0）が
   ビューポートではなくヘッダーの領域に閉じ込められ、高さ154pxの帯になってしまう */
body.is-drawer-open .header {
    position: fixed;
    top: calc(-1 * var(--bar-h));
    left: 0;
    right: 0;
}

.header__bar {
    height: var(--bar-h);
    background: var(--color-bg);
}

.header__bar-inner {
    height: 100%;
    padding-inline: clamp(20px, calc(5.319vw - 34.47px), 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.header__bar-text {
    font-size: var(--text-xs);
    font-weight: 400;
    /* h1 だが見た目は本文と同じ */
    line-height: 1;
}

.header__bar-link {
    font-size: var(--text-xs);
    line-height: 1;
    white-space: nowrap;
}

.header__bar-link::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
}

/* ドロワーは .header の子なので、ロゴと×ボタンの行はドロワーより前面に重ねる
   （そうしないとドロワーが×ボタンを覆って閉じられなくなる） */
.header__main {
    position: relative;
    z-index: 95;
    height: var(--header-h);
    padding-inline: clamp(20px, calc(5.319vw - 34.47px), 40px);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.header__logo {
    display: block;
}

/* SVG 316×82 を縮小。上の余白が広いため肩書きへ引き寄せる */
.header__logo img {
    width: 200px;
    height: auto;
    margin-top: -10px;
}

/* ロゴの上に載る小さな肩書き（カンプ・haru 指定 10px） */
.logo-pre {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

/* 1400〜1024px の縮小耐性（5.5）。ロゴは固定サイズのまま、ナビだけが詰まる。
   係数は基準幅1400で現状値・1024で下限になるよう逆算しているので、PCの見た目は変わらない */
.nav {
    display: flex;
    align-items: center;
    gap: clamp(16px, calc(6.383vw - 49.36px), 40px);
}

.nav__list {
    display: flex;
    align-items: center;
    gap: clamp(10px, calc(6.915vw - 60.81px), 36px);
}

.nav__link {
    font-size: clamp(13px, calc(0.798vw + 4.83px), 16px);
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

@media (hover: hover) {
    .nav__link:hover {
        color: var(--color-primary);
    }

    /* ドロワーのリンクもグローバルナビ・フッターナビと同じ hover にそろえる
       （.drawer 自体はタブレット以下でしか表示されないので、ここに置いてよい） */
    .drawer__link:hover {
        color: var(--color-primary);
    }
}

.nav .btn--sm {
    min-height: 50px;
    padding-inline: 32px;
    font-size: var(--text-base);
}

/* ハンバーガー（1024px未満で表示。ベース指定は非表示） */
.hamburger {
    display: none;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.hamburger__bar {
    display: block;
    width: 24px;
    height: 2px;
    margin-inline: auto;
    background: var(--color-text);
    transition: transform var(--transition-base), opacity var(--transition-base);
}

/* 開いている間は × に変える（3本目を消して1・2本目を交差させる） */
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
    transform: rotate(-45deg);
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) {
    opacity: 0;
}

.drawer {
    display: none;
}

/* --- フッター --- */
.footer {
    background: var(--color-bg);
    padding-block: 74px 31px;
}

.footer__logo {
    text-align: center;
}

/* 肩書きはロゴの左端に揃える（ブロック自体は中央寄せのまま） */
.footer__logo .logo-pre {
    width: 316px;
    margin: 0 auto 4px;
    font-size: 10px;
    text-align: left;
}

.footer__logo img {
    width: 316px;
    height: auto;
    margin-inline: auto;
}

.footer__nav-row {
    margin-top: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.footer__list {
    display: flex;
    align-items: center;
}

/* 区切り線は「先頭以外」に付ける。隣接セレクタ（+）だと、非表示にした項目の
   <template> が兄弟として残るぶん隣接が切れて線が消えるため */
.footer__item:not(:first-of-type)::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 14px;
    margin-inline: 22px;
    background: var(--gray-300);
    vertical-align: -2px;
}

.footer__item {
    display: inline-flex;
    align-items: center;
}

.footer__link {
    font-size: var(--text-13);
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

@media (hover: hover) {
    .footer__link:hover {
        color: var(--color-primary);
    }
}

.footer .btn--sm {
    min-height: 50px;
    padding-inline: 34px;
    font-size: var(--text-sm);
}

.footer__bottom {
    margin-top: 20px;
    padding-top: 28px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.footer__sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.footer__contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-11);
}

.footer__copy {
    font-size: var(--text-13);
    color: var(--color-text);
}


/* ========================================
   7. Page Sections（共通ベース）
   ======================================== */

/* --- 寄付累計カード --- */
.amount-card {
    width: 512px;
    margin-inline: auto;
    padding: 22px 32px 20px;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.amount-card__label {
    font-size: var(--text-base);
    line-height: 1.4;
}

.amount-card__value {
    margin-top: 8px;
    font-size: var(--text-37);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.amount-card__value .num {
    font-family: var(--font-en);
    font-weight: 500;
}

.amount-card__unit {
    font-size: 0.5em;
}

.amount-card__date {
    margin-top: 6px;
    font-size: var(--text-xs);
    color: var(--gray-500);
    line-height: 1.4;
}

/* 「支援した金額」を登録すると2枚になる（2026-09-05 追加）。
   1枚のときは --pair が付かないので、従来どおり512px中央のまま＝見た目が変わらない。
   2枚のときだけ横並びにし、512px固定を解いて幅に合わせて縮むようにする
   （固定のままだと 512×2＋gap = 1048px となり、1024px幅で画面からはみ出す） */
.amount-cards--pair {
    display: flex;
    justify-content: center;
    gap: 24px;
    max-width: calc(var(--wrap) + 40px);
    margin-inline: auto;
    padding-inline: 20px;
}

.amount-cards--pair .amount-card {
    flex: 1 1 0;
    width: auto;
    max-width: 512px;
    /* 広い画面では従来と同じ512pxで止める */
    margin-inline: 0;
}

/* --- FAQ / アコーディオン共通 --- */
.faq-item {
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.faq-item+.faq-item {
    margin-top: 15px;
}

.faq-item__q {
    width: 100%;
    min-height: 90px;
    padding: 20px 40px 20px 34px;
    display: flex;
    align-items: center;
    gap: 22px;
    text-align: left;
}

.faq-item__mark {
    font-family: var(--font-en);
    font-size: var(--text-26);
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    flex: none;
    width: 22px;
}

.faq-item__mark--a {
    color: var(--gray-500);
}

.faq-item__q .faq-item__text {
    flex: 1;
    font-size: var(--text-15);
    font-weight: 700;
    line-height: 1.5;
}

.faq-item__icon {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
}

.faq-item__icon::before,
.faq-item__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 1.5px;
    background: var(--color-text);
    transform: translate(-50%, -50%);
    transition: opacity var(--transition-base);
}

.faq-item__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

[aria-expanded="true"] .faq-item__icon::after {
    opacity: 0;
}

/* 開閉は grid-template-rows: 0fr ⇄ 1fr（recipes R-004）。
   畳む層（clip）には padding / border を持たせない — 閉じても高さが残るため */
.faq-item__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--accordion-duration) ease;
}

.faq-item__a.is-open {
    grid-template-rows: 1fr;
}

.faq-item__a-clip {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    /* 閉じている間は読み上げ・タブ移動の対象から外す */
    transition: visibility 0s var(--accordion-duration);
}

.faq-item__a.is-open .faq-item__a-clip {
    visibility: visible;
    transition-delay: 0s;
}

.faq-item__a-inner {
    padding-block: 38px 46px;
    margin-inline: 34px 40px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    gap: 22px;
}

.faq-item__a .faq-item__text {
    font-size: var(--text-sm);
    line-height: 1.85;
    color: var(--gray-700);
}

.faq-item__a a {
    color: var(--color-link);
    text-decoration: underline;
}

/* --- FAQ「すべて見る」で開く残りの質問（R-004 と同じ畳み方）--- */
.faq-more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--accordion-duration) ease;
}

.faq-more.is-open {
    grid-template-rows: 1fr;
}

.faq-more__clip {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    /* 閉じている間は読み上げ・タブ移動から外す */
    transition: visibility 0s var(--accordion-duration);
}

.faq-more.is-open .faq-more__clip {
    visibility: visible;
    transition-delay: 0s;
}

/* 畳む層の外にある5問目との間隔を、内側の先頭カードで作る */
.faq-more__inner>.faq-item:first-child {
    margin-top: 15px;
}

/* --- 活動報告カード --- */
.report-card {
    display: block;
}

/* CMS登録画像：16:9固定 */
.report-card__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
}

.report-card__date {
    display: block;
    margin-top: 12px;
    font-family: var(--font-en);
    font-size: var(--text-15);
    letter-spacing: 0.04em;
    color: var(--gray-500);
}

.report-card__title {
    margin-top: 10px;
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.6;
}

@media (hover: hover) {
    .report-card:hover .report-card__title {
        color: var(--color-primary);
    }
}


/* ========================================
   8. Page-specific Styles（トップページ）
   ======================================== */

/* ---------- 8-1. ファーストビュー ---------- */
.top-fv {
    display: grid;
    grid-template-columns: 1fr var(--fv-aside);
    height: var(--fv-h);
    background: var(--color-surface);
}

.top-fv__visual {
    position: relative;
    overflow: hidden;
}

/* 素材は 1359×1034（比1.31）／表示は 781×688（比1.14）。左右を均等にトリムする */
.top-fv__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.top-fv__copy {
    position: absolute;
    top: 196px;
    left: 66px;
}

.top-fv__title {
    font-size: var(--text-32);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* 白帯は行ごとに背景を敷く（カンプ：2行がそれぞれ白い矩形） */
.top-fv__title-line {
    display: table;
    /* 行の幅ぴったりに白背景を回す */
    padding: 6px 18px 10px;
    /* 下を厚くして、下がり文字（「が、」等）の下に余白を残す（haru 指定） */
    line-height: 1.2;
    background: var(--color-white);
    transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 読み込み時に左から右へ帯ごと開く。JS が .is-shown を付けるまでは閉じた状態。
   JSが動かない環境（html に .js が付かない）では閉じたままになると見出しが読めないので、
   閉じる指定自体を html.js の下に置く */
:where(html.js) .top-fv__title-line {
    clip-path: inset(0 100% 0 0);
}

.top-fv__title.is-shown .top-fv__title-line {
    clip-path: inset(0 0 0 0);
}

.top-fv__title.is-shown .top-fv__title-line:nth-child(2) {
    transition-delay: 0.25s;
}

.top-fv__title-line+.top-fv__title-line {
    margin-top: 14px;
}

.top-fv__title em {
    font-style: normal;
    color: var(--color-primary);
}

.top-fv__lead {
    margin-top: 22px;
    font-size: var(--text-15);
    font-weight: 500;
    line-height: 1.85;
    color: var(--color-primary);
}

.top-fv__organizer-link {
    position: absolute;
    /* 写真カラムの右端から25px（カンプ実測：781幅の中で x511〜756）。
       left 固定だとカラムが狭まった時に切れるため right 基準にしている */
    right: 25px;
    bottom: 33px;
    display: inline-flex;
    align-items: center;
    gap: 28px;
    height: 35px;
    padding-inline: 24px;
    background: rgba(255, 255, 255, 0.85);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* 右カラム：次の講演 */
.top-fv__next {
    position: relative;
    padding: 0 50px 48px 59px;
    display: flex;
    flex-direction: column;
}

/* 右上の斜めタグ（カンプ実測：黒い直角二等辺三角形 100×100） */
.top-fv__next-tag {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: var(--color-text);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* 文字はカンプ実測 x1355〜1384（右端から16px）／「次の」のグリフ上端 y134.5 */
.top-fv__next-tag-text {
    position: absolute;
    top: 13px;
    right: 16px;
    width: 29px;
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
    text-align: center;
}

/* 「次の」と「講演」の間の白い罫線（実測 y151.5・幅29px） */
.top-fv__next-tag-line {
    display: block;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid currentColor;
}

/* CMSで差し替える画像は 16:9 を固定する（幅が変わっても比率は変えない） */
.top-fv__next-img {
    /* 画像はカラム全幅。reset の max-width:100% を解除して padding を打ち消す */
    max-width: none;
    width: var(--fv-aside);
    margin-inline: -59px -50px;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
}

.top-fv__next-body {
    margin-top: 49px;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* ボタン行を下端へ押し出すため */
}

.top-fv__next-date {
    line-height: 1;
}

.top-fv__next-title {
    margin-top: 16px;
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.85;
    letter-spacing: 0.08em;
    /* カンプ実測：20文字で483px＝1文字24.15px */
}

.top-fv__next-who {
    margin-top: 9px;
    font-size: var(--text-15);
    line-height: 1.4;
}

.top-fv__next-actions {
    margin-top: auto;
    /* カンプ実測：ボタン行の上端 y700＝FV下端から48+60 */
    display: flex;
    align-items: center;
    gap: 23px;
}

.top-fv__next-join {
    width: 280px;
    flex: none;
    margin-left: auto;
}

.top-fv__next-join .btn--lg {
    width: 100%;
}

/* Zoom未経験の不安をボタンの直前で解く（FAQの奥に置かない） */
.top-fv__next-note {
    margin-bottom: 8px;
    font-size: var(--text-13);
    line-height: 1.5;
    text-align: center;
    color: var(--gray-700);
}

.top-fv__next-actions .btn--sm {
    min-height: 40px;
    padding-inline: 17px;
}


/* ---------- 8-1b. 最新情報の帯（2026-09-22 追加） ----------
   最新の活動報告のタイトルを、アクセントカラーの帯に右から左へ流す。
   スマホ・タブレットはヘッダー直下（FVの上）、PCはFVの下（寄付額カードの上）に置くため、
   front-page.php で2回出力して表示だけを幅で切り替える（FVはグリッドなので中に入れられない）。
   流すかどうかは main.js の initNewsTicker がタイトルの幅を測って決める（収まれば止めたまま） */
.news-ticker {
    display: flex;
    align-items: center;
    padding-block: 10px;
    padding-inline: var(--page-pad);
    background: var(--color-primary);
    color: var(--color-white);
    /* #BE0654 地で 6.28:1（AA適合・DESIGN.md） */
    font-size: var(--text-sm);
    /* 14px（haru 指定） */
    line-height: 1.5;
}

.news-ticker--sp {
    display: none;
}

/* PCでは下の --pc を使う。1023px以下で入れ替える（8.9） */

/* PC：FVのコピーの中（旧「参加費無料／申込不要」の位置）。幅は340px 固定（haru 指定 2026-09-27）。
   狭いので左右の余白は帯のサイズに合わせて詰める（--page-pad 40px のままだと文字の場所が残らない） */
.news-ticker--pc {
    width: 340px;
    margin-top: 39px;          /* 旧「参加費無料」と同じ位置に置く */
    padding-inline: 14px;
    border-radius: var(--radius-sm);
}

/* 左の固定ラベル。右の短い縦線でタイトルと区切る（行の高さに合わせて1文字ぶんだけ引く） */
.news-ticker__label {
    flex: none;
    margin-right: 14px;
    padding-right: 14px;
    border-right: 1px solid currentColor;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
}

/* タイトルの窓。はみ出した分だけを隠す */
.news-ticker__body {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.news-ticker__link {
    display: block;
    color: inherit;
}

/* 窓の overflow:hidden で外側のリングが切れるため、内側に描く */
.news-ticker__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.news-ticker__text--clone {
    display: none;
}

/* JS が動く環境だけ1行に並べる。JS無効の環境では折り返して全文が見える
   （サイト共通の html.js ゲート。<head> で付くので、読み込み後に高さが変わってずれることもない） */
:where(html.js) .news-ticker__track {
    display: inline-flex;
    white-space: nowrap;
}

:where(html.js) .news-ticker__text {
    flex: none;
}

/* 流す時だけ複製を並べる。2本の後ろに同じ隙間を付け、トラックの半分（＝1本ぶん）を
   動かしたところで最初に戻すと継ぎ目なくループする。速さは JS が --ticker-duration で渡す */
.news-ticker.is-scrolling .news-ticker__text {
    padding-right: 3em;
}

.news-ticker.is-scrolling .news-ticker__text--clone {
    display: block;
}

.news-ticker.is-scrolling .news-ticker__track {
    animation: news-ticker-scroll var(--ticker-duration, 20s) linear 1s infinite;
    /* 1秒は読み始めの猶予 */
}

/* カーソルを乗せている間・リンクにフォーカスがある間は止める */
.news-ticker:focus-within .news-ticker__track {
    animation-play-state: paused;
}

@media (hover: hover) {
    .news-ticker:hover .news-ticker__track {
        animation-play-state: paused;
    }

    /* トラックは inline-flex（原子的なインライン）で、リンクの下線が中まで伝わらないため文字側に引く */
    .news-ticker__link:hover .news-ticker__text {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}


/* ---------- 8-2. 参加の流れ ---------- */
.top-flow {
    padding-block: 20px 47px;   /* 上はバナースライダーが受けるので詰める（haru 指定 2026-09-27） */
}

/* --- 講演バナーのスライダー（2026-09-27 追加） ---
   これまでの講演のバナーを右から左へゆっくり流す。全体が1つのリンクで /archive/ へ行く。
   1枚の幅は「画面に何枚見せるか」から逆算するので、画面幅が変わっても見える枚数は変わらない
   （PC 5枚・スマホ3枚。haru 指定 2026-09-27）。動きは main.js の initSeminarSlider */
.seminar-slider {
    --slider-gap: 12px;
    /* 常に5枚ぶんで画面が埋まる幅。上限（min())は置かない——上限が効くと1周ぶんが画面幅に
       届かなくなり、流れないうえ右側が空く（1920pxで260pxの空白・2026-09-27 に実測して修正） */
    --slider-item: calc((100vw - var(--slider-gap) * 5) / 5);

    display: block;
    overflow: hidden;      /* .top-flow に左右の余白が無いので、これだけで画面いっぱいに出る */
    margin-bottom: 60px;
}
.seminar-slider__track {
    display: flex;
    width: max-content;
}
.seminar-slider__item {
    flex: none;
    width: var(--slider-item);
    /* 隙間は gap ではなく margin で取る。gap だと「1周ぶん」がぴったり半分にならず、
       ループの継ぎ目でカクッと飛ぶ（全体の gap は9つ、半分は5つぶん必要なため） */
    margin-right: var(--slider-gap);
}
.seminar-slider__img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;   /* CMSで差し替える画像は16:9固定（DESIGN.md） */
    object-fit: cover;
    border-radius: var(--radius-sm);
}
/* 流すだけの枚数が無い時は、2周目を出さない（同じ絵が並んで見えるのを防ぐ）。
   並びが画面幅に足りないので、左に寄せず中央に置く */
.seminar-slider:not(.is-scrolling) .seminar-slider__item[aria-hidden] { display: none; }
.seminar-slider:not(.is-scrolling) .seminar-slider__track { margin-inline: auto; }

.seminar-slider.is-scrolling .seminar-slider__track {
    animation: seminar-slider-scroll var(--slider-duration, 60s) linear infinite;
}
/* キーボードで当たった時は止める（リンクは1つなので :focus-visible で足りる） */
/* 全幅の要素なので、リングは内側に描く（外側だと左右が画面の外に出て見えない） */
.seminar-slider:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.seminar-slider:focus-visible .seminar-slider__track { animation-play-state: paused; }

@media (hover: hover) {
    /* タッチ端末は hover: none なので、指で触って止まったまま戻らない事故は起きない（規約6.8） */
    .seminar-slider:hover .seminar-slider__track { animation-play-state: paused; }
}

.top-flow__title {
    margin-top: 84px;
    font-size: var(--text-40);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-align: center;
}

.top-flow__title em {
    font-style: normal;
    color: var(--color-primary);
}

.top-flow__lead {
    margin-top: 32px;
    font-size: var(--text-15);
    font-weight: 500;
    line-height: 1.85;
    text-align: center;
    letter-spacing: 0.02em;
}

.flow {
    margin-top: 61px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
}

.flow__step {
    width: 240px;
}

/* 吹き出しは支給SVG（241×93.008・枠と足を1本のパスで持つ）。
   枠の高さは 70.8px、その下に 22.2px の足が伸びる */
.flow__label {
    position: relative;
    display: grid;
    place-items: center;
    height: 71px;
    color: var(--color-primary);
    font-size: var(--text-19);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.flow__label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    /* SVGは241px幅だが、狭い幅では枠がはみ出すのでコンテナ幅に追従させる
       （基準幅1400pxではステップ幅240px＝原寸とほぼ同じ） */
    width: 100%;
    height: 94px;
    background: url(images/flow-fukidasi.svg) no-repeat left top;
    background-size: 100% 94px;
    pointer-events: none;
}

.flow__label-text {
    position: relative;
}

/* 透過PNGのイラスト（360×285＝@1.5x）。切り抜かずそのまま表示する */
.flow__img {
    margin-top: 32px;
    /* 実測：枠の下端564.5 → 画像の上端596 */
    width: 240px;
    height: 190px;
    object-fit: contain;
}

.flow__text {
    margin-top: 17px;
    font-size: var(--text-15);
    line-height: 2;
}

.flow__arrow {
    align-self: center;
    color: var(--color-primary);
    display: flex;
    padding-top: 40px;
}


/* ---------- 8-3. 講演情報 ---------- */
.top-seminar {
    padding-block: 41px 95px;
}

.top-seminar__title {
    width: 713px;
    height: 67px;
    margin-inline: auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-size: var(--text-25);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
}

/* 申込不要のため参加者の連絡先を取れない。開催の告知先を見出し直下で明示する */
.top-seminar__insta {
    margin-top: 18px;
    font-size: var(--text-15);
    font-weight: 500;
    text-align: center;
}

.top-seminar__insta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.seminar-list {
    margin-top: 51px;
    border-top: 1px solid var(--gray-200);
}

/* カード内部の寸法はカンプ実測（カード中身 225px＝画像の高さと一致） */
.seminar-card {
    padding-block: 30px 29px;
    border-bottom: 1px solid var(--gray-200);
    display: grid;
    grid-template-columns: 400px 1fr;
    column-gap: 44px;
    position: relative;
}

/* CMS登録画像：16:9固定 */
.seminar-card__img {
    width: 400px;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
}

.seminar-card__date {
    line-height: 1;
}

.seminar-card__title {
    margin-top: 20px;
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.08em;
}

.seminar-card__who {
    margin-top: 13px;
    font-size: var(--text-15);
    line-height: 1.4;
}

.seminar-card__actions {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}

.seminar-card__detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--accordion-duration) ease;
}

.seminar-card__detail.is-open {
    grid-template-rows: 1fr;
}

.seminar-card__detail-clip {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    transition: visibility 0s var(--accordion-duration);
}

.seminar-card__detail.is-open .seminar-card__detail-clip {
    visibility: visible;
    transition-delay: 0s;
}

.seminar-card__detail-inner {
    padding-top: 20px;
    font-size: var(--text-15);
    color: var(--gray-700);
}

/* 概要はZoomボタンより下から始まるので、右側を空ける必要はない */

/* --- リッチテキスト（WPのエディタから入る本文）---
   WPのエディタはクラスを持たない h3 / h4 / ul を出力するため、要素セレクタでも同じ見た目になるよう
   .rich__* と併記している（.page-body と同じ「エディタ出力を受けるための例外」・DESIGN.md 参照） */
.rich>*+* {
    margin-top: 16px;
}

.rich__heading,
.rich h3,
.rich h4 {
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-text);
    padding-left: 14px;
    border-left: 3px solid var(--color-primary);
}

.rich>.rich__heading+*,
.rich>h3+*,
.rich>h4+* {
    margin-top: 12px;
}

.rich>*+.rich__heading,
.rich>*+h3,
.rich>*+h4 {
    margin-top: 28px;
}

.rich__subheading {
    font-size: var(--text-15);
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-text);
}

.rich>*+.rich__subheading {
    margin-top: 22px;
}

.rich__note {
    font-size: var(--text-sm);
}

.rich__list,
.rich ul {
    display: grid;
    gap: 8px;
}

.rich__list li,
.rich ul li {
    position: relative;
    padding-left: 18px;
    line-height: 1.9;
    text-align: justify;
}

.rich__list li::before,
.rich ul li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Googleカレンダー追加：日付行と同じ高さでカード右端に置く */
.seminar-card__gcal {
    position: absolute;
    top: 38px;
    right: 0;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-link);
}

@media (hover: hover) {
    .seminar-card__gcal:hover {
        text-decoration: underline;
    }
}

/* カード右のCTA（トップ＝Zoomで参加する／アーカイブ＝アーカイブを見る）。
   位置はカード上端から195px（カンプ実測 y353〜413）。
   下端基準にすると「セミナー概要」を開いたときにカードの底まで流れてしまうため上基準にする */
.seminar-card .seminar-card__cta-inner {
    position: absolute;
    right: 0;
    top: 195px;
    width: 306px;
}

.seminar-card .seminar-card__cta-btn {
    width: 100%;
    min-height: 60px;
}

/* 注記はボタンの上端を基準に置く。文言が2行になってもボタンの位置は195pxのまま */
.seminar-card__cta-note {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    font-size: var(--text-13);
    line-height: 1.5;
    text-align: center;
    color: var(--gray-700);
}

/* アーカイブ公開の理由（クライアント意向 2026-08-09）。ボタンの上に置く */
.top-seminar__archive-lead {
    margin-top: 40px;
    font-size: var(--text-15);
    text-align: center;
}

.top-seminar .btn-row {
    margin-top: 34px;
}

.top-seminar__archive-lead+.btn-row {
    margin-top: 22px;
}


/* ---------- 8-4. このプロジェクトについて ---------- */
/* 斜めのウォーターマーク。SVGは黒なので mask-image で白に置き換える（recipes R-010） */
.top-project__watermark {
    position: absolute;
    left: 50%;
    top: 470px;
    width: 95vw;
    height: calc(95vw * 82 / 316);
    /* logo.svg の比 316:82 */
    z-index: 0;
    transform: translateX(-50%) rotate(-6deg);
    background-color: rgba(255, 255, 255, 0.07);
    -webkit-mask-image: url(images/logo.svg);
    mask-image: url(images/logo.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;
}

.top-project__cloud {
    position: absolute;
    z-index: 0;
    /* 中身より背面 */
    pointer-events: none;
}

/* 位置・サイズはカンプ実測（雲の見え方）から素材内の雲の占有比で逆算した値 */
.top-project__cloud--left {
    left: -175px;
    top: 277px;
    width: 627px;
}

.top-project__cloud--right {
    left: 914px;
    top: 695px;
    width: 703px;
}

.top-project>.wrap-narrow {
    position: relative;
    z-index: 1;
}

.top-project {
    padding-block: 75px 62px;
    background: var(--color-sky);
    color: var(--color-white);
    /* ⚠️ 白文字 × #509EF3 = 2.79:1（WCAG AA 未達）。
       カンプ優先で実装する方針（2026-08-08 haru 判断・DESIGN.md 参照）。直さないこと */
    position: relative;
    overflow: hidden;
}

.top-project .sec-label {
    color: var(--color-white);
}

.fact-card {
    width: 800px;
    /* 実測：x300〜1100（コンテナ900より内側） */
    margin-inline: auto;
    margin-top: 50px;
    padding: 44px 60px;
    background: var(--color-white);
    color: var(--color-sky);
    border-radius: var(--radius-pill);
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 2;
}

.omoi {
    margin-top: 70px;
    text-align: center;
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 2.375;
    /* 実測：行ピッチ38px ÷ 16px */
}

.omoi p+p {
    margin-top: 38px;
}

/* 段落間はちょうど1行ぶん（実測ピッチ76px＝2行分） */
.omoi__strong {
    margin-top: 95px;
    font-size: var(--text-24);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.top-project__slogan {
    margin-top: 62px;
    display: flex;
    justify-content: center;
}

.top-project__slogan img {
    width: 773px;
    height: auto;
}


/* ---------- 8-5. 主催者について ---------- */
/* 青帯（280px）と風景写真が縦に並び、その上に中身が重なる構造（カンプ実測）。
   罫線はコンテナ全幅900px、写真200×240は青帯の下端をまたいで風景写真に食い込む */
.top-organizer {
    position: relative;
}

.top-organizer__band {
    height: 280px;
    background: var(--color-sky);
}

.top-organizer__visual {
    width: 100%;
    height: auto;
}

.top-organizer__inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 24px;
    color: var(--color-white);
}

.top-organizer__inner .sec-label {
    color: var(--color-white);
}

.organizer {
    margin-top: 30px;
    /* ラベル下端 → 罫線 y83 */
    display: grid;
    grid-template-columns: 200px 1fr;
    column-gap: 81px;
    /* 実測：写真右端451 → テキスト左端531.5 */
}

/* 写真は上端を揃えて 200×240。罫線はテキスト側にだけ引く（haru 指定 2026-08-08） */
.organizer__photo {
    width: 200px;
    height: 240px;
    object-fit: cover;
}

.organizer__body {
    padding-block: 44px;
    border-block: 1px solid rgba(255, 255, 255, 0.6);
}

.organizer__name {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: var(--text-18);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
}

/* アイコンを見出しの文字と天地中央で揃える。指定しないとリンクの行ボックス（27px）の
   上寄りにアイコン（22px）が置かれ、見出しより2.6px上にずれる（実測） */
.organizer__sns {
    display: flex;
    align-items: center;
}

/* 見出しの下に小さく置く本名 */
.organizer__real-name {
    margin-top: 6px;
    font-size: var(--text-13);
    line-height: 1.4;
}

.organizer__text {
    margin-top: 18px;
    font-size: var(--text-sm);
    line-height: 1.87;
}


/* ---------- 8-6. 寄付の使いみち ---------- */
.top-use {
    padding-block: 97px 70px;
}

.use-list {
    margin-top: 86px;
}

.use-item {
    display: grid;
    grid-template-columns: 400px 1fr;
    column-gap: 48px;
    align-items: start;
}

/* イラストが未登録の項目は本文を全幅にする。指定しないと本文が画像用の400pxカラムに
   入り込んで極端に細くなる（講師モーダルで実際に起きた事象と同じ）。
   詳細度 (0,2,0) でベースの .use-item (0,1,0) に勝つため、置き場所に依存しない */
.use-item:not(:has(.use-item__img)) {
    grid-template-columns: 1fr;
}

.use-item+.use-item {
    margin-top: 45px;
}

.use-item__img {
    width: 400px;
    height: 280px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.use-item__num {
    font-family: var(--font-en);
    font-size: var(--text-47);
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
}

.use-item__title {
    margin-top: 30px;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
}

.use-item__text {
    margin-top: 20px;
    font-size: var(--text-15);
    line-height: 2;
}


/* ---------- 8-7. ご寄付の振込先 ---------- */
/* 下余白は本来0（直後の活動報告セクションが自分の上余白を持つため）。
   活動報告を公開当初は出していないので、暫定で下余白を持たせている。
   活動報告を復活させたら 0 に戻す */
.top-account {
    padding-block: 48px 100px;
}

.account-card {
    padding: 40px 66px 50px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.account-card .sec-title {
    margin-top: 18px;
}

.account-table {
    width: 100%;
    margin-top: 40px;
    /* リセットの border-collapse: collapse だと border-radius が無視されるため上書きする */
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-text);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: var(--text-base);
}

.account-table th,
.account-table td {
    padding: 22px 24px;
    text-align: left;
    font-weight: 500;
}

.account-table th {
    font-size: var(--text-15);
}

.account-table td {
    font-size: var(--text-15);
}

.account-table th {
    width: 216px;
    background: var(--color-surface);
    text-align: center;
    border-right: 1px solid var(--color-text);
}

.account-table tr+tr th,
.account-table tr+tr td {
    border-top: 1px solid var(--color-text);
}

.account-note {
    margin-top: 33px;
    font-size: var(--text-sm);
    line-height: 1.9;
}

.account-note li {
    padding-left: 1em;
    text-indent: -1em;
}

.account-note li::before {
    content: "※";
}

.account-link {
    margin-top: 30px;
    font-size: var(--text-sm);
    line-height: 1.9;
}

.account-link a {
    color: var(--color-link);
    text-decoration: underline;
}


/* ---------- 8-8. 活動報告 ---------- */
.top-report {
    padding-block: 100px 106px;
}

.report-list {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
}

.top-report .btn-row {
    margin-top: 48px;
}


/* ---------- 8-9. よくあるご質問 ---------- */
.top-faq {
    padding-block: 71px 108px;
    background: var(--color-bg-alt);
}

/* セクション見出しと1つ目のグループの間。
   :first-child だと当たらない（.faq-group の前に .sec-label と .sec-title があり、
   .faq-group は親の最初の子ではない）ため、隣接セレクタで指定する */
.sec-title+.faq-group {
    margin-top: 48px;
}

/* 分類の見出し（講演について／寄付について）。セクション見出しより一段小さく */
.faq-group+.faq-group {
    margin-top: 48px;
}

.faq-group__title {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    padding-left: 14px;
    border-left: 3px solid var(--color-primary);
}

.faq-group__title+.faq-list {
    margin-top: 24px;
}

.faq-list {
    margin-top: 57px;
}

.top-faq .btn-row {
    margin-top: 29px;
}


/* ---------- 8-10. 講師プロフィール モーダル ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
}

.modal[hidden] {
    display: none;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(41, 40, 34, 0.55);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.modal.is-open .modal__overlay {
    opacity: 1;
}

.modal__panel {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: 48px 56px 52px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.modal.is-open .modal__panel {
    opacity: 1;
    transform: none;
}

.modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    /* タップターゲット（4.4） */
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: background-color var(--transition-base);
}

@media (hover: hover) {
    .modal__close:hover {
        background: var(--color-surface);
    }
}

/* ×アイコン（2本の線） */
.modal__close-icon {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
}

.modal__close-icon::before,
.modal__close-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 1.5px;
    background: var(--color-text);
}

.modal__close-icon::before {
    transform: rotate(45deg);
}

.modal__close-icon::after {
    transform: rotate(-45deg);
}

.modal__label {
    font-family: var(--font-en);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.28em;
    line-height: 1;
    color: var(--color-primary);
}

/* --- アーカイブ動画のモーダル（2026-09-27 追加） ---
   中身は Instagram の埋め込み（縦型リール）。講師モーダルより幅を絞り、余白も詰める */
/* 動画を少しでも大きく見せるため、講師プロフィールより余白を詰める（haru 指定 2026-09-27）。
   縦長の動画は画面の高さが上限になるので、上下に使う高さを削ったぶんだけ動画が大きくなる */
.modal__panel--video {
    max-width: 700px;
    padding: 36px 16px 16px;
}

.modal__video-title {
    margin-top: 6px;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.4;
    /* 長いタイトルで2行以上になると、そのぶん動画が小さくなる。1行で省略する */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 埋め込みには再生位置を動かすバーが無く、1時間級のアーカイブを頭からしか見られない。
   Instagram（アプリ／PCのブラウザ）なら動かせるので、その入口をボタンで置く（haru 指定 2026-09-27）。
   遷移系のCTAなので塗りではなく ghost（CTA設計ルール：塗りは実行系と第1CVのみ） */
.modal__video-note {
    margin-top: 16px;
    text-align: center;
}

/* [hidden] を効かせる。.btn の display: inline-flex と同じ詳細度では打ち消せない */
.modal__video-link[hidden] { display: none; }

.modal__video {
    /* 【この枠は「見える映像」そのもののサイズ】
       Instagram の埋め込みは 上部のアカウント行（54px・幅によらず一定）＋ 4:5 の動画枠 でできており、
       9:16 のリールはその中に収まるので左右に黒帯が出る（実測：枠幅の30%が黒・2026-09-27）。
       そこで iframe を枠より横に広げ、左右と上（アカウント行）をはみ出させて隠し、
       映像だけが見えるようにしている。

       ⚠️ 9:16 のリールであることが前提。正方形や 4:5 の投稿を登録すると左右が切れる。
          この案件の運用は「インスタライブ → リールのアーカイブ」なので9:16でそろう */
    --video-head: 54px;         /* 埋め込み上部のアカウント行 */
    --video-scale: 1.4222;      /* 黒帯ぶん横に広げる倍率（1 ÷ 0.7031） */
    /* モーダルの上下で動画以外が使う高さ（枠の余白・ラベル・講演タイトル・下のリンク） */
    --video-chrome: 220px;
    /* モーダルの左右で使う幅（外枠24px＋パネル16px の左右ぶん） */
    --video-side: 80px;

    /* 下限200px。スマホを横向きにすると高さが約360pxしかなく、高さ基準だけだと
       映像が潰れて見られなくなる。下限に当たった時はモーダル側が縦スクロールする */
    --video-w: max(200px,
                   min(calc(100vw - var(--video-side)),
                       calc((100dvh - var(--video-chrome)) * 9 / 16)));

    position: relative;
    overflow: hidden;           /* はみ出させた黒帯とアカウント行を隠す */
    width: var(--video-w);
    height: calc(var(--video-w) * 16 / 9);
    margin: 16px auto 0;
    background: var(--color-text);   /* 読み込み中は黒（動画の地色）にする */
}

.modal__video iframe {
    position: absolute;
    top: calc(var(--video-head) * -1);   /* アカウント行を上へ逃がす */
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: calc(var(--video-w) * var(--video-scale));
    height: calc(var(--video-w) * var(--video-scale) * 1.25 + var(--video-head));
    border: 0;
}

/* --- モーダルの中身（講師プロフィール） --- */
.speaker {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 200px 1fr;
    column-gap: 32px;
    align-items: start;
}

.speaker__photo {
    width: 200px;
    height: 240px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* 写真が未登録の講師は本文を全幅にする。指定しないと、本文が写真用の200pxカラムに
   入り込んで極端に細くなる（実際に発生）。CODING_GUIDELINES 5.1 が :has() の用途として
   挙げている「画像の有無でレイアウトを変える」ケースそのもの。
   詳細度は (0,2,0) でベースの .speaker (0,1,0) に勝つため、置き場所に依存しない。
   8.9 のSP指定も同じ 1fr なので競合しない */
.speaker:not(:has(.speaker__photo)) {
    grid-template-columns: 1fr;
}

.speaker__role {
    font-size: var(--text-13);
    color: var(--gray-500);
    line-height: 1.4;
}

.speaker__name {
    margin-top: 6px;
    font-size: var(--text-24);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

.speaker__text {
    margin-top: 18px;
    font-size: var(--text-15);
    line-height: 1.9;
    text-align: justify;
}

.speaker__sns {
    margin-top: 22px;
    /* flex（block級）にして、複数ある講師では縦に積む。inline-flex だと横に並んでしまう。
       幅は中身なりに保ちたいので width: fit-content */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    font-size: var(--text-15);
    font-weight: 500;
}

/* 2つ目以降は間隔を詰める（22px は「本文からの距離」であってリンク同士の距離ではない） */
.speaker__sns+.speaker__sns {
    margin-top: 8px;
}

@media (hover: hover) {
    .speaker__sns:hover {
        color: var(--color-primary);
    }
}

/* 動きを減らす設定では即座に出す */
@media (prefers-reduced-motion: reduce) {

    .modal__overlay,
    .modal__panel {
        transition: none;
    }
}


/* ========================================
   8.6 下層ページ共通（パンくず・ページ見出し）
   - 下層ページはカンプが無いため、トップページで確定したトークンとコンポーネント
     （.sec-label / .sec-title / .btn / .wrap-narrow）だけで組む
   ======================================== */

.breadcrumb {
    padding-top: 20px;
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-13);
    line-height: 1.6;
    color: var(--gray-500);
}

.breadcrumb__item:not(:first-child)::before {
    content: "／";
    margin-inline: 8px;
    color: var(--gray-300);
}

.breadcrumb__link {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (hover: hover) {
    .breadcrumb__link:hover {
        color: var(--color-primary);
    }

    .top-seminar__insta a:hover {
        color: var(--color-primary);
    }
}

/* ページ見出し（英字ラベル＋日本語見出し）。トップのセクション見出しと同じ組み方 */
.page-header {
    margin-top: 56px;
}

.page-lead {
    margin-top: 28px;
    /* リード文の下にも余白を持たせる（haru 指定 2026-08-25）。
       直後の要素が自分で上余白を持つページ（本文 56px・講演一覧 51px）では相殺され、
       上余白を持たない要素（活動報告一覧の寄付累計カード）にだけ効く */
    margin-bottom: 32px;
    font-size: var(--text-15);
    text-align: center;
}


/* ========================================
   8.7 お問い合わせフォーム（/contact/）
   - WP化後は Contact Form 7 が同じマークアップを出力する前提で組んである
     （貼り付けるフォーム本文は docs/contact-form-cf7.md。入力欄には class: で .form-control を付ける）
   - .wpcf7-* は CF7 が自動生成するクラス。静的版でも同じ入れ子で書いてあるので、
     WP化のときにレイアウトが変わらない
   ======================================== */

.page-contact__main {
    padding-bottom: 100px;
}

.form {
    max-width: 720px;
    margin: 56px auto 0;
}

.form-field+.form-field {
    margin-top: 32px;
}

.form-field__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-15);
    font-weight: 700;
    line-height: 1.4;
}

/* 必須／任意のバッジ。11px は他の小要素と同じ下限（DESIGN.md の可読性メモ参照） */
.form-field__badge {
    display: inline-grid;
    place-items: center;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--text-11);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
}

.form-field__badge--any {
    background: var(--gray-500);
}

.form-field__note {
    margin-top: 8px;
    font-size: var(--text-13);
    color: var(--gray-500);
}

/* CF7 は入力欄を span で包む。中の入力欄を幅いっぱいにするためブロックにする */
.wpcf7-form-control-wrap {
    display: block;
    margin-top: 10px;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--text-base);
    /* 16px 未満にすると iOS で入力時に拡大される */
    line-height: 1.6;
    transition: border-color var(--transition-base);
}

.form-control:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
}

.form-control--area {
    min-height: 200px;
    resize: vertical;
}

/* セレクトの矢印はブラウザ既定を消して自前で描く（色をサイトに合わせるため） */
select.form-control {
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23292822' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
}

/* 同意チェック：ラベル文はチェックボックスの外にあるため、行として組む */
.form-field+.form-field--consent {
    margin-top: 36px;
}

.form-field--consent {
    font-size: var(--text-15);
    text-align: center;
}

.form-field--consent .wpcf7-form-control-wrap {
    display: inline;
    margin-top: 0;
}

/* CF7 の [acceptance] は文言をラベルの外に出すため、クリックできるのはこの四角だけ。
   タップ領域の最小 24px を確保する（CODING_GUIDELINES 4.4） */
.form-field--consent input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    accent-color: var(--color-primary);
    vertical-align: -3px;
}

.form-field--consent a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (hover: hover) {
    .form-field--consent a:hover {
        color: var(--color-primary);
    }
}

/* 送信ボタンは中央。CF7 は送信ボタンの直後に読み込み中スピナー（.wpcf7-spinner）を差し込み、
   これが visibility:hidden のまま幅とマージンを占有する。そのままだと
   「ボタン＋スピナー」の全体が中央に置かれ、ボタンだけを見ると左へずれる（実測 PC 220px）。
   スピナーを絶対配置でレイアウトから外し、中央寄せの対象をボタンだけにする */
.form__submit {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.form__submit .btn {
    min-width: 280px;
}

.form__submit .wpcf7-spinner {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

/* CF7 のエラー表示（WP化後に出力される要素） */
.wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: var(--text-13);
    color: var(--color-primary);
}

.wpcf7-response-output {
    margin-top: 24px;
    padding: 14px 18px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    text-align: center;
}

.wpcf7-spinner {
    display: block;
    margin: 12px auto 0;
}

/* 静的版だけの案内（WP化時に HTML ごと削除する）。
   hidden 属性を効かせるため、著者側の display より後に打ち消しを置く */
.form__demo-note {
    margin-top: 24px;
    padding: 14px 18px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-primary);
    text-align: center;
}

.form__demo-note[hidden] {
    display: none;
}


/* ========================================
   8.8 長文ページ（プライバシーポリシー等）とアーカイブ一覧
   ======================================== */

/* 活動報告（一覧・詳細）の下余白（haru 指定 2026-08-25）。
   これまでは 0 で、末尾のボタン／ページャの直下からご寄付のお願いの背景色が始まっていた。
   値は「これまでの講演」と同じ（下層ページで余白を揃える） */
.page-report__main {
    margin-bottom: 64px;
}

.page-archive__main {
    padding-bottom: 64px;
}

.page-privacy__main {
    padding-bottom: 100px;
}

/* 下層ページ末尾の寄付のお願い（アーカイブ） */
.page-donate {
    padding-block: 64px 80px;
    background: var(--color-surface);
}

/* 改行位置を <br> で指定した短いリード文のため、中央揃えにする
   （FVリード・下層ページのリードと同じ扱い。5.7 の両端揃えの対象外） */
.page-donate__text {
    max-width: 760px;
    margin: 24px auto 0;
    font-size: var(--text-15);
    text-align: center;
    /* 320px級の狭い画面で「ら、」のような1〜2文字だけの行が出るのを防ぐ。
       1行に収まる幅では何も起きないので、375px以上の見え方は変わらない */
    text-wrap: balance;
}

.page-donate .btn-row {
    margin-top: 32px;
}

/* 本文は WordPress の固定ページ（エディタ出力）をそのまま受けられるよう、
   クラスではなく要素セレクタで組む。ここは例外的に要素セレクタを許容する */
.page-body {
    margin-top: 56px;
}

.page-body__section+.page-body__section {
    margin-top: 44px;
}

.page-body h2 {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-200);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: 0.04em;
}

/* WordPress の固定ページはフラットな h2/p/ul を出力し、.page-body__section が存在しない。
   その場合でも見出しの上に余白が残るようにする（静的版では h2 が section の先頭なので当たらない） */
.page-body *+h2 {
    margin-top: 44px;
}

.page-body p {
    margin-top: 18px;
    font-size: var(--text-15);
    text-align: justify;
}

/* ベースで list-style を消してあるので、本文中のリストだけ点を戻す */
.page-body ul {
    margin: 18px 0 0;
    padding-left: 1.3em;
    font-size: var(--text-15);
    list-style: disc;
}

.page-body li {
    text-align: justify;
}

.page-body li+li {
    margin-top: 8px;
}

.page-body li::marker {
    color: var(--color-primary);
}

.page-body a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-body .page-body__date {
    margin-top: 56px;
    font-size: var(--text-13);
    color: var(--gray-500);
    text-align: right;
}

@media (hover: hover) {
    .page-body a:hover {
        color: var(--color-primary);
    }
}


/* 活動報告一覧のページ送り（the_posts_pagination の出力） */
.pagination {
    margin-top: 56px;
}

.pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    /* WCAG 2.2 タップターゲット */
    min-height: 44px;
    padding-inline: 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: 1.4;
    transition: background-color var(--transition-base), color var(--transition-base),
        border-color var(--transition-base);
}

.pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.pagination .page-numbers.dots {
    border-color: transparent;
    min-width: auto;
    padding-inline: 0;
}

@media (hover: hover) {
    .pagination a.page-numbers:hover {
        background: var(--color-surface);
        border-color: var(--color-text);
    }
}

/* ---------- 8-10. 運営メンバー（2026-08-24 追加） ----------
   FAQの下に置く3名の紹介。写真は「SNSのアイコンくらい小さく」（haru 指定）＝80pxの円。
   既存トークンだけで組み、新しい色・文字サイズは足していない */
.top-staff {
    padding-block: 64px 80px;
}

.top-staff .sec-title {
    margin-top: 8px;
}

/* 列数は 4 → 2×2 → 1 の3段階（2026-09-05 にメンバーが4人へ増えた）。
   ⚠️ この 4 はメンバーの人数。増減させたらここも直す
   （auto-fit にはできない。.wrap-narrow は 1023px でも 900px のままなので、
     コンテナ幅が縮まず 2×2 の段階が作れない） */
.staff-list {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.staff-item {
    display: grid;
    justify-items: center;
    text-align: center;
    /* 行を伸ばさない。既定の align-content: stretch だと、本文が短い人の余白が
       全行に均等配分され、写真から下が数pxずつ下がって3人の高さが揃わなくなる */
    align-content: start;
}

.staff-item__photo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    /* SNSアイコン相当の丸トリミング */
    margin-bottom: 14px;
}

.staff-item__role {
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--gray-500);
}

.staff-item__name {
    margin-top: 4px;
    font-size: var(--text-18);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

.staff-item__text {
    margin-top: 12px;
    font-size: var(--text-sm);
    line-height: 1.85;
    color: var(--gray-700);
    /* 紹介文だけは両端揃え（規約5.7 の日本語本文の基準・haru 指定 2026-09-05）。
       役割・氏名は .staff-item の中央揃えを継いだまま */
    text-align: justify;
}

/* 各メンバーの紹介の最下部に置く Instagram リンク（2026-08-30 追加）。
   アイコンは共通の .icon-instagram（22px・currentColor）を流用＝画像素材を増やさない。
   リンク自体を 44px の正方形にしてタップ領域を確保する（見た目のアイコンは22pxのまま） */
.staff-item__sns {
    margin-top: 6px;
}

.staff-item__sns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--gray-700);
    transition: color var(--transition-base);
}

@media (hover: hover) {
    .staff-item__sns a:hover {
        color: var(--color-primary);
    }
}

/* ---------- 8-11. 支援の協力者募集（2026-08-25 追加） ----------
   フッター直前。既存トークンだけで組み、新しい色・文字サイズは足していない */
.top-support {
    padding-block: 64px 80px;
    background: var(--color-surface);
}

.top-support .sec-title {
    margin-top: 8px;
}

.top-support__text {
    max-width: 760px;
    margin: 24px auto 0;
    font-size: var(--text-15);
    line-height: 1.9;
    text-align: center;
    text-wrap: balance;
}

.top-support .btn-row {
    margin-top: 32px;
}

/* ---------- 8-12. 活動報告の個別ページ（2026-08-25 追加） ----------
   長文を読ませるページなので、他の .page-body とは別に整える。
   指定は .page-report 配下に限定しているので、プライバシーポリシーには影響しない */

/* アイキャッチ。本文より広く取って記事の顔にする */
.page-report__thumb {
    width: 100%;
    margin-top: 40px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* 本文の幅を絞る。900pxのままだと1行が約60字になり、日本語の適正（40〜45字）を超えて
   視線の戻りが大きくなる。720pxで約48字 */
.page-report .page-body {
    max-width: 720px;
    margin-inline: auto;
}

.page-report .page-body p {
    margin-top: 24px;
    line-height: 2;
    /* 長文なので本文既定(1.85)より少し開ける */
}

/* h2：下の細い罫線に、短いアクセントを重ねるワンポイント */
.page-report .page-body h2 {
    position: relative;
    padding-bottom: 14px;
    font-size: var(--text-18);
    /* h1(20px) との差を1段つける（haru 指定 2026-08-25） */
}

.page-report .page-body h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    /* 罫線に重ねる */
    width: 40px;
    height: 2px;
    background: var(--color-primary);
}

.page-report .page-body *+h2 {
    margin-top: 56px;
}

.page-report .page-body h2+p {
    margin-top: 20px;
}

/* h3：本文と同じ16pxでアクセントカラー。上に余白を置いて段落の切れ目を作る */
.page-report .page-body h3 {
    margin-top: 40px;
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--color-primary);
}

.page-report .page-body h3+p {
    margin-top: 12px;
}

/* 本文中の画像は幅いっぱい・16:9・角丸をそろえる（2026-09-03 に比率固定を追加）
   DESIGN.md「CMSで差し替える画像は 16:9 を固定」を本文中の写真にも適用する */
.page-report .page-body img {
    margin-top: 28px;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* 縦長の写真だけは横長に切り抜かず、9:16 のまま中央に置く（2026-09-03 haru 指定）。
   向きは functions.php の smc_image_block_orientation が WordPress の持つ寸法から自動判定して
   .is-portrait を付ける（書き手の操作は不要）。
   720pxいっぱいに広げると高さが1280pxになって画面を占領するため、幅に上限を置いている */
.page-report .page-body .wp-block-image.is-portrait img {
    aspect-ratio: 9 / 16;
    max-width: 360px;
    margin-inline: auto;
    /* 左右センター */
}

/* 引用（主催者のコメント・インタビュー・2026-09-03 追加）
   ブラウザ既定は左に40px字下げされるだけで、引用だと分かる手がかりが何も無い。
   地色だけで本文から切り離す（罫線は入れない・2026-09-03 haru 指定） */
.page-report .page-body .wp-block-quote {
    /* 左右は 0。ブラウザ既定の blockquote は margin: 1em 40px を持っていて、
       打ち消さないと地色の端だけが本文より40px内側に入り、他のセクションと縦のラインが揃わない */
    margin: 32px 0 0;
    padding: 24px 28px;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
}

/* 引用の中の段落は、外側の余白を引用ブロック自身が持つので自分では持たない */
.page-report .page-body .wp-block-quote p {
    margin-top: 0;
}

.page-report .page-body .wp-block-quote p+p {
    margin-top: 16px;
}

/* 出典（エディタの「引用元を追加」）。本文より一段落として小さく */
.page-report .page-body .wp-block-quote cite {
    display: block;
    margin-top: 14px;
    font-size: var(--text-sm);
    font-style: normal;
    color: var(--gray-500);
    /* surface 地で 5.05:1（AA適合・DESIGN.md） */
}

/* 本文中の表（Gutenberg のテーブルブロック・2026-09-03 追加）
   トップの振込先 .account-table と同じ組み（外枠＋角丸＋1列目が見出し列）にそろえる。
   WPコアの wp-block-library が figure に overflow-x:auto、td に 1px 罫線・8px padding・16px を
   当てているので、それを打ち消す形で書いている */
.page-report .page-body .wp-block-table {
    margin-top: 28px;
    /* リセットの figure{margin:0} を打ち消す。本文中の画像と同じ間隔 */
    /* キャプション（＝表タイトル）を order で表より前に出すため、figure を縦のフレックスにする */
    display: flex;
    flex-direction: column;
}

/* 表タイトル（2026-09-03 追加）
   エディタのテーブルブロックの「キャプション」に入力したものを、表の"上"に見出しとして出す。
   コアの既定は表の下・中央寄せ・0.8em の注釈なので、位置・寄せ・サイズをすべて上書きしている。
   段落で書く方式（<p><strong>開催概要</strong></p>）にしなかったのは、タイトルと表が
   別ブロックになると、片方だけ移動・削除されて対応が崩れるため */
.page-report .page-body .wp-block-table figcaption {
    order: -1;
    margin: 0 0 8px;
    /* 表と近づける（2026-09-03 haru 指定） */
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.04em;
    text-align: left;
    color: var(--color-text);
}

.page-report .page-body .wp-block-table table {
    width: 100%;
    /* リセットの border-collapse: collapse だと border-radius が無視されるため上書きする
       （.account-table と同じ理由） */
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-text);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: var(--text-15);
    line-height: 1.8;
}

.page-report .page-body .wp-block-table td {
    padding: 14px 16px;
    border: 0;
    /* コアが td 個別に引く罫線を消し、下の tr + tr で引き直す */
    text-align: left;
    vertical-align: top;
    /* 義援金の金額を載せる表なので、桁を読み違えないよう数字を等幅にする */
    font-variant-numeric: tabular-nums;
}

/* 1列目は項目名。エディタのテーブルブロックは th を作らないので td:first-child で拾う */
.page-report .page-body .wp-block-table td:first-child {
    background: var(--color-surface);
    border-right: 1px solid var(--color-text);
    font-weight: 500;
}

.page-report .page-body .wp-block-table tr+tr td {
    border-top: 1px solid var(--color-text);
}

.page-report .page-body .wp-block-table td strong {
    font-weight: 700;
}

/* --- 金額表（ブロックスタイル「金額表」＝ is-style-amount を選んだ時だけ） ---
   最終列が金額の表に付ける。右寄せ＋等幅数字で、縦に並ぶ桁が揃う */
.page-report .page-body .wp-block-table.is-style-amount td:last-child {
    text-align: right;
    white-space: nowrap;
    /* 「241,900円」が途中で折り返さないようにする */
}

/* 合計行。金額表の中で <strong> を含む行を合計として組んでいるので、地色を変えて締める。
   :has() 非対応の環境では地色が付かないだけで太字は残るため、読み落としにはならない */
.page-report .page-body .wp-block-table.is-style-amount tr:has(td strong) {
    background: var(--color-surface);
}

/* ページ送り（前の／次の活動報告）。並びは一覧と同じ report_date 基準 */
.report-nav {
    max-width: 720px;
    /* 本文と同じ幅にそろえる */
    margin: 64px auto 0;
    padding-block: 24px;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* 片方しか無い時に中央へ寄らないよう、次の記事だけの場合は右の列に置く */
.report-nav__link--next:only-child {
    grid-column: 2;
}

.report-nav__link--next {
    text-align: right;
}

.report-nav__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-13);
    color: var(--gray-500);
}

.report-nav__title {
    margin-top: 8px;
    font-size: var(--text-13);
    font-weight: 700;
    line-height: 1.6;
    /* タイトルが長くても2行で止める（カードの高さが揃わなくなるのを防ぐ） */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    transition: color var(--transition-base);
}

/* 一覧へ戻るボタン。ページ送りが主役になったので、幅広ボタン(334×70)から通常サイズに落とす（haru 指定 2026-08-25）。
   文字は 14px 止まり（可読性の下限。11px の .btn--sm は使わない） */
.single-report .btn-row {
    margin-top: 40px;
}

.single-report .btn-row .btn {
    min-height: 44px;
    padding: 10px 24px;
    font-size: var(--text-sm);
}

@media (hover: hover) {
    .report-nav__link:hover .report-nav__title {
        color: var(--color-primary);
    }
}

/* ========================================
   8.9 レスポンシブ：レイアウト組替
   - ベース指定より後に置く（5.8 の後勝ち回避）
   - Phase 1 では「基準幅1400px以上」を担保。以下は最低限の縮小耐性
   ======================================== */

/* --- タブレット（〜1023px）--- */
@media (max-width: 1023px) {

    /* ナビはドロワーへ */
    .nav {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    /* 最新情報の帯：FVが縦積みになるこの幅から、ヘッダー直下の帯に入れ替える（8-1b） */
    .news-ticker--sp {
        display: flex;
    }

    .news-ticker--pc {
        display: none;
    }

    /* 全画面を覆い、上から下へスライドインする */
    .drawer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        inset: 0;
        z-index: 90;
        /* ヘッダー(95)の下。ロゴと×は見えたままにする */
        /* 上端の余白はヘッダー本体のぶんだけ。ドロワーを開く時点で必ずインフォバーは
           画面外にスクロールされている（main.js の initDrawer）ので、--bar-h は足さない */
        padding: calc(var(--header-h) + 24px) var(--page-pad) 40px;
        background: var(--color-surface);
        overflow-y: auto;
        transform: translateY(-100%);
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        /* 減速強めのイージング */
    }

    .drawer[hidden] {
        display: none;
    }

    .drawer.is-open {
        transform: translateY(0);
    }

    .drawer__list {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* padding-block はこれ以上詰めないこと。8px + 行の高さ29.6px = 45.6px で、
       タップターゲットの下限44px（WCAG 2.2）をぎりぎり満たしている（6pxだと41.6pxで下回る） */
    .drawer__link {
        display: block;
        padding-block: 8px;
        font-size: var(--text-base);
        font-weight: 500;
        text-align: center;
    }

    .drawer__cta {
        margin-top: 24px;
        align-self: center;
    }

    /* 動きを減らす設定では即座に出す */
    @media (prefers-reduced-motion: reduce) {
        .drawer {
            transition: none;
        }
    }

    /* --- FV：写真の下に「次の講演」を置く1カラム --- */
    /* グリッド項目が min-content で膨らむのを防ぐ（ボタン行が nowrap のため） */
    .top-fv {
        grid-template-columns: 1fr;
        height: auto;
    }

    .top-fv>* {
        min-width: 0;
    }

    .top-fv__visual {
        aspect-ratio: 16 / 9;
    }

    /* 全幅だと781:688では縦に長すぎる */
    .top-fv__copy {
        top: auto;
        bottom: 108px;
        left: 40px;
    }

    .top-fv__organizer-link {
        right: 40px;
        bottom: 32px;
    }

    .top-fv__next {
        padding: 0 40px 40px;
    }

    .top-fv__next-img {
        width: calc(100% + 80px);
        margin-inline: -40px;
    }

    /* 画像だけ全幅に */
    .top-fv__next-body {
        margin-top: 32px;
    }

    .top-fv__next-who {
        margin-bottom: 10px;
    }

    /* ボタンは枠を伸ばさない。縦積みにしても中身なりの幅を保ち、左揃えのまま置く */
    .top-fv__next-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .top-fv__next-join {
        margin-left: 0;
    }

    /* 縦並びでは右端寄せを解除する */

    /* --- 参加の流れ：3列は保ったまま、幅に追従させる --- */
    .flow {
        gap: 16px;
    }

    .flow__step {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
    }

    .flow__img {
        width: 100%;
        height: auto;
        margin-top: 0;
    }

    /* 10. */
    .flow__arrow {
        padding-top: 30px;
    }

    /* --- 講演カード：画像の下に本文 --- */
    /* グリッド項目の min-width: auto を切る。切らないと nowrap の Zoom ボタン(306px)が
       トラックの最小幅になり、320px 幅などでカードごとはみ出す */
    .seminar-card {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }

    .seminar-card>* {
        min-width: 0;
    }

    .seminar-card__img {
        width: 100%;
    }

    /* 絶対配置をやめて通常フローに戻す（PCは gcal=右上・Zoom=右下の絶対配置） */
    .seminar-card__gcal {
        position: static;
    }

    .seminar-card__cta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .seminar-card .seminar-card__cta-inner {
        position: static;
    }

    .seminar-card__cta-note {
        position: static;
        margin-bottom: 8px;
        text-align: left;
    }

    /* --- このプロジェクトについて：雲は画面端に寄せる（px固定だと位置がずれるため） --- */
    .top-project__cloud--left {
        left: -30%;
        width: 60%;
        top: 220px;
    }

    .top-project__cloud--right {
        left: auto;
        right: -20%;
        width: 65%;
        top: 620px;
    }

    .fact-card {
        width: 100%;
    }

    /* --- 主催者：青帯に重ねる構成をやめ、通常フローの縦積みにする --- */
    .top-organizer {
        display: flex;
        flex-direction: column;
    }

    .top-organizer__band {
        display: none;
    }

    .top-organizer__inner {
        position: static;
        order: 1;
        background: var(--color-sky);
        padding: 24px var(--page-pad) 44px;
    }

    .top-organizer__visual {
        order: 2;
    }

    .organizer {
        grid-template-columns: 200px 1fr;
        column-gap: 40px;
        margin-top: 24px;
    }

    /* --- 寄付の使いみち：画像の下に本文 --- */
    .use-item {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }

    .use-item__img {
        width: 100%;
        height: auto;
    }

    /* 番号と見出しを横並びにする（本文は下段に回す）。タブレット・スマホ共通 */
    .use-item__body {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 14px;
        align-items: center;
        /* 番号の天地センターに見出しを揃える */
    }

    .use-item__num {
        grid-column: 1;
        grid-row: 1;
    }

    .use-item__title {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
    }

    .use-item__text {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* --- 活動報告：2列 --- */
    .report-list {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- 運営メンバー：4列 → 2×2（2026-09-05 追加の中間段階） ---
       1枚あたり約434pxとれるので、写真を上に置いた中央揃えのまま並べる。
       写真を左に回す組み替えは、1列になる767px以下まで持ち越す */
    .staff-list {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 1枚が434pxまで広がると紹介文の1行が長くなりすぎるので上限を置く（haru 指定 2026-09-05）。
       セルの幅は 1fr のままなので、余った分はカードの左右に均等に配る＝セル内で中央に立つ */
    .staff-item {
        max-width: 300px;
        justify-self: center;
    }

    /* --- 講師プロフィール モーダル --- */
    .modal__panel {
        padding: 44px 32px 40px;
    }

    /* --- フッター --- */
    .footer__nav-row {
        flex-direction: column;
        gap: 24px;
    }

    .footer__list {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 8px;
    }
}

/* --- スマホ（〜767px）---
   SPカンプは無いため、ディレクションのSPワイヤー（1カラム・カード積み）を下敷きに、
   カンプで確定したトークン・コンポーネントをそのまま使って構成する。
   ボタンは伸ばさない（haru 指定）ため width:100% は使わず max-width で溢れだけ防ぐ */
@media (max-width: 767px) {
    :root {
        --page-pad: 20px;
    }

    /* --- アーカイブ動画：スマホはモーダルを画面いっぱいにする（haru 指定 2026-09-27）---
       ブラウザの全画面機能（requestFullscreen）は使わない。iPhone の Safari は動画以外の
       要素を全画面にできないため、ボタンを置いても反応しない端末が出る。
       モーダル自体を画面サイズにすれば、どの端末でも同じ見た目になる */
    #archive-modal {
        padding: 0;
    }

    #archive-modal .modal__panel--video {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        padding: 44px 0 0;
        /* 動画を画面の縦中央に置く（上に寄せると下に白い余白が大きく残る） */
        display: flex;
        flex-direction: column;
    }

    /* パネルの左右余白を0にしているので、文字側で余白を取る（動画だけを端まで出すため） */
    #archive-modal .modal__label,
    #archive-modal .modal__video-title {
        padding-inline: 12px;
    }

    #archive-modal .modal__video {
        --video-chrome: 156px;  /* 閉じるボタンの行・タイトル・下のボタンぶん */
        --video-side: 0px;      /* 動画は幅で頭打ちなので、左右の余白は取らない */
        margin-block: auto;
        flex: none;
    }

    /* --- 講演バナーのスライダー：画面に2.5枚入る大きさにする（haru 指定 2026-09-27）。
           半端な枚数にすると「右にまだ続く」ことが一目で伝わる --- */
    .seminar-slider {
        --slider-gap: 8px;
        --slider-item: calc((100vw - var(--slider-gap) * 2.5) / 2.5);
        margin-bottom: 40px;
    }

    /* --- ヘッダー --- */
    /* ① h1 はスマホでも表示する（10px）。1行に収まらないので折り返して2段にする */
    .header__bar {
        height: auto;
    }

    .header__bar-inner {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 4px 12px;
        padding-block: 6px;
        padding-inline: var(--page-pad);
    }

    .header__bar-text {
        font-size: 10px;
        line-height: 1.5;
        flex: 1 1 100%;
    }

    .header__bar-link {
        font-size: 10px;
        margin-left: auto;
    }

    .header__logo img {
        width: 160px;
    }

    .header__main {
        padding-inline: var(--page-pad);
    }

    .drawer {
        padding-inline: var(--page-pad);
    }

    /* --- FV：SP用の縦位置カット（1202×1635）に切り替え、テキストは写真の中に重ねる。
       被写体が右・左上が明るく空いている構図なので、コピーは左上に置く --- */
    .top-fv__visual {
        aspect-ratio: 1202 / 1635;
    }

    .top-fv__copy {
        top: 32px;
        left: var(--page-pad);
    }

    .top-fv__title {
        font-size: 30px;
    }

    /* ② もう少し大きく */
    .top-fv__title-line {
        padding: 7px 15px;
    }

    .top-fv__lead {
        margin-top: 18px;
    }

    .top-fv__organizer-link {
        right: var(--page-pad);
        bottom: 24px;
    }

    .top-fv__next {
        padding: 0 var(--page-pad) 36px;
    }

    /* ③ FV写真とバナーをくっつける */
    .top-fv__next-img {
        width: calc(100% + var(--page-pad) * 2);
        margin-inline: calc(var(--page-pad) * -1);
    }

    /* タグは画像の右上角に合わせる（right:0 は .top-fv__next のパディングボックス右端＝画面右端） */
    /* 76pxだと「講演」が三角形からはみ出すため 88px。文字の収まりは対角線で決まる */
    .top-fv__next-tag {
        width: 88px;
        height: 88px;
        top: 0;
    }

    .top-fv__next-tag-text {
        top: 8px;
        right: 10px;
    }

    /* FV直下は「バナー＋日時＋Zoom」に絞る（詳細は下の講演カードで見せる） */
    .top-fv__next-title,
    .top-fv__next-who,
    .top-fv__next-actions .btn--ghost {
        display: none;
    }

    /* 日時とボタンは左右センター。ボタンは下端に押し出さず日時のすぐ下に置く */
    .top-fv__next-date {
        text-align: center;
    }

    .top-fv__next-actions {
        margin-top: 10px;
        align-items: center;
    }

    /* ⑥ Zoomボタンを約80%に */
    .btn--lg {
        min-height: 48px;
        padding: 11px 26px;
        font-size: var(--text-18);
    }

    .top-fv__next-join {
        width: 224px;
    }

    /* 注記の幅をボタンに合わせ、中央揃えの基準をそろえる */
    .top-fv__next-actions .btn--lg {
        width: 224px;
    }

    /* ベース側の .seminar-card .seminar-card__cta-btn（0,2,0）が .btn--lg（0,1,0）に勝つので高さもここで指定する */
    .seminar-card .seminar-card__cta-inner {
        width: 245px;
    }

    .seminar-card .seminar-card__cta-btn {
        min-height: 48px;
    }

    /* --- 参加の流れ：縦積み。矢印は下向きにして流れを保つ --- */
    .top-flow {
        padding-block: 20px 44px;   /* 上はPCと同じ20px（haru 指定 2026-09-27） */
    }

    .amount-card {
        width: auto;
        margin-inline: var(--page-pad);
        padding: 20px 20px 18px;
    }

    /* 2枚は横に並べず縦積み。375pxで並べると1枚160px弱になり、37pxの金額が入らない */
    .amount-cards--pair {
        flex-direction: column;
        gap: 16px;
        padding-inline: 0;
    }

    .amount-cards--pair .amount-card {
        flex: none;
        max-width: none;
        margin-inline: var(--page-pad);
        /* 上のベース指定を打ち消さないよう、ここでも指定する */
    }

    .top-flow__title {
        font-size: 26px;
        margin-top: 56px;
        text-align: left;
    }

    /* ⑦ */
    .top-flow__lead {
        margin-top: 24px;
        text-align: left;
    }

    .flow {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
        margin-top: 40px;
    }

    /* 8. */
    .flow__step {
        width: auto;
    }

    .flow__img {
        width: 100%;
        height: auto;
    }

    .flow__text {
        margin-top: 12px;
        text-align: center;
    }

    /* スマホは中央揃え（ベースの両端揃えを打ち消す） */
    .flow__arrow {
        display: none;
    }

    /* ⑨ スマホでは矢印を出さない */

    /* --- 講演情報 --- */
    .top-seminar {
        padding-block: 32px 56px;
    }

    .top-seminar__title {
        width: 100%;
        height: auto;
        padding: 14px 16px;
        font-size: var(--text-lg);
    }

    .seminar-list {
        margin-top: 30px;
    }

    /* 11. */
    .seminar-card__title {
        margin-top: 14px;
        font-size: var(--text-18);
    }

    .seminar-card__who {
        font-size: var(--text-13);
    }

    .seminar-card__actions {
        margin-top: 20px;
    }

    /* --- このプロジェクトについて --- */
    .top-project {
        padding-block: 56px 48px;
    }

    .fact-card {
        width: 100%;
        padding: 24px 20px;
        border-radius: var(--radius-lg);
    }

    .omoi {
        margin-top: 44px;
        line-height: 2.2;
    }

    .omoi p+p {
        margin-top: 30px;
    }

    .omoi__strong {
        margin-top: 56px;
    }

    .top-project__slogan {
        margin-top: 44px;
    }

    .top-project__slogan img {
        width: 100%;
    }

    /* SP版は2行組み（1015×656）なので幅追従にする */
    .top-project__cloud--left {
        left: -40%;
        width: 80%;
        top: 180px;
    }

    .top-project__cloud--right {
        right: -35%;
        width: 85%;
        top: 560px;
    }

    /* --- 主催者：写真の下にテキスト --- */
    .top-organizer__inner {
        padding-block: 20px 36px;
    }

    .organizer {
        grid-template-columns: 1fr;
        row-gap: 20px;
        margin-top: 20px;
    }

    .organizer__photo {
        margin-inline: auto;
    }

    /* 4. 写真をセンターに */
    .organizer__name {
        font-size: var(--text-15);
    }

    /* 5. */
    .organizer__body {
        padding-block: 28px;
    }

    /* --- 寄付の使いみち --- */
    .top-use {
        padding-block: 56px 48px;
    }

    .use-list {
        margin-top: 40px;
    }

    .use-item+.use-item {
        margin-top: 36px;
    }

    /* --- 振込先：表は縦積みにして狭い幅でも読めるようにする --- */
    .top-account {
        padding-block: 32px 48px;
    }

    /* 活動報告の復活時に 0 に戻す */
    .account-card {
        padding: 28px 20px 32px;
    }

    .account-table,
    .account-table tbody,
    .account-table tr,
    .account-table th,
    .account-table td {
        display: block;
        width: auto;
    }

    .account-table {
        border-radius: var(--radius-sm);
        overflow: hidden;
        margin-top: 20px;
    }

    /* 3. */
    .account-table th {
        text-align: left;
        border-right: 0;
        padding: 12px 16px;
    }

    .account-table td {
        padding: 14px 16px;
    }

    .account-table tr+tr th,
    .account-table tr+tr td {
        border-top: 0;
    }

    .account-table td {
        border-top: 0;
    }

    /* 4. */
    .account-note {
        margin-top: 24px;
    }

    /* --- 活動報告：1列 --- */
    .top-report {
        padding-block: 56px 56px;
    }

    .report-card__title {
        margin-top: 0;
    }

    /* 5. */
    .report-list {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .top-report .btn-row {
        margin-top: 36px;
    }

    /* --- FAQ --- */
    .top-faq {
        padding-block: 48px 56px;
    }

    /* セクション全体の余白が縮む（71px→48px）のに合わせて、1つ目のグループの上も詰める */
    .sec-title+.faq-group {
        margin-top: 32px;
    }

    .faq-list {
        margin-top: 32px;
    }

    .faq-item__q {
        min-height: 0;
        padding: 18px 20px;
        gap: 14px;
    }

    .faq-item__mark {
        width: 18px;
        font-size: var(--text-xl);
    }

    .faq-item__a-inner {
        margin-inline: 20px;
        padding-block: 20px 24px;
        gap: 14px;
    }

    /* 6. 使いみち本文とFAQ（設問・回答とも）を15pxに揃える */
    /* ベース側の .faq-item__a .faq-item__text（0,2,0）に勝つ必要があるので同じ形で指定する */
    .use-item__text,
    .faq-item__q .faq-item__text,
    .faq-item__a .faq-item__text {
        font-size: var(--text-15);
    }

    /* カンプではPC・タブレットとも中央揃えなので、この2つだけスマホで両端揃えにする */
    .top-flow__lead,
    .fact-card p {
        text-align: justify;
    }

    /* --- 共通：セクション見出しと末尾CTA --- */
    .sec-title {
        font-size: 24px;
    }

    .btn--wide {
        max-width: 100%;
    }

    /* 伸ばさないが、溢れもしない */

    /* --- 講師プロフィール モーダル：写真の下にテキスト --- */
    .modal {
        padding: 16px;
    }

    .modal__panel {
        padding: 40px 20px 32px;
        max-height: calc(100dvh - 32px);
    }

    .speaker {
        grid-template-columns: 1fr;
        row-gap: 20px;
        margin-top: 22px;
    }

    .speaker__photo {
        margin-inline: auto;
    }

    .speaker__name {
        font-size: var(--text-xl);
    }

    /* --- フッター --- */
    .footer {
        padding-block: 48px 24px;
    }

    .footer__logo img {
        width: 240px;
    }

    .footer__logo .logo-pre {
        width: 240px;
    }

    .footer__nav-row {
        margin-top: 32px;
    }

    .footer__item:not(:first-of-type)::before {
        margin-inline: 12px;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* --- 下層ページ・フォーム --- */
    .page-header {
        margin-top: 36px;
    }

    .page-lead {
        margin-top: 20px;
        margin-bottom: 24px;
    }

    /* 中央揃えのまま（FVリードと同じ扱い・5.7 の justify 対象外） */
    .page-contact__main {
        padding-bottom: 64px;
    }

    .form {
        margin-top: 40px;
    }

    .form-field+.form-field {
        margin-top: 24px;
    }

    .form-control--area {
        min-height: 160px;
    }

    .form-field--consent {
        text-align: left;
    }

    .page-report__main {
        margin-bottom: 48px;
    }

    .page-archive__main,
    .page-privacy__main {
        padding-bottom: 48px;
    }

    .page-donate {
        padding-block: 48px 56px;
    }

    .page-body {
        margin-top: 40px;
    }

    .page-body__section+.page-body__section {
        margin-top: 32px;
    }

    .page-body .page-body__date {
        margin-top: 40px;
    }

    .form__submit .btn {
        min-width: 240px;
    }

    /* 伸ばさない（haru 指定）。320px でも収まる幅 */

    /* --- 活動報告の個別ページ --- */
    .page-report__thumb {
        margin-top: 28px;
    }

    .page-report .page-body p {
        margin-top: 20px;
        line-height: 1.95;
    }

    .page-report .page-body *+h2 {
        margin-top: 40px;
    }

    .page-report .page-body h3 {
        margin-top: 32px;
    }

    /* --- 支援の協力者募集 --- */
    .top-support {
        padding-block: 48px 56px;
    }

    .top-support__text {
        margin-top: 18px;
        text-align: justify;
        /* ベースの text-wrap: balance を解除する。balance は行の長さを揃えようとして
           1行目を短く折り返すため、両端揃えにすると足りない分がすべて字間に配分され、
           1行目だけ極端に間延びする（実測 214px の内容を 335px まで引き伸ばしていた）。
           解除すると1行目は自然な折り返し（331px）になり、引き伸ばしは4pxで収まる */
        text-wrap: auto;
    }

    /* --- 運営メンバー：2×2 → 1列。写真を左・本文を右にして高さを抑える ---
       375pxで2列にすると1枚あたり約155pxになり、写真80pxと氏名18pxが窮屈になるため1列にする。
       この節は 1023px（2×2）より後に置くこと（同じ詳細度なので後勝ち・5.8） */
    .top-staff {
        padding-block: 48px 56px;
    }

    .staff-list {
        margin-top: 28px;
        gap: 24px;
        grid-template-columns: 1fr;
    }

    .staff-item {
        /* 2×2 で入れた 300px 上限をここで解除する（1列では画面幅いっぱいに使う） */
        max-width: none;
        justify-self: stretch;
        grid-template-columns: 64px 1fr;
        column-gap: 16px;
        justify-items: start;
        text-align: left;
        align-items: start;
    }

    .staff-item__photo {
        width: 64px;
        height: 64px;
        margin-bottom: 0;
        grid-row: span 3;
    }

    /* 写真が3行ぶんしか占めないので、4つ目のこの要素は自動配置だと写真の下（左列）に落ちる。
       本文と同じ右列に固定する */
    .staff-item__sns {
        grid-column: 2;
        margin-top: 0;
    }

    /* 44pxのタップ領域が左に張り出して本文と揃わないぶんを打ち消す */
    .staff-item__sns a {
        margin-left: -11px;
    }
}


/* --- ① FVコピー：1340px以下は人物にかぶるので上に逃がす（haru 指定 2026-08-25）
       タブレット（1023px以下）はコピーを下端基準に置き替えるため、この範囲には効かせない --- */
@media (min-width: 1024px) and (max-width: 1340px) {
    .top-fv__copy {
        top: 50px;
    }
}

/* --- ③ 「次の講演」タグ：タブレットは文字ごと120%に拡大（haru 指定 2026-08-25）
       ベースの実測値（三角100px・文字14px・右16px 等）をすべて1.2倍している --- */
@media (min-width: 768px) and (max-width: 1023px) {
    /* --- 講演バナーのスライダー：タブレットは4枚（haru 指定 2026-09-27）。
           PCの5枚のままだと768pxで1枚142pxになり、バナーの中身が読めない --- */
    .seminar-slider {
        --slider-item: calc((100vw - var(--slider-gap) * 4) / 4);
    }

    .top-fv__next-tag {
        width: 120px;
        height: 120px;
    }

    .top-fv__next-tag-text {
        top: 16px;
        right: 19px;
        width: 35px;
        font-size: 17px;
    }

    .top-fv__next-tag-line {
        padding-bottom: 6px;
        margin-bottom: 6px;
    }
}

/* --- ③ 「次の講演」タグ：スマホは三角をやめ、バナー上の全幅帯にして中央寄せ（haru 指定 2026-08-25） --- */
@media (max-width: 767px) {
    .top-fv__next-tag {
        position: static;
        /* 絶対配置をやめて画像の上に積む */
        display: block;
        width: calc(100% + var(--page-pad) * 2);
        /* 画像と同じく画面端まで伸ばす */
        margin-inline: calc(var(--page-pad) * -1);
        height: auto;
        clip-path: none;
        /* 三角の切り抜きを解除 */
        padding-block: 7px;
    }

    .top-fv__next-tag-text {
        position: static;
        width: auto;
        display: block;
        text-align: center;
        font-size: var(--text-15);
    }

    /* 帯では1行に収めるので、「次の」の下の白罫線は出さない */
    .top-fv__next-tag-line {
        display: inline;
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }
}

/* --- スマホの調整（haru 指定 2026-08-25） --- */
@media (max-width: 767px) {

    /* パンくずは補助情報なので最小限に。構造化データ（JSON-LD）にも同じ階層を出しているので、
       小さくしても検索エンジンへの伝わり方は変わらない */
    .breadcrumb__list {
        font-size: 10px;
    }

    /* アーカイブの案内文は両端揃えに（haru 指定 2026-08-25）。
       中央揃えのままだと、折り返した行の右端がガタついて読みにくいため。
       規約5.7「日本語の本文テキストは text-align: justify を基本とする」に沿う */
    .top-seminar__archive-lead {
        text-align: justify;
    }

    /* 記事タイトルだけ 20px に落とす（haru 指定 2026-08-25）。
       このブロックの .sec-title（24px）が .sec-title--sm より後に来て勝つため、
       詳細度を上げて詳細ページの h1 だけを狙う。他の sec-title--sm（ご寄付のお願い等）は24pxのまま */
    .single-report .page-header .sec-title--sm {
        font-size: var(--text-lg);
    }

    /* 前へ／次へは横に並べると1件あたり半分の幅しか使えないので、縦に積む */
    .report-nav {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .report-nav__link--next:only-child {
        grid-column: 1;
    }

    .report-nav__link--next {
        text-align: left;
    }

    /* --- 本文中の表：行を縦積みにする（2026-09-03 追加） ---
       375pxでは本文幅が335pxしかなく、3列の表は1列あたり約110pxになる。
       金額が途中で折り返して桁が読めなくなるため、振込先の .account-table と同じく縦積みにする。
       横スクロールさせない方針（コアの figure{overflow-x:auto} に頼らない） */
    .page-report .page-body .wp-block-table table,
    .page-report .page-body .wp-block-table tbody,
    .page-report .page-body .wp-block-table tr,
    .page-report .page-body .wp-block-table td {
        display: block;
        width: auto;
    }

    .page-report .page-body .wp-block-table td {
        padding: 12px 16px;
    }

    .page-report .page-body .wp-block-table td:first-child {
        border-right: 0;
    }

    /* 罫線は td 単位ではなく行間に引く（縦積みでは1行が複数のセルに分かれるため） */
    .page-report .page-body .wp-block-table tr+tr td {
        border-top: 0;
    }

    .page-report .page-body .wp-block-table tr+tr {
        border-top: 1px solid var(--color-text);
    }

    /* 内訳表の「振込手数料」「合計」行は2列目が空。縦積みだと空の帯になるので出さない */
    .page-report .page-body .wp-block-table td:empty {
        display: none;
    }

    /* 縦積みでは1行に1項目しか並ばないので、金額を右端へ飛ばさず左に揃える */
    .page-report .page-body .wp-block-table.is-style-amount td:last-child {
        text-align: left;
    }

    /* 引用：本文幅が335pxしかないので内側の余白を詰める（引用文の1行の字数を確保する）。
       地色の端は本文と同じ位置（＝左右マージン0）のままにする */
    .page-report .page-body .wp-block-quote {
        padding: 20px 18px;
    }
}

/* --- ① FVコピー：1600px以上は画面幅に連動して大きくする（haru 指定 2026-08-25）
       1600px で基準幅と同じ大きさになる係数（32/1600 = 2vw）にしてあるので、
       1400〜1600px の見た目は一切変わらない。上限を設けて巨大化を防ぐ --- */
@media (min-width: 1600px) {
    .top-fv__title {
        font-size: min(2vw, 46px);
    }

    .top-fv__lead {
        font-size: min(0.94vw, 21px);
    }

}

/* ========================================
   8.95 活動報告セクションの有無による調整（WP化で追加）
   - 静的版は活動報告を常に非表示にしていたため、.top-account に暫定の下余白を持たせていた
     （PC 100px / SP 48px）。本来の設計は0で、直後の活動報告セクションが自分の上余白を持つ
   - WP化で表示/非表示が管理画面から可変になったので、活動報告を出す時だけ下余白を打ち消す
   - 8.9（レスポンシブ）より後に置くこと。前に置くと SP の padding-block に後勝ちされる（5.8）
   ======================================== */
.top-account--has-next {
    padding-bottom: 0;
}

/* 次の講演がまだ登録されていない時のFV。右カラム（次の講演）を出さないので、
   写真を全幅にして空の帯が残らないようにする */
.top-fv--single {
    grid-template-columns: 1fr;
}

/* 上部インフォバーはトップページだけに出す（haru 指定 2026-08-25）。
   バーの一文はトップの h1（下層では p）で、下層ページには各ページの h1 があるため。

   高さを 0 にするだけでなく --bar-h も 0 にすること。この変数は
   ・.header の sticky 貼り付き位置 top: calc(-1 * var(--bar-h))
   ・スマホのドロワーの上余白 calc(var(--bar-h) + var(--header-h) + 24px)
   の2箇所が参照していて、0 にしないとバーが無いのにヘッダーが 30px 上へずれて上端が切れる。
   main.js の initHeaderOffset が実測値を html に書き戻すが、body 側の宣言が
   body 以下では勝つので、ここで 0 を宣言しておけば JS の計測前後どちらでもずれない */
body:not(.page-top) {
    --bar-h: 0px;
}

body:not(.page-top) .header__bar-inner {
    display: none;
}

/* 活動報告一覧は PC 3列・上余白80px・カード間隔50px（トップの4列/25px/35pxとは別。haru 指定 2026-08-25）。
   タブレット2列・スマホ1列は 8.9 の指定をそのまま使うため、min-width で PC だけに限定する */
@media (min-width: 1024px) {
    .page-report .report-list {
        grid-template-columns: repeat(3, 1fr);
        margin-top: 80px;
        gap: 50px;
    }
}

/* ========================================
   9. Animations & Keyframes
   - 2026-08-08 に付与（haru 承認：アコーディオン／スクロール出現／ボタンhover／ヘッダー出し入れ）
   - アコーディオンと hover は各コンポーネントの定義側に置いてある
   ======================================== */

/* --- スクロール出現（recipes R-007）---
   main.js の REVEAL_TARGETS に当たる要素へ .is-revealed が付く。
   義援金を扱うサイトなので、動きは「フェード＋16px上へ」の控えめなものに留める */
:where(html.js) :where(.amount-card,
    .top-flow__title, .top-flow__lead, .flow__step, .flow__arrow,
    .top-seminar__title, .seminar-card, .top-seminar__archive-lead, .top-seminar .btn-row,
    .top-project .sec-label, .top-project .sec-title, .fact-card, .omoi, .top-project__slogan,
    .top-organizer__inner .sec-label, .organizer,
    .top-use .sec-label, .top-use .sec-title, .use-item,
    .account-card,
    .top-report .sec-label, .top-report .sec-title, .report-card, .top-report .btn-row) {
    /* :where() で詳細度を0にする。こうしないと `.top-project .sec-title`（0,2,0）が
       `.is-revealed`（0,1,0）に勝ってしまい、クラスが付いても opacity:0 のままになる（実害あり） */
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease;
}

.is-revealed {
    opacity: 1;
    transform: none;
}

/* --- 参加の流れ：他より大きく浮かび上がりながら、左からひとつずつ ---
   .is-revealed（0,1,0）と競合しないよう、開始状態は :not(.is-revealed) 側に持たせる */
.flow__step {
    transition-duration: 0.9s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    /* 減速強め＝ふわりと浮き上がる */
}

.flow__step:not(.is-revealed) {
    transform: translateY(48px) scale(0.96);
}

.flow__arrow:not(.is-revealed) {
    transform: translateY(16px);
}

/* .flow の子は ステップ・矢印・ステップ・矢印・ステップ の順。左から順に出す */
.flow>*:nth-child(1) {
    transition-delay: 0s;
}

.flow>*:nth-child(2) {
    transition-delay: 0.18s;
}

.flow>*:nth-child(3) {
    transition-delay: 0.28s;
}

.flow>*:nth-child(4) {
    transition-delay: 0.46s;
}

.flow>*:nth-child(5) {
    transition-delay: 0.56s;
}

/* 横並びのカード群は順送りで出す（親ではなく各要素に .is-revealed が付くため
   nth-child で遅延を持たせる） */
.use-item:nth-child(2) {
    transition-delay: 0.08s;
}

.use-item:nth-child(3) {
    transition-delay: 0.16s;
}

.report-card:nth-child(2) {
    transition-delay: 0.08s;
}

.report-card:nth-child(3) {
    transition-delay: 0.16s;
}

.report-card:nth-child(4) {
    transition-delay: 0.24s;
}

/* FAQ はフェードインしない（haru 指定 2026-08-08） */

/* --- 最新情報の帯：タイトルを右から左へ流す（8-1b・2026-09-22）---
   トラックは「タイトル＋隙間」を2本並べたもの。半分動いた時点が最初と同じ見た目なので、
   そこで先頭に戻すと継ぎ目のないループになる */
@keyframes news-ticker-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* --- 講演バナーのスライダー：右から左へゆっくり流す（8-2・2026-09-27）---
   トラックは同じ並びを2周ぶん持つ。半分動いた時点が最初と同じ見た目なので、
   そこで先頭に戻すと継ぎ目のないループになる */
@keyframes seminar-slider-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* --- 動きを減らす設定の環境では、すべて無効化する --- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        /* リセット用途のため !important を許容（5.9） */
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    :where(.amount-card, .top-flow__title, .top-flow__lead, .flow__step, .flow__arrow,
        .top-seminar__title, .seminar-card, .top-seminar__archive-lead, .top-seminar .btn-row,
        .top-project .sec-label, .top-project .sec-title, .fact-card, .omoi, .top-project__slogan,
        .top-organizer__inner .sec-label, .organizer,
        .top-use .sec-label, .top-use .sec-title, .use-item,
        .account-card,
        .top-report .sec-label, .top-report .sec-title, .report-card, .top-report .btn-row) {
        opacity: 1;
        transform: none;
    }

    .top-fv__title-line {
        clip-path: none;
    }

    /* 最新情報の帯は流さず、折り返して全文を見せる（JS も .is-scrolling を付けない） */
    :where(html.js) .news-ticker__track {
        display: block;
        white-space: normal;
    }

    /* 講演バナーのスライダーは止める。上の全体リセット（duration 0.01ms）だけだと
       無限ループの周期が縮むだけなので、ここで明示的に止める。
       通常時の指定 .seminar-slider.is-scrolling .seminar-slider__track と
       同じ詳細度で、かつ後に置くこと（規約6.9） */
    .seminar-slider.is-scrolling .seminar-slider__track {
        animation: none;
    }
}