@font-face {
    font-family: "Oswald";
    src: url("../fonts/oswald-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
  }

  /* ============ tokens ============ */
  /* 色は「海」と「砂浜」の2系統だけ。
     海は同じ色相（hue≒193）で明度だけを変えた段階にそろえ、
     砂は暖色の中立色として、海と交互に敷く帯に使う。
     この2系統の外に色を作らないことで、全ページの印象をそろえる。 */
  :root {
    /* --- 海（マリックスラインの青。淡い空色 → 深い紺） --- */
    --sea-50:  #F1F6FC; /* いちばん淡い面。サブページのヒーローやカード地 */
    --sea-100: #DBE9F8; /* 淡い面 */
    --sea-200: #8FC3E9; /* 浅瀬。濃い紺の上に置く明るい文字・罫 */
    --sea-300: #4A99DD; /* 海。帯の地色（この色の上は必ず濃い文字） */
    --sea-500: #1D57B5; /* 濃い青。白地でも 4.5 以上 */
    --sea-600: #204B86; /* 帯のグラデーションの上端。白・淡青・金がすべて4.5以上に収まる一番明るい値 */
    --sea-700: #1E4A86; /* 帯の中ほど。白文字 8.83:1 */
    --sea-900: #1F3F73; /* いちばん深い紺。フッター。白文字 10.41:1 */

    /* --- 差し色。活動時のポロシャツのオレンジに合わせる --- */
    /* シャツそのものの色（#D89060 前後）は明るすぎて、白地に置くと 2.6:1 しかなく
       文字にもボタンにも使えない。色味（オレンジの色相）はそのままに、
       読める濃さまで落とした値をリンク・ボタン・見出しに使う */
    --accent:      #C0451F; /* 白地 5.11:1 / クリーム地 4.70:1 */
    --accent-deep: #93300F; /* ホバーと、地色にしたときの白文字用（白地 7.86:1） */
    --accent-soft: #DE9068; /* シャツに近い明るいオレンジ。濃い地の上の飾りにだけ使う */

    /* --- 砂浜 --- */
    --sand-50:  #F9F5F0; /* 帯の地色。マリックスラインのクリーム */
    --sand-200: #E4D9CB; /* 砂色の罫・縁取り */
    --sand-dot: rgba(150,128,104,.28); /* 砂粒 */
    --sand-mark: rgba(150,128,104,.16); /* 砂に残る足跡。主張しない濃さに留める */

    /* --- 文字 --- */
    /* 年配の方も読むため、本文はしっかり濃くする。
       補助文字（--ink-faint）も、白地で 7:1 以上を確保できる濃さにそろえる */
    --ink-base:  #24282C;
    --ink:       var(--ink-base);
    --ink-soft-base: #3A4046;
    --ink-soft:  var(--ink-soft-base);
    /* 帯の中で --ink-faint を濃く上書きするため、元の値も別名で持っておく */
    --ink-faint-base: #565E66;
    --ink-faint: var(--ink-faint-base);
    /* 濃い海の上でだけ使う、より濃い補助文字 */
    --ink-faint-on-sea: #1E2A2E;

    /* --- 面と罫 --- */
    --bg:          #FFFFFF;
    --surface:     #FFFFFF;
    --surface-alt: var(--sea-50);
    --line:        #E2E5EA;
    /* 4:3の枠に収めた画像（表彰状・楯）の余白。白い紙と地続きに見えないよう、罫より少し濃くする */
    --mat:         #DDE1E7;
    --line-strong: #BCC2CB;

    /* --- 注意を促す色（雨天中止の警告など。海の系統から外れる唯一の色） --- */
    --alert:      #9C5D00;
    --alert-on-dark: #FFD24A;

    /* --- 受賞・実績まわりだけに使う金色。砂の暖色を締めた色 --- */
    --gold:      #E3C68C;
    --gold-deep: #BE9A52;

    /* --- 旧名。既存の指定を壊さないための別名 --- */
    --blue:         var(--accent);
    --blue-deep:    var(--accent-deep);
    --blue-deepest: var(--sea-900);
    --blue-bright:  var(--sea-200);
    --sky-soft:     var(--sea-50);
    --sand:         var(--sand-200);
    --band-sand:     var(--sand-50);
    --band-sand-dot: var(--sand-dot);
    --band-sea:      var(--sea-300);
    --band-sea-2:    var(--sea-200);

    --on-blue-1: rgba(255,255,255,.80);
    --on-blue-2: rgba(255,255,255,.95);
    --line-on-blue: rgba(255,255,255,.18);

    /* 管理バーの高さ（ログイン中だけ出る）。管理画面側と同じ値 */
    --adminbar-h: 34px;

    /* ヘッダー分。ヒーローの高さから差し引く
       （上の細い帯をやめたぶん、以前の 132px から下げてある） */
    --chrome-h: 96px;

    /* type scale
       本文は 17px を基準にする。一般的な 16px よりわずかに大きく、
       旅行中の方や年配の方にも読みやすい。もっと大きくしたい人向けには
       ヘッダーの「文字サイズ 拡大」があり、そちらで 19px の段に上がる */
    --fs-cap:  0.875rem;   /* 14 */
    --fs-sm:   0.9375rem;  /* 15 */
    --fs-base: 1.0625rem;  /* 17 */
    --fs-md:   1.1875rem;  /* 19 */
    --fs-lg:   1.5rem;     /* 24 */
    --fs-xl:   2rem;       /* 32 */
    --fs-2xl:  2.5rem;     /* 40 */
    --fs-3xl:  3.25rem;    /* 52 */

    /* spacing — 4px 基準 */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
  }

  /* 文字サイズ「拡大」時。type scale をまとめて一段階上げるので、
     個々のコンポーネントに手を入れなくてもページ全体が拡大する */
  html.fs-large {
    --fs-cap:  0.9375rem;  /* 15 */
    --fs-sm:   1.0625rem;  /* 17 */
    --fs-base: 1.1875rem;  /* 19 */
    --fs-md:   1.3125rem;  /* 21 */
    --fs-lg:   1.6875rem;  /* 27 */
    --fs-xl:   2.25rem;    /* 36 */
    --fs-2xl:  2.75rem;    /* 44 */
    --fs-3xl:  3.5rem;     /* 56 */
  }

  /* 段組みを1列に畳みはじめる幅から下は、縦の間隔も一段ずつ詰める。
     PCと同じ値のままだと、横に並んでいたものが縦に積み替わるぶん
     セクションの間だけで画面の半分ほどが空いてしまう。
     触るのは大きい段（--sp-7 以上）だけ。部品の中の詰め（--sp-6 以下）は
     変えないので、カードや表の見た目はPCと同じままになる */
  @media (max-width: 900px) {
    :root {
      --sp-7: 2.5rem;  /* 48 → 40 */
      --sp-8: 3rem;    /* 64 → 48 */
      --sp-9: 4rem;    /* 96 → 64 */
    }
  }

  /* スマートフォン。画面が狭いぶん、同じ級数だと文字が画面を占領してしまう。
     とくに見出しの効きが強すぎるので、本文より見出し側を大きく落とす。
     html.fs-large は :root と同じ詳細度ではないため、必ずこの順で後に置く */
  @media (max-width: 560px) {
    :root {
      --fs-cap:  0.8125rem;  /* 13 */
      --fs-sm:   0.875rem;   /* 14 */
      --fs-base: 1rem;       /* 16 */
      --fs-md:   1.0625rem;  /* 17 */
      --fs-lg:   1.3125rem;  /* 21 */
      --fs-xl:   1.625rem;   /* 26 */
      --fs-2xl:  2rem;       /* 32 */
      --fs-3xl:  2.375rem;   /* 38 */
    }
    html.fs-large {
      --fs-cap:  0.875rem;   /* 14 */
      --fs-sm:   0.9375rem;  /* 15 */
      --fs-base: 1.0625rem;  /* 17 */
      --fs-md:   1.1875rem;  /* 19 */
      --fs-lg:   1.4375rem;  /* 23 */
      --fs-xl:   1.75rem;    /* 28 */
      --fs-2xl:  2.125rem;   /* 34 */
      --fs-3xl:  2.5rem;     /* 40 */
    }
    /* 縦の間隔をもう一段詰める。これでセクションの上下が 48px ずつになり、
       見出しの上に空きすぎた余白が残らない */
    :root {
      --sp-7: 2rem;    /* 32 */
      --sp-8: 2.5rem;  /* 40 */
      --sp-9: 3rem;    /* 48 */
    }
  }

  * { box-sizing: border-box; }
  /* スクロールバーの幅は常に確保しておく。イントロの間は body を overflow:hidden で
     止めるので、確保していないと幕が引けた瞬間にスクロールバーが現れ、
     画面全体が15pxぶん横に詰まって「がくっ」と動いて見える。
     ページの長短でレイアウトがずれないという効き目もある */
  html { scroll-behavior: smooth; scrollbar-gutter: stable; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Meiryo", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif;
    font-size: var(--fs-base);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "tnum" 1;
  }

  img { display: block; max-width: 100%; }

  /* 日本語は単語間の空白がないため、放っておくと「ひと／つずつ」のように
     文節の途中で折り返される。auto-phrase で文節単位に区切り、
     禁則は strict、末尾の行が1語だけ残るのを pretty で防ぐ */
  p, li, dt, dd, blockquote, figcaption, label {
    word-break: auto-phrase;
    line-break: strict;
    text-wrap: pretty;
  }
  /* 見出しも文節で区切る。
     掛けないと「ボランティ／アグループ」のようにカタカナ語の途中で切れてしまう。
     そのぶん行末に余白が残って1行増えることがあるが、
     語の途中で切れて読めなくなるより、1行増えるほうがましと判断した */
  h1, h2, h3, h4, h5 {
    word-break: auto-phrase;
    line-break: strict;
    text-wrap: pretty;
  }
  /* SPでの折り返し解除は、個別指定（h1.sec など）に勝てるよう
     ファイル末尾の「SPの折り返し」ブロックでまとめて行う */

  .num {
    font-family: "Oswald", "Hiragino Sans", sans-serif;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
  }

  .wrap { width: min(1180px, 92vw); margin-inline: auto; }


  /* ============ intro splash（読み込み時の導入演出） ============ */
  /* 中身が下から浮き上がる → 読み込みのゲージが満ちる → 幕ごと上へ引き上げて消える。
     引き上げは「ゲージが端まで届いた時点」で始める（js/intro.js が is-done を付ける）。
     時間で動かすと、ゲージが途中のまま幕だけ動いてしまうため。
     JS が動かないときのために、時間切れで必ず消える保険（splashFailsafe）も併せて持たせている */
  .intro-splash {
    /* 動きの調子と、引き上げ始めるまでの待ち。ここだけで全体の速さを変えられる */
    --splash-ease: cubic-bezier(.2,.7,.3,1);
    /* JSが動かないときに、幕を消すまでの時間切れ */
    --splash-failsafe: 4s;
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* サイトの「海の帯」（.band--sea）と同じ段階を使う。
       --sea-500 は白地に置く文字用の明るい青で、広い面に敷くとサイトのどこにも無い色になる */
    background: linear-gradient(160deg, var(--sea-600) 0%, var(--sea-700) 52%, var(--sea-900) 100%);
    /* JSが動かないときの保険。時間切れでその場から消す */
    animation: splashFailsafe 0s linear var(--splash-failsafe) forwards;
  }

  /* ゲージが満ちたら付く（js/intro.js）。ここで実際に引き上げる。
     上へ抜ける動きと薄くなる動きは長さも始まりも違うので、2本重ねている */
  .intro-splash.is-done {
    animation:
      splashSlideUp 1s var(--splash-ease) forwards,
      splashFadeOut .75s var(--splash-ease) .2s forwards;
  }

  .intro-splash__inner { position: relative; z-index: 2; text-align: center; padding: 0 6vw; }

  /* 参加者のシルエット。波の上に立っているように下端へ寄せる */
  .intro-splash__silhouette {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1;
    width: min(1100px, 118vw);
    height: auto;
    opacity: 0;
    transform: translateX(-50%) translateY(24px);
    animation: splashSilhouette .6s var(--splash-ease) .05s forwards;
    pointer-events: none;
  }
  @keyframes splashSilhouette {
    to { opacity: .22; transform: translateX(-50%) translateY(0); }
  }
  @media (max-width: 640px) {
    .intro-splash__silhouette { width: 150vw; }
  }

  /* 各行は、少し下から浮き上がりながら現れる（順に一拍ずつ遅らせる） */
  .intro-splash p { margin: 0; }
  .intro-splash p + p { margin-top: var(--sp-5); }
  .intro-splash p span {
    display: inline-block;
    opacity: 0;
    transform: translateY(16px);
    animation: splashRise .5s var(--splash-ease) forwards;
  }
  .intro-splash__ja span { animation-delay: .05s; }
  .intro-splash__yn span { animation-delay: .14s; }
  .intro-splash__en span { animation-delay: .24s; }

  .intro-splash__ja {
    color: #fff;
    font-size: clamp(1.45rem, 4.2vw, 2.7rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
  }
  .intro-splash__yn {
    /* 幕の上の文字は3行とも白でそろえる（濃い紺の上で 8.71:1 と、いちばんはっきり読める） */
    color: #fff;
    font-size: clamp(1rem, 2.4vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
  }
  .intro-splash__yn small { font-size: .68em; font-weight: 400; opacity: .8; margin-left: 2px; }
  .intro-splash__en {
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: clamp(.8125rem, 1.6vw, 1.0625rem);
    letter-spacing: 0.3em;
  }

  /* 読み込みメーター */
  .intro-splash__loading {
    margin-top: var(--sp-7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: splashRiseFade .5s var(--splash-ease) .24s forwards;
  }
  .intro-splash__bar {
    width: min(320px, 60vw);
    flex: none;
    height: 4px;
    background: rgba(255,255,255,.24);
    overflow: hidden;
  }
  .intro-splash__bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--sea-200);
    transition: width .18s cubic-bezier(.2,.7,.3,1);
  }
  @keyframes splashRise { to { opacity: 1; transform: none; } }
  @keyframes splashRiseFade { to { opacity: 1; } }
  @keyframes splashSlideUp { to { transform: translateY(-101%); } }
  @keyframes splashFailsafe { to { opacity: 0; visibility: hidden; } }
  @keyframes splashFadeOut { to { opacity: 0; visibility: hidden; } }

  /* 演出中は背後がスクロールしないようにする（JSでクラスを外す） */
  body.is-intro { overflow: hidden; }

  /* 幕は動きを抑える設定でも必ず出す（島の挨拶がこのサイトの掴みなので省かない）。
     減らすのは動きだけ ―― 文字の書き起こしとシルエットの浮き上がりをやめ、
     最初から出そろった状態にする。消えるときのフェードは動きではないので残す。
     読み込みメーターは進み具合を伝える表示で、動く幅も4pxと小さいため止めない */
  @media (prefers-reduced-motion: reduce) {
    .intro-splash p span { animation: none; opacity: 1; transform: none; }
    .intro-splash__loading { animation: none; opacity: 1; }
    .intro-splash__silhouette {
      animation: none;
      opacity: .22;
      transform: translateX(-50%);
    }
    /* 浮き上がりも引き上げも使わず、その場で薄くして消す */
    .intro-splash,
    .intro-splash.is-done {
      animation: splashFadeOut .5s linear .6s forwards;
    }

  }

  /* ============ 管理バー（ログイン中だけ出る） ============ */
  /* 管理画面にログインしている人にだけ、公開ページの最上部に出す操作バー。
     配色は管理画面のサイドバーと同じにして、サイトの色とは別物だと分かるようにしている。
     ページの流れの中に置いているので、下のコンテンツに重ならない */
  /* WordPressの管理バーと同じく、画面のいちばん上に固定して横幅いっぱいに出す */
  /* バーそのものの見た目（色・フォントなど）は css/adminbar.css に一本化してある
     （管理画面側と共有。src/admin-bar.php が読み込む）。ここはこのページ側の反応だけ */
  /* バーのぶんだけページ全体を下げる。追従するヘッダーの止まる位置もずらす。
     ログイン中（バーがあるとき）だけ効かせたいので :has で判定する */
  body:has(> .adminbar) { padding-top: var(--adminbar-h); }
  body:has(> .adminbar) header.site { top: var(--adminbar-h); }
  /* SPのドロワーメニューも同じ理由でずらす。.drawer は inset:0 なので top だけ上書きすれば
     bottom:0 は残ったまま高さが自動で縮む。.drawer__panel は高さを 100dvh 固定で持っている
     （＝画面の実際の高さ基準で、親の .drawer の高さに連動しないので、忘れずに高さも詰める） */
  body:has(> .adminbar) .drawer { top: var(--adminbar-h); }
  body:has(> .adminbar) .drawer__panel { height: calc(100dvh - var(--adminbar-h)); }

  /* お知らせのプレビュー画面（public/admin/news/preview.php）の上部バー。
     プレビューは公開ページと同じ見た目で確認するため、管理画面のCSSを読み込まない。
     そのため管理バーと同じく、このファイル（公開側）に置いている */
  .admin-preview-bar {
    position: sticky;
    top: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);
    padding: 10px var(--sp-4);
    background: #1e2530;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    /* 管理バーと同じ地色なので、境目が分かるよう上に細い線を入れる */
    border-top: 1px solid #3a4358;
  }
  .admin-preview-bar a {
    color: #cfd6e4;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .admin-preview-bar a:hover { color: #fff; }
  /* 管理バーが出ているときは、その下に貼り付く */
  body:has(> .adminbar) .admin-preview-bar { top: var(--adminbar-h); }

  /* ヘッダーが sticky で常に画面上部に居座るため、#id へのジャンプ・直リンクは
     そのままだと見出しがヘッダーの下に隠れる。id が付いた要素すべて（section に限らず
     h2・main・footer なども）にまとめてヘッダー分の余白を持たせておく。
     scroll-margin-top はその要素が実際にスクロール先になったときしか効かないので、
     関係ない要素に付いていても副作用は無い。個別に付け忘れて起きる事故を防ぐのが狙い */
  [id] { scroll-margin-top: 90px; }
  /* JSの scrollIntoView() で閉じたときに戻る先。id を持たないのでここだけ個別に指定する */
  .postgallery { scroll-margin-top: 90px; }

  /* ============ header ============ */
  header.site {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface);
    /* 差し色（ポロシャツのオレンジ）のラインをヘッダー最上部に一本 */
    border-top: 4px solid var(--accent);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .3s;
  }
  .site__in {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-5);
    padding: var(--sp-4) 0;
    transition: padding .28s cubic-bezier(.2,.7,.3,1);
  }
  .site__util {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: var(--sp-3);
    transition: gap .28s cubic-bezier(.2,.7,.3,1);
  }
  .site__sub { display: flex; align-items: center; gap: var(--sp-5); }
  .brand__logo { transition: width .28s cubic-bezier(.2,.7,.3,1); }

  /* SNS。文字サイズ切替の隣に並べる */
  .headsns { list-style: none; display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; }
  /* 丸い枠で囲って、アイコンではなくボタンだと分かるようにする。
     枠の色は各サービスの色（--sns）なので、形と色の両方で見分けがつく */
  .headsns a {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    color: var(--blue);
    transition: background-color .2s, color .2s, transform .2s;
  }
  .headsns a:hover,
  .headsns a:focus-visible { background: currentColor; transform: translateY(-1px); }
  .headsns a:hover svg,
  .headsns a:focus-visible svg { fill: #fff; }
  @media (prefers-reduced-motion: reduce) {
    .headsns a { transition: background-color .2s, color .2s; }
    .headsns a:hover, .headsns a:focus-visible { transform: none; }
  }
  .headsns svg { display: block; width: 17px; height: 17px; fill: currentColor; }

  /* SNSは各サービスの色で出す。形だけだと見分けがつきにくく、
     押せる場所だとも気づかれにくいため。
     --sns は白地用。各社のブランドカラーに寄せつつ、白地で 4.5:1 を
     確保できるところまで暗くしてある。
     --sns-on-sea は濃い海の上（フッター）用に明るくした側 */
  [data-sns]             { --sns: var(--blue);  --sns-on-sea: var(--sea-200); }
  [data-sns="instagram"] { --sns: #C13584; --sns-on-sea: #F49AC8; }
  [data-sns="youtube"]   { --sns: #C4302B; --sns-on-sea: #FF8F86; }
  [data-sns="facebook"]  { --sns: #1461BE; --sns-on-sea: #90C2FF; }
  [data-sns="ameba"]     { --sns: #2C8C3C; --sns-on-sea: #83DC93; }
  /* サイト公式では使っていないが、メンバー個人のリンク（.personsns）で出るもの */
  [data-sns="x"]         { --sns: #111111; --sns-on-sea: #FFFFFF; }
  [data-sns="tiktok"]    { --sns: #C8104A; --sns-on-sea: #FF8FB0; }
  [data-sns="line"]      { --sns: #05913E; --sns-on-sea: #7BE3A5; }

  /* 白地では文字ごと色を付ける */
  .headsns a[data-sns],
  .drawer__sns a[data-sns] { color: var(--sns); }
  /* 濃い海の上では、リンク文字は白のまま揃え、アイコンだけ色を付ける */
  .snslist a[data-sns] svg { fill: var(--sns-on-sea); opacity: 1; }

  /* 読み進めたら、補助情報を畳んでヘッダーを薄くする。
     ナビゲーションだけ残れば移動には足りる */
  .site__sub {
    overflow: hidden;
    max-height: 44px;
    opacity: 1;
    transition: max-height .28s cubic-bezier(.2,.7,.3,1), opacity .18s linear;
  }
  header.site.is-compact .site__sub { max-height: 0; opacity: 0; }
  header.site.is-compact .site__util { gap: 0; }
  header.site.is-compact .site__in { padding: var(--sp-2) 0; }
  header.site.is-compact .brand__logo { width: 138px; }
  header.site.is-compact { box-shadow: 0 2px 14px rgba(24,48,88,.10); }

  @media (prefers-reduced-motion: reduce) {
    .site__in, .site__util, .site__sub, .brand__logo { transition: none; }
  }

  /* 文字サイズ切替。html に .fs-large が付くと --fs-* が一段階大きくなる */
  .fontsize { display: flex; align-items: center; gap: var(--sp-3); }
  .fontsize__label { font-size: var(--fs-cap); color: var(--ink-soft); white-space: nowrap; }
  .fontsize__btns { display: flex; }
  .fontsize__btn {
    font-family: inherit;
    font-size: var(--fs-cap);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 6px 16px;
    border: 1px solid var(--blue);
    background: var(--surface);
    color: var(--blue);
    cursor: pointer;
    transition: background .2s, color .2s;
  }
  .fontsize__btn + .fontsize__btn { border-left: none; }
  .fontsize__btn:hover { background: var(--sky-soft); }
  .fontsize__btn[aria-pressed="true"] { background: var(--blue); color: #fff; }
  /* SPではヘッダーに「ロゴ」と「メニュー」だけを残す。
     SNSと文字サイズはサイドメニューの中に入れてあるので、ここでは出さない */
  @media (max-width: 860px) {
    .fontsize { display: none; }
    .site__sub { display: none; }
    .site__in { gap: var(--sp-3); padding: var(--sp-3) 0; }
    .brand { gap: var(--sp-2); }
  }
  /* ロゴとメニューボタンのSP用サイズは、ベースの指定（.brand__mark / .menubtn）が
     このあとに来るため、ここに書くと打ち消される。ベースの直後にまとめてある */
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
  .brand__mark { color: var(--blue); }
  .brand__ja { font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.02em; }
  .brand__en {
    font-family: "Oswald", sans-serif;
    font-size: var(--fs-cap);
    letter-spacing: 0.26em;
    color: var(--ink-faint);
    font-weight: 500;
    margin-top: 2px;
  }
  nav.gnav ul { list-style: none; display: flex; gap: var(--sp-7); margin: 0; padding: 0; }
  nav.gnav a {
    position: relative;
    color: var(--ink);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    padding-bottom: 3px;
  }
  nav.gnav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 6px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4c2-3.4 4-3.4 6 0s4 3.4 6 0 4-3.4 6 0 4 3.4 6 0' fill='none' stroke='%2312719F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: left center;
    background-size: 20px 6px;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .32s cubic-bezier(.2,.7,.3,1);
  }
  nav.gnav a:hover::after { transform: scaleX(1); transform-origin: left; }
  /* 現在いるページは、下線を出したままにする */
  nav.gnav a[aria-current="page"] { color: var(--blue); font-weight: 700; }
  nav.gnav a[aria-current="page"]::after { transform: scaleX(1); }
  @media (max-width: 860px) { nav.gnav { display: none; } }

  /* ============ サイトロゴ（手描きの丸） ============ */
  /* ヘッダーの中に納める。大きさは、以前の「下へはみ出す」置き方が
     ヘッダーの高さに寄与していたぶん（はみ出しを差し引いた高さ）に合わせてあり、
     ヘッダー自体の高さ（--chrome-h の計測値）は変わらない */
  .brand__mark {
    flex: none;
    width: 86px;
    height: 86px;
    filter: drop-shadow(0 3px 10px rgba(24,48,88,.20));
    transition: width .28s cubic-bezier(.2,.7,.3,1), height .28s cubic-bezier(.2,.7,.3,1);
  }
  /* 読み進めてヘッダーが薄くなったら、ロゴも合わせて小さくする */
  header.site.is-compact .brand__mark { width: 66px; height: 66px; }
  @media (prefers-reduced-motion: reduce) { .brand__mark { transition: none; } }

  /* SPはヘッダーが場所を取りすぎないよう、ロゴを小さくする。
     ベースの .brand__mark より後ろに置くこと（前に置くと打ち消される） */
  /* 題字（海謝美 UNJAMI Yoron）は、丸ロゴが作るヘッダーの高さに対して
     まだ縦に余っているので、その余りぶんまで大きくする。
     画面が狭いときは、丸ロゴとメニューボタンに押されて縮められるよう
     max-width を効かせておく（丸ロゴは flex:none なので縮まない） */
  .brand { min-width: 0; }
  .brand__logo { max-width: 100%; height: auto; }
  @media (max-width: 860px) {
    .brand__mark { width: 58px; height: 58px; }
    .brand__logo { width: 148px; }
    header.site.is-compact .brand__mark { width: 48px; height: 48px; }
    header.site.is-compact .brand__logo { width: 120px; }
  }
  @media (max-width: 480px) {
    .brand__mark { width: 50px; height: 50px; }
    .brand__logo { width: 138px; }
    header.site.is-compact .brand__mark { width: 44px; height: 44px; }
    header.site.is-compact .brand__logo { width: 112px; }
  }

  /* ============ SPのメニューボタン ============ */
  .menubtn {
    display: none;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 56px;
    height: 56px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--blue);
    cursor: pointer;
    transition: background .2s, color .2s;
    /* ネイティブbuttonはタップ時にUA既定の青いハイライトが出るため消す。
       フォーカス表示は下の :focus-visible に任せる */
    -webkit-tap-highlight-color: transparent;
  }
  .menubtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .menubtn__bars { position: relative; width: 24px; height: 15px; }
  .menubtn__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform .3s cubic-bezier(.2,.7,.3,1), opacity .2s linear;
  }
  .menubtn__bars span:nth-child(1) { top: 0; }
  .menubtn__bars span:nth-child(2) { top: 6.5px; }
  .menubtn__bars span:nth-child(3) { top: 13px; }
  .menubtn.is-open .menubtn__bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menubtn.is-open .menubtn__bars span:nth-child(2) { opacity: 0; }
  .menubtn.is-open .menubtn__bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .menubtn__label {
    font-family: "Oswald", sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    line-height: 1;
  }
  @media (max-width: 860px) { .menubtn { display: flex; } }
  @media (max-width: 480px) { .menubtn { width: 48px; height: 48px; } }
  @media (prefers-reduced-motion: reduce) { .menubtn__bars span { transition: none; } }

  /* ============ SPのサイドメニュー（ドロワー） ============ */
  .drawer { position: fixed; inset: 0; z-index: 90; }
  .drawer[hidden] { display: none; }
  .drawer__mask {
    position: absolute;
    inset: 0;
    background: rgba(24,48,88,.55);
    opacity: 0;
    transition: opacity .35s cubic-bezier(.2,.7,.3,1);
  }
  .drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(340px, 84vw);
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    padding: 0 0 var(--sp-8);
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.2,.7,.3,1);
    box-shadow: -10px 0 40px rgba(24,48,88,.18);
  }
  .drawer.is-open .drawer__mask { opacity: 1; }
  .drawer.is-open .drawer__panel { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .drawer__mask, .drawer__panel { transition: none; }
  }

  /* 開いている間は背面を動かさない。位置は drawer.js が覚えて戻す */
  body.is-drawer-open { position: fixed; width: 100%; overflow: hidden; }

  .drawer__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    background: var(--sky-soft);
    border-bottom: 1px solid var(--line);
  }
  .drawer__mark { flex: none; width: 52px; height: 52px; }
  .drawer__ttl {
    font-family: "Oswald", sans-serif;
    font-size: var(--fs-md);
    letter-spacing: 0.16em;
    color: var(--blue-deep);
    line-height: 1.2;
  }
  .drawer__ttl small {
    display: block;
    font-family: inherit;
    font-size: var(--fs-cap);
    letter-spacing: 0.04em;
    color: var(--ink-faint);
  }
  .drawer__close {
    margin-left: auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--blue);
    cursor: pointer;
    /* ネイティブbuttonはタップ時にUA既定の青いハイライトが出るため消す。
       フォーカス表示は下の :focus-visible に任せる */
    -webkit-tap-highlight-color: transparent;
  }
  .drawer__close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  /* ×印。2本の線を回して作る（フォントに依存させない） */
  .drawer__close span { position: relative; display: block; width: 18px; height: 18px; }
  .drawer__close span::before,
  .drawer__close span::after {
    content: "";
    position: absolute;
    top: 50%; left: 0;
    width: 100%; height: 2px;
    background: currentColor;
  }
  .drawer__close span::before { transform: rotate(45deg); }
  .drawer__close span::after { transform: rotate(-45deg); }

  .drawer__list { list-style: none; margin: 0; padding: 0; }
  .drawer__list a {
    position: relative;
    display: block;
    padding: var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.5;
  }
  /* 右端の矢印 */
  .drawer__list a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--sp-5);
    width: 8px; height: 8px;
    margin-top: -4px;
    border-top: 2px solid var(--blue);
    border-right: 2px solid var(--blue);
    transform: rotate(45deg);
  }
  .drawer__list a[aria-current="page"] {
    background: var(--sky-soft);
    color: var(--blue-deep);
    box-shadow: inset 3px 0 0 var(--blue);
  }
  .drawer__list--sub a { font-weight: 400; font-size: var(--fs-cap); padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .drawer__sub {
    margin: var(--sp-6) 0 0;
    padding: 0 var(--sp-5) var(--sp-2);
    font-size: var(--fs-cap);
    font-weight: 700;
    color: var(--ink-faint);
    letter-spacing: 0.08em;
  }

  .drawer__cta {
    display: block;
    margin: var(--sp-6) var(--sp-5) 0;
    padding: var(--sp-4);
    background: var(--blue);
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  .drawer__cta__lead { display: block; font-size: var(--fs-cap); color: var(--on-blue-2); }
  .drawer__cta__main { display: block; font-size: var(--fs-sm); font-weight: 700; margin-top: 2px; }

  /* 通知設定への誘導。青いCTAの下に控えめな白枠で置き、色の主張はぶつけない */
  .drawer__push {
    display: block;
    margin: var(--sp-3) var(--sp-5) 0;
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-left: 4px solid var(--blue);
    background: #fff;
    text-align: center;
    text-decoration: none;
    color: inherit;
  }
  .drawer__push__lead { display: block; font-size: var(--fs-cap); color: var(--ink-soft); }
  .drawer__push__main { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--blue-deep); margin-top: 2px; }

  .drawer__fontsize {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: var(--sp-6) var(--sp-5) 0;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
  }
  /* ヘッダーでは 860px 以下で隠しているが、ドロワーの中では常に出す */
  .drawer__fontsize .fontsize__btns { display: flex; }

  .drawer__sns {
    list-style: none;
    margin: var(--sp-5) var(--sp-5) 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
  }
  .drawer__sns a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--sp-2) 0;
    color: var(--blue);
    text-decoration: none;
    font-size: var(--fs-cap);
  }
  .drawer__sns svg { flex: none; fill: currentColor; }

  /* ============ buttons ============ */
  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 15px 28px;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
  }
  /* display指定がブラウザ標準の [hidden] を打ち消してしまうので、明示的に消す
     （js/push.js がボタンを hidden にしてリンクへ差し替えるときに効く） */
  .btn[hidden] { display: none; }
  .btn span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--sp-3); }
  .btn::before {
    content: "";
    position: absolute; inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.2,.7,.3,1);
    z-index: 0;
  }
  .btn:hover::before { transform: scaleX(1); }
  .btn__arrow { font-family: "Oswald", sans-serif; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
  .btn:hover .btn__arrow { transform: translateX(5px); }

  .btn--blue { color: #fff; background: var(--blue); }
  .btn--blue::before { background: var(--blue-deep); }

  .btn--outline-w { color: #fff; border: 1px solid rgba(255,255,255,.5); }
  .btn--outline-w::before { background: #fff; }
  .btn--outline-w:hover { color: var(--blue-deep); }

  .btn--white { color: var(--blue-deep); background: #fff; }
  .btn--white::before { background: var(--blue); }
  .btn--white:hover { color: #fff; }

  .btn--outline-ink { color: var(--blue); border: 1px solid var(--blue); background: var(--surface); }
  .btn--outline-ink::before { background: var(--blue); }
  .btn--outline-ink:hover { color: #fff; border-color: var(--blue); }

  /* 深い海の帯の上では、--blue が淡い水色に差し替わるため
     そのままだと「淡い青地に白文字」になって読めない。白い面で置き直す */
  .band--sea .btn--blue { color: var(--sea-900); background: #fff; }
  .band--sea .btn--blue::before { background: var(--sea-200); }
  .band--sea .btn--blue:hover { color: var(--sea-900); }

  .band--sea .btn--outline-ink { color: #fff; background: transparent; border-color: rgba(255,255,255,.6); }
  .band--sea .btn--outline-ink::before { background: #fff; }
  .band--sea .btn--outline-ink:hover { color: var(--sea-900); border-color: #fff; }

  /* セクション本文の末尾に置く導線ボタン。本文との間に余白を確保する */
  .sec__cta { margin-top: var(--sp-6); }

  /* 一覧へ進むボタン。見出しの右ではなく、内容を見終えた下に中央寄せで置く */
  .sec__foot { margin-top: var(--sp-7); display: flex; justify-content: center; }

  /* ============ hero ============ */
  /* ファーストビューいっぱいの全幅スライドショー。
     写真の上に文字を重ねると暗いスクリムが要るので、文字は写真の下に置き、
     写真は一切かぶせずそのまま大きく見せる */
  .hero {
    position: relative;
    background: var(--band-sand);
    background-image:
      radial-gradient(var(--band-sand-dot) 1.1px, transparent 1.2px),
      radial-gradient(var(--band-sand-dot) 1.1px, transparent 1.2px);
    background-size: 24px 24px, 24px 24px;
    background-position: 0 0, 12px 12px;
  }
  .hero__scene { display: none; }

  /* 写真エリア。ファーストビューの高さいっぱいを占める */
  .hero__media {
    position: relative;
    height: calc(100svh - var(--chrome-h));
    min-height: 420px;
    overflow: hidden;
    background: var(--sky-soft);
  }

  /* 実写真のスライドショー。7秒ずつクロスフェードし、
     ゆっくり寄っていく動き（Ken Burns）で写真を主役にする。
     枚数は管理画面で変わるので、切り替えは js/hero.js が
     is-active を付け替えて行う（CSSは今の1枚を出すだけ） */
  /* 1枚あたりの表示時間（--hero-span）は index.php から渡る（HeroSlides::SECONDS）。
     重ね合わせの長さ（--hero-fade）と合わせて、ここでまとめて使う */
  .hero { --hero-fade: 3s; }
  .hero__slides { position: absolute; inset: 0; }
  .hero__slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    /* 拡大とフェードはGPUの合成だけで動かす。これが無いと、切り替えのたびに
       全画面サイズの描き直しが走り、スクロール中と重なると画面がかくつく */
    will-change: transform, opacity;
    transform: scale(1.07);
    /* 出番を終えた1枚は、拡大の位置を「消えきってから」戻す（0秒＋フェードのぶんの待ち）。
       すぐ戻すと、まだ薄く見えているうちに拡大され、切り替わりの瞬間に画が跳ねる */
    transition: opacity var(--hero-fade) ease, transform 0s linear var(--hero-fade);
  }
  .hero__slide.is-active {
    opacity: 1;
    transform: scale(1);
    /* 拡大は表示時間いっぱいかけて戻す（ゆっくり寄っていく見え方） */
    transition: opacity var(--hero-fade) ease, transform var(--hero-span, 7s) linear;
  }

  /* 現在の枚数を示すインジケーター。スライドショーだと一目で分かるようにする */
  .hero__dots {
    position: absolute;
    left: 0; right: 0; bottom: var(--sp-6);
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  .hero__dot {
    width: 40px; height: 4px;
    background: rgba(255,255,255,.45);
    overflow: hidden;
    position: relative;
  }
  /* 今の1枚のところだけ、表示時間をかけて左から満ちる */
  .hero__dot::after {
    content: "";
    position: absolute; inset: 0;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
  }
  .hero__dot.is-active::after {
    transform: scaleX(1);
    transition: transform var(--hero-span, 7s) linear;
  }

  @media (prefers-reduced-motion: reduce) {
    /* 切り替えそのものを行わない（js/hero.js が何もしない）。
       1枚目を出したまま、寄っていく動きも止める */
    .hero__slide { transform: none; transition: none; }
    .hero__slide.is-active { transform: none; transition: none; }
    .hero__dot.is-active::after { transition: none; }
  }

  /* ============ 本日と次回の活動 ============ */
  /* 写真の右下に重ね、ファーストビューのうちに「今日はやっているのか」「次はいつか」を伝える。
     読むのは2行ぶんの事実（どこへ・何時に）だけなので、箱そのものは小さく収める。
     本日ぶんを上に、次回ぶんを下に淡く置いて、視線の順番を決める。
     ページの他の節のように幅いっぱいへ広げると、短い文の左右が大きく空いて間が抜ける */
  .tnbox {
    position: absolute;
    right: max((100vw - min(1180px, 92vw)) / 2, 4vw);
    bottom: var(--sp-6);
    z-index: 3;
    width: min(24rem, 42vw);
    /* 透かさず不透明に。写真の上でも文字がくっきり読め、箱として立つ */
    background: #fff;
    border-top: 3px solid var(--blue);
    box-shadow: 0 10px 34px rgba(24,48,88,.32);
  }
  /* 節の見出し。ページの大見出し（.sec）ほど強くしない ── ここは案内であって主張ではない */
  .tnbox__ttl {
    margin: 0;
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
  }

  /* 予定がある行は <a> でこの日の詳細ページへ丸ごとリンクになる。予定が無い行は <div> のまま。
     リンクだと分かるよう、右端に「›」を常時出す（ホバーで色が変わるだけでは、
     行全体が押せることに気づきにくいため） */
  .tnrow { display: block; padding: var(--sp-4) var(--sp-5); color: inherit; text-decoration: none; }
  a.tnrow { position: relative; padding-right: calc(var(--sp-5) + 1em); }
  a.tnrow::after {
    content: "\203a";
    position: absolute;
    right: var(--sp-4);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    line-height: 1;
    color: var(--ink-faint);
  }
  a.tnrow:hover { background: var(--sea-100); }
  a.tnrow:hover::after { color: var(--blue); }
  .tnrow--next { border-top: 1px solid var(--line); background: var(--sea-50); }
  /* 次回はこの箱でいちばん知りたい情報なので、地名を一回り大きく・濃く出す */
  .tnrow--next .tnrow__tag { background: var(--blue-deep); }
  .tnrow--next .tnrow__place { font-size: var(--fs-lg); color: var(--blue-deep); }

  .tnrow__when {
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-cap);
    color: var(--ink-soft);
  }
  .tnrow__when .num { font-size: var(--fs-sm); font-weight: 700; color: var(--sea-900); }
  .tnrow__tag {
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: #fff;
    background: var(--ink-soft);
  }
  .tnrow--now .tnrow__tag { background: var(--blue); }

  .tnrow__place { margin: 0; font-size: var(--fs-md); font-weight: 700; line-height: 1.4; color: var(--ink); }
  .tnrow__meta { margin: 2px 0 0; font-size: var(--fs-cap); color: var(--ink-soft); }
  .tnrow__meta .num { font-size: var(--fs-sm); font-weight: 700; color: var(--blue); }
  .tnrow__wx { margin-left: var(--sp-3); }
  .tnrow__wx.is-wet { color: var(--alert); font-weight: 700; }
  .tnrow__none { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft); }

  /* 中止の日。印だけでは見落として来てしまう人が出るので、地名より先に言い切る */
  .tnrow__off {
    margin: 0 0 2px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--alert);
  }
  .tnrow__off-mark {
    padding: 2px 8px;
    background: var(--alert);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .tnrow__why { font-weight: 400; font-size: var(--fs-cap); }
  .tnrow--off .tnrow__place { color: var(--ink-faint); font-size: var(--fs-sm); }

  .tnbox__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--line);
    font-size: var(--fs-cap);
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
  }
  .tnbox__link:hover { background: var(--sea-50); }
  .tnbox__link:hover .btn__arrow { transform: translateX(4px); }

  @media (max-width: 900px) {
    /* 狭い画面では写真に重ねず、写真の下に置く。
       重ねると、いちばん見せたい写真の下半分が隠れてしまうため */
    .tnbox {
      position: static;
      width: auto;
      margin: var(--sp-5) 4vw 0;
      background: var(--surface);
      border: 1px solid var(--line-strong);
      border-top: 3px solid var(--blue);
    }
    /* 写真に重ねない分、見出しは大きくしても窮屈にならない */
    .tnbox__ttl { font-size: var(--fs-md); padding: var(--sp-4) var(--sp-5); }
  }

  .hero__scrim { display: none; }
  .hero__waves { display: none; }
  .hero__top { display: none; }
  .hero__bottom { display: none; }

  /* 写真の上に載せるコピー。写真全体は明るいまま保ちたいので、
     暗幕は文字が乗る左下だけに限定してかける */
  .hero__over {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    /* 下の詰めは、写真の説明（.hero__captionbox）1行ぶんを空けておく。
       説明はコピーの流れから外して重ねてあるので、そのぶんを padding で確保する */
    padding: var(--sp-9) 0 calc(var(--sp-8) + var(--sp-4) + var(--fs-cap) * 2.05);
    /* 暗幕は敷かない。写真は明るいまま見せて、文字は影（text-shadow）で立たせる */
    pointer-events: none;
  }

  .hero__eyebrow {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    margin: 0 0 var(--sp-4);
    color: #fff;
    font-size: var(--fs-cap);
    letter-spacing: 0.22em;
    font-weight: 700;
    text-shadow: 0 1px 10px rgba(0,0,0,.7);
  }

  .hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.9rem, 4.4vw, 3.1rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-wrap: pretty;
    /* 暗幕を敷いていないぶん、輪郭の影とにじみの影を重ねて明るい写真でも読めるようにする */
    text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 22px rgba(0,0,0,.7);
  }
  .hero__lead {
    margin: var(--sp-5) 0 0;
    color: #fff;
    font-size: var(--fs-md);
    line-height: 2;
    /* ch は基準にする「0」の字幅がフォント次第で変わり、iPhone実機だとPCでの見た目より
       せまく計算されて右端まで届かず改行されることがあったため rem（固定値）にする */
    max-width: 23rem;
    text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 1px 14px rgba(0,0,0,.75);
  }

  /* いま出ている写真の説明。写真が替わると差し替わる（js/hero.js）。
     写真の上に重ねて置く。広い画面ではコピーの続きに見えるよう左下、
     狭い画面ではコピーが上へ寄るので写真の右下に出す */
  .hero__captionbox {
    position: absolute;
    left: 0; right: 0; bottom: var(--sp-8);
    z-index: 3;
    pointer-events: none;
  }

  /* コピーの一部ではなく「写真の添え書き」だと分かるよう、
     一段小さく・薄くして、カメラの印を添える */
  .hero__caption {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: var(--fs-cap);
    line-height: 1.7;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 10px rgba(0,0,0,.8);
    /* 写真の切り替わりに合わせて、いったん薄くしてから差し替える */
    opacity: 1;
    transition: opacity .35s ease;
  }
  .hero__caption[hidden] { display: none; }
  .hero__caption.is-changing { opacity: 0; }
  .hero__caption svg { flex: none; fill: currentColor; opacity: .8; }
  @media (prefers-reduced-motion: reduce) {
    .hero__caption { transition: none; }
  }

  /* 左から書き起こすように文字を出す。
     clip-path で右側を伏せた状態から左→右へ開いていく */
  .hero__reveal {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
    /* 開き始める瞬間にGPUレイヤーを作り直させない（先に作っておく）。
       これが無いと、後ろでスライドショーが動いているところに
       レイヤーの再描画が重なり、開始の瞬間に画面全体がかくつく */
    will-change: clip-path;
    animation: heroReveal 1.1s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .hero h1 .hero__reveal { animation-delay: .25s; }
  .hero__lead .hero__reveal { animation-delay: 1.0s; }
  @keyframes heroReveal {
    to { clip-path: inset(0 0 0 0); }
  }
  /* アニメーション前に文字が消えて見えないよう、開始位置を伏せておく */
  .hero__eyebrow { animation: heroFade .8s ease forwards; opacity: 0; }
  @keyframes heroFade { to { opacity: 1; } }

  @media (prefers-reduced-motion: reduce) {
    .hero__reveal { animation: none; clip-path: none; }
    .hero__eyebrow { animation: none; opacity: 1; }
  }

  @media (max-width: 860px) {
    .hero { padding-bottom: var(--sp-7); }
    .hero__media { height: clamp(460px, 72svh, 620px); }
    .hero__dots { bottom: var(--sp-4); }
    .hero__dot { width: 28px; }
    /* 狭い画面ではコピーを上、予定カードを下に重ねる */
    /* 暗幕はここでも敷かない（写真を明るいまま見せる）。文字は影で立たせる */
    .hero__over { bottom: auto; top: 0; padding: var(--sp-7) 0 var(--sp-8); }
    .hero__lead { font-size: var(--fs-base); max-width: none; }
    /* コピーが上に寄るぶん、写真の説明は右下へ回す。
       インジケーター（.hero__dots）の上に重ならない高さに置く */
    .hero__captionbox { bottom: var(--sp-6); }
    .hero__captionbox__in { display: flex; justify-content: flex-end; }
    /* 暗幕の外に出るので、写真が明るくても読めるよう地色を敷く */
    .hero__caption {
      padding: 3px 10px;
      background: rgba(14,30,62,.55);
      text-shadow: none;
      color: rgba(255,255,255,.94);
      max-width: 100%;
    }
    /* 説明が長いときは、右下から左へ折り返す */
    .hero__caption span { text-align: right; }

    /* Ken Burns（じわっと寄っていく拡大）は、SPでスクロールすると
       Safari系ブラウザが拡大の途中コマを乱れて描画してしまい、
       写真がガクッと拡大されて見える不具合があるため、SPでは拡大させず
       クロスフェードだけにする */
    .hero__slide,
    .hero__slide.is-active {
      transform: none;
      transition: opacity var(--hero-fade) ease;
    }
  }

  @media (max-width: 560px) {
    /* 「海に感謝して、美 / しく。」のように語の途中で折り返さない大きさまで落とす */
    .hero h1 { font-size: clamp(1.5rem, 6.6vw, 2rem); }
    /* ヒーローの地色（砂）は次の「海謝美について」の帯と同じ色なので、
       ここを空けても区切りには見えず、ただの空白に見えてしまう。
       予定カードの下は最小限に留め、区切りは次のセクション側の余白に任せる */
    .hero { padding-bottom: var(--sp-5); }
    /* 暗幕は敷かない（写真を明るいまま見せる）。文字は影で立たせる */
    /* 狭い画面では写真の上端にコピーが乗るので、左寄せだと右側が大きく空いて
       文字だけが片側に寄って見える。英字の前置き・見出し・リード文・写真の
       添え書きをまとめて中央にそろえる。
       前置きと添え書きは inline-flex（＝行の中に置かれる箱）なので、
       親の text-align だけで中央に来る */
    .hero__over .wrap { text-align: center; }
    /* 中央寄せのときは、行の途中ではなく意味の切れ目で折り返す */
    .hero__lead { text-wrap: pretty; }
    /* 英字の字間（letter-spacing）は最後の1文字の後ろにも付くため、
       そのまま中央に置くと字間1つぶん左へずれて見える。左に同じ幅を足して戻す */
    .hero__eyebrow { padding-left: 0.22em; }
  }

  /* ============ section shell ============ */
  section { position: relative; }
  .pad { padding: var(--sp-9) 0; }
  .pad-sm { padding: var(--sp-8) 0; }


  .sec__ruby { font-size: .62em; font-weight: 700; }
  /* 見出しの色は本文と同じ濃い墨（h1 と同色）にそろえる。差し色（オレンジ）は
     リンクとボタンに残し、見出しでは使わない。
     濃い海の帯（.band--sea）の中では --ink が白に差し替わるので、そのまま白抜きになる */
  h1.sec, h2.sec, h3.sec { color: var(--ink); font-size: clamp(1.35rem, 3vw, var(--fs-2xl)); font-weight: 700; line-height: 1.45; letter-spacing: 0.01em; margin: 0; word-break: auto-phrase; text-wrap: pretty; }
  /* 見出しに添えるひとこと。見出しより一段落として、本文とは別のものだと分かるようにする */
  .sec__sub {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.6;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
  }
  .sec__sub + .about__body,
  .sec__sub + .intro__lead { margin-top: var(--sp-5); }

  /* ============ intro（はじめて訪れた人向けの要点） ============ */
  /* 「何の団体か」「どうすれば参加できるか」を、ページを読み進めなくても
     ファーストビュー直下で把握できるようにする */
  .intro { background: var(--surface); border-bottom: 1px solid var(--line); }
  .intro__lead {
    margin: 0;
    /* 見出しに続く案内文。見出しと同じくらい大きいと2つとも主役になって読みどころが定まらないので、
       本文より一段だけ大きい段に置く */
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: 1.9;
    color: var(--ink);
    letter-spacing: 0.01em;
  }
  .intro__lead strong { color: var(--blue); font-weight: 700; }

  /* 参加の条件。横に並べると1項目ずつが窮屈になるので、
     見出しと内容を左右にそろえた縦のリストにする */
  /* 参加の条件。もとは右に掲示板を並べていたので760pxで止めていたが、
     掲示板をやめたぶん幅いっぱいまで使う。ただし1行を横いっぱいに伸ばすと
     「無料」のような短い答えの右が大きく空くので、2列に折り返して詰める */
  .facts {
    margin: var(--sp-6) 0 0;
    background: var(--surface);
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .facts__row {
    display: grid;
    grid-template-columns: 8em 1fr;
    align-items: baseline;
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    margin: 0;
  }
  /* 右端の列と最終行には、外枠と重なる罫を引かない */
  .facts__row:nth-child(2n) { border-right: none; }
  .facts__row:nth-last-child(-n+2) { border-bottom: none; }
  .facts__row dt {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--blue);
    letter-spacing: 0.08em;
  }
  .facts__row dd {
    margin: 0;
    font-size: var(--fs-md);
    color: var(--ink);
    line-height: 1.7;
  }
  .facts__row dd .num { font-size: var(--fs-lg); color: var(--blue); margin: 0 2px; }
  /* （集合時刻は季節によって変わります）のような補足。改行して小さめに添える */
  .facts__note { display: block; font-size: var(--fs-cap); color: var(--ink-soft); margin-top: 2px; }
  /* 狭い画面では2列に分けても読みにくいだけなので、1列に戻す */
  @media (max-width: 900px) {
    .facts { grid-template-columns: minmax(0, 1fr); }
    .facts__row { border-right: none; }
    .facts__row:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
    .facts__row:last-child { border-bottom: none; }
  }
  @media (max-width: 560px) {
    .facts__row { grid-template-columns: 1fr; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); }
    .facts__row dd { font-size: var(--fs-base); }
  }

  /* 節の締めのボタン。表が幅いっぱいになったぶん、左端に寄せると据わりが悪いので中央に置く */
  .intro__cta { margin-top: var(--sp-6); text-align: center; }

  .link-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--fs-sm); font-weight: 700; color: var(--blue);
    text-decoration: none;
  }
  .link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
  .link-arrow:hover .btn__arrow { transform: translateX(4px); }

  /* ============ recent shores band ============ */
  /* yorontou.info と同じく、全面を青で塗らずに白地＋青文字で構成し、
     区切りだけをごく淡い青灰で示す */
  /* 白地。カードの輪郭は罫（--line-strong）と日付レール（--sea-100）で出す */
  .next { background: var(--surface); }

  .next__layout {
    margin-top: var(--sp-7);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--sp-7);
    align-items: start;
  }

  /* 掲示板。実際の「拾い箱」に付いている黒板がモチーフ。
     木枠（砂色）＋濃紺の黒板面＋チョーク色の文字で構成する */
  /* 白地の上（活動の記録ページ）にも、深い海の帯の上（トップ）にも置くので、
     背景は透過させずに濃紺で塗り切る */
  .board {
    /* 面は濃紺のまま。帯（.band--sea）も濃紺なので、白い1pxの枠だけでは
       輪郭が出ず掲示板ごと背景に沈む。砂色の木枠で面を切り離す */
    background: linear-gradient(165deg, var(--sea-700) 0%, var(--sea-900) 100%);
    border: 7px solid var(--sand-200);
    box-shadow:
      inset 0 0 0 1px rgba(8,18,38,.45),
      0 22px 46px -24px rgba(6,16,36,.72);
    padding: var(--sp-6);
  }
  .board__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
    border-bottom: 1px dashed rgba(255,255,255,.32);
  }
  .board__pin { width: 12px; height: 12px; border-radius: 50%; background: var(--blue-bright); flex: none; }
  .board__title { font-size: var(--fs-md); font-weight: 700; color: #fff; letter-spacing: 0.06em; }
  .board__time { margin-left: auto; font-size: var(--fs-lg); color: var(--blue-bright); }

  /* 列の見出し。行（.board__row）と同じ組みにして、地名の列の真上に来るようにする */
  .board__cols {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-5);
    margin: 0;
    padding-top: var(--sp-4);
    font-size: var(--fs-cap);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,.62);
  }
  .board__cols span:first-child { min-width: 84px; }

  .board__list { margin: 0; }
  .board__row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: var(--sp-5);
    padding: var(--sp-5) 0;
    border-bottom: 1px dashed rgba(255,255,255,.22);
    margin: 0;
  }
  .board__row:last-of-type { border-bottom: none; }
  .board__row dt { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 84px; }
  .board__date { font-size: var(--fs-lg); color: #fff; line-height: 1.1; }
  .board__rel { font-size: var(--fs-cap); color: rgba(255,255,255,.62); letter-spacing: 0.04em; }
  /* 見出しと違う集合時刻の日にだけ出る（季節の変わり目）。見落とされると
     30分早く／遅く来ることになるので、日付の下で明るい色にして目立たせる */
  .board__rowtime { font-size: var(--fs-cap); color: var(--blue-bright); letter-spacing: 0.04em; }
  .board__row dd { margin: 0; font-size: var(--fs-xl); font-weight: 700; color: #fff; line-height: 1.3; }
  .board__yn { font-size: var(--fs-sm); font-weight: 400; color: rgba(255,255,255,.62); margin-left: 6px; }

  /* 天気予報。雨天中止の判断に直結するので、雨・雷の日は色を変えて目立たせる */
  .board__wx {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-cap);
    font-weight: 400;
    color: rgba(255,255,255,.72);
    letter-spacing: 0.02em;
  }
  .board__wx.is-wet { color: var(--alert-on-dark); }
  /* 読み込み中。最初から同じ高さを占めておき、後から差し替わっても
     レイアウトがずれない（ガクッとしない）ようにする */
  .board__wx.is-loading,
  .tnrow__wx.is-loading,
  .schedblock__wx.is-loading {
    color: transparent;
    position: relative;
  }
  .board__wx.is-loading::after,
  .tnrow__wx.is-loading::after,
  .schedblock__wx.is-loading::after {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 12em;
    height: .85em;
    border-radius: 2px;
    background: linear-gradient(90deg,
      rgba(255,255,255,.12) 0%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.12) 100%);
    background-size: 200% 100%;
    animation: wxShimmer 1.4s ease-in-out infinite;
  }
  /* 白地の上に置くぶんは、帯の色を反転させる（濃い地の上と同じ色では見えない） */
  .tnrow__wx.is-loading::after,
  .schedblock__wx.is-loading::after {
    background: linear-gradient(90deg,
      rgba(24,48,88,.10) 0%, rgba(24,48,88,.22) 50%, rgba(24,48,88,.10) 100%);
    background-size: 200% 100%;
  }
  @keyframes wxShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .board__wx.is-loading::after,
    .tnrow__wx.is-loading::after,
    .schedblock__wx.is-loading::after { animation: none; }
  }

  /* 直近の1件だけチョークで囲ったように強調する */
  .board__row--next dd { color: var(--blue-bright); }
  .board__row--next .board__rel { color: var(--blue-bright); }

  .board__note {
    margin: var(--sp-5) 0 0;
    font-size: var(--fs-cap);
    color: rgba(255,255,255,.62);
    letter-spacing: 0.04em;
  }

  /* 予定がまだ入っていないとき */
  .board__empty {
    margin: var(--sp-6) 0 0;
    color: rgba(255,255,255,.80);
    font-size: var(--fs-sm);
    line-height: 1.9;
  }
  .board__empty a { color: var(--blue-bright); }

  /* 中止の日。行ごと落ち着かせたうえで、地名の横に印を出す
     （雨天中止の連絡は「見落とさない」ことのほうが大事なので、印は目立つ色にする） */
  .board__row--canceled dd,
  .board__row--canceled.board__row--next dd { color: rgba(255,255,255,.58); }
  /* 取り消し線は地名の <s> に引く（囲みに引くと「中止」の文字まで消えるため） */
  .board__row--canceled .board__place s { text-decoration-thickness: 1px; }
  .board__badge {
    display: inline-block;
    margin-left: var(--sp-3);
    padding: 2px 8px;
    border: 1px solid var(--alert-on-dark);
    color: var(--alert-on-dark);
    font-size: var(--fs-cap);
    font-weight: 400;
    letter-spacing: 0.04em;
    vertical-align: middle;
    text-decoration: none;
  }
  .board__rownote {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-cap);
    font-weight: 400;
    color: rgba(255,255,255,.72);
  }

  /* その集合場所から回る海岸。掲示板は狭いので呼び名だけを並べる */
  .board__beaches {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-cap);
    font-weight: 400;
    color: rgba(255,255,255,.72);
  }

  /* 集合場所の設備（駐車場・トイレ）と地図への導線。
     内容は巡回集合場所（管理画面）で設定する。「未確認」のものは出さない */
  .board__facil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin-top: 8px;
    font-weight: 400;
  }
  .board__tag {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid rgba(255,255,255,.38);
    font-size: var(--fs-cap);
    color: rgba(255,255,255,.88);
    letter-spacing: 0.02em;
  }
  /* 「なし」は探しに行かせないよう、あえて目立たせずに伝える */
  .board__tag--no { border-style: dashed; color: rgba(255,255,255,.62); }
  .board__maplink {
    font-size: var(--fs-cap);
    color: var(--blue-bright);
    text-decoration: underline;
    white-space: nowrap;
  }
  .board__maplink__ico { margin-left: 2px; }

  /* ============ これからの予定（日付ごとのブロック・活動報告ページ） ============ */
  /* トップの黒板と違い、ここは白地。集合場所の地図まで載せるので、
     濃い色で塗らずに、日付ごとのブロックで落ち着いて読めるようにする */
  .schedblocks {
    margin-top: var(--sp-5);
    display: grid;
    gap: var(--sp-4);
  }
  /* 1枚のカードを「いつ｜どこ・何時｜地図」の3列で読ませる。
     日付を横帯にすると、日付・地名・時刻が別々の段に散って結びつかないので、
     日付は左のレールに立て、その日の予定（2カ所回る日は2つ）を右に積む */
  .schedblock {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    background: var(--surface);
    /* このセクションの地は --sea-50。カードの縁と日付レールにその色を使うと
       背景に溶けるので、縁は一段濃い罫、レールは一段濃い面（--sea-100）にする */
    border: 1px solid var(--line-strong);
    box-shadow: 0 2px 10px -5px rgba(31, 63, 115, .35);
  }
  /* 色は海の系統だけで組み、差し色（--accent のオレンジ）は「今日／明日」の
     バッジ1点にしか使わない。カードの大きさは全部そろえ、直近の日は
     レールの縁とバッジの塗りだけで示す（大小で示すと並びが不揃いに見えるため）。
     ※ --blue は別名で実体が --accent（オレンジ）なので、ここでは使わない */

  /* 左の日付レール。この日ぶんの予定すべてに掛かるので、行を貫いて置く */
  .schedblock__head {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-4);
    background: var(--sea-100);
    border-right: 1px solid var(--line);
    border-left: 4px solid var(--sea-600);
  }
  .schedblock--next .schedblock__head { border-left-color: var(--sea-900); }

  /* レールの右側。中止の知らせとその日の集合場所を縦に積む */
  .schedblock__body { grid-column: 2; min-width: 0; }

  .schedblock__day { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .schedblock__date { font-size: var(--fs-xl); line-height: 1; color: var(--sea-900); }
  .schedblock__dow { font-size: var(--fs-cap); color: var(--ink-faint); }
  /* 「今日」「明日」はこのページでいちばん強い手がかり。
     ページ全体で唯一の差し色をここに当て、日付より先に目に入るようにする */
  /* .schedblock__done（アイコン付き）と行の高さがそろうよう、どちらも line-height を
     明示してそろえている（アイコンの有無で箱の高さが変わらないようにするため） */
  .schedblock__rel {
    order: -1;
    line-height: 1.4;
    font-size: var(--fs-cap);
    font-weight: 700;
    color: var(--sea-900);
    border: 1px solid var(--sea-200);
    padding: 1px 8px;
    letter-spacing: 0.04em;
  }
  .schedblock--next .schedblock__rel { background: var(--accent); border-color: var(--accent); color: #fff; }
  /* 本日ぶんに、もう活動の記録が付いているときの印（夕方に記録を書き終えたあとなど） */
  .schedblock__done {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
    font-size: var(--fs-cap);
    font-weight: 700;
    color: #fff;
    background: var(--sea-900);
    border: 1px solid var(--sea-900);
    padding: 1px 8px;
  }
  .schedblock__done svg { width: 1em; height: 1em; fill: #fff; flex: none; }

  /* ============ 1日ぶんの共有ページ（/schedule/day/） ============
     ヘッダー・フッターはサイト共通（site-header.php／site-footer.php）のまま、
     中身の並びだけを印刷用の1枚（/schedule/print/・css/handout.css）にそろえる：
     要点（集合・時間・申込・参加費・持ち物）→ 今日の集合場所（大きな日付＋場所＋地図）
     → 参加のしかた・持ち物 → 注意、という順） */
  .daysheet {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: var(--sp-6);
  }
  .daysheet__facts { width: 100%; max-width: 26em; margin: var(--sp-6) 0; border-collapse: collapse; }
  .daysheet__facts th,
  .daysheet__facts td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); font-size: var(--fs-cap); text-align: left; }
  .daysheet__facts th { width: 6em; color: var(--ink-faint); font-weight: 700; white-space: nowrap; background: var(--surface-alt); }
  .daysheet__facts td { color: var(--ink); font-weight: 700; }

  .daysheet__date {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px var(--sp-3);
    margin: 0 0 var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line);
  }
  .daysheet__md { font-size: var(--fs-2xl); font-weight: 700; line-height: 1; color: var(--sea-900); }
  .daysheet__dow { font-size: var(--fs-base); color: var(--ink-faint); }
  .daysheet__at { margin-left: auto; font-size: var(--fs-lg); font-weight: 700; color: var(--accent); }

  .daysheet__places { display: grid; gap: var(--sp-6); }
  .daysheet__places--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daysheet__eyebrow {
    display: inline-block; margin: 0 0 var(--sp-2); padding: 2px var(--sp-3);
    font-size: var(--fs-cap); font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--sea-900);
  }
  .daysheet__name { margin: 0; font-size: var(--fs-xl); color: var(--ink); }
  .daysheet__name small { font-size: var(--fs-cap); font-weight: 400; color: var(--ink-faint); }
  .daysheet__x { margin-left: var(--sp-2); font-size: var(--fs-cap); font-weight: 700; color: #fff; background: var(--alert); padding: 1px var(--sp-2); vertical-align: middle; }
  .daysheet__addr,
  .daysheet__facil,
  .daysheet__note { margin: var(--sp-2) 0 0; font-size: var(--fs-cap); color: var(--ink-soft); }
  .daysheet__facil strong { color: var(--sea-900); }
  .daysheet__record { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
  .daysheet__map { margin: var(--sp-3) 0 0; }
  .daysheet__map iframe { display: block; width: 100%; height: 340px; border: 1px solid var(--line); }
  .daysheet__map figcaption { margin-top: var(--sp-1); font-size: var(--fs-cap); color: var(--ink-faint); }
  .daysheet__warn {
    margin: var(--sp-5) 0 0; padding: var(--sp-3) var(--sp-4);
    background: #fdf6ec; border: 1px solid #e8d3b0; font-size: var(--fs-cap); line-height: 1.8;
  }
  .daysheet__warn strong { color: var(--alert); }

  .daysheet__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
  .daysheet__ttl { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); color: var(--sea-900); }
  .daysheet__steps { margin: 0; padding-left: 1.1em; display: grid; gap: var(--sp-3); }
  .daysheet__steps li { color: var(--ink-soft); line-height: 1.8; }
  .daysheet__steps strong { display: block; color: var(--ink); }
  .daysheet__bring { list-style: none; margin: 0; padding: 0; }
  .daysheet__bring li { position: relative; padding: var(--sp-2) 0 var(--sp-2) 1.1em; border-bottom: 1px dotted var(--line); font-size: var(--fs-cap); color: var(--ink-soft); }
  .daysheet__bring li::before { content: "・"; position: absolute; left: 0; }
  .daysheet__note-box { margin: var(--sp-3) 0 0; font-size: var(--fs-cap); color: var(--ink-faint); }
  .daysheet__cautions-ttl { margin: var(--sp-6) 0 var(--sp-3); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
  .daysheet__cautions { list-style: none; margin: 0; }
  .daysheet__cautions li { position: relative; padding: var(--sp-1) 0 var(--sp-1) 1.1em; font-size: var(--fs-cap); color: var(--ink-soft); }
  .daysheet__cautions li::before { content: "・"; position: absolute; left: 0; }

  @media (max-width: 700px) {
    .daysheet { padding: var(--sp-4); }
    .daysheet__places--two,
    .daysheet__cols { grid-template-columns: 1fr; }
    .daysheet__at { margin-left: 0; }
    /* 「・」ぶんの字下げが狭い画面では余白として大きく見えるので詰める */
    .daysheet__cautions li { padding-left: .9em; }
  }

  /* 予定日をすでに過ぎている巡回への案内。活動の記録があれば、そこへページ内ジャンプする */
  .daynotice {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: var(--fs-cap);
    color: var(--ink-soft);
  }
  .daynotice a { display: inline-block; margin-top: var(--sp-2); color: var(--sea-900); font-weight: 700; }

  /* 1日ぶんの共有ページの、活動の記録（あれば）。共有欄の上に置く */
  /* ヘッダーが sticky で上に重なるので、ページ内ジャンプ（#dayrecord）で見出しが
     隠れないよう、他の同様のジャンプ先（.schedblock 等）と同じ分だけ上に余白を確保する */
  .dayrecord { margin: var(--sp-6) 0 0; scroll-margin-top: 90px; }
  .dayrecord .postlist { margin-top: 0; }

  /* 1日ぶんの共有ページの、印刷・コピー・X・Facebookの4つ。枠で囲み、アイコン付きで出す */
  .dayshare {
    margin: var(--sp-6) 0 0;
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
  }
  .dayshare__ttl { margin: 0 0 var(--sp-4); font-size: var(--fs-lg); color: var(--sea-900); }
  .dayshare__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  .dayshare__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: var(--fs-cap);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
  }
  .dayshare__btn svg { fill: currentColor; flex: none; }
  .dayshare__btn:hover { background: var(--sea-900); border-color: var(--sea-900); color: #fff; }
  .dayshare__btn.is-copied { background: var(--accent); border-color: var(--accent); color: #fff; }

  /* この日だけの詳細ページ（/schedule/day/）への主役のボタン。駐車場・トイレ・経路案内・
     印刷（schedblock__facts）より一段目立たせて、いちばん上に単独で置く */
  .schedblock__primary { margin: var(--sp-3) 0 0; }
  .schedblock__detailbtn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 9px 20px;
    background: #fff;
    border: 1px solid var(--sea-900);
    color: var(--sea-900);
    font-size: var(--fs-cap);
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
  }
  .schedblock__detailbtn:hover { background: var(--sea-900); color: #fff; }

  /* この日ぶんの地図つきA4印刷（/schedule/print/）の入口。
     経路案内のとなりに並べる。宿や公民館に貼ってもらう紙への導線で、
     来る人が最初に押すものではないので、経路案内より一段弱く、色を持たせず罫線だけで置く */
  .schedblock__detail,
  .schedblock__print {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-cap);
    line-height: 1;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    text-decoration: none;
    padding: 6px 14px;
    white-space: nowrap;
  }
  .schedblock__detail:hover,
  .schedblock__print:hover { background: var(--sea-900); border-color: var(--sea-900); color: #fff; }
  .schedblock__print-ico { fill: currentColor; flex: none; }
  /* その集合場所から回る海岸。1箇所だけの日は見出しと同じになるので出さない。
     項目名を小さな見出しとして立て、地名の羅列と地の文が混ざらないようにする */
  .schedblock__beaches {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-cap);
    color: var(--ink-soft);
    line-height: 1.7;
  }
  .schedblock__beaches span {
    display: inline-block;
    margin-right: var(--sp-2);
    color: var(--ink-faint);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
  }
  .schedblock__beaches span::after { content: '／'; margin-left: var(--sp-2); }

  /* 住所（大字まで）。カーナビや口で伝えるときの手がかり */
  .schedblock__addr { margin: var(--sp-2) 0 0; font-size: var(--fs-cap); color: var(--ink-faint); }

  /* 集合時刻と天気。この欄でいちばん知りたいことなので、地名の真下で数字を大きく出す。
     雨マークのかわりに文字で伝える */
  .schedblock__meta {
    margin: var(--sp-3) 0 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
  }
  .schedblock__at { font-size: var(--fs-cap); color: var(--ink-soft); }
  .schedblock__at .num {
    font-size: var(--fs-lg);
    line-height: 1.1;
    color: var(--sea-900);
    margin-right: 2px;
  }
  .schedblock__wx {
    font-size: var(--fs-cap);
    color: var(--ink-soft);
    min-width: 12em;
    padding: 2px 10px;
    background: var(--sea-50);
    border: 1px solid var(--sea-200);
  }
  .schedblock__wx.is-wet { color: var(--alert); font-weight: 700; }

  /* 1日に2カ所回る日は、この組が2つ並ぶ。
     案内を左・地図を右の2段組みにして、1件ぶんが画面に収まる高さに抑える
     （全幅の地図を縦に積むと、予定が5件並んだだけで延々とスクロールになるため） */
  .schedblock__place + .schedblock__place { border-top: 1px dashed var(--line); }
  .schedblock__place {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    align-items: stretch;
  }
  /* 地図が無い場所は1段組み（空の枠を作らない） */
  .schedblock__place--nomap { grid-template-columns: minmax(0, 1fr); }

  /* 案内の列。設備の行を下端に寄せたいので縦のflexにする */
  .schedblock__info {
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
  }
  /* 地名が何の地名かを示す小見出し。地名そのものより弱く、しかし必ず先に読ませる */
  .schedblock__eyebrow {
    margin: 0 0 var(--sp-2);
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    color: #fff;
    background: var(--sea-600);
    padding: 4px 10px;
  }
  .schedblock__name {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: 1.35;
    color: var(--ink);
  }
  .schedblock__name small { font-size: var(--fs-cap); font-weight: 400; color: var(--ink-faint); margin-left: 4px; }
  .schedblock__badge {
    display: inline-block;
    margin-left: var(--sp-3);
    padding: 1px 8px;
    border: 1px solid var(--alert);
    color: var(--alert);
    font-size: var(--fs-cap);
    font-weight: 400;
    vertical-align: middle;
  }
  /* 中止の日の知らせ。日付ブロックの頭に幅いっぱいで置き、集合場所の案内より先に読ませる。
     印だけでは見落として来てしまう人が出るので、面で塗って言い切る */
  .schedblock__off {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    background: #FDF3E0;
    border-top: 1px solid var(--line-strong);
    border-bottom: 2px solid var(--alert);
    color: var(--alert);
    font-size: var(--fs-base);
    line-height: 1.7;
  }
  .schedblock__off-mark {
    flex: none;
    padding: 2px 10px;
    background: var(--alert);
    color: #fff;
    font-size: var(--fs-cap);
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .schedblock__off-text strong { font-weight: 700; }
  /* 理由（強風のため など）は言い切りのあとに添える */
  .schedblock__off-why { display: block; font-size: var(--fs-cap); }

  /* 中止の日は、集合場所の地名に取り消し線を引く。
     時刻・天気・設備・経路案内・印刷はそもそも出していない（schedule-list.php 側） */
  .schedblock--canceled .schedblock__name { color: var(--ink-faint); }
  /* 「集合場所」の小見出しも、行き先の案内に見えないよう色を落とす */
  .schedblock__eyebrow--off { background: var(--ink-faint); }
  /* 中止の日を「次回の活動」として強調しない */
  .schedblock--canceled.schedblock--next .schedblock__rel {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--ink-faint);
  }

  /* 設備の印と地図への導線を1行に並べる。主役のボタン（schedblock__primary）の下に、
     一定のすき間を空けて置く（すき間が無いと境界線とボタンが接して見えてしまうため） */
  .schedblock__facts {
    margin: var(--sp-4) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
  }
  .schedblock__tag {
    display: inline-block;
    padding: 1px 9px;
    border: 1px solid var(--sea-200);
    color: var(--sea-500);
    font-size: var(--fs-cap);
    letter-spacing: 0.02em;
  }
  /* 「なし」は探しに行かせないよう、あえて目立たせずに伝える */
  .schedblock__tag--no { border-color: var(--line-strong); border-style: dashed; color: var(--ink-faint); }
  .schedblock__maplink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-cap);
    line-height: 1;
    color: var(--sea-500);
    border: 1px solid var(--sea-500);
    padding: 6px 14px;
    text-decoration: none;
    white-space: nowrap;
  }
  .schedblock__maplink:hover { background: var(--sea-500); border-color: var(--sea-500); color: #fff; }
  .schedblock__nomap { font-size: var(--fs-cap); color: var(--ink-faint); }
  .schedblock__note { margin: var(--sp-2) 0 0; font-size: var(--fs-cap); color: var(--ink-soft); line-height: 1.8; }

  /* 右の列いっぱいに地図を敷く。高さは案内の列に合わせて伸び、
     案内が短い日でも min-height を下限にして地図が痩せないようにする */
  .schedblock__map { margin: 0; display: grid; grid-template-rows: 1fr auto; }
  .schedblock__map figcaption {
    padding: 6px var(--sp-3);
    font-size: 0.8125rem;
    color: var(--ink-faint);
    background: var(--sea-50);
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
  }
  .schedblock__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 16rem;
    border: 0;
    border-left: 1px solid var(--line);
    background: var(--sea-50);
  }

  /* 地図の開閉トグルはSP（860px以下）専用。PC幅では常に地図を出す
     （.schedblock__mapwrap を透過扱いにして、いままでどおり .schedblock__map が
     そのまま2段組みの右列になるようにする。<details> の開閉状態は無視する） */
  .schedblock__mapToggle { display: none; }
  @media (min-width: 861px) {
    .schedblock__mapwrap { display: contents; }
    .schedblock__mapwrap .schedblock__map { display: grid; }
  }

  /* 「Googleマップで開く（経路案内）」は nowrap のままだと約338px を要求し、
     幅の狭い端末（375px前後）でカードからはみ出す。折り返して横いっぱいに置く */
  @media (max-width: 480px) {
    .schedblock__facts { gap: var(--sp-2); }
    .schedblock__maplink,
    .schedblock__detail,
    .schedblock__print {
      flex: 1 1 100%;
      justify-content: center;
      white-space: normal;
      text-align: center;
    }
  }

  .schedblock__empty {
    margin: var(--sp-5) 0 0;
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--sea-900);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.9;
  }
  .schedblock__foot {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-cap);
    color: var(--ink-faint);
    letter-spacing: 0.04em;
  }
  .schedblock__src { margin-left: var(--sp-4); }

  /* 横に3列ぶんの幅が取れなくなったら、日付を上の帯・地図を下に戻して縦に積む */
  @media (max-width: 860px) {
    .schedblock { grid-template-columns: minmax(0, 1fr); }
    .schedblock__head {
      grid-row: auto;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--sp-2) var(--sp-3);
      padding: var(--sp-3) var(--sp-4);
      border-right: 0;
      border-bottom: 1px solid var(--line);
      border-left-width: 4px;
    }
    .schedblock__day { flex-direction: row; align-items: baseline; gap: var(--sp-2); }
    .schedblock__date { font-size: var(--fs-lg); }
    .schedblock__rel { order: 0; }
    /* この行だけ baseline だと「今日」バッジとずれるので中央そろえにする */
    .schedblock__rel,
    .schedblock__done { align-self: center; }

    .schedblock__body { grid-column: 1; }
    .schedblock__place { grid-template-columns: minmax(0, 1fr); }
    .schedblock__info { padding: var(--sp-4); }
    .schedblock__name { font-size: var(--fs-md); }
    .schedblock__map iframe {
      height: 220px;
      min-height: 0;
      border-left: 0;
      border-top: 1px solid var(--line);
    }
    .schedblock__map figcaption { border-left: 0; }

    /* 地図の開閉トグル。今日・明日は開いたまま、明後日以降は閉じた状態で届くので、
       タップで開けることが分かるよう矢印を添える */
    .schedblock__mapToggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-2);
      padding: var(--sp-3) var(--sp-4);
      font-size: var(--fs-cap);
      font-weight: 700;
      color: var(--blue);
      background: var(--sea-50);
      border-top: 1px solid var(--line);
      cursor: pointer;
      list-style: none;
      -webkit-tap-highlight-color: transparent;
    }
    .schedblock__mapToggle::-webkit-details-marker { display: none; }
    .schedblock__mapToggle::after {
      content: "";
      flex: none;
      width: 8px;
      height: 8px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      transition: transform .2s;
    }
    .schedblock__mapwrap[open] .schedblock__mapToggle::after { transform: rotate(-135deg); }
    .schedblock__mapToggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
    .schedblock__mapwrap[open] .schedblock__mapToggle { border-bottom: 1px solid var(--line); }
  }

  /* 案内人 */
  .guide { margin: 0; }
  .guide__photo { aspect-ratio: 4/5; overflow: hidden; background: var(--sky-soft); }
  .guide__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .guide__cap { padding-top: var(--sp-5); }
  .guide__lead { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--blue); line-height: 1.6; }
  .guide__body { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.9; }

  .next__foot { padding-top: var(--sp-7); }

  /* 日付への直リンク（/schedule/#day-…）で飛んだとき、
     上に貼り付くヘッダーの下に日付が隠れないよう、着地位置に余白を取る */
  .schedblock { scroll-margin-top: 90px; }

  /* 通知の受け取り案内（/schedule/）。中身の出し分けは js/push.js */
  .push-optin {
    margin-top: var(--sp-6);
    padding: var(--sp-5);
    border: 1px solid var(--line);
    border-left: 4px solid var(--blue);
    background: #fff;
  }
  .push-optin__title { margin: 0; font-size: var(--fs-md); color: var(--blue-deep); }
  .push-optin__lead { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.8; }
  .push-optin__actions { margin: var(--sp-4) 0 0; }
  .push-optin__btn { border: 0; cursor: pointer; font-family: inherit; }
  .push-optin__btn:disabled { opacity: 0.6; cursor: default; }
  /* 設定・解除の処理中に回すスピナー（js/push.js の showButtonLoading が入れる）。
     .btn span が gap 付きの inline-flex なので、先頭に置くだけで文字と並ぶ */
  .push-optin__spinner {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: push-optin-spin 0.7s linear infinite;
  }
  @keyframes push-optin-spin {
    to { transform: rotate(360deg); }
  }
  .push-optin__note { margin: var(--sp-3) 0 0; font-size: var(--fs-cap); color: var(--ink-soft); line-height: 1.8; }
  /* iPhoneのSafari向けに出す「手順を見る」導線。ボタンと紛れないようテキストリンクにする */
  .push-optin__guide-link { display: inline-block; font-size: var(--fs-sm); font-weight: 700; color: var(--blue-deep); text-decoration: underline; text-underline-offset: 4px; }
  /* SPではボタン（とリンク）を真ん中に寄せる */
  @media (max-width: 640px) {
    .push-optin__actions { text-align: center; }
  }

  /* 通知の受け取りかた（/notification-guide/）。手順の番号とダミーのスクショ枠 */
  .pushguide { max-width: 46rem; }
  .pushguide__intro { margin: 0 0 var(--sp-6); font-size: var(--fs-base); line-height: 2; color: var(--ink-soft); }
  .pushguide__note { margin: var(--sp-3) 0 var(--sp-5); font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-soft); }
  /* 機種別のジャンプボタン。狭い画面では縦に積む */
  .pushguide__jump { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-3); }
  .pushguide__jump .btn { flex: 1 1 14rem; justify-content: center; }
  .pushguide__pc { margin: 0 0 var(--sp-7); font-size: var(--fs-cap); color: var(--ink-soft); }
  /* 見出しへ飛んだとき、上に貼り付くヘッダーに隠れないようにする */
  .pushguide .sec { scroll-margin-top: 90px; }
  .pushguide__steps { list-style: none; margin: 0 0 var(--sp-8); padding: 0; display: grid; gap: var(--sp-6); }
  .pushguide__steps h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); color: var(--blue-deep); display: flex; align-items: center; gap: var(--sp-3); }
  .pushguide__num {
    flex: none;
    width: 1.9em; height: 1.9em;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: .85em;
  }
  .pushguide__steps p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-soft); }
  /* スクリーンショットのダミー枠。実機のスクショが撮れたら <img> に差し替える */
  .pushguide-ph {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
    max-width: 300px;
    aspect-ratio: 3 / 4;
    border: 2px dashed var(--line-strong);
    border-radius: 12px;
    background: var(--sky-soft);
    color: var(--ink-soft);
    font-size: var(--fs-cap);
    text-align: center;
    padding: var(--sp-4);
  }
  .pushguide-ph .ph-icon { font-style: normal; font-size: 2rem; }
  .pushguide-ph small { color: var(--ink-faint); }
  .pushguide__trouble { margin: var(--sp-4) 0 0; font-size: var(--fs-cap); color: var(--ink-soft); }
  /* 通知の設定ページのメリット3つ。設定枠より先に読ませる */
  .pushguide__merits { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-4); }
  .pushguide__merits li { padding-left: var(--sp-5); position: relative; }
  .pushguide__merits li::before {
    content: "✓";
    position: absolute; left: 0; top: 0;
    color: var(--blue);
    font-weight: 700;
  }
  .pushguide__merits strong { display: block; font-size: var(--fs-base); color: var(--blue-deep); }
  .pushguide__merits span { display: block; margin-top: 2px; font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-soft); }

  /* 通知から来た人への案内モーダル（src/partials/notification-modal.php）。
     開幕の演出（.intro-splash: 999）より上に置き、通知の答えを最初に見せる */
  .notification-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
  /* モーダルが出ているあいだは背面のページをスクロールさせない。
     「閉じる」で要素ごと消える（JSが modal.remove() する）ので、解除も自動で効く */
  body:has(.notification-modal) { overflow: hidden; }
  .notification-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 30, 60, .55); }
  .notification-modal__card {
    position: relative;
    background: #fff;
    border-top: 4px solid var(--blue);
    padding: var(--sp-6) var(--sp-5);
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  }
  .notification-modal__eyebrow { margin: 0; font-size: var(--fs-cap); letter-spacing: .1em; color: var(--ink-soft); }
  .notification-modal__title { margin: var(--sp-3) 0 0; font-size: var(--fs-md); color: var(--blue-deep); }
  .notification-modal__place { margin: var(--sp-3) 0 0; font-size: var(--fs-xl); font-weight: 700; color: var(--blue); line-height: 1.4; }
  .notification-modal__place--off { color: var(--ink-soft); }
  .notification-modal__meta { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--ink-soft); }
  .notification-modal__note { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--ink-soft); background: var(--sky-soft); padding: var(--sp-2) var(--sp-3); }
  .notification-modal__actions { margin: var(--sp-5) 0 0; display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
  .notification-modal__close { font-size: var(--fs-sm); color: var(--ink-soft); text-decoration: underline; }

  @media (max-width: 860px) {
    .next__layout { grid-template-columns: 1fr; gap: var(--sp-6); }
    .guide__photo { aspect-ratio: 16/9; }
  }
  @media (max-width: 480px) {
    .board__row { grid-template-columns: 1fr; gap: var(--sp-1); }
    .board__row dt { flex-direction: row; align-items: baseline; gap: var(--sp-3); }
    /* 行が縦積みになると列の見出しは位置が合わなくなる。
       日付は見れば日付と分かるので、地名側の見出しだけ残す */
    .board__cols { grid-template-columns: 1fr; }
    .board__cols span:first-child { display: none; }
  }

  /* ============ 巡回カレンダー（過去の巡回をたどる） ============ */
  /* 月送りはリンクで行う（?ym=2026-07）。JSは使っていない。
     セルの中身は地名だけにして、1か月ぶんを一目で見渡せるようにする */
  .cal { margin-top: var(--sp-6); }
  .cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
  }
  .cal__ttl { margin: 0; font-size: var(--fs-lg); color: var(--blue); letter-spacing: 0.02em; }
  .cal__nav {
    font-size: var(--fs-sm);
    color: var(--blue);
    text-decoration: none;
    border: 1px solid var(--line-strong);
    padding: 6px 14px;
    white-space: nowrap;
  }
  .cal__nav:hover { border-color: var(--blue); background: var(--sky-soft); }
  /* 記録のある範囲より外。押せないことを色で示す（要素は残して位置をずらさない） */
  .cal__nav.is-disabled { color: var(--ink-faint); border-color: var(--line); background: transparent; }

  .cal__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--surface);
  }
  .cal__caption {
    caption-side: top;
    text-align: left;
    padding-bottom: var(--sp-3);
    font-size: var(--fs-cap);
    color: var(--ink-faint);
  }
  .cal__today { margin-left: var(--sp-3); color: var(--blue); }
  .cal__dow {
    padding: 6px 4px;
    border: 1px solid var(--line);
    background: var(--surface-alt);
    font-size: var(--fs-cap);
    font-weight: 700;
    color: var(--ink-soft);
  }
  .cal__dow--sun { color: #A33A3A; }
  .cal__dow--sat { color: var(--blue-deep); }
  .cal__cell {
    border: 1px solid var(--line);
    vertical-align: top;
    height: 5.5em;
    padding: 6px;
  }
  .cal__cell--empty { background: var(--surface-alt); }
  .cal__day { display: block; font-size: var(--fs-cap); color: var(--ink-faint); line-height: 1.4; }
  /* 巡回した日は面を塗って、月の中の「動いた日」がひと目で分かるようにする */
  .cal__cell--has { background: var(--sky-soft); }
  .cal__cell--has .cal__day { color: var(--blue-deep); font-weight: 700; }
  .cal__cell--today { box-shadow: inset 0 0 0 2px var(--blue); }
  /* どの日も、この日だけの詳細ページ（/schedule/day/）へのリンクになっている */
  .cal__place {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-cap);
    color: var(--ink);
    line-height: 1.5;
    word-break: break-word;
    text-decoration: none;
  }
  .cal__place:hover { text-decoration: underline; text-underline-offset: 3px; }
  .cal__place--canceled { color: var(--ink-faint); }
  /* その日の活動の記録が公開されている日は、リンク色にして違いが分かるようにする。
     小さなカメラの印も添える */
  .cal__place--link { color: var(--blue); }
  .cal__rec {
    display: inline-block; vertical-align: -1px; margin-left: 4px;
    width: 11px; height: 9px;
    border: 1.5px solid currentColor; border-radius: 2px;
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3.5px currentColor;
  }
  .cal__x {
    margin-left: 4px;
    font-size: 0.75em;
    color: var(--alert);
    text-decoration: none;
  }
  .cal__empty { margin: var(--sp-4) 0 0; color: var(--ink-soft); font-size: var(--fs-sm); }

  @media (max-width: 640px) {
    /* 狭い画面では日付と地名が入るだけの高さにして、文字を詰めすぎない */
    .cal__cell { height: 4.5em; padding: 4px 3px; }
    .cal__place { font-size: 0.78rem; }
  }

  /* ============ stats ============ */
  /* 数字だけを並べても何の実績か伝わらないため、
     「何を・誰が評価したか」のラベルと説明文をセットで見せる */
  .stats { background: var(--surface-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .stats__intro { margin: var(--sp-5) 0 0; color: var(--ink-soft); max-width: 40rem; font-size: var(--fs-base); }

  .stats__row {
    margin-top: var(--sp-7);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
  }
  .stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--blue);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
  }
  .stat__label {
    font-size: var(--fs-cap);
    font-weight: 700;
    color: var(--blue);
    letter-spacing: 0.06em;
  }
  .stat__value {
    display: block;
    margin-top: var(--sp-3);
    font-size: var(--fs-2xl);
    color: var(--blue);
    line-height: 1;
  }
  .stat__unit { font-size: var(--fs-md); margin-left: 2px; }
  .stat__desc {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    line-height: 1.9;
  }
  .stat__desc strong { color: var(--ink); font-weight: 700; }
  @media (max-width: 780px) {
    .stats__row { grid-template-columns: 1fr; }
  }

  /* 深い海の帯に乗るときは、受賞にふさわしい設えにする。
     白い箱を並べるだけでは実績の重みが伝わらないため、
     ガラスのような面＋金の罫＋大きな数字で見せる */
  .band--sea .stats__row { gap: var(--sp-6); }
  .band--sea .stat {
    position: relative;
    padding: var(--sp-7) var(--sp-6) var(--sp-6);
    /* 上のガラス感は残しつつ、下地を不透明に近づける。
       透過だけだと背後のシルエット（.shape--people）が箱の中に透けて、
       文字が模様の上に乗って読みづらくなるため */
    background:
      linear-gradient(165deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 52%, rgba(255,255,255,.03) 100%),
      rgba(26,52,92,.88);
    border: 1px solid rgba(255,255,255,.24);
    border-top: none;
    box-shadow: 0 22px 46px -28px rgba(10,22,48,.75);
    overflow: hidden;
  }
  /* 上端の金の線 */
  .band--sea .stat::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 42%, #F5E6C4 52%, var(--gold) 62%, var(--gold-deep) 100%);
  }
  /* 右上に沈む輪。光の差し込みを思わせる飾り */
  .band--sea .stat::after {
    content: "";
    position: absolute; right: -78px; top: -78px;
    width: 210px; height: 210px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    pointer-events: none;
  }
  .band--sea .stat__label {
    display: inline-block;
    padding-bottom: var(--sp-3);
    color: var(--gold);
    font-size: var(--fs-cap);
    letter-spacing: 0.14em;
    border-bottom: 1px solid rgba(227,198,140,.5);
  }
  .band--sea .stat__value {
    margin-top: var(--sp-5);
    font-size: clamp(2.4rem, 4.2vw, 3.5rem);
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.015em;
    text-shadow: 0 8px 28px rgba(10,22,48,.45);
  }
  .band--sea .stat__unit {
    font-size: .32em;
    font-weight: 500;
    margin-left: 6px;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,.82);
  }
  .band--sea .stat__desc { margin-top: var(--sp-5); color: rgba(255,255,255,.88); }
  .band--sea .stat__desc strong { color: #fff; }

  /* 数字カードに載せる写真。数字と受賞名だけでは、誰がどこで受け取ったのかが伝わらない。
     カードの中に式典の写真を1枚入れる。濃い海の上では白の細い縁で輪郭を出す */
  /* 写真は正方形に切りそろえる。縦横の比がばらばらな写真をそのまま並べると、
     カードごとに高さが変わって列が揃わないため。
     枠（span）に比率を持たせ、中の写真を object-fit で切る。img 自体に
     aspect-ratio を掛ける方法だと、カードが縦並び（flex column）のときに
     写真の元の高さが優先されて縦長になってしまう */
  .stat__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: var(--sp-5);
    border: 1px solid var(--line);
  }
  .stat__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .band--sea .stat__photo { border-color: rgba(255,255,255,.28); }
  /* 写真がまだ無い枠。空けておくより「準備中」と分かる面を置く */
  .stat__photo--dummy {
    display: grid;
    place-items: center;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.07) 10px, transparent 10px, transparent 20px);
    border-style: dashed;
    font-size: var(--fs-sm);
    color: var(--ink-faint);
  }

  /* ============ about teaser ============ */
  .about { background: var(--surface); overflow: hidden; }
  .about__grid { display: grid; grid-template-columns: 5fr 6fr; gap: var(--sp-9); }
  .about__quote { margin: var(--sp-6) 0 0; padding-left: var(--sp-5); border-left: 2px solid var(--blue); font-size: var(--fs-md); line-height: 2; color: var(--ink); }
  .about__body { margin: var(--sp-5) 0 0; color: var(--ink-soft); font-size: var(--fs-base); line-height: 2; }
  .about a.link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--sp-6); color: var(--blue); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; }
  .about a.link .btn__arrow { font-family: "Oswald", sans-serif; transition: transform .3s; }
  .about a.link:hover .btn__arrow { transform: translateX(4px); }

  /* 文の途中で折り返さない。1文ずつ inline-block にして、改行が句点の位置でだけ起きるようにする。
     画面が1文の幅より狭いときは、はみ出さずに通常どおり文中で折り返す */
  .sentence { display: inline-block; }

  /* ============ island shape（背景に敷く与論島の形） ============ */
  /* 島そのものを薄い透かしとして敷く。読みの邪魔にならない濃さに留めつつ、
     セクションごとに位置・向き・大きさを変えて単調にならないようにする。
     セクションに直接 overflow:hidden を掛けると波の見切り（.band--wave::before）まで
     消えてしまうので、クリップ用の入れ物を1枚かませる */
  .has-shape { position: relative; }
  .has-shape > .wrap { position: relative; z-index: 1; }
  .shapewrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }
  .shape {
    position: absolute;
    width: min(900px, 62%);
    height: auto;
    opacity: .08;
    user-select: none;
  }
  .shape--right  { right: -6%;  top: 50%; transform: translateY(-50%); }
  .shape--left   { left: -8%;   top: 50%; transform: translateY(-50%); }
  .shape--tright { right: -10%; top: -16%; }
  .shape--bleft  { left: -12%;  bottom: -20%; }
  .shape--lg { width: min(1100px, 76%); }
  .shape--sm { width: min(620px, 46%); }
  /* 深い海の帯の上では白く反転させる */
  .shape--light { filter: brightness(0) invert(1); opacity: .05; }

  /* 実績の帯には、読み込み画面と同じ参加者のシルエットを敷く。
     受賞の数字の背後に、それを積み上げてきた人たちが立っている状態にする */
  .shape--people {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(1280px, 98%);
    opacity: .14;
  }

  @media (max-width: 900px) {
    .shape { width: 92%; opacity: .055; }
    .shape--lg { width: 108%; }
    .shape--sm { width: 76%; }
    .shape--right, .shape--tright { right: -20%; }
    .shape--left, .shape--bleft { left: -24%; }
    .shape--people { left: 50%; width: 150%; opacity: .11; }
    /* 横並びが縦積みになる段。真ん中に置いたままだと、下に回った写真の裏に
       丸ごと隠れてしまうので、文章の背後まで上げる（写真とは重ねない） */
    .shape--up { top: 12%; transform: none; }
  }

  /* ============ photo frame（装飾つきの写真） ============ */
  /* 背後に淡い海色の面を1枚だけずらして敷く。
     砂地の上に置くので、面は砂色ではなく海色にしないと地色に沈んで
     「枠線がずれている」ようにしか見えない。
     枠を何重にも重ねるとかえって雑然とするため、面は1枚に絞る */
  .photoframe {
    position: relative;
    margin: 0;
    /* グリッドの行の高さいっぱいに伸びると、背後の面だけが写真より長くなる。
       中身（写真）の高さに合わせて上端でとめる */
    align-self: start;
    /* 背後の面をずらす分の余白 */
    padding: 0 24px 24px 0;
  }

  /* 背後の面。写真から右下へきっちり24pxずらす */
  .photoframe::before {
    content: "";
    position: absolute;
    right: 0; bottom: 0;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    background: var(--sea-50);
    border: 1px solid var(--sea-100);
    z-index: 0;
  }

  /* 写真本体。白い縁をつけて“プリント”のように見せる */
  /* ============ pickup（注目してほしい1件を囲う枠） ============ */
  /* 本文の流れの中に置きつつ、枠と地色を変えて「ここは別枠」だと分かるようにする。
     砂の帯の上に置くので、地色は淡い海の色にして色相をそろえる */
  .pickup {
    position: relative;
    margin-top: var(--sp-9);
    padding: var(--sp-7);
    background: var(--sea-50);
    border: 1px solid var(--sea-100);
    border-top: 4px solid var(--sea-500);
  }
  .pickup__ttl { margin: 0 0 var(--sp-3); font-size: var(--fs-xl); font-weight: 700; color: var(--blue); line-height: 1.5; }
  .pickup__lead { margin: 0 0 var(--sp-6); font-size: var(--fs-base); color: var(--ink-soft); line-height: 1.9; }
  /* 枠の中では、カード側の枠線と影は重ねない */
  .pickup .moviecard { max-width: none; border-color: var(--sea-100); box-shadow: none; }
  .pickup .moviecard:hover { box-shadow: 0 8px 24px rgba(24,48,88,.16); }

  /* 枠の中に写真を並べる版（東日本大震災の漂着物）。
     何枚かで1つの話になるものは、小さなカードに散らすより1つの枠にまとめる。
     容器に書かれた地名が読めることがこの写真の意味なので、2枚組で大きく出す */
  .pickup__photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  /* 縦に積む版（表彰の記録）。横に3枚並べると1枚あたりが小さくなり、
     誰が何を持っているのかが見えない。1枚ずつ大きく出し、説明は写真の横に置く */
  .pickup__photos--rows { grid-template-columns: 1fr; gap: var(--sp-6); }
  .pickup__photos--rows figure { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; }
  .pickup__photos--rows figcaption { padding: var(--sp-5) var(--sp-6); font-size: var(--fs-base); }
  /* 枠の中の小見出し（「表彰式のようす」）。ギャラリーどうしの区切りになる */
  .pickup__sub { margin: var(--sp-7) 0 var(--sp-4); font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
  .pickup__photos figure { margin: 0; background: var(--surface); border: 1px solid var(--sea-100); }
  /* height を auto にしておかないと、img の height 属性（元画像の高さ）がそのまま効いて
     縦長の写真だけ高さが揃わなくなる。比率はここで決め、はみ出しは object-fit で切る */
  .pickup__photos img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
  /* 表彰状・楯は文面が読めることに意味があるので、切り抜かずに全体を出す。
     枠の大きさは写真とそろえて4:3のままにし、はみ出した余白はマット（額装の台紙）に見えるグレーで埋める。
     ここは .pickup__photos img と詳細度が同じなので、必ずこの下に置くこと */
  .pickup__photos--certs img { aspect-ratio: 4/3; object-fit: contain; background: var(--mat); }
  /* 縦長のポスター（カキブイの注意喚起）。読ませることが目的なので、紙の比率のまま大きく出す。
     狭い画面では .pickup__photos の1列指定がそのまま効いて、1枚が画面幅いっぱいになる。
     ここも .pickup__photos img と詳細度が同じなので、必ずこの下に置くこと */
  .pickup__photos--poster img { aspect-ratio: 1200 / 1697; object-fit: contain; background: var(--mat); }
  /* 横長の写真を1枚だけ置く枠（カキブイの実物）。説明は写真の下に敷く */
  .photostrip { margin: var(--sp-6) 0 0; background: var(--surface); border: 1px solid var(--sea-100); }
  .photostrip img { display: block; width: 100%; height: auto; }
  .photostrip figcaption { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.8; }
  /* 原寸を開くためのリンク。img を包むので、インラインのままだと下に隙間が出る */
  .pickup__photos figure > a { display: block; }
  .pickup__photos figcaption { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.8; }
  .pickup__photos figcaption strong { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 700; }
  /* 出典。写真そのものの説明ではないので、枠の中でいちばん小さくする */
  .pickup__src { margin: var(--sp-5) 0 0; font-size: var(--fs-cap); color: var(--ink-faint); }
  .pickup__src a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

  @media (max-width: 780px) {
    .pickup { padding: var(--sp-5); margin-top: var(--sp-8); }
    .pickup__photos { grid-template-columns: 1fr; gap: var(--sp-4); }
    /* 表彰状は6枚あり、1列にすると延々と縦に続いてしまう。
       文面は拡大して読むものと割り切って、狭い画面でも2列のまま並べる
       （.pickup__photos の1列指定と詳細度が同じなので、この下に置くこと） */
    .pickup__photos--certs { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
    .pickup__photos--certs figcaption { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-cap); }
    .pickup__photos--rows figure { grid-template-columns: 1fr; }
    .pickup__photos--rows figcaption { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); }
  }

  .photoframe__inner {
    position: relative;
    z-index: 1;
    background: var(--surface);
    padding: 12px;
    box-shadow: 0 8px 28px rgba(24,48,88,.16);
  }
  .photoframe__inner img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
  }

  /* キャプション。写真の左下に少しはみ出させる */
  .photoframe__cap {
    position: absolute;
    left: -14px; bottom: 0;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 6px;
    background: var(--blue);
    color: #fff;
    padding: 8px var(--sp-5);
    box-shadow: 0 4px 14px rgba(24,48,88,.22);
  }
  .photoframe__cap-ja { font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.04em; }
  .photoframe__cap-yn { font-size: var(--fs-cap); color: rgba(255,255,255,.82); }

  /* 右上の波線 */
  .photoframe__wave {
    position: absolute;
    right: 30px; top: -18px;
    width: 110px; height: 22px;
    z-index: 2;
  }
  .photoframe__wave path { fill: none; stroke: var(--blue-bright); stroke-width: 2.4; stroke-linecap: round; }

  @media (max-width: 900px) {
    .photoframe { padding: 0 16px 16px 0; margin-top: var(--sp-6); }
    .photoframe::before { width: calc(100% - 16px); height: calc(100% - 16px); }
    .photoframe__wave { width: 90px; right: 22px; }
  }

  @media (max-width: 900px) {
    .about__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  }

  /* ============ flow ============ */
  .flow { background: var(--surface-alt); }
  /* 4つを横に並べると1つあたりが細くなり、番号と本文の関係も読み取りにくい。
     上から順に降りていく縦のステップにして、流れそのものを形で示す。
     ただし縦1列だけだと右half が空いてしまうので、
     PCでは右に当日の写真を置いて、文章と絵の両方で伝える */
  .flow__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: var(--sp-9); align-items: start; }
  .flow__steps { margin-top: var(--sp-7); display: grid; }
  .flow__photo { margin: var(--sp-7) 0 0; position: relative; }
  .flow__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
  .flow__photo figcaption {
    margin-top: var(--sp-3);
    font-size: var(--fs-cap);
    color: var(--ink-faint);
    line-height: 1.8;
  }
  /* 写真は補足なので、幅が足りなくなったら先に畳む */
  @media (max-width: 900px) {
    .flow__in { grid-template-columns: 1fr; gap: var(--sp-6); }
    .flow__photo { display: none; }
  }
  .flow__step {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
    padding: var(--sp-5) 0;
  }
  /* 番号どうしを縦線でつなぐ */
  .flow__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 25px; top: calc(var(--sp-5) + 52px);
    bottom: calc(-1 * var(--sp-5));
    width: 2px;
    background: var(--sand);
  }
  .flow__step .num {
    display: grid; place-items: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--blue); color: #fff;
    font-size: var(--fs-md); line-height: 1;
    position: relative; z-index: 1;
  }
  .flow__step__body { padding-top: 6px; }
  .flow__step h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
  .flow__step p { margin: 0; font-size: var(--fs-base); color: var(--ink-soft); line-height: 1.8; }
  .flow__step p .num { display: inline; width: auto; height: auto; background: none; border-radius: 0; color: var(--blue); font-size: 1.1em; }
  @media (max-width: 480px) {
    .flow__step { grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-4); }
    .flow__step .num { width: 44px; height: 44px; font-size: var(--fs-sm); }
    .flow__step:not(:last-child)::before { left: 21px; top: calc(var(--sp-5) + 44px); }
  }

  /* ============ participate CTA ============ */
  /* ============ ways（関わり方を並べる） ============ */
  /* 見出しと説明を左右に置き、その下にカードを並べる。
     「参加する」を一枚岩にせず、関わり方の選択肢として見せる */
  .ways { background: var(--sea-50); }
  .ways__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--sp-8);
    align-items: start;
  }
  .ways__ttl {
    margin: 0;
    font-size: clamp(1.25rem, 2.6vw, 1.8rem);
    font-weight: 700;
    line-height: 1.6;
    color: var(--blue);
  }
  .ways__lead { margin: 0; font-size: var(--fs-base); line-height: 2; color: var(--ink-soft); }

  .ways__sub {
    margin: var(--sp-8) 0 var(--sp-5);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.06em;
  }
  .ways__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
  }

  .waycard {
    position: relative;
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: var(--sp-6) var(--sp-6) calc(var(--sp-6) + 34px);
    text-decoration: none;
    color: inherit;
    transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
  }
  .waycard:hover {
    transform: translateY(-4px);
    border-color: var(--sea-100);
    box-shadow: 0 10px 28px rgba(24,48,88,.12);
  }
  .waycard__icon { display: block; width: 34px; height: 34px; margin-bottom: var(--sp-5); color: var(--blue); }
  .waycard__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .waycard__ttl { margin: 0 0 var(--sp-3); font-size: var(--fs-md); font-weight: 700; color: var(--blue); line-height: 1.5; }
  .waycard__body { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.9; }

  /* 右下の丸い矢印 */
  .waycard__go {
    position: absolute;
    right: var(--sp-6); bottom: var(--sp-6);
    width: 30px; height: 30px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    transition: background .3s, border-color .3s;
  }
  .waycard__go::after {
    content: "";
    position: absolute;
    left: 9px; top: 50%;
    width: 8px; height: 8px;
    border: solid var(--blue);
    border-width: 1.5px 1.5px 0 0;
    transform: translateY(-50%) rotate(45deg);
    transition: border-color .3s;
  }
  .waycard:hover .waycard__go { background: var(--blue); border-color: var(--blue); }
  .waycard:hover .waycard__go::after { border-color: #fff; }

  @media (max-width: 980px) {
    .ways__head { grid-template-columns: 1fr; gap: var(--sp-5); }
    .ways__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .ways__grid { grid-template-columns: 1fr; }
    .ways__ttl br { display: none; }
  }

  /* ============ posts preview ============ */
  .posts { background: var(--surface); }
  .posts__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--sp-7); gap: var(--sp-5); flex-wrap: wrap; }
  /* 1pxの隙間で罫のように見せていたが、カードどうしが地続きに見えるため、
     間隔をあけて1枚ずつ独立した箱にする */
  .posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .post { background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; display: block; }
  .post__thumb { aspect-ratio: 4/3; overflow: hidden; position: relative; }
  .post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
  .post:hover .post__thumb img { transform: scale(1.05); }
  .post__idx { position: absolute; top: 0; left: 0; background: var(--blue-deep); color: #fff; font-size: var(--fs-cap); padding: 5px 10px; }
  .post__body { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
  .post__date { font-size: var(--fs-cap); letter-spacing: 0.08em; color: var(--ink-faint); }
  .post__title { margin: var(--sp-2) 0 0; font-size: var(--fs-base); font-weight: 700; line-height: 1.6; color: var(--ink); }
  @media (max-width: 780px) { .posts__grid { grid-template-columns: 1fr; } }

  /* ============ footer ============ */
  /* フッターはいちばん深い海 */
  footer.site {
    position: relative;
    background: var(--sea-900);
    color: rgba(255,255,255,.72);
  }
  footer.site > * { position: relative; z-index: 1; }
  .foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: var(--sp-7); padding: var(--sp-8) 0 var(--sp-6); border-bottom: 1px solid rgba(255,255,255,.20); }
  .foot__brand .brand__ja { color: #fff; }
  .foot__brand .brand__en { color: rgba(255,255,255,.60); }
  .foot__logo { display: block; width: 180px; height: auto; }
  .foot__brand p { margin: var(--sp-5) 0 0; font-size: var(--fs-sm); line-height: 1.9; max-width: 17rem; color: rgba(255,255,255,.68); }
  .foot h4, .foot .foot__ttl { margin: 0 0 var(--sp-5); font-size: var(--fs-cap); letter-spacing: 0.1em; color: var(--sea-200); font-weight: 700; }
  .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
  .foot a { color: rgba(255,255,255,.88); text-decoration: none; font-size: var(--fs-sm); }
  .foot a:hover { color: var(--sea-200); }
  /* 管理画面へのボタン（管理者の端末だけ・コピーライトの上）。
     フッターの案内リンクは控えめな白なので、こちらは枠で囲って押せると分かるようにする */
  .foot__admin { padding: var(--sp-5) 0 0; display: flex; justify-content: center; }
  .foot__admin__btn {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid rgba(255,255,255,.45);
    color: #fff; font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
    transition: background-color .2s, border-color .2s;
  }
  .foot__admin__btn:hover { background: rgba(255,255,255,.14); border-color: #fff; }
  .foot__admin__arrow { transition: transform .2s; }
  .foot__admin__btn:hover .foot__admin__arrow { transform: translateX(3px); }
  .foot__bottom { padding: var(--sp-5) 0 var(--sp-7); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-cap); color: rgba(255,255,255,.60); }
  .foot__bottom a { color: rgba(255,255,255,.60); text-decoration: none; }
  .foot__bottom a:hover { color: rgba(255,255,255,.88); text-decoration: underline; }
  /* SNS。アイコンと名前を並べ、フッターの他のリンクと同じ読み方にする */
  .snslist { display: grid; gap: var(--sp-3); }
  .snslist a { display: inline-flex; align-items: center; gap: 10px; }
  .snslist svg { fill: currentColor; flex: none; opacity: .9; }
  .snslist a:hover svg { opacity: 1; }

  @media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
  /* SPでも2列のままにする。1列に落とすとフッターだけで画面5枚分ほどの長さになるため。
     団体紹介（.foot__brand）だけは横幅いっぱいを使う */
  @media (max-width: 560px) {
    .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-4); padding-top: var(--sp-7); }
    .foot__brand { grid-column: 1 / -1; }
    .foot h4, .foot .foot__ttl { margin-bottom: var(--sp-3); }
  }

  /* ============ page hero（サブページ用の簡易ヒーロー） ============ */
  /* 濃紺ベタ塗りをやめ、うすい青の面に青文字を置く明るい構成に */
  .phero {
    position: relative;
    background: var(--sky-soft);
    overflow: hidden;
    padding: var(--sp-8) 0;
    border-bottom: 1px solid var(--line);
  }
  .phero__scene { display: none; }
  .phero__bigmark { position: absolute; top: -30%; right: -6%; width: 42%; z-index: 1; opacity: .5; }
  .phero__bigmark path { fill: none; stroke: var(--sea-100); stroke-width: 2.4; }
  .phero__in { position: relative; z-index: 2; }
  /* パンくずはページ下部（フッター直前）に置く。
     見出しの前に置くと、本題より先に階層情報を読ませることになるため */
  .crumb { background: var(--surface); border-top: 1px solid var(--line); }
  .crumb__in { padding: var(--sp-4) 0; font-size: var(--fs-cap); color: var(--ink-faint); letter-spacing: 0.04em; }
  .crumb__in a { color: var(--blue); text-decoration: none; }
  .crumb__in a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .phero h1, .phero .phero__ttl { margin: 0; color: var(--ink); font-size: clamp(1.5rem, 4vw, var(--fs-3xl)); font-weight: 700; line-height: 1.4; text-wrap: pretty; letter-spacing: 0.02em; }
  .phero__lead { margin: var(--sp-4) 0 0; color: var(--ink-soft); font-size: var(--fs-base); line-height: 1.9; max-width: 38rem; }

  /* 404（public/404.php）だけ、見出しと本文を中央に置く。
     行き先の案内が無いページなので、左に寄せると文章が宙に浮いて見えるため */
  .phero--center .phero__in { text-align: center; }
  .phero--center .phero__lead { max-width: 30rem; margin-inline: auto; }

  /* ============ timeline（沿革年表） ============ */
  /* 罫線で区切っただけでは「並んだ表」に見えるため、
     年の脇に縦線と節点を通し、上から下へ積み上がってきた歩みとして見せる */
  .timeline { margin-top: var(--sp-7); }
  .tl-row {
    position: relative;
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: var(--sp-6);
    padding: 0 0 var(--sp-7);
  }
  /* 節点をつなぐ縦線。最後の行だけ線を止める */
  .tl-row::before {
    content: "";
    position: absolute;
    left: 127px;
    top: 14px;
    bottom: 0;
    width: 2px;
    background: var(--line-strong);
  }
  .tl-row:last-child::before { display: none; }
  .tl-row:last-child { padding-bottom: 0; }

  /* 節点 */
  .tl-row::after {
    content: "";
    position: absolute;
    left: 121px;
    top: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid var(--blue);
  }
  /* 「今も、毎朝」＝現在地。塗りつぶして到達点だと分かるようにする */
  .tl-row:last-child::after { background: var(--blue); }

  .tl-row__year {
    font-size: var(--fs-lg);
    color: var(--blue);
    text-align: right;
    padding-right: var(--sp-5);
    line-height: 1.2;
  }
  /* 受賞日まで出す行（/achievements/）。年を大きく見せたまま、月日はその下に小さく添える */
  .tl-row__md { display: block; font-size: var(--fs-cap); color: var(--ink-faint); margin-top: 4px; }

  .tl-row__body { padding-left: var(--sp-2); }
  .tl-row__body h3 { margin: 0 0 8px; font-size: var(--fs-md); font-weight: 700; color: var(--ink); line-height: 1.5; }
  .tl-row__body p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.9; max-width: 32rem; }

  @media (max-width: 640px) {
    /* 狭い画面では線を左端に寄せ、年・見出し・本文を縦に積む */
    .tl-row { grid-template-columns: 1fr; gap: var(--sp-2); padding-left: var(--sp-6); padding-bottom: var(--sp-6); }
    .tl-row::before { left: 5px; }
    .tl-row::after { left: 0; }
    .tl-row__year { text-align: left; padding-right: 0; font-size: var(--fs-md); }
    /* 縦積みになるので、月日は年の下ではなく横に置いて1行にまとめる */
    .tl-row__md { display: inline; margin-top: 0; margin-left: 0.4em; }
    .tl-row__body { padding-left: 0; }
  }

  /* ============ note box（注記） ============ */
  .notebox { margin-top: var(--sp-6); padding: var(--sp-5); background: var(--surface-alt); border-left: 3px solid var(--blue); font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.9; }
  .notebox strong { color: var(--ink); }

  /* 本文中のリンク。ボタンにするほどではない文章内の参照 */
  .notebox a,
  .step-row__body a,
  .tl-row__body a,
  .about__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
  .notebox a:hover,
  .step-row__body a:hover,
  .tl-row__body a:hover,
  .about__body a:hover { text-decoration-thickness: 2px; }

  /* ============ alert box（安全に関わる注意） ============ */
  /* けがに直結する内容なので、他の注記より強く見せる。
     海の色からは外し、注意を促す色（--alert）で縁取る */
  .alertbox {
    margin-top: var(--sp-6);
    padding: var(--sp-6);
    background: #FFF8EC;
    border: 1px solid #F0D9A8;
    border-left: 5px solid var(--alert);
  }
  .alertbox__ttl {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--alert);
  }
  /* 感嘆符のしるし */
  .alertbox__ttl::before {
    content: "!";
    flex: none;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--alert);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    display: grid;
    place-items: center;
  }
  .alertbox__body { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.95; }
  .alertbox__body + .alertbox__body { margin-top: var(--sp-4); }

  /* ============ box grid（拾い箱一覧など） ============ */
  .boxgrid { margin-top: var(--sp-7); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  /* 押すと下の地図がその場所へ動く。押せることが分かる見た目にしておく */
  .boxgrid__item {
    position: relative;
    display: block;
    width: 100%;
    background: var(--surface);
    padding: var(--sp-5);
    text-align: center;
    font: inherit;
    color: inherit;
    border: 0;
    cursor: pointer;
    transition: background-color .2s;
  }
  .boxgrid__item:hover { background: var(--sky-soft); }
  .boxgrid__item:hover .ja { text-decoration: underline; text-underline-offset: 3px; }
  .boxgrid__item:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
  /* いま地図に出している場所 */
  .boxgrid__item.is-current { background: var(--sky-soft); box-shadow: inset 0 0 0 2px var(--blue); }
  .boxgrid__item.is-current .boxgrid__pin { background: var(--blue); }
  /* 右上に小さなピン。地図が開くという合図 */
  .boxgrid__pin {
    position: absolute; top: 10px; right: 10px;
    width: 9px; height: 9px; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid var(--blue);
  }
  .boxgrid__item .ja { display: block; font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
  .boxgrid__item .yn { display: block; margin-top: 6px; font-size: var(--fs-cap); color: var(--blue); letter-spacing: 0.04em; }
  @media (max-width: 780px) { .boxgrid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 420px) { .boxgrid { grid-template-columns: 1fr; } }

  /* 写真つき（漂着ごみの種類）。押せる一覧ではないので、
     指の形にはせず、触れたときの色変わりもしない */
  .boxgrid--photo .boxgrid__item {
    margin: 0;
    padding: 0;
    cursor: auto;
    display: flex;
    flex-direction: column;
  }
  .boxgrid--photo .boxgrid__item:hover { background: var(--surface); }
  .boxgrid--photo .boxgrid__item:hover .ja { text-decoration: none; }
  .boxgrid__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--sky-soft);
    border-bottom: 1px solid var(--line);
  }
  /* 品名は写真の下に。1行の品名と2行の品名が混ざるので、
     区分（--yn）は下端にそろえて、写真の高さがずれないようにする */
  .boxgrid__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
  }
  .boxgrid--photo .yn { margin-top: auto; padding-top: 6px; }
  /* 写真が入るぶん、いちばん狭い画面でも2列のままにする（1列だと写真が大きすぎる） */
  @media (max-width: 420px) {
    .boxgrid--photo { grid-template-columns: repeat(2, 1fr); }
    .boxgrid__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
  }

  /* ============ place pick（地名と地図を横に並べる） ============ */
  /* 地図が地名の下にあると、押した結果が画面の外で起きるため、
     「押しても何も変わらない」ように見えてしまう。地名の右に地図を置き、
     切り替わるところをその場で目で追えるようにする。
     縦に積む幅（780px以下）では地名・地図それぞれ元の見た目のままなので、
     指定はこの min-width の中だけに閉じる */
  @media (min-width: 781px) {
    .placepick {
      margin-top: var(--sp-7);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      gap: var(--sp-6);
      align-items: start;
    }
    /* 使える幅が半分になるので、地名は2列に折る（8箇所＝4段） */
    .placepick .boxgrid { margin-top: 0; grid-template-columns: repeat(2, 1fr); }
    .placepick .mapembed { margin: 0; }
    /* 地名4段ぶんの高さに近づける。16:9 のままだと地図だけが低く、右が余る */
    .placepick .mapembed iframe { aspect-ratio: 4 / 3; }
  }

  /* 地図の埋め込み。読み込みは画面に近づいてから（iframe の loading="lazy"）なので、
     ページを開いた時点では取りに行かない */
  .mapembed { margin: var(--sp-6) 0 0; }
  .mapembed iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    background: var(--sky-soft);
  }
  .mapembed__reset {
    margin-top: var(--sp-3);
    padding: 6px 14px;
    font: inherit;
    font-size: var(--fs-cap);
    color: var(--blue);
    background: none;
    border: 1px solid var(--line-strong);
    cursor: pointer;
  }
  .mapembed__reset:hover { background: var(--sky-soft); border-color: var(--blue); }
  .mapembed figcaption {
    margin-top: var(--sp-3);
    font-size: var(--fs-cap);
    color: var(--ink-faint);
    line-height: 1.8;
  }
  @media (max-width: 560px) {
    .mapembed iframe { aspect-ratio: 4 / 3; }
  }

  /* ============ debris（漂着ごみを知る） ============ */
  /* 拾っているごみの量や中身を、数字と実物で示す枠。
     数量は団体の集計待ちのため、値が入っていない状態でも
     「何を載せる場所か」が分かる見た目にしておく */
  .datarow {
    margin-top: var(--sp-7);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
  }
  .datacard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--blue);
    padding: var(--sp-6);
  }
  .datacard__label { display: block; font-size: var(--fs-cap); font-weight: 700; color: var(--blue); letter-spacing: 0.06em; }
  .datacard__value {
    display: block;
    margin-top: var(--sp-3);
    font-size: var(--fs-2xl);
    color: var(--blue);
    line-height: 1;
  }
  .datacard__unit { font-size: var(--fs-md); margin-left: 2px; }
  .datacard__note { display: block; margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.9; }

  /* 数値がまだ確定していないカード */
  .datacard--pending {
    border-top-color: var(--line-strong);
    background: repeating-linear-gradient(135deg, var(--sky-soft), var(--sky-soft) 10px, var(--surface) 10px, var(--surface) 20px);
  }
  .datacard--pending .datacard__label { color: var(--ink-faint); }
  .datacard--pending .datacard__value { font-size: var(--fs-lg); color: var(--ink-faint); letter-spacing: 0.08em; }
  @media (max-width: 780px) { .datarow { grid-template-columns: 1fr; } }

  /* 意外なものまで届く */
  /* 枚数が変わっても右端が空かないよう、列は入る数だけ作る（3枚なら3列、2枚なら2列） */
  .oddgrid { margin-top: var(--sp-7); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); }
  .oddcard { margin: 0; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
  .oddcard__media { aspect-ratio: 4/3; overflow: hidden; }
  .oddcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .oddcard__media--dummy {
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: repeating-linear-gradient(135deg, var(--sky-soft), var(--sky-soft) 10px, var(--surface) 10px, var(--surface) 20px);
    border-bottom: 1px solid var(--line);
  }
  .oddcard__media--dummy span { font-size: var(--fs-sm); color: var(--ink-faint); line-height: 1.9; padding: 0 var(--sp-4); }
  .oddcard__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
  .oddcard__tag {
    display: inline-block; margin: 0;
    font-size: var(--fs-cap); font-weight: 700; letter-spacing: 0.06em;
    color: var(--blue); border: 1px solid var(--blue); padding: 2px 10px;
  }
  .oddcard__ttl { margin: var(--sp-4) 0 var(--sp-3); font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
  .oddcard__text { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.9; }
  @media (max-width: 860px) { .oddgrid { grid-template-columns: 1fr; } }

  /* 引用（発言をそのまま見せる） */
  .pullquote {
    margin: var(--sp-7) 0 0;
    padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-7);
    border-left: 3px solid var(--blue);
    background: var(--surface-alt);
  }
  .pullquote p { margin: 0; font-size: var(--fs-lg); line-height: 1.9; color: var(--ink); font-weight: 700; }
  .pullquote cite { display: block; margin-top: var(--sp-4); font-size: var(--fs-sm); font-style: normal; color: var(--ink-faint); }

  /* ============ text section ============ */
  /* 長文を横2カラムに割ると視線が往復して読みにくいため、縦積みに統一する。
     読み幅は 31rem 程度に制限して1行が長くなりすぎないようにする */
  /* 2つの話を並べる節。1列だと右が大きく空いて、行も長くなりすぎる */
  .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-9); }
  .split > div { max-width: 31rem; }
  /* 見出しの上に細い罫を引いて、2つが並んでいることを形でも示す */
  .split > div > h2.sec { padding-top: var(--sp-5); border-top: 2px solid var(--blue); }
  @media (max-width: 900px) {
    .split { grid-template-columns: 1fr; gap: var(--sp-7); }
    .split > div { max-width: none; }
  }

  /* ============ text + media（本文の横に写真を置く） ============ */
  /* 本文だけだと右側が大きく空いて間が抜けるため、写真を並べて紙面を埋める */
  .textmedia { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-8); align-items: start; }
  .textmedia__body > .about__body:first-of-type { margin-top: var(--sp-5); }
  .textmedia__media { aspect-ratio: 4/5; overflow: hidden; background: var(--sky-soft); }
  .textmedia__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .textmedia__media--dummy {
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: repeating-linear-gradient(135deg, var(--sky-soft), var(--sky-soft) 10px, var(--surface) 10px, var(--surface) 20px);
    border: 1px solid var(--line);
  }
  .textmedia__media--dummy span { font-size: var(--fs-sm); color: var(--ink-faint); line-height: 1.9; padding: 0 var(--sp-4); }
  /* 本文が数行しかない節に使う。たて長（4:5）だと写真だけが下へ伸びて、
     左の文章と釣り合わなくなるため、横長にして高さを近づける */
  .textmedia__media--wide { aspect-ratio: 4/3; }
  /* 交互に配置して、続けて並んでも単調にならないようにする */
  .textmedia--rev .textmedia__body { grid-column: 2; grid-row: 1; }
  .textmedia--rev .textmedia__media { grid-column: 1; grid-row: 1; }
  @media (max-width: 860px) {
    .textmedia { grid-template-columns: 1fr; gap: var(--sp-6); }
    .textmedia--rev .textmedia__body,
    .textmedia--rev .textmedia__media { grid-column: 1; grid-row: auto; }
    .textmedia__media { aspect-ratio: 16/9; }
  }

  /* ============ summary（概要表） ============ */
  /* 手順を読む前に、時刻・場所・持ち物といった要点を先に押さえられるようにする */
  .summary {
    margin: var(--sp-6) 0 0;
    max-width: 640px;
    border-top: 1px solid var(--line);
  }
  .summary__row {
    display: grid;
    grid-template-columns: 9em 1fr;
    gap: var(--sp-5);
    align-items: baseline;
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--line);
    margin: 0;
  }
  .summary__row dt { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--blue); }
  .summary__row dd { margin: 0; font-size: var(--fs-base); color: var(--ink); line-height: 1.7; }
  .summary__row dd .num { font-size: var(--fs-md); color: var(--blue); }
  /* 値のすぐ下に添える補足（「季節によって変わります」など） */
  .summary__note { display: block; margin-top: 4px; font-size: var(--fs-cap); color: var(--ink-faint); line-height: 1.7; }
  .summary__note .num { font-size: inherit; color: inherit; }
  @media (max-width: 560px) {
    .summary__row { grid-template-columns: 1fr; gap: var(--sp-1); }
  }

  .seasontable { width: 100%; max-width: 30em; margin: var(--sp-5) 0 0; border-collapse: collapse; }
  .seasontable caption { text-align: left; font-size: var(--fs-sm); font-weight: 700; color: var(--blue); margin-bottom: var(--sp-2); }
  .seasontable th,
  .seasontable td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); font-size: var(--fs-cap); text-align: left; }
  .seasontable thead th { color: var(--ink-faint); font-weight: 700; background: var(--surface-alt); }
  .seasontable tbody th { color: var(--ink); font-weight: 700; white-space: nowrap; }
  .seasontable tbody td { color: var(--ink); font-weight: 700; }
  .seasontable__note { margin: var(--sp-2) 0 0; font-size: var(--fs-cap); color: var(--ink-faint); }

  /* ============ step list（活動の流れ・詳細版） ============ */
  /* 写真は「添え物のサムネイル」ではなく主役として大きく見せる。
     左右交互だと視線が往復して手順が追いづらいので、写真は常に左・本文は常に右に固定し、
     上から下へまっすぐ読めるようにする */
  .steplist { margin-top: var(--sp-7); display: grid; gap: var(--sp-7); }
  .step-row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sp-7);
    align-items: center;
    padding-top: var(--sp-7);
    border-top: 1px solid var(--line);
  }
  .step-row:first-child { padding-top: 0; border-top: none; }

  /* 手順の途中に挟む注意書き。間隔は steplist の gap で足りるので、notebox 側の余白は消す */
  .steplist > .notebox { margin-top: 0; }

  .step-row__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--surface-alt); }
  .step-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .step-row__media--dummy {
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: repeating-linear-gradient(135deg, var(--sky-soft), var(--sky-soft) 10px, var(--surface) 10px, var(--surface) 20px);
    border: 1px solid var(--line);
  }
  .step-row__media--dummy span { font-size: var(--fs-sm); color: var(--ink-faint); padding: 0 var(--sp-3); }
  .step-row__num {
    position: absolute; top: 0; left: 0;
    background: var(--blue); color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: var(--fs-lg); line-height: 1;
    padding: 12px 20px;
    letter-spacing: 0.04em;
  }

  .step-row__body h3 {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--blue);
    line-height: 1.4;
  }
  .step-row__body p { margin: 0; color: var(--ink-soft); line-height: 2; font-size: var(--fs-base); max-width: 26rem; }
  .step-row__body p + p { margin-top: var(--sp-4); }
  .step-row__note { font-size: var(--fs-sm) !important; color: var(--ink-faint) !important; }
  @media (max-width: 780px) {
    .step-row { grid-template-columns: 1fr; gap: var(--sp-5); }
    .step-row__body p { max-width: none; }
  }

  /* ============ movie（紹介動画のカード） ============ */
  /* 実際の再生はモーダル側。ここはサムネイルと再生ボタンだけを見せる */
  .moviecard {
    margin-top: var(--sp-6);
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 0;
    width: 100%;
    max-width: 1000px;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--surface);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow .3s, transform .3s cubic-bezier(.2,.7,.3,1);
  }
  .moviecard:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(24,48,88,.20); }
  .moviecard:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

  .moviecard__thumb { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--blue-deepest); }
  .moviecard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
  .moviecard:hover .moviecard__thumb img { transform: scale(1.04); }

  /* 再生ボタン */
  .moviecard__play {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 84px; height: 84px;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    box-shadow: 0 6px 24px rgba(14,30,62,.35);
    transition: transform .3s cubic-bezier(.2,.7,.3,1), background .3s;
  }
  .moviecard__play::after {
    content: "";
    position: absolute;
    left: 54%; top: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 13px 0 13px 22px;
    border-color: transparent transparent transparent var(--blue);
  }
  .moviecard:hover .moviecard__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }

  .moviecard__meta { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); padding: var(--sp-6); }
  .moviecard__label { font-size: var(--fs-cap); font-weight: 700; letter-spacing: 0.12em; color: var(--blue-deep); }
  /* 語中で1文字だけ次の行に落ちないよう、文節で折り返す */
  .moviecard__title { font-size: var(--fs-md); font-weight: 700; line-height: 1.7; color: var(--ink); word-break: auto-phrase; }
  .moviecard__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; color: var(--blue-deep); }
  .moviecard:hover .btn__arrow { transform: translateX(4px); }

  @media (max-width: 780px) {
    .moviecard { grid-template-columns: 1fr; }
    .moviecard__meta { padding: var(--sp-5); }
    .moviecard__play { width: 64px; height: 64px; }
    .moviecard__play::after { border-width: 10px 0 10px 17px; }
  }

  /* ============ video modal（動画のモーダル再生） ============ */
  .videomodal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; }
  /* display:flex は [hidden] の display:none に勝つため、明示的に打ち消す */
  .videomodal[hidden] { display: none; }
  .videomodal__backdrop {
    position: absolute; inset: 0;
    background: rgba(14,30,62,.88);
    opacity: 0;
    transition: opacity .3s ease;
  }
  .videomodal__panel {
    position: relative;
    width: min(1200px, 92vw);
    opacity: 0;
    transform: translateY(12px) scale(.98);
    transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .videomodal.is-open .videomodal__backdrop { opacity: 1; }
  .videomodal.is-open .videomodal__panel { opacity: 1; transform: none; }

  .videomodal__frame { aspect-ratio: 16/9; background: #000; }
  .videomodal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

  .videomodal__close {
    position: absolute;
    top: -52px; right: 0;
    width: 40px; height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .videomodal__close::before,
  .videomodal__close::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 28px; height: 2px;
    background: #fff;
  }
  .videomodal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .videomodal__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
  .videomodal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* モーダル表示中は背後をスクロールさせない */
  body.is-modal { overflow: hidden; }

  @media (max-width: 640px) {
    .videomodal__close { top: -46px; }
  }

  /* ============ news brief（トップのお知らせ） ============ */
  /* 日付・カテゴリ・タイトルを列で揃える。文章として続けて書くと
     日付の桁数の違いでタイトルの開始位置が行ごとにずれてしまうため */
  .newsbrief { list-style: none; margin: var(--sp-6) 0 0; padding: 0; border-top: 1px solid var(--line); }
  .newsbrief li { border-bottom: 1px solid var(--line); }
  .newsbrief a {
    display: grid;
    grid-template-columns: 7.5em 8em 1fr;
    align-items: baseline;
    gap: var(--sp-4);
    padding: var(--sp-5) 0;
    text-decoration: none;
    color: inherit;
  }
  .newsbrief__date { font-size: var(--fs-sm); color: var(--ink-faint); letter-spacing: 0.06em; }
  .newsbrief__cat {
    justify-self: start;
    font-size: var(--fs-cap);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--blue);
    border: 1px solid var(--blue);
    padding: 2px 10px;
  }
  .newsbrief__title { font-size: var(--fs-base); font-weight: 700; color: var(--ink); line-height: 1.7; }
  .newsbrief a:hover .newsbrief__title { color: var(--blue); }
  @media (max-width: 640px) {
    /* 狭い画面では列を保てないので、日付とカテゴリを1行にまとめて縦積みにする */
    .newsbrief a { grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-4); }
    .newsbrief__title { grid-column: 1 / -1; }
  }

  /* ============ news（お知らせ一覧・詳細） ============ */
  .newslist { margin-top: var(--sp-7); display: grid; }
  .newsitem {
    display: block;
    padding: var(--sp-6) 0;
    border-top: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
  }
  .newsitem:last-child { border-bottom: 1px solid var(--line); }

  .newsitem__meta { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-3); }
  .newsitem__date { font-size: var(--fs-sm); color: var(--ink-faint); letter-spacing: 0.06em; }
  .newsitem__cat {
    font-size: var(--fs-cap);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--blue);
    border: 1px solid var(--blue);
    padding: 2px 10px;
  }
  .newsitem__title { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); font-weight: 700; line-height: 1.6; color: var(--ink); }
  .newsitem:hover .newsitem__title { color: var(--blue); }
  .newsitem__lead { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.9; max-width: 34rem; }
  .newsitem__more {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: var(--sp-4);
    font-size: var(--fs-sm); font-weight: 700; color: var(--blue);
  }
  .newsitem:hover .btn__arrow { transform: translateX(4px); }

  /* 詳細ページ。読み物なので幅を絞る */
  .newsdetail { max-width: 800px; }
  /* 記事のタイトルは色を付けず、本文と同じ濃さにする（h2.sec の差し色を打ち消す） */
  .newsdetail__title { margin: 0 0 var(--sp-6); font-size: clamp(1.25rem, 2.8vw, var(--fs-xl)); line-height: 1.6; color: var(--ink); }
  .newsbody { border-top: 1px solid var(--line); padding-top: var(--sp-6); }
  .newsbody__p { margin: 0; font-size: var(--fs-base); color: var(--ink-soft); line-height: 2.1; }
  .newsbody__p + .newsbody__p { margin-top: var(--sp-5); }

  /* 掲載元は本文末に1行だけ。カードにすると本文より目立ってしまう */
  .newsbody__src { margin: var(--sp-6) 0 0; }
  .newsbody__src a {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--fs-sm); font-weight: 700; color: var(--blue);
    text-decoration: none;
  }
  .newsbody__src a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .newsbody__src a:hover .btn__arrow { transform: translateX(4px); }

  /* 前後のお知らせ（.newsnav）は、一覧へ戻ってもらう導線に一本化したため廃止 */

  .newsdetail__back { margin-top: var(--sp-7); display: flex; justify-content: center; }

  /* ============ shore list（活動場所の一覧） ============ */
  /* 数があるので、淡々と並べるより多列に敷き詰めたほうが
     「これだけの数を巡っている」ことが伝わる。
     並びそのものが巡回順なので番号は振らず、頭の印は中点にしている */
  /* 左に一覧、右に地図。名前と位置を見比べながら読める並びにする。
     地図は一覧を追っているあいだも見えていてほしいので、右の列で貼り付けたままにする
     （ヘッダーが sticky で上に居座るので、その高さぶん下げる） */
  .shoremap {
    margin-top: var(--sp-6);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }
  .shoremap__map { position: sticky; top: 6.5rem; }
  .shoremap .shorelist { margin-top: 0; }
  .shoremap .mapembed { margin-top: 0; }
  /* 一覧と高さが釣り合うよう、16:9 より縦を持たせる */
  .shoremap .mapembed iframe { aspect-ratio: 4 / 3; }
  /* 列が狭いぶん、一覧は2列に固定する（自動計算だと1列に落ちて縦に伸びすぎる） */
  .shoremap .shorelist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 横に2列ぶんの幅が取れなくなったら、一覧の下に地図を敷く縦積みに戻す */
  @media (max-width: 900px) {
    .shoremap { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
    .shoremap__map { position: static; }
    .shoremap .mapembed iframe { aspect-ratio: 16 / 9; }
  }
  /* 幅の狭い端末では、2列だと1マスが約139pxしか取れず、
     「35.むりさんばま海岸」のような長い地点名が収まらない。1列に落とす */
  @media (max-width: 560px) {
    .shoremap .shorelist__grid { grid-template-columns: minmax(0, 1fr); }
  }

  .shorelist { margin-top: var(--sp-6); }
  .shorelist__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  .shore__cell { display: flex; }
  .shore {
    background: var(--surface);
    display: flex;
    /* 中点は文字ではないのでベースラインを持たない。上ぞろえにして印の側を1行目に合わせる */
    align-items: flex-start;
    gap: var(--sp-3);
    padding: 10px var(--sp-4);
    /* ボタンの既定の見た目を消して、一覧のマスとして並べる */
    width: 100%;
    margin: 0;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .shore:hover { background: var(--sea-50); }
  .shore:focus-visible { outline: 2px solid var(--sea-500); outline-offset: -2px; }
  /* 右の地図が今どれを映しているか。一覧が長いので、色だけでなく番号側も濃くする */
  .shore.is-current { background: var(--sea-100); }
  /* 頭の中点。今どこを地図に出しているかも、この印で示す */
  .shore__dot {
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 0.55em;
    border-radius: 50%;
    background: var(--sea-300);
    transition: background .2s, transform .2s;
  }
  .shore:hover .shore__dot { background: var(--sea-500); }
  .shore.is-current .shore__dot { background: var(--accent); transform: scale(1.5); }
  @media (prefers-reduced-motion: reduce) { .shore__dot { transition: none; } }
  /* 地名は「（オランダ・／イョー）」のように途中で切れると読めなくなるので、
     1つのかたまりとして扱う（中黒でも切らない）。
     入りきらないときだけ、はみ出さないよう折り返す */
  .shore__name {
    font-size: var(--fs-sm);
    color: var(--ink);
    font-weight: 500;
    white-space: nowrap;
    overflow-wrap: anywhere;
    min-width: 0;
  }
  /* 狭い端末では1マスの幅が足りない。中黒でも切らない扱いを解いて折り返させる */
  @media (max-width: 560px) {
    .shore__name { white-space: normal; }
  }
  /* 一般の地名（漢字）が巡回集合場所に入っている海岸だけ、呼び名に添える。
     主役は呼び名なので、一段落とした色と大きさにする */
  .shore__ja { margin-left: 6px; font-size: var(--fs-cap); font-weight: 400; color: var(--ink-faint); }
  .shore__ja::before { content: "（"; }
  .shore__ja::after { content: "）"; }
  .shorelist__src { margin: var(--sp-4) 0 0; font-size: var(--fs-cap); color: var(--ink-faint); }
  @media (max-width: 480px) { .shorelist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* 画面には出さず、読み上げにだけ残す文言（記事の読み込み状況など） */
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ============ skip link（本文へスキップ） ============ */
  /* ふだんは画面の外に出しておき、Tabでたどり着いたときだけ左上に現れる。
     メニューを毎ページ読み飛ばせるようにするためのもので、
     マウスで見ている人の画面には出ない */
  .skiplink {
    position: fixed;
    top: 0; left: 0;
    z-index: 200;
    transform: translateY(-120%);
    padding: var(--sp-3) var(--sp-5);
    background: var(--sea-900);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 0;
  }
  .skiplink:focus-visible {
    transform: translateY(0);
    outline: 3px solid var(--accent-soft);
    outline-offset: -3px;
  }

  /* ============ post list（ブログ形式の記事一覧） ============ */
  /* カードを並べるより、日付・見出し・抜粋が縦に読めるブログ形式のほうが
     「毎朝の記録」という中身に合う */
  .postlist { margin-top: var(--sp-7); display: grid; }
  .postitem {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--sp-6);
    padding: var(--sp-6) 0;
    border-top: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    align-items: start;
  }
  .postitem:last-child { border-bottom: 1px solid var(--line); }

  .postitem__thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--sky-soft); }
  .postitem__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
  .postitem:hover .postitem__thumb img { transform: scale(1.05); }

  .postitem__meta { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-3); }
  .postitem__date { font-size: var(--fs-sm); color: var(--ink-faint); letter-spacing: 0.06em; }
  .postitem__tag {
    font-size: var(--fs-cap);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--blue);
    border: 1px solid var(--blue);
    padding: 2px 10px;
  }
  .postitem__title {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.5;
    color: var(--ink);
  }
  .postitem:hover .postitem__title { color: var(--blue); }
  .postitem__excerpt { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.9; max-width: 31rem; }
  .postitem__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--blue);
  }
  .postitem:hover .btn__arrow { transform: translateX(4px); }

  .postlist__foot { margin-top: var(--sp-7); }

  /* 記事がまだ無いときの案内 */
  .postlist__error { margin: var(--sp-6) 0 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.9; }
  .postlist__error a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
  /* 以前の記録が残っているブログへの案内。記事そのものではないので小さく添える */
  .postlist__src { margin: var(--sp-5) 0 0; font-size: var(--fs-cap); color: var(--ink-faint); }
  .postlist__src a { color: var(--blue); }

  @media (max-width: 780px) {
    .postitem { grid-template-columns: 1fr; gap: var(--sp-4); }
    .postitem__excerpt { max-width: none; }
  }

  /* 写真の無い日。枠だけ残すと「壊れた」ように見えるので、サイトの印を淡く置く */
  .postitem--nothumb .postitem__thumb,
  .post--nothumb .post__thumb {
    background: var(--sky-soft) url("/images/site-mark.webp") center / 56px auto no-repeat;
  }
  /* 活動風景が複数あるときは、枚数を写真の隅に添える */
  .postitem__thumb { position: relative; }
  .postitem__count {
    position: absolute; right: 8px; bottom: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    font-size: var(--fs-cap);
    color: #fff;
    background: rgba(31,63,115,.82);
    border-radius: 2px;
  }
  .postitem__count::before {
    content: "";
    width: 11px; height: 9px;
    border: 1.5px solid currentColor;
    border-radius: 1px;
    box-shadow: 2px -2px 0 -0.5px rgba(255,255,255,.6);
  }

  /* ---- 詳細ページ（/posts/<スラッグ>） ---- */
  .postdetail { max-width: 800px; }
  .postdetail__title { margin: 0 0 var(--sp-6); font-size: clamp(1.25rem, 2.8vw, var(--fs-xl)); line-height: 1.6; color: var(--ink); }

  /* 本文。管理画面のリッチテキストが吐くHTML（p / h1〜h4 / ul / img / a など）の見た目 */
  .postbody { border-top: 1px solid var(--line); padding-top: var(--sp-6); font-size: var(--fs-base); color: var(--ink-soft); line-height: 2.1; }
  .postbody > :first-child { margin-top: 0; }
  .postbody p { margin: 0 0 var(--sp-5); }
  .postbody h1, .postbody h2, .postbody h3, .postbody h4 { margin: var(--sp-7) 0 var(--sp-4); color: var(--ink); line-height: 1.5; font-weight: 700; }
  .postbody h1 { font-size: var(--fs-lg); }
  .postbody h2 { font-size: var(--fs-lg); padding-left: var(--sp-4); border-left: 4px solid var(--blue); }
  .postbody h3 { font-size: var(--fs-md); }
  .postbody h4 { font-size: var(--fs-base); }
  .postbody ul, .postbody ol { margin: 0 0 var(--sp-5); padding-left: 1.6em; }
  .postbody li { margin: 0 0 var(--sp-2); }
  .postbody a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
  .postbody img { margin: var(--sp-5) auto; height: auto; }
  .postbody blockquote { margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); border-left: 4px solid var(--line-strong); background: var(--sky-soft); }
  .postbody hr { margin: var(--sp-6) 0; border: 0; border-top: 1px solid var(--line); }
  .postbody > :last-child { margin-bottom: 0; }

  /* 活動場所。本文と同じ文字組みで、見出しと項目の並びだけで静かに出す（枠・地図は置かない） */
  .postplace { margin: var(--sp-6) 0 0; padding: var(--sp-5) 0 var(--sp-6); border-top: 1px solid var(--line); }
  .postplace__title { margin: 0 0 var(--sp-3); font-size: var(--fs-cap); font-weight: 700; letter-spacing: 0.12em; color: var(--ink-faint); }
  .postplace__name { margin: 0 0 var(--sp-3); font-size: var(--fs-md); font-weight: 700; line-height: 1.5; color: var(--ink); }
  .postplace__name small { font-size: var(--fs-cap); font-weight: 400; color: var(--ink-faint); margin-left: 4px; }
  .postplace__off { margin-left: var(--sp-3); font-size: var(--fs-cap); font-weight: 700; color: var(--alert); }
  .postplace__list { margin: 0; display: grid; gap: var(--sp-2); }
  .postplace__row { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: var(--sp-3); font-size: var(--fs-sm); line-height: 1.9; }
  .postplace__row dt { margin: 0; color: var(--ink-faint); font-weight: 400; }
  .postplace__row dd { margin: 0; color: var(--ink-soft); }
  .postplace__links { margin: var(--sp-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
  .postplace__links a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-cap); font-weight: 700; color: var(--blue); text-decoration: none; }
  .postplace__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .postplace__links a:hover .btn__arrow { transform: translateX(4px); }
  @media (max-width: 780px) {
    .postplace__row { grid-template-columns: 5em minmax(0, 1fr); }
  }

  /* 活動風景。写真そのものを見てもらう場なので、キャプションは控えめに */
  .postgallery { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
  .postgallery__title { margin: 0 0 var(--sp-5); font-size: var(--fs-md); font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: var(--sp-3); }
  .postgallery__title::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--blue); border-radius: 2px; box-shadow: 3px -3px 0 -1px var(--blue-bright); }
  /* 列は minmax(0, 1fr)。既定の 1fr（＝minmax(auto, 1fr)）だと、説明に切れ目のない
     長い文字列（ddddd… やURL）が入ったとき、その列だけが中身の幅まで広がって並びが崩れる */
  .postgallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
  .postgallery__item { margin: 0; }
  .postgallery__btn {
    display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
    background: var(--sky-soft); aspect-ratio: 4/3; overflow: hidden;
  }
  .postgallery__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
  .postgallery__btn:hover img, .postgallery__btn:focus-visible img { transform: scale(1.05); }
  .postgallery__btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
  /* 説明は字数を止めてあるが（PostRepository::MAX_IMAGE_ALT_LENGTH）、
     切れ目のない100文字は1行に収まらないので、どこでも折り返してよいことにする */
  .postgallery__cap { margin: var(--sp-2) 0 0; font-size: var(--fs-cap); color: var(--ink-faint); line-height: 1.7; overflow-wrap: anywhere; }
  /* 1枚だけの日は大きく見せる */
  .postgallery__grid:has(> :only-child) { grid-template-columns: minmax(0, 640px); }
  .postgallery__num { margin-left: var(--sp-2); font-size: var(--fs-cap); font-weight: 400; color: var(--ink-faint); }
  /* 畳んでいる間は2段目まで（PCは3列×2段＝6枚）。残りは「もっと見る」で開く（js/gallery.js） */
  .postgallery__grid.is-collapsed > .postgallery__item:nth-child(n+7) { display: none; }
  .postgallery__morewrap { margin: var(--sp-4) 0 0; display: flex; justify-content: center; }
  .postgallery__more {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px;
    font-size: var(--fs-sm); font-weight: 700; color: var(--blue);
    background: var(--surface); border: 1px solid var(--blue); cursor: pointer;
  }
  .postgallery__more:hover { background: var(--sky-soft); }
  .postgallery__more-arrow {
    width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform .2s;
  }
  .postgallery__more[aria-expanded="true"] .postgallery__more-arrow { transform: translateY(2px) rotate(-135deg); }
  /* PCでは6枚までなら全部見えているので、ボタンは要らない */
  @media (min-width: 781px) {
    .postgallery[data-gallery-count="5"] .postgallery__morewrap,
    .postgallery[data-gallery-count="6"] .postgallery__morewrap { display: none; }
  }
  @media (max-width: 780px) {
    .postgallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
    /* スマホは2列×2段＝4枚 */
    .postgallery__grid.is-collapsed > .postgallery__item:nth-child(n+5) { display: none; }
  }

  /* 前の記録・次の記録 */
  .postnav { margin-top: var(--sp-7); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-5); }
  .postnav__link { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; min-width: 0; }
  .postnav__link--newer { text-align: right; align-items: flex-end; }
  .postnav__dir { font-size: var(--fs-cap); font-weight: 700; color: var(--blue); }
  .postnav__date { font-size: var(--fs-cap); color: var(--ink-faint); letter-spacing: .06em; }
  .postnav__ttl { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .postnav__link:hover .postnav__ttl { color: var(--blue); }

  /* ページ送り（一覧） */
  .pager { margin-top: var(--sp-7); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
  .pager__link { font-size: var(--fs-sm); font-weight: 700; color: var(--blue); text-decoration: none; }
  .pager__link:hover { text-decoration: underline; text-underline-offset: 4px; }
  .pager__link.is-disabled { color: var(--ink-faint); opacity: .5; }
  .pager__pages { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-2); }
  .pager__num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.4em; height: 2.4em; padding: 0 .5em;
    font-size: var(--fs-sm); color: var(--ink); text-decoration: none;
    border: 1px solid var(--line);
  }
  .pager__num:hover { border-color: var(--blue); color: var(--blue); }
  .pager__num.is-current { background: var(--blue); border-color: var(--blue); color: #fff; }
  .pager__ellipsis { display: inline-flex; align-items: center; color: var(--ink-faint); padding: 0 .3em; }
  @media (max-width: 600px) {
    .pager { justify-content: center; }
    .pager__pages { order: 3; width: 100%; justify-content: center; }
  }

  /* 活動風景を大きく見る（js/gallery.js）。動かないときは並んだ写真のままでよい */
  .lightbox {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-5);
    background: rgba(12, 20, 32, .92);
  }
  .lightbox[hidden] { display: none; }
  .lightbox__fig { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
  .lightbox__img { max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
  .lightbox__cap { margin: 0; color: #fff; font-size: var(--fs-sm); text-align: center; line-height: 1.7; overflow-wrap: anywhere; }
  .lightbox__cnt { color: rgba(255,255,255,.7); font-size: var(--fs-cap); letter-spacing: .08em; }
  .lightbox__btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff; font-size: 1.4rem; line-height: 1;
    cursor: pointer;
  }
  .lightbox__btn:hover, .lightbox__btn:focus-visible { background: rgba(255,255,255,.28); }
  .lightbox__btn--prev { left: var(--sp-4); }
  .lightbox__btn--next { right: var(--sp-4); }
  .lightbox__btn--close { top: var(--sp-4); right: var(--sp-4); transform: none; }
  .lightbox__btn[disabled] { opacity: .25; cursor: default; }
  @media (max-width: 780px) {
    .lightbox { padding: var(--sp-6) var(--sp-3); }
    .lightbox__btn { width: 40px; height: 40px; font-size: 1.1rem; }
    .lightbox__btn--prev { left: var(--sp-2); }
    .lightbox__btn--next { right: var(--sp-2); }
  }

  /* ============ photo grid（浜の記録写真） ============ */
  .photogrid { margin-top: var(--sp-7); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .photogrid figure { margin: 0; background: var(--surface); }
  .photogrid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
  .photogrid figcaption { padding: var(--sp-4); font-size: var(--fs-cap); color: var(--ink-soft); }
  @media (max-width: 780px) { .photogrid { grid-template-columns: 1fr; } }

  /* ============ checklist（持ち物・注意点） ============ */
  .checklist { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .checklist li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.7; }
  .checklist li::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; margin-top: 8px; background: var(--blue); }
  .checklist li strong { display: block; color: var(--ink); font-weight: 700; margin-bottom: 2px; }
  /* 項目ごとの行き先。本文に続けて書くと文中リンクに埋もれるので、行を分けて並べる */
  .checklist__links { display: block; margin-top: var(--sp-3); font-size: var(--fs-cap); line-height: 1.7; }
  .checklist__links a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
  .checklist__links a:hover { text-decoration-thickness: 2px; }
  .checklist__links .sep { margin: 0 6px; color: var(--ink-faint); }
  @media (max-width: 640px) { .checklist { grid-template-columns: 1fr; } }

  /* アイコン付き（持ち物・服装）。点の代わりに絵を置く。
     絵は要素の意味を持たないので alt="" のまま、文字だけで通じる並びは崩さない */
  .checklist--icon li { align-items: center; gap: var(--sp-4); }
  .checklist--icon li::before { display: none; }
  .checklist__icon { width: 76px; height: 76px; flex-shrink: 0; display: block; }
  @media (max-width: 560px) { .checklist__icon { width: 60px; height: 60px; } }

  /* ============ よくある質問（Q&A） ============ */
  /* 参加前の細かい不安は、本文に混ぜるより1問1答で並べたほうが探しやすい。
     開閉させず全部出す（ページ内検索でも印刷でも読めるようにするため） */
  .qa { margin: var(--sp-6) 0 0; border-top: 1px solid var(--line); }
  .qa__item { padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); }
  /* Q / A のしるしは絶対配置で置く。flex で横に並べると、答えの中のリンクが
     別の「箱」として扱われ、文章が途中で切れて段組みのように崩れる */
  .qa__q,
  .qa__a { position: relative; margin: 0; padding-left: 2.2em; }
  .qa__q::before,
  .qa__a::before {
    position: absolute;
    left: 0;
    top: 0;
    font-family: "Oswald", sans-serif;
    font-size: var(--fs-lg);
    line-height: 1.3;
  }
  .qa__q { font-size: var(--fs-md); font-weight: 700; color: var(--ink); line-height: 1.7; }
  .qa__q::before { content: "Q"; color: var(--blue); }
  .qa__a { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.95; }
  .qa__a::before { content: "A"; color: var(--ink-faint); }
  .qa__a a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
  .qa__a a:hover { text-decoration-thickness: 2px; }
  @media (max-width: 560px) {
    .qa__q, .qa__a { padding-left: 1.8em; }
    .qa__q::before, .qa__a::before { font-size: var(--fs-md); }
  }

  /* ============ よくある質問（吹き出し） ============ */
  /* 団体そのものへの質問は、案内文より会話の形のほうが読み進めてもらいやすい。
     参加の実務をまとめた一覧（.qa）とは別に、こちらは吹き出しで出す */
  .chatqa { margin-top: var(--sp-7); display: grid; gap: var(--sp-6); max-width: 900px; }
  .chatqa__item { display: grid; gap: var(--sp-3); }
  .chatqa__row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
  /* 答えは向かい合わせにして、会話に見せる */
  .chatqa__row--a { grid-template-columns: minmax(0, 1fr) 44px; margin-left: var(--sp-7); }
  .chatqa__mark {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: "Oswald", sans-serif;
    font-size: var(--fs-md);
    line-height: 1;
  }
  .chatqa__row--q .chatqa__mark { background: var(--blue); color: #fff; }
  .chatqa__row--a .chatqa__mark { background: var(--sand-200); color: var(--ink); }
  .chatqa__bubble { position: relative; margin: 0; padding: var(--sp-4) var(--sp-5); line-height: 1.9; }
  .chatqa__row--q .chatqa__bubble {
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--ink);
  }
  .chatqa__row--a .chatqa__bubble {
    background: var(--sea-50);
    border: 1px solid var(--sea-100);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
  }
  .chatqa__bubble a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
  .chatqa__bubble a:hover { text-decoration-thickness: 2px; }
  /* しっぽ。枠線のぶんを2枚重ねて作る（角丸を使わない見た目にそろえる） */
  .chatqa__bubble::before,
  .chatqa__bubble::after { content: ""; position: absolute; top: 14px; border: 9px solid transparent; }
  .chatqa__row--q .chatqa__bubble::before { left: -18px; border-right-color: var(--line); }
  .chatqa__row--q .chatqa__bubble::after { left: -17px; border-right-color: var(--surface); }
  .chatqa__row--a .chatqa__bubble::before { right: -18px; border-left-color: var(--sea-100); }
  .chatqa__row--a .chatqa__bubble::after { right: -17px; border-left-color: var(--sea-50); }

  @media (max-width: 640px) {
    .chatqa__row { grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-3); }
    .chatqa__row--a { grid-template-columns: minmax(0, 1fr) 36px; margin-left: var(--sp-5); }
    .chatqa__mark { width: 36px; height: 36px; font-size: var(--fs-base); }
    .chatqa__bubble { padding: var(--sp-4); }
  }

  /* ============ contact card ============ */
  .contactcard { margin-top: var(--sp-7); background: var(--sky-soft); border: 1px solid var(--line); color: var(--ink); padding: var(--sp-7); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
  .contactcard h3 { margin: 0 0 8px; font-size: var(--fs-lg); font-weight: 700; color: var(--blue); }
  .contactcard p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
  .contactcard a.mail { font-family: "Oswald", sans-serif; font-size: var(--fs-md); color: var(--blue); text-decoration: none; }
  .contactcard a.mail:hover { text-decoration: underline; }

  /* ============ 活動実績の表 ============ */
  /* 年度ごとの数字は、文章で並べるより表のほうが読み比べやすい。
     狭い画面では横に送れるようにする（列を落とすと比較にならないため） */
  /* 横だけを送れるようにする。overflow-x だけを auto にすると縦も auto に変わり、
     スマホで表の上を上下になぞったときにページが動かなくなるため、縦は hidden で止める */
  .tablewrap { margin-top: var(--sp-6); overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; }
  .stattable { width: 100%; min-width: 680px; border-collapse: collapse; }
  .stattable caption { text-align: left; font-size: var(--fs-cap); color: var(--ink-faint); padding-bottom: var(--sp-3); }
  .stattable th,
  .stattable td { border: 1px solid var(--line); padding: var(--sp-3) var(--sp-4); }
  .stattable thead th {
    background: var(--surface-alt);
    color: var(--ink);
    font-size: var(--fs-cap);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.04em;
  }
  /* 年度の列 */
  .stattable tbody th { text-align: left; font-weight: 700; color: var(--ink); white-space: nowrap; }
  /* 数字はそろえて読ませる（等幅の数字・右そろえ） */
  .stattable td {
    text-align: right;
    font-family: "Oswald", "Hiragino Sans", sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-base);
    color: var(--ink);
    white-space: nowrap;
  }
  /* 1日平均の2列は、左の実数と区切って見せる */
  .stattable .is-avg { background: var(--sea-50); color: var(--ink-soft); }
  /* いちばん新しい年度。表の中で目が最初に行く場所にする */
  .stattable .is-latest th,
  .stattable .is-latest td { color: var(--blue); font-weight: 700; }
  .stattable .is-latest .is-avg { color: var(--blue); }
  /* 合計 */
  .stattable .is-total th,
  .stattable .is-total td { background: var(--surface-alt); font-weight: 700; }
  .stattable .is-total .is-avg { background: var(--sea-100); }
  /* 合計行の「（◯年◯月まで）」。年度の途中の行を足しても、
     どこまでの合計かが行の中で分かるようにする */
  .stattable__span { display: block; font-size: var(--fs-cap); font-weight: 400; color: var(--ink-soft); }

  /* ============ media list（メディア掲載一覧） ============ */
  /* 生のURLを並べると雑然とするので、日付・媒体名・見出しを列で揃える。
     お知らせ一覧と同じ体裁にして、サイト全体で読み方をそろえる */
  /* タイトルはリンクにせず、記事のURLを最後に明記する。
     どこの何という記事なのかが、リンクを開かなくても分かる状態にしておく */
  .medialist { list-style: none; margin: var(--sp-7) 0 0; padding: 0; display: grid; gap: var(--sp-5); }
  .medialist__item {
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
  }
  .medialist__meta {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
  }
  .medialist__date { font-size: var(--fs-sm); color: var(--ink-faint); letter-spacing: 0.04em; }
  .medialist__outlet { font-size: var(--fs-sm); font-weight: 700; color: var(--blue); }
  .medialist__ttl {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.7;
  }
  .medialist__desc {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    line-height: 1.9;
  }
  .medialist__url {
    margin: var(--sp-4) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--line-strong);
    font-size: var(--fs-cap);
  }
  .medialist__url a {
    color: var(--ink-faint);
    /* URLは英数字が続くので、どこでも折り返せるようにしておく */
    word-break: break-all;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .medialist__url a:hover { color: var(--blue); }
  @media (max-width: 560px) {
    .medialist__item { padding: var(--sp-5) var(--sp-4); }
  }

  /* 大きく見せる1件（テレビ放送など） */
  .mediafeature {
    margin: var(--sp-7) 0 0;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    gap: var(--sp-7);
    align-items: center;
    padding: var(--sp-6);
    background: var(--sky-soft);
    border: 1px solid var(--line);
  }
  .mediafeature__photo { aspect-ratio: 16/9; overflow: hidden; background: var(--blue-deepest); }
  .mediafeature__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mediafeature__cap { display: grid; gap: var(--sp-3); justify-items: start; }
  .mediafeature__badge {
    font-family: "Oswald", sans-serif;
    font-size: var(--fs-cap);
    letter-spacing: 0.18em;
    color: #fff;
    background: var(--blue);
    padding: 3px 12px;
  }
  .mediafeature__src { font-size: var(--fs-sm); font-weight: 700; color: var(--blue); }
  .mediafeature__ttl { font-size: var(--fs-md); font-weight: 700; color: var(--ink); line-height: 1.7; }
  @media (max-width: 780px) {
    .mediafeature { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-5); }
  }

  /* ============ media grid（TV・映像特集など画像付き） ============ */
  .mediagrid { margin-top: var(--sp-7); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: 560px; }
  .mediacard { display: block; background: var(--surface); text-decoration: none; color: inherit; }
  .mediacard__thumb { aspect-ratio: 16/9; overflow: hidden; position: relative; }
  .mediacard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
  .mediacard:hover .mediacard__thumb img { transform: scale(1.05); }
  .mediacard__play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  }
  .mediacard__play::after {
    content: ""; width: 52px; height: 52px; border-radius: 50%;
    background: rgba(16,36,72,.72);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M4 2.5v11l10-5.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 56% center; background-size: 18px 18px;
  }
  .mediacard__body { padding: var(--sp-5); }
  .mediacard__src { font-size: var(--fs-cap); letter-spacing: 0.06em; color: var(--blue); }
  .mediacard__ttl { margin: 6px 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); line-height: 1.6; }
  @media (max-width: 640px) { .mediagrid { grid-template-columns: 1fr; } }

  /* ============ person card（メンバー紹介） ============ */
  /* ============ member lead（メンバー紹介ページへの誘導枠） ============ */
  /* 集合写真を大きく見せて、ひとりずつの紹介は詳細ページに任せる。
     枠ごとリンクにするので、中に別のリンクは置かないこと */
  .memberlead {
    margin-top: var(--sp-6);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    background: var(--surface);
    border: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: border-color .25s, box-shadow .25s;
  }
  .memberlead:hover { border-color: var(--blue); box-shadow: 0 10px 30px -22px rgba(24,48,88,.5); }
  /* 写真の高さは枠の縦横比で決める（本文の量で背が伸び縮みしないように） */
  .memberlead__media { display: block; overflow: hidden; background: var(--sky-soft); aspect-ratio: 3 / 2; }
  .memberlead__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2,.7,.3,1);
  }
  .memberlead:hover .memberlead__media img { transform: scale(1.03); }
  .memberlead__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-6);
  }
  .memberlead__label { font-size: var(--fs-cap); letter-spacing: 0.1em; color: var(--blue); }
  .memberlead__ttl { margin-top: var(--sp-3); font-size: var(--fs-lg); font-weight: 700; line-height: 1.5; color: var(--ink); }
  .memberlead__text { margin-top: var(--sp-4); font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-soft); }
  /* 「見る」は文字の並びだけにして、枠全体が押せることが伝わるようにする */
  .memberlead__go {
    margin-top: auto;
    padding-top: var(--sp-5);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--blue);
  }
  .memberlead:hover .memberlead__go { text-decoration: underline; text-underline-offset: 4px; }
  .memberlead:hover .btn__arrow { transform: translateX(4px); }
  .memberlead .btn__arrow { transition: transform .25s; }
  @media (prefers-reduced-motion: reduce) {
    .memberlead__media img, .memberlead .btn__arrow { transition: none; }
    .memberlead:hover .memberlead__media img { transform: none; }
  }
  @media (max-width: 780px) {
    .memberlead { grid-template-columns: 1fr; }
    .memberlead__media img { height: auto; }
    .memberlead__body { padding: var(--sp-5); }
  }

  /* タイル状に敷き詰めず、カードの間に余白を取る */
  .persongrid { margin-top: var(--sp-7); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .personcard { background: var(--surface); padding: var(--sp-6); border: 1px solid var(--line); }
  /* 顔写真。まだ無い人は「写真：準備中」の面を出す（枠ごと省くとカードの高さが揃わない） */
  .personcard__photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin-bottom: var(--sp-5);
    border: 1px solid var(--line);
    background: var(--surface-alt);
  }
  .personcard__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .personcard__photo--dummy {
    display: grid;
    place-items: center;
    border-style: dashed;
    background: repeating-linear-gradient(135deg, var(--sky-soft), var(--sky-soft) 10px, var(--surface) 10px, var(--surface) 20px);
    color: var(--ink-faint);
    font-size: var(--fs-sm);
  }
  /* まだ分からない項目。空白のままだと「抜けている」のか「無い」のか分からない */
  .personcard__pending { margin: var(--sp-4) 0 0; font-size: var(--fs-cap); color: var(--ink-faint); }
  .personcard__role { font-size: var(--fs-cap); letter-spacing: 0.1em; color: var(--blue); margin: 0 0 var(--sp-3); }
  .personcard__name { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); margin: 0; }
  .personcard__kana { font-size: var(--fs-cap); color: var(--ink-faint); margin: 4px 0 0; letter-spacing: 0.06em; }
  .personcard__age { font-size: var(--fs-sm); color: var(--ink-faint); margin: 4px 0 0; }
  .personcard p.desc { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.85; }
  /* 本人のSNS。持っている人だけ出る。色はサービスごと（[data-sns]） */
  .personsns { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: 0; }
  /* アイコンと、その横に行き先の名前。アイコンだけだと何のリンクか伝わらないため */
  .personsns a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    color: var(--sns);
    font-size: var(--fs-cap);
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
  }
  .personsns a:hover,
  .personsns a:focus-visible { background: var(--sns); border-color: var(--sns); color: #fff; }
  .personsns svg { display: block; width: 16px; height: 16px; flex: none; fill: currentColor; }
  .personcard--pending { background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 10px, var(--surface-alt) 10px, var(--surface-alt) 20px); }
  .personcard--pending .personcard__name { color: var(--ink-faint); }
  @media (max-width: 780px) { .persongrid { grid-template-columns: 1fr; } }

  /* ============ partner card（連携団体） ============ */
  .partnergrid { margin-top: var(--sp-7); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .partnercard { background: var(--surface); padding: var(--sp-6); min-width: 0; }
  /* 「村おこしボランティア【与論島コース】」のように文節で折り返せない見出しが
     カードの幅そのものを押し広げてしまうため、ここだけ語中での折り返しを許す */
  .partnercard h3, .partnercard p { overflow-wrap: anywhere; }
  .partnercard__role { font-size: var(--fs-cap); font-weight: 700; letter-spacing: 0.06em; color: var(--blue); margin: 0 0 var(--sp-2); }
  .partnercard h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
  .partnercard p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.85; }
  /* 公式サイトへの導線。団体名をリンクにするだけでは押せると気づかれないため、
     URLそのものを1行出す。末尾の矢印で外部サイトへ出ることを示す */
  .partnercard .partnercard__url { margin: var(--sp-4) 0 0; font-size: var(--fs-cap); line-height: 1.6; }
  .partnercard__url a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
  .partnercard__url a:hover { text-decoration-thickness: 2px; }
  .partnercard__url a::after { content: "\2197"; margin-left: 4px; text-decoration: none; }
  @media (max-width: 640px) { .partnergrid { grid-template-columns: minmax(0, 1fr); } }

  /* ============ link card（外部リンク） ============ */
  .linkcards { margin-top: var(--sp-7); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .linkcard { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); padding: var(--sp-6); border: 1px solid var(--line); text-decoration: none; transition: border-color .25s; }
  .linkcard:hover { border-color: var(--blue); }
  .linkcard h3 { margin: 0 0 6px; font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
  .linkcard p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
  .linkcard .btn__arrow { font-family: "Oswald", sans-serif; color: var(--blue); flex-shrink: 0; font-size: var(--fs-lg); }
  @media (max-width: 640px) { .linkcards { grid-template-columns: 1fr; } }

  /* ============ contact form（お問い合わせフォーム） ============ */
  /* ページ中央に置き、枠と淡い地色で「入力する場所」だと一目で分かるようにする */
  .contactform {
    margin: var(--sp-7) auto 0;
    display: grid;
    gap: var(--sp-5);
    max-width: 720px;
    background: var(--sky-soft);
    border: 1px solid var(--line);
    padding: var(--sp-7);
  }
  .contactform__row { display: grid; gap: 8px; }
  .contactform__row label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
  .contactform__req { font-size: 0.6875rem; font-weight: 600; color: #fff; background: var(--blue); padding: 2px 8px; letter-spacing: 0.04em; }
  .contactform input[type="text"],
  .contactform input[type="email"],
  .contactform input[type="tel"],
  .contactform select,
  .contactform textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--fs-sm);
    /* 行の高さをそろえないと、入力欄と選択ボックスで高さがずれる
       （既定の normal は部品ごと・端末ごとに違う値になるため） */
    line-height: 1.5;
  }
  /* 選択ボックスは、そのままだと端末ごとに見た目が変わる（iOSでは角丸の灰色、
     Androidでは独自の下線と▼）。装飾を外して他の入力欄と同じ枠にそろえ、
     ▼だけ自前で描く。位置がずれないよう右の詰めは矢印のぶんだけ広げる */
  .contactform select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%233A4046' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
  }
  .contactform textarea { resize: vertical; min-height: 140px; line-height: 1.8; }
  .contactform input:focus,
  .contactform select:focus,
  .contactform textarea:focus { outline: none; border-color: var(--blue); }
  .contactform button[type="submit"] { justify-self: start; border: none; cursor: pointer; }
  /* reCAPTCHA。ウィジェットは自動で幅300pxに固定されるので、中央寄せは箱ごと行う */
  .contactform__recaptcha { display: grid; justify-items: center; gap: 10px; }
  .contactform__recaptcha__note { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
  /* 確認画面の「修正する」「送信する」。狭い画面では縦に積む */
  .contactform__actions { display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; }
  .contactform__actions .btn { border: none; cursor: pointer; }
  .contactform__actions .btn--outline-ink { border: 1px solid var(--blue); }
  /* お問い合わせフォームの下に置く、よくある質問（フォームと区切る罫線） */
  /* #faq への直リンク・アンカージャンプで見出しが固定ヘッダーの下に隠れないように */
  .contactform__faq { margin-top: var(--sp-9); padding-top: var(--sp-8); border-top: 1px solid var(--line); scroll-margin-top: 90px; }

  /* ============ confirm table（お問い合わせ確認画面） ============ */
  /* .contactform と同じ幅・地色にそろえ、ひと続きの画面に見せる */
  .confirmtable {
    margin: var(--sp-7) auto 0;
    max-width: 720px;
    background: var(--sky-soft);
    border: 1px solid var(--line);
    padding: var(--sp-7);
  }
  .confirmtable__row {
    display: grid;
    grid-template-columns: minmax(110px, 160px) 1fr;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--line);
  }
  .confirmtable__row:first-child { padding-top: 0; }
  .confirmtable__row:last-child { border-bottom: none; padding-bottom: 0; }
  .confirmtable__row dt { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
  .confirmtable__row dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.8; word-break: break-word; }
  .confirmtable__pre { white-space: pre-wrap; }
  @media (max-width: 560px) {
    .confirmtable { padding: var(--sp-5) var(--sp-4); }
    .confirmtable__row { grid-template-columns: 1fr; gap: 4px; }
  }

  /* スマートフォン。画面が狭いので、枠の内側の余白を詰めて入力欄そのものを広く取る */
  @media (max-width: 560px) {
    .contactform { padding: var(--sp-5) var(--sp-4); gap: var(--sp-4); }
  }

  /* エラー時の差し戻し。送信ボタンを押す前に必ず目に入るよう、フォームの直前に置く */
  .contactform__errors {
    margin-top: var(--sp-6);
    max-width: 720px;
    margin-inline: auto;
    padding: var(--sp-5) var(--sp-6);
    background: #FFF8EC;
    border: 1px solid #F0D9A8;
    border-left: 5px solid var(--alert);
  }
  .contactform__errors__ttl { margin: 0 0 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--alert); }
  .contactform__errors ul { margin: 0; padding-left: 1.2em; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.9; }

  /* ハニーポット。人には見せず、機械にだけ見える入力欄。
     display:none だと埋めない機械もいるため、画面外へ追い出す */
  .contactform__trap {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
  }

  /* ============ thanks（送信完了） ============ */
  .thanks { max-width: 720px; text-align: center; }
  .thanks__mark {
    width: 72px; height: 72px;
    margin: 0 auto var(--sp-6);
    border-radius: 50%;
    background: var(--blue);
    position: relative;
  }
  /* チェックマーク */
  .thanks__mark::after {
    content: "";
    position: absolute;
    left: 26px; top: 18px;
    width: 16px; height: 30px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
  }
  .thanks__title { margin: 0 0 var(--sp-5); }
  .thanks__lead { margin: 0; font-size: var(--fs-base); line-height: 2; color: var(--ink-soft); }
  .thanks__actions { margin-top: var(--sp-7); display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; }

  /* ============ phase note（拡張フェーズの先行実装である旨） ============ */
  .phase-note { background: var(--surface-alt); border-bottom: 1px solid var(--line); }
  .phase-note__in { padding: var(--sp-3) 0; font-size: var(--fs-cap); color: var(--ink-faint); text-align: center; }
  .phase-note__in b { color: var(--ink-soft); font-weight: 700; }

  /* ============ band（砂浜↔海の交互セクションと波形の境目） ============ */
  /* 同じ背景色のセクションが連続して境目が分からなくなっていたため、
     砂浜（ドット）と海（淡い青）を必ず交互に並べる。
     セクション個別の背景指定より後に置いて上書きする。 */
  .band--sand,
  .band--sea {
    position: relative;
    background-repeat: repeat;
  }
  .band--sand { background-color: var(--band-sand); }
  .band--sand > .wrap { position: relative; z-index: 1; }

  /* 砂に残る足跡。敷き詰めると模様になって主張が強くなるので、
     1本だけ斜めに流す。画像はマスクとして使い、色は CSS 側で決める */
  .sandmark {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }
  .sandmark::before {
    content: "";
    position: absolute;
    left: -6%;
    width: 112%;
    top: 34%;
    height: 46%;
    transform: rotate(-8deg);
    background-color: var(--sand-mark);
    -webkit-mask-image: url("../images/sand-wave.webp");
    mask-image: url("../images/sand-wave.webp");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-position: left top;
    mask-position: left top;
  }
  @media (max-width: 780px) {
    .sandmark::before { top: 28%; height: 34%; }
  }
  /* 海はドットを敷かず、沖へ向かって深くなる濃淡だけにする。
     明るい水色を全面に敷くと白いカードも文字も浮いて安っぽく見えるため、
     帯そのものを深い海にして、白い面と金の線を映えさせる */
  .band--sea {
    background-color: var(--sea-700);
    background-image:
      radial-gradient(120% 80% at 50% 0%, rgba(143,195,233,.22) 0%, transparent 60%),
      linear-gradient(180deg, var(--sea-600) 0%, var(--sea-700) 45%, var(--sea-900) 100%);
    color: #fff;
  }
  /* 帯の中だけトークンを白系に差し替える。個別のクラスを並べるより漏れがない */
  .band--sea {
    --blue: var(--sea-200);
    --ink: #FFFFFF;
    --ink-soft: rgba(255,255,255,.90);
    --ink-faint: rgba(255,255,255,.74);
    --line: rgba(255,255,255,.24);
    --line-strong: rgba(255,255,255,.36);
  }
  /* 白地のカードが乗る箇所は元のトークンに戻す */
  .band--sea .facts,
  .band--sea .facts__row,
  .band--sea .partnercard,
  .band--sea .personcard,
  .band--sea .mediacard,
  .band--sea .boxgrid__item,
  .band--sea .contactform {
    --blue: var(--accent);
    --ink: var(--ink-base);
    --ink-soft: var(--ink-soft-base);
    --ink-faint: var(--ink-faint-base);
    --line: #DCE4E8;
    color: var(--ink-base);
  }

  /* 白のまま区切りたいセクション用。境目は細い罫線だけにする */
  .band--plain {
    position: relative;
    background: var(--surface);
    border-top: 1px solid var(--line);
  }

  /* 波形の境目。自分の背景をそのまま波の形に切り抜いて、
     直前のセクションへ「打ち寄せる」ように重ねる */
  .band--wave::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 46px;
    transform: translateY(-100%);
    background: inherit;
    /* 海はグラデーションなので、inherit のままだと波の下端と
       セクション上端で色がずれる。波はセクション上端の色で塗る */
  }
  /* 海の帯は「上端の色（--sea-600）＋中央のハイライト」でできている。
     波を --sea-600 だけで塗るとハイライトの分だけ暗く、境目に段ができるため、
     セクション上端(y=0)と同じ色になるようハイライトも敷き直す。
     波の下端を中心に置き、縦半径を十分大きく取って、
     46px の高さの中では横方向の濃淡だけが出るようにしている */
  .band--sea.band--wave::before {
    background-color: var(--sea-600);
    background-image:
      radial-gradient(120% 2000% at 50% 100%, rgba(143,195,233,.22) 0%, transparent 60%);
  }
  .band--wave::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C20,4 40,44 60,26 C80,8 100,44 120,26 L120,46 L0,46 Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C20,4 40,44 60,26 C80,8 100,44 120,26 L120,46 L0,46 Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: 240px 46px;
    mask-size: 240px 46px;
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
    pointer-events: none;
    z-index: 1;
  }
  /* 波は隙間を作らず、直前のセクションの上に直接重ねる（打ち寄せる表現）。
     セクションの上下padding が十分あるため本文には掛からない */
  .band--wave { padding-top: var(--sp-8); }

  @media (max-width: 640px) {
    .band--wave::before { height: 28px; -webkit-mask-size: 150px 28px; mask-size: 150px 28px; }
  }



  /* ============ SNS紹介枠（トップ） ============ */
  /* 「動画で見る海謝美」と同じ .pickup の作りに乗せる。
     並びだけ差し替えたいので、独自の枠線や背景はここでは作らない */
  .snspickup { margin-top: var(--sp-8); }
  .snscards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
  }
  .snscard {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--line);
    /* 左端にサービスの色を細く出して、色そのものを目印にする */
    border-left: 3px solid var(--sns);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .2s;
  }
  .snscard:hover {
    border-color: var(--sns);
    box-shadow: 0 8px 22px rgba(24,48,88,.14);
    transform: translateY(-2px);
  }
  .snscard__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; }
  .snscard__icon svg { display: block; fill: var(--sns); }
  .snscard__body { display: grid; gap: 2px; min-width: 0; }
  .snscard__name { font-weight: 700; color: var(--ink); font-size: var(--fs-sm); }
  .snscard__note { font-size: var(--fs-cap); color: var(--ink-faint); }
  .snscard__go { margin-left: auto; flex: none; color: var(--sns); transition: transform .2s; }
  .snscard:hover .snscard__go { transform: translateX(4px); }
  @media (prefers-reduced-motion: reduce) {
    .snscard, .snscard__go { transition: none; }
    .snscard:hover { transform: none; }
    .snscard:hover .snscard__go { transform: none; }
  }
  @media (max-width: 560px) {
    .snscards { grid-template-columns: 1fr; }
    .snscard { padding: var(--sp-3) var(--sp-4); }
  }

  /* ============ SPの余白 ============ */
  /* 画面が狭いところに「.wrap の外余白」と「箱の内側の余白」が二重にかかると、
     本文の幅が画面の8割を切って、細長い柱のように見えてしまう。
     外側は少しだけ広げ、内側は一段詰めて、読む幅を稼ぐ。
     .wrap は 100% 基準にしている（100vw だとスクロールバーのぶんはみ出すため） */
  @media (max-width: 560px) {
    .wrap { width: calc(100% - var(--sp-5)); }
    /* 枠のある箱。中身が細くならないよう内側を詰める */
    .pickup { padding: var(--sp-4); }
    .notebox { padding: var(--sp-4); }
    .partnercard { padding: var(--sp-5) var(--sp-4); }
    .checklist li { padding: var(--sp-3) var(--sp-4); }
    .facts__row { padding: var(--sp-3) var(--sp-4); }
    .board { padding: var(--sp-5) var(--sp-4); border-width: 5px; }

    .contactcard { padding: var(--sp-5) var(--sp-4); gap: var(--sp-4); }

    /* 読みやすさのための行長制限（17rem）は、PCで1カラムが広いときの話。
       SPでは画面のほうが先に狭いので、掛けると余白が二重になるだけになる */
    .foot__brand p { max-width: none; }

    /* セクションの下に置くボタンは中央に。本文が画面幅いっぱいまで届くSPでは、
       左端に寄っていると本文の続きに見えて、次の行き先だと気づかれにくい。
       .sec__cta はボタン自身に付くので、幅を内容ぶんに詰めてから中央へ寄せる */
    .sec__cta { display: flex; width: fit-content; margin-inline: auto; }
    .postlist__foot,
    .next__foot { text-align: center; }
    /* カードの本文まわり */
    .post__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
    .oddcard__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
  }

  /* ============ SPの横スクロール ============ */
  /* カードが3枚並ぶ列は、SPで縦に積むと、その節だけで画面3つぶんの高さになる。
     .hscroll を付けた列だけ横に送れるようにして、1画面のなかに収める。
     コンポーネント名ではなくクラスで指定しているのは、同じ .stats__row でも
     ページによって使い方が違い（/achievements/ では .wrap 自体に付く）、
     まとめて掛けると崩れるため。付けたい列に1つ足す、という運用にする。

     画面の端まで流したいので、.wrap の左右余白をいったん打ち消し、
     同じ幅を padding で戻している（要素の外は端まで、中身は元の位置から始まる）。
     カードは画面幅の82%。右端に次の1枚がのぞくので、送れることが目で分かる */
  @media (max-width: 780px) {
    .hscroll {
      display: flex;
      /* 縦は必ず hidden にする。overflow-x だけを auto にすると、
         もう一方の軸は仕様上 auto に変わり、この枠が縦のスクロール先になってしまう。
         そうなると指を上下に動かしたときにページではなく枠の中が動き、
         ページ全体が上下に送れなくなる */
      overflow-x: auto;
      overflow-y: hidden;
      /* 指の動きは横送りとページの上下送りの両方を許す（縦を奪わない） */
      touch-action: pan-x pan-y;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      margin-inline: calc((100% - 100vw) / 2);
      padding-inline: calc((100vw - 100%) / 2);
      /* 縦を hidden にするとカードの落ち影が切れるので、そのぶんだけ余白を持たせる */
      padding-block: 2px var(--sp-4);
    }
    .hscroll::-webkit-scrollbar { display: none; }
    .hscroll > * {
      flex: 0 0 82%;
      scroll-snap-align: center;
    }
  }

  /* 横に送れることを言葉でも添える。PCでは出さない */
  .swipehint { display: none; }
  @media (max-width: 780px) {
    .swipehint {
      display: block;
      margin: 0 0 var(--sp-4);
      font-size: var(--fs-cap);
      color: var(--ink-faint);
      letter-spacing: 0.04em;
    }
  }
  /* 濃い海の帯の上では、そのままでは沈んで読めない */
  .band--sea .swipehint { color: rgba(255,255,255,.72); }

  /* ============ scroll reveal（画面に入ったら現れる） ============ */
  /* 動かすのは opacity と transform だけ。レイアウトも再描画も起こさないので、
     スクロール中に負荷が乗らない。監視は js/reveal.js の IntersectionObserver が担い、
     一度現れた要素は監視を外すため、処理が走り続けることもない。
     JSが動いているあいだだけ html に .has-reveal が付く。JSが無効・失敗したときは
     この指定ごと効かなくなるので、中身が隠れたままになることはない。
     ↓の対象一覧は js/reveal.js の SELECTOR と同じ内容にしておくこと */
  .has-reveal :is(
    h1.sec, h2.sec, h3.sec, .phero__lead, .about__body,
    .post, .postitem, .newsitem, .newsbrief li,
    .stat, .step-row, .flow__step, .tl-row,
    .oddcard, .datacard, .waycard, .partnercard,
    .boxgrid__item, .medialist__row, .summary__row, .facts__row,
    .notebox, .checklist, .shorelist, .sec__foot, .qa__item, .chatqa__item
  ) {
    opacity: 0;
    transform: translateY(16px);
  }
  .has-reveal [data-reveal] {
    transition:
      opacity .7s cubic-bezier(.2,.7,.3,1),
      transform .7s cubic-bezier(.2,.7,.3,1);
  }
  .has-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* 動きを抑える設定のときは、位置の移動だけをやめる。
     幕（intro-splash）と同じ考え方で、演出そのものは省かず、動きだけを減らす。
     フェードは位置が動かないので、この設定でも差し支えない */
  @media (prefers-reduced-motion: reduce) {
    .has-reveal :is(
      h1.sec, h2.sec, h3.sec, .phero__lead, .about__body,
      .post, .postitem, .newsitem, .newsbrief li,
      .stat, .step-row, .flow__step, .tl-row,
      .oddcard, .datacard, .waycard, .partnercard,
      .boxgrid__item, .medialist__row, .summary__row, .facts__row,
      .notebox, .checklist, .shorelist, .sec__foot, .qa__item, .chatqa__item
    ) {
      transform: none;
    }
    .has-reveal [data-reveal] { transition: opacity .5s ease; }
    .has-reveal [data-reveal].is-in { transform: none; }
  }

  /* ============ page top（ページの先頭へ戻る） ============ */
  /* 長いページだと、読み終わったあとナビへ戻る手段が画面内に無かったので置く。
     位置は右下固定。ドロワー（z-index 90）よりは下、本文よりは上に重ねる。
     JS が読み込まれるまでは常時表示。.is-toggleable が付いてから隠す動きを始めるので、
     JS が動かない環境でも「押せば先頭に戻るリンク」として残る */
  .pagetop {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    z-index: 80;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--blue);
    border: 1px solid var(--blue);
    text-decoration: none;
    transition: background .3s, transform .3s cubic-bezier(.2,.7,.3,1), opacity .3s, visibility .3s;
  }
  .pagetop:hover { background: var(--blue-deep); border-color: var(--blue-deep); transform: translateY(-3px); }
  .pagetop.is-toggleable { opacity: 0; visibility: hidden; transform: translateY(10px); }
  .pagetop.is-toggleable.is-shown { opacity: 1; visibility: visible; transform: none; }
  .pagetop.is-toggleable.is-shown:hover { transform: translateY(-3px); }
  /* ドロワーを開いているあいだは、前面の操作に集中させる */
  body.is-drawer-open .pagetop { opacity: 0; visibility: hidden; }
  @media (max-width: 780px) {
    .pagetop { right: var(--sp-4); bottom: var(--sp-4); width: 44px; height: 44px; }
  }
  /* 動きを抑える設定では、浮き上がりだけやめて出し入れは残す（位置が変わらないと出たことが分からない） */
  @media (prefers-reduced-motion: reduce) {
    .pagetop,
    .pagetop:hover,
    .pagetop.is-toggleable,
    .pagetop.is-toggleable.is-shown:hover { transform: none; transition: opacity .3s, visibility .3s, background .3s; }
  }

  /* ============ 地図のシート（狭い画面） ============ */
  /* 地名の一覧と地図を横に並べられない幅では、地図をページから外して
     地名を押したときだけ画面いっぱいで開く（js/map-sheet.js）。
     一覧の下に置いたままだと、押した結果が画面の外で起きて「反応していない」ように見える */
  .mapsheet {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: flex-end;
  }
  .mapsheet[hidden] { display: none; }
  .mapsheet__backdrop { position: absolute; inset: 0; background: rgba(16, 36, 72, .55); }
  .mapsheet__panel {
    position: relative;
    width: 100%;
    max-height: 92svh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    box-shadow: 0 -6px 24px rgba(16, 36, 72, .28);
  }
  .mapsheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
  }
  .mapsheet__ttl { font-size: var(--fs-base); font-weight: 700; color: var(--ink); }
  .mapsheet__close {
    flex: none;
    padding: 8px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    font: inherit;
    font-size: var(--fs-cap);
    font-weight: 700;
    color: var(--blue);
    cursor: pointer;
  }
  .mapsheet__body { flex: 1; overflow-y: auto; padding: var(--sp-4); }
  .mapsheet__body .mapembed { margin: 0; }
  /* シートの中では、地図に高さをできるだけ渡す */
  .mapsheet__body .mapembed iframe { aspect-ratio: auto; height: 58svh; }
  /* 後ろのページは動かさない（シートの中だけスクロールする） */
  body.has-mapsheet { overflow: hidden; }

  /* 地図がページから消えるぶん、何を押せばよいのかを一覧の下に添える */
  .mapsheet__hint { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--ink-soft); }

  /* ============ SPの折り返し ============ */
  /* SPは1行が短く、文節単位の折り返し（word-break: auto-phrase）だと
     次の文節が入らないだけで行が真ん中で折れて見える。
     狭い画面ではふつうの折り返しに戻して、行を右端まで使う（禁則 strict は残す）。
     text-wrap: pretty も段落全体の行の長さをそろえようとして早めに折り返すことがあるため、
     同じ理由でここで打ち消す（word-break だけ戻しても pretty が残ると右端まで届かない）。
     h1.sec や .moviecard__title のような個別指定にも勝てるよう、
     このブロックはファイルのいちばん後ろに置いておくこと */
  @media (max-width: 560px) {
    p, li, dt, dd, blockquote, figcaption, label,
    h1, h2, h3, h4, h5,
    h1.sec, h2.sec,
    .moviecard__title {
      word-break: normal;
      text-wrap: wrap;
    }
    /* 1文まるごとの折り返し（inline-block）も右側の空きを作りすぎるので解除 */
    .sentence { display: inline; }
  }