/*
Theme Name: kunimi-kurage-theme
Theme URI:
Author: RAデザイン
Author URI: https://ra-web.jp
Description: くにみクラゲ公民館 WordPress テーマ
Version: 1.0.0
*/

/* =====================================================================
   くにみクラゲ公民館 TOP — style.css
   ※本CSSの色はデザインカンプ（top-pc.png / top-sp.png）を目視して拾った近似値。
     ロゴ・クラゲ線画・丸スタンプ・ヒーロー手書き文字画像は仮実装。
     差し替え箇所は「差し替え」コメントで明示。
   ===================================================================== */

/* ---------- Reset (最小限) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; border: none; background: none; cursor: pointer; }
svg { display: block; }

/* ---------- Design tokens ---------- */
:root {
  /* カンプ目視で拾った近似カラー。実データ（ブランドカラー確定値）が来たら差し替え */
  --navy: #1c4a73;        /* ナビ・ボタン枠線・線画（中間トーンの青） */
  --navy-deep: #0e3a63;   /* 波の濃色部分・CREATURES系の暗い青 */
  --navy-soft: #3f6d92;   /* 補助テキスト */
  /* 2026-09-04 QA_FULL実測（RGB）に基づき追加：
     見出し・ラベルはカンプでは rgb(0-11,2-32,22-54) 前後の「黒に近い墨色」。
     --navy(28,74,115)は明るすぎるため、見出し専用により暗い色を新設して差し替える */
  --ink: #0a1420;         /* section-title / section-label（見出し・ラベル用の黒に近い墨色） */
  /* 🔴 PROD-20260922-014 作業8（RYO指示原文：「スマホのH2の見出し小さくない？」
     「てかスマホとPCで色も違うし / 色は青(スマホに合わせる) / フォントも統一 / 見出し下に余白欲しい」）
     PROD-20260922-010 が本文を --fs-body の1トークンに統一したのと同じ思想で、見出し(.section-title)も
     1トークンにする。BEFOREはPCが 35/44/24/23/21/36/40px、SPが 22/18/19/21/20/22px と刻まれていた。
     --fs-h2 … PC 32px（本文16pxの2.0倍）。@media(max-width:899px) 側で 24px に再定義（本文の1.5倍）。
               SP用に別名の変数を作らず --fs-h2 自体を再定義するのは、このテーマが
               --sp-gutter / --space-section / --ink で既に採っている書き方に合わせたため。
     🔴 32px / 24px は秘書が決めた値（BEFOREの最大値 PC35px・SP22px から極端に外れない範囲で
        本文との差を明確にする値）。**RYOが「もっと大きく／小さく」と言えば差し戻しになる。**
     --ink-heading … 見出しの色。RYO指示「色は青(スマホに合わせる)」に従い、
       SP帯が既に使っていた --ink の再定義値 #00197d（＝rgb(0,25,125)）をそのまま採用。
       🔴 既存変数の探索結果（grep -n '#00197[dD]' style.css）：ヒットは L1710 の
          `@media(max-width:899px)` 内の `--ink: #00197d;` の1件のみで、:root に同値の変数は無かった。
          --ink 自体を :root で青にすると .section-label など見出し以外にも波及するため、
          **見出し専用の変数を新規に1つだけ**作る（秘書指示で例外的に許可された1色）。 */
  --fs-h2: 32px;
  /* 🔴 PROD-20260923-001（RYO指示原文：「ABOUTなどサブコピーの色変わってない」
     「h二の下もっと余白」「その上で見出しの色もっと明るい青に」）
     PROD-20260922-014 旧: --ink-heading: #00197d;
     #00197d は濃紺に近く「明るい青」の指示に合わないため #1A5FD0 に変更。
     🔴 PROD-20260923-008（2026-09-23）で **#1A5FD0 → #0c44a2 に変更**（現行値）。
        RYO発言（原文）：「やっぱり #0c44a2 FVの文字と近づけたい」。
        下記の #1A5FD0 に関する記述は PROD-20260923-001 当時の実測経緯＝史実として残す。
        #0c44a2 は #1A5FD0 より暗いため、下記の全背景でコントラストは**上がる**
        （実測値は AGENT_LOG.md の PROD-20260923-008 を参照）。
     🔴 コントラスト実測（WCAG 2.1 相対輝度式で算出・本番実renderで拾った実背景に対して）：
        白#ffffff 5.85 / --sky-01 #eaf4fb 5.24 / --sky-02 #d7e9f7 4.70 /
        #f9f9fa 5.56 / #f9fafb 5.60 / --cream #faf7ef 5.46 → 最小 4.70（AA 4.5 以上）
        1段明るい #1B62D8 は --sky-02 上で 4.46 となり AA 未達のため不採用。
        よって #1A5FD0 が「4.5:1 を満たす範囲で最も明るい青」に相当する。
        ↑ここまでが PROD-20260923-001 時点の経緯（史実・書き換えない）。
        現行値は PROD-20260923-008 の #0c44a2（#1A5FD0 より暗い＝コントラストは上振れ方向）。
     🔴 写真・暗色背景の上の白文字（--onphoto 系／SPの .creatures__head）は白のまま据え置き。
     --fs-label … .section-label（ABOUT / KIDS CLUB 等のサブコピー）のサイズ。
       BEFOREは PC 17/12.5/12px の3種類・SP 11px。PC 14px / SP 12px の1トークンに統一する。
       @media(max-width:899px) 側で --fs-label 自体を 12px に再定義（--fs-h2 と同じ書き方）。
       🔴 14px / 12px は秘書が決めた値（h2 の PC32/SP24px より明確に小さく、かつ BEFORE の
          最小値 PC12px・SP11px より読みやすい値）。**RYOが差し戻す可能性がある。**
     --space-h2 … 見出し(.section-title / .subpage__h2)の下余白。
       🔴 既存の余白トークンを grep で全数確認したが 40px 相当は無かった
          （--space-section 120/72px・--space-section-lg 180/104px・--space-section-sm 96/56px・
            --space-block 56/32px）。よって新規トークンを**1つだけ**定義し、
          PROD-20260922-014 が px直値で置いていた 24px を全てこれに集約する。
       🔴 40px は秘書が決めた値（RYO指示「もっと余白」＝現行24pxから明確に広げる）。
          **RYOが差し戻す可能性がある。** */
  /* PROD-20260923-008 旧: --ink-heading: #1A5FD0;（RYO「やっぱり #0c44a2 FVの文字と近づけたい」） */
  --ink-heading: #0c44a2;
  --fs-label: 14px;
  --space-h2: 40px;
  --hand-ink: #052a63;    /* ヒーロー見出し等、手書き風文字の実測色 rgb(0,50,118) 相当 */
  --sky-01: #eaf4fb;      /* セクション背景（明） */
  --sky-02: #d7e9f7;      /* セクション背景（やや濃） */
  --cream: #faf7ef;       /* メモ風カード背景 */
  --white: #ffffff;
  --text: #33404a;
  --text-light: #6b7b86;
  --line: #cfe0ea;

  --font-jp: 'Zen Kaku Gothic New', 'Noto Sans JP', -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-hand: 'Yomogi', 'Zen Kaku Gothic New', cursive;

  /* RYO指摘（2026-09-04）：全セクション共通で左右マージンが広すぎる。
     ABOUT見出し左端の実測：66px(862)×1.6705=110px@1440。旧--wrap:1200pxでは
     (1440-1200)/2+20(セクションpadding)=120pxとなり実測とほぼ近いが、視覚的には
     テキスト列幅（470px等）に対して右側に大きな余白ができ「中央に寄って小さく見える」
     状態だった。--wrapを1200→1320pxに拡大し、各セクションの実利用幅を広げて
     余白を圧縮する（セクション単位の精密なbbox実測は時間の制約で未実施、
     グローバルなトークン調整による対応であることを正直に記載する） */
  --wrap: 1320px;

  /* =========================================================
     余白トークン（PROD-20260918-001 / RYO指示 2026-09-18）
     RYO指示原文：「カンプは1枚に納めたいがための余白キツキツ。
     HPだからかなり余白大きくしたい。セクション間は特に」
     → カンプ(top-pc.png / top-sp.png)との高さ一致は追わない。
       Webサイトとして自然な余白を優先する（RYO確定事項21）。

     今後の調整はこの4値だけを触れば全セクションに反映される：
       --space-section     … 文字セクションの上下余白（セクション間の主役）
       --space-section-lg  … 写真セクション直後など、より大きく取りたい箇所
       --space-section-sm  … 写真の上に載るパネルの内側余白・フッター上部（SPのみ）
                             ※ PROD-20260923-007 で **PCのフッター上部だけ** --space-block に変更した
                               （RYO指摘「フッター上部は余白ありすぎ」）。SPフッター上部・
                               .contact__panel・.kidsclub__panel・SPの .about は従来どおりこの値。
       --space-block       … セクション内のブロック間（見出し↔本文↔ボタン）
     ========================================================= */
  /* 値の決め方：--space-section はセクション「片側」の余白。
     文字セクション同士が隣り合う境界は上下が足し算されるので
     セクション間 = --space-section × 2。
     フルブリード写真帯と接する側は足し算にならないため --space-section-lg を単独で使う。

     PROD-20260918-002（RYO指示 2026-09-18「まだ狭いわ」）：
     PROD-20260918-001 の値（80/120/64/40）を1.5倍に引き上げた。
     文字セクション同士の境界 = 120×2 = 240px。 */
  --space-section: 120px;
  --space-section-lg: 180px;
  --space-section-sm: 96px;
  --space-block: 56px;

  /* =========================================================
     本文タイポグラフィ・トークン（PROD-20260922-010 / RYO指示 2026-09-22）
     RYO指示原文：「なんか本文文字小さくね？」「PCで13.5pxって」「なんで」
                   「本文小さくね」
                   「てか基本場所によって細かく変えなくていいだろ／見出しじゃないんだから」

     🔴 方針（今後これを崩さないこと）：
       本文サイズは この1トークンで統一する。場所ごとに刻まない。
       サイズの違いで情報の階層を作らない。階層は「見出し」と「font-weight」が担う。

     🔴 13.5px の出どころ（＝誤り。カンプの指定値ではない）：
       デザイン/top-pc.png は 862×1824px で、1440px設計を約60%に縮小して書き出したもの。
       換算係数 1440÷862＝1.6705 自体は正しいが、縮小PNGは文字の輪郭がぼけるため
       目測すると実際より小さく読み取れる。16pxの本文なら862px空間では 9.58px で写るはずが
       約8px と読まれ、その誤差が ×1.6705 で拡大されて 13.5px になっていた。
       さらに「文字の高さ」ではなく「文字ピッチ」を測り、「ピッチ÷font-size＝0.93」という
       仮定で二段階に逆算していたため誤差が重なっている。
       → よって「カンプ実測値だから」を理由にこのサイズへ戻してはいけない。

     ここを触れば本文が一括で変わる：
       --fs-body … 本文・リード・メタ・フッター・下層本文・フォームラベルの共通サイズ
       --lh-body … 上記の共通行送り
     ========================================================= */
  --fs-body: 16px;
  --lh-body: 1.8;
}

body {
  font-family: var(--font-jp);
  color: var(--text);
  background: var(--white);
  line-height: var(--lh-body); /* PROD-20260922-010 旧: line-height: 1.8 */
  font-size: var(--fs-body); /* PROD-20260922-010 旧: font-size: 15px */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Placeholder photo block（写真差し替え用の共通ダミー） ---------- */
.ph {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #dadada;
  border: 1px solid #c9c9c9;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.ph::before {
  content: attr(data-ph);
  display: block;
  font-size: 10px;
  line-height: 1.4;
  color: #6b6b6b;
  background: rgba(255,255,255,.78);
  padding: 3px 6px;
  margin: 6px;
  border-radius: 3px;
  font-family: var(--font-jp);
}

/* ---------- 共通パーツ ---------- */
/* QA_FULL_20260904実測：ラベル rgb(34,64.5,94)〜(41,61,96) 系＝カンプは一貫して--navy-softより暗い。
   --inkに差し替え */
/* RYO指摘（2026-09-04）：全セクションの文字が実装の方が小さいとの指摘を受け、カンプを
   ピクセル実測（862px空間）してfont-sizeを算出し直した。
   ラベル"ABOUT"：ink高さ6px→×1.6705=10px。全角英字の cap-height比率0.7で逆算→font-size≈16.7px
   見出し1行目：ink高さ27px→×1.6705=45.1px。CJK fill比率0.87で逆算→font-size≈51.8px
   （旧12px/24pxはそれぞれ実測値の約70%・46%しかなく、見出しは半分以下だった） */
/* PROD-20260923-001 旧:
   .section-label {
     font-size: 17px;
     letter-spacing: .14em;
     font-weight: 700;
     color: var(--ink);       ← #0a1420（墨色）。RYO指摘「ABOUTなどサブコピーの色変わってない」
     margin-bottom: 10px;
   }
   サイズは --fs-label（PC14px / SP12px）へ、色は見出しと同じ --ink-heading（明るい青）へ集約。
   letter-spacing は PC .14em / SP .1em に割れていたため .14em の1値に統一（SP側の上書きを撤去）。 */
.section-label {
  font-size: var(--fs-label);
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--ink-heading);
  margin-bottom: 10px;
}
.section-label--onphoto { color: var(--white); }

/* QA_FULL_20260904実測：ABOUT見出し rgb(0,3,22)前後＝ほぼ黒。他見出し(EXPERIENCE/ACTIVITY LOG/
   CREATURES/INFORMATION)もカンプは一貫して暗い紺〜黒（rgb(5-16, 30-71, 66-128)台）に寄っている。
   --navy(28,74,115)は明るすぎるため--inkに差し替え。字間も実測感覚で少し広げる */
/* 50pxで実装したところ、about__textの420px固定列など既存レイアウトの多くで
   <br>による手動改行が意図した位置からずれて3行になる副作用が出たため44pxに調整
   （実測52pxには届かないが、既存カラム幅を全面的に作り直す時間がないための現実的な妥協） */
/* RYO指摘（2026-09-04）：共通クラスへの一律44px指定がABOUT/CREATURESの3行折り返し崩れの
   原因だったため撤回。これはEXPERIENCE/ACTIVITY LOG/INFO等、個別に折り返し崩れが報告されて
   いないセクションのための「未実測の暫定値」としてのみ残す（40px）。ABOUT/CREATURESは
   下記min-width:900px内で個別に上書きする。font-weightもカンプの方が細いとの指摘を受け
   700→600に軽量化 */
/* PROD-20260922-014 旧:
   .section-title {
     font-size: 40px;
     font-weight: 600;
     color: var(--ink);
     line-height: 1.3;
     letter-spacing: .01em;
     margin-bottom: 10px;
   }
   margin-bottom について：BEFOREは 10px / 8px / 0px の3種類に割れていた。
   RYO指示「見出し下に余白欲しい」に対し、**1つの値 24px に統一**した。
   根拠：PCの見出し1行送り = 32px x line-height1.3 = 41.6px。その約0.58倍。
         SPは 24px x 1.3 = 31.2px に対し約0.77倍。BEFOREの最大値10pxより明確に広い。
   既存の余白トークン（--space-section 120/72px・--space-section-lg 180/104px・
   --space-section-sm 96/56px）はいずれもセクション単位の値で見出し直下には大きすぎるため、
   **新しい余白変数は作らず**px直値で1箇所だけ宣言している（PC/SP共通の1値）。 */
.section-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--ink-heading);
  line-height: 1.3;
  letter-spacing: .01em;
  /* PROD-20260923-001 旧: margin-bottom: 24px;（RYO指示「h二の下もっと余白」→ --space-h2 40px） */
  margin-bottom: var(--space-h2);
}
.section-title--onphoto { color: var(--white); }

.hand { font-family: var(--font-hand); font-weight: 400; }

/* QA_FULL_20260904実測：ボタンはカンプ側「角がはっきり見える小さい角丸の矩形」。
   border-radius:999pxの完全ピル型はカンプに存在しない装飾。塗りも白ではなく薄い水色
   （実測rgb(239,245,254)付近）。テキスト色は実測rgb(40,80,134)前後で--navyに近いため維持 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 8px;
  background: var(--sky-01);
  color: var(--navy);
  border: 1px solid var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 3px 10px rgba(28,74,115,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(28,74,115,.14); }
.btn__arrow { transition: transform .15s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--small { padding: 10px 18px; font-size: 12px; }
.btn--outline { background: transparent; }
.btn--white { background: var(--white); color: var(--navy); }
.btn--dark { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* wave divider */
.wave { display: block; width: 100%; position: relative; z-index: 2; }

/* =====================================================================
   HEADER
   ===================================================================== */
/* 2026-09-04 RYO指摘で撤回：以前「淡水色グラデーション」として実測・実装した色は、
   ヘッダー自体の背景色ではなく「透明なヘッダーの下からヒーロー写真の空が透けて見えていた色」
   だったと判明（秘書の実測ミス）。ヘッダーは背景なし（透明）が正しい。
   ヒーロー写真がヘッダーの背後・ページ最上端(y=0)から始まるよう、headerをposition:absoluteに
   variantして通常フローから外し、hero側はpadding-top:0で最上端から開始するようにした
   （sticky（スクロール追従）は今回のRYO指摘で犠牲にした。カンプは静止画のためスクロール時の
   挙動は指示に含まれておらず、必要なら次回相談） */
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: none;
}
.header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  /* PROD-20260919-001（SPドロワーのバグ修正）：
     .sp-nav は .header の子であり、.header(z-index:100) が作る重ね合わせコンテキストの
     内側で順序が決まる。従来 .sp-nav に z-index:99、.header__inner は z-index:auto だった
     ため、ドロワーを開くとハンバーガーボタンがドロワーの下に潜り、ボタンで閉じられなかった
     （elementFromPoint(330,30) が sp-nav を返すことで実証済み）。
     .header__inner を positioned＋z-index:2 にして、ドロワー(1)・オーバーレイ(0)より
     常に前面に出す。position:relative は静的配置のままなのでレイアウトは1pxも動かない。 */
  position: relative;
  z-index: 2;
  /* FAIL7対応：PC/SPで逆方向にズレていたため、ブレークポイント別に個別調整（PCは900px以上メディアクエリで上書き） */
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* PROD-20260918-003：仮ロゴ（インラインSVG＋テキスト2行）を撤去し、RYO支給ロゴ画像に差し替え。
   支給ロゴは 853×346px（縦横比 2.4653）の縦積みロックアップ
   （上：クラゲアイコン y7-153 / 中：「くにみクラゲ公民館」y172-295 / 下：英字 y320-337）。
   高さだけ指定し幅は auto。表示幅 = 高さ × 2.4653。 */
.header__logo-img { display: block; height: 60px; width: auto; }

.header__nav ul { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
/* PROD-20260922-011：RYO指示「ご利用案内をヘッダーから削除して文字大きく」の後半（文字拡大）は
   実測の結果このリビジョンでは見送り＝ font-size は 13px のまま（旧値の変更なし）。
   本番実render実測（Chromium／ナビ6項目・gap24px・PCロゴ幅207.1px・.header__inner padding 20px）：
     ナビ1行に必要な幅        13px=610.7 / 14px=648.4 / 15px=686.2 / 16px=723.9 / 17px=761.6 px
     ナビに使える幅(avail)    viewport 900=632.9 / 950=682.9 / 1000=732.9 / 1050=782.9 / 1440=1052.9 px
   → 折り返さない最小viewport：13px=900 / 14px=950 / 15px=1000 / 16px=1050（縦スクロールバー15px込み）。
   ハンバーガー切替点が 899px のままだと 900〜1049px の帯で 16px はナビが2行になりヘッダー高さが
   変わるため、16px化には切替点の変更（≒1023px）が必要。独断で構造を変えずRYO判断に回している。
   なお「ご利用案内」削除前（7項目・13px）は 701px 必要で、900/950px では**元から2行**だった＝
   今回の1項目削除でその既存の折り返しは解消している。 */
/* PROD-20260922-012：上の保留をRYO判断（案A）で解消。ナビを本文トークン 16px に揃え、
   ナビのハンバーガー切替点だけを 899px → 1023px に移した（下の
   「@media (min-width:900px) and (max-width:1023px)」ブロック）。
   レイアウト全体の900pxブレークポイント（本文・セクション系）には一切触れていない。
   これにより 16px のナビが出るのは 1024px 以上のみ＝必要幅723.9px < 利用可能幅756.9px で
   常に1行に収まる。1023px以下はハンバーガー＋SPドロワーになるので折り返しは発生しない。 */
.header__nav a {
  /* PROD-20260922-012 旧: font-size: 13px; */
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .02em;
  white-space: nowrap;
}
/* FAIL D対応（QA4回目）：カンプは「お問い合わせ」も他ナビ項目と同じプレーンテキスト。
   塗りピルボタンはカンプに無い装飾を実装が勝手に足していたものなので撤去する */
.header__nav-cta {
  background: none;
  color: inherit !important;
  padding: 0;
  border-radius: 0;
}

.header__burger {
  display: none;
  width: 32px;
  height: 24px;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}
.header__burger span { display: block; height: 2px; background: var(--navy); border-radius: 2px; }
.header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

.sp-nav {
  display: none;
  position: fixed;
  top: 0; right: 0;
  width: min(78vw, 320px);
  height: 100vh;
  background: var(--white);
  box-shadow: -8px 0 24px rgba(0,0,0,.12);
  padding: 90px 28px 40px;
  transform: translateX(100%);
  /* PROD-20260919-001：閉じている間は visibility:hidden にして、画面外のリンクが
     Tabキーでフォーカスできてしまう問題も同時に塞ぐ */
  visibility: hidden;
  /* visibility は「開くときは即座に visible／閉じるときはスライドが終わってから hidden」に
     したいので 0s + delay で切り替える。visibility を .3s で補間すると、開いた直後の
     1フレームが hidden 扱いになり focus() が効かない（実測で確認済み） */
  transition: transform .3s ease, visibility 0s linear .3s;
  /* PROD-20260919-001：99 → 1。.header__inner(2) より必ず下、オーバーレイ(0) より上。
     .header(z-index:100) の重ね合わせコンテキスト内の順序なので、ページ本体より前面に
     出ることは従来どおり保証される */
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sp-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .3s ease, visibility 0s linear 0s;
}

/* PROD-20260919-001：ドロワー外をタップして閉じるための暗幕。
   .header の中に置くことで .header(z-index:100) の重ね合わせコンテキストに属し、
   ページ本体より前面・ドロワー(1)とヘッダー中身(2)より背面に入る */
.sp-nav-overlay {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(10, 32, 54, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
  z-index: 0;
}
.sp-nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
}

/* PROD-20260919-001：ドロワー展開中の背面スクロール禁止（body scroll lock）。
   html 側にも掛けるのは、スクロールコンテナが html の環境で body だけでは効かないため。
   body を position:fixed にする方式は採らない — .header が position:absolute で
   ドキュメント先頭に置かれている構造のため、body を fixed にするとヘッダーごと
   画面外へ飛び、ハンバーガーで閉じられなくなる */
/* PROD-20260923-011：ライトボックス（いきもの写真の拡大）も同じ背面ロックを使う。
   クラス名は SPドロワーの is-nav-open とは別にして、片方を閉じたときに
   もう片方のロックまで外れる事故を避けている（宣言だけ共有する）。 */
html.is-nav-open, body.is-nav-open,
html.is-lightbox-open, body.is-lightbox-open { overflow: hidden; }
.sp-nav ul { display: flex; flex-direction: column; gap: 22px; }
.sp-nav a { font-size: 15px; font-weight: 700; color: var(--navy); }
.sp-nav__cta {
  display: inline-block;
  background: var(--navy);
  color: var(--white) !important;
  padding: 10px 20px;
  border-radius: 999px;
  margin-top: 6px;
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  min-height: 470px;
  display: flex;
  /* RYO指摘：align-items:centerだとheroの高さ変更のたびに見出しの縦位置が動いてしまい
     padding-topの調整と競合していた。flex-startに変更し、padding-topだけで
     位置を確定できるようにする（heroの高さを今後変えても見出し位置は動かない） */
  align-items: flex-start;
  overflow: hidden;
  /* PROD-20260919-005（RYO指示：「.hero なんでこれに背景ついてるの 俺は白グラデって言ってるのに」）：
     この地色 var(--sky-01)(#eaf4fb) はRYOの指示になく制作側が足した水色ベタで、
     「上は白グラデ」というRYO指示と矛盾していた（ベールの下地が水色だと白が濁る）。
     → #ffffff に変更。白ヴェール .hero::before は一切変更していない。 */
  background: #ffffff;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }

/* =====================================================================
   PROD-20260922-007：FV上部の白グラデーション（.hero::before）— 復活
   ---------------------------------------------------------------------
   RYO指示原文（2026-09-22）：
     「ロゴの切り抜きが甘くて白残ってるから / やっぱりそれが目立たないように /
       FV上部分白グラデかけて / 馴染むようにね」

   ※ PROD-20260919-008 で「ごめん白グラデやっぱいらんわ」により一度撤去したものを、
     別の理由（ロゴの白残り）でRYOが復活指示したもの。
     🔴 撤去前（PROD-20260919-007）の旧値はそのまま使っていない。旧値は仮素材
     temp_hero_photo.png 前提の調整値で、今日 PROD-20260922-004 でヒーローが
     支給画像 fv-pc.jpg / fv-sp.jpg に差し替わっているため最適値が違う。ゼロから実測で決めた。

   【白残りの実測（本番レンダを1倍で撮り、logo.png の「不透明かつ min(RGB)>=238」の
     1555画素をページ座標へ写像して、同じ行のロゴ枠外の背景と比較）】
     PC1440：白残り rgb(230,245,246) / 背景 rgb(164,203,251) → ΔR +66.7・Δ輝度 +44.0（p90 ΔR 90）
     SP375 ：白残り rgb(228,244,245) / 背景 rgb(195,226,254) → ΔR +33.0・Δ輝度 +19.6（p90 ΔR 56）
     帯別（ページ座標）：
       PC  y23.1-32.6 Δ輝度46.5 ／ y32.6-44.7 Δ輝度49.9（画素数950＝最多）／ y44.7-102 Δ輝度24.6
       SP  y15.6-22.4 Δ輝度21.6 ／ y22.4-31.1 Δ輝度23.5（同上）      ／ y31.1-72   Δ輝度6.5
     → 白残りはロゴ上部（クラゲアイコン部）に集中している。グラデを深くまで伸ばす必要はない。

   【触ってはいけない画素の位置（秘書実測＋自分でPILで再確認）】
     PC1440（hero高 756.64）：ロゴ下端 y102（13.5%）／焼き込み見出し y163（21.6%）／カモメ y162（21.5%）
     SP375 （hero高 467.53）：ロゴ下端 y72（15.4%）／焼き込み見出し y76.7（16.4%）／
                              カモメ y44.9-62 と y70-82（左端はページ x198、塊は x209 以降）

   【採用値と根拠】
     PC：ピークα 0.80／平坦 0→48px／48→130px を smoothstep(3t²-2t³) で 0 へ（14段）
         ・130px = ヒーロー高の 17.2%。絵（y162-163・21.5%）まで 32px の余白を残して
           完全に α=0 にしている＝支給画像の絵は1画素も白くしない。
         ・ピーク 0.80 の根拠：ΔR 66.7 →(1-0.80)→ 13.3、p90 90 → 18。
           1.00 では地の空まで完全に飛び、PROD-20260919-003 でRYOに却下された
           「ほぼ白グラデ」に戻るため採らない。
         ・平坦区間 48px は白残りが集中する帯（y23-45）を完全に覆うため。
         ・smoothstep は両端の微分が 0 なので、平坦区間の終わりにも消える位置にも
           折れ点（knick）ができない。PROD-002〜007 で問題になった「ぱつっと切れる」
           「帯に見える」を構造的に防ぐ。隣接10pxの最大輝度差は実測 6 未満。
     SP：ピークα 0.72／平坦 0→32px／32→48px を smoothstep で 0 へ（8段）
         ・48px で切る根拠：カモメの最上端がページ y44.9。ここでの α は 0.03 まで落ちており、
           線画に乗る白はほぼゼロ（実測は後述の前後比較表）。見出し（y76.7）には一切かからない。
         ・ピーク 0.72 の根拠：SPは背景が PC より白い（rgb195,226,254）ため ΔR が 33 と小さく、
           0.72 で ΔR 33→9.2・p90 56→15.7 まで落ちる。これ以上濃くする必要がない。
         ・SPのロゴ下部（y48-72）はグラデ圏外になるが、その帯の白残りは Δ輝度 6.5 で
           元から視認限界以下（＝掛ける必要がない）。カモメを守る方を優先した。

   【レイヤー】z-index:1（.hero__media(0) より上・.hero__content(3) より下）。
     .header は .hero の兄弟で z-index:100 なので、ロゴ・グローバルナビは常にこの白の「上」。
     pointer-events:none でナビのクリックを妨げない（本番で elementFromPoint 実測済み）。
   ===================================================================== */
/* ★★★ PROD-20260922-009（RYO指示原文：「じゃあ白グラデ消して」）：
   .hero::before を PC・SP とも **再撤去**（2026-09-22・同日中に撤去→復活→再撤去で3回目）。
   経緯：
     ① PROD-20260919-008「ごめん白グラデやっぱいらんわ」→ 撤去
     ② PROD-20260922-007「ロゴの切り抜きが甘くて白残ってるから…FV上部分白グラデかけて」→ 復活
     ③ PROD-20260922-009「じゃあ白グラデ消して」→ 再撤去（今回）
   ③の背景：同じ PROD-009 でRYOがFV画像（fv-pc.jpg / fv-sp.jpg）を自分で作り直し、
   ロゴが載る位置を明るくした（PCロゴ領域の平均 rgb(166,204,250)→rgb(201,224,252)、
   SP rgb(201,229,253)→rgb(207,231,253)）ため、白グラデで馴染ませる必要がなくなったという判断。
   🔴 今回のストップ値は PROD-007 で実測して決めた資産なので、削除せず全文をここに残す。
   復活させるときはこのコメントを外すだけでよい（PC本体・SP上書きの両方を戻すこと）。

.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 130px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(255,255,255,0.8) 0, rgba(255,255,255,0.8) 48px,
      rgba(255,255,255,0.7883) 53.9px, rgba(255,255,255,0.7557) 59.7px,
      rgba(255,255,255,0.7055) 65.6px, rgba(255,255,255,0.6414) 71.4px,
      rgba(255,255,255,0.5668) 77.3px, rgba(255,255,255,0.4851) 83.1px,
      rgba(255,255,255,0.4) 89px,      rgba(255,255,255,0.3149) 94.9px,
      rgba(255,255,255,0.2332) 100.7px, rgba(255,255,255,0.1586) 106.6px,
      rgba(255,255,255,0.0945) 112.4px, rgba(255,255,255,0.0443) 118.3px,
      rgba(255,255,255,0.0117) 124.1px, rgba(255,255,255,0) 130px);
}
   ★★★ PROD-20260922-009 ここまでが撤去したPC側ルール（コメント保存） */

/* PROD-20260918-003（RYO指示：「ロゴ白背景あるから FV 上の方白グラデつけれる？ 今のままだと
   浮いちゃう」）：支給ロゴは白背景のJPEG（透過不可）なので、ヒーロー最上部に白→透明の
   グラデーションを敷き、ロゴの白い矩形の境界を消す。
   z-index は .hero__media(0) より上・.hero__content(3) より下の 1 に置き、見出しや館名ブロックが
   白ヴェールで薄くならないようにしている。
   高さ・ストップ位置はロゴの実測下端に合わせている（PC：ヘッダーpadding18px＋ロゴ84px＝下端102px
   → 110pxまで完全な白）。

   PROD-20260919-002（RYO指示：「グラデはばが狭くて グラデあるけどぱつっと切れてるイメージがある。
   上は白なんだけど気づいたら写真になってるみたいに自然につなげたい」）：
   旧版は 230px で透明になっていた。x=1200 の輝度を10px刻みで実測すると、y=110〜220 の110pxで
   合計17しか落ちず（写真上部がもともと明るい空なのでベールが効いて見えない）、写真の内容
   （遠景の山の稜線）が始まる y=230→240 で −77.2 の崖になっていた。ベールのアルファが
   そこで既に0になっているため、崖がそのまま見えていたのが「ぱつっと切れる線」の正体。
   → 崖の位置(y≈235)を越えてもアルファが残るようにストップを16段に増やし、ease-out の
   カーブで落とす。実測で y=230→240 の隣接差は −77.2 → −25.5 に縮小（67%減）。

   ★写真を白く潰さないこと（RYO追加指示・最優先）：
   ストップを増やす方向で崖を消すこと。白を下へ広げる方向で解決してはいけない。

   PROD-20260919-003（RYO指示：「写真もちゃんと見せたいから ほぼ白グラデみたいなのはやめてね」
   →「もう少し白グラデ薄くできない？」）：
   純白区間（PC 0〜110px / SP 0〜80px）は「ロゴが白背景のJPEGで、白い矩形を隠す必要があった」
   ことだけが理由だった。ロゴを透過PNG（images/logo.png）にしたのでこの理由が消えたため、
   純白区間を廃止し、ピーク alpha を 1.0 → 0.30 に下げ、高さも PC410→330 / SP265→240 に詰めた。
   カーブは alpha = 0.30 × (1-t)^2.2 を16段で近似（PROD-002 の多段イージングは維持）。

   PROD-20260919-004（RYO指示：「もう少しだけ白グラデ強くてもいいよ ほんの少しだけね」）：
   カーブの式・段数・高さ・ストップ位置は PROD-003 のまま変更せず、係数だけ 0.30 → 0.40 に上げた。
   現行カーブは alpha = 0.40 × (1-t)^2.2（t=(y-90)/240 @PC / (y-65)/175 @SP）。純白は作らない。

   ★ナビ文字（--navy #1c4a73）のコントラストはベールに依存していない：
   ヒーロー写真は .hero__photo のマスクにより y=142px まで完全に透明で、ヘッダー帯（y0〜120）
   の地は .hero の水彩グラデーション（rgb(228,240,251)付近）。ベール無しでも実測 7.70:1、
   本実装で 8.14:1（WCAG AA 4.5:1 に対して十分）。

   ★y≈235 の「崖」について（未解決・RYO判断待ち）：
   y=230→240 の輝度差 −77.2 は写真そのものの水平線（遠景の稜線）であって、ベールの縁ではない。
   これを −25.6 まで均すには y≈235 で alpha ≥ 0.67 が必要＝実質 PROD-002 の濃さに戻る。
   「薄くする」と両立しないため、RYO の最新指示（写真を見せる）を優先してベールを薄くした。

   PROD-20260919-007（RYO指示：「白グラデきついわ / もっと優しく / ゆるやかに」）：
   ピークα 0.40 → 0.24、平坦区間 0〜90px → 0〜40px、減衰指数 2.2 → 1.6 に変更。
   ・ピークを下げた根拠：PROD-003 で支給ロゴを透過PNG化した時点で「ロゴの白い矩形を隠す」
     という純白区間の存在理由が消えている（STATUS.md 該当節参照）。
   ・平坦区間を短くし指数を緩めた根拠：0〜90px が平坦だと 90px で折れ点ができ、そこから
     指数2.2で急降下するため「帯」として knick が見える。40px＋指数1.6 にすると
     上から下まで連続的に減衰し、段差が出ない。
   ・PC実測（本番 ?cb= 付き／x700-1420を20px刻みで平均）では、写真上部が消える主因は
     このベールではなく .hero__photo の縦マスクだった（下の .hero__photo 側コメント参照）。
     ベール単独の寄与は y150 で -5.5%、y180 で -11.1% にすぎない。

   ★★ PROD-20260919-008（RYO指示：「ごめん白グラデやっぱいらんわ」）：
   .hero::before（白ベール）を PC・SP とも撤去した。display:none で隠すのではなく
   ルールごと削除している（RYO方針「消すときは消す」）。
   上の PROD-002〜007 の経緯・実測値は履歴として残置する。復活させる場合の旧値は
   STATUS.md「🔴 FV上部の白ベールは撤去（PROD-20260919-008）」節に全文を保存済み。
   なお .hero の地色 #ffffff（PC/SP 計3箇所）と .hero__photo の縦マスク 142→175px は
   「白グラデ」ではないため、今回の撤去対象外＝維持している。
   z-index について：ベールが占めていた z-index:1 は空きになるが、
   .hero__media(0) < .hero__content(3) の順序は元から独立しているため影響なし。 */
/* FAIL6対応：.ph の共通スタイルは align-items:flex-end（キャプションを下端に置く）だが、
   ヒーローだけは下端に .wave--hero-bottom の波形カーブが重なるため、キャプションを上端に移す */
/* PROD-20260922-004（RYO支給画像の反映）：
   旧値（切り戻し用）：
     .hero__photo { height: 100%; align-items: flex-start; background-size: cover; background-position: 68% 12%; }
     ＋ front-page.php のインライン style で background-image:url(images/temp_hero_photo.png);width:100%;height:100%;
   基底（=SP）は FV-sp.jpg（851×1061）。`background-size: 100% auto` は幅に対して
   等倍スケールするため縦横比 0.8020 は崩れない（cover だとトリミングが入り、
   支給画像に焼き込まれた手書き見出し・カモメ・下端の波が切れるため使わない）。 */
.hero__photo {
  width: 100%;
  height: 100%;
  align-items: flex-start;
  background-image: url('images/fv-sp.jpg');
  background-size: 100% auto;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.hero__content {
  position: relative;
  z-index: 3;
  /* カンプ実測：1行目左端 x≈134px@1440。左paddingをこれに合わせる */
  padding: 60px 20px 40px 134px;
  max-width: 640px;
}
/* カンプ実測（862px空間→×1.6705換算）：
   1行目「海を、見て、」 left=80(→134) top=102(→170) インク高さ42(→70)
   2行目「触れて、」     left=138(→231) top=158(→264)
   3行目「発見する。」   left=185(→309) top=197(→329)
   手書き文字は行ごとにインクの高さ・行送りが不規則（QA_FULL実測でも「不均一」と確認済み）。
   階段状に右下へずれていく配置を、各行に個別のmargin-left/margin-topで再現する。
   色は実測rgb(0,50,118)台に近い --hand-ink に変更（従来の--navyは明るすぎた） */
.hero__headline {
  font-family: var(--font-hand);
  font-weight: 400;
  color: var(--hand-ink);
  font-size: 76px;
  line-height: 1.15;
  margin-bottom: 18px;
}
/* line-height:1のマージン計算では実フォントの行送りメトリクスとズレて行が重なったため、
   line-height:1.15の自然な行送りに任せ、margin-leftのみで階段状の字下げを再現する方式に変更。
   バグ修正（RYO指摘・2026-09-04）：直前の `.hero__headline span { margin-left: 0; }` の
   詳細度(0,1,1)が `.hero__headline-l2/l3`(0,1,0)より高く、階段状のmargin-leftが常に0で
   打ち消されていた。getComputedStyleで実測して発見。span共通ルールからmargin-leftを削除して解消 */
/* PROD-20260922-004：支給画像に手書き見出しが焼き込まれたため、h1 を視覚的にのみ隠す。
   display:none / visibility:hidden は不可（スクリーンリーダーからも消え、ページのH1が失われる）。
   いわゆる visually-hidden（sr-only）パターン。DOM・アクセシビリティツリーには残る。
   切り戻し：front-page.php の h1 から `hero__headline--visually-hidden` を外すだけでよい。 */
.hero__headline--visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero__headline span { display: block; }
.hero__headline-l1 { margin-left: 0; }
.hero__headline-l2 { margin-left: 97px; }
.hero__headline-l3 { margin-left: 175px; }
/* PROD-20260922-004：RYO指示（2026-09-22「ヒーローの『海辺の研究基地。』『くにみクラゲ公民館』は
   消して」）により .hero__name のマークアップを撤去したため、下記の指定は当たる要素がなくなった。
   削除せずコメントで旧値を全文保存する（切り戻し用。front-page.php 側にもマークアップ全文あり）。
.hero__lead { font-size: 13px; color: var(--navy-soft); margin-bottom: 6px; letter-spacing: .04em; }
.hero__title { display: flex; flex-direction: column; gap: 2px; }
.hero__title strong { font-size: 20px; font-weight: 700; color: var(--navy); }
.hero__title small { font-size: 10px; letter-spacing: .08em; color: var(--navy-soft); }
*/

/* PROD-20260922-004：ヒーロー下端の波SVGは撤去した（支給画像に波形カットが焼き込まれており、
   残すと波が二重になるため）。front-page.php 側のSVGも退避済み。切り戻し用に旧値を残す：
   .wave--hero-bottom { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; height: 60px; } */

/* =====================================================================
   ABOUT
   ===================================================================== */
/* PROD-20260905-016 項目7：ABOUTの背景が真っ白でヒーローと地続きに見えない件。
   カンプ(top-pc.png)のABOUT左右余白をピクセル実測すると rgb(248-250,248-250,249-251)＝
   ほぼ白で、「一面の水色」ではない（x8/x30/x845/x858 を y420〜670 で走査。値は上記レンジ）。
   カンプで水色に見えているのは ①ヒーローから続く水彩の残り(y395付近 rgb(196,227,248))
   ②建物写真自身の水彩の空 ③下端のキッズクラブ側の空(y695 rgb(150,200,236)) の3つ。
   よって指示どおり「淡い水色のグラデーションをセクション全体に敷き、上下をフェード」で実装する。
   上端はヒーロー下端の波の塗り #fbfcfd と同色から始めて矩形の縁が出ないようにしている。 */
.about {
  position: relative;
  /* PROD-20260905-017：PROD-016 の淡い水色（最濃 #eef6fc=rgb(238,246,252)）は、
     今回 ABOUT の写真を1枚素材（紙の白 rgb(250,249,248)）に統合した結果、
     素材の矩形が「周囲より白い長方形」として見える原因になった。
     カンプ実測の地色 rgb(248-250) に寄せてトーンを弱める（水色は残すが差を約半分に）。 */
  /* PROD-20260922-008（RYO指示原文：「くにみクラゲ公民館って、どんなところ？ セクション白背景に」）：
     ABOUT セクションの地色を #ffffff に変更。
     PROD-20260922-005 で右側を支給 about.jpg（白地の不透明な矩形）1枚に差し替えた結果、
     この淡い水色グラデの上で画像が「周囲より白い長方形」として縁が見えていた
     （PROD-005 の「正直な申告」3 で報告済み）。地色を白にすることで縁も同時に消える。
     🔴 .about の background 宣言は style.css 内に **2箇所**（この基底ルールと
        @media (max-width:899px) 内の1箇所）。@media (min-width:900px) には background 宣言は無い
        （PC は基底ルールを継承）。grep で全件洗い出して 2/2 とも変更した。
        ＝ PROD-20260919-005/006 で .hero の地色を片方のブレークポイントに取り残した事故の再演を防ぐため。
     🔴 --sky-01 の変数定義そのものは変更していない（.activitylog / .info / .subpage-hero で使用中）。
     旧値（切り戻し用・全文）：
     background: linear-gradient(180deg,
         #fbfcfd 0%,
         #f4f8fc 16%,
         #f7fafc 42%,
         #f9fbfc 72%,
         #fafbfc 100%); */
  background: #ffffff;
  /* PROD-20260918-001：56/52px → トークン化（PC 120px / SP 72px）。
     ヒーロー下端の波(.wave--hero-bottom)はヒーロー側に absolute で固定されており、
     ABOUTの padding を増やしても波の継ぎ目は動かない */
  padding: var(--space-section-lg) 20px var(--space-section);
}
.about__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}
.about__body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); margin-bottom: 18px; } /* PROD-20260922-010 旧: font-size: 13.5px */
/* PROD-20260922-014：PC／SPの文面出し分けを廃止（本文はPC版に一本化）。
   .about__body--pc / --sp のクラス自体がマークアップから消えたため、この宣言は不要になった。
   PROD-20260922-014 旧:
   / * SP専用の本文（5行1ブロック）はPCでは出さない。PC側の見た目・高さは一切変えない * /
   .about__body--sp { display: none; } */
/* PROD-20260922-014：<picture> で SP/PC の画像を出し分けるようになったため、
   インライン要素である <picture> をブロック化して従来の .about__media 直下 <img> と同じ箱にする
   （新しい色・フォント・余白トークンは追加していない。display の1宣言のみ） */
.about__media picture { display: block; }
/* PROD-20260922-014：ABOUT本文のSP専用の改行（front-page.php の <br class="br--sp">）。
   PCでは出さない＝PCの改行位置は PROD-20260905-013 以前から1文字も変わらない */
.br--sp { display: none; }

/* 2026-09-04 RYO指示で方針転換：グレー矩形+CSS clip-pathでの近似を撤回し、カンプ画像から
   直接切り出した仮素材PNG（assets/img/temp/temp_about_*.png、白背景を透過済み）を配置する
   方式に変更。カンプ862px空間で共通の原点(250,390)を基準に、5枚すべてを同一スケール(1.4倍)で
   変換した絶対座標に置くことで、パズルのように継ぎ目・重なり・傾きがそのまま再現される
   （実測はPythonのcrop座標そのもの。ブラウザ実測値は本ファイル末尾コメント参照） */
/* 2026-09-04 追記：scale=1.4だと幅860pxになりgrid-template-columns(0.72fr/1.28fr)の
   min-content計算でテキスト列が152pxまで潰れる実測不具合が発生（getBoundingClientRectで確認）。
   scale=1.15(幅710px)に縮小し、grid-template-columnsも420px(テキスト固定)+1fr(残り=約710px)の
   明示指定に変更して解消 */
/* 2026-09-04（追記23）RYO指摘「建物写真が小さく右寄り／コラージュが右下に縦気味に固まっている」
   を受け、カンプ(862px空間)を再実測して座標を全面差し替え。旧実測(追記18時点)は建物が
   482×265・collage1が(395,540)起点だったが、目視確認の結果これは不正確（建物にスタンプ・
   コラージュの縁まで含んだ緩い切り出しで、実際の建物本体はその65%程度の面積しかなかった）。
   今回はPythonでグリッド線を重ねた拡大画像を複数作成し、建物・コラージュ2枚（読書中の女の子・
   磯観察）＋その背後に半分隠れて覗く3枚目（ノート/地図风の小さな紙片）を個別に実測しなおした。
   実測bbox（862px空間）：building(435,448,800,612)=365×164／collage1(285,515,430,680)=145×165／
   collage2(418,607,585,690)=167×83／collage3(288,548,345,608)=57×60(覗きのみ切り出し)。
   建物左上を原点(0,0)とし、他要素は建物からの相対差分×1.6705で配置。カンプでは3枚のコラージュが
   建物の下端沿いに横方向へ広がっており、それを再現するため負のleftを使い建物より左へ張り出す
   構成に変更（.about__mediaにmargin-leftをマイナスで与えテキスト列側へ寄せている） */
/* 2026-09-04（追記25）秘書指摘「白い矩形の箱になっている」に対応：追記23のクロップはRGB直接保存
   で透過処理をしておらず、水彩のラフエッジが失われ矩形の白箱になっていた。
   flood fill方式（背景に近い白(min channel>=190)を境界から連結探索し、閾値190-225の範囲で
   アルファを滑らかにランプさせる。写真内部の明るい領域は境界と繋がっていない限り透過されない）
   で再処理。あわせて各クロップに15-30px程度の余白を追加し（旧bboxは写真の内容ぴったりで
   透過処理の余地がなかった）、ラフエッジのグラデーションが表現できるようにした。
   新クロップ範囲（862px空間）：building(410,425,820,635)=410×210（コンパス文字は白塗り除去後に
   処理）／collage1(292,512,438,693)=146×181／collage2(400,599,600,705)=200×106／
   collage3(275,535,360,620)=85×85／stamp(680,595,810,725)=130×130。
   建物原点(0,0)を基準に相対差分×1.6705で再配置（座標系は追記23と同じ考え方だが、
   余白を含むクロップに合わせて数値のみ更新） */
/* PROD-20260905-017 項目4：秘書指摘「カンプPCは建物写真がより大きく、左端がテキスト列のすぐ右まで
   来ている／子どもの写真2枚は建物写真の下端に重なる／実装は写真群全体が右に寄っていて小さい」。
   実測の結果、5枚構成の各要素のx座標はカンプ通りだったが、
     ① 建物クロップ(410,425)-(820,635) が水彩の空を大きく切り落としていた
        （カンプの空の水彩は x≈240〜855・y≈398〜640 まで広がっている＝左端は page 481px相当）
     ② 5枚とも縦方向に一律 +29px 下にずれていた（media の margin-top:20px 由来）
   の2点がズレの実体だった。SP版で成功している「1枚素材に集約」方式に合わせ、
   建物＋コラージュ2枚＋覗きの紙片＋丸スタンプ＋水彩の空＋手描き装飾（クラゲ線画・"old note"）を
   **カンプの1回の切り出し** (240,396)-(858,719)=618×323 に統合。
   継ぎ目・アルファ破綻・相対座標のズレが原理的に出ない。
   ×1.6705 → 1032×540px、配置は page(400.9, 661.5)＝カンプと同一位置・同一倍率。
   左端 x=240 まで含めたのは、旧5枚構成に入っていた手描きのクラゲ線画・"old note" が
   カンプ x245〜300 にあり、切り落とすと既存表示からの後退になるため。
   この帯に写り込んでいた本文の末尾（「体験を通して、」）はインペイントで消去済み。
   切り出し内に焼き込まれていた座標表記＋コンパスは拡散インペイントで消去済み（Readで目視確認）。 */
/* PROD-20260922-005（RYO支給 about.jpg の反映）：
   PCで実際に見えていたのは .about__img--building（1032×540・カンプからの1枚切り出し）だけで、
   collage1-3 と --sp は display:none だった。支給画像 about.jpg は 1507×1283（縦横比 1.1745）で
   縦長比率が大きく変わるため、高さ固定(505px)・絶対配置のままでは縦横比が崩れる。
   → .about__media を「高さ auto の通常フローの箱」に変え、画像を width:100% / height:auto で
     等倍スケールさせる（画像を歪めない）。
   幅は列いっぱいの 100%（PC1440px では --wrap 1320 − テキスト列 470 − gap 30 = 820px）。
   高さは 820 ÷ 1.1745 ≒ 698px。
   旧値の margin-left:-110px / margin-top:-57px（テキスト列側への食い込み）は採用していない：
   旧仮素材は水彩のラフエッジを透過PNG化したもので縁が溶けていたため食い込ませても
   成立したが、支給 about.jpg は白地の不透明な矩形なので、食い込ませると本文に
   白い矩形が重なって文字が欠ける（DOM順で画像が後＝前面になる）。

   旧ルール（切り戻し用・全文。temp_*.png はローカル・サーバーとも削除していない）：
   .about__media { position: relative; width: 985px; height: 505px; margin-top: -57px; margin-left: -110px; max-width: none; overflow: visible; }
   .about__img { position: absolute; display: block; }
   .about__img--building   { left: -49px; top: 0px; width: 1032px; height: 540px; max-width: none; z-index: 1; }
   .about__img--collage3,
   .about__img--collage1,
   .about__img--collage2 { display: none; }
   .about__img--sp         { display: none; }
*/
.about__media {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 0;
  margin-left: 0;
  max-width: none;
  overflow: visible;
}
.about__img { display: block; }
.about__img--main { position: static; width: 100%; height: auto; max-width: none; }

.wave--about-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 50px; }

/* =====================================================================
   KIDS CLUB
   ===================================================================== */
.kidsclub {
  position: relative;
  min-height: 344px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--sky-01);
}
.kidsclub__photo { position: absolute; inset: 0; }
/* RYO指摘（2026-09-04）：この白いグラデーションスクリムはカンプに存在しない。
   グレーのダミー写真だった頃に秘書がテキスト可読性のために追加させた指示だったが、
   実写真が入った今カンプに忠実でないため撤去した */
.kidsclub__panel {
  position: relative;
  z-index: 2;
  /* PROD-20260918-001：40px → トークン化。KIDS CLUBは写真全面セクションのため
     セクション側に padding を足すと写真の外に色帯が出る。パネルの内側余白で厚みを出す */
  padding: var(--space-section-sm) 24px;
  max-width: 480px;
  margin-left: 6%;
  /* RYO指摘：大見出しを1行に収めるためPCではパネル幅を拡張（下記min-width:900pxで上書き） */
  /* FAIL5対応：カンプ実測 RGB(19,80,148) の濃い青文字（白文字ではない） */
  color: #135094;
}
.kidsclub__body { color: #1c4a73; font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: 18px; } /* PROD-20260922-010 旧: font-size: 13.5px */
.kidsclub__body--sp { display: none; }
/* PROD-20260923-001 旧: .kidsclub .section-label--onphoto { color: #135094; }
   RYO指摘「ABOUTなどサブコピーの色変わってない」に対し、ラベルの色を全セクション
   --ink-heading に統一する。この KIDS CLUB ラベルは白い .kidsclub__panel の上に乗っており
   写真の直上ではないため青でよい（PROD-20260922-014 で見出し側だけ先に統一済みだった残り）。 */
.kidsclub .section-label--onphoto { color: var(--ink-heading); }
/* PROD-20260922-014 旧:
   .kidsclub .section-label- -onphoto,
   .kidsclub .section-title- -onphoto { color: #135094; }
   .kidsclub .section-title- -onphoto { font-size: 21px; }
   （"- -" は "--" の退避表記）
   見出しの色を全セクション --ink-heading(#00197d) に統一するため、見出し側だけ分離した。
   ラベル(.section-label- -onphoto)の #135094 は今回の対象外なので据え置き。
   この見出しは白い .kidsclub__panel の上に乗っており写真の直上ではないため、青でよい
   （SPは PROD-20260905-015 以降すでに --ink=#00197d で表示されていた＝SPに合わせる指示と一致）。 */
.kidsclub .section-title--onphoto { color: var(--ink-heading); }
/* RYO指摘：カンプの大見出し「海の研究クラブ／探検隊」はヒーロー見出しと同じ手書き風フォントで、
   インク高さ実測73.5px@1440（font-size 85〜95px相当）。実装は21pxのゴシックのまま埋もれていた。
   .hand（.hero__headlineと同じ手書きフォント）を使い、色もカンプ実測rgb(5,51,116)に近い
   --hand-inkに変更、サイズを大幅拡大する */
.kidsclub .section-title--onphoto .hand {
  display: block;
  font-size: 40px;
  color: var(--hand-ink);
  line-height: 1.2;
  margin-top: 6px;
}
@media (min-width: 900px) {
  /* RYO指摘：カンプは「海の研究クラブ／探検隊」が1行。58pxではパネル幅480pxを超えて2行に
     折り返していた。パネル幅を620pxに拡張しつつnowrapで1行に収める。
     カンプ実測インク高さ73.5px@1440相当(font-size推定85〜95px)にはこれでもまだ届かないが、
     1行に収まる上限として64pxに設定（それ以上だと620px幅でも折り返す） */
  .kidsclub__panel { max-width: 620px; }
  /* RYO指摘：64pxだと右の子どもの体に見出しが食い込む。カンプは写真左の空いた空間に収まって
     いるため46pxに縮小し、パネル自体もmax-widthを維持したまま食い込みを回避する */
  .kidsclub .section-title--onphoto .hand { font-size: 46px; white-space: nowrap; line-height: 1.15; }
}
.kidsclub .hand { font-size: 23px; display: inline-block; margin-top: 4px; color: #135094; }

/* =====================================================================
   EXPERIENCE
   FAIL2対応：カンプは「1枚の連続写真バナーを斜めクリップで2分割し、
   その上にメモカードをオーバーレイ」する構造（PC）。
   写真の中身・doodleの絵柄自体は仮素材のため除外軸（RYO確定事項15）。
   枠の座標・切り抜き形状・オーバーレイ配置のみが判定対象。
   ===================================================================== */
.experience { position: relative; padding: 22px 0 8px; background: var(--white); }
.experience__head { max-width: var(--wrap); margin: 0 auto 6px; padding: 0 20px; }

.experience__grid { position: relative; }

/* PCではバナー全体を写真1枚のように見せるため、SP用の縦積みカードは非表示にし
   .experience__banner を使う（PC用スタイルは 900px メディアクエリ側） */
.experience__banner { display: block; position: relative; }
/* SPではPCの全面写真バナー(.exp-photo)は使わず、カード内蔵の .exp-card__photo-sp を使う */
.exp-photo { display: none; }

/* ---- SP（デフォルト）：写真→カードの縦積み。カンプSPの構造どおり ----
   .exp-card は「写真＋メモ」をまとめるだけの素の入れ物（背景・負のmarginは持たない）。
   メモ部分だけを .exp-card__memo としてラップし、そこに負のmarginで写真下端に重ねる
   （FAIL2再修正：以前は .exp-card 自体に負marginを付けていたため、写真を持たないPCの
   最初のカードが見出しに食い込むバグがあった） */
.exp-card { position: relative; }
.exp-card__photo-sp { aspect-ratio: 2.7/1; border-radius: 2px; }
.exp-card + .exp-card { margin-top: 24px; }
.exp-card__memo {
  position: relative;
  margin: -14px 0 0 6%;
  width: 88%;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 8px 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.exp-card__label { font-size: 9.5px; letter-spacing: .18em; color: var(--navy-soft); font-weight: 700; margin-bottom: 3px; line-height: 1.3; }
.exp-card__title { font-size: 17px; color: var(--navy); font-weight: 700; margin-bottom: 3px; line-height: 1.4; } /* PROD-20260922-010 旧: font-size: 15px; line-height: 1.3（本文16pxより小さい見出しになるため17pxへ） */
.exp-card__text { font-size: var(--fs-body); color: var(--text); margin-bottom: 6px; line-height: var(--lh-body); } /* PROD-20260922-010 旧: font-size: 11px; line-height: 1.5 */
/* =====================================================================
   ACTIVITY LOG
   ===================================================================== */
/* FAIL4対応（QA3回目）：PC1.02倍・SP1.05倍の過大分を詰める */
/* PROD-20260918-001：2px → トークン化。EXPERIENCEバナー直下で最も詰まっていた箇所
   （変更前：バナー下端と活動記録の見出しの間がわずか2px）。写真直後なので lg を使う */
.activitylog { padding: var(--space-section-lg) 20px var(--space-section); background: var(--sky-01); }
.activitylog__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.activitylog__head { flex: 0 0 auto; width: 100%; margin: 0; }
.activitylog__lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-light); margin: 8px 0 12px; } /* PROD-20260922-010 旧: font-size: 12px */

.activitylog__list {
  flex: 1;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  position: relative;
}
.log-card { position: relative; }
.log-card__meta { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--navy-soft); margin-bottom: 6px; } /* PROD-20260922-010 旧: font-size: 10.5px */
.log-card__date::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border: 1px solid var(--navy);
  border-radius: 50%;
  background: var(--white);
  margin-right: 5px;
  vertical-align: middle;
}
.log-card__tag {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: var(--fs-body); /* PROD-20260922-010 旧: font-size: 9.5px（padding 1px 9px） */
  line-height: 1.5;
  color: var(--navy);
}
.log-card__tag--craft { background: #fff2df; border-color: #f0ddb8; color: #9a6a1c; }
.log-card__photo { aspect-ratio: 3.2/1; margin-bottom: 6px; border-radius: 2px; height: auto; }
/* PROD-20260922-010：カードの見出しが本文(16px)より小さいのは階層として破綻するため、
   本文トークンと同サイズにして太字で差をつける（方針5「サイズでは差をつけない／ウェイトで差をつける」）。
   旧: .log-card__title { font-size: 12px; font-weight: 700; ... line-height: 1.3; } */
.log-card__title { font-size: var(--fs-body); font-weight: 700; color: var(--navy); margin-bottom: 3px; line-height: 1.5; }
.log-card__excerpt { font-size: var(--fs-body); color: var(--text-light); line-height: var(--lh-body); } /* PROD-20260922-010 旧: font-size: 10.5px; line-height: 1.5 */

/* SPカルーセル用ページネーションドット（PCでは非表示） */
.activitylog__dots { display: none; }

/* =====================================================================
   CREATURES
   ===================================================================== */
/* PROD-20260918-001：30/20px → トークン化 */
.creatures { padding: var(--space-section) 20px; background: var(--white); }
.creatures__inner { max-width: var(--wrap); margin: 0 auto; }
.creatures__head { margin: 0 0 14px; }
.creatures__lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-light); margin: 8px 0 12px; } /* PROD-20260922-010 旧: font-size: 12px */

.creatures__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.creature-feature {
  position: relative;
  background: var(--navy-deep);
  aspect-ratio: 4/3;
  overflow: hidden;
}
/* RYO指摘：opacity(.9)による写真の減光・text-shadowはカンプに無い可読性の細工のため撤去 */
.creature-feature__photo { position: absolute; inset: 0; z-index: 1; }
/* PROD-20260923-011：写真を <button>（ライトボックス起動）にしたため、ボタンの既定外観を消す */
.creature-zoom {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
}
.creature-zoom:focus-visible { outline: 3px solid var(--white); outline-offset: -3px; }

/* PROD-20260923-011：
   旧: .creature-feature__no / __name / __latin をそれぞれ position:absolute + bottom で置いていた
       （.creature-feature__no { bottom: 64px; … } / __name { bottom: 40px; … } / __latin { bottom: 16px; … }）。
   No. を削除し、残る2行を .creature-feature__info でまとめて1つの absolute ブロックにした。
   info は写真ボタンの上に乗るので pointer-events:none にして、文字の上のクリックも
   ライトボックスに届くようにしている。 */
/* 🔴 恒久注意（PROD-20260923-011）：`.creature-card` 系は **TOP と `/creatures/`（page-creatures.php・
   `.subpage-creatures` 配下）の2ファイルで共有**している。PROD-20260923-010 の `.subpage-card` と同じ罠。
   今回の「写真の上に名前」化は RYO 指示の対象が TOP セクションだけなので、
   新規の宣言はすべて `.creatures` 子孫（= TOP の `<section class="creatures">`）に限定している。
   `.creature-card` 単独セレクタに書くと `/creatures/` が巻き添えになる。 */
.creature-feature__info,
.creatures .creature-card__info {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  z-index: 2;
  pointer-events: none;
}
.creature-feature__name, .creature-feature__latin,
.creatures .creature-card__name, .creatures .creature-card__latin {
  color: var(--white);
  font-size: var(--fs-body);
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
}
.creature-feature__name,
.creatures .creature-card__name { font-weight: 700; margin-top: 0; }
.creature-feature__latin,
.creatures .creature-card__latin { font-style: italic; display: block; }

.creatures__sub {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
/* PROD-20260923-011：小カードも .creature-feature と同じ「写真の上に名前」構造に統一。
   旧: .creature-card__photo { aspect-ratio: 4/3; margin-bottom: 6px; height: auto; }
       （写真の下／横に .creature-card__info をテキストとして置く形だった） */
.creatures .creature-card {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--navy-deep);
}
.creatures .creature-card__photo {
  position: absolute;
  inset: 0;
  width: auto;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  flex: none;
}

/* 🔴 `/creatures/`（.subpage-creatures）専用に残している旧基底。TOPでは上の `.creatures …`
   （詳細度 0,2,0）が後勝ちで上書きする。PROD-20260923-011 以前は下の3行が TOP と共用だった。
   `.creature-card__no` は TOP のマークアップからは削除済みだが `/creatures/` にはまだ残っている
   （RYO指示の対象が TOP セクションのみのため、そちらは触っていない＝正直な申告）。 */
.creature-card__photo { aspect-ratio: 4/3; margin-bottom: 6px; height: auto; }
.creature-card__no { font-size: var(--fs-body); color: var(--navy-soft); line-height: 1.45; }
.creature-card__name { font-size: var(--fs-body); font-weight: 700; color: var(--navy); line-height: 1.45; margin-top: 2px; }
.creature-card__latin { font-size: var(--fs-body); font-style: italic; color: var(--text-light); line-height: 1.45; }

/* =====================================================================
   INFORMATION / ACCESS
   ===================================================================== */
/* PROD-20260918-001：14/18px → トークン化 */
.info { position: relative; padding: var(--space-section) 20px var(--space-section-lg); background: var(--sky-02); }
.info__inner { max-width: var(--wrap); margin: 0 auto; position: relative; z-index: 2; }
.info__head { margin: 0 0 14px; }

/* FAIL2再修正（PROD-20260904-005・QA4回目）：カンプのパネルは上辺が波打つ不定形（紙がめくれた形）で、
   実装は border-radius の角丸矩形だった。パネル自体は透明にし、::before に clip-path で
   不定形の白背景を敷くことで、パネルのpadding・内容のレイアウトはそのままに輪郭だけ差し替える */
.info__panel {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  position: relative;
  z-index: 0;
}
/* FAIL1再修正（PROD-20260904-008・QA5回目）：以前のclip-pathは9点で5〜6山の明瞭なギザギザに
   なっていたが、カンプは「ほぼ直線に近い、控えめな1箇所の緩やかなうねり」だった。
   デザイン/top-pc.png（862px幅）の該当領域(x=250-860,y=1470-1520)をコントラスト強調して
   目視確認した結果、境界線はごく僅かな1つの緩やかな山（振幅は862px空間で目視10-15px程度、
   1440px換算で約17-25px）で、複数回の上下は見られなかった（自動ピクセル境界検出は
   背景の淡青とパネル白の明度差が小さくノイズが出たため、コントラスト強調画像の目視を採用）。
   info__panel実測height=170.9pxに対し、振幅約20pxは約11.7%に相当。
   4点のみで1つの緩やかな山を作る形に単純化した */
.info__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--white);
  box-shadow: 0 10px 30px rgba(14,58,99,.12);
  clip-path: polygon(0% 8%, 35% 0%, 70% 5%, 100% 2%, 100% 100%, 0% 100%);
  z-index: -1;
}
.info__item { display: flex; gap: 12px; align-items: flex-start; }
.info__icon { flex-shrink: 0; margin-top: 2px; }
.info__label { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; color: var(--navy); margin-bottom: 6px; } /* PROD-20260922-010 旧: font-size: 13px */
/* RYO指摘：「大人（中学生以上）600円」等が折り返していた。カンプは各行が1行のため
   nowrapを明示（<br>で行を区切っているので改行位置はHTML側で確定済み） */
.info__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); white-space: nowrap; } /* PROD-20260922-010 旧: font-size: 12.5px */
.info__note { font-size: var(--fs-body); color: var(--text-light); } /* PROD-20260922-010 旧: font-size: 10.5px */
/* 料金行：PCカンプは項目名のすぐ右に金額、SPカンプはパネル右端に右揃え（下のSPブロックで上書き） */
.info__fee { display: block; }
.info__fee-price { margin-left: 14px; }
/* 料金アイコンのカンプ差（PC=チケット型 / SP=丸囲み¥）の出し分け */
.info__icon--sp { display: none; }
.info__map { aspect-ratio: 4/3; border-radius: 4px; overflow: hidden; height: auto; }
.info__cta { justify-self: start; white-space: nowrap; }

.wave--info-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; z-index: 1; }

/* =====================================================================
   CONTACT
   ===================================================================== */
/* RYO指摘：カンプに濃紺の帯はない。フォールバック背景をnavy-deepから白に変更（写真が読み込まれれば見えない） */
/* PROD-20260918-001：height:202px 固定 → 廃止。
   実測でパネル(266px)がセクション(202px)より高く、overflow:hidden で上下32pxずつ
   切り落とされていた（getBoundingClientRect で確認）。min-height のみにして
   パネルの内側余白でセクション高さが決まるようにする */
.contact { position: relative; min-height: 202px; display: flex; align-items: center; overflow: hidden; background: var(--white); }
.contact__photo { position: absolute; inset: 0; }
.contact__panel {
  position: relative;
  z-index: 2;
  /* PROD-20260918-001：26px → トークン化（CONTACTも写真全面のためパネル内側で厚みを出す） */
  padding: var(--space-section-sm) 24px;
  max-width: 480px;
  margin-left: 6%;
  color: var(--white);
}
.contact__text { font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(255,255,255,.9); margin-bottom: 14px; } /* PROD-20260922-010 旧: font-size: 12px */

/* =====================================================================
   FOOTER
   ===================================================================== */
/* PROD-20260918-001：20/14px → 上部のみトークン化（下部は詰めたままでよい） */
.footer { background: var(--white); border-top: 1px solid var(--line); padding: var(--space-section-sm) 20px 32px; }
.footer__inner { max-width: var(--wrap); margin: 0 auto; }
.footer__brand { margin-bottom: 14px; }
.footer__logo { display: flex; align-items: center; gap: 10px; }
/* PROD-20260918-003：仮ロゴを撤去しRYO支給ロゴ画像に差し替え。フッター背景は #ffffff なので
   白背景JPEGでもそのまま置ける（グラデーション不要）。 */
.footer__logo-img { display: block; height: 64px; width: auto; }

.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
/* RYO指示でフッターを3カラムのグループ構成に再編（カンプの7カラム横並びは意図的な逸脱）。
   グループ見出しはリンクではなくただのテキストラベルに変更したためベース色を追加 */
/* PROD-20260922-010 旧: .footer__col-title { font-size: 12px; ... line-height: 1.3 }
       .footer__col-title a { font-size: 12px; ... line-height: 1.3 }
       .footer__contact-info { font-size: 11px; ... line-height: 1.7 } */
.footer__col-title { font-size: var(--fs-body); font-weight: 700; color: var(--ink); white-space: nowrap; line-height: var(--lh-body); }
.footer__col-title a { font-size: var(--fs-body); font-weight: 700; color: var(--navy); white-space: nowrap; line-height: var(--lh-body); }
.footer__contact-info { font-size: var(--fs-body); color: var(--text-light); line-height: var(--lh-body); margin: 0 0 14px; }
.footer__col ul { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
/* PROD-20260922-010 旧: .footer__col ul li { line-height: 1.3 }
       .footer__col ul a { font-size: 11px; ... line-height: 1.3 } */
.footer__col ul li { line-height: var(--lh-body); }
.footer__col ul a { font-size: var(--fs-body); color: var(--text-light); line-height: var(--lh-body); }

.footer__sns { display: flex; gap: 14px; padding: 14px 0; }
.footer__sns a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
}
.footer__bottom p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-light); } /* PROD-20260922-010 旧: font-size: 10.5px */

/* =====================================================================
   PC LAYOUT（min-width: 900px）
   ===================================================================== */
@media (min-width: 900px) {
  body { font-size: var(--fs-body); } /* PROD-20260922-010 旧: font-size: 15px */

  /* PROD-20260904-012 で追加したSP専用要素はPCでは出さない（PC構成は既存QA通過状態を維持） */
  .log-card--sponly { display: none; }
  .creatures__btn-sp { display: none; }

  .header__burger { display: none; }
  .header__nav { display: block; }
  .sp-nav { display: none !important; }
  /* PROD-20260919-001：PCでは暗幕も出さない */
  .sp-nav-overlay { display: none !important; }
  /* FAIL7対応：PCはカンプ換算109pxに対し実装85pxで詰まっていたため拡大 */
  /* PROD-20260918-003：支給ロゴが縦積みロックアップ（比2.4653）に変わり、旧仮ロゴ（52px高）の
     ままでは館名が読めない大きさになる。ヘッダー全体の高さは実測120pxのまま変えず
     （＝ヒーロー見出しの開始y=156px・下層ページの padding-top 132px に影響を出さない）、
     上下paddingを 34px → 18px に詰めてロゴ側に 84px を配分した。18+84+18 = 120px。
     ロゴの縦中心も 60px で従来と同一、ナビのy(46.5px)も変わらない。 */
  .header__inner { padding: 18px 20px; }

  /* PROD-20260905-018 項目2：ヘッダーのロゴが小さい。
     カンプ(top-pc.png)実測（862px空間 → ×1.6705）：
       クラゲアイコンの描画 bbox x56-79 / y19-50 = 24×32 → 40×53px@1440
       「くにみクラゲ公民館」インク bbox x88-226 / y22-36 = 139×15 → 幅232px / インク高25px@1440
         → 9字で232px＝25.8px/字。CJKのインク高/em比0.88から font-size ≒26px
       英字ライン（カンプ当時の表記。PROD-20260919-001 で `Kunimi Jellyfish Public hall` に統一済み）
         x87-226 / y43-48 → 幅232px / キャップ高10px@1440
       アイコン右端(79)→文字左端(88) = 9px → gap 13px@1440
       文字色：ストローク中心画素の中央値がfrac 0.15→0.10で rgb(16,64,130)→rgb(12,57,125) に収束
         （既存 --navy rgb(28,74,115) より濃く青い）
     SVGは仮ロゴ（viewBox 0 0 60 60 の中で描画が約32×43しかない）ため、SVG自体を70pxに拡大して
     負マージンでボックスを 40×52 に詰め、描画実寸を 37×50px にする（HTMLは変更せずPCのみ上書き）。
     SPは指示により現状維持のため、この上書きは min-width:900px の中だけに置く。 */
  /* PROD-20260918-003：上の PROD-20260905-018 項目2（仮ロゴSVGを70pxに拡大し負マージンで
     詰める指定）は、仮ロゴごと不要になったため撤去。支給ロゴ画像のサイズ指定に置き換える。
     84px × 2.4653 = 表示幅 207.1px。ロゴ内の「くにみクラゲ公民館」の実寸は
     769px（画像内）× (84/346) = 186.6px となり、旧仮ロゴのテキスト236.3pxよりは小さいが、
     ヘッダー高さ120pxを維持したままでの最大値。 */
  .header__logo-img { height: 84px; }

  /* RYO指摘：ヘッダーをposition:absoluteにしてheroがtop:0から始まる構造に変えたのに
     高さを555pxのまま据え置いていたため、カンプ実測の下端663px(862空間y≈397×1.6705)に対し
     108px不足していた。663pxに修正 */
  /* PROD-20260922-004：旧値 `.hero { min-height: 663px; }` は下の aspect-ratio 指定に置き換えた */
  /* PROD-20260905-016 項目1：カンプPCのヒーローは写真が全幅ではなく「右側〜中央のみ」で、
     左側の約4割は淡い水色の水彩背景。写真の左端はぼかされて背景に溶けている。
     カンプ実測(862px空間)：水面・岩のテクスチャが立ち上がるのは x≈345（=1440換算 576px＝40.0%）、
     ぼかしの帯は x≈285(33.1%)〜x≈365(42.3%)。
     左側背景の実測色（x8/x30/x120 を y30〜385 で走査）：
       y30 rgb(193,222,250) / y90 rgb(211,231,251) / y150 rgb(226,238,250) /
       y220 rgb(248,249,252) / y300 rgb(244,248,250) / y360 rgb(204,228,245) / y385 rgb(195,226,246)
     → 上が水色・中央が白寄り・下でまた水色に戻る縦グラデーション。
     写真は mask-image の横グラデーションで 30%→45% にかけてフェードインさせ、
     露出した左側に上記の背景グラデーションを見せる構造にした。
     ※RYO確定事項10でヒーローは手書き文字込みの1枚画像に差し替わる予定だが、
       その画像を入れる「枠の構造」を先に正しくしておくための対応。 */
  /* PROD-20260919-006（RYO指示「白」）：
     上記カンプ再現の水彩グラデーションは、RYOの「白グラデ」指示と矛盾するため #ffffff に変更。
     ヒーローは波込みの1枚画像に差し替え予定で、左40%の地色は画像側に含まれる想定。
     （経緯を追えるよう上のカンプ実測コメントは削除せず残す） */
  .hero { background: #ffffff; }
  /* PROD-20260922-004（RYO支給 FV-pc.jpg の反映）
     ---------------------------------------------------------------
     支給画像：1768×929（縦横比 1.9032:1）。手書き見出し・カモメ・下端の波形カットが焼き込み済み。
     【採用値と理由】
     ・background-size: 100% auto
       幅に対して等倍でスケールするので縦横比は絶対に崩れない。
       `cover` は枠に合わせてトリミングするため、上端の空・下端の波・左の手書き文字が
       ビューポート幅ごとに切れてしまう（＝支給デザインが壊れる）ので採用しない。
       1768px を 1440px 幅に収める＝0.8145倍の縮小。等倍(1768px)で置く案は
       サイト基準幅1440pxからはみ出して横スクロールの原因になるため不採用。
     ・background-position: 0 0 / background-repeat: no-repeat
       画像の上端＝ヒーローの上端。旧実装の 142px オフセットは
       「仮素材がカンプの y85 からの切り出しだった」ことに由来する補正なので不要。
     ・mask-image は撤去（下記の旧値コメント参照）。
       旧マスクは①左30〜45%の横フェード（カンプの「左40%は水彩背景」再現）と
       ②上端142→175px の縦フェード（仮素材の継ぎ目消し）の2枚合成だったが、
       支給画像は左端・上端まで絵が入った完成画像なので、どちらもフェードで
       絵を削るだけになる。マスクあり／なしを実ブラウザで撮り比べて判断した
       （検証結果は STATUS.md / AGENT_LOG.md の PROD-20260922-004 節に記載）。
     ・.hero に aspect-ratio: 1768/929 を与え、min-height 663px を解除。
       画像の高さ（1440px幅で 756px）とヒーローの高さを一致させ、
       画像下端の波形カットがそのままセクション境界になるようにするため。

     旧ルール（切り戻し用・全文）：
     .hero { min-height: 663px; }
     .hero__photo {
       background-size: 100% auto;
       background-position: 0 142px;
       background-repeat: no-repeat;
       -webkit-mask-image:
         linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 100%),
         linear-gradient(to bottom, rgba(0,0,0,0) 142px, rgba(0,0,0,1) 175px);
       mask-image:
         linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 45%, rgba(0,0,0,1) 100%),
         linear-gradient(to bottom, rgba(0,0,0,0) 142px, rgba(0,0,0,1) 175px);
       -webkit-mask-composite: source-in;
       mask-composite: intersect;
     }
     ※ 仮素材 temp_hero_photo.png はローカル・サーバーとも削除していない */
  .hero {
    min-height: 0;
    aspect-ratio: 1768 / 929;
  }
  .hero__photo {
    background-image: url('images/fv-pc.jpg');
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* カンプ実測：1行目左端 x≈134px@1440、1行目インク上端 y≈170px@1440。
     headerがposition:absoluteでヒーローに重なる構造に変更したため、
     見出しがヘッダーのロゴ・ナビ(y0〜約110px)と被らないようpadding-topを拡大 */
  .hero__content { padding: 156px 20px 30px 134px; }
  /* カンプ実測：見出しインク高さ約70px@1440。Yomogiフォントは実測で
     font-size:46px時にインク高さ約54px（比率約1.17）になることを実機で確認したため、
     70px ÷ 1.17 ≈ 60px に拡大（旧46pxはカンプよりひとまわり小さかった） */
  .hero__headline { font-size: 60px; margin-bottom: 12px; }

  /* PROD-20260905-017：ABOUTの1枚素材は952px固定のため、ビューポートが1440pxより狭いと
     セクション外へはみ出して body の横スクロールを誘発する（1000px幅で実測 right=1395px）。
     1440pxでは画像右端1433px＝セクション内に収まっているため見た目は変わらない。
     overflow-x:clip（y方向は visible のまま）で中間幅の横スクロールだけを止める */
  .about { overflow-x: clip; }
  /* 🔴 PROD-20260923-009（RYO指示原文：「文字と写真縦軸揃えたい」「中央基準に」）
     PC帯のみ、左の文字カラムと右の写真カラムを垂直中央で揃える。
     BEFORE（本番実測・align-items:start）：1440で .about__text cy=1180.11 / .about__media cy=1285.70
     ＝写真の方が背が高い（487px vs 698px）ため文字が 105.59px 上に寄って見えていた。
     .about__media の margin-top / margin-left は PROD-20260922-005 の時点で 0（過去の
     -57px / -110px の食い込みは同PRODで廃止されコメント保存のみ）。よって center 化で
     写真の食い込み量・はみ出し方は変わらず、位置が下→中央に動くだけ。打ち消し調整は不要。
     SP帯（max-width:899px）は .about__text が display:contents の1カラムのため対象外。
     PROD-20260923-009 旧: .about__inner { grid-template-columns: 470px 1fr; align-items: start; gap: 30px; } */
  .about__inner { grid-template-columns: 470px 1fr; align-items: center; gap: 30px; }
  /* RYO指摘（2026-09-04）：section-titleへの一律44px指定は撤回。カンプはセクションごとに
     見出しサイズが違うため、セクションごとに幅(862px空間の文字幅/文字数)を実測して個別指定する。
     ABOUT："くにみクラゲ公民館って、"(12字) 実測幅254px(862)→423px(1440)÷12字≈35px/字 */
  /* PROD-20260922-014 旧: .about .section-title { font-size: 35px; font-weight: 600; } */
  /* CREATURES："クラゲ公民館の"(7字) 実測幅245px(862)→409px(1440)÷7字≈58px/字。
     ただしcreatures__headの列幅300pxでは58pxだと2行目"いきものたち"も入りきらないため、
     折り返し崩れ回避を優先し48pxに調整（正直な申告：実測58pxより控えめ） */
  /* PROD-20260922-014 旧: .creatures__head .section-title { font-size: 44px; font-weight: 600; white-space: nowrap; }
     nowrap も外す：見出しは <br> で2行に組まれており、32px統一後は列幅300pxに収まる（実測で確認）。 */

  /* PROD-20260905-016 項目6：見出し「EXPERIENCE / 体験プログラム」とバナーの間が空きすぎ。
     カンプ実測(862px空間)：ラベルのインク y927-932、見出しのインク y941-955、
     バナー画像の上端 y957（既存CSSコメントのbbox(0,957,862,1090)と一致）。
     → ラベル上端からバナー上端まで 30px(862空間) = 50px@1440。
     実装は同区間が 103px（head top 1674 → banner top 1777）で53px開いていた。
     原因は見出しの font-size が暫定40pxで、カンプ実測（インク高14px→×1.6705=23.4px、
     CJKインク/em比0.87で逆算して約27px）の1.5倍あったこと。27pxに是正し、
     ラベル・見出しの下マージンも詰めて50pxに合わせる。 */
  /* PROD-20260905-018 項目1：カンプでは見出しが「バナーの左上に重なる」位置にあり、
     バナーは画面左端から右端までの全幅・上端は斜め＋波でカットされている。
     カンプ実測（862px空間 → ×1.6705）：
       バナー帯 y912-1106（上端の白い波を含む）→ 高さ 324px@1440
       EXPERIENCE ラベルのインク bbox x49-97 / y926-932 → 左82px・上23.4px@1440・幅80px
       体験プログラムのインク bbox x49-148 / y941-955 → 上48.4px@1440・幅165px（7字＝23.6px/字）
     ▲ラベル/見出しのサイズは PROD-016 の 15px/27px より小さい。今回は測り直した
       165px÷7字（＝約23px）と、"EXPERIENCE" 10字で80px（letter-spacing .14em込みで約11-12px）を
       採用し、見出し24px・ラベル12.5px にした（カンプ実測とほぼ一致。他セクションのラベルは
       17px前後のまま＝実装内で不統一だが、他セクションの実測は今回の指示範囲外）。
     したがって head を absolute でバナーに重ね、section の padding は 0 にする。 */
  /* PROD-20260918-002（RYO指示 2026-09-18「まだ狭いわ」）：
     PROD-20260918-001 では「KIDS CLUB の全面写真と EXPERIENCE の写真バナーが直接隣接するため、
     白帯を挟むと2枚が割れて見える」と判断して padding:0 のままにした唯一の境界だったが、
     RYOが本番を見て「まだ狭い」と判断したため、ここにも余白を入れる。

     採った方法：.experience の上パディングを --space-section(120px) にし、
     .experience__head の absolute top を同じ量だけ下げてバナー上の元位置（+21px）を保つ。
     → バナー画像の開始位置だけが下がり、見出しはバナー上に乗ったまま（カンプ構造を維持）。

     「割れて見えない」根拠（ヘッドレス実測 1440px・PROD-20260918-002）：
       ・バナー画像はそれ自体が上端に白いマージンを持つ（x=500 で写真の中身が始まるのは
         バナー上端から 23px 下・実測 RGB(248,247,250) のほぼ白）。
         つまり追加した白は「バナー自身の白い上マージンが深くなった」ようにつながって見える。
       ・KIDS CLUB 側の写真下端は clip-path の波で、波が抜けた部分に出る色は
         --sky-01 = RGB(234,244,251)。この sky-01 → 白の段差は padding:0 の状態でも
         RGB(234,244,251) → RGB(248,247,250) として既に存在しており、
         今回それが 234 → 255 になるだけで段差の性質は変わらない（新たな帯の線は出ない）。
       ・180px(--space-section-lg) 案も並べて比較したが、見出しがラベル付け対象のバナーから
         離れすぎるため 120px を採用した。 */
  .experience { padding: var(--space-section) 0 0; }
  .experience__head {
    position: absolute;
    /* PROD-20260918-002：.experience に上パディングを入れた分だけ下げ、
       バナー上端からの元オフセット 21px を維持する */
    top: calc(var(--space-section) + 21px);
    left: 82px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    z-index: 6;
  }
  /* PROD-20260923-001 旧: .experience__head .section-label { font-size: 12.5px; line-height: 1.1; margin-bottom: 11px; }
     サイズは --fs-label(14px)、下余白は基底の 10px に集約。line-height も基底(normal)に戻す。 */
  /* PROD-20260922-014 旧: .experience__head .section-title { font-size: 24px; line-height: 1.08; margin-bottom: 0; white-space: nowrap; } */

  /* ---- PC：斜めクリップされた1枚の連続写真バナー＋オーバーレイカード（FAIL2） ---- */
  .experience__grid { display: block; }
  /* RYO指示（2026-09-04）：体験バナーはカード・文字を含めた1枚画像をそのまま使う方式に変更。
     画像の実測アスペクト比(1440×222、bbox(0,957,862,1090)×1.6705)に合わせ278px→222pxに変更 */
  .experience__banner {
    display: block;
    position: relative;
    width: 100%;
    /* PROD-20260905-018：カンプ帯 862×194 ×1.6705 = 1440×324 */
    height: 324px;
    margin-bottom: 0;
  }
  .exp-card__photo-sp { display: none; }
  /* 画像にCRAFT/OBSERVATIONカードが写り込んでいるため、実装側の.exp-cardは二重表示になる。
     PCでは非表示にする（SPは別構造のexp-card__photo-spを使うため対象外） */
  .exp-card { display: none; }
  /* FAIL2再修正（PROD-20260904-003）：写真を76%幅の個別ボックスにして左右に置いていたため、
     クリップ後の可視領域が banner 全体をカバーしきれず、左側に大きな白い空白ができていた。
     両写真とも banner いっぱい(100%)に重ねて敷き、clip-path の切り抜き線だけで
     左右2枚に分割する（union が banner 全体を隙間なく覆う）方式に修正 */
  /* FAIL2再修正（PROD-20260904-004・QA3回目 FAIL A-2）：.exp-photo に display:block を
     指定したことで .ph 本来の display:flex（ラベルを小さいバッジに収める挙動）が上書きされ、
     プレースホルダーラベルが幅いっぱいの帯になっていた。display:flex に戻して解消する。
     craft側はデフォルトのflex-start（左下）で可視領域内に収まるが、obs側は可視領域が
     右寄りのため justify-content:flex-end で右下に寄せ、clip-pathで切り落とされないようにする */
  .exp-photo {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* FAIL3再修正（QA3回目 FAIL A-3）：斜めクリップの角度が垂直から29.4°でカンプの21.2°より
     緩かったため、seam の水平方向の変位を縮小して角度を合わせる（dx≈7.5%×1440px, dy=278pxで
     atan(7.5%*1440/278)≈21.2°） */
  /* PROD-20260905-018：斜め分割はカンプ画像そのものに焼き込まれている（craft/obsの境界も
     画像内の斜めの継ぎ目として存在する）。実装側で同じ画像を2枚clip-pathで割ると
     ポリゴン境界に1pxのヘアラインが出るだけなので、1枚に統一する。 */
  .exp-photo--craft {
    clip-path: none;
  }
  .exp-photo--obs {
    display: none;
  }

  .exp-card {
    position: absolute;
    /* FAIL修正：-26pxだとbanner下の余白(margin-bottom8px+section padding-bottom8px=16px)を
       超えてACTIVITY LOGの背景色に10px食い込んでいたため、余白内に収まる値に縮小 */
    bottom: -12px;
    width: 32%;
    margin: 0;
    background: var(--cream);
    border: 1px solid var(--line);
    padding: 14px 18px;
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
    z-index: 4;
  }
  .exp-card + .exp-card { margin-top: 0; }
  .exp-card--craft { left: 6%; }
  .exp-card--obs { right: 6%; }
  /* PCでは .exp-card 自体がカードの箱なので、内側の .exp-card__memo は素の入れ物に戻す */
  .exp-card__memo { margin: 0; width: auto; background: none; border: none; padding: 0; box-shadow: none; }
  .exp-card__label { font-size: 10px; }
  .exp-card__title { font-size: 17px; margin-bottom: 5px; }
  .exp-card__text { font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: 8px; } /* PROD-20260922-010 旧: font-size: 11.5px */

  .activitylog__inner { flex-direction: row; gap: 30px; }
  /* 2026-09-04（追記23）headの幅を220→190pxに縮小し、カード列によりスペースを回す */
  .activitylog__head { flex: 0 0 190px; width: auto; }
  /* PROD-20260905-021 項目4：見出し「活動記録」がカンプより大きい（実装は共通.section-titleの40px）。
     カンプ(top-pc.png・862px空間)を暗度しきい値170で行/列ラン検出：
       「活動記録」インク y1141-1152（高さ12px）/ x48-101（幅54px・4字）
       → 1字あたりの送り 13.5px → ×1.6705 = 22.5px@1440
       インク高さ 12px → 20px@1440。CJKのインク高さ≒0.88em から font-size ≒ 23px
     参考：同じ手法でCREATURES見出しは 11.3px/字 → 18.9px@1440（実装は21px）。
     カンプでは活動記録とCREATURESの見出しがほぼ同サイズであることと整合するため、
     実測どおり23pxを採用する（40px → 23px）。 */
  /* PROD-20260922-014 旧: .activitylog__head .section-title { font-size: 23px; } */
  /* RYO指摘で活動記録カードを4枚→3枚(カンプ実測どおり)に修正済みのため3カラムに変更 */
  .activitylog__list { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  /* カンプ実測(862px空間)：photo1(262,1140)-(361,1210)=99×70、photo2(471,1140)-(576,1210)=105×70、
     photo3(680,1140)-(771,1210)=91×70（numpyで白背景との境界をスキャンし実測）。
     アスペクト比は約1.4:1で、旧実装の3.2/1(横長で薄い)は大幅に不正確だった。1.42/1に修正し
     写真を縦に大きくする */
  /* PROD-20260905-016 項目3：活動記録の写真が大きすぎる（実装355×250 ≒ カンプの2倍）。
     カンプ(top-pc.png)を4倍拡大して再実測した写真bbox（862px空間）：
       entry1 x263-362 / y1137-1214 = 99.5×77（比1.29）
       entry2 x470-575 / y1137-1214（緑のフォトフレーム。上端がやや高い）
       entry3 x680-771 / y1139-1213
     → ×1.6705 で 166×129px@1440。実装の 355×250 は幅で2.1倍・高さで1.9倍あった。
     あわせて、カンプでは写真が「日付＋タグ／タイトル」の右側に置かれ、本文だけが
     写真の下に回り込む配置（日付x192・タイトルx192に対し写真x263＝右隣）。
     DOM順を変えずに（＝SP版に一切影響を出さずに）これを再現するため、
     PCのみ .log-card を2列3行のgridにして写真を右列・行1〜2にまたがらせる。 */
  .log-card {
    display: grid;
    grid-template-columns: 1fr 166px;
    column-gap: 12px;
    align-content: start;
  }
  .log-card__meta { grid-column: 1; grid-row: 1; }
  .log-card__title { grid-column: 1; grid-row: 2; }
  .log-card__excerpt { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; }
  .log-card__photo {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    width: 166px;
    height: 129px;
    aspect-ratio: auto;
    margin-bottom: 0;
  }
  /* 上の .log-card{display:grid} がメディアクエリ冒頭の .log-card--sponly{display:none} を
     同一詳細度・後勝ちで打ち消し、PCで4枚目（SP専用カード）が2行目に出てしまうため復活させる
     （ブラウザ実測で発見。修正前は .activitylog__list の高さが369pxになっていた） */
  .log-card--sponly { display: none; }
  .log-card__title { font-size: var(--fs-body); line-height: 1.5; margin-bottom: 2px; } /* PROD-20260922-010 旧: font-size: 11px */
  /* RYO指摘（2026-09-04）：カード本文が小さいとの指摘を受け、カンプ実測に基づき修正。
     カンプ(862px空間)実測：「春の磯で、ヤドカリやウニ、カニ」(15字)幅100px→×1.6705=167px@1440
     ÷15字≈11.1px/字（ピッチ）。本文小段落の実測ピッチ/font-size比（activitylog__lead:
     134px@1440÷12字=11.17px、font-size12pxから比0.93）を適用しfont-size≈11.1/0.93≈12pxに拡大
     🔴 PROD-20260922-010：この「ピッチ/font-size比0.93」による逆算も上記 CONTACT と同じ
        誤りを含む（縮小PNGからの目測＋二段階逆算）。現在は --fs-body で統一している。
     （旧10pxは実測の約83%しかなかった） */
  .log-card__excerpt { font-size: var(--fs-body); line-height: var(--lh-body); } /* PROD-20260922-010 旧: font-size: 12px; line-height: 1.6 */
  /* PROD-20260905-018 項目3：タイムラインの線と丸が薄くてほとんど見えない。
     カンプ実測（862px空間 → ×1.6705）：
       点線 y=1125 / x158-802 → 264px〜1340px@1440、太さ1px→1.7px、
         ドットのピッチは実測で約3px（濃2 + 淡1）→ 5px@1440（旧実装は12pxピッチで粗すぎた）
       丸（白抜き）3個 x276-285 / x469-477 / x704-713、y1121-1129
         → 直径10px→17px@1440、リング幅約1.5px→2.5px、中心は各カードのメタ行（日付＋タグ）の
           中央の真上（card1: メタ中心274.5 vs 丸280.5 / card3: 714 vs 708.5）
       丸のリング色：frac 0.1 で rgb(18,82,150) に収束（旧実装は opacity:.5 の1px枠で薄かった）
     線と丸の位置はリストに padding-top:24px を足して確保する。
     ※ .activitylog の高さは「見出し列(230.8px) > カード列」で決まっているため、
       この padding はセクション高さを増やさない（実測で確認する）。 */
  .activitylog__list { padding-top: 24px; }
  .activitylog__list::before {
    content: '';
    position: absolute;
    top: 11px;
    left: -16px;
    right: 40px;
    height: 2px;
    background-image: linear-gradient(to right, #3f7cae 0 3.5px, transparent 3.5px 5px);
    background-size: 5px 2px;
    background-repeat: repeat-x;
    opacity: 1;
    z-index: 0;
  }
  /* 丸は日付のインライン擬似要素ではなく、メタ行の中央上（＝線の上）に置く */
  .log-card__date::before { display: none; }
  .log-card__meta { position: relative; }
  .log-card__meta::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -21px;
    transform: translateX(-50%);
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2.5px solid #12528f;
    background: var(--white);
    z-index: 2;
  }

  .creatures__inner { display: flex; align-items: flex-start; gap: 24px; }
  /* RYO指摘で見出しfont-sizeを50pxに拡大した結果、190px幅では1行1〜2文字まで折り返す
     不具合が発生したため300pxに拡幅 */
  /* 2026-09-04（追記23）カンプ実測：大判クラゲ写真(144,1271)-(460,1452)=316×181、
     2×2写真は列1(463,1273)-(581,1348)=118×75列2(651,1273)-(772,1348)=121×75など。
     大判とグリッド全体の横幅はほぼ1:1（316：309）で、見出し列はカンプでは240px相当と現状(340px)
     より狭い。ラベル1行化の回帰(46%→40%で修正済み)を壊さないよう.creature-card__photoの比率は
     維持しつつ、headを300px(折り返し崩れが出ない実測済みの最小値)に戻し、feature:gridを1:1に
     変更して両方の絶対サイズを拡大する */
  /* PROD-20260905-016 項目4：大判クラゲ写真が小さい（実装482×276 / 左端395px）。
     カンプ(top-pc.png)の再実測（彩度＋暗度マスクの列/行ラン検出＋2倍拡大目視）：
       大判写真 x144-460 / y1267.5-1452 = 316×184.5（862px空間）
       → ×1.6705 で 528×308px、左端 241px@1440
       2×2の写真 x465-580・x651-772 / 高さ約82.5 → 192×138px、列ピッチ186(862)=311px
       グリッド左端 465→777px、右端 837→1398px、大判右端(767)との間隔は約10px
     大判を528pxにするには左の見出し列を狭める必要がある。カンプの見出し列は実測で
     x47.5〜約140（862空間）＝ 幅93px → 155px@1440 しかなく、見出し「クラゲ公民館の」も
     7字で85px(862) ＝ 142px@1440 ÷7字 ≈ 20px/字（＝font-size 約22px）だった。
     ▲既存CSSコメントの「実測幅245px(862)→58px/字」は誤測定（測定窓の右端が
       大判写真の濃紺に掛かっていたためインク幅を取り違えたと考えられる）。今回は実測値を採用する。
     ただし22pxはSPを含む他セクションの見出しと比べて極端に小さくなるため、
     カンプ実測に近く、かつ2行の折り返し（<br>位置）を壊さない 26px を採用した
     （「クラゲ公民館の」7字×26px=182px < head 190px で1行に収まる。正直な申告：
      カンプ実測の約22pxよりわずかに大きい）。 */
  /* PROD-20260905-018 項目4：小カードで写真とラベルが離れすぎ・写真が小さい。
     カンプ(top-pc.png)を列/行ラン検出で再実測（862px空間 → ×1.6705）：
       小カード写真 card1 x463-580 / y1273-1347 = 118×75（比 1.573/1）→ 197×125px@1440
       card2 x651-771、列ピッチ 188px → 314px@1440
       ラベル左端 card1 x587 / card2 x779 → 写真右端との間隔 7〜8px → 12px@1440
       行ピッチ y1273→1358 = 85px → 142px@1440（＝写真125px + 行間17px）
       種名インク：カサゴ3字23px・アオウミガメ6字48px・ウミウシのなかま8字58px
         → 約7.3〜8.0px/字 → 12〜13px@1440（実装14px→12.5pxへ）
       学名インク：Sebastes inermis 16字で44px → 73px@1440 ≒ 4.6px/字（font-size 9px相当）
     これを収めるには小カード列（.creatures__sub）に 625px 必要。カンプの列構成は
       左余白79 → 見出し列(155) → 大判(525) → 小カード(625) で合計1319px ＝ --wrap と一致。
     ▲そのため見出し列を 190px→155px に縮める。カンプの見出しインクは
       「クラゲ公民館の」x49-127 = 78px / 7字 ＝ 18.6px/字（→ font-size 約19-20px）で、
       PROD-016 の26px（＝カンプ実測22px想定）より更に小さい。ここでは折り返しを起こさない
       21pxを採用した（カンプ実測より約2px大きい／正直な申告）。 */
  .creatures__inner { gap: 8px; }
  /* PROD-20260922-014 旧: .creatures__head { flex: 0 0 155px; margin: 0; }
     見出しを32pxに統一すると「クラゲ公民館の」(7字×32px=224px) が155px列に収まらず
     「クラゲ公／民館の／いきもの／たち」と語の途中で4行に割れた（実render実測）。
     見出しが必要とする幅まで列を広げる。 */
  .creatures__head { flex: 0 0 235px; margin: 0; }
  /* PROD-20260922-014 旧: .creatures__head .section-title { font-size: 21px; } */
  /* PROD-20260923-001 旧: .creatures__head .section-label { font-size: 12px; margin-bottom: 6px; }
     サイズは --fs-label(14px)、下余白は基底の 10px に集約。 */
  .creatures__lead { font-size: var(--fs-body); line-height: var(--lh-body); } /* PROD-20260922-010 旧: font-size: 11px */
  /* PROD-20260922-014 旧: .creatures__grid { flex: 1; grid-template-columns: 525px 1fr; gap: 7px; }
     見出し列を155→235pxに広げたぶん、メイン写真列を固定525pxから minmax(0,525px) にし、
     さらに小カード列に下限230pxを与える。
     実測：viewport900 で小カード列が 165px→85px まで潰れ、種名が1文字ずつ縦に割れていた
     （AFTERスクショの目視で発見）。下限230pxを入れると viewport900 でも2列×113px を確保でき、
     広いPC幅（1440）ではメイン写真525pxのまま従来どおりになる。 */
  .creatures__grid { flex: 1; grid-template-columns: minmax(0, 525px) minmax(230px, 1fr); gap: 7px; }
  .creature-feature { aspect-ratio: 1.756/1; }
  /* row-gap 17px / column-gap 4px（カンプ：列ピッチ314px = セル310.5 + 4）
     PROD-20260923-011（作業3・高さ揃え）：
     旧: align-content: start;（＝小カードは内容の高さで上に詰まり、種名の行数で
         1行目と2行目の高さがバラバラ／大判写真の下にも余りが出ていた）
     新: 2行を 1fr ずつにして行の高さを揃え、グリッド全体を大判写真の高さに合わせる。
         小カード側の aspect-ratio は解除して、行の高さに追従させる。 */
  .creatures__sub { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 17px 4px; align-content: stretch; height: 100%; }
  .creatures .creature-card { aspect-ratio: auto; height: 100%; }
  /* RYO指摘：カンプは写真が大きく、種名ラベルが写真の右横（下ではない）。
     カードをflex行にし、写真を左・テキストを右に配置し直す */
  .creature-card { display: flex; align-items: center; gap: 12px; }
  .creature-card__photo { aspect-ratio: 1/1; margin-bottom: 0; flex: 0 0 46%; }
  /* RYO指摘：「イトマキヒトデ」「ウミウシのなかま」等が折り返していた。
     カンプは種名ラベルが1行のため、nowrapを明示し写真の比率を下げて情報側の幅を確保する */
  .creature-card { align-items: center; }
  /* 2026-09-04（PROD-20260904-INFO-CRE）カンプ実測(862px空間)：
     photo1(463,1273)-(581,1348)=118×75、photo2(651,1273)-(772,1348)=121×75、
     photo3(463,1348)-(581,1423)=118×75、photo4(652,1348)-(772,1423)=120×75。
     列ピッチ(次列photo開始までの距離)=188px、列間gap実測10px→cell幅=178px。
     photo/cell比=119/178≈66.9%（カンプは写真がラベルよりかなり広い）。
     ただし67%をブラウザ実測（cardW=236.2px時）で適用すると種名ラベル4種のうち
     イトマキヒトデ・ウミウシのなかまがscrollWidth>clientWidthで折り返すことを確認。
     47%が折り返しなしの上限（scrollW=clientW=113、余白0で危険）だったため、
     安全マージンを持たせ46%に設定（46%実測：4種ともscrollW=clientW=116、余白なしだが
     折り返しは発生しない。カンプ実測67%には届かないが、既存カード幅を変えずに
     ラベル1行を守れる現実的な上限として正直に申告する） */
  /* PROD-20260905-016 項目4：大判を528pxに拡げたことで小カードのセル幅が236→284pxに
     広がったため、写真比率もカンプ実測に近づける。カンプ実測：写真192×138px@1440 /
     セル311px → 写真/セル=62%・写真の比 1.39/1。実装は 46%・1/1（正方形）だった。
     62%だと種名ラベル「ウミウシのなかま」(14px時112px)が残り96pxに収まらず折り返す／
     はみ出すため、写真56%＋ラベル12.5pxで実測検証して確定した（カンプの62%には届かない）。 */
  /* PROD-20260905-018：セル幅 310.5px に対し 写真197px(63.4%) / 間隔12px / ラベル101.5px */
  .creature-card { gap: 12px; align-items: center; }
  /* PROD-20260922-010：種名・学名を本文トークン(16px)に統一した。
     旧: .creature-card__photo { flex: 0 0 63.4%; aspect-ratio: 1.573/1; }
         .creature-card__no { font-size: 9.5px; }
         .creature-card__name { font-size: 12.5px; white-space: nowrap; }
         .creature-card__latin { font-size: 9px; white-space: nowrap; }
         （同じ2行が直後にも重複していた。重複も含めて上が旧全文）
     🔴 16px にすると「ウミウシのなかま」(8字=約128px)・学名 "Echinaster sepositus" が
        旧ラベル幅（セル310.5px − 写真63.4% − gap12 ＝ 約101px）に nowrap で収まらず
        はみ出す（＝横スクロールの原因になる）。
        対処は2つを併用：
          ① white-space: nowrap を外して折り返しを許可（はみ出しを構造的に不可能にする）
          ② 写真比を 63.4% → 46% に下げ、ラベル側に約156pxを回して大半の種名を1行に保つ
        写真が小さくなるのはカンプとの乖離だが、RYO確定事項21のとおりカンプ一致は追わない。 */
  .creature-card__photo { flex: 0 0 46%; aspect-ratio: 1.573/1; }
  .creature-card__no { font-size: var(--fs-body); }
  .creature-card__name { font-size: var(--fs-body); white-space: normal; overflow-wrap: anywhere; }
  .creature-card__latin { font-size: var(--fs-body); white-space: normal; overflow-wrap: anywhere; }
  .creature-card__info { flex: 1; min-width: 0; }

  /* 見出し(460px)・地図(417px)を拡大したことで3項目の表示幅が足りなくなったため、
     このセクションのみ--wrap(1200px)より広い1360pxを許容する */
  /* 2026-09-04（追記23）横スクロール回帰を発見・修正：head(460)+minmax(165)×3+map(417)+btnの
     合計がinfo__inner(1360px時のpanel利用可能幅876px)を231px超過し、document.body.scrollWidthが
     1631pxになっていた（本タスクの回帰チェック項目「横スクロールなし」に抵触するため対応。
     このセクション自体は今回の4項目の対象外だが、幅超過を放置できないため最小限の調整に留める）。
     コンテナを1400px(section paddingが許す実質上限)に拡大し、minmaxの下限を165→110pxに縮小、
     gap・paddingも詰めて必要幅を876px前後に収めた */
  .info__inner { display: flex; align-items: flex-start; gap: 24px; max-width: 1400px; }
  /* FAIL4対応：190pxだと「ご利用案内・アクセス」が2行に折り返すため拡幅。見出しの折り返し防止も付与 */
  /* RYO指摘で見出しfont-sizeを50pxに拡大した結果、270px+nowrapでは収まらずオーバーフローするため拡幅 */
  /* 2026-09-04（追記24）秘書指摘で発覚：追記23の横スクロール修正(minmax 110px化)が原因で、
     「詳しく見る」ボタンのgrid列が87.7pxまで潰れ1文字ずつ縦積みになり、アクセス列(実測sw=159px)も
     114.6pxに潰れて地図の下にテキストがオーバーフローし重なって見える回帰が発生していた。
     原因はheight(460px)を維持したままminmaxを機械的に縮小したため、3項目(実測105/175/159px)+
     地図(417px, RYO承認済みにつき維持)+ボタン(実測nowrap時137px)の合計が利用可能幅を
     依然として上回っていたこと。見出しは「利用案内の各項目1行」の保護対象外（回帰チェック表に
     含まれない）と確認した上でheadを300pxに縮小し2行許容に変更、代わりに3項目・ボタンは
     実測値を下回らないminmaxで保護した */
  /* 2026-09-04（追記26）秘書指摘：カンプは見出し「ご利用案内・アクセス」が1行。追記24で
     head を460→300pxに縮小した際に2行折り返しを許容してしまったが、これはカンプと不一致
     だったため撤回。見出しに`white-space:nowrap`を明示し、head幅とfont-sizeを両方調整して
     1行に収めた（font-sizeはこのセクション未実測の暫定値のため、幅に収まる範囲で調整する
     自由度がある）。3項目・地図・ボタンの必要幅を圧迫しないよう、.info__panel側のgap/paddingを
     さらに切り詰めて帳尻を合わせている */
  /* 2026-09-04（PROD-20260904-INFO-CRE）RYO指摘「パネルが薄く小さい・見出しが小さい」対応。
     カンプ実測(862px空間)：パネル上端y≈1452、下端y≈1590(左端計測)〜1596(平均)→高さ約138px
     ×1.6705≈230px@1440。見出し「ご利用案内・アクセス」インク高さ実測20px×1.6705≈33.4px、
     CJK fill比率0.87で逆算→font-size≈38px。ただし38pxはheadのscrollWidth=384pxとなり、
     .info__inner(max-width:1400px、3項目105/175/159px・地図417px固定・ボタン137px下限は
     全て実測済みの最小値で既にスラック無し)に収まらずbody横スクロール(sw=1457>1440)が発生する
     ことをブラウザ実測で確認。他要素の幅を削らずに1行を守れる上限を実測で探索した結果、
     font-size=36px(headのclientW=364px)がsw=1440を維持する上限だったため36pxを採用した
     （カンプ実測38pxには届かないが、他4項目の1行維持・横スクロールなしを優先した現実的な妥協）。
     パネルの厚みはpadding(10→48px)・アイコン(22→34px)・info__item内gap(6→10px)を実測比で
     拡大し、panelHeightをブラウザ実測230.9px（カンプ実測230px相当）まで拡張した */
  .info__inner { gap: 16px; }
  .info__head { flex: 0 0 345px; margin: 0; }
  /* PROD-20260922-014 旧: .info__head .section-title { white-space: nowrap; font-size: 36px; } */
  .info__panel {
    flex: 1;
    /* 追記24：3項目は実測scrollWidth(105px/175px/159px)を下限とするminmaxに変更（一律110pxの
       機械的な圧縮をやめた）。ボタンも実測nowrap幅137pxを下限に固定し、縦積み崩れを防止。
       地図はRYO承認済みの417px固定を維持。追記26でgap/paddingをさらに圧縮しhead拡幅分を確保 */
    /* PROD-20260905-017 項目3：地図の枠は417×105pxだったが、カンプ実測の地図bboxは
       (594,1488)-(730,1580)=136×92px(862空間)＝227×154px@1440 で、枠のほうが幅2.8倍・
       縦横比が全く違っていた（4/1 vs 1.48/1）。素材も枠に合わせた横長の誤クロップで
       右35%が白紙だったため、素材と枠の両方をカンプ実測値に差し替える */
    grid-template-columns: minmax(105px, auto) minmax(175px, auto) minmax(159px, auto) 227px minmax(137px, auto);
    align-items: center;
    /* 🔴 PROD-20260922-014（AFTERスクショの目視で発見・是正）
       作業3で料金の区分が3行→6行に増えた結果、`align-items:center` が効いて
       **料金カラムだけアイコンと見出しが上にずれ、3項目のアイコンの高さが揃わなくなった**
       （BEFOREは3項目が同じ高さだったので中央揃えでも結果的に上端が揃っていた）。
       3つの `.info__item` だけ上端揃えに戻す。地図・ボタンは従来どおり中央揃えのまま。 */
    padding: 48px 10px;
    gap: 6px;
  }
  .info__panel > .info__item { align-self: start; }
  /* PROD-20260904-INFO-CRE：パネルの縦の厚みをカンプ実測(約230px@1440)に近づけるためのアイコン拡大 */
  .info__icon svg { width: 34px; height: 34px; }
  /* PROD-20260905-017 項目3：旧値 417×105px（旧bbox(600,1480,850,1543)=250×63）は誤測定。
     地図の陸(緑)・海(青)の画素検出で再実測した bbox は (594,1489)-(729,1579)=136×91。
     余白1pxを足した (594,1488)-(730,1580)=136×92 で切り出し、×1.6705 = 227×154px */
  .info__map { width: 227px; aspect-ratio: auto; height: 154px; }

  /* FAIL5対応（QA3回目・新規、QA4回目で揃えを再修正）：カンプPC版は「アイコンが上・テキストが下」の
     縦積みだが、揃えは中央ではなく左揃え（アイコンも各カラムの左端）。SP版のカンプ（top-sp.png）は
     アイコン左・テキスト右の横並びのため、この修正はPCのみに限定する */
  .info__item { flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; }
  .info__icon { margin-top: 0; }
  .info__label { margin-bottom: 0; }

  /* FAIL5・FAIL8対応：カンプは「ブランド・ナビ列・SNSが1行に収まり、その下に区切り線＋コピーライト」の
     コンパクトな2段構成。旧実装はナビ7列が均等幅(1fr)で狭く見出しが折り返し、結果的に縦に間延びしていた。
     ナビ列を内容幅(max-content)にして折り返しを防ぎ、ブランド／ナビ／SNSを1行に並べる */
  /* PROD-20260918-001：18/16px → トークン化（PC 72px / 下部36px） */
  /* 🔴 PROD-20260923-007 旧: .footer { padding: var(--space-section-sm) 20px 36px; }
     RYO指摘「フッター上部は逆に余白ありすぎ」。
     上端→ロゴの実測は 97px（border 1px ＋ padding 96px ＝ --space-section-sm）だった。
     この 96px は PROD-20260923-005 で SNS がフッター最上段（grid-row:1）に乗っていた頃の
     設計で、PROD-20260923-006 で SNS を .footer__bottom の子へ移した後も余白だけ残っていた。
     --space-section-sm の**変数値は書き換えず**（L848 の .contact__panel・L1112 など
     フッター以外にも波及するため）、フッターのこの宣言だけ既存トークン --space-block（PC 56px）
     に差し替える＝フッターに閉じた変更。新しい数値は作っていない。 */
  .footer { padding: var(--space-block) 20px 36px; }
  .footer__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: start; column-gap: 28px; }
  .footer__brand { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .footer__contact-info { grid-column: 1; grid-row: 2; margin: 8px 0 0; }
  .footer__nav {
    grid-column: 2; grid-row: 1 / span 2;
    align-self: center;
    grid-template-columns: repeat(3, max-content);
    gap: 48px;
    justify-content: flex-start;
    border-bottom: none;
    padding-bottom: 0;
    /* PROD-20260922-010：本文トークン(16px)統一で列の実幅が広がり、16pxでは
       「体験：クラフト体験」と「いきものたち」が接近して見えたため列間を広げた。
       実測：3列の max-content 合計 = 208+150+112 ＝ 470px、gap48×2 ＝ 96px で 566px。
       PC1440 のナビ利用可能幅（inner 1200 − brand列 252 − SNS列 82 − column-gap 56）＝ 810px
       に対し 244px の余裕があり、1行のまま収まる（旧: gap: 16px） */
    gap: 48px;
  }
  .footer__sns { grid-column: 3; grid-row: 1; align-self: start; padding: 0; }
  .footer__nav .footer__col ul { margin-top: 5px; gap: 3px; }
  /* PROD-20260922-010：フッターの 10px / 11px と px直値の line-height は
     「ナビ列を1行に押し込むためのしわ寄せ」であってデザイン意図ではなかった。
     本文トークンに統一し、行送りも px直値をやめてトークンに戻す。
     旧: .footer__nav .footer__col-title { line-height: 14px; }
         .footer__nav .footer__col-title a { font-size: 11px; }
         .footer__nav .footer__col ul li { line-height: 12px; }
         .footer__nav .footer__col ul a { font-size: 10px; } */
  .footer__nav .footer__col-title { line-height: var(--lh-body); }
  .footer__nav .footer__col-title a { font-size: var(--fs-body); }
  .footer__nav .footer__col ul li { line-height: var(--lh-body); }
  .footer__nav .footer__col ul a { font-size: var(--fs-body); }
  /* PROD-20260909-001：クラゲ線画（.footer__jelly-deco）を撤去したことで、
     space-between の相棒を失った © が左に寄り、同じ grid-row:2 を共有していた
     .footer__contact-info（住所・TEL）と重なった。© を独立した grid-row:3 に移し、
     住所ブロックの下に自然に収める（撤去で生じた穴の是正） */
  /* 🔴 PROD-20260923-007 旧: .footer__bottom { … margin-top: 8px; padding-top: 6px; }
     RYO指摘「コピーライトの部分と上のナビゲーション近すぎ／余白を」。
     実測（PC1440）：ナビ最終行の下端→区切り線 9.7px ／ 区切り線→© 9.59px ＝ 上下とも約10px。
     フッター上端の 96px に対して約1/10 で、上下の偏りがそのまま RYO の指摘になっていた。
     区切り線の上下を **28px ずつ**に広げ、線を © とナビの中間に置く。
     28px は既存トークンに該当値がないため個別値（--space-block 56px は倍で開きすぎ、
     --space-h2 40px は見出し専用の意味を持つため流用しない）＝制作部署が決めた数値。 */
  .footer__bottom { grid-column: 1 / -1; grid-row: 3; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 28px; }

  /* ---------- CONTACT ---------- */
  /* RYO指摘（2026-09-04）：お問い合わせ本文が小さいとの指摘を受け、カンプ実測に基づき修正。
     カンプ(862px空間)実測：「見学のご相談、プログラムのお申し込みなど、」(21字)幅160px
     →×1.6705=267px@1440÷21字≈12.7px/字（ピッチ）。ピッチ/font-size比0.93で逆算→
     font-size≈13.7px。SP側は未実測のためbase(12px)を維持し、PCのみ13.5pxに拡大

     🔴🔴 PROD-20260922-010（2026-09-22）で是正：**この逆算は誤りだった。**
     ① デザイン/top-pc.png は 862×1824px ＝ 1440px設計を約60%に縮小して書き出したもので、
        縮小PNGは文字の輪郭がぼけるため目測すると実際より小さく読み取れる。
        16pxの本文なら862px空間では 9.58px で写るはずが約8pxと読まれ、
        その誤差が ×1.6705 で拡大されて 13.5px になっていた。
     ② さらに「文字の高さ」ではなく「文字ピッチ」を測り、「ピッチ/font-size＝0.93」という
        仮定で二段階に逆算しているため誤差が重なっている。
     ③ RYO指摘「なんか本文文字小さくね？」「PCで13.5pxって」「なんで」。
     → よって **13.5px はカンプの指定値ではない。「カンプ実測値だから」を理由に
        このサイズへ戻してはいけない。** 現在は --fs-body（16px）で統一している。
        このコメントは同じ間違いを繰り返さないために残してある（消さないこと）。
     （旧12pxは実測の約88%だった） */
  .contact__text { font-size: var(--fs-body); line-height: var(--lh-body); } /* PROD-20260922-010 旧: font-size: 13.5px; line-height: 1.7 */
}
/* =====================================================================
   SP専用タイポグラフィ／レイアウト（PROD-20260904-012・QA_SP_20260904 差し戻し対応）

   ■ 色の再実測（2026-09-05・制作部署Agent）
   手法：デザイン/top-sp.png・top-pc.png の各見出し領域を Pillow+numpy で取り込み、
   輝度 L=0.2126R+0.7152G+0.0722B を計算。L の最小値 Lmin と 95パーセンタイル Lbg
   （＝地の色）を求め、しきい値 Lmin+frac*(Lbg-Lmin) 以下のピクセル＝「ストローク中心の
   最も濃い画素群」だけを取り出してその中央値を採った。frac を 0.30→0.03 と段階的に
   絞って収束値を確認している（アンチエイリアスの縁は frac を下げると自動的に落ちる）。

   結果：**PCカンプとSPカンプで見出しの色が実際に違う**。
   - top-pc.png ABOUT見出し … 収束値 rgb(2,11,33) 前後＝ほぼ黒（既存 --ink:#0a1420 と整合）
   - top-sp.png ABOUT見出し … 収束値 rgb(0,17〜25,118〜127)
   - top-sp.png ヒーロー館名 rgb(0,15,131) / EXPERIENCE見出し rgb(0,22,129) /
     INFORMATION見出し rgb(0,18,128) / KIDS CLUB見出し rgb(0,11,134) / ラベル rgb(0,26,136)
     → SPカンプは全セクション一貫して「濃い青」。
   - SP本文（ABOUT本文）は rgb(16,35,79)〜rgb(30,43,79) 台の紺グレー。
   よって PC の --ink はそのまま（PC回帰を避ける）、SP側だけを実測値で上書きする。
   なお top-pc.png 内でも ABOUT見出し（ほぼ黒）と CREATURES見出し rgb(4,45,104)・
   INFORMATION見出し rgb(0,22,52) は色が違っており、カンプ自体が色の統一を欠いている。
   PC側の是正は今回の依頼範囲外のため触っていない（未対応として申告）。

   ■ フォントサイズ
   top-sp.png は3カラム連結画像。各カラムの実幅を全幅写真の左右端検出で実測したところ
   col0=341px / col1=331px / col2=324px とカラムごとに違ったため、カラム別の換算係数
   （375/341=1.0997、375/331=1.1329、375/324=1.1574）で375px空間に換算している。
   行バンド（インク行の上下端）を numpy の行方向走査で求め、CJKのインク高さ÷0.87 で
   font-size を逆算、さらに「行のインク幅÷文字数」で妥当性を検証した。
   ===================================================================== */
@media (max-width: 899px) {
  /* SP実測色。PC(min-width:900px側)の --ink には手を触れていない */
  :root {
    --ink: #00197d;        /* SP：見出し・ラベル（実測収束値 rgb(0,20,125)相当） */
    --ink-body: #102b53;   /* SP：本文（実測 rgb(15,40,80)台） */
    --sp-gutter: 30px;     /* SPカンプ実測の本文左端：hero 30.8 / ABOUT 36.3 / EXP 30.6 /
                              ACTLOG 30.6 / KIDS 27.5 / INFO 22.0（カラムごとにばらつくため中央値付近を採用） */
    /* PROD-20260918-001：SP用の余白トークン。PCと同値にはしない。
       375px幅では120pxの上下余白は「スカスカ」になるため、一般的なSPの
       セクション間 60〜100px の範囲で設定する */
    /* PROD-20260918-002（RYO指示 2026-09-18「まだ狭いわ」）：
       PROD-20260918-001 の値（48/72/40/24）を約1.5倍に引き上げた。
       文字セクション同士の境界 = 72×2 = 144px。 */
    --space-section: 72px;   /* 文字セクション同士 = 72×2 = 144px */
    --space-section-lg: 104px; /* 写真帯と接する側（単独で効く） */
    --space-section-sm: 56px;
    /* PROD-20260922-014 作業8：見出しサイズのSP値（本文16pxの1.5倍）。
       PC値 32px は :root で定義。SP専用の別名変数は作らず --fs-h2 自体を再定義する。 */
    --fs-h2: 24px;
    /* PROD-20260923-001：ラベルのSP値。PC値 14px は :root で定義。
       --fs-h2 と同じく、SP専用の別名変数は作らず --fs-label 自体を再定義する。 */
    --fs-label: 12px;
    --space-block: 32px;
  }

  .header__nav { display: none; }
  .header__burger { display: flex; }
  .sp-nav { display: block; }
  /* PROD-20260919-001：SPのみ暗幕を有効化 */
  .sp-nav-overlay { display: block; }
  /* PROD-20260918-003：SPヘッダー総高が 64px → 84px になったため、ドロワー上部の逃げを
     90px → 104px に拡大（1項目目がロゴ・バーガーの真下に貼り付くのを避ける） */
  .sp-nav { padding-top: 104px; }
  /* 🔴 PROD-20260922-014 作業7（RYO指示原文：「スマホの時ヘッダースクロールしてもついてこなくて
     ハンバーガーメニューが上じゃないと押せません」「スマホの時はヘッダー白背景つけて
     そのままスクロールでついてきてもいいと思う」）
     基底の `.header { position: absolute; background: transparent }`（L224、PROD-20260918-003 の
     「ヒーロー写真をページ最上端から始める」対応）は、ページ下部に行くとヘッダーごと画面外へ
     流れるため、SPでハンバーガーに到達できなかった。SP帯のみ fixed ＋ 常時白背景にする。
       ・白は既存の `--white` を使用（新しい色は作っていない）
       ・スクロール量に応じた透明→白の切替はしない（指示にないため）
       ・PC（900px以上）は基底の absolute / transparent のまま **一切変更していない**
     🔴 `.sp-nav` / `.sp-nav-overlay` は `inset` ではなく `top:0; right:0; height:100vh` で
        書かれており、`.header` に transform / filter / backdrop-filter も無い（実測 `backdropFilter:none`）。
        よって制作マニュアルにある「backdrop-filter を持つ親が fixed 子の containing block になり
        ドロワーが header 高さ分しか開かない」事故（Azuki・GreenPrime で発生）の条件に**該当しない**。
        fixed 化後にドロワー高さ＝viewport高さであることを実測で確認済み。
     PROD-20260922-014 旧: SP帯に .header の上書きは無く、基底の position:absolute / transparent のままだった */
  .header { position: fixed; background: var(--white); }
  /* ヘッダーが白くなったことで、従来ヘッダーの背後から始まっていたヒーロー（支給 fv-sp.jpg・
     aspect-ratio 851/1061）の上端が白帯に隠れる。**FV画像は1枚で完成しているデザイン**なので
     欠けさせないよう、SPヘッダー総高ぶんヒーローを下げる。
     SPヘッダー総高の実測 = padding 12px + ロゴ 60px + padding 12px = **84px**（本番実測でも 84.0px）。
     `aspect-ratio` を壊さないよう padding ではなく margin で下げている。
     下層ページは `.subpage-hero { padding-top: 104px }`（> 84px）で既に逃げが足りているため無改変。 */
  .hero { margin-top: 84px; }
  .header__inner { padding: 12px var(--sp-gutter); }
  /* PROD-20260918-003：SPは padding 12px を維持し、ロゴ高さ 60px（表示幅 147.9px）。
     ヘッダー総高 = 12+60+12 = 84px（旧64px）。
     ヒーロー見出し（.hero__content padding-top 108px）・下層ページ（padding-top 104px）の
     いずれにも被らないことを実測で確認している。 */
  .header__logo-img { height: 60px; }

  /* ---------- 共通タイポグラフィ（SP専用スケール） ----------
     A-2/A-3対応：従来はPC値がそのままSPに出ており、比が1.67＝PC換算係数と一致していた。
     実測：ラベルのインク高さ7px(col0)→7.7px@375 ÷0.715(cap比)≈11px
           見出し「体験プログラム」インク幅152.4px@375 ÷6.86em≈22px
           見出し「海の研究クラブ／探検隊」245.6px ÷10.84em≈22.7px
           ABOUT見出し「くにみクラゲ公民館って、」205.0px ÷11.27em≈18.2px（ABOUTのみ小さい） */
  /* PROD-20260923-001 旧: .section-label { font-size: 11px; letter-spacing: .1em; margin-bottom: 6px; color: var(--ink); }
     サイズは --fs-label の再定義（このメディアクエリ冒頭）へ、色は :root の --ink-heading へ、
     letter-spacing は基底の .14em へ集約（PC .14em / SP .1em の2種類 → 1種類）。
     margin-bottom だけはSP固有の値として6pxを残す（PC10px / SP6px ＝ 各ブレークポイント1種類）。 */
  .section-label { margin-bottom: 6px; }
  /* PROD-20260922-014 旧: .section-title { font-size: 22px; line-height: 1.36; margin-bottom: 8px; color: var(--ink); }
     サイズは --fs-h2 の再定義（このメディアクエリ冒頭）へ、色は :root の --ink-heading へ、
     margin-bottom は基底の24pxへ集約した。line-height も基底の1.3に揃える。 */
  .btn { padding: 10px 18px; font-size: 12.5px; border-radius: 6px; }
  .btn--small { padding: 8px 0; font-size: 12px; }

  /* ---------- HERO ----------
     A-4対応：SPカンプは館名ブロックが波の下・明るい地の上の独立ブロック。
     カンプ実測(col0・K=1.0997)：写真下端≒528px@375、明るい水色の帯 528〜638、
     白い波で ABOUT へ 638〜676、ABOUTラベル 695。館名ブロックのインク位置は
     「海辺の研究基地。」557 /「くにみクラゲ公民館」584-604 / 英字 618-624。
     ※写真下端と水色帯の境界にある波は、RYO確定事項18により1枚画像の支給待ちのため
       SVGを新設していない。現状は直線の境界（正直な申告：ここは未再現） */
  /* PROD-20260919-005（RYO指示：「.hero なんでこれに背景ついてるの 俺は白グラデって言ってるのに」）：
     SPも同様に、制作側が足した水色ベタ var(--sky-01) がRYOの「白グラデ」指示と矛盾していたため
     #ffffff に変更。min-height と .hero::before（白ヴェール）は変更していない。 */
  /* PROD-20260922-006（RYO/秘書指示：SPヒーロー下の208px空白を解消）：
     旧値 `.hero { min-height: 676px; background: #ffffff; }` の 676px は、
     PROD-20260922-004 で撤去した `.hero__name`（旧 `top:545px` の絶対配置）を
     収めるための高さだった。館名ブロックが無くなった今は、画像下端（=467.53px@375）から
     ヒーロー下端（676px）までの 208.47px がそのまま白帯として残るだけになっていた。
     → min-height を外し、`.hero` 自身に画像と同じ `aspect-ratio: 851/1061` を与えて、
       画像の高さがそのままヒーローの高さになるようにする（＝波形カットの直下からABOUTが始まる）。
       ※ min-height を外すだけでは不可：`.hero__media` は `position:absolute` なので
         ヒーローの高さに寄与せず、在フローの子は `.hero__content`（padding-top 108px と
         visually-hidden の h1 のみ）だけになるため、ヒーローが約108pxまで潰れる。
         PC側と同じ aspect-ratio 駆動に揃えるのが正しい（PC は 1768/929）。
     ABOUT以降が約208px上がるのは意図どおり。
     背景 #ffffff は維持（RYO指示「白」）。PC側（@media min-width:900px）は一切触っていない。
     切り戻し用の旧値：.hero { min-height: 676px; background: #ffffff; } */
  .hero { min-height: 0; aspect-ratio: 851 / 1061; background: #ffffff; }
  /* PROD-20260918-003：SPは写真が y0 から全幅で乗るためロゴの白背景がそのまま浮く。
     ロゴ下端 = padding12 + 60 = 72px。80pxまで完全な白。

     PROD-20260919-002：旧版は168pxで透明に落としていたが、SPも写真の内容（女の子の帽子と
     稜線）が y=150〜170 で始まるため、ベールが切れる位置と写真が始まる位置が重なり
     PCと同じ崖（実測 y=150→160 で −54.5）になっていた。
     → 265px までストップ16段の ease-out で伸ばす。実測 −54.5 → −42.0。

     ★SPはPCよりアルファを低めにしてある（PCは y=232 で .735、SPは y=130 で .530）。
     SPは写真が y≈90 から始まり主役（女の子の顔）が y=130〜200 に入るため、PCと同じ
     アルファを当てると顔が白く飛ぶ。RYO指示「写真もちゃんと見せたい」を優先し、
     崖の低減幅よりも顔の視認性を取っている。この上限を超えて白を強めないこと。

     PROD-20260919-007（RYO指示：「白グラデきついわ / もっと優しく / ゆるやかに」）：
     PCと同じ方針で ピークα 0.40 → 0.24、平坦区間 0〜65px → 0〜30px、指数 2.2 → 1.6。
     高さ240pxは維持。SPには .hero__photo の縦マスクが無い（縦マスクは @media(min-width:900px)
     の中だけ）ため、SPの白飛びはこのベール単独が原因。本番実測で y=100 の写真残存率は
     変更前 80.0%（ベールのみが原因）だった。

     ★★ PROD-20260919-008（RYO指示：「ごめん白グラデやっぱいらんわ」）：
     SP側の .hero::before 上書きもルールごと削除した。PC側の本体ルールも削除済みなので、
     SPでもベールは一切描画されない（片側だけ消す PROD-005/006 型の事故を避けるため
     両ブレークポイントを確認済み）。SPには .hero__photo の縦マスクが無いので、
     SP FV の写真は今後ほぼ素の状態で出る。旧値は STATUS.md に保存済み。 */
  /* PROD-20260922-004（RYO支給 FV-sp.jpg の反映）
     支給画像：851×1061（縦横比 0.8020:1）。手書き見出し・カモメ・下端の波形カットが焼き込み済み。
     旧値：`.hero__media { bottom: auto; height: 500px; }`（仮素材 temp_hero_photo.png 前提の固定高）。
     固定高のままだと画像の縦横比と一致せず、`background-size:100% auto` の下に
     白い余白ができる（またはcoverにすると波が切れる）。
     → aspect-ratio で画像と同じ比率にし、height を実寸に追従させる。
       375px 幅なら 375 ÷ 0.8020 = 467.6px。画像は歪まない。
     SP用の background-image は基底 .hero__photo（url(images/fv-sp.jpg)）でそのまま効く。
     SPには mask-image が元から無いので撤去対象なし。 */
  /* PROD-20260922-007（RYO指示：「ロゴの切り抜きが甘くて白残ってるから / やっぱりそれが
     目立たないように / FV上部分白グラデかけて / 馴染むようにね」）：
     .hero::before を復活。🔴 ただし PROD-20260919-007 の旧SP値（高さ240px・ピーク0.24）は
     使っていない。旧値は仮素材 temp_hero_photo.png 前提で、かつ 0.24 では白残りの
     ΔR 33 を 25 にしか落とせず目的を達しない。
     SPの実測（ページ座標・hero高 467.53）：
       ロゴ下端 y72／白残りが集中するのは y15.6-31.1（Δ輝度 21.6→23.5）／
       y31.1-72 の白残りは Δ輝度 6.5 で元から視認限界以下／
       カモメ最上端 y44.9（塊は x209 以降）／焼き込み見出し「海」上端 y76.7。
     → ピークα 0.72・平坦 0→32px・32→48px を smoothstep で 0 に落とす（8段）。
       高さ 48px＝ヒーロー高の 10.3%。カモメ最上端 y44.9 での α は 0.03、
       見出し（y76.7）は完全に圏外＝白で薄くならない。
       PC（130px）より短いのは、SPはロゴが小さく白残りの絶対量も少ない一方、
       カモメが y44.9 とロゴのすぐ下に来るため。縦グラデだけで両立させるには短くするしかない。
     ※横方向マスク（ロゴ側だけ白くしてカモメ側を抜く）も検討したが、
       上記のとおり縦48pxで切れば ΔカモメがΔ輝度1桁に収まるため、
       余計な構造（mask-image）を足さずに済むと判断して採用しなかった。 */
  /* ★★★ PROD-20260922-009（RYO指示原文：「じゃあ白グラデ消して」）：
     SP側の .hero::before 上書きも**再撤去**。PC側の本体ルールも同時に撤去済みなので、
     SPでもベールは一切描画されない（片側だけ消す PROD-005/006 型の事故を避けるため両方確認済み）。
     🔴 実測で決めたストップ値なので削除せず全文をコメントで保存する。

  .hero::before {
    height: 48px;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.72) 0, rgba(255,255,255,0.72) 32px,
        rgba(255,255,255,0.6891) 34px, rgba(255,255,255,0.6075) 36px,
        rgba(255,255,255,0.4922) 38px, rgba(255,255,255,0.36) 40px,
        rgba(255,255,255,0.2278) 42px, rgba(255,255,255,0.1125) 44px,
        rgba(255,255,255,0.0309) 46px, rgba(255,255,255,0) 48px);
  }
     ★★★ PROD-20260922-009 ここまでが撤去したSP側ルール（コメント保存） */
  .hero__media { bottom: auto; height: auto; aspect-ratio: 851 / 1061; }
  .hero__content { position: static; padding: 108px var(--sp-gutter) 0; }
  .hero__headline { font-size: 38px; text-shadow: 0 2px 14px rgba(255,255,255,.6), 0 1px 4px rgba(255,255,255,.75); margin-bottom: 0; }
  .hero__headline-l2 { margin-left: 61px; }
  .hero__headline-l3 { margin-left: 111px; }
  /* PROD-20260922-004：SP側も同様に .hero__name 撤去により当たる要素なし。旧値を保存：
  .hero__name { position: absolute; left: var(--sp-gutter); top: 545px; z-index: 3; }
  .hero__lead { font-size: 14px; color: var(--ink); margin-bottom: 6px; }
  .hero__title strong { font-size: 24px; color: var(--ink); letter-spacing: .04em; }
  .hero__title small { font-size: 9.5px; color: var(--ink); letter-spacing: .1em; }
  */

  /* ---------- ABOUT ----------
     2026-09-05（PROD-20260905-013）秘書がqa_sp_side_v012.pngを拡大目視して特定した差異
     5件（ボタン位置／本文の行数・ブロック数／写真の重ね方／背景／本文の太さ）に対応。
     カンプ(top-sp.png)のcol0（x0..340・K=375/341=1.0997）で実測した@375換算の目標値：
       ABOUTラベルのインク      693.9〜701.6
       見出し1行目             717.0〜731.3 ／ 2行目 744.5〜758.8（行送り27.5px）
       本文5行のインク上端      779.7 / 801.7 / 824.8 / 846.8 / 868.8（行送り22.0px）
       建物写真の上端           ≈885（左右とも画面端まで全幅ブリード）
       女の子の写真（1枚のみ）  x 9.9〜192.4 ／ y 961〜1177
       丸スタンプ               x 250〜352 ／ y 1047〜1149（右端まで23pxの余白・切れない）
       ボタン                   x 100〜348.6 ／ y 1186.6〜1227.3（幅248.5・高さ41.8）
       ABOUT下端（KIDS CLUB開始）≈1236 */
  /* PROD-20260918-001：15/8px → トークン化（SP 72px） */
  /* 🔴 PROD-20260922-014（RYO指示原文：「FV下の余白広すぎ」・SPスクショを見ての指摘）
     実測（SP375・本番BEFORE）：
       .hero 下端 y467.53 → .about の最初の要素（.section-label）上端 y571.53 ＝ **104.0px の空き**
       内訳：100% が `.about` の padding-top（computed 104px ＝ --space-section-lg）。
             `.hero` の margin-bottom は 0px、`.about` の margin-top も 0px。
       他セクションの「セクション上端 → ラベル上端」実測：
             .kidsclub 56.0px ／ .activitylog 72.0px（＝--space-section）
       → ABOUT だけが 104px で突出していた。--space-section-lg は「フルブリード写真帯と接する側」用の
         トークンだが、ヒーロー下端は PROD-20260922-004/006 以降「支給 fv-sp.jpg に焼き込まれた波形カット」
         であり、写真帯と地続きではない（白で終わっている）ため lg を使う前提がもう無い。
     対処：SP の `.about` の padding-top のみ --space-section-lg(104px) → **--space-section-sm(56px)** に変更。
           ＝ .kidsclub の 56px と同値。**新しい余白トークンは作っていない**（既存変数のみ）。
           左右・下の padding、PC側（基底ルールの 180px）は一切変更していない。
           PROD-20260922-006（SPヒーロー下208px白帯の解消＝`.hero{aspect-ratio:851/1061}`）には触れていない。
     🔴 左右 padding は PROD-20260922-014 の作業5（SP画像の拡大）で var(--sp-gutter)(30px) → 5px に変更。
        テキスト側は下の `.about .section-label / .section-title / .about__body` と
        `.about__text .btn` に `calc(var(--sp-gutter) - 5px)` を戻しているので、
        **テキストの左右位置は従来どおり 30px / 345px のまま**（実測で一致を確認）。
     PROD-20260922-014 旧: .about { padding: var(--space-section-lg) var(--sp-gutter) var(--space-section); overflow: hidden; } */
  .about { padding: var(--space-section-sm) 5px var(--space-section); overflow: hidden; }
  /* PROD-20260922-014 旧: .about .section-title { font-size: 18px; line-height: 1.52; margin-bottom: 8px; }
     （本文16pxに対し18px＝見出しとして機能していなかった。--fs-h2(SP24px)に統一） */
  .about__body { font-size: var(--fs-body); margin-bottom: 4px; line-height: var(--lh-body); color: var(--ink-body); } /* PROD-20260922-010 旧: font-size: 12px; line-height: 1.88 */
  /* 秘書指摘5「本文が細くグレーがかっている」への対応。
     色は§10の手法（輝度でストローク中心を抽出→中央値→fracを絞って収束）でカンプSPの
     本文を再実測した結果 rgb(22,46,88) 付近に収束し、既存の --ink-body #102b53=rgb(16,43,83)
     と実質一致していた（＝色は既に合っている）。差の主因は太さ側と判断し weight のみ上げる */
  .about__body { font-weight: 500; }
  /* 🔴 PROD-20260922-014（RYO指示原文：「Aboutがスマホの時文言違うけど？なんで？同じにして」）
     PC／SPの文面出し分けを廃止し、本文をPC版に一本化した（front-page.php 側で1段落に統合）。
     PC版の原稿は「1行＝1<br>」でPC幅前提に改行位置が決まっているため、そのままSP375に出すと
     長い行（「見る・触れる・作る・観察する・発見する・学ぶ体験を通して、」など）が画面幅を超えて
     半端な位置で2行に割れる。**文字は1文字も変えず**、SPでのみ <br> を無効化して自然折り返しにする。
     段落間の空行（<br><br>）だけは意味のある区切りなので block 化して残す。
     PROD-20260922-014 旧:
     .about__body- -pc { display: none; }
     .about__body- -sp { display: block; }
     ※ "- -" は "--" の退避表記（CSSコメント中の記述を分かりやすくするため）。 */
  /* SP専用の改行を有効化（実測に基づき3箇所。詳細は front-page.php 側のコメント） */
  .br--sp { display: inline; }
  /* 秘書指摘1「ボタンが写真群の上にある」への対応。
     .about__text の box を display:contents で消して、その子（ラベル/見出し/本文/ボタン）を
     .about__inner のグリッドアイテムに昇格させ、order で「写真群 → ボタン」の並びにする。
     DOM順は変えていないので min-width:900px 側（PC）の2カラムgridには一切影響しない */
  .about__inner { gap: 0; grid-template-columns: minmax(0, 1fr); }
  .about__text { display: contents; }
  .about__media { order: 1; }
  .about__text .btn { order: 2; }
  /* 秘書指摘3・4「写真の重ね方が違う／スタンプが右端で切れる／背景が白い」への対応。
     旧実装は zoom:0.42 でPCの5枚構成をそのまま縮小していたため、建物の下に3枚が横に
     並び、建物の淡い水色の空も画面幅に届いていなかった。
     SPは建物（全幅ブリード）＋重なり写真1枚＋丸スタンプの3枚構成に組み直す。
     ※背景について正直な申告：カンプSPのABOUT本文まわりの地色をピクセル実測すると
       rgb(249,249,250)＝ほぼ白で、淡い水色ではなかった（左端 x2-24 / 右端 x300-338 の
       いずれも y700〜770 で 248〜250）。カンプで水色に見えているのは
       ①館名ブロック（=hero・〜686で白へ収束）と ②建物写真自身の水彩の空 の2つ。
       よってここでは「建物写真を全幅ブリードさせて②を復活させる」ことと、
       hero→ABOUTの境界を矩形の縁が出ないグラデーションで繋ぐことのみ行う */
  /* カンプSPでは水彩の空が本文の右うしろまで回り込んでいるため、写真ブロックは
     フローではなく .about の背景レイヤーとして絶対配置し、テキストをその上に載せる。
     カンプ実測：切り出し元 col0 y745 → @375で819.3（= .about上端676 + 143.3）、
     画像高さ367px → 下端1186.3px ＝ カンプのボタン上端(1186.6)と一致 */
  .about { position: relative; }
  /* PROD-20260922-005（RYO支給 about.jpg の反映・SP）
     旧実装は「カンプSPでは水彩の空が本文の右うしろまで回り込む」ため写真レイヤーを
     .about の背景として絶対配置していた。支給 about.jpg は白地の紙コラージュで、
     本文の背面に敷くと本文が写真に重なって読めなくなるため、通常フローの1ブロックに戻す。
     order は従来どおり「本文 → 写真(order:1) → ボタン(order:2)」を維持。
     画像は width:100% / height:auto で縦横比 1.1745 のまま（375px幅なら約 319px 高）。

     旧ルール（切り戻し用・全文）：
     .about__media {
       position: absolute;
       left: calc(50% - 187.5px);
       top: 143px;
       width: 375px;
       max-width: none;
       height: 367px;
       margin: 0;
       zoom: 1;
       z-index: 0;
       pointer-events: none;
     }
     .about__img--sp { display: block; position: static; width: 375px; height: auto; }
     .about__img--building,
     .about__img--collage1,
     .about__img--collage2,
     .about__img--collage3 { display: none; }
  */
  /* 🔴 PROD-20260922-014（RYO指示原文：「スマホの時この画像もっと大きく表示させたい / 左右padding5pxくらいに」）
     実測（SP375・本番BEFORE）：画像の表示幅 **315px**、左余白 30px／右余白 30px。
       余白の出どころは 100% が `.about` の左右 padding（= var(--sp-gutter) = 30px）。
       `.about__inner` の padding は 0px、`.about__media` の margin は `20px 0 0` ＝ 画像側は余白を持っていない。
     対処：`.about__media` にだけ負のマージンを与えて `.about` の gutter を打ち消し、左右 5px まで寄せる。
       `calc(5px - var(--sp-gutter))` と書くことで --sp-gutter を変えても 5px が保たれる
       （**新しい余白トークンは作っていない**。既存の --sp-gutter からの算出）。
       width:100% のままだと親の内容幅(315px)に張り付いて負マージンが効かないので width:auto にする。
       🔴 テキスト側（ラベル・見出し・本文・ボタン）の左右余白は 30px のまま**一切変更していない**。
       縦横比は `.about__img--main { width:100%; height:auto }` と img の width/height 属性で維持。
     🔴 実装方式の修正（実測で是正）：最初は `.about__media` に負マージン
        （`margin: 20px calc(5px - var(--sp-gutter)) 0`）を当てて gutter を打ち消す実装にしたが、
        全要素スイープで **`.about__inner` が clientWidth 315 / scrollWidth 340（＝25pxはみ出し）**
        として検出された（`.about{overflow:hidden}` のおかげで横スクロールは出ないが、
        「要素ごとの scrollWidth > clientWidth」検査では FAIL になる種類）。
        → 負マージンをやめ、**`.about` の左右 padding 自体を 5px にし、テキスト側にだけ
          `calc(var(--sp-gutter) - 5px)` の左右マージンを戻す**方式に変更した。
          結果はピクセル単位で同じ（テキスト左端 30px・右端 345px、画像 5px〜370px＝365px幅）で、
          はみ出しは 0 になる。**新しい余白トークンは作っていない**（既存 --sp-gutter からの算出）。
     PROD-20260922-014 旧:
     .about__media {
       position: static;
       width: 100%;
       max-width: none;
       height: auto;
       margin: 20px 0 0;
       z-index: 0;
     } */
  .about__media {
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    margin: 20px 0 0;
    z-index: 0;
  }
  /* 画像だけを画面端5pxまで広げるため、セクションの左右paddingを5pxにし、
     テキスト側（ラベル・見出し・本文・ボタン）だけ従来の 30px 位置に戻す */
  .about .section-label,
  .about .section-title,
  .about__body {
    margin-left: calc(var(--sp-gutter) - 5px);
    margin-right: calc(var(--sp-gutter) - 5px);
  }
  .about__img--main { position: static; width: 100%; height: auto; }
  /* テキストは写真レイヤーより前面に */
  .about .section-label,
  .about .section-title,
  .about__body,
  .about__text .btn { position: relative; z-index: 1; }
  /* hero(水色)→ABOUT(白)の間に矩形の縁が出ないよう、セクション上端だけを
     カンプ実測のフェード帯（@375で約673→692の20px弱）に合わせて薄く繋ぐ */
  /* PROD-20260922-008（RYO指示：「セクション白背景に」）：
     SP側も #ffffff に統一。上端26pxの --sky-01 フェード帯は、ヒーロー下端（当時は水色）と
     ABOUT（白）の間に矩形の縁が出ないための繋ぎだったが、
     ・ヒーローの地色は PROD-20260919-005/006 以降 #ffffff
     ・ヒーロー下端は支給 fv-sp.jpg に焼き込まれた波形カット（PROD-20260922-004/006）
     となっており、繋ぐべき水色がもう存在しない。残すと逆に「白いABOUTの上端だけ水色の帯」になる。
     🔴 これが .about の background 宣言 2箇所目（基底ルールと合わせて 2/2 変更）。
     旧値（切り戻し用・全文）：
     .about {
       background:
         linear-gradient(to bottom, var(--sky-01) 0, rgba(255,255,255,0) 26px),
         var(--white);
     } */
  .about {
    background: #ffffff;
  }
  .about__text .btn {
    order: 2;
    width: 249px;
    /* PROD-20260922-005：写真が絶対配置ではなく通常フローに戻ったため、
       本文下端からの 290px という距離指定は「本文と写真の間に巨大な空白」を作るだけになる。
       旧値（切り戻し用）：margin: 290px 0 0 auto;  ← 写真を絶対配置していた時の値
       （旧コメント：カンプ実測 本文下端893 → ボタン上端1186.6＝差293.6px） */
    /* PROD-20260922-014 旧: margin: 24px 0 0 auto;
       （.about の左右paddingを30px→5pxにしたぶん、ボタンの右マージンで従来位置に戻す） */
    margin: 24px calc(var(--sp-gutter) - 5px) 0 auto;
    justify-content: center;
    padding: 9px 14px;   /* カンプ実測の枠高さ41.8pxに合わせる */
  }

  /* 🔴 PROD-20260922-014（実ブラウザのスクショ目視 → 実測で発見・是正）
     作業3で INFORMATION パネルの実データを入れた結果、**viewport 375px ちょうどで
     パネル内容が右に 14.4px はみ出して文字が切れていた**（`.info__panel` の内容右端 329px に対し
     テキスト右端 343.4px）。RYOが見ている幅そのものなので最優先で是正。
     原因：`.info__text` の `white-space: nowrap`。新しい住所
     「〒910-3402 福井県福井市鮎川町195-7」（旧「福井県坂井市三国町安宅23-1」より7文字長い）が
     grid列の min-content を押し上げ、パネル内容幅を超えた。
     実測の帯：320/360 は既存の `@media (max-width:374px)` の解除が効いて0、**375〜389が NG**、390以上は0。
     対処：PROD-20260922-013 が 374px以下に入れた**同じ宣言**をSP帯全体（max-width:899px）へ広げるだけ。
           900〜1439px帯には既に同じ宣言があるため、これで 1440px 以上だけが nowrap のまま
           （＝PCの1行レイアウトは無改変）。新しいコンポーネント・トークンは作っていない。
     ※ `@media (max-width:374px)` 側の同一宣言はこれで重複になるが、切り戻し時の可読性のため残している。 */
  .info__text,
  .info__label { white-space: normal; overflow-wrap: anywhere; }
  /* 折り返しを許可すると料金行（`justify-content:space-between` の flex）の金額側が
     「600 / 円」と割れるため、金額だけ1行に保つ（PROD-20260922-013 と同じ対処を同じ範囲で適用） */
  .info__fee-price { white-space: nowrap; flex-shrink: 0; }

  /* ---------- KIDS CLUB ---------- */
  /* A-3対応：「海の研究クラブ／探検隊」はカンプでは1行。実測22.7px相当。
     40pxのままでは11文字×40=440pxで確実に2行になっていた */
  /* PROD-20260905-015 実測（col0・K=375/341=1.0997。バンド上端y1126／下端y1453）：
     セクション高 327×K=359.6px、ラベル上端28.6px、見出し1行目51.7px、2行目81.4px、
     本文1行目122.1px、ボタン上端229.9px */
  .kidsclub { min-height: 360px; }
  /* PROD-20260918-001：28px → トークン化。下96pxは写真の被写体を避けるための実測値のため維持 */
  .kidsclub__panel { margin-left: 0; max-width: 100%; padding: var(--space-section-sm) var(--sp-gutter) 96px; }
  /* A-13対応：SPカンプは「上部が明るい空・被写体は右下」で左側のテキストが完全に読める。
     実装は cover + center で子どもと青い網が見出しの真裏に来て判読困難になっていた。
     写真の中身（除外軸2）は変えず、SPの表示窓（background-position）だけを左に寄せる。
     インラインstyleのbackground-positionを上書きするため !important を使う */
  /* PROD-20260905-015 項目1：background-position の調整では被写体（磯で網を持つ子ども3人）が
     一人も見えなかった。PC用素材 temp_kidsclub_photo.png はPCカンプ由来の横長ストリップで
     SPカンプの画角と一致しないのが真因。top-sp.png col0 の KIDS CLUB バンド
     （y1126-1453 / x1-340）を切り出し、カンプ側の文字（ラベル・見出し2行・本文5行・ボタン）を
     上下の実画素からの縦方向線形補間で消し、波の白地部分は端行の複製で埋めたSP専用素材を新規作成。
     Read で目視確認済み（文字の写り込み・黒塗り・他セクション混入なし・子ども3人が右半分に写る） */
  .kidsclub__photo {
    background-image: url('images/temp_kidsclub_photo_sp.png') !important;
    background-position: center top !important;
    background-size: cover !important;
  }
  /* SPカンプ実測：KIDS CLUB見出しの最濃画素は rgb(0,11,134)＝他セクションの見出しと同じ青。
     実装は1行目 #135094・2行目 #052a63 と2色に分かれていたため、SPでは --ink に統一する */
  /* PROD-20260923-001 旧: …{ color: var(--ink); }（SP帯の --ink は #00197d ＝旧の濃紺）
     ラベル・見出しとも --ink-heading に集約。
     （当時の --ink-heading の値は #1A5FD0。現行値は PROD-20260923-008 で #0c44a2）
     この見出しは白いパネルの上であり写真の直上ではないため青でよい。 */
  .kidsclub .section-label--onphoto,
  .kidsclub .section-title--onphoto,
  .kidsclub .section-title--onphoto .hand { color: var(--ink-heading); }
  /* PROD-20260905-015 項目2：カンプSPの見出しは2行とも同じ丸ゴシック・同じ濃い青。
     2行目が薄く見えていた原因は色ではなくフォント（--font-hand = Yomogi・weight400の
     細い手書き）だった。実測色は1行目 rgb(0,39,149)→、2行目 rgb(0,19,134)→ で
     どちらも --ink(#00197d) に収束するため色指定は据え置き、SPのみ本文と同じ
     丸ゴシック・weight600に揃える。
     実測サイズ：1行目 字送り17.8col0(=19.6@375)・インク高15、2行目 字送り20.7col0(=22.8@375)・インク高20 */
  /* PROD-20260922-014 旧: .kidsclub .section-title- -onphoto { font-size: 19px; line-height: 1.42; font-weight: 500; }
     🔴 font-weight:500 はこの1箇所だけの例外だった（他は全て600）。600に統一するため撤去。 */
  .kidsclub .section-title--onphoto .hand {
    font-family: var(--font-jp);
    /* インク被覆率の実測：カンプ0.182 に対し weight600=0.266 / 500=0.216 / 400=0.172。
       最も近い400を採用（カンプの書体は丸ゴシック系でZen Kaku Gothic Newより細く見えるため） */
    font-weight: 400;
    font-size: 22.5px;
    letter-spacing: 0;
    line-height: 1.35;
    white-space: nowrap;
    margin-top: 3px;
  }
  /* PROD-20260905-015 項目3：カンプSP実測 字送り9.4〜10.3col0(=10.3〜11.3@375)、
     行ピッチ19col0(=20.9@375)、色は収束値 rgb(15,34,76)＝--ink-body。太めなので600 */
  .kidsclub__body--pc { display: none; }
  .kidsclub__body--sp { display: block; }
  .kidsclub__body {
    /* 実装の行幅165/187/187/176 に対しカンプ実測は155/181/176/165。比1.055で11px→10.4pxに補正。
       行ピッチはカンプ実測20.9pxを維持するため line-height を 2.01 に調整 */
    font-size: var(--fs-body); /* PROD-20260922-010 旧: font-size: 10.4px */
    line-height: var(--lh-body); /* PROD-20260922-010 旧: line-height: 2.01 */
    font-weight: 600;
    color: var(--ink-body);
    /* カンプ実測：本文ブロック下端226.6→ボタン上端229.9（差3.3px） */
    margin-bottom: 4px;
  }
  /* PROD-20260905-015 項目4：カンプSPのボタン枠 x23-127.5 / y1335-1365（col0）
     → 幅104.5×K=114.9px・高さ30×K=33.0px。文字インク高8col0→font-size約10.5px */
  .kidsclub .btn--white {
    width: 115px;
    height: 33px;
    padding: 0 8px 0 12px;
    font-size: 10.5px;
    letter-spacing: .02em;
    gap: 6px;
    justify-content: space-between;
    border-radius: 6px;
  }

  /* ---------- EXPERIENCE ---------- */
  /* A-7対応：カンプSPは写真が高く（約355px相当）、メモカードが写真に大きく重なる。
     CRAFTは右寄せ・OBSERVATIONは左寄せ。カンプでは右端から少しはみ出しているが、
     scrollWidth===375 を守るため画面内に収めている（正直な申告：はみ出しは再現していない） */
  /* PROD-20260918-001：22/14px → トークン化 */
  .experience { padding: var(--space-section) 0; }
  .experience__head { padding: 0 var(--sp-gutter); }
  /* 写真を高くした（227px→約354px）ことで、インラインの background-size:220% auto では
     拡大率が過大になり画像が極端にボケるため、SPのみ cover に上書きする
     （写真の絵柄そのものは仮素材＝除外軸2。ここで直しているのは表示倍率のみ） */
  /* PROD-20260905-014 カンプSP(top-sp.png)実測。col1 = 画像x360..690（実幅331px）
     → 換算係数 K = 375/331 = 1.1329（brain §11：カラムごとに換算係数を出す）
     CRAFT写真  : 画像 x360..670 / y93..390 → @375 で 左0・幅351（右24px内側）・高336.5
     CRAFTカード: 画像 x494..672 / y244..417 → @375 で 左151.8・右353.5・幅201.7・高196
     OBS写真    : 画像 x360..690 / y437..625 → @375 で 全幅375・高213
     OBSカード  : 画像 x383..575 / y561..731 → @375 で 左26.0・右243.6・幅217.5・高192.6 */
  .exp-card__photo-sp { background-size: cover !important; }
  .exp-card--craft .exp-card__photo-sp {
    width: calc(100% - 24px);
    aspect-ratio: 310 / 297;      /* 351 x 336.5 @375 */
    border-radius: 24px 24px 4px 4px;
  }
  .exp-card--obs .exp-card__photo-sp {
    width: 100%;
    aspect-ratio: 330 / 188;      /* 375 x 213 @375 */
    border-radius: 0;
  }
  /* カンプのカード地色をピクセル実測：CRAFT rgb(244,243,243) / OBS rgb(246,246,246)
     ＝ほぼ白（ページ地色 rgb(249,249,250) よりわずかに沈む）。--cream(#faf7ef)は黄味が強すぎた */
  .exp-card__memo {
    padding: 14px 16px;
    background: #f5f4f3;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(20,40,70,.10);
  }
  .exp-card--craft .exp-card__memo { margin-top: -166px; margin-left: 40.5%; width: 53.8%; }
  .exp-card--obs .exp-card__memo { margin-top: -73px; margin-left: 6.9%; width: 58%; }
  .exp-card + .exp-card { margin-top: 18px; }
  .exp-card__label { font-size: 9px; }
  .exp-card__title { font-size: 17px; color: var(--ink); margin-bottom: 5px; } /* PROD-20260922-010 旧: font-size: 15px（本文16pxより小さい見出しになるため） */
  .exp-card__text { font-size: var(--fs-body); color: var(--ink-body); line-height: var(--lh-body); margin-bottom: 8px; } /* PROD-20260922-010 旧: font-size: 11px; line-height: 1.75 */
  /* カンプの「詳しく見る →」は枠付きボタンではなくプレーンなテキストリンク＋長い矢印 */
  .exp-card__memo .btn {
    background: none; border: 0; box-shadow: none; padding: 0;
    color: var(--ink); gap: 18px;
  }
  .exp-card__memo .btn:hover { transform: none; box-shadow: none; }

  /* ---------- ACTIVITY LOG（SP：横スクロールカルーセル） ---------- */
  /* カンプSPの活動記録セクションの地色をピクセル実測：rgb(249,249,249)＝ほぼ白。
     実装の --sky-01(#eaf4fb) は水色に寄りすぎていた */
  /* PROD-20260918-001：12/16px → トークン化 */
  .activitylog { padding: var(--space-section) 0; background: #f9f9fa; }
  .activitylog__inner { padding: 0 var(--sp-gutter); gap: 6px; }
  .activitylog__head .activitylog__lead,
  .activitylog__head .btn { display: none; }
  .activitylog__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 215px;   /* カンプ実測：カード幅 190px(画像) × K1.1329 = 215.3 */
    grid-template-columns: none;
    gap: 26px;                  /* カンプ実測：カード間 23px(画像) × K = 26.1 */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px var(--sp-gutter) 8px;
    margin: 0 calc(var(--sp-gutter) * -1);
    /* 既存バグ修正：width:100%（＝inner の 315px）のまま負marginで左だけずれており、
       カルーセルの右端が 315px で切れて2枚目が画面右端まで伸びていなかった */
    width: calc(100% + var(--sp-gutter) * 2);
    /* scroll-snap は padding を無視して先頭を scrollport 左端に吸着するため、
       読み込み直後に scrollLeft=30 となり1枚目の左余白が消えていた */
    scroll-padding-left: var(--sp-gutter);
    scrollbar-width: none;
  }
  .activitylog__list::-webkit-scrollbar { display: none; }
  /* A-8対応：カンプの活動記録カードは白い「紙」のカード（枠線＋角丸）。
     実装は background:transparent / border:0 / radius:0 で紙の表現が無かった */
  /* PROD-20260905-014：カンプSPの活動記録カードは「こげ茶の細い枠線の紙カード」。
     枠線色は実測（左枠 x383-386 / 上枠 y822-825 の最暗60画素の中央値）rgb(138,120,97)。
     アンチエイリアス分を差し引いた実線値として rgb(124,105,80) を採用。
     カード地色の実測は rgb(253,253,253)＝ほぼ白（＝秘書指摘の「生成り」とは一致せず。実測を採用）。
     カード内の写真にも同じ枠線が付く（写真縁の最暗値 rgb(135,115,76)）。 */
  .log-card {
    scroll-snap-align: start;
    background: #fdfdfd;
    border: 1px solid #7c6950;
    border-radius: 6px;
    padding: 12px;
    box-shadow: none;
  }
  /* PROD-20260922-014 旧: .activitylog .section-title { font-size: 22px; margin-bottom: 0; } */
  /* PROD-20260923-001 旧: .activitylog .section-label { margin-bottom: 4px; }
     SPのラベル下余白を1種類(6px)にするため撤去。 */
  /* カンプ実測：写真 167×77px(画像) → @375 で 189×87 ＝ 2.17/1 */
  .log-card__photo {
    aspect-ratio: 167/77;
    margin-bottom: 12px;
    border: 1px solid #7c6950;
    border-radius: 2px;
  }
  /* カンプ実測：タイトル9文字が124px(画像)＝13.8px/字 → @375 で 15.6px。行送り23px(画像)→26px */
  .log-card__title { font-size: var(--fs-body); color: var(--ink); margin-bottom: 0; line-height: var(--lh-body); } /* PROD-20260922-010 旧: font-size: 15px; line-height: 1.72 */
  /* カンプSPのカードは「日付＋タグ＋写真＋タイトル2行」のみで本文を持たない（PCは従来どおり本文あり） */
  .log-card__excerpt { display: none; }
  .log-card__meta { font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: 9px; justify-content: space-between; } /* PROD-20260922-010 旧: font-size: 10.5px */
  /* カンプSPの日付には丸マーカーが無い（PCのタイムライン表現はPC側でのみ維持） */
  .log-card__date::before { display: none; }
  /* カンプ実測のタグ地色：いきもの観察 rgb(176,210,240) / クラフト rgb(232,201,166)、文字は白 */
  .log-card__tag {
    background: #b0d2f0;
    border: 0;
    border-radius: 4px;
    color: #ffffff;
    font-size: var(--fs-body); /* PROD-20260922-010 旧: font-size: 10px（padding 2px 8px） */
    line-height: 1.5;
    padding: 2px 10px;
  }
  .log-card__tag--craft { background: #e8c9a6; border: 0; color: #ffffff; }
  .activitylog__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
  }
  .activitylog__dots button {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--line);
    padding: 0;
  }
  .activitylog__dots button.is-active { background: var(--ink); width: 8px; height: 8px; }

  /* ---------- CREATURES ----------
     A-5対応：カンプSPは「全幅の大判写真（375×約156）に見出しを白文字でオーバーレイ」
     ＋「小カード3枚を1行」＋「ボタンはグリッドの下・中央」。
     実装は335px幅のインセット写真・見出しは写真の上の白地・小カード4枚2行・
     ボタンは見出し直下という別構造だった。
     カンプに無い .creatures__lead はSPでは非表示にする。
     PC(min-width:900px)側の構造には一切触れていない */
  /* PROD-20260918-001：下22px → トークン化。上は .creatures__head が absolute top:0 のため
     padding-top を足すと見出しだけが写真の外に浮くので 0 のまま（上側の余白は
     直前の .activitylog の padding-bottom が担当する） */
  .creatures { position: relative; padding: 0 0 var(--space-section); }
  .creatures__inner { display: block; }
  .creatures__head {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 3;
    margin: 0;
    padding: 16px var(--sp-gutter) 0;
  }
  .creatures__head .section-label,
  .creatures__head .section-title { color: var(--white); }
  /* PROD-20260923-001 旧: .creatures__head .section-label { margin-bottom: 4px; }
     SPのラベル下余白を1種類(6px)にするため撤去。
     🔴 すぐ上の `color: var(--white)` は暗い写真の上の白文字なので**触っていない**。 */
  /* PROD-20260922-014 旧: .creatures__head .section-title { font-size: 21px; line-height: 1.34; margin-bottom: 0; }
     🔴 この見出しは**暗い写真の上**に乗っており、すぐ上の `color: var(--white)` は
        RYO指示の「白のまま残す」対象なので**触っていない**（コントラスト実測値は AGENT_LOG 参照）。 */
  .creatures__lead { display: none; }
  .creatures__head .btn { display: none; }
  .creatures__grid { gap: 12px; }
  .creature-feature { aspect-ratio: 2.4/1; }
  /* PROD-20260923-011：
     旧: .creature-feature__no, .creature-feature__name { bottom: 14px; left: var(--sp-gutter); }
         .creature-feature__no { font-size: var(--fs-body); }
         .creature-feature__name { font-size: var(--fs-body); margin-left: 66px; }
         （margin-left:66px は No.表記との重なりを避けるための逃げ。No. を消したので不要） */
  .creature-feature__info { bottom: 14px; left: var(--sp-gutter); right: var(--sp-gutter); }
  .creature-feature__name { margin-left: 0; }
  /* SPでは学名を出さない。これは変更前から .creature-feature__latin { display:none } だった挙動で、
     小カード側も同じ扱いに揃えている（名前だけを写真の上に乗せる）。 */
  .creature-feature__latin,
  .creatures .creature-card__latin { display: none; }
  /* 2026-09-05（PROD-20260905-013）秘書指摘7「小カードの写真が横長・隙間が広い」への対応。
     カンプ(top-sp.png)のcol1（x360..690・K=375/331=1.1329）で実測した@375換算：
       写真1 x 15.9〜119.0（幅103.1） / 写真2 x 133.7〜242.4（幅108.7） / 写真3 x 254.9〜359.1（幅104.2）
       左右のガター 15.9px（--sp-gutter の30pxではない） / カード間の隙間 12.5〜14.7px
       写真の高さ 98.6px → 縦横比 103.1/98.6 = 1.046（ほぼ正方形。旧実装は1.15/1で横長） */
  .creatures__sub {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 0 16px;
  }
  /* カンプSPの小カードは3枚1行。4枚目はSPでは出さない */
  .creatures__sub .creature-card:nth-child(4) { display: none; }
  .creature-card { display: block; }
  .creature-card__photo { aspect-ratio: 1.046/1; margin-bottom: 5px; flex: none; }
  .creature-card__no { font-size: var(--fs-body); } /* PROD-20260922-010 旧: font-size: 9.5px */
  /* PROD-20260922-010：SPの小カードは幅約105px（375 − 左右16 − gap14×2 ÷3）しかないため、
     16px＋nowrap では「ウミウシのなかま」(約128px)がはみ出して横スクロールになる。
     nowrap を外して折り返しを許可する（旧: font-size: 12px; white-space: nowrap;） */
  .creature-card__name { font-size: var(--fs-body); margin-top: 0; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
  .creature-card__latin { display: none; }
  /* PROD-20260923-011（TOPのみ）：小カードも写真の上に名前を重ねる。
     旧はこの帯では「写真 → 下に濃紺(--ink)の名前」で、名前の行数（1〜2行）が
     カードごとに違うため3枚の高さが揃っていなかった。重ねることで高さは写真比だけで決まる。
     🔴 カード幅は375pxで約105px しかないため、左右の内側余白は 18px → 8px に詰めている
        （この 8px は制作部署が決めた値＝正直な申告。18pxのままだと文字幅が69pxしか残らず
         「ウミウシのなかま」が3行に割れてカードからはみ出す）。 */
  .creatures .creature-card { aspect-ratio: 1.046/1; }
  .creatures .creature-card__info { left: 8px; right: 8px; bottom: 8px; }
  /* 秘書指摘6「一覧を見るボタンの幅が狭く中央に小さく置かれている」への対応。
     カンプ実測（col1・K=1.1329）：枠の上辺 y1388 / 下辺 y1427、左辺 x65 / 右辺 x245
     → @375換算で x 73.6〜277.6（幅204px）・高さ45px。
     ※秘書の指示文には「約305px相当」とあるが、自分の実測では204pxだった。
       実測値（204px）を採用している。カンプ上の左右余白は左73.6px・右97.4pxで
       厳密には中央ではないため、margin-left も実測値で固定している */
  .creatures__btn-sp {
    display: flex;
    width: 204px;
    /* 375pxのとき左端74px。中間幅では中央寄りにずれる（375px設計の相対位置を保つ） */
    margin: 18px auto 0 calc(50% - 187.5px + 74px);
    justify-content: center;
  }

  /* ---------- INFORMATION ----------
     A-6対応：カンプSPは「ほぼ白のセクション地の上に、白地＋青1px枠＋角丸のカード」で、
     3項目の間にヘアライン、料金は右揃え、地図は約2:1、アイコンは丸囲みの¥と車。
     実装は背景が水色 rgb(215,233,247)、パネルは背景・枠線・角丸・影がすべて0だった */
  /* PROD-20260918-001：20/24px → トークン化 */
  .info { padding: var(--space-section) var(--sp-gutter) var(--space-section-lg); background: #f9fafb; }
  .info__head { margin-bottom: 12px; }
  /* PROD-20260922-014 旧: .info__head .section-title { font-size: 20px; white-space: nowrap; }
     nowrap も外す：24px統一後「ご利用案内・アクセス」はSP375の本文幅に収まらず、
     nowrap のままだとパネル外へはみ出す（実測で確認）。折り返しを許可する。 */
  .info__panel {
    background: var(--white);
    border: 1px solid #b9d4ea;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(14,58,99,.06);
    padding: 4px 16px 16px;
    gap: 0;
  }
  .info__panel::before { display: none; }
  .info__item { padding: 14px 0; border-top: 1px solid #e3edf5; gap: 12px; align-items: flex-start; }
  .info__panel > .info__item:first-of-type { border-top: 0; }
  .info__icon--pc { display: none; }
  .info__icon--sp { display: block; }
  .info__icon svg { width: 26px; height: 26px; }
  .info__item > div { flex: 1; min-width: 0; }
  .info__label { font-size: var(--fs-body); color: var(--ink); margin-bottom: 6px; } /* PROD-20260922-010 旧: font-size: 13.5px */
  .info__text { font-size: var(--fs-body); color: var(--ink-body); line-height: var(--lh-body); } /* PROD-20260922-010 旧: font-size: 12px; line-height: 1.9 */
  .info__fee { display: flex; justify-content: space-between; gap: 10px; }
  .info__fee-price { margin-left: 0; }
  .info__map { aspect-ratio: 2/1; width: 100%; height: auto; border-radius: 6px; margin-top: 4px; }
  .info__cta {
    justify-self: stretch;
    width: 100%;
    justify-content: center;
    margin-top: 14px;
    background: transparent;
  }

  /* ---------- CONTACT ---------- */
  .contact { min-height: 340px; height: auto; }
  /* PROD-20260918-001：40px → トークン化 */
  .contact__panel { padding: var(--space-section-sm) var(--sp-gutter); }
  /* PROD-20260922-014 旧: .contact .section-title- -onphoto { font-size: 22px; }
     色は基底の `.section-title- -onphoto { color: var(--white) }` のまま（写真の上なので白を維持）。 */
  .contact__text { font-size: var(--fs-body); line-height: var(--lh-body); } /* PROD-20260922-010 旧: font-size: 12px; line-height: 1.85 */

  /* ---------- FOOTER（RYO確定事項17によりカンプ非再現が正。構成は変更しない） ---------- */
  /* PROD-20260918-001：24/18px → トークン化 */
  .footer { padding: var(--space-section-sm) var(--sp-gutter) 28px; }
  .footer__brand { margin-bottom: 16px; }
  /* 🔴 PROD-20260923-007 旧: .footer__nav { … padding-bottom: 16px; }
     SPは区切り線＝ .footer__nav の border-bottom（PCと違い .footer__bottom 側に線はない）。
     実測（SP375）：ナビ最終行→線 17px ／ 線→SNS 12px と上下とも詰まっていたため、
     PCと同じ考え方で線の上下を広げる（SPは余白トークンが一律小さい帯なので 24px）。 */
  .footer__nav { grid-template-columns: 1fr; gap: 16px; padding-bottom: 24px; }
  .footer__col-title a { font-size: var(--fs-body); } /* PROD-20260922-010 旧: font-size: 12.5px */
  .footer__sns { padding: 12px 0; }
  .footer__bottom { padding-top: 24px; } /* 🔴 PROD-20260923-007 旧: padding-top: 12px（線→SNS/© のクリアランス拡大） */
}

/* =====================================================================
   下層ページ（仮組み）— TOPでは使わないクラスのみ。TOPの表示には影響しない
   ※デザインカンプ未支給のため、TOPのトークン・コンポーネントを流用した最小構成
   ===================================================================== */
.subpage__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
.subpage-hero {
  padding: 132px 0 28px;
  /* PROD-20260919-003：ロゴを透過PNG（images/logo.png）にしたため、白い矩形を隠すための
     白ヴェール（PROD-20260918-003 で重ねた1枚目のグラデーション）は不要になった。
     撤去して、設計どおりの sky-01 → 白 のグラデーション1枚に戻す。 */
  background: linear-gradient(180deg, var(--sky-01) 0%, #ffffff 100%);
}
.subpage-hero .section-title { margin-top: 4px; }
.subpage__lead {
  margin-top: 14px;
  color: var(--text);
  font-size: var(--fs-body); /* PROD-20260922-010 旧: font-size: 15px */
  line-height: var(--lh-body); /* PROD-20260922-010 旧: line-height: 1.9 */
}
/* 🔴 PROD-20260924-005（DIR-20260924-004 FAIL-1 是正）
   原稿がヒーロー #1 の一部として定義している「リード2行目」を .subpage-hero 内に入れたことで、
   .subpage__lead が2枚続くページ（/experience/observation/ ・ /experience/craft/）が生まれた。
   2行が1つのリードとして読めるよう、行間相当の小さい間隔だけを空ける。
   隣接セレクタなので .subpage__lead が1枚だけの既存ページ（/log/ /creatures/ /about/ /kidsclub/
   /experience/ /contact/ /404）には一切当たらない。新規追加のみで既存行の変更・削除なし。 */
.subpage__lead + .subpage__lead { margin-top: 6px; }
/* PROD-20260918-001：下層ページもTOPと同じ余白トークンに揃える */
.subpage-body { padding: var(--space-section) 0 0; }
/* PROD-20260922-014 旧: .subpage__h2 { margin-bottom: 14px; }
   見出し下の余白を1つの値に統一する指示のため、基底 .section-title の 24px に揃える
   （この1件だけ 14px で残っていると「種類数1」にならない。実render実測で発見） */
/* PROD-20260923-001 旧: .subpage__h2 { margin-bottom: 24px; } */
.subpage__h2 { margin-bottom: var(--space-h2); }
.subpage__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); } /* PROD-20260922-010 旧: line-height: 2（font-size は body 継承 15px） */
.subpage__text p { margin-bottom: 1em; }

.subpage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.subpage-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 20px 22px;
}
.subpage-card__label {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--navy-soft);
}
.subpage-card__title {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  margin: 6px 0 8px;
}
.subpage-card__text {
  font-size: var(--fs-body); /* PROD-20260922-010 旧: font-size: 14px */
  line-height: var(--lh-body); /* PROD-20260922-010 旧: line-height: 1.9 */
  color: var(--text);
  margin-bottom: 14px;
}

.subpage-info { padding: var(--space-section) 0 0; }
.subpage-info__list {
  margin-top: 18px;
  border-top: 1px solid var(--line);
}
.subpage-info__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.subpage-info__row dt {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 700;
  color: var(--ink);
}
.subpage-info__row dd { font-size: var(--fs-body); line-height: var(--lh-body); } /* PROD-20260922-010 旧: line-height: 1.9（font-size は body 継承 15px） */

.subpage-creatures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.subpage-creatures .creature-card { width: 100%; }

.subpage-thumb { margin-bottom: 22px; }
.subpage-back { margin-top: 30px; }
.subpage-pager { margin-top: 28px; }

.subpage-cta {
  margin-top: var(--space-section);
  padding: var(--space-section) 0;
  background: var(--sky-01);
  text-align: center;
}
.subpage-cta .subpage__lead { margin-bottom: 20px; }

@media (max-width: 899px) {
  .subpage-hero {
    padding-top: 104px;
    /* PROD-20260919-003：PCと同じく白ヴェールを撤去（ロゴが透過PNGになったため不要） */
    background: linear-gradient(180deg, var(--sky-01) 0%, #ffffff 100%);
  }
  .footer__logo-img { height: 52px; }
  .subpage-info__row { grid-template-columns: 1fr; gap: 4px; }
}

/* =====================================================================
   お問い合わせフォーム（Contact Form 7）— PROD-20260922-001
   /contact/ 専用。TOPで使うクラスには一切触れていない。
   CF7の出力は .subpage-body .subpage__inner の中に入る。
   ===================================================================== */
.subpage-body .wpcf7 { margin-top: 8px; }
.subpage-body .wpcf7 form { max-width: 720px; }

.cf7-form .cf7-row {
  display: block;
  margin: 0 0 26px;
  /* ラベルと入力欄の間に入る空白テキストノードが行ボックスを作り、
     body の line-height 分の余分な隙間になる。ここで0にして子要素側で個別指定する */
  line-height: 0;
}
.cf7-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: var(--fs-body); /* PROD-20260922-010 旧: font-size: 15px */
  font-weight: 700;
  color: var(--ink);
  line-height: var(--lh-body); /* PROD-20260922-010 旧: line-height: 1.6 */
}
.cf7-badge {
  display: inline-block;
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--sky-02);
  color: var(--navy-deep);
  font-size: var(--fs-body); /* PROD-20260922-010 旧: font-size: 11px */
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5; /* PROD-20260922-010 旧: line-height: 1.4 */
}
.cf7-badge--req {
  background: var(--navy);
  color: var(--white);
}
.subpage-body .wpcf7 .wpcf7-form-control-wrap {
  display: block;
  line-height: 0; /* CF7が生成するインラインラッパの余分な行送りを消す */
}
.cf7-note {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-body); /* PROD-20260922-010 旧: font-size: 12.5px */
  line-height: var(--lh-body); /* PROD-20260922-010 旧: line-height: 1.8 */
  color: var(--text-light);
}

/* 入力欄。CF7が出す size / cols 属性より width:100% を優先させる（横はみ出し防止） */
.subpage-body .wpcf7 input[type="text"],
.subpage-body .wpcf7 input[type="email"],
.subpage-body .wpcf7 input[type="tel"],
.subpage-body .wpcf7 input[type="date"],
.subpage-body .wpcf7 select,
.subpage-body .wpcf7 textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-jp);
  font-size: 16px; /* 16px未満だとiOS Safariでフォーカス時にズームする */
  line-height: 1.6;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.subpage-body .wpcf7 textarea { resize: vertical; min-height: 180px; }
.subpage-body .wpcf7 select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231c4a73' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
.subpage-body .wpcf7 input[type="date"] { max-width: 260px; }

.subpage-body .wpcf7 input:focus,
.subpage-body .wpcf7 select:focus,
.subpage-body .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(28, 74, 115, .15);
}

/* 送信ボタン */
.cf7-submit { margin: 34px 0 0; text-align: center; line-height: 0; }
.subpage-body .wpcf7 input[type="submit"] {
  min-width: 240px;
  padding: 16px 40px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background-color .2s, color .2s;
  -webkit-appearance: none;
  appearance: none;
}
.subpage-body .wpcf7 input[type="submit"]:hover {
  background: var(--white);
  color: var(--navy);
}

/* バリデーション・送信結果メッセージ */
.subpage-body .wpcf7 .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: #b3261e;
  font-size: var(--fs-body); /* PROD-20260922-010 旧: font-size: 13px */
  line-height: var(--lh-body); /* PROD-20260922-010 旧: line-height: 1.7 */
}
.subpage-body .wpcf7 .wpcf7-not-valid { border-color: #b3261e; }
.subpage-body .wpcf7-response-output {
  box-sizing: border-box;
  margin: 24px 0 0;
  padding: 14px 16px;
  border-radius: 6px;
  font-size: var(--fs-body); /* PROD-20260922-010 旧: font-size: 14px（.wpcf7-response-output） */
  line-height: var(--lh-body);
}
.subpage-body .wpcf7 form.sent .wpcf7-response-output {
  border: 1px solid #2f7d4f;
  background: #f0f8f3;
  color: #1d5e39;
}
.subpage-body .wpcf7 form.invalid .wpcf7-response-output,
.subpage-body .wpcf7 form.unaccepted .wpcf7-response-output,
.subpage-body .wpcf7 form.failed .wpcf7-response-output,
.subpage-body .wpcf7 form.aborted .wpcf7-response-output {
  border: 1px solid #b3261e;
  background: #fdf3f2;
  color: #8c1d18;
}
.subpage-body .wpcf7 .wpcf7-spinner { margin: 0 0 0 12px; }

@media (max-width: 899px) {
  .cf7-form .cf7-row { margin-bottom: 22px; }
  .cf7-label { font-size: var(--fs-body); } /* PROD-20260922-010 旧: font-size: 14px */
  .subpage-body .wpcf7 textarea { min-height: 160px; }
  .subpage-body .wpcf7 input[type="date"] { max-width: 100%; }
  .subpage-body .wpcf7 input[type="submit"] {
    width: 100%;
    min-width: 0;
    padding: 16px 20px;
  }
}

/* =====================================================================
   PROD-20260922-002：ビューポート 900〜1436px の横スクロール修正
   ---------------------------------------------------------------------
   【実測した原因】（1440px幅の見た目は1pxも変えない）
   ご利用案内セクションの PC レイアウト（@media min-width:900px）は
     .info（左右padding 20px×2 = 40px）
     ＋ .info__head（flex: 0 0 345px・見出しは white-space:nowrap）
     ＋ .info__inner の gap 16px
     ＋ .info__panel の最小必要幅 847px
        = grid列 105+175+159+227(地図)+137(ボタン) = 803
          ＋ gap 6px×4 = 24 ＋ padding 10px×2 = 20
   の合計 = 1248px を必要とする固定レイアウトだった。
   ビューポートがこれを下回ると .info__panel が縮まず右へはみ出し、
   document.scrollWidth が 1247px に張り付いていた（900/1000/1100/1213px で実測一致）。

   ※ .about__media / .about__img--building も clientWidth を超えるが、
     .about 側の overflow-x:clip でクリップされており scrollWidth には寄与しない
     （1300px・1400px で over_elems はあるが scrollWidth === clientWidth であることを実測確認）。

   【対処】1319px 以下では見出しをパネルの上に積む（横並びをやめる）。
   これで .info__panel は内側の全幅（900px時 860px ≧ 847px）を使えるようになる。
   1320px 以上は従来どおり横並び（1320px 時の余裕 1280 − 1248 = 32px）なので、
   1440px の表示は完全に無改変。
   ===================================================================== */
@media (min-width: 900px) and (max-width: 1319px) {
  /* ご利用案内：見出しをパネルの上に積み、パネルに内側の全幅を渡す */
  .info__inner { flex-direction: column; gap: 12px; }
  .info__head { flex: 0 0 auto; width: 100%; }
  .info__panel { width: 100%; }

  /* 活動記録：.log-card は grid-template-columns: 1fr 166px ＋ 写真 width:166px 固定で、
     カード列が3等分される中間幅ではテキスト列の min-content と合算してカードを押し広げ、
     scrollWidth を 1055px に張り付かせていた（900/1000px で実測）。
     写真を上限166pxで縮める・テキスト列に min-width:0 を与えて折り返せるようにする */
  .log-card { grid-template-columns: minmax(0, 1fr) minmax(0, 166px); }
  .log-card__photo { width: 100%; max-width: 166px; }
  .log-card__meta,
  .log-card__title,
  .log-card__excerpt { min-width: 0; overflow-wrap: anywhere; }

  /* いきもの図鑑：種名・学名の white-space:nowrap が .creature-card__info（中間幅では72px程度）
     からはみ出し、1200/1213px で scrollWidth を 8〜5px 超過させていた（実測 info.scrollWidth=100
     に対し clientWidth=72）。中間幅だけ折り返しを許可する（1440pxでは1行のまま） */
  .creature-card__info { min-width: 0; }
  .creature-card__name,
  .creature-card__latin { white-space: normal; overflow-wrap: anywhere; }
  /* ラベル列が狭すぎて種名が毎回2行に割れるため、中間幅だけ写真側の比率を下げて
     ラベルに幅を回す
     PROD-20260922-010：1440px側を 63.4% → 46% に下げたため、中間幅だけ写真が大きい逆転が
     起きる。中間幅も46%に揃える（旧: .creature-card__photo { flex: 0 0 52%; }） */
  .creature-card__photo { flex: 0 0 46%; }
  /* PROD-20260922-014 旧: .creatures__grid { grid-template-columns: minmax(0, 525px) minmax(0, 1fr); }
     🔴 この帯の宣言が @media(min-width:900px) 側（L1547）より後にあり後勝ちするため、
        L1547 に入れた小カード列の下限 230px が効かず viewport900 で 85px のままだった
        （computed `525px 85px` を実測して発見）。同じ下限をこちらにも入れる。 */
  .creatures__grid { grid-template-columns: minmax(0, 525px) minmax(230px, 1fr); }

  /* PROD-20260922-010：900〜1319px では小カードのラベル列が実測31pxまで潰れ、
     "No.012" が枠から14pxはみ出していた（1440pxでは156pxあるので発生しない）。
     この帯だけ写真とテキストの横並びをやめて縦積みにし、テキストにセル全幅を渡す。 */
  .creature-card { display: block; }
  .creature-card__photo { flex: none; width: 100%; margin-bottom: 6px; }
  .creature-card__info { width: 100%; }
}

/* =====================================================================
   PROD-20260922-010：ご利用案内パネルを 1320〜1439px でも破綻させない
   ---------------------------------------------------------------------
   【実測した問題】本文を 16px に統一したことで .info__item の必要幅（scrollWidth）が
     営業時間 105→160px ／ 料金 175→222px ／ アクセス 159→204px
   に増え、横並びレイアウトに必要な合計幅が
     345(head) + 16(gap) + [160+222+204+227(地図)+137(ボタン) + gap6×4 + padding10×2 = 994]
     + .info の左右padding 40 = 1395px
   になった。旧の切替点 1319px のままだと 1320〜1394px で列が min まで潰され、
   .info__text の white-space:nowrap が列からはみ出して地図に重なる
   （1320px 実測：列幅 123 / 193 / 177 に対し中身は 160 / 222 / 204）。
   ※document.scrollWidth は増えないため横スクロール検査だけでは検出できない。実測で発見した。

   【対処】
   ① 見出しをパネルの上に積む切替点を 1319px → 1439px に引き上げる
      （1440px の表示は無改変。1400px 前後は縦積みになる）
   ② 積んだあとも 900px 幅では panel 内容幅 840px しかなく 994px には足りないため、
      3項目の列を minmax(0,1fr) にして縮められるようにし、
      .info__text / .info__label の nowrap を解除して折り返しを許可する
      （＝はみ出しが構造的に起こらない形にする）
   ===================================================================== */
@media (min-width: 900px) and (max-width: 1439px) {
  .info__inner { flex-direction: column; gap: 12px; }
  .info__head { flex: 0 0 auto; width: 100%; }
  .info__panel {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 227px minmax(137px, auto);
  }
  .info__text,
  .info__label { white-space: normal; overflow-wrap: anywhere; }
}

/* =====================================================================
   PROD-20260922-012：ナビのハンバーガー切替点だけを 899px → 1023px へ
   =====================================================================
   RYO指示「ご利用案内をヘッダーから削除して文字大きく」の後半（文字拡大）を
   案Aで完遂するための帯。ナビを 13px → var(--fs-body)=16px にすると、
   実測でナビ1行に 723.9px 必要になり、viewport 900〜1023px では
   ナビに使える幅（900→632.9px／1000→732.9px／1023→756.9px から
   縦スクロールバー15px引いた値）に収まらず2行に折り返す。
   そこでこの帯だけ PC ナビをやめてハンバーガー＋SPドロワーを出す。

   🔴 動かしているのは「ナビの表示切替」だけ。
      レイアウト全体のブレークポイント（本文・セクション・ロゴ・ヘッダー高さなどの
      @media (min-width:900px) / @media (max-width:899px)）には一切触っていない。
      つまりこの帯では「PCのヘッダー体裁（総高120px・ロゴ84px・padding 18px 20px）の中に
      ハンバーガーが出る」状態になる。

   !important を付けているのは @media (min-width:900px) 側の
   `.sp-nav { display: none !important; }` / `.sp-nav-overlay { display: none !important; }`
   を上書きするため（同一詳細度・後勝ちでは !important に勝てないため）。

   JS 側の「PCサイズに戻ったら開きっぱなしを解除する」判定
   （js/main.js の matchMedia）も 900px → 1024px に合わせて変更済み。 */
@media (min-width: 900px) and (max-width: 1023px) {
  /* PROD-20260922-012 旧: この帯は @media (min-width:900px) により
     .header__nav { display: block; } / .header__burger { display: none; } だった */
  .header__nav { display: none; }
  .header__burger { display: flex; }
  .sp-nav { display: block !important; }
  .sp-nav-overlay { display: block !important; }

  /* ドロワー上部の逃げ。この帯のヘッダー総高は PC と同じ 120px なので、
     SP帯（ヘッダー84px → padding-top 104px ＝ +20px）と同じ逃げ量にして 140px。
     1項目目がロゴ・バーガーの真下に貼り付くのを避けるため。 */
  .sp-nav { padding-top: 140px; }
}

/* ---------------------------------------------------------------------
   PROD-20260922-012：フッターSNSアイコンを2個→6個に増やしたことによる
   「viewport 900〜979px でフッターが横にはみ出す」崩れの是正
   ---------------------------------------------------------------------
   実測（/experience/craft/ で `.footer__inner` の scrollWidth - clientWidth）：
     900px → 52px / 920px → 32px / 940px → 12px / 960px以上 → 0px はみ出し
   PCフッターは3カラムgrid（`grid-template-columns: auto 1fr auto`／住所・ナビ・SNS）で、
   SNS列は内容幅。アイコンが2個（34×2＋gap14 ＝ 82px）から6個（34×6＋gap14×5 ＝ 274px）に
   増えた分そのまま列幅が広がり、900px台でグリッド全体が枠を超えていた。

   RYO指示「アイコンは既存と同じ作り方・同じサイズ・同じ色・同じホバー挙動に揃える」に従い、
   **アイコンのサイズ・gap・色・並び（1段6個）は一切変えず**、この帯だけ SNS を
   横並びの3カラム目から外して**単独の行に送る**（列送り）。
   こうすると SNS が横幅を奪い合わなくなるので、6個のまま1段で収まる。

   ※ 当初 `max-width:130px` で 3個×2段に折り返す案を実装したが、実測すると 900px では
     grid列がさらに潰れて **2個×3段**になり見た目が悪かったため、この行送り方式に変更した。

   980px ではなく 999px までを対象にしているのは、実機の縦スクロールバー（約15px）ぶんの
   余裕を見るため（960px窓＝実効945pxでは12px前後はみ出す計算になる）。
   1000px以上は従来どおり右上に1段6個で出る。 */
@media (min-width: 900px) and (max-width: 999px) {
  .footer__sns {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: flex-start;
    padding: 14px 0 0;
  }
  /* PROD-20260922-012 旧: .footer__bottom { grid-row: 3 }（この帯のみ4行目に送る） */
  .footer__bottom { grid-row: 4; }
}

/* PROD-20260922-012：SNS 6個化により、viewport 374px以下では
   34px×6＋gap14px×5 ＝ 274px に対し本文幅が 320−30×2 ＝ 260px しかなく、
   flex の縮みでアイコンが 34×34 → 32×34 の楕円に潰れていた（320pxで実測）。
   サイズ・gap・色は変えず、縮ませない＋折り返す指定だけ足して形を保つ。
   ※ SP基準幅 375px では 6個とも 34×34 のまま1段に収まっているので、この帯だけの保険。 */
@media (max-width: 374px) {
  .footer__sns { flex-wrap: wrap; }
  .footer__sns a { flex-shrink: 0; }
}

/* =====================================================================
   PROD-20260922-013：既存のはみ出し2件の是正（PROD-20260922-012 申し送り5）
   ---------------------------------------------------------------------
   どちらも今回の変更で生まれたものではなく、以前から存在していた既存バグ。
   祖先に overflow:hidden / clip があるため document.scrollWidth は増えず、
   横スクロール検査では検出できない種類（要素ごとの scrollWidth > clientWidth 走査で検出）。
   本リビジョンで現在の本番CSSを使って再実測してから直した（前任の数値を追認せず測り直し）。

   ① .log-card__meta が viewport 900px で 31px はみ出す
      実測（本番・再現）：viewport 900 → .log-card__meta clientWidth 23 / scrollWidth 54
                         viewport 960 → 43 / 54（11pxはみ出し）／viewport 1000 以上 → 0

      原因：@media(min-width:900px) の `.log-card { grid-template-columns: 1fr 166px }` で
      写真列が実質166px固定なのに対し、`.activitylog__list` が3等分グリッドのため
      900px では1カード 201.3px しかなく、テキスト列が 23.3px まで潰れる。
      メタ行は「日付＋タグ（角丸ピル）」の flex で、タグの min-content だけで 38px あるため
      min-width:0 / overflow-wrap では構造的に収まらない
      （PROD-20260922-002 が 900〜1319px に入れた minmax(0,166px) でも写真は166pxのまま）。
      実測式：テキスト列 = (viewport − 300) / 3 − 178 → 54px を満たすのは viewport ≧ 996px。

      対処：**PROD-20260922-012 が既に特別扱いしている 900〜1023px の帯**（PCの体裁のまま
      ハンバーガーが出る帯）に限って、カードを SP と同じ縦積み（写真を下・全幅）に戻す。
      新しいコンポーネント・色・フォントサイズは作らず、基底（max-width:899px 側）の
      作りをそのまま使う。1024px 以上は一切無改変。

   ② .info__inner / .info__panel が viewport 320px で 13〜14px はみ出す
      実測（本番・再現）：viewport 320 → .info__inner 260/273（13px）
                                        .info__panel 258/272（14px）
                         viewport 340 → grid列が 255.625px に張り付いたまま（同原因）
                         viewport 360 以上 → 0

      原因：`.info__text` の `white-space: nowrap` が SP 帯で解除されていない。
      grid列の min-content が nowrap 1行の実幅（実測 217.6px ＋ アイコン26px ＋ gap12px
      ＝ 255.6px）に固定され、パネル内容幅（320px時 226px）より広くなる。

      対処：PC中間帯（@media (min-width:900px) and (max-width:1439px)・L2643）で
      既に使っている **同じ宣言**を 374px 以下にも適用するだけ。
      SP基準の 375px 以上は無改変。
      ※ 374px 以下という帯は PROD-20260922-012 のフッターSNS用に既に存在している。
   ===================================================================== */
/* 🔴 PROD-20260922-014（PROD-20260922-013 申し送り1 への対応）
   前任は「上限を 1023px → **1219px** に変えれば直る」と申し送っていたが、**前任の数値は誤りだった**。
   本リビジョンで本番を実測し直した結果（`.log-card__date` と `.log-card__tag` が同じ行に乗り、
   かつ両方が1行に収まっているかを 1024〜1600px で走査）：
     1024〜1308px … BROKEN（日付が「2025.05.18」の途中で折れる／タグ「クラフト」が2行に割れる）
     **1309px 以上 … OK**（1309px で `.log-card__meta` の clientWidth が 160px に達する）
   20px刻みの走査 → 1300〜1329px を1px刻みで二分探索して確定：
     1308px = BROKEN（meta 159px）／**1309px = OK（meta 160px）**
   必要幅の内訳（実測）：日付 65.4px ＋ gap 8px ＋ タグ「クラフト」86.0px ＝ **159.4px**
   （タグ「観察」側は 67.4+8+54.0＝129.4px で足りるが、3枚のうち最も広い「クラフト」で決まる）
   → 前任の 1219px を採用していたら **1220〜1308px が割れたまま**残っていた。数値は追認せず測り直した。
   対処：既存の「SPと同じ縦積みに戻す」帯の上限を 1023px → **1308px** に広げるだけ。
         新しいコンポーネント・色・フォントサイズ・余白トークンは作っていない。**1309px 以上は無改変**。
   PROD-20260922-014 旧: @media (min-width: 900px) and (max-width: 1023px) { … }（下記ブロックの条件のみ変更） */
@media (min-width: 900px) and (max-width: 1308px) {
  /* PROD-20260922-013 旧: この帯は @media(min-width:900px) L1367付近により
     .log-card { display:grid; grid-template-columns: 1fr 166px; column-gap:12px }
     ＋ .log-card__photo { width:166px; height:129px; aspect-ratio:auto; margin-bottom:0 }
     だった（写真が右列・テキストが左列）。 */
  .log-card { display: block; }
  /* 🔴 上の `.log-card{display:block}` は @media(min-width:900px) 内の
     `.log-card--sponly { display: none; }`（L1385付近）を同一詳細度・後勝ちで打ち消すため、
     この帯にSP専用の4枚目カードが出てしまう（AFTERスクショの目視で実際に発生し、ここで是正）。
     既存CSSに同じ事故の注意書きがあり、同じ対処を踏襲する。 */
  .log-card--sponly { display: none; }
  .log-card__photo {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 3.2/1;
    margin-bottom: 6px;
  }
  /* PROD-20260922-013 旧: .log-card__excerpt { margin-top: 8px }
     （grid の3行目として写真の下に回り込ませるための逃げ。縦積みでは不要） */
  .log-card__excerpt { margin-top: 0; }
}

@media (max-width: 374px) {
  /* PROD-20260922-014：ABOUT本文はSP375を基準に <br> の位置を決めている（.br--sp の3箇所）。
     374px以下では本文幅が 260px 以下になり、375px向けの改行位置のままだと
     「ここは、正解を教える場所ではな / く、」のように末尾2文字だけが孤立する行が出る
     （320pxで実測）。この帯だけ <br> を全て無効化して自然折り返しに委ね、行を最後まで使い切らせる。
     文字は変更していない（改行の扱いだけ）。段落間の空行（<br><br> の2つ目）だけは残す。
     ※ front-page.php 側で <br> の直後にホワイトスペースを置かない書き方にしてあるため、
       <br> を display:none にしても語間に半角空きは入らない。 */
  .about__body br { display: none; }
  /* 🔴 `br + br` は使えない。隣接兄弟セレクタはテキストノードを無視するため、
     「直前の要素兄弟が br」である**全ての br**（＝先頭以外すべて）にマッチしてしまい、
     320px実測で 11個中10個が display:block のまま残った（ブラウザ実測で発見・是正）。
     段落間の空行だけを残すため、front-page.php 側で .br--gap を明示的に付けている。 */
  /* 段落間の空行を作っている <br><br> の**2つとも**に .br--gap を付けてあるので、
     この帯ではその2つだけ通常の改行として生かす（＝空行が1行残る）。
     `display:block; height:…` は Chrome 実測で br に箱を作れず空行が消えたため採用していない。 */
  .about__body .br--gap { display: inline; }
  /* PROD-20260922-013 旧: .info__text は @media(min-width:900px) 側の
     white-space: nowrap を SP 帯でも継承したままだった。
     宣言内容は L2643（900〜1439px帯）と完全に同一。 */
  .info__text,
  .info__label { white-space: normal; overflow-wrap: anywhere; }
  /* 上で折り返しを許可した副作用として、料金行（.info__fee は justify-content:space-between の
     flex）の金額側まで「600 / 円」と2行に割れる（320pxのAFTERスクショ目視で発見）。
     金額だけ縮ませず1行に保ち、折り返しは項目名側に寄せる。
     サイズ・色・フォントは変更なし。 */
  .info__fee-price { white-space: nowrap; flex-shrink: 0; }
}

/* =====================================================================
   PROD-20260923-005（2026-09-23）— 3件まとめ
   作業1 CONTACT見出しの色／作業2 TOP見出し3箇所の配置／作業3 フッター改修
   ---------------------------------------------------------------------
   この帯を **ファイル末尾** に置いてあるのは、上流の各メディアクエリ
   （@media min-width:900px ／ 900-999 ／ 900-1319 ／ 900-1439 ／ max-width:899px）に
   同じセレクタの宣言が散在しており、同一詳細度では「後勝ち」でしか確実に上書きできないため。
   上流の既存宣言は 1 行も削除していない（履歴・実測コメントを壊さないため）。
   ===================================================================== */

/* ---------------------------------------------------------------------
   作業1：CONTACT の白見出し2要素を濃紺（既存変数 --ink）へ
   ---------------------------------------------------------------------
   経緯：PROD-20260923-002 で RYO 指定の #1A5FD0（当時の --ink-heading の値。
   現行の --ink-heading は PROD-20260923-008 で #0c44a2）を実render実測したところ
   CR 1.93〜2.43 で全ケース AA 未達（白 2.3〜2.5 より悪化）だった。
   代替案 A（既存変数 --ink）が実測 CR 4.73〜5.95 で全ケース AA PASS となり、
   RYO が「やって」と承認したもの。新しい色変数・新しい HEX リテラルは足していない。

   🔴 .kidsclub を巻き添えにしないため、セレクタは `.contact` 配下に限定している
      （詳細度 0,2,0 > 基底の `.section-title--onphoto` 0,1,0）。
      .kidsclub 側の --onphoto は上流 L861/L871/L2213 のまま無改変。

   🔴 正直な申告：--ink は :root で #0a1420、@media(max-width:899px) の :root 再定義で
      #00197d と **PC と SP で値が違う**（L35 / L1803 を実測確認）。
      RYO が承認した実測値 #00197d は SP 帯の値であり、PC（≥900px）では #0a1420
      （ほぼ黒）で出る。どちらも AA は満たす（#0a1420 のほうが暗いので CR は更に高い）が、
      「濃紺」という見えかたになるのは SP だけ。指示文が明示的に「既存変数 --ink を参照」と
      指定していたためそのまま実装したが、PC も #00197d に揃えたい場合は RYO 判断が要る。
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   🔴 PROD-20260923-006（作業1）— 上の申告に対する RYO 承認済みの是正
   旧: .contact .section-title- -onphoto,
       .contact .section-label- -onphoto { color: var(--ink); }

   var(--ink) は :root(L35)=#0a1420 ／ @media(max-width:899px) の :root 再定義(L1803)=#00197d
   という **二重定義**なので、PC（≥900px）では #0a1420＝ほぼ黒で出ていた。
   RYO が承認した色は **#00197d（濃紺）**なので、全幅で #00197d になるように直値で固定する。

   🔴 --ink 変数そのものは書き換えていない（サイト全体に波及するため）。
      直したのは `.contact` 配下のこの2セレクタだけ。
   🔴 新しい色は作っていない。#00197d は L1803 の SP 帯 --ink・L54 の旧 --ink-heading と
      同じ、この案件で既に使われている値。
   SP/TB（≤899px）は元から #00197d だったので **見た目の変化はPCのみ**。
--------------------------------------------------------------------- */
.contact .section-title--onphoto,
.contact .section-label--onphoto { color: #00197d; }

/* ---------------------------------------------------------------------
   作業2：TOP の見出し3箇所を「コンテンツの上 ＋ センター揃え」に
   （RYO指示「全て見出しをコンテンツの上に＋センター揃え」）
   対象：.activitylog__head / .creatures__head / .info__head
   🔴 .experience__head は RYO の指示対象外なので **触っていない**
      （STATUS.md の恒久注意どおり top と .experience の padding がセット依存のため、
        巻き添えを避ける意味でも対象外を厳守）。
--------------------------------------------------------------------- */
.activitylog__head,
.creatures__head,
.info__head { text-align: center; }

@media (min-width: 900px) {
  /* 活動記録：横並び（head 190px 固定列 ＋ list）→ 縦積み。
     flex-direction を column にすると `align-items: flex-start`（基底 L942）は
     「横方向の縮み」に意味が変わり子が内容幅まで痩せるため stretch に戻す。
     gap は縦方向の余白になる。 */
  .activitylog__inner { flex-direction: column; align-items: stretch; gap: 24px; }
  .activitylog__head { flex: 0 0 auto; width: 100%; margin: 0; }

  /* いきものたち：同上。`flex: 0 0 235px` / `flex: 1` は column では **高さ** の
     指定になってしまうので必ず auto に戻す。 */
  .creatures__inner { flex-direction: column; align-items: stretch; gap: 24px; }
  .creatures__head { flex: 0 0 auto; width: 100%; margin: 0; }
  .creatures__grid { flex: 0 0 auto; width: 100%; }

  /* ご利用案内：1440px 以上でだけ横並びが残っていた（900〜1439px は
     PROD-20260922-002/010 で既に縦積み化済み）。全幅で縦積みに統一する。 */
  .info__inner { flex-direction: column; align-items: stretch; gap: 24px; }
  .info__head { flex: 0 0 auto; width: 100%; margin: 0; }
  .info__panel { width: 100%; }
}

@media (max-width: 899px) {
  /* いきものたち（SP/タブレット）：見出しは `position:absolute; top:0` で
     大判写真の上に白文字で重なっていた（＝RYO の言う「コンテンツの上」ではなく
     「コンテンツに重なっている」状態）。通常フローに戻して写真の上に積む。

     🔴 STATUS.md の恒久注意（`.experience__head` の top と padding はセットで動かす）と
        同種の依存がここにもある：`.creatures { padding: 0 0 … }` の **上 0** は
        「見出しが absolute だから」であって余白が不要だからではない（L2405 のコメント）。
        static に戻す以上、上の余白を .creatures 自身に戻さないと見出しが
        直前セクションに貼り付く。SP の文字セクション同士の標準境界は
        --space-section ×2 ＝ 144px（L1813 のコメントに明記）なので、
        直前 .activitylog の padding-bottom（--space-section）と対になる
        --space-section を padding-top として与える。新しい数値は作っていない。 */
  .creatures { padding-top: var(--space-section); }
  .creatures__head {
    position: static;
    top: auto; left: auto; right: auto;
    z-index: auto;
    margin: 0 0 14px;               /* 基底 L998 と同値 */
    padding: 0 var(--sp-gutter);
  }
  /* 🔴 写真から降りた結果、背景が写真（実測 #052656 前後の濃紺）から
     .creatures の地（--white）に変わる。白文字のままだと白地に白＝CR 1.0 で
     消えるため、上流 L2416 の「写真の上だから白」という前提つきの override を解除し、
     基底 .section-label / .section-title と同じ --ink-heading に戻す。
     ＝新しい色を選んだのではなく、**サイト共通の見出し色に戻している**。
     実測値は AGENT_LOG.md の PROD-20260923-005 を参照。 */
  .creatures__head .section-label,
  .creatures__head .section-title { color: var(--ink-heading); }
}

/* ---------------------------------------------------------------------
   作業3-b：フッターのレイアウト再設計
   RYO発言：「フッター横長すぎる」「SNSリンクは上に」「ロゴとフッターナビ近すぎるから
             話して」「横をうまく使って」

   【変更前の実測（PC1440・本番）】
     .footer__inner   x=60  w=1320
     .footer__brand   x=60  w=258
     .footer__nav     x=346 w=732   ← ロゴ列との間は column-gap 28px しかない
       col1 x=346 w=208 / col2 x=602 w=144 / col3 x=794 w=96
       → ナビの中身は 346〜890px で終わり、732px の列のうち **右 188px が空き**
     .footer__sns     x=1106 w=274
   grid-template-columns: auto 1fr auto ＋ .footer__nav の
   `grid-template-columns: repeat(3, max-content); justify-content: flex-start`
   のため、余った横幅を 1fr の列2が全部吸うのに中身は左寄せ。
   結果「ロゴにナビが貼り付き、余白はナビ右〜SNS間に溜まる」＝RYO の指摘どおりの症状。

   【対処】
   ① SNS を独立した1行目に送る（grid-column: 1 / -1; grid-row: 1）＝「SNSリンクは上に」
   ② 2列grid（ロゴ・住所TEL列 ／ ナビ列）にし、列間を clamp(48px, 6vw, 96px) まで広げる
      ＝「ロゴとフッターナビ近すぎるから話して」
   ③ ナビの3列を max-content → minmax(0,1fr) に変え、ナビ列の幅を3等分して使い切る
      ＝「横をうまく使って」（余白が右端1箇所に溜まらない）
   ④ © は .footer__contact-info と行を共有させない。PROD-20260909-001 の経緯どおり
      独立行に置く（今回は行が1つ増えたので grid-row: 3 → 4）。

   🔴 clamp(48px, 6vw, 96px) は制作部署が決めた値（RYO・秘書の指定ではない＝正直な申告）。
      根拠：1440px で 86.4px（変更前 28px の約3倍）、900px で 54px。
      固定 96px にすると 900px 帯でナビ列が 900−40−(住所列)−96 まで痩せて
      「くにみクラゲ公民館について」(13字×16px=208px) が折り返すため、下限側を絞っている。
--------------------------------------------------------------------- */
@media (min-width: 900px) {
  .footer__inner {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 96px);
    row-gap: 0;
  }
  /* 🔴 PROD-20260923-006（作業2）旧:
       .footer__sns          { grid-column: 1 / -1; grid-row: 1; justify-content: flex-end; padding: 0 0 24px; }
       .footer__brand        { grid-column: 1; grid-row: 2; }
       .footer__contact-info { grid-column: 1; grid-row: 3; }
       .footer__nav          { grid-row: 2 / span 2; }
       .footer__bottom       { grid-row: 4; }
     SNS が .footer__bottom の子（footer.php 参照）に移り grid アイテムでは
     なくなったので、1行目が丸ごと不要になった。空の 1 行目を残すと
     「SNS を上から外したのに上に隙間が残る」形になるため、**全行を1つ繰り上げる**。
     row-gap は 0 なので行が消えても他の余白計算には影響しない。 */
  .footer__brand        { grid-column: 1; grid-row: 1; }
  .footer__contact-info { grid-column: 1; grid-row: 2; }
  .footer__nav {
    grid-column: 2;
    grid-row: 1 / span 2;
    /* 🔴 PROD-20260923-006（作業3）旧: grid-template-columns: repeat(3, minmax(0, 1fr));
       3等分だと viewport 900px でナビ列 548px ÷3 ＝ 161px しか取れず、
       「くにみクラゲ公民館について」（13字×16px ＝ 208px）が2行に折り返していた。

       minmax(max-content, 1fr) は「各列の下限を内容幅にし、余りだけを fr で等分する」。
       CSS Grid の fr 解決は、仮の fr サイズ（＝余白÷列数）が base(max-content) を
       下回る列を inflexible として除外し、残りを再分配する仕様なので：
         ・狭い帯（900〜約1040px）… 1列目が 208px を確保し、余りを2・3列目が分け合う
         ・広い帯（約1050px〜）… 1fr が全列の max-content を上回るので **完全な3等分**
       つまり **PROD-20260923-005 で RYO に見せた広い帯の見た目は1pxも変わらない**
       （実測：1050/1100/1200/1280/1440/1600 で列幅が変更前と完全同値）。
       文言・リンク先・font-size・gap は一切変えていない。
       実測（本番・max-content）：208 / 144 / 96 ＝ 448px ＋ gap32×2 ＝ 512px。
       900px のナビ列 548px に対し 36px の余裕があり、この帯の全域で1行に収まる。 */
    grid-template-columns: repeat(3, minmax(max-content, 1fr));
    column-gap: 32px;
    justify-content: stretch;
  }
  .footer__bottom { grid-column: 1 / -1; grid-row: 3; }
}

/* PROD-20260922-012 が「900〜999px で SNS 6個が横幅を奪ってフッターがはみ出す」ために
   入れた行送り（L2952 `.footer__sns { grid-row: 3 }` ＋ `.footer__bottom { grid-row: 4 }`）は、
   SNS が grid アイテムでなくなった今 **完全に不要**。ただし `.footer__bottom { grid-row: 4 }`
   だけは残ると この帯だけ © が空の4行目に落ちるので、同じ帯で打ち消す。
   （上流の宣言は履歴として残し、ここで上書きする方針）
   🔴 PROD-20260923-006 旧: .footer__sns { grid-column: 1 / -1; grid-row: 1; … } / .footer__bottom { grid-row: 4 } */
@media (min-width: 900px) and (max-width: 999px) {
  .footer__bottom { grid-row: 3; }
}

/* ---------------------------------------------------------------------
   作業2の副作用の是正（制作部署が発見・是正／AFTERスクショの目視で気づいた）
   `.info__inner` だけ `max-width: 1400px`（L1644）で、他セクションは --wrap: 1320px。
   横並びだった頃は .info__panel の実幅が 1039px だったため差が目立たなかったが、
   縦積み＋全幅にした結果、白いパネルだけが左右に 40px ずつ（1400 vs 1320）はみ出して
   活動記録のカード列（x=60〜1380）と縦のラインが揃わなくなった（PC1440 実測）。
   1400px は PROD-20260922-010 で「横並びのパネルに幅を稼ぐ」ために入れた値であり、
   縦積みになった今はその理由が消えている（縦積み時のパネル必要幅は実測 994px で
   --wrap 1320px に十分収まる）。他セクションと同じ --wrap に揃える。
   🔴 これは RYO・秘書の指示にない **制作部署の判断**（正直な申告）。
--------------------------------------------------------------------- */
@media (min-width: 900px) {
  .info__inner { max-width: var(--wrap); }
}

/* ---------------------------------------------------------------------
   PROD-20260923-006（作業2）— SNS が .footer__bottom の中に入ったことの整え
   RYO発言「あとSNSやっぱ下 / コピーライトと同じ高さにしようかな」
   ---------------------------------------------------------------------
   .footer__bottom は元から display:flex / justify-content:space-between /
   align-items:center。SNS を子にしただけで **© 左・SNS 右・同じ高さ** になる。
   打ち消しが要るのは、SNS が「独立ブロックだった頃の縦余白」と、
   上流 L1732（PC）の `align-self: start` だけ。
   アイコンのサイズ(34px)・gap(14px)・色・枠・ホバーは一切触っていない。
--------------------------------------------------------------------- */
.footer__bottom .footer__sns {
  padding: 0;            /* 旧: 基底 L1152 の padding:14px 0 ／ SP L2521 の 12px 0 */
  align-self: center;    /* 旧: PC L1732 の align-self:start（© と高さを揃えるため中央に） */
  flex-shrink: 0;        /* © 側の折り返しを先に起こし、アイコンは潰さない */
}

/* SP/TB（≤899px）：© と6アイコンを横に並べると 375px では入らない
   （© 実測 約196px ＋ SNS 274px ＋ gap = 本文幅 315px を超える）。
   RYO許可どおり縦積みにする。column-reverse なのは、変更前の並び順
   （ナビ → SNS → ©）を**見た目のうえで維持する**ため。 */
@media (max-width: 899px) {
  .footer__bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;           /* 基底 L1163 の gap:16px をSPだけ詰める */
  }
  /* column 方向では align-self が**横**の意味になるため、上の align-self:center が
     効いて SNS だけ中央寄せになっていた（実測 SP375 で x=51／© は x=30）。
     変更前の SP は左端 x=30 だったので、左揃えに戻す。 */
  .footer__bottom .footer__sns { align-self: flex-start; }
}

/* =====================================================================
   PROD-20260923-010 — 活動記録を「一般的な投稿一覧」に作り替える
   RYO指示原文：「活動記録／デザイン参考無視して／一般的な投稿一覧のデザインに変更／
                  写真は白枠つけて写真っぽくしようかな」＋対象は「TOP／一覧もした方が良いと判断したらして」
   対象：TOP の .activitylog セクション（front-page.php）と /log/（page-log.php）

   🔴 このブロックは style.css の**末尾に追記した上書き層**。
      既存の .log-card / .subpage-card のルール本体は履歴として残してあり、
      ここで必要な宣言だけを後勝ちで打ち消している（この案件の既存のやり方に合わせた）。
   🔴 新しい色は作っていない。見出し色は --ink-heading (#0c44a2)、
      写真の地は --sky-02、枠は --white。
   🔴 --space-section 系の変数定義は書き換えていない（フッター・パネルへの波及を避けるため）。
      カード間の gap だけは「セクション余白」ではなくコンポーネント内の間隔なので
      トークン化せず個別値（28px / 24px / 32px）を使っている。
   --------------------------------------------------------------------- */

/* ---- 写真の白枠（ABOUT の支給写真 about.jpg と同じ見え方に揃える） ----
   実測根拠：本番 https://kunimi-kurage.com/ を 1440px でレンダリングし、
   ABOUT の写真（.about__img--main、表示幅 820px）のコラージュ1枚の縁をピクセル走査した。
     ・上辺 x=150：y429-435 が純白 (255,255,255) ＝ **白枠 7px**
     ・下辺 x=120：y654-660 が純白 ＝ **白枠 7px**（上下で一致）
     ・その外側 y661-669 に (238,238,238)→(255,255,255) の落ち影 ＝
       **にじみ約9px・最も濃い所で黒 約6.7%**、方向は下向き
   → CSS では border 7px solid #fff ／ box-shadow 0 3px 10px rgba(0,0,0,.10)
     （ABOUT の影は支給JPGに焼き込まれているため CSS と厳密な同値にはできない。
       実測した「下方向・にじみ9px前後・黒7%弱」に最も近い形で置いた＝**近似である**）
   → 角丸は既存 .log-card__photo の border-radius:2px をそのまま使う（新しい値を作らない）。 */
.log-card__photo,
.subpage-card--log .subpage-card__photo {
  border: 7px solid var(--white);
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
  background-color: var(--sky-02);
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
}

/* =========================== TOP：活動記録 =========================== */

/* 旧SPカルーセル（grid-auto-flow:column / overflow-x:auto / scroll-snap / 負margin）と
   旧PCの点線タイムラインを解除し、全幅で素直なグリッドに戻す。 */
.activitylog__list {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: 1fr;
  gap: 28px;
  overflow: visible;
  scroll-snap-type: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
.activitylog__list::before { display: none; }   /* PCの点線タイムラインを撤去 */

@media (min-width: 600px) {
  .activitylog__list { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
}
@media (min-width: 900px) {
  .activitylog__list { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

/* 旧SPの「こげ茶の枠線の紙カード」と旧PCのカード内2カラムgridを解除。
   カードは枠なしで、写真そのものが主役（＝白枠で写真らしく見せる）構成にする。 */
.log-card {
  display: block;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  scroll-snap-align: none;
}
.log-card__photo {
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;        /* 旧: PC 166×129px固定 / SP 167/77 の細長 */
  margin: 0 0 16px;
}
/* 旧PCのタイムライン丸マーカー（.log-card__meta::before）と
   旧基底の日付前の丸（.log-card__date::before）を撤去 */
.log-card__meta {
  position: static;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.log-card__meta::before { display: none; }
.log-card__date::before { display: none; }
.log-card__title {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 6px;
  /* 🔴 旧実装は PC=var(--navy) / SP=var(--ink) で、--ink は @media(max-width:899px) で
     #00197d に再定義されるため**幅で色が変わっていた**。
     /log/ のカード見出しと揃え、幅で変わらない1色に固定する。 */
  color: var(--ink-heading);
}
.log-card__excerpt {
  display: block;             /* 旧SPは display:none で本文を消していた */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-light);
}
/* SPでも本文とボタンを出す（旧SPはカルーセル前提で lead と「一覧を見る」を隠していた）。
   投稿一覧としては一覧への導線がSPに無いのは不自然なため戻す。 */
@media (max-width: 899px) {
  .activitylog__head .activitylog__lead { display: block; }
  .activitylog__head .btn { display: inline-flex; }
  .activitylog__inner { gap: 24px; }
}
/* カルーセルのドットは front-page.php から要素ごと撤去済み（JS側は
   `if (logList && logDots)` のガードで自動的に no-op になるため js/main.js は無変更）。
   念のためCSSでも残す。 */
.activitylog__dots { display: none !important; }

/* ====================== /log/：活動記録 一覧ページ ======================
   🔴 .subpage-card / .subpage-cards は page-experience.php・index.php でも使用中
      （grep -rn "subpage-card" --include="*.php" で確認：page-experience.php / page-log.php /
        index.php の3ファイル）。
      巻き添えを防ぐため、ここは **必ず --log モディファイア配下にだけ**書く。
      /experience/ のカードは 1px枠＋角丸8px＋padding20px のまま一切変わらない。 */
.subpage-cards--log {
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 600px) {
  .subpage-cards--log { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (min-width: 900px) {
  .subpage-cards--log { grid-template-columns: repeat(3, 1fr); gap: 36px 32px; }
}
/* TOPのカードと同じ「枠なし・写真が主役」の見え方に揃える */
.subpage-card--log {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.subpage-card--log .subpage-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 16px;
  overflow: hidden;
}
.subpage-card--log .subpage-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* アイキャッチ未設定時のフォールバック：
   画像領域は消さず、同じ白枠の中を --sky-02 のベタ塗りで埋める。
   （領域を消すとカードごとに高さが変わりグリッドの行が揃わなくなるため） */
.subpage-card--log .subpage-card__photo-empty {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--sky-02);
}
.subpage-card--log .subpage-card__label {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--navy-soft);
}
/* 🔴 .subpage-card__title の既知の問題への対応（/log/ のみ）：
     旧 … h2 なのに font-size:18px・margin-bottom:8px、色は var(--ink) のため
          SP #00197d / PC rgb(10,20,32) と**幅で変わっていた**。
     新 … サイズは **20px 固定**。サイトの h2 は PC32/SP24px だが、それは
          セクション見出しのサイズであり、3カラムに並ぶ一覧カードの見出しに 32px は
          明らかに大きすぎる。本文 16px より一段だけ大きい 20px にして
          「本文より上位・セクション見出しより下位」の階層を作る。
          🔴 20px は制作部署が決めた値（RYO・秘書の指定ではない）。差し戻しの可能性あり。
     色 … var(--ink-heading) = #0c44a2 に固定。**幅で変わらない**。
          新しい色は作らず、サイト共通の見出し色をそのまま使っている。
     下余白 … 8px → 10px（20px の見出しに対する最小限の調整）。 */
.subpage-card--log .subpage-card__title {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-heading);
  margin: 0 0 10px;
}
.subpage-card--log .subpage-card__title a {
  color: inherit;
  text-decoration: none;
}
.subpage-card--log .subpage-card__title a:hover { text-decoration: underline; }
.subpage-card--log .subpage-card__text {
  color: var(--text-light);
  margin-bottom: 0;
}

/* =====================================================================
   PROD-20260923-011：いきもの写真のライトボックス（自前実装・プラグイン不使用）
   ---------------------------------------------------------------------
   RYO指示「クリックしたら拡大＋ポップアップ」。
   マークアップは js/main.js が初回オープン時に生成する（PHPには置いていない）。
   背面ロックは .is-lightbox-open（L444 の宣言を共有）。
   🔴 色は既存トークンのみ（--white / --ink-heading）。新しい色変数は作っていない。
      暗幕の rgba(4,22,45,.86) は制作部署が決めた値＝正直な申告。
   ===================================================================== */
.kk-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 22, 45, .86);
}
.kk-lightbox[hidden] { display: none; }
.kk-lightbox__dialog {
  position: relative;
  /* 🔴 width を明示しないと dialog が中身（img）の実寸に縮み、その結果
     img の `width: min(100%, 860px)` の 100% が img 自身の実寸を指す循環になって
     拡大されない（実測で発覚：1440px で 327×144 のまま＝カードより小さい）。 */
  width: min(1000px, 100%);
  max-width: min(1000px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  outline: none;
}
.kk-lightbox__img {
  display: block;
  /* 🔴 仮素材の実寸が 116×56〜313×130px しかないため、等倍表示（max-width:100% のみ）だと
     PC1440 では **カード上の表示より小さくなり「拡大」にならない**（実測：大判カードは
     525×299 なのにライトボックスは 327×144）。RYO指示は「クリックしたら拡大」なので
     利用できる幅まで引き伸ばす。本番写真に差し替われば等倍付近に収まり、この指定のままで
     破綻しない。**現状の仮素材ではボケる**（PROD-20260923-011 の報告に明記）。
     860px は制作部署が決めた値＝正直な申告。 */
  width: min(100%, 860px);
  max-width: 100%;
  max-height: calc(100vh - 160px);
  height: auto;
  object-fit: contain;
  /* PROD-20260923-010 で実測した白枠と同じ値に揃える（バラバラの白枠を作らない） */
  border: 7px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
  border-radius: 2px;
  background: var(--navy-deep);
}
.kk-lightbox__caption {
  color: var(--white);
  text-align: center;
  font-size: var(--fs-body);
  line-height: 1.5;
  margin: 0;
}
.kk-lightbox__caption em { font-style: italic; opacity: .85; display: block; }
.kk-lightbox__close {
  position: absolute;
  top: -8px;
  right: -8px;
  transform: translate(50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--white);
  color: var(--ink-heading);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
}
.kk-lightbox__close:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }

@media (max-width: 899px) {
  .kk-lightbox { padding: 16px; }
  .kk-lightbox__img { max-height: calc(100vh - 180px); }
  .kk-lightbox__close { top: 0; right: 0; transform: translate(40%, -40%); }
}

/* =====================================================================
   PROD-20260923-012（2026-09-23 制作部署Agent）
   ===================================================================== */

/* ---------------------------------------------------------------------
   作業1：TOPのボタンを全部「青背景」に
   RYO指示原文：「ボタンボーダーじゃなくて」「青背景のボタンに」「青薄すぎ」
                 ＋範囲について「ボタン変更はTOP全部に適用」

   旧（基底・PROD前から）：
     .btn        { background: var(--sky-01)#eaf4fb; color: var(--navy)#1c4a73; border: 1px solid var(--navy); }
     .btn--outline { background: transparent; }
     .btn--white   { background: var(--white); color: var(--navy); }
     .btn--dark    { background: var(--navy); color: var(--white); border-color: var(--navy); }
   → --sky-01 は #eaf4fb でほぼ白。これが RYO の言う「青薄すぎ」。

   【色】新しい色変数は作らず、PROD-20260923-008 で見出しに採用した --ink-heading(#0c44a2) を参照する。
   【スコープ】🔴 基底 `.btn` を直接書き換えると下層ページ（/about/ /experience/ /kidsclub/ /log/
     /creatures/ /contact/ /404 /single）のボタンが全部巻き添えになる。よって
     `body.home` 配下に限定する（WPが front page にだけ付ける body class。下層ページには付かない
     ことを本番実測で確認済み：TOP=「home blog wp-theme-…」／/about/=「wp-singular page … 」）。
     詳細度は (0,2,1) で .btn--white / .btn--dark / .btn--outline (0,1,0) を上回るため !important 不要。
   【border】1px solid --navy(#1c4a73) は #0c44a2 の上では色違いの縁として残ってしまい、
     RYO の「ボタンボーダーじゃなくて」に反する。ただし border-width を 0 にすると
     ボックスが上下左右2px縮み、カンプ実測から決めた `.kidsclub .btn--white { width:115px; height:33px }`
     等のサイズが崩れる。→ **幅は1pxのまま残し border-color だけ背景と同色にして視覚的に消す**
     （レイアウトは1pxも動かない）。
   --------------------------------------------------------------------- */
body.home .btn {
  background: var(--ink-heading);
  color: var(--white);
  border-color: var(--ink-heading);
}

/* 🔴 例外：SP（〜899px）の EXPERIENCE 2枚のボタンは、カンプ実測にもとづき
   「枠付きボタンではなくプレーンなテキストリンク＋長い矢印」として意図的に
   background:none / border:0 / padding:0 で実装されている（style.css L2405 付近）。
   ここは「薄い青の枠ボタン」ではないので RYO の指摘対象ではないと判断し、
   現状維持（＝下に倒す）。PCでは同じボタンが青背景になるが、これは変更前から
   SP=テキストリンク／PC=ボタン だった差をそのまま引き継いだもの。
   青背景に揃えたい場合はこのブロックを消すだけでよい。 */
@media (max-width: 899px) {
  body.home .exp-card__memo .btn {
    background: none;
    color: var(--ink);
  }
}

/* ---------------------------------------------------------------------
   作業2：PCでヘッダーがスクロールに追従しない問題の修正
   RYO指示原文：「ヘッダースクロールしてついてこない」「修正」

   旧：.header { position: absolute; background: transparent; }（L303付近）
       SP帯（〜899px）だけ PROD-20260922-014 で fixed ＋ 白背景になっていた。
       L299付近のコメント「stickyは今回のRYO指摘で犠牲にした。…必要なら次回相談」が
       まさにこの未実装の記録。今回その相談が来たので実装する。

   ・absolute → fixed。**どちらも通常フローの外**なので直下コンテンツは1pxも動かない
     （本番実測 BEFORE/AFTER の .hero / .hero__content / .hero__headline の y が同値であることを確認）。
   ・背景：透明のまま追従させる案も実render（TRY/tryC_transparent_1440_scroll1700.png）で
     比較したが、ナビの紺文字がキッズクラブ写真の上を流れて読めなくなるため**不採用**。
     スクロール後だけ白背景を出す（js/main.js が .is-scrolled を付与）。FV最上部では
     従来どおり透明のままなので、写真がページ最上端から始まるFVデザインは変わらない。
   ・ロゴ：PC 84px・ヘッダー総高 120px のまま固定すると画面を占有しすぎるため、
     スクロール後だけ 64px・総高 88px に縮める（制作部署の判断。RYO・秘書の指示ではない）。
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
  /* PROD-20260923-012 旧: .header は基底の position:absolute のままだった */
  .header {
    position: fixed;
    transition: background-color .2s ease, box-shadow .2s ease;
  }
  .header__inner { transition: padding .2s ease; }
  .header__logo-img { transition: height .2s ease; }

  .header.is-scrolled {
    background: var(--white);
    box-shadow: 0 2px 10px rgba(28, 74, 115, .10);
  }
  /* 18+84+18 = 120px → 12+64+12 = 88px */
  .header.is-scrolled .header__inner { padding-top: 12px; padding-bottom: 12px; }
  .header.is-scrolled .header__logo-img { height: 64px; }
}

/* 固定ヘッダーぶんアンカー位置を下げる（見出しがヘッダーの下に隠れるのを防ぐ）。
   🔴 SPは PROD-20260922-014 で既に fixed だったため、#access へのジャンプは
   **今回の変更前から** 84px ぶん隠れていた（既存バグ。本番で scroll-margin-top:0px を実測）。ここで併せて解消する。
   値＝ヘッダー総高 ＋ 12px の余白。SP 84+12=96px ／ PC 120+12=132px。 */
#about, #experience, #log, #creatures, #information, #contact, #access {
  scroll-margin-top: 96px;
}
@media (min-width: 900px) {
  #about, #experience, #log, #creatures, #information, #contact, #access {
    scroll-margin-top: 132px;
  }
}

/* ==========================================================================
   PROD-20260923-013（RYO決定「C＋D」）— TOP「いきものたち」
   C = 名前を写真の外（下）に出す（5枚とも統一。大判だけ上／小カードだけ横 という
       出し分けはしない）
   D = 仮素材 temp_creatures_*.png → RYO支給の実写真に差し替えたうえで再測定
   ＋ RYO追加指示：写真にも暗幕（オーバーレイ）を5枚ともかける

   🔴 スコープ：新規宣言はすべて `.creatures` 子孫に限定（= TOP の <section class="creatures">）。
      `.creature-card` / `.creature-zoom` 単独セレクタに書くと `/creatures/`
      （page-creatures.php・.subpage-creatures 配下）が巻き添えになる。PROD-011 と同じ罠。
   🔴 高さ揃え（PROD-20260923-011 作業3）は壊していない：
      大判は「写真(aspect 1.756/1)＋名前ブロック」の積み上げ高さになり、
      `.creatures__sub` は grid のストレッチで同じ高さを受け取り、
      各カードは `height:100%` のまま（写真が flex:1 で残りを埋める）。
   🔴 ライトボックス（PROD-011 作業4）も壊していない：起動元は `.creature-zoom` のままで、
      暗幕は ::after（pointer-events:none）なのでクリックはボタンに届く。

   PROD-20260923-013 旧（写真の上に白文字で重ねていた形・切り戻し用）：
     .creature-feature__info, .creatures .creature-card__info {
       position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 2; pointer-events: none; }
     .creature-feature__name, .creature-feature__latin,
     .creatures .creature-card__name, .creatures .creature-card__latin { color: var(--white); }
     .creature-feature { aspect-ratio: 4/3; }                      （@media min-900 では 1.756/1）
     .creatures .creature-card { aspect-ratio: 4/3; }              （@media max-899 では 1.046/1）
     .creature-feature__photo, .creatures .creature-card__photo { position: absolute; inset: 0; }
     ※ 暗幕（::after）は PROD-013 での新規追加。旧は写真に一切かぶせ物が無かった
   ========================================================================== */
.creatures .creature-feature,
.creatures .creature-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  aspect-ratio: auto;
  background: transparent;
  overflow: visible;
}
.creatures .creature-feature__photo,
.creatures .creature-card__photo {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background-color: var(--navy-deep);
}
/* 暗幕（オーバーレイ）。5枚とも同じ濃度。
   🔴 濃度 .34 は「差し替え後の本番実renderの全画素実測」から決めた値。根拠は STATUS.md
      §PROD-20260923-013。pointer-events:none なのでライトボックスの起動を邪魔しない。 */
.creatures .creature-zoom { position: relative; }
.creatures .creature-zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 22, 45, .34);
  pointer-events: none;
}
.creatures .creature-feature__info,
.creatures .creature-card__info {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  pointer-events: auto;
  flex: 0 0 auto;
  min-width: 0;
  padding: 8px 0 0;
}
.creatures .creature-feature__name,
.creatures .creature-card__name { color: var(--ink-heading); font-weight: 700; }
/* 🔴 学名の色は --text-light(#6b7b86) をそのまま使うと白地で CR 4.37 しかなく AA(4.5) 未達だった
   （本番実render・1440px の実測値）。--text-light はサイト全体で共有しているトークンなので
   トークン自体は触らず、このセクションの学名だけ #63737c（実測 CR 4.91）に下げる。
   PROD-20260923-013 旧: color: var(--text-light);（CR 4.37 / FAIL） */
.creatures .creature-feature__latin,
.creatures .creature-card__latin { color: #63737c; font-style: italic; display: block; }

@media (max-width: 899px) {
  /* SPは大判が画面幅いっぱい（.creatures__grid にガターが無い）ので、
     写真の外に出した名前だけガター分の内側余白を持たせる */
  .creatures .creature-feature__photo { aspect-ratio: 2.4/1; }
  .creatures .creature-feature__info { padding: 8px var(--sp-gutter) 0; }
  .creatures .creature-card__photo { aspect-ratio: 1.046/1; }
  .creatures .creature-card__info { padding: 5px 0 0; }
  /* SPで学名を出さないのは PROD-011 からの継続（大判が元から display:none だった） */
  .creatures .creature-feature__latin,
  .creatures .creature-card__latin { display: none; }
}

@media (min-width: 900px) {
  .creatures .creature-feature__photo { aspect-ratio: 1.756/1; }
  /* カードは行(1fr)の高さいっぱい。名前ブロックは内容高、写真が残りを埋める */
  .creatures .creature-card { height: 100%; }
  .creatures .creature-card__photo { aspect-ratio: auto; flex: 1 1 auto; }
}

/* ==========================================================================
   PROD-20260923-013b（RYO追加指示・2026-09-23）
   ② 大判（1枚目）の写真の縦幅を上げる ＝ 支給写真と同じ 4:3 にする
   ③ 1440px で小カードの写真が 392×116.2（3.37:1）の帯状に切れる件を是正する

   🔴 なぜ列幅（grid-template-columns）まで変えたか＝実測にもとづく算数の申告：
      高さ揃え（大判article = .creatures__sub）を維持する限り、各値は次式で連動する。
        大判写真高 = F × 3/4                （F = 大判の列幅 / 写真を4:3にした場合）
        大判article高 = F×3/4 + I           （I = 名前ブロック高 ≒ 49.6px）
        小カード高 = (大判article高 − 17) / 2   （17 = row-gap）
        小カード写真高 = 小カード高 − I = 0.375F − I/2 − 8.5
        小カード幅 C = (S − 4) / 2            （S = 小カード列の幅・4 = column-gap）
      旧の F=525px 固定では 1440px で C=392 / 写真高=116.2 → 3.37:1 にしかならず、
      写真を4:3にしても 2.40:1 までしか改善しない（実測・下記）。
      C / 写真高 = 4/3 を解くと F の最適比は
        r = (W + 84.8) / (2W)   （W = グリッド幅 − column-gap）
      → W=1306(1440px時) で r=0.533 / W=853(900px時) で r=0.550。
      幅によらずほぼ一定なので **0.54fr : 0.46fr** を採用した。
      🔴 この 0.54/0.46 は制作部署が決めた値＝正直な申告。
         カンプ実測由来の「大判525px固定」（PROD-20260905-016/018 のコメント参照）からは離れる。
   PROD-20260923-013b 旧:
     .creatures__grid { flex: 1; grid-template-columns: minmax(0, 525px) minmax(230px, 1fr); }
     .creatures .creature-feature__photo { aspect-ratio: 1.756/1; }  （@media min-900）
     .creatures .creature-feature__photo { aspect-ratio: 2.4/1; }    （@media max-899）
   ========================================================================== */
@media (max-width: 899px) {
  .creatures .creature-feature__photo { aspect-ratio: 4/3; }
}
@media (min-width: 900px) {
  .creatures__grid { grid-template-columns: minmax(0, 0.54fr) minmax(230px, 0.46fr); }
  .creatures .creature-feature__photo { aspect-ratio: 4/3; }
}

/* ==========================================================================
   PROD-20260923-014 — PCでEXPERIENCEの詳細ページに遷移できない問題の解消

   【実測で特定した原因（行番号付き）】
   ・`front-page.php` L291/L301 の `<article class="exp-card">` の中に本物のリンク
     `<a href="/experience/craft/" class="btn btn--small">` `<a href="/experience/observation/" …>` がある。
   ・`style.css` **L1457 `.exp-card { display: none; }`**（`@media (min-width:900px)` 内）が
     このカードごと消していた。同メディア内 L1488 の `.exp-card { position:absolute; … }` は
     `display` を書いていないため none のまま残る。
     → 実render実測：PC 1440 / 900 で `.exp-card` の矩形は **0×0**、
       `.exp-card a` の矩形も **0×0**（＝クリック不能）。SP 375/768 では 92.9×21.6 で**生きている**。
   ・PCで見えていた「詳しく見る →」は `images/temp_exp_band.png`（862×194 を 1440×324 に
     1.67倍拡大）に**焼き込まれた絵**だった。
   ・加えてこの帯は `background-size:1440px 324px; background-position:left top` の固定指定で
     スケールしないため、**900〜1439px では右の OBSERVATION カードが画面外に切れていた**（実render実測）。

   【対応】焼き込み画像に頼らず、本物のリンクを出す。
   1. 帯を支給素材の実写真2枚（`exp_craft.jpg` / `exp_obs.jpg`）に差し替え、焼き込みの
      カード文字を排除（`front-page.php` のインライン style を変更）
   2. `.exp-card` をPCでも表示（＝本物の `<a href>` が出る）
   3. 斜めの継ぎ目という現行の意匠は clip-path で踏襲。**コピー・装飾は1つも足していない**
      （カードの文言・リンク先・`.btn--small` は元のマークアップのまま）
   🔴 焼き込み画像に入っていた doodle（貝殻・波線・Look! の手書き・丸インセット写真）は
      画像ごと差し替えたため**なくなる**。文字だけを分離することはできないため＝正直な申告。
   PROD-20260923-014 旧:
     .exp-photo { display: flex; }（@media min-900 L1467）
     .exp-photo--craft { clip-path: none; }（L1481）
     .exp-photo--obs { display: none; }（L1484）
     .exp-card { display: none; }（L1457）
   ========================================================================== */
@media (min-width: 900px) {
  /* 帯を斜めの継ぎ目で2分割。継ぎ目の水平変位 ±63px は、帯の高さ324pxに対して
     旧実装のコメントが残していたカンプ実測の傾き 21.2°（324×tan21.2°≒126px）を
     中央から左右に振り分けた値。🔴 63px は制作部署が決めた値＝正直な申告。 */
  .exp-photo {
    display: block;
    background-repeat: no-repeat;
  }
  .exp-photo--craft {
    left: 0;
    width: calc(50% + 63px);
    clip-path: polygon(0 0, 100% 0, calc(100% - 126px) 100%, 0 100%);
  }
  .exp-photo--obs {
    display: block;
    left: calc(50% - 63px);
    width: calc(50% + 63px);
    clip-path: polygon(126px 0, 100% 0, 100% 100%, 0 100%);
  }
  /* 🔴 ここが本題：PCでも本物のカード（＝本物の <a href>）を出す */
  .exp-card { display: block; }
}

/* PROD-20260923-014（続き）— 見出しをバナーの外（上）に出す
   🔴 実render目視で発覚：旧 temp_exp_band.png は左上が「ほぼ白の余白」で、そこに
      `.experience__head`（青文字 EXPERIENCE / 体験プログラム）を absolute で重ねていた。
      帯を実写真に差し替えると左上が写真になり、**青い見出しが写真に埋もれて読めなくなる**
      （1440/900 の実renderスクリーンショットで確認）。
      文字色を白にする・スクリムを敷くのは「新しい装飾を足さない」という指示に反するため、
      他セクション（ABOUT / CREATURES / ACTIVITY LOG）と同じ「白地の上に見出し → 下に写真」
      の並びに戻す。
   PROD-20260923-014 旧（@media min-900）:
     .experience__head { position:absolute; top: calc(var(--space-section) + 21px); left:82px;
                         width:auto; max-width:none; margin:0; padding:0; z-index:6; } */
@media (min-width: 900px) {
  .experience__head {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    max-width: var(--wrap);
    margin: 0 auto 14px;
    padding: 0 20px;
    z-index: auto;
  }
}

/* ==========================================================================
   PROD-20260924-001（2026-09-24 制作部署Agent）— RYO指示 ①〜⑫ をまとめて反映
   ==========================================================================
   このブロックは style.css の **末尾に追記した上書き層**。既存ルールの本体は履歴として
   残し、ここで必要な宣言だけを後勝ちで打ち消している（この案件の既存のやり方）。

   🔴 数値のうち RYO 指定があるのは「角丸をやめる／大きく／横幅を揃える／SPは100%」だけで、
      **具体的なpx値はすべて制作部署が決めた値＝正直な申告**（各項目に根拠を書く）。
   ========================================================================== */

/* ---------------------------------------------------------------------
   ⑤⑦⑧⑨ 見出しを大きく（トークンのみ・1トークン統一を壊さない）
   RYO指示：「クァし小さい（＝少し小さい）」「見出し小さい」「センター揃え見出し小さい」
   旧: --fs-h2: 32px（PC）/ 24px（SP）、--fs-label: 14px（PC）/ 12px（SP）
   新: --fs-h2: 40px（PC）/ 28px（SP）、--fs-label: 16px（PC）/ 13px（SP）
   【決め方】本文 --fs-body:16px を基準に、PC見出し = 本文×2.5（旧2.0）、SP見出し = 本文×1.75（旧1.5）。
     既存の「本文16pxの倍数で見出しを決める」設計（L38-42 のコメント）をそのまま踏襲し、
     倍率だけ1段上げた。**新しいトークンは作っていない／1箇所だけの例外も作っていない**。
     波及範囲は実測済み：.section-title は全9ページ・計24要素、.section-label は計19要素
     （PROD-20260924-001 の BEFORE 実測表を参照）。
   --------------------------------------------------------------------- */
:root {
  --fs-h2: 40px;    /* PROD-20260924-001 旧: 32px */
  --fs-label: 16px; /* PROD-20260924-001 旧: 14px */
  /* ⑥ ボタンの上余白。--space-section 系（120/180/96/56px）はセクション単位の値で
     ボタン1個の上には大きすぎるため、--space-h2(40px) と同じ粒度の新規トークンを1つ作った。
     🔴 新規トークンを作った理由＝既存トークンに「コンポーネント直上の余白」の粒度が
        --space-h2 しかなく、それは見出し専用の意味を持つため流用すると意味が壊れる。 */
  --space-btn-top: 40px;
}
@media (max-width: 899px) {
  :root {
    --fs-h2: 28px;    /* PROD-20260924-001 旧: 24px */
    --fs-label: 13px; /* PROD-20260924-001 旧: 12px */
    --space-btn-top: 28px;
  }
}

/* ---------------------------------------------------------------------
   ② ボタンの角丸を全ページ共通で廃止
   RYO指示：「ボタン角丸やめる」「全ページ共通で」
   🔴 対象は**ボタンとして見えているものだけ**。パネル・カード・写真・地図・タグピルの
      角丸は巻き添えにしない（.info__panel 10px / .info__map 4-6px / .log-card__photo 2px /
      .log-card__tag 999px / .exp-card__photo-sp 24px / .header__burger span 2px は**据え置き**）。
   変更前の実測（本番実render）：radius≠0 のボタン＝PC 8px×8件 / SP 6px×8件 /
     送信ボタン 999px / SPドロワーCTA 999px。
   --------------------------------------------------------------------- */
.btn,
.btn--small,
.btn--outline,
.btn--white,
.btn--dark,
.info__cta,
.creatures__btn-sp,
.activitylog__more,
.sp-nav__cta,
.kidsclub .btn--white,
.subpage-body .wpcf7 input[type="submit"] { border-radius: 0; }

/* ---------------------------------------------------------------------
   ③ ボタンを大きく（文字もボタン自体も）
   RYO指示：「ボタン大きく」「文字もボタン自体も」（px指定なし＝制作部署の判断）
   【決めた値と理由】
   ・font-size：13px → var(--fs-body)=16px。**新しいサイズを作らず本文トークンに寄せた**
     （PROD-20260922-010 の「本文は --fs-body の1トークン」という設計を壊さないため）。
     .btn--small は 12px → 15px（本文より1段小さいことで従属関係を残す）。
   ・padding：13px 22px → 18px 30px（PC）。上下+5px・左右+8px。
   ・min-height 44px：タップ領域のアクセシビリティ下限（WCAG 2.5.5 相当）を明示で担保。
     実測結果：PC .btn 高さ 66.8px / .btn--small 59px、SP .btn 62.8px。**全て44px以上**。
   --------------------------------------------------------------------- */
.btn {
  padding: 18px 30px;      /* PROD-20260924-001 旧: padding: 13px 22px; */
  font-size: var(--fs-body); /* PROD-20260924-001 旧: font-size: 13px; */
  gap: 12px;               /* PROD-20260924-001 旧: gap: 10px; */
  min-height: 44px;
  box-sizing: border-box;
}
.btn--small { padding: 15px 26px; font-size: 15px; } /* PROD-20260924-001 旧: padding: 10px 18px; font-size: 12px; */
.subpage-body .wpcf7 input[type="submit"] {
  padding: 19px 44px;       /* PROD-20260924-001 旧: padding: 16px 40px; */
  font-size: var(--fs-body);/* PROD-20260924-001 旧: font-size: 15px; */
  min-width: 280px;         /* PROD-20260924-001 旧: min-width: 240px; */
}

@media (max-width: 899px) {
  .btn { padding: 16px 22px; font-size: var(--fs-body); }
  .btn--small { padding: 14px 20px; font-size: 15px; }
  /* 旧: .kidsclub .btn--white { width:115px; height:33px; font-size:10.5px; ... }
     ＝カンプ実測由来の固定サイズ。33px高はタップ領域44px未満で、かつ RYO の「大きく」に反する。
     固定サイズをやめて他のSPボタンと同じ寸法にそろえる。 */
  .kidsclub .btn--white {
    width: auto;
    height: auto;
    padding: 16px 22px;
    font-size: var(--fs-body);
    gap: 10px;
    justify-content: center;
    letter-spacing: .04em;
  }
  /* SPの EXPERIENCE 2枚は「枠なしテキストリンク」の意匠（L2405 付近）を維持したまま文字だけ拡大 */
  body.home .exp-card__memo .btn { padding: 10px 0; font-size: var(--fs-body); min-height: 44px; }
}

/* ---------------------------------------------------------------------
   ④ 横幅をそろえる（TOPのみ。RYO「ボタン横幅少なくともトップは合わせる
      (スマホは100％) PCは一番大きいボタンの横幅に他も合わせる」）
   【PCの基準値 307px の出どころ】③の拡大を当てた状態でTOPの全ボタンの
     **自然幅を本番実renderで実測**した結果（1440px）：
       ABOUT「くにみクラゲ公民館について →」 307.0 ← 最大
       CONTACT「お問い合わせフォームへ →」   273.7
       KIDS CLUB / ACTIVITY LOG / CREATURES / INFORMATION「詳しく見る・一覧を見る →」 173.8
       EXPERIENCE「詳しく見る →」(.btn--small)  159.6
     → 最大の 307px を min-width として全ボタンに与える。
   🔴 EXPERIENCE の2本は写真バナーに重なる幅の狭いメモカードの中にあるため、
      307px を当てるとカードからはみ出す。**この2本だけは対象外**にしており、
      これは制作部署の判断＝RYO判断事項として報告に上げている。
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
  body.home .about__text .btn,
  body.home .kidsclub__panel .btn,
  body.home .contact__panel .btn,
  body.home .activitylog__more,
  body.home .creatures__btn-sp,
  body.home .info__cta {
    min-width: 307px;
    justify-content: center;
  }
}
/* SP/TB（≤899px）：RYO「スマホは100％」 */
@media (max-width: 899px) {
  body.home .about__text .btn,
  body.home .kidsclub__panel .btn,
  body.home .contact__panel .btn,
  body.home .activitylog__more,
  body.home .creatures__btn-sp,
  body.home .info__cta {
    /* 🔴 .about__text .btn（L2251）は詳細度 (0,2,0) で `padding: 9px 14px; width: 249px;` を
       持っており、③の `.btn`(0,1,0) の拡大を打ち消していた（実測：高さ 48.8px で
       他のSPボタン 62.8px より低い）。body.home 付きの (0,3,1) でまとめて上書きする。 */
    padding: 16px 22px;
    min-height: 44px;
    width: 100%;
    /* 🔴 「100%」は入れ物ごとに基準幅が違う（.about__text はほぼ全ブリード375px、
       .kidsclub__panel / .contact__panel は内側paddingあり、.creatures__btn-sp の親は375px）。
       そのままだと実測で 272〜375px とバラつくため、**見た目の幅をセクションのガターに揃える**。
       基準 = 100vw − --sp-gutter×2（375pxで 315px・768pxで 708px）。
       .info__cta だけは .info__panel（カード）の内側にあるため、カード内幅（375pxで283px）に従う。 */
    max-width: calc(100vw - var(--sp-gutter) * 2);
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  /* .creatures__btn-sp は PROD-20260904-012 でカンプ再現のため 204px 固定＋
     `margin-left: calc(50% - 187.5px + 74px)` の左寄せになっていた。100%指定と矛盾するため解除。 */
  .creatures__btn-sp {
    width: calc(100% - var(--sp-gutter) * 2);
    margin: var(--space-btn-top) var(--sp-gutter) 0;
  }
}

/* ---------------------------------------------------------------------
   ⑥ ボタンの上余白をもっと大きく（RYO「ボタン上余白もっと大きく」）
   --------------------------------------------------------------------- */
body.home .about__text .btn,
body.home .kidsclub__panel .btn,
body.home .contact__panel .btn,
body.home .activitylog__more,
body.home .creatures__btn-sp,
body.home .info__cta,
.subpage-cta .btn { margin-top: var(--space-btn-top); }

/* ---------------------------------------------------------------------
   ④⑨ 「一覧を見る」をコンテンツの下へ（front-page.php 側でDOMを移動済み）
   ・ACTIVITY LOG：.activitylog__head の中にあった導線を .activitylog__list の直後へ
   ・CREATURES：.creatures__head の中にあった導線を撤去し、グリッド直後に既にあった
     .creatures__btn-sp に一本化（PCでの display:none を解除）
   --------------------------------------------------------------------- */
.activitylog__more { align-self: center; }
@media (min-width: 900px) {
  /* PROD-20260924-001 旧: .creatures__btn-sp { display: none; }（L1246・PC帯） */
  /* 🔴 .creatures__btn-sp は `.creatures__grid`（2カラムgrid 0.54fr/0.46fr）の**グリッドアイテム**。
     margin:auto / align-self ではなく grid-column と justify-self でないと中央に来ない
     （実測：修正前は1カラム目の中央 x=261 に置かれていた）。 */
  .creatures__btn-sp {
    display: flex;
    width: fit-content;
    grid-column: 1 / -1;
    justify-self: center;
  }
}

/* ---------------------------------------------------------------------
   ⑧ 見出しのセンター揃え
   RYO指示：「センター揃え見出し小さい」（TOPのEXPERIENCEのスクショ付き）
   PROD-20260923-012 作業2 は .activitylog__head / .creatures__head / .info__head だけを
   センターにし、`.experience__head は RYO の指示対象外` として除外していた。今回その除外を解く。
   🔴 TOPの .about / .kidsclub / .contact と、下層9ページの .subpage-hero /
      .subpage__h2 / .subpage-info は **左寄せのまま**。これらは本文・写真と横並びの
      カラム／パネル内にあり、見出しだけセンターにすると本文の左端と揃わなくなるため、
      **勝手に例外にせず実測値とスクショを添えて秘書へ判断を上げている**（報告⑧参照）。
   --------------------------------------------------------------------- */
.experience__head { text-align: center; }

/* ---------------------------------------------------------------------
   ⑫ .about の PC 上余白を詰める（RYO「.aboutか／PCのとき上の余白でかすぎ」）
   変更前の実測：PC(≥900) padding-top 180px（= --space-section-lg）/ SP 56px。
   SPは PROD-20260922-014 で既に 104→56px に下げ済みで、**PCだけ取り残されていた**。
   【採用値】--space-section-sm（96px）。新規トークンは作っていない。
   候補3値を本番実renderで撮り比べて決めた（比較スクショ：screenshots/PROD-20260924-001/TRY/about_pt_*.png）：
     180px（現状）… FV直下が空きすぎ。RYO指摘のとおり
     120px（--space-section）… まだヒーローの波形下端から離れる
     96px（--space-section-sm）← 採用。ヒーロー画像下端の波と見出しが1画面に収まる
   🔴 SP（≤899px）の 56px には触っていない。他セクション（kidsclub/experience/
      activitylog/creatures/info）の padding も1pxも変えていない（実測で確認）。
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
  .about { padding-top: var(--space-section-sm); } /* PROD-20260924-001 旧: padding: var(--space-section-lg) 20px var(--space-section); */
}

/* ---------------------------------------------------------------------
   ⑪ TOPの活動記録を WP_Query 化（front-page.php 側でベタ書きHTMLを撤去済み）
   新しいマークアップ：.log-card > a.log-card__link > (img.log-card__img | span.log-card__photo-empty)
                       + .log-card__meta + .log-card__title + .log-card__excerpt
   旧は div.log-card__photo（background-image）だったため、<img> 用の指定を足す。
   ⑪-3 RYO「タイトルちいさすぎて本文と変わらんやんけ」：
     旧 .log-card__title は font-size: var(--fs-body)=16px で抜粋と同値だった。
     21px（PC）/ 19px（SP）に拡大。**本文16pxの1.3倍**で、見出しトークン --fs-h2(40/28px) より
     明確に下・本文より明確に上、という階層を作るための値＝制作部署の判断。
   --------------------------------------------------------------------- */
.log-card__link { display: block; color: inherit; text-decoration: none; }
.log-card__link:focus-visible { outline: 3px solid var(--ink-heading); outline-offset: 3px; }
.log-card__img,
.log-card__photo-empty {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0 0 16px;
  border: 7px solid var(--white);
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
  background: var(--sky-02);
  box-sizing: border-box;
}
.log-card__title { font-size: 21px; line-height: 1.5; } /* PROD-20260924-001 旧: font-size: var(--fs-body); */
.log-card__link:hover .log-card__title { text-decoration: underline; }
.activitylog__empty { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); text-align: center; width: 100%; }
@media (max-width: 899px) {
  .log-card__title { font-size: 19px; }
}

/* ---------------------------------------------------------------------
   ⑩ TOPのいきもの：名前を写真に「重ねる」＋文字の下だけの薄い帯（A＋D案）
   🔴 経緯の訂正：PROD-20260923-011 の RYO 指示原文は
      「クラゲはちゃんと写真の上に名前あるのに他はなんで横なの統一させて」で、
      対策案 **A（文字の下だけに暗幕の帯）＋D（実写真に差し替えて再実測）** が求められていた。
      秘書がこれを **C（名前を写真の外＝下に出す）** と取り違えて指示したため、
      PROD-20260923-013 で C を実装してしまった。**今回 A＋D に是正する。**
      →「写真の外に名前」だった 013 の構造（L3846 付近）と、カード全面のベタ暗幕
        （`.creatures .creature-zoom::after { background: rgba(4,22,45,.34) }`）を解除する。

   【帯の濃度 α = .60 の決め方＝実測】
     手法は PROD-011/013 と同一（文字を color:transparent にして要素bboxを本番実renderから
     クリップ撮影 → 全画素を WCAG 2.1 相対輝度で集計）。基準 AA 4.5:1・全画素。
       α=.45 → 10要素中 6件 FAIL
       α=.55 → 10要素中 4件 FAIL（カニ 2.87 / 魚 2.96 など）
       α=.58 → 全件 PASS だが最小 4.73（余裕が薄い）
       α=.60 → 全件 PASS・最小 5.02   ← **採用**
       α=.62 → 全件 PASS・最小 5.08（.60 と差がほぼ無いので濃くする理由がない）
     → **5枚とも同じ α=.60 で AA を満たしたため、写真ごとの出し分けはしない**（統一を優先）。
   🔴 RYO の言葉は「薄く帯」だが、**α=.60 より薄いと AA 4.5:1 に届かない**（上記実測）。
      「薄く」より濃い可能性があることを正直に申告する。ベタ塗りを全面にかけるのはやめ、
      **文字の下だけ**に敷くグラデーションにしている（帯の上32pxでα→0にフェード）。
   🔴 高さ揃えの式の組み直し（名前ブロックが写真の外にあった前提が崩れるため）：
        旧（013）: 大判article = 写真(F×3/4) + I（I = 名前ブロック高 ≒ 49.6px）
                   小カード高 = (大判article高 − 17)/2、小カード写真高 = 小カード高 − I
        新（本件）: 名前が写真に重なるので **I = 0**。
                   大判article = 写真 = F×3/4 ／ 小カード = 小カード写真 = (F×3/4 − 17)/2
      列幅比 0.54/0.46（RYO承認済み）は**変えていない**。その帰結として小カードの
      縦横比が 1.29 → 1.166（1440px）に変わる。実測値は報告⑩に記載＝RYO判断事項。
   --------------------------------------------------------------------- */
:root { --kk-scrim: .60; }

/* PROD-20260924-001 旧: .creatures .creature-zoom::after { background: rgba(4,22,45,.34); }
   （カード全面のベタ暗幕。RYO「ベタ塗りではなく薄い帯」により解除） */
.creatures .creature-zoom::after { background: none; }

.creatures .creature-feature,
.creatures .creature-card { position: relative; }

/* PROD-20260924-001 旧（013）:
   .creatures .creature-feature__info, .creatures .creature-card__info {
     position: static; ... padding: 8px 0 0; }
   .creatures .creature-feature__name, .creatures .creature-card__name { color: var(--ink-heading); }
   .creatures .creature-feature__latin, .creatures .creature-card__latin { color: #63737c; } */
.creatures .creature-feature__info,
.creatures .creature-card__info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  pointer-events: none;   /* 文字の上のクリックもライトボックス（.creature-zoom）に届く */
  padding: 32px 18px 14px;
  background: linear-gradient(to top,
    rgba(4, 22, 45, var(--kk-scrim)) 0%,
    rgba(4, 22, 45, var(--kk-scrim)) calc(100% - 32px),
    rgba(4, 22, 45, 0) 100%);
}
.creatures .creature-feature__name,
.creatures .creature-card__name,
.creatures .creature-feature__latin,
.creatures .creature-card__latin { color: var(--white); }

@media (max-width: 899px) {
  .creatures .creature-feature__info {
    padding: 28px var(--sp-gutter) 12px;
    background: linear-gradient(to top,
      rgba(4, 22, 45, var(--kk-scrim)) 0%,
      rgba(4, 22, 45, var(--kk-scrim)) calc(100% - 28px),
      rgba(4, 22, 45, 0) 100%);
  }
  .creatures .creature-card__info {
    padding: 24px 10px 8px;
    background: linear-gradient(to top,
      rgba(4, 22, 45, var(--kk-scrim)) 0%,
      rgba(4, 22, 45, var(--kk-scrim)) calc(100% - 24px),
      rgba(4, 22, 45, 0) 100%);
  }
}
@media (min-width: 900px) {
  /* 名前が写真に重なった＝写真が行の高さを全部使う */
  .creatures .creature-card__photo { aspect-ratio: auto; flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------
   ⑤⑦ の副作用の修正（実render目視で発覚）— ABOUT の見出しが語中で折れる
   --fs-h2 を 32→40px にしたことで、TOP ABOUT の見出し1行目
   「くにみクラゲ公民館って、」（12字 × 40px ＋ letter-spacing .01em ≒ 485px）が
   `.about__inner` の左列 470px に収まらず、**「公民館っ／て、」と語中で改行**していた
   （本番実render実測：行数3・見出し高156px）。
   左列を 470 → 500px にして、マークアップの <br> どおりの2行（高さ104px）に戻す。
   🔴 470/500/530px を実render実測で比較し、**破綻が消える最小値の 500px** を採用した
      （530pxでも2行だが写真列を余計に30px削るため）。写真列は 820 → 790px。
      新しいトークンは作らず、既存の固定px（L1376 の 470px）を書き換えただけ。
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
  /* PROD-20260924-001 旧: .about__inner { grid-template-columns: 470px 1fr; ... }（L1376） */
  .about__inner { grid-template-columns: 500px 1fr; }
}

/* SP専用／PC専用の <br> 出し分け（ABOUT見出し）。
   .br--sp は既存（L759 で基底 display:none、L2133 の ≤899px で inline）。
   .br--pc は今回追加：PCでは通常の <br>、SPでは無効。 */
@media (max-width: 899px) {
  .br--pc { display: none; }
}

/* ---------------------------------------------------------------------
   PROD-20260924-001 追補：/log/ の一覧カードのタイトルリンクの当たり判定
   🔴 実クリック検証（Input.dispatchMouseEvent・1440px）で **2枚目だけ遷移しなかった**。
      原因：`.subpage-card__title` の <a> がインライン要素のため、タイトルが2行に
      折り返すと**2つの行ボックスの隙間（行間）がリンクの外**になる。
      「シーグラスでフォトフレームづくり」は1440pxで2行に折り返し、要素の中心＝
      ちょうどその隙間に当たっていた（実測：`elementFromPoint` → `H2.subpage-card__title`）。
      1行に収まる他の2枚と、幅の狭いSP375では偶然この隙間に当たらず遷移していた。
   対応：<a> を block にして <h2> の箱全体を当たり判定にする。見た目（字面・行間・色）は変わらない。
   🔴 スコープは `--log` モディファイア配下のみ。`.subpage-card` を共有している
      /experience/ と index.php には一切影響しない（PROD-20260923-010 の恒久注意に従う）。
   --------------------------------------------------------------------- */
.subpage-card--log .subpage-card__title a { display: block; }

/* ==========================================================================
   DIR-20260924-001 対応（ディレクター部署Agentの本番検証 FAIL 3件の是正）
   ========================================================================== */

/* ---------------------------------------------------------------------
   FAIL-1 `/log/` の記事カードがPCで実クリックしても遷移しない
   旧：リンクは「写真」と「タイトル」の2本だけ。PC1440 実測でカード高 402.2px に対し
       当たり判定は 写真 265.3×199 ＋ タイトル 265.3×31〜62 しか無く、**カード中央
       （抜粋テキスト部）はリンクの外**だった。SP375 は中央が写真に当たるため偶然遷移していた。
   新：`page-log.php` でカード全体を `<a class="subpage-card__link">` で包み、
       TOP の `.log-card__link` と**同じ作り**にした。ここでは内側要素をブロック化するだけ。
   🔴 スコープは `--log` モディファイア配下のみ。`.subpage-card` を共有する
      /experience/ と index.php には一切影響しない（PROD-20260923-010 の恒久注意に従う）。
   --------------------------------------------------------------------- */
.subpage-card--log .subpage-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.subpage-card--log .subpage-card__link:focus-visible {
  outline: 3px solid var(--ink-heading);
  outline-offset: 3px;
}
.subpage-card--log .subpage-card__label,
.subpage-card--log .subpage-card__text { display: block; }
.subpage-card--log .subpage-card__link:hover .subpage-card__title { text-decoration: underline; }

/* ---------------------------------------------------------------------
   FAIL-2 `/creatures/` が旧レイアウト（名前が写真の外）のまま
   ディレクター実測：PC1440 で 写真 right 416.3 に対し名前ボックス left 428.3（写真の右外）、
   SP375 で 写真 bottom 732 に対し名前 top 760.2（写真の下）。5枚とも。
   🔴 経緯：⑩の指示が「TOPのいきもの」と限定されていたため `/creatures/` を対象外にしていた（秘書の指示漏れ）。
   → TOP（`.creatures` 配下）と**同一の構造・同一の α=.60** に揃える。
      値は TOP と同じものを使い、`/creatures/` 用に新しい数値は作っていない。
   --------------------------------------------------------------------- */
/* 🔴 PC（≥900px）の旧基底 L1678-1679 / L1714 が
     `.creature-card { display:flex; align-items:center; gap:12px }`
     `.creature-card__photo { flex: 0 0 46%; aspect-ratio: 1.573/1 }`
   ＝「写真が左46%・文字が右」という**横並びの旧レイアウト**を指定していた。
   これがディレクターの検出した「名前ボックスが写真の右外」の正体。
   実測：カード 274.7×94.8／写真 126.3×94.7（＝カード幅の46%）。
   `.subpage-creatures` 配下（詳細度 0,2,0）で display と flex ごと上書きする。 */
.subpage-creatures .creature-card {
  display: block;
  position: relative;
  overflow: hidden;
}
.subpage-creatures .creature-card__photo {
  display: block;
  width: 100%;
  flex: none;
  aspect-ratio: 4/3;
  margin-bottom: 0;
  height: auto;
  background-color: var(--navy-deep);
}
.subpage-creatures .creature-card__info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 32px 18px 14px;
  background: linear-gradient(to top,
    rgba(4, 22, 45, var(--kk-scrim)) 0%,
    rgba(4, 22, 45, var(--kk-scrim)) calc(100% - 32px),
    rgba(4, 22, 45, 0) 100%);
}
.subpage-creatures .creature-card__no,
.subpage-creatures .creature-card__name,
.subpage-creatures .creature-card__latin { color: var(--white); }
.subpage-creatures .creature-card__latin { font-style: italic; }
/* ---------------------------------------------------------------------
   PROD-20260924-003：`/creatures/`（図鑑ページ）の学名が SP で消えていたのを戻す。
   原因＝ style.css L2558（@media max-width:899px 内）の
     `.creature-card__latin { display: none; }`
   が `.creatures`（TOPのセクション）限定になっておらず、下層の
   `.subpage-creatures` 配下のカードにも波及していた。
   🔴 TOPのSPで学名を出さない挙動（L2537-2538 / L3909 の `.creatures` 限定指定）は**維持する**。
      そちらの行は一切触っていない。ここで戻すのは下層図鑑ページだけ。
   打ち消し方：L2558 は詳細度 (0,1,0)、この指定は (0,2,0) なので、
   メディアクエリの内外にかかわらずこちらが勝つ（行の削除はしていない）。
   --------------------------------------------------------------------- */
.subpage-creatures .creature-card__latin { display: block; }

/* ---------------------------------------------------------------------
   FAIL-3 TOP CONTACT の `CONTACT` ラベルが PC で AA 4.5:1 を 2px 割る
   ディレクター実測：fg #00197d ／ 最悪背景 rgb(78,146,206) ／ **最小CR 4.41**（4.5未満 2px / 48,384px）。
   SPは4.60でPASS、見出し本体はPC4.98/SP5.02でPASS。
   🔴 `#00197d` は RYO 承認済みの色なので**変更しない**。見出し本体・SP側も触らない。
   → 是正は「文字の下の写真がわずかに明るすぎる2pxを、白側に持ち上げる」方向で行う。
      ⑩でいきものに使ったのと**同じ手法（文字の下だけに敷くグラデーション）の白版**。
      ここは文字が濃紺なので暗幕ではなく**白幕**になる。
      α は本番実render・全画素実測で AA を満たす最小値を採った（探索過程は STATUS.md）。
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
  .contact__panel .section-label--onphoto {
    position: relative;
    display: inline-block;
    padding: 4px 12px;
    margin-left: -12px;
    /* 🔴 ベタ塗りの白箱にすると「カンプに無い可読性の細工」に見えるため、
       左右を透明へフェードさせて箱の輪郭を出さない（⑩の帯と同じ考え方の白版）。 */
    background: linear-gradient(to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, var(--kk-label-scrim)) 10%,
      rgba(255, 255, 255, var(--kk-label-scrim)) 90%,
      rgba(255, 255, 255, 0) 100%);
  }
}
/* α は本番実render・全画素実測で AA を満たす最小値に余裕を1段足した値（探索過程は STATUS.md）。 */
:root { --kk-label-scrim: .14; }

/* =====================================================================
   PROD-20260924-002 ①（RYO決定 2026-09-24「任せる」）
   CONTACT 本文のコントラストを AA 4.5:1 へ
   =====================================================================
   BEFORE（ローカル実render・全画素実測 2026-09-24）：
     .contact__text は L1186 で `color: rgba(255,255,255,.9)`。
     実効前景 ≒ rgb(238,243,247)（α0.9 を写真の平均色に合成した値）。
     最小CR  PC1440 = 1.37 ／ 900 = 1.26 ／ SP375 = 1.25 ＝ **3幅とも AA 未達**。
     （依頼書の 2.29/1.40/1.38 とは測定条件が違うが、FAIL である結論は同じ）

   対応：見出し `.contact .section-title--onphoto` / ラベルと**同じ濃紺 #00197d に統一**する。
   🔴 新しい色は作っていない。#00197d は L3240 で RYO が承認済みの、この案件で既に使われている値。
   🔴 パネルに白地の箱（新しい面）は足していない。**色の変更だけ**で解決している。
   🔴 L1186 / L1868 / L2625 の既存宣言は 1 行も削除していない（後勝ちで上書き）。
      それらは font-size / line-height も持っているため、削除すると SP の字送りが壊れる。
   🔴 `.contact` 配下に限定したセレクタなので .kidsclub 等は巻き添えにならない。
--------------------------------------------------------------------- */
.contact .contact__text { color: #00197d; }

/* =====================================================================
   PROD-20260924-002 FAIL-3-② の是正（ディレクター DIR-20260924-002 差し戻し）
   TOP CONTACT ラベルの白グラデが「明るい長方形」として見えている
   =====================================================================
   ディレクター本番実測：L4489 の `linear-gradient(to right, …)` は **左右しか
   フェードしていない**ため、帯の上下辺が 1px で切り落とされている。
   帯 ON/OFF の同一画素比較で 上端 y13→14 に 14階調 / 下端 y49→50 に 17階調の段差。
   背景が滑らかな空のグラデーション写真なので、この直線が輪郭として認識される。

   制作部署の再実測（ローカルミラー＝本番HTML＋本番写真／文字を transparent にして
   帯だけを比較・幅1440・DPR1・全画素）：
     旧: 帯ON/OFF 差分の **行平均の隣接段差 1.118階調** ／ 画素単位の縦段差 **最大16階調**
     新: 同 **0.203階調** ／ 画素単位の縦段差 **最大3階調**
         （その3階調の箇所は下地写真自体が隣接8階調動いている点で、帯由来ではない。
           段差2階調以上の画素は 1,311 / 731,520 = 0.18% で、直線状に並んでいない）
     ラベル最小CR： 1440 4.949 → **5.269**（4.5:1 維持・未達画素0）

   対応：1次元グラデを**やめ**、`::before` に **楕円グラデ（ellipse closest-side）**を敷いて
   **上下左右すべて透明に抜ける**形にした。`::before` は `inset` を負にしてあるので、
   **レイアウト上の帯の高さ（padding 4px＝文字16pxに対して過大でない）は変えずに**
   フェードの距離だけを伸ばしている（＝輪郭が出ない）。

   🔴 旧宣言 L4481-4497 は **1行も削除していない**（後勝ちで background を打ち消すだけ）。
      `--kk-label-scrim: .14` も同じ値をそのまま使っており、新しい数値は作っていない。
   🔴 撤去はしていない（秘書決定：CR 4.60〜4.95 でギリギリPASSのため帯は必要）。
   🔴 SP375（<900px）は元から帯なし・CR 4.60 で PASS のため、この @media の外＝**無変更**。
--------------------------------------------------------------------- */
@media (min-width: 900px) {
  .contact__panel .section-label--onphoto { background: none; }
  .contact__panel .section-label--onphoto::before {
    content: "";
    position: absolute;
    inset: -26px -34px;   /* レイアウトには影響しない。フェード距離を稼ぐためだけの負のinset */
    z-index: -1;          /* .contact__panel が z-index:2 でスタッキング文脈を作るので写真より上・文字より下 */
    pointer-events: none;
    /* closest-side ＝ 上下左右の各辺で α が 0 に到達する。farthest-corner だと
       辺の中央で α が残って直線の輪郭が出るため closest-side を選んでいる。 */
    background: radial-gradient(ellipse closest-side at 50% 50%,
      rgba(255, 255, 255, .140) 0%,
      rgba(255, 255, 255, .140) 14%,
      rgba(255, 255, 255, .133) 26%,
      rgba(255, 255, 255, .116) 38%,
      rgba(255, 255, 255, .093) 50%,
      rgba(255, 255, 255, .068) 62%,
      rgba(255, 255, 255, .045) 72%,
      rgba(255, 255, 255, .026) 82%,
      rgba(255, 255, 255, .011) 91%,
      rgba(255, 255, 255, .003) 97%,
      rgba(255, 255, 255, 0)    100%);
  }
}

/* =====================================================================
   PROD-20260924-004 — 下層4ページ（/experience/ ・/experience/craft/ ・
   /experience/observation/ ・/kidsclub/）の実装で追加した分。
   構成案 v2（PLAN-20260924-002）§3「使うコンポーネント」に従い、既存クラスで
   組めない1点＝「写真＋文の横並び（SPは縦積み・PCは左右交互）」だけを新規に作る。
   それ以外は既存の .subpage-card--log / .subpage-thumb / .subpage-info 等を流用し、
   ここでは**アスペクト比のモディファイア**だけを足している。

   🔴 既存行は1行も削除・書き換えしていない（このブロックは末尾追記のみ）。
   🔴 新しい色は作っていない（--white / --line / --ink-heading / --text のみ使用）。
   🔴 写真の白枠（border 7px #fff ＋ 影）は PROD-20260923-010 で .log-card__photo /
      .subpage-card--log .subpage-card__photo に実装済みの値と**同値**を使う。
      既存ルールにセレクタを足すと既存行の書き換えになるため、同じ宣言を
      新しいセレクタに対してここで書いている（値は複製・新規の数値は作っていない）。
   --------------------------------------------------------------------- */

/* ---- 1. 写真＋文の横並び（新規コンポーネント） ---- */
.subpage-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: var(--space-block);
}
.subpage-media__photo {
  display: block;
  width: 100%;
  margin: 0;
  border: 7px solid var(--white);
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
  background-color: var(--sky-02);
  box-sizing: border-box;
  overflow: hidden;
}
.subpage-media__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.subpage-media__body .subpage__h2 { margin-bottom: 20px; }
@media (min-width: 900px) {
  .subpage-media {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  /* 左右交互：--rev のときだけ写真を右に送る（DOM順は「写真→文」で固定し、
     読み上げ順が段組みで入れ替わらないようにしている） */
  .subpage-media--rev .subpage-media__photo { order: 2; }
  .subpage-media--rev .subpage-media__body  { order: 1; }
}

/* ---- 2. 全幅の大写真（.subpage-thumb の中身の指定は既存に無いため追加） ----
   既存 .subpage-thumb は margin-bottom:22px のみで、幅・比率の指定を持たない。
   single.php の .subpage-thumb を巻き込まないよう --wide モディファイア配下に限定する。
   画像は書き出し時点で 3:2 に切り出してあるので、ここでは比率を指定しない
   （＝本番で二重にトリミングされない）。 */
.subpage-thumb--wide {
  border: 7px solid var(--white);
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
  background-color: var(--sky-02);
  box-sizing: border-box;
  overflow: hidden;
}
.subpage-thumb--wide img { display: block; width: 100%; height: auto; }

/* ---- 3. 写真カードのアスペクト比モディファイア ----
   既存 .subpage-card--log .subpage-card__photo は aspect-ratio:4/3 固定。
   下層では素材の実寸がそれぞれ違う（告知バナー＝ほぼ正方／作品写真＝縦位置／
   /experience/ の既存2枚＝1400×583 の横長）ため、比率だけを差し替える。
   🔴 `.subpage-cards--log` 配下にだけ書いているので /log/ ・/experience/ 以外への波及は無い。 */
.subpage-cards--sq  .subpage-card--log .subpage-card__photo { aspect-ratio: 1 / 1; }
.subpage-cards--pt  .subpage-card--log .subpage-card__photo { aspect-ratio: 3 / 4; }
.subpage-cards--exp .subpage-card--log .subpage-card__photo { aspect-ratio: 2.4 / 1; }
/* 2枚だけ並べる列（館内の解説パネル）。3列グリッドだと1枚あたり265pxで
   手書きの文字が読めないため、この列だけ2列にする。 */
.subpage-cards--duo { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .subpage-cards--duo { grid-template-columns: repeat(2, 1fr); }
  .subpage-cards--exp { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .subpage-cards--duo { grid-template-columns: repeat(2, 1fr); }
  .subpage-cards--exp { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 4. 写真カードの中身（下層のみ） ----
   /log/ のカードは <a> でカード全体を包むが、下層の写真カードはリンクではないので
   <button class="creature-zoom">（＝既存ライトボックスの起動元）にしている。
   .creature-zoom のボタン既定外観リセットは L1030 に実装済みのものをそのまま使う。 */
.subpage-card--log .subpage-card__photo-btn { cursor: zoom-in; }
.subpage-card--log .subpage-card__caption {
  display: block;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}
/* /experience/ のカードはカード全体がリンク（/log/ と同じ作り）。
   中のボタンは <span class="btn btn--small"> にしてある（a の入れ子を作らないため）。 */
.subpage-card--log .subpage-card__link .btn { margin-top: 10px; }

/* 🔴 PROD-20260924-004 実測是正（本番 /experience/ PC1425 で計測して発見）：
   /experience/ のカードを `.subpage-card--log` に差し替えたことで、本文が
   L3628 の `.subpage-card--log .subpage-card__text { color: var(--text-light) }`
   （＝ /log/ の抜粋用の淡い色 #6b7b86）を拾い、白地でのコントラストが
   **旧 10.64 → 4.37 に低下**していた（AA 4.5 未達）。
   /log/ の抜粋はそのままに、/experience/ のカード本文だけ差し替え前の --text に戻す。
   旧実装の色＝`.subpage-card__text { color: var(--text) }`（L2697）と同値。新しい色は作っていない。 */
.subpage-cards--exp .subpage-card--log .subpage-card__text { color: var(--text); }

/* =====================================================================
   PROD-20261001-001 — /creatures/（いきもの図鑑）を5枚→14枚に
   RYO指示原文「詳細ページはある生き物の写真全部入れてよ／番号はいい TOPにないんだから」
   ---------------------------------------------------------------------
   🔴 `.creature-card` 系は TOP（front-page.php の `.creatures` 配下）と
      `/creatures/`（page-creatures.php の `.subpage-creatures` 配下）の2ファイル共有。
      PROD-20260923-011 の恒久注意どおり、ここで新規に書く宣言はすべて
      `.subpage-creatures` 子孫に限定する。TOP側（`.creatures …`）には一切触れていない。
   🔴 見た目は TOP と同じ「写真に名前を重ねる＋文字の下だけの薄い帯」
      （PROD-20260924-001 でRYO確定）を踏襲。帯の色・不透明度は TOP と同じ
      `rgba(4,22,45,var(--kk-scrim))`（--kk-scrim: .60）をそのまま使っている。
      図鑑ページなので帯の下にキャプション（`.creature-card__caption`）を1本足した。
   🔴 グリッドは既存の `.subpage-creatures`（auto-fill / minmax(220px,1fr)）を変えていない。
      メディアクエリの境界を持たない連続レイアウトなので 1023/1024px で段が飛ばない。
   🔴 `.creature-card__no` はマークアップから撤去したのでこの範囲では使っていない
      （基底 L1107 の宣言は TOP 以外の切り戻し用に残す＝既存行を消さない方針）。
   ===================================================================== */
.subpage-creatures .creature-card {
  display: block;          /* 基底 L1678(≤899px) の flex / L2551 の block を明示的に上書き */
  width: 100%;
  height: auto;
  aspect-ratio: auto;
}
/* 写真＋名前の帯をまとめる箱。ここが重ね合わせの基準になる */
.subpage-creatures .creature-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--navy-deep);
}
.subpage-creatures .creature-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  flex: none;
  aspect-ratio: auto;      /* 基底 L1106 の 4/3 を打ち消す（箱側で比率を持つため） */
}
.subpage-creatures .creature-card__info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  pointer-events: none;    /* 文字の上のクリックもライトボックス（.creature-zoom）に届く */
  padding: 28px 12px 10px;
  background: linear-gradient(to top,
    rgba(4, 22, 45, var(--kk-scrim)) 0%,
    rgba(4, 22, 45, var(--kk-scrim)) calc(100% - 28px),
    rgba(4, 22, 45, 0) 100%);
}
.subpage-creatures .creature-card__name,
.subpage-creatures .creature-card__latin {
  color: var(--white);
  font-size: var(--fs-body);
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}
.subpage-creatures .creature-card__name { font-weight: 700; margin-top: 0; }
.subpage-creatures .creature-card__latin { font-style: italic; display: block; }
/* キャプションは写真の外・白地の上。色は本文と同じ --text（#33404a / 白地 10.5:1） */
.subpage-creatures .creature-card__caption {
  margin: 10px 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}

/* =====================================================================
   PROD-20261001-004 下層5ページ v4（about / experience / craft / observation / kidsclub）
   ここから下の宣言はすべて .ks で始まるクラス（＋ .ks の後ろに来る .subpage-cta）だけを対象にする。
   front-page.php・header.php・footer.php は .ks を一切使っていないため、TOPには当たらない。
   色・文字サイズ・余白は既存トークンだけを使う（新しい色は作らない）。
   ===================================================================== */
.ks { --ks-gap: 24px; --ks-radius: 6px; }
.ks-section { padding: var(--space-section) 0; }
.ks-section--tint { background: var(--sky-01); }
.ks-section:not(.ks-section--tint) + .ks-section:not(.ks-section--tint) { border-top: 1px solid var(--line); }
.ks ~ .subpage-cta { margin-top: 0; }

.ks-wrap { max-width: 1160px; margin: 0 auto; padding: 0 40px; }
.ks-wrap--narrow { max-width: 880px; }

.ks-head { margin-bottom: var(--space-h2); }
.ks-head .ks-head__title { margin-bottom: 0; }
.ks-head--center { text-align: center; }
.ks-nobr { display: inline-block; }
.ks-head__title { word-break: auto-phrase; }

.ks-text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.ks-text p { margin: 0; }
.ks-text p + p { margin-top: 1em; }
.ks-lead-block { max-width: 760px; margin-bottom: var(--space-block); }
.ks-lead-sm { margin-bottom: 40px; max-width: 760px; }
.ks-note { margin-top: 24px; color: var(--text); font-size: var(--fs-body); line-height: var(--lh-body); }
.ks-more { margin-top: 40px; }
.ks-more--row { display: flex; flex-wrap: wrap; gap: 12px; }
.ks-link { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.ks-link:hover { text-decoration-thickness: 2px; }

.ks-h3 { font-size: 20px; line-height: 1.5; font-weight: 700; color: var(--ink); margin: 0 0 12px; letter-spacing: .02em; }

/* 写真の箱：比率を固定し、object-fit で切り抜く。最大幅で拡大率1.0倍以下を守る */
.ks-ph { position: relative; margin: 0; overflow: hidden; border-radius: var(--ks-radius); background: var(--sky-02); }
.ks-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ks-ph--portrait, .ks-ph--34 { aspect-ratio: 3 / 4; }
.ks-ph--land { aspect-ratio: 920 / 670; }
.ks-ph--43 { aspect-ratio: 4 / 3; }
.ks-ph--45 { aspect-ratio: 4 / 5; }
.ks-ph--32 { aspect-ratio: 3 / 2; }
.ks-ph--11 { aspect-ratio: 1 / 1; }
.ks-ph--wide { aspect-ratio: 920 / 510; }
.ks-ph--natural { background: none; }
.ks-ph--natural img { height: auto; }
.ks-ph--contain { background: var(--white); }
.ks-ph--contain img { object-fit: contain; padding: 12%; }
.ks-ph--max480 { max-width: 480px; }

/* INTRODUCTION：文章＋大きな写真（＋重ねた小さな写真） */
.ks-intro { display: grid; grid-template-columns: 1fr; gap: 48px; }
.ks-intro__media { position: relative; }
.ks-intro__main { width: 86%; margin-left: auto; max-width: 520px; }
.ks-intro__main--land { width: 100%; max-width: none; }
.ks-intro__sub { position: absolute; left: 0; bottom: -40px; width: 48%; max-width: 300px; border: 6px solid var(--white); border-radius: 10px; box-shadow: 0 10px 30px rgba(14,58,99,.12); }
.ks-intro__media:has(.ks-intro__sub) { padding-bottom: 40px; }

/* STORY */
.ks-story { display: grid; grid-template-columns: 1fr; gap: 40px; }
.ks-story__photo { max-width: 420px; }
.ks-story__sub { margin-top: var(--space-block); padding-top: var(--space-block); border-top: 1px solid var(--line); }
.ks-story__subphoto { max-width: 420px; margin-bottom: 28px; }
.ks-story__close { margin-top: var(--space-block); padding-top: var(--space-block); border-top: 1px solid var(--line); }

/* 年表 */
.ks-timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ks-timeline__item { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); line-height: var(--lh-body); }
.ks-timeline__when { font-weight: 700; color: var(--ink-heading); letter-spacing: .04em; }
.ks-timeline__what { color: var(--text); }

/* 番号つきステップ（体験の連鎖・FIELD STEPS・GROWTH） */
.ks-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 40px var(--ks-gap); }
.ks-step { display: flex; flex-direction: column; }
.ks-step__photo { margin-bottom: 18px; }
.ks-step__photos { display: grid; gap: 8px; margin-bottom: 18px; }
.ks-step__photos .ks-step__photo { margin-bottom: 0; }
.ks-step__photos--2 { grid-template-columns: 1fr 1fr; }
.ks-step__photos--2 .ks-ph--43 { aspect-ratio: 2 / 3; }
.ks-step__num { margin: 0 0 4px; font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: .04em; color: var(--ink-heading); }
.ks-step__title { margin: 0 0 8px; font-size: 20px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.ks-step__text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.ks-step--text { justify-content: flex-start; padding: 32px 28px; border-radius: var(--ks-radius); background: var(--white); border: 1px solid var(--line); }
.ks-section:not(.ks-section--tint) .ks-step--text { background: var(--sky-01); border-color: transparent; }

/* カード列 */
.ks-cols { display: grid; grid-template-columns: 1fr; gap: 48px var(--ks-gap); }
.ks-cols--figs { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ks-card { display: flex; flex-direction: column; }
.ks-card__photo { margin-bottom: 20px; }
.ks-card__text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.ks-card__more { margin-top: 20px; }
.ks-card--panel { background: var(--white); border-radius: 10px; overflow: hidden; }
.ks-section:not(.ks-section--tint) .ks-card--panel { border: 1px solid var(--line); }
.ks-card--panel .ks-card__photo { margin-bottom: 0; border-radius: 0; }
.ks-card__inner { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.ks-card__inner .ks-card__more { margin-top: auto; padding-top: 24px; }
.ks-prog__title { margin: 0 0 12px; font-size: 24px; line-height: 1.4; font-weight: 700; color: var(--ink); }
.ks-bullets { list-style: none; margin: 18px 0 0; padding: 0; }
.ks-bullets li { position: relative; padding-left: 18px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.ks-bullets li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-heading); }

/* 文章＋写真の2カラム */
.ks-split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.ks-split--top { align-items: start; }
.ks-split__media { min-width: 0; }
.ks-duo { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; align-items: end; max-width: 640px; }
.ks-duo--even { grid-template-columns: 1fr 1fr; align-items: start; }
.ks-blocks { display: grid; gap: 28px; }
.ks-block p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }

/* 定義リスト（料金・時間など。装飾を抑え、読みやすさ優先） */
.ks-dl { margin: 0; border-top: 1px solid var(--line); }
.ks-dl__row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); line-height: var(--lh-body); }
.ks-dl__row dt { font-weight: 700; color: var(--ink); }
.ks-dl__row dd { margin: 0; color: var(--text); }
.ks-dl--mini { margin-top: 20px; }
.ks-dl--mini .ks-dl__row { padding: 10px 0; }
.ks-dl--note { margin-top: 40px; }
.ks-split__body .ks-text + .ks-dl { margin-top: 28px; }

/* FAQ */
.ks-faq { margin: 0; border-top: 1px solid var(--line); }
.ks-faq__item { padding: 24px 0; border-bottom: 1px solid var(--line); }
.ks-faq__q, .ks-faq__a { display: grid; grid-template-columns: 2em 1fr; font-size: var(--fs-body); line-height: var(--lh-body); }
.ks-faq__q { font-weight: 700; color: var(--ink); }
.ks-faq__a { margin: 8px 0 0; color: var(--text); }
.ks-faq__mark { font-weight: 700; color: var(--ink-heading); }

/* 流れ（01〜04） */
.ks-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 28px var(--ks-gap); counter-reset: none; }
.ks-flow__item { padding-top: 18px; border-top: 2px solid var(--ink-heading); }
.ks-flow__num { display: block; font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: .04em; color: var(--ink-heading); margin-bottom: 8px; }
.ks-flow__title { margin: 0 0 6px; font-size: 18px; line-height: 1.6; font-weight: 700; color: var(--ink); }
.ks-flow__text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.ks-group-detail .ks-flow__title { font-weight: 500; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }

/* 1日の流れ */
.ks-day { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 20px; }
.ks-day__item { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; }
.ks-day__time { margin: 0 0 4px; font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: .04em; color: var(--ink-heading); }
.ks-day__text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }

/* 表（プログラム一覧・比較） */
.ks-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: 1.7; color: var(--text); }
.ks-table th, .ks-table td { text-align: left; vertical-align: top; }
.ks-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ks-table tr { display: block; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ks-table tbody tr:first-child { border-top: 1px solid var(--line); }
.ks-table__name { display: block; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.ks-table td { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; padding: 2px 0; }
.ks-table td::before { content: attr(data-label); font-weight: 700; color: var(--navy-soft); }
.ks-table--compare .ks-table__hl { color: var(--ink); }

/* スケジュール */
.ks-sched { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ks-sched__item { display: grid; grid-template-columns: 6em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.ks-sched__date { font-weight: 700; color: var(--ink-heading); }
.ks-sched__head { margin-top: 32px; }
.ks-sched__cal { max-width: 360px; margin: 0 auto; }

/* 箱 */
.ks-box { padding: 32px 28px; border-radius: var(--ks-radius); background: var(--sky-01); }
.ks-box--white { background: var(--white); }
.ks-box p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.ks-cols--boxes { margin: var(--space-block) 0; }
.ks-program__title { margin: 0 0 12px; font-size: 22px; line-height: 1.45; font-weight: 700; color: var(--ink); }
.ks-group-detail { margin-top: var(--space-block); }
.ks-group-detail > .ks-h3 { margin-top: var(--space-block); margin-bottom: 20px; }
.ks-group-detail > .ks-h3:first-child { margin-top: 0; }

/* 作る過程 */
.ks-process { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-block); }
.ks-process__item { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ks-process__title { margin: 0 0 8px; font-size: 22px; line-height: 1.45; font-weight: 700; color: var(--ink); }
.ks-process__text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.ks-process__photos { display: grid; gap: 10px; }
.ks-process__photos--2 { grid-template-columns: 1fr 1fr; }
.ks-process__photos--3 { grid-template-columns: 1fr 1fr 1fr; }

/* 作品 */
.ks-works { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
.ks-works__photos { display: grid; gap: 6px; margin-bottom: 12px; }
.ks-works__photos--2 { grid-template-columns: 1fr 1fr; }
.ks-works__photos--2 .ks-ph--34 { aspect-ratio: 3 / 8; }
.ks-works__name { margin: 0; font-size: var(--fs-body); line-height: 1.6; font-weight: 700; color: var(--ink); }
.ks-works__mat { margin: 2px 0 0; font-size: var(--fs-body); line-height: 1.6; color: var(--navy-soft); }

/* これまでのワークショップ */
.ks-taglist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ks-taglist li { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }

/* アクセス */
.ks-access { display: grid; grid-template-columns: 1fr; gap: 40px; }
.ks-access__media { display: grid; gap: 16px; align-content: start; }
.ks-map { aspect-ratio: 4 / 3; border-radius: var(--ks-radius); overflow: hidden; background: var(--sky-02); }
.ks-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* キッズクラブのロゴ */
.ks-logo-frame { margin: 0 auto; max-width: 360px; padding: 24px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); }
.ks-logo-frame img { display: block; width: 100%; height: auto; }
.ks-after-table { margin-top: 28px; }

/* ---------- 600〜899px：カードは横並び（写真左・文章右）、グリッドは2列 ---------- */
@media (min-width: 600px) {
  .ks-steps { grid-template-columns: repeat(2, 1fr); }
  .ks-cols--3 .ks-card:not(.ks-card--panel) { display: grid; grid-template-columns: 40% 1fr; gap: 0 24px; align-items: start; }
  .ks-cols--3 .ks-card:not(.ks-card--panel) .ks-card__photo { grid-row: 1 / span 3; margin-bottom: 0; }
  .ks-cols--3:has(.ks-card--panel), .ks-cols--2 { grid-template-columns: repeat(2, 1fr); }
  .ks-works { grid-template-columns: repeat(3, 1fr); }
  .ks-flow { grid-template-columns: repeat(2, 1fr); }
  .ks-day__item { grid-template-columns: 200px 1fr; gap: 24px; }
  .ks-timeline__item { grid-template-columns: 11em 1fr; gap: 16px; }
  .ks-dl__row { grid-template-columns: 11em 1fr; gap: 16px; }
  .ks-dl--compact .ks-dl__row, .ks-dl--mini .ks-dl__row, .ks-dl--note .ks-dl__row { grid-template-columns: 7em 1fr; }
  .ks-cols--boxes { grid-template-columns: repeat(2, 1fr); }
  .ks-cols--boxes > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .ks-card__photo, .ks-ph--45 { max-width: 480px; }
}

/* ---------- 900px以上 ---------- */
@media (min-width: 900px) {
  .ks-intro { grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; }
  .ks-story { grid-template-columns: 4fr 8fr; gap: 72px; align-items: start; }
  .ks-story__media { position: sticky; top: 120px; }
  .ks-steps--4 { grid-template-columns: repeat(4, 1fr); }
  .ks-steps--3 { grid-template-columns: repeat(3, 1fr); }
  .ks-cols--3 { grid-template-columns: repeat(3, 1fr); }
  .ks-cols--3 .ks-card:not(.ks-card--panel) { display: flex; }
  .ks-cols--3 .ks-card:not(.ks-card--panel) .ks-card__photo { margin-bottom: 20px; }
  .ks-cols--3:has(.ks-card--panel) { grid-template-columns: repeat(3, 1fr); }
  .ks-split { grid-template-columns: 1fr 1fr; gap: 72px; }
  .ks-split--rev .ks-split__media { order: 2; }
  .ks-access { grid-template-columns: 1fr 1fr; gap: 56px; }
  .ks-dl--stack .ks-dl__row { grid-template-columns: 8em 1fr; }
  .ks-day { grid-template-columns: repeat(5, 1fr); gap: var(--ks-gap); }
  .ks-day__item { grid-template-columns: 1fr; gap: 16px; }
  .ks-flow { grid-template-columns: repeat(4, 1fr); }
  .ks-works { grid-template-columns: repeat(4, 1fr); gap: 40px var(--ks-gap); }
  .ks-process__item { grid-template-columns: 280px 1fr; gap: 56px; align-items: center; }
  .ks-cols--boxes { grid-template-columns: repeat(3, 1fr); }
  .ks-cols--boxes > :last-child:nth-child(odd) { grid-column: auto; }
  .ks-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .ks-table { display: table; }
  .ks-table tr { display: table-row; padding: 0; border: 0; }
  .ks-table tbody tr:first-child { border: 0; }
  .ks-table th, .ks-table td { display: table-cell; padding: 16px 14px; border-bottom: 1px solid var(--line); }
  .ks-table thead th { font-size: var(--fs-body); font-weight: 700; color: var(--navy-soft); border-bottom: 2px solid var(--ink-heading); white-space: nowrap; }
  .ks-table td::before { content: none; }
  .ks-table__name { margin: 0; white-space: nowrap; }
  .ks-table--compare thead th.ks-table__hl { color: var(--ink-heading); }
  .ks-table--compare td.ks-table__hl { background: var(--white); }
  .ks-section--tint .ks-table--compare td.ks-table__hl { background: var(--white); }
  .ks-section:not(.ks-section--tint) .ks-table--compare td.ks-table__hl { background: var(--sky-01); }
}
@media (max-width: 899px) {
  .ks-wrap { padding: 0 20px; }
  .ks-h3 { font-size: 18px; }
  .ks-prog__title { font-size: 21px; }
  .ks-program__title, .ks-process__title { font-size: 20px; }
  .ks-step__num, .ks-flow__num { font-size: 24px; }
  .ks-story__photo { margin: 0 auto; }
  .ks-split__media .ks-ph--max480 { margin: 0 auto; }
  .ks-duo { margin: 0 auto; }
  .ks-card__inner { padding: 24px 20px 28px; }
  .ks-box { padding: 24px 20px; }
  .ks-step--text { padding: 24px 20px; }
}
/* PROD-20261001-004 調整（1440実画面の目視で修正） */
.ks-step--text { justify-content: center; }
.ks-process__photos--2 .ks-ph--34 { aspect-ratio: 8 / 7; }
@media (min-width: 600px) {
  .ks-dl--mini .ks-dl__row { grid-template-columns: 4.5em 1fr; gap: 12px; }
}
@media (min-width: 1100px) {
  .ks-table td:nth-of-type(3), .ks-table td:nth-of-type(4), .ks-table td:nth-of-type(5) { white-space: nowrap; }
}
/* 原稿の「・」を文字のまま出すため、CSSの丸は使わない（ぶら下げインデントのみ） */
.ks-bullets li { padding-left: 1em; text-indent: -1em; }
.ks-bullets li::before { content: none; }
/* PROD-20261001-005 C-6-1：A DAY HERE の時刻の縦位置を揃える（行の高さに合わせて上段が伸びないよう上詰め） */
.ks-day__item { align-content: start; }
/* PROD-20261001-005 C-6-2：ボタンの文字を1つの塊にし、文節（.ks-nobr）単位で折り返す */
.ks .btn .ks-btn__label { min-width: 0; }
/* PROD-20261001-005 C-6-2：h3・ボタンは文節の切れ目の中から行の長さが揃う位置で折り返す（1〜2文字だけの最終行を作らない） */
.ks h3, .ks .btn .ks-btn__label { text-wrap: balance; }
/* PROD-20261001-006：プログラム一覧でリンク先が無い行の「詳しく」セル。SP（カード表示）ではラベルだけが残らないよう隠す。PCは空セルのまま罫線を保つ */
@media (max-width: 899px) { .ks .ks-table td.ks-table__empty { display: none; } }

/* =====================================================================
   PROD-20261005-001 TOP INFORMATION / ACCESS の組み替え
   RYO指示：「正直今のTOPのご利用案内・アクセス デザイン微妙じゃない？」「一回 参考度外視して整えてくれない？」
   旧構成（横一列パネル：3項目＋小さな地図＋ボタン）の .info__panel 系は front-page.php から外した。
   旧ルールは他で使われていないが、履歴として style.css 内に残している（削除はしていない）。
   新しい部品は .tinfo 系だけに閉じる。section 自体の .info（背景・上下余白）と .info__head（センター見出し）は従来どおり。
   構成：カード（左＝項目名と内容の2列リスト／右＝地図）＋カードの下に中央ボタン。
   PC（900px以上）は2カラム、SP/TB（899px以下）は1カラム（リスト→地図）。
   ===================================================================== */
.tinfo__inner { max-width: var(--wrap); margin: 0 auto; position: relative; z-index: 2; }
.tinfo__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(14,58,99,.08);
}
.tinfo__list { margin: 0; padding: 4px 20px; }
.tinfo__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.tinfo__row:first-child { border-top: 0; }
.tinfo__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 700;
  color: var(--ink-heading);
  letter-spacing: .04em;
}
.tinfo__icon { display: inline-flex; flex-shrink: 0; color: var(--navy); }
.tinfo__icon svg { display: block; width: 24px; height: 24px; }
.tinfo__body { margin: 0; min-width: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.tinfo__body p { margin: 0; }
.tinfo__body .tinfo__time { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: .03em; line-height: 1.6; margin-bottom: 2px; }
.tinfo__note { color: var(--navy-soft); }
.tinfo__fees {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 1列の最小幅は11em。列数は最大3（6項目が 3+3 / 2+2+2 で割り切れるように） */
  grid-template-columns: repeat(auto-fill, minmax(max(11em, calc((100% - 64px) / 3)), 1fr));
  column-gap: 32px;
}
.tinfo__fees li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.tinfo__price { flex-shrink: 0; white-space: nowrap; font-weight: 700; color: var(--ink); }
.tinfo__map { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 400px; background: var(--sky-01); }
.tinfo__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.tinfo__foot { margin-top: var(--space-btn-top); text-align: center; }
.tinfo__cta { justify-content: center; width: 100%; }

@media (min-width: 900px) {
  .tinfo__card { border: 0; }
  .tinfo__list { padding: 12px 40px; }
  .tinfo__row { grid-template-columns: 9em minmax(0, 1fr); gap: 24px; padding: 28px 0; }
  .tinfo__label { align-items: flex-start; }
  .tinfo__icon { margin-top: 2px; }
  .tinfo__map { aspect-ratio: 21 / 9; max-height: none; }
  .tinfo__cta { width: auto; min-width: 307px; }
}
/* 1200px以上だけ「リスト｜地図」の横並び。900〜1199px で横並びにすると内容列が約200pxになり、
   住所が語の途中で折り返すため（実測 900px で 202px）、その帯はリストの下に横長の地図を置く。 */
@media (min-width: 1200px) {
  .tinfo__card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .tinfo__map { aspect-ratio: auto; min-height: 360px; }
}

/* =====================================================================
   PROD-20261005-002（2026-10-05 RYO指示 KK-23 / KK-25 / KK-28）
   既存ルールは変更せず、ここに追記のみ。色・余白は既存トークンだけを使う。
   ===================================================================== */

/* ---------- KK-23 体験ページ PROGRAM LIST：1プログラム＝1行の比較リスト ----------
   左に「名前＋内容」、右に「開催・予約・料金の目安・詳しく」を毎行同じ位置に置き、縦に比較できるようにする。
   1100px以上：列見出し1回＋各行は横1列（項目名 dt は見た目だけ隠す）
   600〜1099px：各行の下段に3項目を横並び（項目名つき）
   599px以下：各行の下段に3項目を縦並び（項目名つき） */
.ks-plist { font-size: var(--fs-body); line-height: 1.7; color: var(--text); }
.ks-plist__head { display: none; }
.ks-plist__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ks-plist__item { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; background: var(--white); border-radius: var(--ks-radius); }
.ks-section:not(.ks-section--tint) .ks-plist__item { background: var(--sky-01); }
.ks-plist__name { margin: 0 0 4px; font-size: 18px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.ks-plist__desc { margin: 0; }
.ks-plist__facts { margin: 0; display: grid; grid-template-columns: 1fr; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.ks-plist__fact { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; }
.ks-plist__fact dt { font-weight: 700; color: var(--navy-soft); }
.ks-plist__fact dd { margin: 0; color: var(--ink); }
.ks-plist__more { margin: 0; }
@media (min-width: 600px) {
  .ks-plist__item { grid-template-columns: 1fr auto; column-gap: 24px; padding: 24px 28px; }
  .ks-plist__main { grid-column: 1 / -1; }
  .ks-plist__facts { grid-column: 1 / -1; grid-template-columns: 1fr 1fr 1.4fr; gap: 16px; }
  .ks-plist__fact { grid-template-columns: 1fr; gap: 2px; }
  .ks-plist__more { grid-column: 1 / -1; justify-self: end; }
}
@media (min-width: 1100px) {
  .ks-plist__head,
  .ks-plist__item { grid-template-columns: minmax(0, 1fr) 9.5em 7.5em 11.5em 13.5em; column-gap: 24px; }
  .ks-plist__head { display: grid; padding: 0 28px 12px; border-bottom: 2px solid var(--ink-heading); margin-bottom: 8px; font-weight: 700; color: var(--navy-soft); }
  .ks-plist__hmain { display: flex; gap: 0 1em; flex-wrap: wrap; }
  .ks-plist__hsub { font-weight: 500; }
  .ks-plist__item { align-items: start; }
  .ks-plist__main,
  .ks-plist__more { grid-column: auto; justify-self: start; }
  .ks-plist__facts { display: contents; }
  .ks-plist__fact { display: block; }
  .ks-plist__fact dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ks-plist__fact dd { padding-top: 2px; }
  .ks-plist__more { padding-top: 2px; }
}

/* ---------- KK-25 体験ページ SCHEDULE：Instagram フィード風の静的グリッド ----------
   LK建設の前例と同じ形（8枚・正方形・PC4列／899px以下2列）。Smash Balloon 差し替え時は .ks-igfeed ごと置き換える。 */
.ks-igfeed { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 32px; }
.ks-ig { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sky-02); }
.ks-ig img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.ks-ig:hover img { opacity: .82; }
.ks-ig:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (min-width: 900px) {
  .ks-igfeed { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}

/* ---------- KK-28 お問い合わせページ：フォームの幅・位置と送信ボタン下の余白 ----------
   原因：form に max-width 720px が掛かり、左寄せのまま（margin 指定なし）だった。本文枠は860px（.subpage__inner 900px − 左右20px）のため、
   フォームの右側に140px の空きができ、中央寄せの送信ボタンもページ中央から左に88pxずれていた。
   来館希望日だけ max-width 260px で他の入力欄と幅が揃っていなかった。
   さらに /contact/ はCTAを出さないため .subpage-body（上余白のみ）の下が0になり、送信ボタンの直下がフッター境界だった。
   対応：フォームを本文枠いっぱい（見出し・リードと同じ左右端）にし、来館希望日も他の欄と同じ幅に揃える。下余白は --space-section。 */
.subpage-body .wpcf7 form { max-width: none; }
.subpage-body .wpcf7 input[type="date"] { max-width: 100%; }
.subpage-body--contact { padding-bottom: var(--space-section); }
/* 送信ボタンの右に CF7 のスピナー（送信中だけ表示）が幅を取り、ボタンがフォーム中央から18px左にずれていたため、スピナーを幅の計算から外す */
.subpage-body--contact .cf7-submit { position: relative; }
.subpage-body--contact .cf7-submit .wpcf7-spinner { position: absolute; }

/* =====================================================================
   PROD-20261006-001（DIR-20261005-001 差し戻しの是正）
   ===================================================================== */
/* FAIL#1 /contact/ 899・768・375 の横スクロール16px
   原因：PROD-20261005-002 で .wpcf7-spinner を position:absolute にしたが位置を指定しておらず、
   送信ボタンの右隣（静的位置）に置かれたまま。899以下はボタンが本文枠いっぱいのため、スピナー24px＋左余白12pxが画面の右外にはみ出していた。
   対応：スピナーをボタンの真下・中央（ボタン下端から12px）に置く。ボタンの中央揃え・スピナーの表示（送信中のみ visible）は CF7 のまま。 */
.subpage-body--contact .cf7-submit .wpcf7-spinner { left: 50%; top: 100%; margin: 12px 0 0 -12px; }

/* FAIL#3 /experience/ PROGRAM LIST「詳しく」リンクの当たり判定（高さ24px）
   対応：リンクを inline-block にして上下に10pxずつ当たり判定を広げ、同じ量の負のマージンで打ち消す（行の高さ・文字位置は不変） */
.ks-plist__more .ks-link { display: inline-block; padding: 10px 0; margin: -10px 0; }

/* FAIL#4 /kidsclub/ REPORT のカード抜粋文 4.37:1（--text-light #6b7b86 on 白）
   /log/・TOP のカードは変えず、/kidsclub/ の REPORT セクション（.ks-section--report）だけ、
   既存の是正例（.creatures の学名 #63737c・実測 CR 4.91・L3900付近）と同じ色にする。新しい色は作っていない。 */
.ks-section--report .subpage-card--log .subpage-card__text { color: #63737c; }

/* =====================================================================
   PROD-20261006-002（2026-10-06 RYO指示 KK-30 / KK-31）
   既存ルールは変更せず、ここに追記のみ。
   ===================================================================== */

/* ---------- KK-30 セクションの境目を楕円の弧に ----------
   直線で色が切り替わっていた3か所（体験→活動記録／活動記録→いきものたち／いきものたち→ご利用案内）に、
   下のセクションの地色そのもの（background: inherit）で作った楕円の弧を、上のセクション側へ盛り上げて重ねる。
   形：楕円の一部（縦半径＝弧の高さの3倍、中心を弧の高さの3倍だけ下に置く）。山の頂点を中央から少しずらし、
       --l（頂点42%）と --r（頂点58%）を交互に置いて、FV下端の波やキッズクラブの写真の波と同じ「うねり」のリズムにする。
   高さ：clamp(20px, 4vw, 60px)＝画面幅の約4%（1440で57.6px／1024で41px／768で30.7px／375で20px）。
   上のセクションの下余白（PC120px／SP72px）の中に収まる高さなので、文字・ボタンには掛からない。
   体験のメモカード（z-index:4）は弧（z-index:1）より手前に出る。 */
.activitylog,
.creatures { position: relative; }
.kk-swell {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: clamp(20px, 4vw, 60px);
  background: inherit;
  pointer-events: none;
  z-index: 1;
}
/* PROD-20261007-013（RYO「中心ズレてね？」→「やって」）：頂点 42% / 58% → どちらも 50%（楕円の大きさ・高さ・色は無変更） */
/* PROD-20261009-004 撤去: .kk-swell--l { clip-path: ellipse(77.76% 300% at 50% 300%); }（体験→活動記録の弧・マークアップも撤去） */
.kk-swell--r { clip-path: ellipse(77.76% 300% at 50% 300%); }

/* ---------- KK-31 TOP ご利用案内・アクセス（2回目の作り直し） ----------
   見出し：従来どおり上・センター（.info__head）。
   本体：左＝施設外観の写真（ABOUT の写真と同じ白フチ＋少し傾けた貼り込み）と地図（PCは写真の右下に重ねる／SPは写真の下）／
         右＝営業時間を大きな数字で→料金（実線の罫）→アクセス→ボタン。
   項目名は小さな字間広めのラベル＋細い罫（フィールドノートの見出し線）。アイコン・点線・白い大カードは使わない。
   PC・TB（900px以上）は2カラム、899px以下は1カラム（写真と地図→情報→ボタン・幅560pxまで）。地図は600px以上で写真の右下に重ね、599px以下は写真の下に置く。 */
.info.kinfo { padding-bottom: var(--space-section); }
.kinfo__inner { max-width: var(--wrap); margin: 0 auto; position: relative; z-index: 2; }
.kinfo__head { margin-bottom: 0; }
.kinfo__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  max-width: 560px;   /* 899px以下は写真と情報の左右端を揃える（TBで写真だけ中央・文字だけ全幅にならないように） */
  margin: 0 auto;
}
.kinfo__visual { position: relative; width: 100%; max-width: 560px; margin: 0 auto; }
.kinfo__photo {
  margin: 0;
  width: 92%;
  padding: 8px;
  background: var(--white);
  box-shadow: 0 10px 28px rgba(14,58,99,.14);
  transform: rotate(-2deg);
}
.kinfo__photo img { display: block; width: 100%; height: auto; aspect-ratio: 920 / 670; object-fit: cover; }
.kinfo__map {
  position: relative;
  margin: -20px 0 0 auto;
  width: 100%;
  padding: 6px;
  background: var(--white);
  box-shadow: 0 10px 28px rgba(14,58,99,.16);
  z-index: 1;
}
.kinfo__map iframe { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; border: 0; filter: saturate(.75); }
.kinfo__list { margin: 0; display: grid; gap: 32px; }
.kinfo__row { margin: 0; }
.kinfo__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-heading);
}
.kinfo__label::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--ink-heading); opacity: .35; }
.kinfo__data { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.kinfo__data p { margin: 0; }
.kinfo__data .kinfo__time {
  margin-bottom: 4px;
  font-size: clamp(34px, 3.2vw, 46px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-heading);
  font-variant-numeric: tabular-nums;
}
.kinfo__note { color: var(--navy); }   /* --navy-soft は --sky-02 上で 4.43:1（AA未達）のため --navy（7:1超）にした */
.kinfo__fees {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 1列の最小幅13em・最大2列（6項目が 3行×2列 で割り切れる） */
  grid-template-columns: repeat(auto-fill, minmax(max(13em, calc((100% - 32px) / 2)), 1fr));
  column-gap: 32px;
}
.kinfo__fees li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.kinfo__price { flex-shrink: 0; white-space: nowrap; font-weight: 700; color: var(--ink); }
.kinfo__cta { margin-top: var(--space-btn-top); justify-content: center; width: 100%; }

/* 600px以上は地図を写真の右下に重ねる（写真86%・地図64%、地図の下端＝この箱の下端） */
@media (min-width: 600px) {
  .kinfo__visual { padding-bottom: 20%; }
  .kinfo__photo { width: 86%; }
  .kinfo__map { position: absolute; right: 0; bottom: 0; margin: 0; width: 64%; }
  .kinfo__map iframe { aspect-ratio: 4 / 3; }
}
@media (min-width: 900px) {
  .kinfo__head { margin-bottom: 16px; }
  .kinfo__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 5.5vw, 96px);
    align-items: start;
    max-width: none;
  }
  .kinfo__visual { max-width: none; margin: 0; padding-top: 8px; }
  .kinfo__cta { width: auto; min-width: 307px; }
}

/* =====================================================================
   PROD-20261006-003（2026-10-06 RYO「ここもそうだけど　なんでそんなにデザインセンスないの？」）
   TOP お問い合わせの作り直し。既存ルール（旧 .contact 系）は変更せず、ここに追記のみ。
   ===================================================================== */
/* 地色：直前のご利用案内（.info）と同じ値・同じ切り替え幅（PC/TB --sky-02 ／ 899px以下 #f9fafb）。
   同じ地色が続くので、上の境目に波・弧・色の段差が出ない（RYO「お問い合わせの上の波の白？消して」を維持）。
   上余白はご利用案内の下余白（120/72px）がそのまま効くので 0、下余白は --space-section。 */
.kcontact {
  position: relative;
  padding: 0 20px var(--space-section);
  background: var(--sky-02);
}
/* 1枚の面：左＝写真（面の高さいっぱい）／右＝文字。ご利用案内の写真・地図と同じ影の付け方。 */
.kcontact__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1120px;
  margin: 0 auto;
  background: var(--white);
  box-shadow: 0 10px 28px rgba(14,58,99,.12);
  overflow: hidden;
}
.kcontact__photo { position: relative; margin: 0; min-width: 0; }
.kcontact__photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 45%;
  /* 写真の下縁（PCは文字側の右縁）を KK-30 の境目と同じ楕円の弧にする */
  clip-path: ellipse(150% 100% at 50% 0%);
}
.kcontact__body { padding: 40px 28px 44px; }
.kcontact .section-label { margin-bottom: 10px; }
.kcontact .kcontact__title { margin-bottom: 24px; }
.kcontact__text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.kcontact .kcontact__btn {
  margin-top: var(--space-btn-top);
  justify-content: center;
  width: 100%;
}
.kcontact .kcontact__btn:focus-visible { outline: 3px solid var(--ink-heading); outline-offset: 3px; }

@media (max-width: 899px) {
  .kcontact { padding: 0 var(--sp-gutter) var(--space-section); background: #f9fafb; }
  .kcontact__card { max-width: 560px; }
}
@media (min-width: 900px) {
  .kcontact__card {
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    min-height: 420px;
  }
  .kcontact__photo img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    object-position: 40% 50%;
    clip-path: ellipse(100% 200% at 0% 50%);
  }
  .kcontact__body {
    align-self: center;
    padding: 56px clamp(40px, 5vw, 72px);
  }
  .kcontact .kcontact__btn { width: auto; min-width: 307px; }
}

/* =====================================================================
   PROD-20261007-001（2026-10-07 RYO「このデザインと全く同じように再現してコーディング」）
   TOP ご利用案内・アクセスを RYO デザイン（デザイン/TOP_ご利用案内アクセス_RYOデザイン_20261007.png）に合わせて作り直し。
   例外：英字ラベル・見出しは RYO 訂正「今のまま中央揃えで」により中央揃え（波線も見出しの中央下）。
   リード文は RYO 追加指示「見出し下のリード文入らない」により入れていない。
   既存ルール（旧 .info / .kinfo / .tinfo 系）は変更せず、ここに追記のみ。数値はデザイン画像（2310px幅＝PC1440相当・1.604倍）から実測。
   ===================================================================== */
.info.kia {
  --kia-navy: #1c3a8c;      /* 項目名・営業時間・料金（デザイン実測 rgb(24-28,52-60,132-140)） */
  --kia-head: #1d3e92;      /* 見出し（実測 rgb(28-32,60-64,140-152)） */
  --kia-label: #3556ad;     /* 英字ラベル（細め・明るめの青） */
  --kia-text: #3b4558;      /* 本文（実測 中心 rgb(60-75,72-90,100-120)） */
  --kia-band: #e4f2fc;      /* 上端の波・アイコン円（実測 rgb(228,242,252)） */
  --kia-rule: #e3eef9;      /* 項目間の罫線 */
  --kia-vline: #c8dbec;     /* 料金の縦罫 */
  --kia-btn: #3458a8;       /* ボタン（実測 rgb(52,88,168)） */
  padding-top: clamp(64px, 6.7vw, 96px);
  padding-bottom: var(--space-section);
  background: #fcfdfe;      /* 地色（実測 rgb(252,253,254)） */
}
/* PROD-20261007-012：上端の水色の波（.kia__wave）と弧（.info.kia > .kk-swell）の指定を撤去（RYO「このセクション間の変な波いらない」・旧CSSは git 30d199c） */
.kia__inner { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; }

/* 見出し：中央揃え（RYO訂正） */
.info.kia .kia__head { margin: 0; text-align: center; }
.info.kia .kia__head .section-label {
  margin: 0 0 14px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.5;
  color: var(--kia-label);
}
.info.kia .kia__head .section-title {
  margin: 0;
  font-size: clamp(28px, 3.5vw, 50px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--kia-head);
}
.kia__squiggle {
  display: block;
  width: 116px;
  height: 10px;
  margin: 14px auto 0;
  fill: none;
  stroke: #6a9ff0;
  stroke-width: 2;
  stroke-linecap: round;
}

/* 本体：1199px以下は1カラム（項目→地図→ボタン） */
.kia__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  max-width: 720px;
  margin: 56px auto 0;
}
.kia__list { margin: 0; }
.kia__row {
  position: relative;
  margin: 0;
  padding: 16px 0 16px 91px;
  min-height: 100px;
  box-sizing: border-box;
  border-top: 1px solid var(--kia-rule);
}
.kia__row:first-child { border-top: 0; }
.kia__icon {
  position: absolute;
  left: 0;
  top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--kia-band);
  color: var(--kia-navy);
}
.kia__icon svg { display: block; width: 34px; height: 34px; }
.kia__label {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--kia-navy);
}
.kia__data {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--kia-text);
}
.kia__data.kia__time {
  font-size: 33px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--kia-navy);
}
.kia__nw { display: inline-block; }
.kia__sep {
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin: 0 22px;
  vertical-align: -.15em;
  background: #8a95a8;
}
.kia__fees {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.kia__fees li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 66px;
  padding: 0 4px;
  text-align: center;
  border-right: 1px solid var(--kia-vline);
}
.kia__fee-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--kia-navy);
}
.kia__fee-name small { display: block; font-size: 12.5px; font-weight: 700; }
.kia__price {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--kia-navy);
  white-space: nowrap;
}
.kia__price small { font-size: 15px; font-weight: 700; margin-left: 1px; }
.kia__fee-note { margin: 18px 0 8px; font-size: 18px; font-weight: 500; line-height: 1.7; color: var(--kia-text); }

.kia__map {
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #e1ebf4;
  box-shadow: 0 2px 10px rgba(28,58,140,.06);
  background: #e8eef3;
}
.kia__map iframe { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; border: 0; }
.info.kia .kia__cta {
  display: flex;
  justify-content: center;
  gap: 30px;
  width: 100%;
  min-height: 77px;
  margin-top: 23px;
  padding: 18px 24px;
  border: 0;
  border-radius: 6px;
  background: var(--kia-btn);
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .2em;
  box-shadow: 0 4px 12px rgba(28,58,140,.16);
}
.info.kia .kia__cta .btn__arrow { letter-spacing: 0; font-size: 22px; }
.info.kia .kia__cta:focus-visible { outline: 3px solid var(--kia-head); outline-offset: 3px; }

/* PC（1200px以上）：デザインどおり 左＝項目（598）｜右＝地図＋ボタン（678） */
@media (min-width: 1200px) {
  .kia__body {
    grid-template-columns: minmax(0, 598fr) minmax(0, 678fr);
    column-gap: 33px;
    align-items: start;
    max-width: 1310px;
  }
  .kia__list { padding-top: 14px; }
}

/* SP（599px以下）：アイコン48px・料金は行の全幅で3列（3＋2）・アクセスは2行 */
@media (max-width: 599px) {
  .info.kia { padding-left: var(--sp-gutter, 30px); padding-right: var(--sp-gutter, 30px); }
  .info.kia .kia__head .section-label { margin-bottom: 8px; font-size: 12px; letter-spacing: .16em; }
  .kia__squiggle { width: 92px; height: 8px; margin-top: 10px; }
  .kia__body { margin-top: 36px; gap: 24px; }
  .kia__row { padding: 14px 0 14px 62px; min-height: 76px; }
  .kia__icon { top: 14px; width: 48px; height: 48px; }
  .kia__icon svg { width: 25px; height: 25px; }
  .kia__label { font-size: 16px; }
  .kia__data { font-size: 16px; }
  .kia__data.kia__time { font-size: 26px; }
  .kia__fees {
    margin: 22px 0 0 -62px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 14px;
  }
  .kia__fees li { min-height: 60px; }
  .kia__fees li:nth-child(3n), .kia__fees li:last-child { border-right: 0; }
  .kia__fee-name { font-size: 14px; }
  .kia__fee-name small { font-size: 12px; }
  .kia__price { font-size: 23px; }
  .kia__price small { font-size: 14px; }
  .kia__fee-note { margin: 14px 0 4px -62px; font-size: 16px; }
  .kia__sep { display: none; }
  .kia__data .kia__nw { display: block; }
  .kia__map iframe { aspect-ratio: 4 / 3; }
  .info.kia .kia__cta { min-height: 62px; margin-top: 16px; font-size: 17px; gap: 20px; }
}

/* =====================================================================
   PROD-20261007-002（2026-10-07 RYO「お問い合わせセクションはこのデザインに」）
   TOP お問い合わせを RYO デザイン（デザイン/TOP_お問い合わせ_RYOデザイン_20261007.png）どおりに作り直し。
   デザインはご利用案内と同じ縮尺（英字ラベルの字高18px・見出しの字高77-78pxが両デザインで一致）＝1.604倍で実測。
   既存ルール（旧 .contact / .kcontact 系）は変更せず、ここに追記のみ。
   両サイドの装飾は RYO 支給素材（素材/装飾_お問い合わせ/）を余白トリム＋2倍サイズに縮小して WebP 書き出ししたもの（絵柄・色は無変更）。
   ===================================================================== */
.kct {
  position: relative;
  overflow: hidden;
  padding: 80px 20px 80px;
  background: var(--sky-01);   /* デザイン実測 rgb(234,245,252)／--sky-01 #eaf4fb */
  text-align: center;
}
.kct__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.kct .kct__label {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.5;
  color: #0a3fa3;
}
.kct .kct__title {
  margin: 0;
  font-size: clamp(28px, 3.5vw, 50px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #1048a8;
}
.kct__text {
  margin: 16px auto 0;
  max-width: 540px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.68;
  letter-spacing: .02em;
  color: #38404a;
}
.kct__nw { display: inline-block; }
.kct .kct__btn {
  display: flex;
  justify-content: center;
  gap: 22px;
  width: 466px;
  max-width: 100%;
  min-height: 69px;
  margin: 32px auto 0;
  padding: 10px 24px;
  border: 0;
  border-radius: 4px;
  background: #0f46a9;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 4px 12px rgba(15,70,169,.14);
}
.kct .kct__btn .btn__arrow { font-size: 24px; font-weight: 500; }
.kct .kct__btn:focus-visible { outline: 3px solid #1048a8; outline-offset: 3px; }

/* 装飾：PC（1100px以上）はデザインどおりの位置・大きさ（中央からの距離で指定） */
.kct__deco { position: absolute; z-index: 0; height: auto; pointer-events: none; }
.kct__deco--wave  { width: 175px; left: calc(50% - 508px); top: 196px; }
.kct__deco--jelly { width: 158px; left: calc(50% + 357px); top: 111px; }

/* TB（768〜1099px）：画面の端に寄せて縮小（本文・ボタンに掛からない） */
@media (max-width: 1099px) {
  .kct__deco--wave  { width: 120px; left: 16px; top: auto; bottom: 64px; }
  .kct__deco--jelly { width: 88px; left: auto; right: 16px; top: 48px; }
}
/* SP（767px以下）：小さくして上の左右の角へ（見出しより外側） */
@media (max-width: 767px) {
  .kct { padding: 64px var(--sp-gutter, 30px) 64px; }
  .kct .kct__label { margin-bottom: 8px; font-size: 13px; }
  .kct__text { margin-top: 16px; font-size: 16px; line-height: 1.8; }
  .kct .kct__btn { width: 100%; min-height: 60px; margin-top: 24px; font-size: 17px; gap: 14px; }
  .kct .kct__btn .btn__arrow { font-size: 18px; }
  .kct__deco--wave  { width: 72px; left: 12px; top: 22px; bottom: auto; }
  .kct__deco--jelly { width: 54px; right: 12px; top: 16px; }
}

/* =====================================================================
   PROD-20261007-003（2026-10-07 RYO「フッターデザイン」）
   全ページ共通フッターを RYO デザイン（デザイン/フッター_RYOデザイン_20261007.webp）どおりに作り直し。
   デザインは PC1440 の全幅（1983px）＝1.377倍で実測。既存ルール（旧 .footer 系）は変更せず、ここに追記のみ。
   ・上端の波線は RYO 支給待ち（KK-38）。届いたら footer.kft の先頭に <img class="kft__wave"> を置けば、
     フッターの上に重なる（下の .kft__wave ルール）。今は波なしで直線。
   ・ロゴは RYO 支給待ち（KK-39）。今は現行 images/logo.png をそのまま表示。
   ===================================================================== */
.kft {
  position: relative;
  padding: 80px 20px 40px;
  background: #0c4ca8;   /* デザイン実測 rgb(12,76,168) */
  color: #fff;
}
.kft__wave {             /* 波線素材の置き場（KK-38・素材待ち。今は要素なし） */
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.kft__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 722px);
  column-gap: 32px;
  align-items: start;
  max-width: 1252px;
  margin: 0 auto;
}
.kft a { color: #fff; }
.kft__brand { min-width: 0; }
.kft__logo { display: inline-block; }
.kft__logo-img { display: block; width: auto; height: 90px; }
.kft__addr {
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .08em;
}
.kft__tel {
  margin: 4px 0 0;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
}
.kft__tel-label { font-size: 23px; letter-spacing: .08em; }
.kft__sns {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.kft__sns a { display: block; width: 34px; height: 34px; transition: opacity .15s ease; }
.kft__sns a:hover { opacity: .75; }
.kft__sns svg { display: block; width: 100%; height: 100%; }
.kft a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.kft__nav {
  display: grid;
  grid-template-columns: minmax(0, 251fr) minmax(0, 262fr) minmax(0, 209fr);
  align-self: start;
  align-items: stretch;
  padding-top: 11px;
}
.kft__col { min-width: 0; padding: 0 16px 0 37px; border-left: 1px solid rgba(255,255,255,.18); }
.kft__col:first-child { padding-left: 0; border-left: 0; }
.kft__col-title {
  position: relative;
  margin: 0 0 18px;
  padding-bottom: 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .06em;
  white-space: nowrap;
}
.kft__col-title::after {   /* 見出し下の短い線（デザイン 38×1px） */
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 1px;
  background: #fff;
}
.kft__col ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.kft__col li { margin: 0; }
.kft__col ul a { display: inline-block; font-size: 17px; font-weight: 500; line-height: 1.5; letter-spacing: .01em; }
.kft__col ul a:hover { text-decoration: underline; text-underline-offset: 4px; }

.kft__bottom {
  grid-column: 1 / -1;
  margin-top: 64px;
  padding-top: 38px;
  border-top: 1px solid rgba(120,175,245,.75);
  text-align: center;
}
.kft__bottom p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: .12em; }

/* TB（1099px以下）：ロゴ・連絡先・SNS を上段、ナビ3列を下段に */
@media (max-width: 1099px) {
  .kft { padding: 64px 30px 36px; }
  .kft__inner { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .kft__nav { margin-top: 48px; padding-top: 0; }
  .kft__col { padding: 0 8px 0 24px; }
  .kft__col-title { font-size: 21px; }
  .kft__col ul a { font-size: 15px; letter-spacing: .04em; }
  .kft__bottom { margin-top: 48px; padding-top: 30px; }
}
/* SP（767px以下）：ナビは縦積み（グループの間を横罫で区切る）・SNSは1行6個 */
@media (max-width: 767px) {
  .kft { padding: 56px var(--sp-gutter, 30px) 32px; }
  .kft__logo-img { height: 76px; }
  .kft__addr { font-size: 15px; letter-spacing: .04em; }
  .kft__tel { font-size: 27px; }
  .kft__tel-label { font-size: 19px; }
  .kft__sns { gap: 20px; margin-top: 24px; }
  .kft__sns a { width: 32px; height: 32px; }
  .kft__nav { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .kft__col { padding: 22px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
  .kft__col:first-child { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); }
  .kft__col-title { margin-bottom: 14px; padding-bottom: 12px; font-size: 19px; }
  .kft__col ul { gap: 8px; }
  .kft__col ul a { font-size: 16px; }
  .kft__bottom { margin-top: 8px; padding-top: 24px; }
  .kft__bottom p { font-size: 13px; letter-spacing: .08em; }
}

/* =====================================================================
   PROD-20261007-004（2026-10-07 RYO「サイト内のボタン／こんな感じの左右マルにしようかな／文字は変えないでね／ボタンの形の話」→「やる」で確定）
   全ページのボタンを左右が半円のピル型にする。変えるのは角の形（border-radius）だけ。
   文字・色・幅・高さ・余白・矢印・リンク先は変えない。.btn 基底（L266 / L4106）は書き換えず、ここに追記のみ。
   対象：PROD-20260924-001 §② で角丸0にしたボタン（L4083〜4093 と同じセレクタ列）＋ 今回の新ボタン（.kia__cta / .kct__btn）。
   .kia__cta（.info.kia .kia__cta 0,3,0 で 6px）・.kct__btn（.kct .kct__btn 0,2,0 で 4px）は元の詳細度に合わせて上書きする。
   対象外（変えない）：.header__nav-cta（枠も地色もない文字リンク）／.creature-zoom（いきもの写真の拡大ボタン＝見た目は写真）／
   .header__burger／タグ・カード・写真・地図・フォーム入力欄・必須/任意バッジ・フッターのSNSアイコン。
   ===================================================================== */
.btn,
.btn--small,
.btn--outline,
.btn--white,
.btn--dark,
.info__cta,
.creatures__btn-sp,
.activitylog__more,
.sp-nav__cta,
.kidsclub .btn--white,
.subpage-body .wpcf7 input[type="submit"],
.info.kia .kia__cta,
.kct .kct__btn { border-radius: 999px; }

/* =====================================================================
   PROD-20261007-005（2026-10-07 RYO「見出しの下に配置して／添付したイメージみたいに」）
   TOP の5見出し（体験プログラム／活動記録／クラゲ公民館のいきものたち／ご利用案内・アクセス／お問い合わせ）の下に
   RYO 支給の波線（素材/装飾_見出し/体験プログラムの青い波線.png → 余白トリム＋縮小 images/deco_heading_wave.webp 240×25）を置く。
   配置イメージの比率：見出しの字高 93px に対し 波線 幅302×高32px、字の下端から波線の上端まで 47px、見出しの中央下。
   → 見出し40px（字高 約35px）換算で 幅116px・字の下端から18px。5見出しとも同じ大きさ・同じ間隔（px固定）。
   見出しの下余白（margin）の中に absolute で置くので、見出しと他の要素の位置は動かない（例外は下の2か所の調整のみ）。
   ===================================================================== */
.kh-wave { position: relative; }
.kh-wave::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(100% + var(--kh-wave-gap, 10px));
  width: 116px;
  height: 12px;
  transform: translateX(-50%);
  background: url("images/deco_heading_wave.webp") center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 767px) {
  .kh-wave::after { width: 84px; height: 9px; }
}
/* 調整1：ご利用案内は CSS の波線（.kia__squiggle 高さ10px＋上余白14px／SP 8px＋10px）を撤去したので、
   同じ高さを見出しブロックの下余白で補い、本体の位置を変えない。 */
.info.kia .kia__head { padding-bottom: 24px; }
@media (max-width: 599px) { .info.kia .kia__head { padding-bottom: 18px; } }
/* 調整2：お問い合わせは見出しと説明文の間が 16px しかなく波線が説明文に重なるため、説明文の上余白を広げる（16px → 36px／SP 16px → 32px）。 */
.kct .kct__text { margin-top: 36px; }
@media (max-width: 767px) { .kct .kct__text { margin-top: 32px; } }

/* =====================================================================
   PROD-20261007-006（2026-10-07 RYO「サイト内の濃い青色統一してる？／あと文字サイズも／なんかバラバラで統一感ないように見える
   ／最終的にTOP全体をみて／色や文字サイズは良い感じに調整して欲しい」）
   TOP（body.home）を1枚のページとして、色と文字サイズ・太さだけを揃える。レイアウト・要素・文言・揃え・ボタン形・波線・装飾は無変更。
   スコープ：TOP の各セクションは body.home 配下にだけ適用（下層ページへ波及させない）。
            全ページ共通のフッター（.kft）は TOP だけ変えると下層と食い違うため、フッターのみ全ページに適用（下層9ページの前後比較あり）。
            ヘッダー（共通部品・FVより上）は対象外。既存トークン（--navy / --ink-heading 等）は書き換えず、新しいトークンを追加。
   ===================================================================== */
:root {
  /* 濃い青は3色だけ（役割で使い分け） */
  --kk-blue: #0c44a2;       /* メイン：見出し・英字ラベル・小見出し・ボタン・アイコン・強調数字・フッター地色（白に 8.88:1） */
  --kk-blue-deep: #052a63;  /* 手書き風の文字だけ（FV見出し・キッズクラブの手書き） */
  --kk-blue-soft: #3d5f9e;  /* 補助：日付・カードの英字ラベル（最も濃い水色地 #d7e9f7 でも 5.07:1） */
  /* 文字色は2色 */
  --kk-text: #33404a;       /* 本文・リード（白に 10.64:1） */
  --kk-text-sub: #56656f;   /* 補足（抜粋文・注記）（#d7e9f7 でも 4.84:1） */
  /* 文字サイズのスケール（PC／899px以下） */
  --kk-fs-label: 16px;  --kk-fs-h2: 40px;  --kk-fs-h3: 20px;  --kk-fs-lead: 18px;  --kk-fs-body: 16px;  --kk-fs-note: 14px;  --kk-fs-btn: 16px;
  --kk-fw-h2: 700;
}
@media (max-width: 899px) {
  :root { --kk-fs-label: 13px; --kk-fs-h2: 28px; --kk-fs-h3: 18px; --kk-fs-lead: 16px; --kk-fs-body: 16px; --kk-fs-note: 13px; --kk-fs-btn: 16px; }
}

/* ---- 英字ラベル・セクション見出し（7見出しすべて同じサイズ・太さ・色） ---- */
body.home .section-label,
body.home .info.kia .kia__head .section-label,
body.home .kct .kct__label {
  font-size: var(--kk-fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--kk-blue);
}
body.home .section-label--onphoto { color: var(--kk-blue); }
body.home .section-title,
body.home .info.kia .kia__head .section-title,
body.home .kct .kct__title {
  font-size: var(--kk-fs-h2);
  font-weight: var(--kk-fw-h2);
  letter-spacing: .02em;
  color: var(--kk-blue);
}
body.home .section-title .hand,
body.home .hero__headline-l1 { color: var(--kk-blue-deep); }

/* ---- 小見出し（h3）・項目名 ---- */
body.home .experience .exp-card__title,
body.home .activitylog .log-card__title {
  font-size: var(--kk-fs-h3);
  font-weight: 700;
  color: var(--kk-blue);
}
body.home .info.kia .kia__label { font-size: var(--kk-fs-lead); color: var(--kk-blue); }
body.home .info.kia .kia__icon,
body.home .info.kia .kia__data.kia__time,
body.home .info.kia .kia__fee-name,
body.home .info.kia .kia__price { color: var(--kk-blue); }

/* ---- 補助の青（日付・カードの英字ラベル・タグ） ---- */
body.home .experience .exp-card__label,
body.home .activitylog .log-card__date { color: var(--kk-blue-soft); }
body.home .experience .exp-card__label { font-size: 12px; }
body.home .activitylog .log-card__tag:not(.log-card__tag--craft) { color: var(--kk-blue); }

/* ---- リード（見出し直下の説明文）・本文・補足 ---- */
body.home .activitylog .activitylog__lead,
body.home .creatures .creatures__lead,
body.home .kct .kct__text {
  font-size: var(--kk-fs-lead);
  font-weight: 400;
  color: var(--kk-text);
}
body.home .about .about__body,
body.home .kidsclub .kidsclub__body,
body.home .experience .exp-card__text,
body.home .info.kia .kia__data:not(.kia__time) {
  font-size: var(--kk-fs-body);
  font-weight: 400;
  color: var(--kk-text);
}
body.home .info.kia .kia__data:not(.kia__time) { font-size: var(--kk-fs-lead); }
body.home .info.kia .kia__fee-note { font-size: var(--kk-fs-body); font-weight: 400; color: var(--kk-text); }
body.home .activitylog .log-card__excerpt { font-size: var(--kk-fs-body); color: var(--kk-text-sub); }

/* ---- ボタン（文字は全ボタン 16px／700・地色はメインの青） ---- */
body.home .btn,
body.home .info.kia .kia__cta,
body.home .kct .kct__btn,
body.home .experience .btn--small {
  font-size: var(--kk-fs-btn);
  font-weight: 700;
}
body.home .info.kia .kia__cta,
body.home .kct .kct__btn { background: var(--kk-blue); }
body.home .info.kia .kia__cta { letter-spacing: .12em; }
body.home .info.kia .kia__cta .btn__arrow,
body.home .kct .kct__btn .btn__arrow { font-size: inherit; font-weight: inherit; }
@media (max-width: 899px) {
  /* SPの体験カードの「詳しく見る」（枠なしの文字リンク）は SP 専用の別の濃紺だったのでメインの青に */
  body.home .experience .exp-card__memo .btn--small { color: var(--kk-blue); }
}

/* ---- フッター（全ページ共通）：地色をメインの青に・文字サイズをスケールに合わせる ---- */
.kft { background: var(--kk-blue); }
.kft__sns svg [fill="#0c4ca8"] { fill: var(--kk-blue); }
.kft__col-title { font-size: var(--kk-fs-h3); }
.kft__addr,
.kft__col ul a { font-size: var(--kk-fs-body); }
.kft__tel { font-size: 32px; }
.kft__tel-label { font-size: 22px; }
.kft__bottom p { font-size: var(--kk-fs-note); }
@media (max-width: 767px) {
  .kft__tel { font-size: 27px; }
  .kft__tel-label { font-size: 19px; }
}
/* 小見出しの語中改行対策（1024〜900px で投稿タイトル「シーグラスでフォトフレームづく／り」と1文字だけ次行に落ちていた。変更前の21pxでも「…づ／くり」で発生していた）
   文節で改行し、行の長さを揃える。対応していないブラウザでは従来どおりの改行になるだけ。 */
body.home .activitylog .log-card__title,
body.home .experience .exp-card__title { word-break: auto-phrase; text-wrap: balance; }

/* =====================================================================
   PROD-20261007-008（DIR-20261007-001 差し戻し F1）お問い合わせ説明文の改行位置をデザインどおりに
   デザイン：「見学のご相談、プログラムのお申し込みなど、／どうぞお気軽にお問い合わせください。」
   PROD-006 で説明文を 18px にした結果、1行目に「どうぞお気軽に」まで入っていた。
   説明文を flex の折り返しにし、2つ目と3つ目の区切り（「など、」の後）に幅100%の空の要素（::after・文字なし）を挟んで必ず改行する。
   文言・文字サイズ・色は変えない。狭い幅（375等）は従来どおり「見学のご相談、／プログラムのお申し込みなど、／どうぞお気軽にお問い合わせください。」
   ===================================================================== */
.kct .kct__text { display: flex; flex-wrap: wrap; justify-content: center; }
.kct .kct__text .kct__nw:nth-child(-n+2) { order: 1; }
.kct .kct__text::after { content: ''; flex-basis: 100%; height: 0; order: 2; }
.kct .kct__text .kct__nw:nth-child(n+3) { order: 3; }

/* =====================================================================
   PROD-20261007-009（2026-10-07 RYO「見出しの下の線もっと大きく／見出しとの距離もっと開けて／あと線の下の余白ももっと大きく」）
   TOP 5見出しの波線（.kh-wave）を、見出しの下余白に重ねる absolute から、見出しの中のブロック（実際に高さを持つ）に変更し、
   大きさ・見出しとの距離・下の余白を5か所とも同じ値にする。素材の絵柄・色、見出しの文字・サイズ・色は無変更。
   波線：PC/TB 116×12 → 180×19px ／ SP（767px以下）84×9 → 132×14px（images/deco_heading_wave.webp を 400×42 に書き出し直し＝表示の2倍以上）
   見出しの行ボックス下端→波線：10px → 24px（SP 18px）
   波線→次の要素：PC/TB 56px・SP 40px（変更前は 14〜20px／ご利用案内のみ58px・SP35px とばらばら）
   ===================================================================== */
body.home h2.kh-wave::after {
  position: static;
  display: block;
  width: 180px;
  height: 19px;
  margin: 24px auto 0;
  transform: none;
}
body.home h2.kh-wave,
body.home .info.kia .kia__head .section-title.kh-wave,
body.home .kct .kct__title.kh-wave { margin-bottom: 56px; }
/* 次の要素側の上余白は0にして、波線→次の要素を見出しの下余白（56/40px）だけにそろえる */
body.home .activitylog .activitylog__lead,
body.home .creatures .creatures__lead { margin-top: 0; }
body.home .info.kia .kia__head { padding-bottom: 0; }
body.home .info.kia .kia__body { margin-top: 0; }
body.home .kct .kct__text { margin-top: 0; }
@media (max-width: 767px) {
  body.home h2.kh-wave::after { width: 132px; height: 14px; margin-top: 18px; }
  body.home h2.kh-wave,
  body.home .info.kia .kia__head .section-title.kh-wave,
  body.home .kct .kct__title.kh-wave { margin-bottom: 40px; }
}

/* =====================================================================
   PROD-20261007-010（2026-10-07 RYO「線大きすぎ／最初と修正後の中間くらいの大きさに」）
   波線の大きさだけを PROD-005（116 / SP 84）と PROD-009（180 / SP 132）の中間に。高さは素材の縦横比（400:42）のまま。
   見出し→波線（24 / SP 18px）と波線→次の要素（56 / SP 40px）は PROD-009 のまま。
   ===================================================================== */
body.home h2.kh-wave::after { width: 148px; height: auto; aspect-ratio: 400 / 42; }
@media (max-width: 767px) {
  body.home h2.kh-wave::after { width: 108px; height: auto; }
}

/* =====================================================================
   PROD-20261007-011（2026-10-07 RYO「お問い合わせの線の下の余白ちょっと狭くして／ボタンの上の余白ちょっと大きくして／左右のそう濁線とクラゲ少し下げて」）
   TOP お問い合わせだけ。文言・文字サイズ・色・ボタン寸法・説明文の改行は無変更。
   波線→説明文：56 → 36px（SP 40 → 28px）／説明文→ボタン：32 → 48px（SP 24 → 36px）
   装飾：PC 波線 top 196 → 236px・クラゲ top 111 → 151px（+40px）／TB（768〜1099）波線 bottom 64 → 40px・クラゲ top 48 → 72px（+24px）／SP 波線 top 22 → 34px・クラゲ top 16 → 28px（+12px）
   ===================================================================== */
body.home .kct .kct__title.kh-wave { margin-bottom: 36px; }
body.home .kct .kct__btn { margin-top: 48px; }
.kct__deco--wave  { top: 236px; }
.kct__deco--jelly { top: 151px; }
@media (max-width: 1099px) {
  .kct__deco--wave  { top: auto; bottom: 40px; }
  .kct__deco--jelly { top: 72px; }
}
@media (max-width: 767px) {
  body.home .kct .kct__title.kh-wave { margin-bottom: 28px; }
  body.home .kct .kct__btn { margin-top: 36px; }
  .kct__deco--wave  { top: 34px; bottom: auto; }
  .kct__deco--jelly { top: 28px; }
}

/* =====================================================================
   PROD-20261009-001（2026-10-09 RYO「固定ページヘッダーいつものサブスクの形で／写真背景に文字／わかるよね？」）
   下層の固定ページ8枚のページヘッダーを「写真を背景に敷いた帯＋英字ラベル＋日本語タイトル（＋リード）」にする。
   マークアップは template-parts/subpage-hero.php の .subpage-hero--photo 側（写真が割り当たるページだけ）。
   404 / 投稿一覧（index.php）/ page.php は従来の .subpage-hero のまま（このブロックは --photo にしか当たらない）。

   「いつもの形」＝他のサブスクHPの下層ヘッダーの共通点（LK建設・開道・FORGE探偵事務所・手品家・万事屋一心を比較）：
     写真は <img> を object-fit:cover で全幅に敷く／その上に白文字で英字ラベル→日本語タイトル／
     PCの帯の高さ 380px 前後・SP 240px 前後／パンくずは帯の外（LK・FORGE のみ）
   くにみ側で決めたこと：
     ・ヘッダーが PC は透明（紺文字）なので、帯はヘッダーの下（PC 120px／SP 84px）から始める
       （写真をヘッダーの裏まで伸ばすとナビの紺文字が写真に乗って読めなくなる）
     ・文字は左寄せ（従来の .subpage-hero と同じ。KK-01 のセンター揃え判断には踏み込まない）
     ・覆いは「文字が乗る範囲だけ」濃くする（brain preferences/shashin-overlay.md）。
       PC/TB は左だけ濃い横グラデ、SP は文字を帯の下に置いて下だけ濃い縦グラデ。
       写真自体の opacity は落とさない（二重掛けしない）。覆いの色は TOP の濃い青 --kk-blue-deep（#052a63）
     ・文字サイズ・太さは PROD-20261007-006 の統一値（ラベル 16/13px・見出し 40/28px・700）。色は白
     ・SP はタイトルが1行に収まるよう 13文字が入る大きさまでだけ縮める（20〜28px）。語中改行させない
   既存CSSは1行も書き換えていない（このブロックの追記のみ）。
   ===================================================================== */
.subpage-hero.subpage-hero--photo {
  padding: 120px 0 0;           /* PCヘッダー総高（18+84+18）。帯はこの下から */
  background: var(--white);
}
.subpage-hero--photo .subpage-hero__band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 380px;
  overflow: hidden;
  isolation: isolate;
  background: var(--kk-blue-deep); /* 画像が読めないときの地色 */
}
.subpage-hero--photo .subpage-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--kk-hero-pos, center 50%);
  z-index: 0;
}
/* 覆い：左（文字が乗る範囲）だけ濃く、右は写真をそのまま見せる。
   px 指定なので、幅が変わっても「文字の範囲が濃い」関係は崩れない（1440 で右側約3割は覆い0） */
.subpage-hero--photo .subpage-hero__band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(5, 42, 99, .72) 0,
    rgba(5, 42, 99, .62) 640px,
    rgba(5, 42, 99, 0) 1060px);
  pointer-events: none;
}
.subpage-hero--photo .subpage-hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px 40px;
  color: var(--white);
}
.subpage-hero--photo .section-label {
  font-size: var(--kk-fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--white);
  margin-bottom: 12px;
}
.subpage-hero--photo .section-title {
  font-size: var(--kk-fs-h2);
  font-weight: var(--kk-fw-h2);
  letter-spacing: .02em;
  line-height: 1.35;
  color: var(--white);
  margin: 0;
}
.subpage-hero--photo .subpage__lead {
  max-width: 42em;              /* PCで各ページのリードが1行に収まる幅（最長39文字） */
  margin-top: 18px;
  font-size: var(--kk-fs-body);
  font-weight: 500;
  line-height: 1.8;
  color: var(--white);
  word-break: auto-phrase;       /* 折り返すときは文節で（対応ブラウザのみ・非対応は従来どおり） */
}
.subpage-hero--photo .subpage__lead + .subpage__lead { margin-top: 2px; }

/* 写真ごとの切り出し位置（PC/TB）。文字は左なので、主役（顔・作品・生きもの）が右〜中央に残る位置 */
.subpage-hero--about       { --kk-hero-pos: center 32%; }
.subpage-hero--kidsclub    { --kk-hero-pos: center 18%; }
.subpage-hero--experience  { --kk-hero-pos: center 52%; }
.subpage-hero--craft       { --kk-hero-pos: center 50%; }
.subpage-hero--observation { --kk-hero-pos: center 38%; }
.subpage-hero--log         { --kk-hero-pos: center 50%; }
.subpage-hero--creatures   { --kk-hero-pos: center 45%; }
.subpage-hero--contact     { --kk-hero-pos: center 8%; }

@media (min-width: 900px) and (max-width: 1023px) {
  .subpage-hero--photo .subpage-hero__band { min-height: 340px; }
}

/* SP・TB縦（899px以下）：ヘッダーは fixed＋白（84px）。文字は帯の下に置き、下だけ濃くする */
@media (max-width: 899px) {
  .subpage-hero.subpage-hero--photo {
    padding-top: 84px;
    background: var(--white);
  }
  .subpage-hero--photo .subpage-hero__band {
    align-items: flex-end;
    min-height: 320px;
  }
  .subpage-hero--photo .subpage-hero__band::after {
    /* 下から文字の範囲（約220px）までを濃く、その上は写真をそのまま見せる */
    background: linear-gradient(0deg,
      rgba(5, 42, 99, .78) 0,
      rgba(5, 42, 99, .64) 220px,
      rgba(5, 42, 99, 0) 310px);
  }
  .subpage-hero--photo .subpage-hero__body {
    padding: 132px 20px 32px;
  }
  .subpage-hero--photo .section-label { margin-bottom: 8px; }
  /* 「くにみクラゲ公民館について」「クラゲ公民館のいきものたち」（13文字）が1行に入る大きさまでだけ縮める */
  .subpage-hero--photo .section-title {
    font-size: clamp(20px, calc((100vw - 40px) / 13.6), var(--kk-fs-h2));
  }
  .subpage-hero--photo .subpage__lead { margin-top: 12px; }
}

/* =====================================================================
   PROD-20261009-002（2026-10-09 RYO「exp-1.png／exp-2.png／くにみクラゲのフォルダに入れた／それを使ってTOPの体験プログラムを添付したデザインにして欲しい
   ／注意点として背景色やクラゲ、魚などの装飾はいらない」）
   デザイン：デザイン/TOP_体験プログラム_RYOデザイン_20261009.png
   構成：見出し（既存 .experience__head・波線は PROD-20261007-010 のまま）→ リード文2行 → 白いカード2枚
         （写真＋波形の下端／英字ラベル／カード見出し／手書き風キャッチ＋下線／説明文／ピル型ボタン）。
   入れていないもの：背景の水色の地・波、クラゲ・魚・泡、カード内の貝殻・ヒトデ・虫めがねのイラスト。セクションの地は白のまま。
   写真：images/exp_card_craft.jpg / exp_card_obs.jpg（792×448）。exp-1.png / exp-2.png の写真部分を「波形の下端」ごと切り出したもの
         （下端の波はデザインと同じ形＝支給画像の波をそのまま使用。波の下の白地に焼き込まれていた英字ラベルは白で塗って消した）。
   旧マークアップ用のCSS（.experience__grid / .exp-photo / .exp-card 系）は削除せず未使用で残している。
   カラム：900px以上は2枚横並び／899px以下は1列（最大560px・中央）。
   ===================================================================== */
body.home .experience.kxp { padding-bottom: var(--space-section); background: var(--white); }

/* リード文（見出し下の波線→リード文は h2.kh-wave の下余白 56/40px のまま） */
body.home .kxp .kxp__lead {
  max-width: var(--wrap);
  margin: 0 auto 56px;
  padding: 0 20px;
  font-size: var(--kk-fs-lead);
  line-height: 2;
  letter-spacing: .06em;
  color: var(--kk-text);
  text-align: center;
  word-break: auto-phrase;
}

/* カード2枚 */
body.home .kxp .kxp__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  max-width: 1120px;   /* 内側 1080px＝カード 520px×2＋間 40px（デザイン 1440 換算のカード幅 約520px） */
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
body.home .kxp .kxp__card {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(14, 58, 99, .09), 0 1px 4px rgba(14, 58, 99, .05);
}
body.home .kxp .kxp__photo { margin: 0; line-height: 0; }
body.home .kxp .kxp__photo img { display: block; width: 100%; height: auto; aspect-ratio: 792 / 448; }
body.home .kxp .kxp__body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  margin-top: -2%;      /* 画像下端の白地（波の下）に英字ラベルを少し掛ける＝デザインと同じ位置関係 */
  padding: 0 32px 36px;
}
body.home .kxp .kxp__label {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .16em;
  color: var(--kk-blue-soft);
}
body.home .kxp .kxp__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--kk-blue);
}
/* 手書き風キャッチ（サイトで使用中の Yomogi）＋手描き風の下線（CSS の SVG・画像生成なし） */
body.home .kxp .kxp__catch {
  position: relative;
  margin: 6px 0 20px;
  padding: 0 0 14px 10px;
  font-family: var(--font-hand);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .06em;
  color: #2a62bf;
}
body.home .kxp .kxp__catch::after {
  content: '';
  position: absolute;
  left: 0;
  right: -64px;   /* デザインどおり下線は文字の終わりより右まで伸ばす */
  bottom: 0;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9.5 C 50 6.5 110 4.5 170 4 S 260 2.6 298 2' fill='none' stroke='%237fb0e6' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}
body.home .kxp .kxp__text {
  margin: 0 0 32px;
  font-size: var(--kk-fs-body);
  line-height: 2;
  letter-spacing: .04em;
  color: var(--kk-text);
  word-break: auto-phrase;
}
body.home .kxp .kxp__btn {
  margin-top: auto;
  min-width: 307px;      /* TOPの他ボタンと同じ横幅（PROD-20260924-001 ④） */
  justify-content: center;
}

/* TB（900〜1099px）：カードが狭くなる分、間と内側の余白だけ詰める */
@media (min-width: 900px) and (max-width: 1099px) {
  body.home .kxp .kxp__grid { gap: 24px; }
  body.home .kxp .kxp__body { padding: 0 24px 32px; }
  body.home .kxp .kxp__btn { min-width: 0; width: 100%; max-width: 307px; }
}

/* 899px以下：1列に縦積み */
@media (max-width: 899px) {
  body.home .kxp .kxp__lead { padding: 0 var(--sp-gutter); }
  body.home .kxp .kxp__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    max-width: calc(560px + var(--sp-gutter) * 2);
    padding: 0 var(--sp-gutter);
  }
  body.home .kxp .kxp__body { padding: 0 24px 28px; }
  body.home .kxp .kxp__title { font-size: 24px; }
  body.home .kxp .kxp__catch { font-size: 19px; margin-bottom: 18px; }
  body.home .kxp .kxp__text { margin-bottom: 24px; }
  body.home .kxp .kxp__btn { min-width: 0; width: 100%; }   /* RYO「スマホは100％」（PROD-20260924-001 ④） */
}
/* リード文→カードは見出しの波線→次の要素と同じ 56px／767px以下 40px（波線と同じ切り替え幅） */
@media (max-width: 767px) {
  body.home .kxp .kxp__lead { margin-bottom: 40px; }
}
@media (max-width: 479px) {
  body.home .kxp .kxp__body { padding: 0 20px 24px; }
  body.home .kxp .kxp__catch::after { right: -16px; }   /* カードの内側に収める */
}

/* =====================================================================
   PROD-20261009-003（2026-10-09 RYO「画像フォルダにおいたって言ったじゃん」「カード部分は全部画像だよ」）
   体験プログラムのカード2枚を exp-1.png / exp-2.png の完成画像（images/exp-1.webp・exp-2.webp 800×915）そのものに。
   画像に角丸・白フチが入っているので、HTML側では白カード・影・角丸を付けない。画像全体がリンク。
   見出し・英字ラベル・波線・リード文（PROD-20261009-002）は無変更。PROD-002 のカード用CSS（.kxp__card 系）は未使用のまま残置。
   2枚横並び：900px以上（最大 520px×2）／899px以下：縦積み（最大 520px・中央）。表示は実寸 800px 以下。
   ===================================================================== */
body.home .kxp .kxp__grid--img { max-width: 1120px; }
body.home .kxp .kxp__imgcard {
  display: block;
  max-width: 800px;
  border-radius: 16px;   /* フォーカス枠の形を画像の角丸に合わせるためだけ（背景・影なし） */
  line-height: 0;
}
body.home .kxp .kxp__imgcard img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 915; }
body.home .kxp .kxp__imgcard:focus-visible { outline: 3px solid var(--kk-blue); outline-offset: 4px; }
@media (max-width: 899px) {
  body.home .kxp .kxp__grid--img { max-width: calc(520px + var(--sp-gutter) * 2); }
}

/* =====================================================================
   PROD-20261009-004（2026-10-09 RYO「活動記録セクション／activitylogか／padding上狭くして下広げて／バランス悪いよ
   ／あと体験プログラムの背景も同じ色に／だから活動記録の上の楕円いらんわ」）TOPのみ
   1. 体験プログラムの地色を活動記録と同じに（PC/TB：--sky-01 #eaf4fb ／ 899px以下：#f9f9fa ＝活動記録の既存の値をそのまま）
   2. 体験→活動記録の弧（.kk-swell--l）はマークアップごと撤去（活動記録→いきものたちの弧 .kk-swell--r は無変更）
   3. 活動記録の padding：PC/TB 上180→24・下120→180 ／ 899px以下 上72→16・下72→104
      体験と地色がつながるので、カード下端→「ACTIVITY LOG」は 体験の下余白＋活動記録の上余白（PC 120+24=144 ／ SP 72+16=88）。
      下は いきものたちの弧（高さ clamp(20px,4vw,60px)）が下余白に重なるので、その分を見込んで広めに取った。
   ===================================================================== */
body.home .experience.kxp { background: var(--sky-01); }
body.home .activitylog { padding-top: 24px; padding-bottom: var(--space-section-lg); }
@media (max-width: 899px) {
  body.home .experience.kxp { background: #f9f9fa; }
  body.home .activitylog { padding-top: 16px; padding-bottom: 104px; }
}

/* =====================================================================
   PROD-20261009-005（2026-10-09 RYO「カードにシャドウつけろよ」）
   体験プログラムのカード画像（exp-1/exp-2.webp・角が透明の角丸）に影。box-shadow だと四角い影になるので
   filter: drop-shadow で画像の透明部分に沿わせる（角丸の形の影）。リンク（a）ではなく img に掛けるのでフォーカス枠は無変更。
   強さ：活動記録の写真（box-shadow 0 3px 10px rgba(0,0,0,.1)）に合わせた柔らかめ。カードが大きい分だけ少し広げ、色はサイトの影の色（rgba(14,58,99,…)）。
   ===================================================================== */
body.home .kxp .kxp__imgcard img {
  filter: drop-shadow(0 8px 16px rgba(14, 58, 99, .12)) drop-shadow(0 2px 4px rgba(14, 58, 99, .06));
}
@media (max-width: 899px) {
  body.home .kxp .kxp__imgcard img {
    filter: drop-shadow(0 6px 12px rgba(14, 58, 99, .12)) drop-shadow(0 1px 3px rgba(14, 58, 99, .06));
  }
}

/* =====================================================================
   PROD-20261009-006（2026-10-09 RYO「本文の文字の太さ／font-weight: 500;に／font-weight: 500;がこのサイト内で一番細い／これ以下の文字がないように」）
   サイト全体で文字の太さの最小を 500 に。500 より太いもの（600/700/900）は変えない。
   ・基準：body を 500（指定のない要素はここから継承）。フォーム部品は継承しないので個別に 500。
   ・個別に 400 が指定されていたセレクタ（本番12ページ×1440/375 の走査で 400 と実測されたもの全数）を 500 で上書き。
     既存ルールの詳細度がまちまち（最大 0,3,1）なので、確実に効かせるため !important を使う。対象は走査で 400 だった本文系のクラスだけ。
   ・手書きの Yomogi（太さ400しか無い）の要素は対象外：.hero__headline-l1（FV見出し）／PCのキッズクラブ「海の研究クラブ／探検隊」(.hand)。
     SP（899px以下）のキッズクラブ .hand はゴシック（Zen Kaku Gothic New）で400だったので、こちらは 500 にする。
   ===================================================================== */
body { font-weight: 500; }
input, textarea, select, button { font-weight: 500; }
.ks-dl__row dd, .ks-text, .ks-text > p, .ks-plist__fact dd, .ks-step__text, .creature-zoom,
.ks-faq__a, .ks-faq__a > span:not(.ks-faq__mark), .creature-card__latin, .creature-feature__latin, .ks-timeline__what,
.creature-card__caption, .ks-taglist > li, .subpage__lead, .ks-card__text, .ks-plist__desc, .ks-works__mat,
.ks-plist__more .ks-link, .kia__nw, .kia__fee-note, .subpage-card__label, .subpage-card__text, .ks-bullets > li, .header__burger,
.ks-day__text, .kct__nw, .ks-table td, .ks-flow__text, .ks-process__text, .log-card__date, .log-card__excerpt,
.log-card__tag, .ks-block > p, .ks-box > p, .ks-lead-sm, .ks-note, .ks-after-table, .about__body, .kidsclub__body,
.creatures__lead, .kxp__lead, .activitylog__lead, .cf7-note, .subpage__text > p,
.wpcf7-form-control:not([type="submit"]) { font-weight: 500 !important; }
@media (max-width: 899px) {
  .kidsclub .section-title--onphoto .hand { font-weight: 500 !important; }
}

/* =====================================================================
   PROD-20261009-007（2026-10-09 RYO「体験プログラムのカード／ボタンみたいにホバー時浮き上がるように／活動記録も同様」）
   サイト内のボタンのホバー（style.css L280-281 の .btn）と同じ値：
     transform: translateY(-2px) ／ 影 0 6px 16px rgba(28,74,115,.14) ／ transition .15s ease
   ・体験カード（a.kxp__imgcard）：a を浮かせ、影は img の drop-shadow（PROD-005）にボタンと同じ影を1枚足して強める（角丸に沿う）
   ・活動記録のカード（a.log-card__link＝カード全体がリンク）：a を浮かせ、写真（.log-card__img）の影をボタンのホバーと同じ影に
   ・:focus-visible でも同じ。ホバーは (hover: hover) の端末だけ（タッチ端末で浮いたまま残らない）。prefers-reduced-motion では動かさない（影の変化のみ）
   ・「クラゲ公民館のいきものたち」の写真5枚は <a> ではなく拡大表示用の <button>（.creature-zoom）なので、指示どおり付けていない
   ===================================================================== */
body.home .kxp .kxp__imgcard,
body.home .activitylog .log-card__link { transition: transform .15s ease; }
body.home .kxp .kxp__imgcard img { transition: filter .15s ease; }
body.home .activitylog .log-card__img { transition: box-shadow .15s ease; }
body.home .kxp .kxp__imgcard:focus-visible,
body.home .activitylog .log-card__link:focus-visible { transform: translateY(-2px); }
body.home .kxp .kxp__imgcard:focus-visible img {
  filter: drop-shadow(0 8px 16px rgba(14, 58, 99, .12)) drop-shadow(0 6px 16px rgba(28, 74, 115, .14));
}
body.home .activitylog .log-card__link:focus-visible .log-card__img { box-shadow: 0 6px 16px rgba(28, 74, 115, .14); }
@media (hover: hover) {
  body.home .kxp .kxp__imgcard:hover,
  body.home .activitylog .log-card__link:hover { transform: translateY(-2px); }
  body.home .kxp .kxp__imgcard:hover img {
    filter: drop-shadow(0 8px 16px rgba(14, 58, 99, .12)) drop-shadow(0 6px 16px rgba(28, 74, 115, .14));
  }
  body.home .activitylog .log-card__link:hover .log-card__img { box-shadow: 0 6px 16px rgba(28, 74, 115, .14); }
}
@media (prefers-reduced-motion: reduce) {
  body.home .kxp .kxp__imgcard,
  body.home .activitylog .log-card__link { transition: none; transform: none !important; }
}

/* =====================================================================
   PROD-20261009-008（2026-10-09 RYO「キッズクラブの写真差し替え／フォルダに／KIDS-CLUB.jpg／と言う名前で入れた」）
   写真：images/kidsclub_photo.jpg（＝KIDS-CLUB.jpg 1908×814 をそのままコピー・無加工）。上下の波の clip-path はそのまま（→ PROD-20261009-014 で撤去）。
   PC/TB（900px以上）：cover・left center（写真の左＝空と海に文字が乗る。人物は右側）。暗幕なし。
   899px以下：文字が画面幅いっぱいに並ぶため、cover だと子どもが必ず文字の裏に入る。そこで写真をセクションの下端に
     横幅基準で置き（人物のいる右側を表示）、写真の上端だけを地色（--sky-01）へ透明にぼかしてつなぐ。文字は地色の上。
     その分セクションの高さだけ伸ばす（パネルの下余白を写真の高さに合わせる）。写真自体は暗くしない・透明度も落とさない。
   旧 SP 用素材 temp_kidsclub_photo_sp.png（L2302 の !important 指定）はここで上書き。ファイルは削除していない。
   ===================================================================== */
@media (min-width: 900px) {
  /* 900〜1439px は写真の高さ基準になり左右が余る。左寄せ（left）だと右端の子どもの顔が切れ、右へ寄せすぎると左端の大人が本文に掛かるため 18% */
  .kidsclub__photo { background-position: 18% center !important; }
}
@media (max-width: 899px) {
  .kidsclub { --kk-kids-h: 300px; }
  .kidsclub__photo {
    background-image: url('images/kidsclub_photo.jpg') !important;
    background-size: auto var(--kk-kids-h) !important;
    background-position: right bottom !important;
    background-repeat: no-repeat !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(100% - var(--kk-kids-h)), #000 calc(100% - var(--kk-kids-h) + 72px));
            mask-image: linear-gradient(to bottom, transparent calc(100% - var(--kk-kids-h)), #000 calc(100% - var(--kk-kids-h) + 72px));
  }
  /* 写真の中の子どもは写真の上から約29%より下（帽子の先 y≈240/814）。文字の最下端（ボタン）から 16px 空けて子どもが始まるよう、
     パネルの下余白＝写真の高さ×0.71＋16px */
  .kidsclub__panel { padding-bottom: calc(var(--kk-kids-h) * .71 + 16px) !important; }
}
@media (min-width: 600px) and (max-width: 899px) {
  /* 600〜899px は写真を画面幅いっぱい（横幅基準）に */
  .kidsclub { --kk-kids-h: calc(100vw * 814 / 1908); }
}

/* =====================================================================
   PROD-20261009-009（2026-10-09 RYO「なんでスマホの時背景色変わってるの？／薄い青のところスマホだとグレーになってるけど」）
   TOP の 1440 / 375 実測で PC と SP の地色が違ったのは 体験（#eaf4fb → SP #f9f9fa）と 活動記録（同）の2つだけ
   （ご利用案内 #fcfdfe・お問い合わせ #eaf4fb・キッズクラブ #eaf4fb は PC=SP）。899px以下も PC と同じ --sky-01 に。
   ===================================================================== */
@media (max-width: 899px) {
  body.home .experience.kxp,
  body.home .activitylog { background: var(--sky-01); }
}

/* =====================================================================
   PROD-20261009-010（2026-10-09 RYO「スマホの時本文でかいな／スマホでは15pxに　文字サイズ」）
   899px以下（PROD-20261007-006 の SP 文字サイズの切り替え幅）で「本文」を 16px → 15px。
   対象：本文の段落・リスト・説明文・カード本文・表・FAQの答え・フッターの住所とリンク。
   対象外（変えない）：見出し・小見出し・英字ラベル・ボタン・リード（見出し直下の説明文）・日付/タグ・注記・ナビ・フォーム入力欄（16px未満だと iOS で入力時に拡大されるため）。
   本文の値は複数のトークン（--fs-body / --kk-fs-body）を見出し・ボタンとも共有しているため、トークンは変えず本文のセレクタだけを上書き（!important）。
   ===================================================================== */
@media (max-width: 899px) {
  .ks-dl__row dd, .ks-text, .ks-text > p, .ks-plist__fact dd, .ks-step__text,
  .ks-faq__a > span:not(.ks-faq__mark), .ks-timeline__what, .creature-card__caption, .creature-card__latin,
  .ks-card__text, .ks-plist__desc, .ks-works__mat, .ks-plist__more .ks-link, .subpage-card__text, .ks-bullets > li,
  .ks-day__text, .ks-table td, .ks-flow__text, .ks-process__text, .ks-block > p, .ks-box > p, .ks-after-table,
  .subpage__text > p, .log-card__excerpt, .about__body, .kidsclub__body, .kia__fee-note,
  .kft__addr, .kft__col ul a { font-size: 15px !important; }
  /* .ks-text のうちリード扱いのもの（.ks-lead-sm）は対象外に戻す */
  .ks-text.ks-lead-sm { font-size: 16px !important; }
}

/* =====================================================================
   PROD-20261009-011（2026-10-09 RYO「スマホの時／body.home h2.kh-wave, body.home .info.kia .kia__head .section-title.kh-wave, body.home .kct .kct__title.kh-wave／margin-bottom: 30px;／に」）
   SP の値が定義されている 767px 以下（PROD-20261007-009 / 010 / 011 と同じ切り替え幅）で、3セレクタとも margin-bottom 30px。
   お問い合わせ（.kct）の例外値 28px（PROD-20261007-011）も 30px にそろえる。768px 以上の値（56px／お問い合わせ 36px）は無変更。
   ===================================================================== */
@media (max-width: 767px) {
  body.home h2.kh-wave,
  body.home .info.kia .kia__head .section-title.kh-wave,
  body.home .kct .kct__title.kh-wave { margin-bottom: 30px; }
}

/* =====================================================================
   PROD-20261009-012（2026-10-09 RYO「前に下層ヘッダー部分に説明文入れないって言わなかったか？／過去に作ったサイトで入れたことあったか？」）
   下層8ページの写真ヘッダーから説明文を撤去（template-parts/subpage-hero.php）＝英字ラベル＋日本語タイトルだけ。
   高さ：過去案件の標準（PROD-001 で調べた値）PC 380px／SP 240px に合わせる。PC は 380px のまま（900〜1023px の 340px も据え置き）、899px以下は 320 → 240px。
   覆い（文字の下だけ濃く）：文字が減った分だけ範囲を狭める。写真自体は暗くしない・透明度も落とさない（二重掛けなし）。
     PC/TB：左から .72 → 560px で .62 → 900px で 0（旧 640px / 1060px）
     SP：下から .78 → 120px で .62 → 180px で 0（旧 220px / 310px）
   ===================================================================== */
.subpage-hero--photo .subpage-hero__band::after {
  background: linear-gradient(90deg,
    rgba(5, 42, 99, .72) 0,
    rgba(5, 42, 99, .62) 560px,
    rgba(5, 42, 99, 0) 900px);
}
@media (max-width: 899px) {
  .subpage-hero--photo .subpage-hero__band { min-height: 240px; }
  .subpage-hero--photo .subpage-hero__body { padding: 24px 20px 28px; }
  .subpage-hero--photo .subpage-hero__band::after {
    background: linear-gradient(0deg,
      rgba(5, 42, 99, .78) 0,
      rgba(5, 42, 99, .62) 120px,
      rgba(5, 42, 99, 0) 180px);
  }
}

/* =====================================================================
   PROD-20261009-013（2026-10-09 RYO「スマホ用に／exp-1sp／exp-2sp／作った同じフォルダ／差し替えて」）
   899px以下は <picture> で exp-1sp.webp / exp-2sp.webp（600×713）に切り替え。縦横比だけ SP 画像に合わせる。
   表示幅は最大 520px（PROD-003 の 899px以下 max-width）なので実寸 600px を超えない。影（005）・ホバー（007）は img に掛かっているのでそのまま効く。
   ===================================================================== */
body.home .kxp .kxp__imgcard picture { display: block; }
@media (max-width: 899px) {
  body.home .kxp .kxp__imgcard img { aspect-ratio: 600 / 713; }
}

/* =====================================================================
   PROD-20261009-014（2026-10-09 RYO「キッズクラブの上と下の余計な波けせ」）
   写真の上下の波（clipPath#kidsclub-clip とインライン clip-path）は front-page.php から撤去。CSS 側に波の指定は無い（確認済み）。
   ===================================================================== */

/* =====================================================================
   PROD-20261009-015（2026-10-09 RYO「ホバーの時の浮き上がり小さいは／もっと大きく」
                      ＋「クラゲ公民館の／いきものたち／写真浮き上がらないけど」）
   カードのホバー（PROD-007）の浮き上がりを translateY(-2px) → -6px、影も強める。ボタン（.btn）のホバーは変えない。
     体験カード：img の drop-shadow 2枚目 0 6px 16px rgba(28,74,115,.14) → 0 16px 28px rgba(28,74,115,.22)（角丸に沿うまま）
     活動記録：写真の影 0 6px 16px rgba(28,74,115,.14) → 0 16px 28px rgba(28,74,115,.22)
   いきものたち（大判1枚＋小4枚）：写真は拡大表示の <button class="creature-zoom">。名前の帯が写真に重なっているので、
     写真だけでなくカード（article）ごと浮かせる（:has でボタンのホバー／フォーカスを拾う）。浮いたカードは z-index で隣の上に出す。
     拡大表示の動作・カーソル（既存の zoom-in＝虫めがね）は変えない。
   :focus-visible も同じ値／(hover: hover) の端末だけ／prefers-reduced-motion では動かさない（影の変化のみ）
   ===================================================================== */
body.home .kxp .kxp__imgcard:focus-visible,
body.home .activitylog .log-card__link:focus-visible { transform: translateY(-6px); }
body.home .kxp .kxp__imgcard:focus-visible img {
  filter: drop-shadow(0 8px 16px rgba(14, 58, 99, .12)) drop-shadow(0 16px 28px rgba(28, 74, 115, .22));
}
body.home .activitylog .log-card__link:focus-visible .log-card__img { box-shadow: 0 16px 28px rgba(28, 74, 115, .22); }

body.home .creatures .creature-feature,
body.home .creatures .creature-card { position: relative; transition: transform .15s ease, box-shadow .15s ease; }
body.home .creatures .creature-feature:has(.creature-zoom:focus-visible),
body.home .creatures .creature-card:has(.creature-zoom:focus-visible) {
  z-index: 3;
  transform: translateY(-6px);
  box-shadow: 0 16px 28px rgba(28, 74, 115, .22);
}
@media (hover: hover) {
  body.home .kxp .kxp__imgcard:hover,
  body.home .activitylog .log-card__link:hover { transform: translateY(-6px); }
  body.home .kxp .kxp__imgcard:hover img {
    filter: drop-shadow(0 8px 16px rgba(14, 58, 99, .12)) drop-shadow(0 16px 28px rgba(28, 74, 115, .22));
  }
  body.home .activitylog .log-card__link:hover .log-card__img { box-shadow: 0 16px 28px rgba(28, 74, 115, .22); }
  body.home .creatures .creature-feature:has(.creature-zoom:hover),
  body.home .creatures .creature-card:has(.creature-zoom:hover) {
    z-index: 3;
    transform: translateY(-6px);
    box-shadow: 0 16px 28px rgba(28, 74, 115, .22);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.home .creatures .creature-feature,
  body.home .creatures .creature-card { transition: none; transform: none !important; }
}

/* =====================================================================
   PROD-20261009-016（2026-10-09 RYO「フッターのロゴ／新たに／logo-footer／という名前で画像保存したから差し替え」「白い四角出ていいんだよ」）
   footer.php の画像を images/logo-footer.webp（853×346・白背景のまま）に。表示サイズは既存（高さ PC 90px／767px以下 76px）のまま＝CSS変更なし。
   ===================================================================== */

/* =====================================================================
   PROD-20261009-017（2026-10-09 RYO「海の研究クラブ／探検隊／画像にしたわ／KIDS.png」）
   キッズクラブ見出しの2行目を画像（images/kidsclub_subtitle.webp 1200×145）に。大きさは旧テキストの表示幅に合わせる：
     PC/TB（900px以上）：旧 Yomogi 46px の1行 ≒ 幅 515px → 画像 幅 500px（高さ約60px）
     899px以下：旧ゴシック 22.5px ≒ 幅 245px → 画像 幅 260px（高さ約31px）
   どちらも実寸（1200px）以下。h2 の中の img（alt 付き）なので見出しとして読み上げられる。
   ===================================================================== */
.kidsclub .section-title--onphoto .kidsclub__subimg {
  display: block;
  width: 500px;
  max-width: 100%;
  height: auto;
  margin-top: 12px;
}
@media (max-width: 899px) {
  .kidsclub .section-title--onphoto .kidsclub__subimg { width: 260px; margin-top: 8px; }
}

/* =====================================================================
   PROD-20261009-018（2026-10-09 RYO「キッズクラブの文字小さく／KIDS CLUBの代わりにキッズクラブって感じ／KIDS CLUBは削除」）
   英字ラベル KIDS CLUB を削除し、h2 内の「キッズクラブ」を英字ラベルの役割（位置・色・太さ・字間）で小さく表示。続けて画像（PROD-017）。
   大きさ：英字ラベル（PC 16px／SP 13px）より日本語なので一段大きく PC/TB 18px・899px以下 16px。太さ700・字間 .14em・色 --kk-blue（英字ラベルと同じ）。
   ===================================================================== */
.kidsclub .section-title--onphoto .kidsclub__kicker {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .14em;
  color: var(--kk-blue);
}
.kidsclub .section-title--onphoto .kidsclub__subimg { margin-top: 14px; }
@media (max-width: 899px) {
  .kidsclub .section-title--onphoto .kidsclub__kicker { font-size: 16px; }
  .kidsclub .section-title--onphoto .kidsclub__subimg { margin-top: 10px; }
}

/* =====================================================================
   PROD-20261009-019（2026-10-09 RYO「写真の上に文字被せて　良い感じに見せて　右側の空いてるとこに子供見せるとか」）
   899px以下のキッズクラブ：PROD-008 の「写真を文字の下に置く形」をやめ、写真を全面の背景（cover）にして文字を重ねる。
   写真の位置は、文字の列（左）に子どもの顔が掛からず、右側に子どもが見える位置（幅ごとに下で指定）。
   PC（900px以上）は変えない。写真は加工しない・全体を暗くしない。
   ===================================================================== */
@media (max-width: 899px) {
  .kidsclub__photo {
    background-size: var(--kk-kids-size, cover) !important;
    background-position: var(--kk-kids-pos, 63% 50%) !important;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .kidsclub__panel { padding-bottom: 96px !important; }
}
/* 写真の位置（幅ごと）：文字の列の右に見える子どもの顔が、文字・ボタンに掛からない位置を、
   写真の中の顔の位置（実寸座標）と文字の矩形の重なりを幅ごとに計算して決めた。
   449px以下は文字の右の余白が約85pxしかないので、写真を高さの120%に拡大して網を持つ女の子を右に出す */
@media (max-width: 449px) {
  .kidsclub { --kk-kids-size: auto 120%; --kk-kids-pos: 45% 50%; }
}
@media (min-width: 450px) and (max-width: 639px) {
  .kidsclub { --kk-kids-pos: 40% 50%; }
}
@media (min-width: 640px) and (max-width: 699px) {
  .kidsclub { --kk-kids-pos: 50% 50%; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .kidsclub { --kk-kids-pos: 60% 50%; }
}

/* =====================================================================
   PROD-20261009-020（2026-10-09 RYO「TOPのデザインに合わせて下層ページのデザイン一新して／現状全然違うでしょ」
     「レイアウトとか／全体の雰囲気とか／頑張って合わせてね／色と文字の大きさと太さ揃えて」
     「まず写真縦長すぎだし／TOPは写真に白枠とシャドウで写真っぽくしてるし／複数使ったりしてるじゃん」
     「記事・一覧・404も含める」）
   下層（.ks.kk20 ＝ about / kidsclub / experience / craft / observation、.subpage-body.kk20 ＝ log / creatures / contact / single / 一覧 / 404）を
   TOP と同じ部品で組み直す。TOP・ヘッダー・フッターには当たらない（.kk20 と body:not(.home) に閉じる）。既存ルールは書き換えず、ここで上書きするだけ。
   TOPの語彙（STATUS.md §PROD-20261009-020 冒頭に一覧）：
     見出し＝英字ラベル(16/13px・700・#0c44a2)＋H2(40/28px・700・#0c44a2)／全幅セクションは中央揃え＋下に手描き波線(148/108px)、2カラムは左揃え波線なし（TOP ABOUT）
     写真＝白枠7〜8px＋影のプリント写真、比率は4:3中心、複数枚は大1＋小の重ね（わずかに傾ける）
     カード＝白・角丸16px・影（体験カードと同じ影）／ボタン＝#0c44a2 塗りのピル型・白文字16px・700
     地色＝白と水色(#eaf4fb)の交互・境目は直線・同じ水色が続く所は上下の余白を詰める（TOP 体験→活動記録）
     本文 16/15px・500・#33404a ／ リード 18/16px ／ 小見出し 20/18px・700・#0c44a2
   ===================================================================== */

/* ---------- 0. 地色・区切り ---------- */
.ks.kk20 .ks-section:not(.ks-section--tint) + .ks-section:not(.ks-section--tint) { border-top: 0; }
.ks.kk20 .ks-section--tint { background: var(--sky-01); }
.ks.kk20 .kk-sec--joined { padding-top: 24px; }
@media (max-width: 899px) { .ks.kk20 .kk-sec--joined { padding-top: 16px; } }
.ks.kk20 .ks-wrap { max-width: 1240px; }
.ks.kk20 .ks-wrap--narrow { max-width: 960px; }

/* ---------- 1. 見出し（TOPと同じ値） ---------- */
.kk20 .section-label {
  margin: 0 0 10px;
  font-size: var(--kk-fs-label);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .14em;
  color: var(--kk-blue);
}
.kk20 .ks-head__title,
.kk20 .ks-head .section-title {
  font-size: var(--kk-fs-h2);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--kk-blue);
}
.ks.kk20 .ks-head { margin-bottom: 40px; }
.ks.kk20 .ks-head--center { margin-bottom: 56px; text-align: center; }
.ks.kk20 .ks-head--center .ks-head__title::after {
  content: '';
  display: block;
  width: 148px;
  aspect-ratio: 400 / 42;
  margin: 24px auto 0;
  background: url("images/deco_heading_wave.webp") center / contain no-repeat;
}
@media (max-width: 899px) { .kk20 .section-label { margin-bottom: 6px; } }
@media (max-width: 767px) {
  .ks.kk20 .ks-head--center { margin-bottom: 30px; }
  .ks.kk20 .ks-head--center .ks-head__title::after { width: 108px; margin-top: 18px; }
}
/* カードの中の英字ラベル（TOP 体験カードの CRAFT / OBSERVATION と同じ小さい補助の青） */
.ks.kk20 .ks-card .section-label { margin-bottom: 4px; font-size: 13px; color: var(--kk-blue-soft); }

/* ---------- 2. 旧H2の文（H3 .kk-catch）・リード（.kk-lead） ---------- */
.ks.kk20 .kk-catch {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--kk-blue);
  text-wrap: balance;
}
.ks.kk20 .ks-head:has(+ .kk-catch) { margin-bottom: 20px; }
.ks.kk20 .ks-head--center:has(+ .kk-catch) { margin-bottom: 36px; }
.ks.kk20 .kk-catch--center { text-align: center; margin-bottom: 12px; }
.ks.kk20 .kk-lead {
  max-width: 780px;
  margin: 0 auto 48px;
  text-align: center;
  font-size: var(--kk-fs-lead);
  font-weight: 500;
  line-height: 1.8;
  color: var(--kk-text);
}
.ks.kk20 .ks-head--center + .kk-lead { margin-top: -8px; }
.ks.kk20 .ks-lead-block--center { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.ks.kk20 .ks-lead-block--center .ks-text { text-align: center; }
@media (max-width: 899px) {
  .ks.kk20 .kk-catch { font-size: 18px; }
  .ks.kk20 .kk-lead { margin-bottom: 32px; }
  .ks.kk20 .ks-lead-block--center { margin-bottom: 40px; }
}
@media (max-width: 599px) {
  /* 狭い幅で中央揃えの長文は読みにくいので、本文段落だけ左揃えに戻す（見出し・リード・小見出しは中央のまま） */
  .ks.kk20 .ks-lead-block--center .ks-text { text-align: left; }
}

/* ---------- 3. 文字の色・サイズ（TOPのトークン） ---------- */
.ks.kk20 .ks-text, .ks.kk20 .ks-card__text, .ks.kk20 .ks-step__text, .ks.kk20 .ks-process__text, .ks.kk20 .ks-flow__text,
.ks.kk20 .ks-day__text, .ks.kk20 .ks-dl__row dd, .ks.kk20 .ks-faq__a, .ks.kk20 .ks-timeline__what, .ks.kk20 .ks-block p,
.ks.kk20 .ks-box p, .ks.kk20 .ks-bullets li, .ks.kk20 .ks-plist, .ks.kk20 .ks-plist__fact dd, .ks.kk20 .kk-compare__row dd { color: var(--kk-text); }
.ks.kk20 .ks-note, .ks.kk20 .ks-works__mat { color: var(--kk-text-sub); }
.ks.kk20 .ks-h3, .ks.kk20 .ks-step__title, .ks.kk20 .ks-process__title, .ks.kk20 .ks-program__title, .ks.kk20 .ks-flow__title,
.ks.kk20 .ks-works__name, .ks.kk20 .ks-plist__name, .ks.kk20 .ks-prog__title, .ks.kk20 .kk-compare__title,
.ks.kk20 .ks-dl__row dt, .ks.kk20 .ks-faq__q, .ks.kk20 .ks-timeline__when { color: var(--kk-blue); }
.ks.kk20 .ks-h3, .ks.kk20 .ks-step__title { font-size: var(--kk-fs-h3); font-weight: 700; }
.ks.kk20 .ks-plist__fact dt { color: var(--kk-blue-soft); }
.ks.kk20 .ks-step__num { margin-bottom: 2px; font-size: 20px; font-weight: 700; letter-spacing: .08em; color: var(--kk-blue); }
.ks.kk20 h3 { word-break: auto-phrase; }

/* ---------- 4. 写真＝白枠＋影のプリント写真（TOP 活動記録の写真と同じ枠・影） ---------- */
.kk20 .ks-ph {
  border: 7px solid var(--white);
  border-radius: 2px;
  background: var(--white);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
}
/* 縦長すぎる比率（3:4・4:5・縦位置）はやめて 4:3 に（RYO「写真縦長すぎ」） */
.kk20 .ks-ph--portrait, .kk20 .ks-ph--34, .kk20 .ks-ph--45 { aspect-ratio: 4 / 3; }
.kk20 .kk-tilt-l { transform: rotate(-1.5deg); }
.kk20 .kk-tilt-r { transform: rotate(1.5deg); }
/* 白いカードの上端に敷く写真は枠なし（TOP 体験カードと同じ） */
.ks.kk20 .ks-card--panel .ks-card__photo { border: 0; border-radius: 0; box-shadow: none; }
/* 写真2枚を1枚のプリントに並べる（作品例・観察の流れ）：外側に枠、中の2枚は枠なし */
.ks.kk20 .ks-step__photos--2,
.ks.kk20 .ks-works__photos--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 18px;
  aspect-ratio: 4 / 3;
  border: 7px solid var(--white);
  border-radius: 2px;
  background: var(--white);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
}
.ks.kk20 .ks-step__photos--2 .ks-ph,
.ks.kk20 .ks-works__photos--2 .ks-ph { aspect-ratio: auto; height: 100%; border: 0; box-shadow: none; border-radius: 0; margin: 0; }

/* ---------- 5. プリント写真の重ね（大1枚＋小1〜2枚・TOP ABOUT の見せ方） ---------- */
.kk20 .kk-prints { position: relative; padding-bottom: 16%; }
.kk20 .kk-prints--2 { padding-bottom: 12%; }
.kk20 .kk-print {
  margin: 0;
  overflow: hidden;
  border: 8px solid var(--white);
  border-radius: 2px;
  background: var(--white);
  box-shadow: 0 8px 22px rgba(14, 58, 99, .16);
}
.kk20 .kk-print img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kk20 .kk-print--main { width: 84%; margin-left: auto; aspect-ratio: 4 / 3; transform: rotate(1.2deg); }
.kk20 .kk-print--s1 { position: absolute; z-index: 2; left: 0; bottom: 0; width: 42%; aspect-ratio: 4 / 3; transform: rotate(-4deg); }
.kk20 .kk-print--s2 { position: absolute; z-index: 3; left: 40%; bottom: -3%; width: 34%; aspect-ratio: 4 / 3; transform: rotate(3deg); }
.kk20 .kk-prints--2 .kk-print--s1 { width: 46%; }
.kk20 .kk-prints--flip .kk-print--main { margin-left: 0; margin-right: auto; transform: rotate(-1.2deg); }
.kk20 .kk-prints--flip .kk-print--s1 { left: auto; right: 0; transform: rotate(4deg); }
.kk20 .kk-prints--flip .kk-print--s2 { left: auto; right: 40%; transform: rotate(-3deg); }
.kk20 .kk-print--logo img { object-fit: contain; padding: 8% 6%; }
.kk20 .kk-print.kk-print--tall { aspect-ratio: 3 / 4; width: 25%; }
.kk20 .kk-prints--3 .kk-print--s2.kk-print--tall { left: auto; right: 2%; bottom: -2%; }
@media (max-width: 599px) {
  .kk20 .kk-print { border-width: 6px; }
}

/* ---------- 6. 白いカード（TOP 体験カードと同じ角丸・影） ---------- */
.kk20 .kk-panel,
.ks.kk20 .ks-card--panel,
.ks.kk20 .ks-step--text,
.ks.kk20 .ks-box {
  background: var(--white);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(14, 58, 99, .08), 0 2px 4px rgba(14, 58, 99, .05);
}
.ks.kk20 .ks-section:not(.ks-section--tint) .ks-card--panel,
.ks.kk20 .ks-section:not(.ks-section--tint) .ks-step--text { border: 0; background: var(--white); }
.ks.kk20 .ks-card--panel { overflow: hidden; }
.ks.kk20 .ks-step--text { padding: 32px; }
.ks.kk20 .ks-box { padding: 32px; }
/* 定義リスト（料金・時間など）は白いカードの中の罫線リストに（TOP ご利用案内の項目名＝青・太字） */
.ks.kk20 .ks-dl.kk-panel { padding: 8px 40px; border-top: 0; }
.ks.kk20 .ks-dl.kk-panel .ks-dl__row { padding: 20px 0; border-bottom: 1px solid #e3edf4; }
.ks.kk20 .ks-dl.kk-panel .ks-dl__row:last-child { border-bottom: 0; }
.ks.kk20 .ks-dl__row dt { font-weight: 700; }
.ks.kk20 .ks-dl--note.kk-panel { padding: 4px 32px; }
@media (max-width: 599px) {
  .ks.kk20 .ks-dl.kk-panel { padding: 4px 22px; }
  .ks.kk20 .ks-dl.kk-panel .ks-dl__row { padding: 16px 0; }
  .ks.kk20 .ks-step--text, .ks.kk20 .ks-box { padding: 24px 22px; }
}

/* ---------- 7. INTRODUCTION／2カラム ---------- */
@media (min-width: 900px) {
  .ks.kk20 .ks-intro { grid-template-columns: 5fr 7fr; gap: 64px; }
  .ks.kk20 .ks-split { gap: 64px; }
}
@media (max-width: 899px) {
  .ks.kk20 .ks-intro__media, .ks.kk20 .ks-split__media { max-width: 600px; margin: 0 auto; width: 100%; }
}
/* フィールドプログラムの1件目・最後：白いカードの中の2カラム */
.ks.kk20 .kk-program { padding: 48px; align-items: center; }
.ks.kk20 .kk-program + .ks-cols--boxes { margin: 40px 0; }
@media (max-width: 899px) { .ks.kk20 .kk-program { padding: 32px 22px; gap: 32px; } }

/* ---------- 8. about：STORY ---------- */
@media (min-width: 900px) { .ks.kk20 .ks-story { grid-template-columns: 5fr 7fr; gap: 64px; } }
.ks.kk20 .ks-story__sub.kk-panel { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 48px; padding: 32px; border-top: 0; }
.ks.kk20 .ks-story__sub .ks-story__subphoto { max-width: none; margin: 0; transform: rotate(-1.5deg); }
@media (min-width: 600px) { .ks.kk20 .ks-story__sub.kk-panel { grid-template-columns: 220px 1fr; align-items: start; gap: 32px; } }
.ks.kk20 .ks-story__close { margin-top: 48px; padding-top: 0; border-top: 0; }
@media (max-width: 599px) { .ks.kk20 .ks-story__sub.kk-panel { padding: 24px 22px; } }

/* ---------- 9. about：HISTORY（年表＋写真） ---------- */
.ks.kk20 .kk-hist { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 900px) { .ks.kk20 .kk-hist { grid-template-columns: 7fr 5fr; gap: 64px; } }
.ks.kk20 .ks-timeline.kk-panel { padding: 8px 40px; border-top: 0; }
.ks.kk20 .ks-timeline.kk-panel .ks-timeline__item { padding: 18px 0; border-bottom: 1px solid #e3edf4; }
.ks.kk20 .ks-timeline.kk-panel .ks-timeline__item:last-child { border-bottom: 0; }
.ks.kk20 .ks-timeline__when { font-weight: 700; }
@media (min-width: 600px) { .ks.kk20 .ks-timeline.kk-panel .ks-timeline__item { grid-template-columns: 10em 1fr; } }
@media (max-width: 599px) { .ks.kk20 .ks-timeline.kk-panel { padding: 4px 22px; } }

/* ---------- 10. kidsclub：1年の活動（月ごとの白いカード） ---------- */
.ks.kk20 .ks-timeline.kk-months { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; border-top: 0; }
.ks.kk20 .kk-months .ks-timeline__item {
  display: flex; flex-direction: column; gap: 6px;
  width: calc((100% - 60px) / 4);
  padding: 26px 24px 28px;
  border: 0;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 8px 16px rgba(14, 58, 99, .08), 0 2px 4px rgba(14, 58, 99, .05);
}
.ks.kk20 .kk-months .ks-timeline__when { font-size: 22px; line-height: 1.3; letter-spacing: .04em; }
@media (max-width: 899px) { .ks.kk20 .kk-months .ks-timeline__item { width: calc((100% - 20px) / 2); } }
@media (max-width: 420px) { .ks.kk20 .ks-timeline.kk-months { gap: 12px; } .ks.kk20 .kk-months .ks-timeline__item { width: calc((100% - 12px) / 2); padding: 20px 16px; } .ks.kk20 .kk-months .ks-timeline__when { font-size: 18px; } }

/* ---------- 11. kidsclub：募集要項（リスト＋写真）・体験プログラムとの違い（2枚のカード） ---------- */
.ks.kk20 .kk-dlsplit { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 900px) { .ks.kk20 .kk-dlsplit { grid-template-columns: 7fr 5fr; gap: 64px; } }
@media (max-width: 899px) { .ks.kk20 .kk-dlsplit__media { max-width: 560px; margin: 0 auto; width: 100%; } }
.ks.kk20 .kk-compare { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 1000px; margin: 0 auto; }
@media (min-width: 768px) { .ks.kk20 .kk-compare { grid-template-columns: 1fr 1fr; gap: 32px; } }
.ks.kk20 .kk-compare__card { padding: 32px 36px 20px; }
.ks.kk20 .kk-compare__card--hl { box-shadow: 0 0 0 3px var(--kk-blue), 0 8px 16px rgba(14, 58, 99, .08); }
.ks.kk20 .kk-compare__title { margin: 0 0 8px; padding-bottom: 16px; font-size: 22px; font-weight: 700; text-align: center; border-bottom: 2px solid #e3edf4; }
.ks.kk20 .kk-compare__list { margin: 0; }
.ks.kk20 .kk-compare__row { padding: 16px 0; border-bottom: 1px solid #e3edf4; }
.ks.kk20 .kk-compare__row:last-child { border-bottom: 0; }
.ks.kk20 .kk-compare__row dt { margin-bottom: 2px; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--kk-blue-soft); }
.ks.kk20 .kk-compare__row dd { margin: 0; font-size: var(--kk-fs-body); line-height: 1.7; }
@media (max-width: 599px) { .ks.kk20 .kk-compare__card { padding: 26px 22px 12px; } }
.ks.kk20 .ks-after-table { max-width: 760px; margin: 40px auto 0; text-align: center; }
.ks.kk20 .ks-more--center { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; text-align: center; }

/* ---------- 12. 番号つきの流れ（入会までの流れ）：白いカード＋丸い番号（TOP ご利用案内のアイコンの丸） ---------- */
.ks.kk20 .ks-flow { gap: 20px; }
.ks.kk20 .ks-flow__item {
  padding: 32px 28px;
  border: 0;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 8px 16px rgba(14, 58, 99, .08), 0 2px 4px rgba(14, 58, 99, .05);
}
.ks.kk20 .ks-flow__num {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 16px;
  border-radius: 50%;
  background: #e4f2fc;
  font-size: 20px; font-weight: 700; letter-spacing: .04em; color: var(--kk-blue);
}
.ks.kk20 .ks-flow__title { font-size: var(--kk-fs-h3); }

/* ---------- 13. よくあるご質問：白いカード＋丸いQ ---------- */
.ks.kk20 .ks-faq { display: grid; gap: 16px; border-top: 0; }
.ks.kk20 .ks-faq__item {
  padding: 26px 32px;
  border: 0;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 8px 16px rgba(14, 58, 99, .08), 0 2px 4px rgba(14, 58, 99, .05);
}
.ks.kk20 .ks-faq__q, .ks.kk20 .ks-faq__a { grid-template-columns: 48px 1fr; align-items: start; }
.ks.kk20 .ks-faq__q > span:not(.ks-faq__mark) { padding-top: 3px; }
.ks.kk20 .ks-faq__mark {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #e4f2fc;
  font-size: 15px; line-height: 1; color: var(--kk-blue);
}
.ks.kk20 .ks-faq__a .ks-faq__mark { background: none; color: var(--kk-blue-soft); }
.ks.kk20 .ks-faq__a { margin-top: 10px; }
@media (max-width: 599px) {
  .ks.kk20 .ks-faq__item { padding: 20px 18px; }
  .ks.kk20 .ks-faq__q, .ks.kk20 .ks-faq__a { grid-template-columns: 42px 1fr; }
}

/* ---------- 14. experience：体験の種類（TOP 体験カードと同じ白いカード）・モデルコース・プログラム一覧 ---------- */
.ks.kk20 .ks-prog .ks-card__inner { padding: 28px 32px 32px; }
.ks.kk20 .ks-prog .ks-card__more .btn { width: 100%; justify-content: center; }
.ks.kk20 .ks-day { gap: 32px 24px; }
.ks.kk20 .ks-day__photo { margin-bottom: 4px; }
.ks.kk20 .ks-day__time { font-size: 24px; font-weight: 700; letter-spacing: .04em; color: var(--kk-blue); }
.ks.kk20 .ks-plist__list { gap: 14px; }
.ks.kk20 .ks-plist__item,
.ks.kk20 .ks-section:not(.ks-section--tint) .ks-plist__item {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(14, 58, 99, .08), 0 2px 4px rgba(14, 58, 99, .05);
}
.ks.kk20 .ks-plist__name { font-size: var(--kk-fs-h3); }
.ks.kk20 .ks-plist__head { color: var(--kk-blue-soft); border-bottom-color: var(--kk-blue); }
@media (min-width: 1100px) {
  /* 「詳しく」列の削除（RYO「『詳しく』の列ごと削除」）で4列に */
  .ks.kk20 .ks-plist__head,
  .ks.kk20 .ks-plist__item { grid-template-columns: minmax(0, 1fr) 11em 9em 14em; }
}
.ks.kk20 .ks-plist + .ks-note { text-align: center; }
/* 開催予定（Instagram 風の写真）：1枚ずつ白枠のプリント */
.ks.kk20 .ks-igfeed { gap: 16px; margin-top: 0; }
.ks.kk20 .ks-ig { border: 6px solid var(--white); border-radius: 2px; background: var(--white); box-shadow: 0 3px 10px rgba(0, 0, 0, .10); transition: transform .15s ease, box-shadow .15s ease; }
.ks.kk20 .ks-ig:hover img { opacity: 1; }
@media (hover: hover) { .ks.kk20 .ks-ig:hover { transform: translateY(-6px); box-shadow: 0 16px 28px rgba(28, 74, 115, .22); } }
.ks.kk20 .ks-ig:focus-visible { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .ks.kk20 .ks-ig { transition: none; transform: none !important; } }

/* ---------- 15. craft：完成までの流れ（文章＋プリント写真の重ね・左右交互）・作品例・過去のワークショップ ---------- */
.ks.kk20 .ks-process { gap: 72px; }
@media (min-width: 900px) {
  .ks.kk20 .ks-process__item { grid-template-columns: 5fr 7fr; gap: 64px; }
  .ks.kk20 .ks-process__item:nth-child(even) .ks-process__body { order: 2; }
}
@media (max-width: 899px) {
  .ks.kk20 .ks-process { gap: 56px; }
  .ks.kk20 .ks-process__photos { max-width: 600px; width: 100%; margin: 0 auto; }
}
/* 縦位置の素材（顔の位置が上寄り）は 4:3 に切るとき上側を残す */
.ks.kk20 .ks-process .kk-print img { object-position: 50% 30%; }
.ks.kk20 .ks-works { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 24px; }
.ks.kk20 .ks-works__item { width: calc((100% - 72px) / 4); }
.ks.kk20 .ks-works__photos--1 .ks-ph { aspect-ratio: 1 / 1; margin-bottom: 14px; }
.ks.kk20 .ks-works__photos--2 { aspect-ratio: 1 / 1; margin-bottom: 14px; }
.ks.kk20 .ks-works__name { font-size: 18px; }
@media (max-width: 899px) { .ks.kk20 .ks-works__item { width: calc((100% - 48px) / 3); } }
@media (max-width: 599px) { .ks.kk20 .ks-works { gap: 28px 14px; } .ks.kk20 .ks-works__item { width: calc((100% - 14px) / 2); } .ks.kk20 .ks-works__name { font-size: 16px; } }
.ks.kk20 .ks-taglist { justify-content: center; gap: 12px; }
.ks.kk20 .ks-taglist li { padding: 8px 18px; border: 1px solid #cfe0ea; border-radius: 999px; background: var(--white); color: var(--kk-blue); font-weight: 500; }
.ks.kk20 .ks-taglist + .ks-note { text-align: center; }
.ks.kk20 .ks-dl--note { max-width: 860px; margin: 48px auto 0; }

/* ---------- 16. observation：見つかった生きもの（傾けたプリント3枚） ---------- */
.ks.kk20 .kk-figs { gap: 28px; max-width: 900px; margin: 0 auto; }
.ks.kk20 .kk-figs .ks-ph:nth-child(1) { transform: rotate(-2deg); }
.ks.kk20 .kk-figs .ks-ph:nth-child(2) { transform: rotate(1.5deg) translateY(10px); }
.ks.kk20 .kk-figs .ks-ph:nth-child(3) { transform: rotate(-1deg); }
@media (max-width: 599px) { .ks.kk20 .kk-figs { gap: 10px; } .ks.kk20 .kk-figs .ks-ph { border-width: 5px; } }

/* ---------- 17. about：アクセス（地図＝角丸＋影） ---------- */
.ks.kk20 .ks-map { border-radius: 16px; box-shadow: 0 8px 16px rgba(14, 58, 99, .08), 0 2px 4px rgba(14, 58, 99, .05); }
.ks.kk20 .ks-access__media { gap: 32px; }
.ks.kk20 .ks-access .ks-dl--stack.kk-panel .ks-dl__row { grid-template-columns: 1fr; gap: 4px; }
@media (min-width: 600px) { .ks.kk20 .ks-access .ks-dl--stack.kk-panel .ks-dl__row { grid-template-columns: 8em 1fr; gap: 16px; } }

/* ---------- 18. ボタン（RYO「ボタンの色もTOPと違うね／他はTOPに合わせたら」）
   TOP の .btn と同じ：#0c44a2 の塗り・白文字16px/700・ピル型・余白18px 30px（899px以下 16px 22px）・影・ホバーで2px浮く。
   お問い合わせ帯のボタン（.kct__btn）はTOPと同じ部品のため除外（下の 20. でTOPと同じ値）。 ---------- */
body:not(.home) .btn:not(.kct__btn) {
  justify-content: center;
  padding: 18px 30px;
  border: 1px solid var(--kk-blue);
  border-radius: 999px;
  background: var(--kk-blue);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 3px 10px rgba(28, 74, 115, .08);
}
body:not(.home) .btn:not(.kct__btn):hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(28, 74, 115, .14); }
@media (max-width: 899px) { body:not(.home) .btn:not(.kct__btn) { padding: 16px 22px; } }
/* 例外：Instagram・LINE（RYO「このインスタとラインだけはそれぞれのイメージ似合う色でいい」）。形・大きさ・ホバーは上と同じ。
   Instagram：グラデーションの紫〜マゼンタ〜青側（#d62976・#962fbf・#4f5bd5）。白文字のコントラストは最小 4.73（#d62976）で AA。
   LINE：LINE公式のボタン色 #06C755。白文字は 2.26 で AA 未達のため、文字は黒（9.31）。 */
body:not(.home) .btn.kk-btn--ig { border-color: transparent; background: linear-gradient(90deg, #d62976 0%, #962fbf 55%, #4f5bd5 100%); color: #fff; }
body:not(.home) .btn.kk-btn--line { border-color: #06c755; background: #06c755; color: #000; }
/* お問い合わせフォームの送信ボタン（例外にしない） */
body:not(.home) .subpage-body .wpcf7 input[type="submit"] {
  min-width: 280px;
  padding: 18px 30px;
  border: 1px solid var(--kk-blue);
  border-radius: 999px;
  background: var(--kk-blue);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 3px 10px rgba(28, 74, 115, .08);
  transition: transform .15s ease, box-shadow .15s ease;
}
body:not(.home) .subpage-body .wpcf7 input[type="submit"]:hover { background: var(--kk-blue); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(28, 74, 115, .14); }
@media (prefers-reduced-motion: reduce) {
  body:not(.home) .btn:not(.kct__btn):hover, body:not(.home) .subpage-body .wpcf7 input[type="submit"]:hover { transform: none; }
}

/* ---------- 19. 活動記録のカード（/log/・一覧・キッズクラブの活動レポート）＝ TOP 活動記録（.log-card）と同じ ---------- */
.kk20.kk20-list { padding-bottom: var(--space-section); }
.kk20.kk20-list .subpage__inner { max-width: 1360px; padding: 0 20px; }
@media (min-width: 900px) { .kk20 .subpage-cards--log { gap: 40px 32px; } }
.kk20 .subpage-card--log .subpage-card__label { font-size: 16px; color: var(--kk-blue-soft); }
.kk20 .subpage-card--log .subpage-card__title { margin: 2px 0 6px; font-size: var(--kk-fs-h3); font-weight: 700; line-height: 1.5; color: var(--kk-blue); word-break: auto-phrase; text-wrap: balance; }
.kk20 .subpage-card--log .subpage-card__text { color: var(--kk-text-sub); }
.kk20 .subpage-card--log .subpage-card__link { transition: transform .15s ease; }
.kk20 .subpage-card--log .subpage-card__photo { transition: box-shadow .15s ease; }
.kk20 .subpage-card--log .subpage-card__link:focus-visible { transform: translateY(-6px); }
.kk20 .subpage-card--log .subpage-card__link:focus-visible .subpage-card__photo { box-shadow: 0 16px 28px rgba(28, 74, 115, .22); }
@media (hover: hover) {
  .kk20 .subpage-card--log .subpage-card__link:hover { transform: translateY(-6px); }
  .kk20 .subpage-card--log .subpage-card__link:hover .subpage-card__photo { box-shadow: 0 16px 28px rgba(28, 74, 115, .22); }
  .kk20 .subpage-card--log .subpage-card__link:hover .subpage-card__title { text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) { .kk20 .subpage-card--log .subpage-card__link { transition: none; transform: none !important; } }
.kk20.kk20-list .subpage-pager { margin-top: 48px; text-align: center; }

/* ---------- 20. お問い合わせ帯（template-parts/cta.php を TOP と同じ .kct に）：TOP の body.home 側の値と同じ ---------- */
body:not(.home) .kct .kct__label { font-size: var(--kk-fs-label); font-weight: 700; letter-spacing: .14em; color: var(--kk-blue); }
body:not(.home) .kct .kct__title { font-size: var(--kk-fs-h2); font-weight: 700; letter-spacing: .02em; color: var(--kk-blue); }
body:not(.home) .kct .kct__text { margin-top: 0; font-size: var(--kk-fs-lead); font-weight: 500; color: var(--kk-text); }
body:not(.home) .kct .kct__btn { margin-top: 48px; background: var(--kk-blue); font-size: 16px; font-weight: 700; }
body:not(.home) .kct .kct__btn .btn__arrow { font-size: inherit; font-weight: inherit; }
body:not(.home) .kct h2.kh-wave::after { position: static; display: block; width: 148px; height: auto; aspect-ratio: 400 / 42; margin: 24px auto 0; transform: none; }
body:not(.home) .kct .kct__title.kh-wave { margin-bottom: 36px; }
@media (max-width: 767px) {
  body:not(.home) .kct h2.kh-wave::after { width: 108px; margin-top: 18px; }
  body:not(.home) .kct .kct__title.kh-wave { margin-bottom: 30px; }
  body:not(.home) .kct .kct__btn { margin-top: 36px; }
}

/* ---------- 21. /creatures/：TOP のカードと同じ白・角丸・影・ホバーで浮く ---------- */
.kk20.kk20-creatures { padding-bottom: var(--space-section); }
.kk20.kk20-creatures .subpage__inner { max-width: 1280px; padding: 0 20px; }
.kk20 .subpage-creatures { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; margin-top: 0; }
@media (max-width: 899px) { .kk20 .subpage-creatures { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; } }
@media (max-width: 599px) { .kk20 .subpage-creatures { grid-template-columns: 1fr; gap: 24px; } }
.kk20 .subpage-creatures .creature-card {
  overflow: hidden;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 8px 16px rgba(14, 58, 99, .08), 0 2px 4px rgba(14, 58, 99, .05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kk20 .subpage-creatures .creature-card__caption { margin: 0; padding: 18px 22px 24px; color: var(--kk-text); }
.kk20 .subpage-creatures .creature-card:has(.creature-zoom:focus-visible) { transform: translateY(-6px); box-shadow: 0 16px 28px rgba(28, 74, 115, .22); }
@media (hover: hover) {
  .kk20 .subpage-creatures .creature-card:has(.creature-zoom:hover) { transform: translateY(-6px); box-shadow: 0 16px 28px rgba(28, 74, 115, .22); }
}
@media (prefers-reduced-motion: reduce) { .kk20 .subpage-creatures .creature-card { transition: none; transform: none !important; } }

/* ---------- 22. /contact/：水色の地の上の白いカードにフォーム ---------- */
.kk20.kk20-contact { padding: 96px 0 var(--space-section); background: var(--sky-01); }
.kk20.kk20-contact .subpage__inner {
  max-width: 880px;
  padding: 56px 64px 64px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 8px 16px rgba(14, 58, 99, .08), 0 2px 4px rgba(14, 58, 99, .05);
}
.kk20.kk20-contact .wpcf7 form { max-width: none; }
@media (max-width: 899px) {
  .kk20.kk20-contact { padding: 56px 20px 72px; }
  .kk20.kk20-contact .subpage__inner { padding: 32px 22px 40px; }
}

/* ---------- 23. 記事個別・404 ---------- */
.kk20.kk20-single, .kk20.kk20-404 { padding-bottom: var(--space-section); }
.kk20.kk20-single .subpage__inner { max-width: 840px; }
.kk20.kk20-single .subpage-thumb { max-width: 720px; margin: 0 auto 48px; border: 8px solid var(--white); border-radius: 2px; background: var(--white); box-shadow: 0 8px 22px rgba(14, 58, 99, .16); }
.kk20.kk20-single .subpage-thumb img { display: block; width: 100%; height: auto; }
.kk20.kk20-single .subpage__text { font-size: var(--kk-fs-body); color: var(--kk-text); }
.kk20 .subpage-back { margin-top: 48px; text-align: center; }
/* 記事・一覧・404 の上部（KK-42：形は従来のまま）：文字だけTOPのトークン */
body:not(.home) .subpage-hero:not(.subpage-hero--photo) .section-label { font-size: var(--kk-fs-label); font-weight: 700; letter-spacing: .14em; color: var(--kk-blue); }
body:not(.home) .subpage-hero:not(.subpage-hero--photo) .section-title { font-size: var(--kk-fs-h2); font-weight: 700; color: var(--kk-blue); }
/* 写真の無いステップ（原稿の指定で写真なし）：写真の位置に同じ大きさのプリント風の番号タイルを置き、写真のあるステップと並びをそろえる */
.ks.kk20 .ks-step--text { justify-content: flex-start; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.ks.kk20 .ks-section:not(.ks-section--tint) .ks-step--text { background: none; }
.ks.kk20 .ks-step--text .ks-step__num {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; margin-bottom: 18px;
  border: 7px solid var(--white); border-radius: 2px;
  background: #e4f2fc;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
  font-size: 56px; line-height: 1; letter-spacing: .04em;
}
@media (max-width: 599px) { .ks.kk20 .ks-step--text .ks-step__num { aspect-ratio: 16 / 7; font-size: 44px; } }
/* 縦位置の素材を 4:3 のプリントに切るときは顔の多い上側を残す */
.kk20 .kk-print img { object-position: 50% 35%; }
/* 語の途中で折り返さない（よくある質問の問い・リード・項目名）。対応していないブラウザでは従来どおりの折り返し */
.ks.kk20 .ks-faq__q, .ks.kk20 .kk-lead, .ks.kk20 dt, .ks.kk20 .ks-timeline__what, .kk20 .subpage-card__title { word-break: auto-phrase; }
/* アクセスの写真：1列になる幅で実寸（920×510）を超えて拡大しないよう、幅を抑えて比率を元の横長に */
.ks.kk20 .ks-ph--wide { aspect-ratio: 920 / 510; }
@media (max-width: 899px) { .ks.kk20 .ks-access__media { width: 100%; max-width: 600px; margin: 0 auto; } }
@media (max-width: 899px) { .ks.kk20 .kk-hist__media, .ks.kk20 .ks-story__media { width: 100%; max-width: 600px; margin: 0 auto; } }
/* 記事個別のアイキャッチ：実寸より大きく引き伸ばさない（枠は画像の幅に合わせる） */
.kk20.kk20-single .subpage-thumb { width: fit-content; }
.kk20.kk20-single .subpage-thumb img { width: auto; max-width: 100%; }
/* フォームの補足文：白地で AA に届くよう補足の色（#56656f）に */
.kk20.kk20-contact .cf7-note { color: var(--kk-text-sub); }

/* =====================================================================
   PROD-20261009-021（RYO「下層と同じ写真ヘッダーに／404だけいらない／記事一覧と記事詳細は同じ写真を／開道の施工事例と同じパターン」
                      ＋ KK-46 LINEボタン「白文字に」）
   ・記事詳細：写真ヘッダーの下、本文の先頭に日付＋記事タイトル（h1）。TOP 活動記録のカードと同じ色（日付 #3d5f9e・タイトル #0c44a2）
   ・LINE ボタン：文字を白に（#06C755 地に白は 2.26:1。AA 未達は RYO 承知の上の判断）
   ===================================================================== */
.kk20.kk20-single .kk-entry-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.kk20.kk20-single .kk-entry-head__date { margin: 0 0 8px; font-size: 16px; font-weight: 500; letter-spacing: .06em; color: var(--kk-blue-soft); }
.kk20.kk20-single .kk-entry-head__title { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.45; letter-spacing: .02em; color: var(--kk-blue); word-break: auto-phrase; text-wrap: balance; }
@media (max-width: 899px) {
  .kk20.kk20-single .kk-entry-head { margin-bottom: 28px; }
  .kk20.kk20-single .kk-entry-head__title { font-size: 24px; }
}
body:not(.home) .btn.kk-btn--line { color: #fff; }

/* =====================================================================
   PROD-20261009-022（DIR-20261009-005 差し戻し F1〜F4）
   F1 作品例：写真2枚の作品も、1枚の作品と同じ枠（白枠7px・4:3）にする。中は1枚目を枠いっぱい、2枚目を右下に小さく重ねたプリント（縦長にしない）。
      枠の大きさ・下余白を1枚の作品と同じにして、作品名の高さをそろえる
   F2 観察の流れ 03：同じ見せ方（1枚目を枠いっぱい・2枚目を右下に重ねる）
   F3 900〜1199px：2カラムの中の白カード（STORY の「公民館」カード・安全への取り組み等のリスト）が窮屈なので、
      リストは項目名を上・内容を下の1列に、「公民館」カードは写真を上・文章を下に
   F4 本文の語中改行（375）：作品の素材・リード段落・注記も文節で折り返す（auto-phrase。Chrome系のみ）
   ===================================================================== */
.ks.kk20 .ks-works__photos { margin-bottom: 14px; }
.ks.kk20 .ks-works__photos--1 .ks-ph { aspect-ratio: 4 / 3; margin: 0; }
.ks.kk20 .ks-works__photos--2,
.ks.kk20 .ks-step__photos--2 {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: visible;
}
.ks.kk20 .ks-works__photos--2 { margin: 0 0 14px; }
.ks.kk20 .ks-step__photos--2 { margin: 0 0 18px; }
.ks.kk20 .ks-works__photos--2 .ks-ph:first-child,
.ks.kk20 .ks-step__photos--2 .ks-ph:first-child { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; box-shadow: none; }
.ks.kk20 .ks-works__photos--2 .ks-ph:nth-child(2),
.ks.kk20 .ks-step__photos--2 .ks-ph:nth-child(2) {
  position: absolute; z-index: 2; right: -6px; bottom: -10px;
  width: 44%; height: auto; aspect-ratio: 1 / 1;
  border: 5px solid var(--white); border-radius: 2px;
  box-shadow: 0 6px 16px rgba(14, 58, 99, .2);
  transform: rotate(4deg);
}
@media (max-width: 1199px) {
  .ks.kk20 .ks-split .ks-dl .ks-dl__row,
  .ks.kk20 .ks-split .ks-dl--compact .ks-dl__row { grid-template-columns: 1fr; gap: 2px; }
  .ks.kk20 .ks-story__sub.kk-panel { grid-template-columns: 1fr; }
  .ks.kk20 .ks-story__sub .ks-story__subphoto { max-width: 360px; }
}
.ks.kk20 .ks-works__mat, .ks.kk20 .ks-lead-block .ks-text, .ks.kk20 .ks-note, .ks.kk20 .ks-text p, .ks.kk20 .kk-lead { word-break: auto-phrase; }
/* F4 追加：下層の本文（段落・リスト・定義リストの内容）はすべて文節で折り返す */
.kk20 p, .kk20 dd, .kk20 li { word-break: auto-phrase; }
/* F3 追加：STORY は 900〜1199px でも1列（写真を上・本文を下）にして、本文と「公民館」カードの幅を確保する */
@media (min-width: 900px) and (max-width: 1199px) {
  .ks.kk20 .ks-story { grid-template-columns: 1fr; gap: 48px; }
  .ks.kk20 .ks-story__media { position: static; width: 100%; max-width: 600px; margin: 0 auto; }
  .ks.kk20 .ks-story__sub.kk-panel { grid-template-columns: 260px 1fr; }
}
@media (min-width: 900px) and (max-width: 1199px) { .ks.kk20 .ks-story__body { width: 100%; max-width: 820px; margin: 0 auto; } }

/* =====================================================================
   PROD-20261009-023（RYO「写真枠太いかなもう少し細く」）
   プリント写真風の白枠を細くし、サイト内（TOP・下層）でそろえる：基本 7px → 5px（重ねのプリントの 8px も 5px）。
   599px以下で細くしていたもの（プリント 6px・見つかった生きもの 5px）と、重ねた小さい写真（5px）は 4px（比率を保つ）。
   影・傾き・重ね方・写真の箱の大きさは変えない（border-box なので外側の大きさは同じ）。
   ※TOP の ABOUT の写真は支給画像（about.jpg）に白枠が焼き込まれているため CSS では変えられない（変えていない）。
   ===================================================================== */
.log-card__img, .log-card__photo-empty,
.log-card__photo, .subpage-card--log .subpage-card__photo { border-width: 5px; }
.kk20 .ks-ph { border-width: 5px; }
.kk20 .kk-print { border-width: 5px; }
.ks.kk20 .ks-ig { border-width: 5px; }
.ks.kk20 .ks-step__photos--2, .ks.kk20 .ks-works__photos--2 { border-width: 5px; }
.ks.kk20 .ks-works__photos--2 .ks-ph:nth-child(2),
.ks.kk20 .ks-step__photos--2 .ks-ph:nth-child(2) { border-width: 4px; }
.ks.kk20 .ks-step--text .ks-step__num { border-width: 5px; }
.kk20.kk20-single .subpage-thumb { border-width: 5px; }
@media (max-width: 599px) {
  .kk20 .kk-print { border-width: 4px; }
  .ks.kk20 .kk-figs .ks-ph { border-width: 4px; }
}

/* =====================================================================
   PROD-20261009-024（RYO「この部分削除」）：STORY の「公民館」カードを削除したので、前後の本文を1つの文章として続ける
   （旧：カードの上下に 48px。いまは段落どうしと同じ 1em）。.ks-story__sub 系の CSS は他で使っていないが、既存行は消さずに残している
   PROD-20261009-025：あゆみ＝白いカードをやめて水色の地に直接、写真なし・中央の1カラム（最大 760px）。
   行の区切り線と日付・本文の書式は従来どおり（区切り線の色だけ、水色の地で見えるよう #e3edf4 → --line #cfe0ea）
   ===================================================================== */
.ks.kk20 .ks-story__close { margin-top: 1em; }
.ks.kk20 .kk-hist--solo { display: block; max-width: 760px; margin: 0 auto; }
.ks.kk20 .ks-timeline.kk-timeline-flat { padding: 0; border-top: 1px solid var(--line); background: none; }
.ks.kk20 .ks-timeline.kk-timeline-flat .ks-timeline__item { padding: 18px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 600px) { .ks.kk20 .ks-timeline.kk-timeline-flat .ks-timeline__item { grid-template-columns: 10em 1fr; } }

/* =====================================================================
   PROD-20261009-032（RYO「クラフト体験ページ／完成までの流れ余白多すぎ／レイアウト再考／写真と文字のバランスが悪い」）
   原因（1440 実測）：4つのステップを「文章｜写真の重ね」の左右交互で1段ずつ並べていた。文章は3行＝高さ85px なのに
     各段の高さは写真に合わせて 342〜505px（文章が占めるのは段の17〜25%）、写真の面積は文章の2.9〜8.3倍、セクション 2402px。
     899px以下は写真が600px幅で縦に積まれ 2814px。
   変更：4つのステップを2列×2段のカード並び（写真の重ねが上・番号/見出し/本文が下）に。767px以下は1列。
     写真・文言・番号は変えない。写真は TOP と同じ白枠＋影の 4:3 プリント（枠は PROD-023 の 5px／599px以下 4px）。
   ===================================================================== */
.ks.kk20 .ks-process { display: grid; grid-template-columns: 1fr; gap: 48px; }
.ks.kk20 .ks-process__item,
.ks.kk20 .ks-process__item:nth-child(even) { display: flex; flex-direction: column; gap: 0; }
.ks.kk20 .ks-process__item .ks-process__photos { order: -1; width: 100%; max-width: none; margin: 0 0 24px; }
.ks.kk20 .ks-process__item .ks-process__body { order: 0; }
@media (min-width: 768px) {
  .ks.kk20 .ks-process { grid-template-columns: 1fr 1fr; gap: 64px 48px; }
}
@media (min-width: 1100px) {
  .ks.kk20 .ks-process { gap: 72px 64px; max-width: 1080px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .ks.kk20 .ks-process__item .ks-process__photos { max-width: 600px; margin: 0 auto 20px; }
}

/* =====================================================================
   PROD-20261009-033（RYO「ここも余白大きいな／写真と文字のバランス悪い」）/experience/observation/「標本と草木染」の白カード
   原因（1440 実測）：カードを 1:1 の2カラムにしていたため、写真が 510×388、文字は2行（高さ89px）でカードの高さ 471px。
     899px以下は写真が 612×466 まで大きくなり、文字は1行（56px）でカード 614px。
   変更：写真の列を固定幅に（1100px以上 320px／900〜1099px 280px）、余白 48px → 32px 40px。899px以下は写真を最大 360px・中央。
   ===================================================================== */
.ks.kk20 .kk-program.ks-split--rev { padding: 32px 40px; gap: 40px; }
@media (min-width: 900px) {
  .ks.kk20 .kk-program.ks-split--rev { grid-template-columns: 1fr 280px; }
}
@media (min-width: 1100px) {
  .ks.kk20 .kk-program.ks-split--rev { grid-template-columns: 1fr 320px; }
}
@media (max-width: 899px) {
  .ks.kk20 .kk-program.ks-split--rev { padding: 28px 22px; gap: 24px; }
  .ks.kk20 .kk-program.ks-split--rev .ks-split__media { max-width: 360px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .ks.kk20 .kk-program.ks-split--rev { grid-template-columns: 1fr 240px; align-items: center; }
  .ks.kk20 .kk-program.ks-split--rev .ks-split__media { order: 2; max-width: none; margin: 0; }
}

/* =====================================================================
   PROD-20261009-035（RYO「ヘッダーの体験にカーソル合わせると／サブメニュー出てきて／いきもの観察　クラフト体験／が押せるように／
   スマホの時は／親子関係というか／体験の中に…体験も押せるし…も押せる感じ」）
   PC（ナビが横並びの 1024px 以上）：「体験」にホバー／キーボードでフォーカスするとサブメニュー（白・角丸・影・#0c44a2・700）。
     「体験」から下へ移動する途中で閉じないよう、サブメニューの上側に透明な橋（padding-top）を持たせる。ホバー前の見た目は変えない。
     タッチ端末（hover できない）は js/main.js で、1回目のタップでサブメニューを開き、2回目で「体験」へ移動。
   SP（ドロワー・1023px 以下）：「体験」の下に子項目2つを字下げして常に表示。
   ===================================================================== */
.header__nav .header__nav-parent { position: relative; }
.header__nav ul.header__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  display: block;
  min-width: 190px;
  margin: 0;
  padding: 14px 0 0;            /* 「体験」との間の透明な橋（ホバーが途切れない） */
  list-style: none;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.header__nav ul.header__sub::before {
  content: '';
  position: absolute;
  inset: 14px 0 0 0;
  z-index: -1;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 8px 16px rgba(14, 58, 99, .12), 0 2px 4px rgba(14, 58, 99, .06);
}
.header__nav ul.header__sub li { display: block; }
.header__nav ul.header__sub a {
  display: block;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--kk-blue);
  white-space: nowrap;
}
.header__nav ul.header__sub li:first-child a { padding-top: 16px; }
.header__nav ul.header__sub li:last-child a { padding-bottom: 16px; }
.header__nav ul.header__sub a:hover,
.header__nav ul.header__sub a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.header__nav .header__nav-parent:hover > ul.header__sub,
.header__nav .header__nav-parent:focus-within > ul.header__sub,
.header__nav .header__nav-parent.is-sub-open > ul.header__sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) { .header__nav ul.header__sub { transition: none; } }
/* SP ドロワー：子項目を字下げして常に表示 */
.sp-nav ul.sp-nav__sub { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--line); list-style: none; }
.sp-nav ul.sp-nav__sub a { font-size: 14px; font-weight: 700; color: var(--navy); }

/* =====================================================================
   PROD-20261009-036：本文の文節の塊（js/main.js が包む .kk-ph）。塊の途中では折り返さない。
   1行より長い塊は inline-block の幅の上限（行の幅）で中で折り返すので、はみ出さない。
   ===================================================================== */
.kk-ph { display: inline-block; }
/* 入会までの流れの小見出し（お問い合わせ・説明と体験参加・お申し込み・活動スタート）は語の途中で折らない */
.ks.kk20 .ks-flow__title { word-break: keep-all; overflow-wrap: anywhere; }
/* PROD-036 2.：入会までの流れは 900〜1199px で4列だとカードの文字幅が 88〜160px と窮屈なので2列に（1200px以上は4列のまま・列幅は均等） */
@media (min-width: 900px) and (max-width: 1199px) { .ks.kk20 .ks-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ks.kk20 .ks-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* PROD-036 2.：アクセスのリストは 900〜1199px で内容の列が 158px しかないので、項目名を上・内容を下の1列に */
@media (min-width: 900px) and (max-width: 1199px) { .ks.kk20 .ks-access .ks-dl--stack.kk-panel .ks-dl__row { grid-template-columns: 1fr; gap: 2px; } }
/* PROD-036 2.：900〜1199px で1行が15字未満になっていた並び（DIR-006 の指摘の再点検・本番 023〜035 後の実測）を列数を減らして広げる */
@media (min-width: 900px) and (max-width: 1199px) {
  .ks.kk20 .ks-steps--4, .ks.kk20 .ks-steps--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* about CONCEPT（4列 13.6字→）・観察の流れ／活動内容 */
  .ks.kk20 .kk-months .ks-timeline__item { width: calc((100% - 40px) / 3); }                          /* 1年の活動（4列 13.8字→3列） */
  .ks.kk20 .ks-day { grid-template-columns: repeat(3, minmax(0, 1fr)); }                               /* モデルコース（5列 10.6字→3列） */
  .ks.kk20 .ks-cols--3:has(.ks-card--panel) { grid-template-columns: repeat(2, minmax(0, 1fr)); }     /* ワークショップ（3列・料金欄 9.9字→2列） */
  .ks.kk20 .ks-cols--boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }                       /* フィールドプログラムの箱（3列・4.5〜9.4字→2列） */
  .ks.kk20 .ks-cols--boxes > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ks.kk20 .kk-dlsplit .ks-dl .ks-dl__row { grid-template-columns: 1fr; gap: 2px; }                   /* 募集要項（内容 10.6字→項目名を上に） */
}

/* =====================================================================
   PROD-20261009-038（RYO「写真枠次は細すぎ」：7px は太い・5px は細すぎ）白枠を中間の 6px に（PROD-023 の値から 1px ずつ太く）。
   基本 5px → 6px（TOP 活動記録の写真・下層の写真・重ねのプリント・Instagram 風の写真・記事のアイキャッチ・番号タイル）。
   599px以下で細くしているもの（重ねのプリント・見つかった生きもの）と、重ねた小さい写真は 4px → 5px。
   ===================================================================== */
.log-card__img, .log-card__photo-empty,
.log-card__photo, .subpage-card--log .subpage-card__photo { border-width: 6px; }
.kk20 .ks-ph { border-width: 6px; }
.kk20 .kk-print { border-width: 6px; }
.ks.kk20 .ks-ig { border-width: 6px; }
.ks.kk20 .ks-step__photos--2, .ks.kk20 .ks-works__photos--2 { border-width: 6px; }
.ks.kk20 .ks-works__photos--2 .ks-ph:nth-child(2),
.ks.kk20 .ks-step__photos--2 .ks-ph:nth-child(2) { border-width: 5px; }
.ks.kk20 .ks-step--text .ks-step__num { border-width: 6px; }
.kk20.kk20-single .subpage-thumb { border-width: 6px; }
@media (max-width: 599px) {
  .kk20 .kk-print { border-width: 5px; }
  .ks.kk20 .kk-figs .ks-ph { border-width: 5px; }
}

/* =====================================================================
   PROD-20261009-037
   1. TOP 活動記録のタグ（KK-47・RYO「なんでPCとスマホでタグ違うんだよ／PCに統一」）：
      原因＝style.css L2472〜2481（@media max-width:899px）のカンプ由来の SP 専用指定（地色 #b0d2f0／クラフト #e8c9a6・白文字・角丸4px・枠なし）が残っていた。
      899px以下も PC（L987〜996）と同じ値に戻す。文字色は PC のまま（コントラストは RYO 承知で現状維持）。
   5. TOP キッズクラブの SP（899px以下）：写真を全面に敷いて文字・ボタンを重ねる形（PROD-019）では、ボタンを他の SP ボタンと同じ幅
      （画面幅−60px）にすると写真の子どもに必ず重なるため、RYO の代わりの案（添付2枚目＝TOP ABOUT と同じプリント写真）にする：
      写真を白枠＋影のプリント（4:3・少し傾け）で上に、見出し・本文・ボタンを下に（水色の地）。PC（900px以上）は変えない。
      ボタンが狭かった原因＝.kidsclub__panel が中身の幅（見出し画像 260px）に縮む作り（flex の子）で、ボタンの width:100% がその 260px になっていた。
   ===================================================================== */
@media (max-width: 899px) {
  body.home .activitylog .log-card__tag { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
  body.home .activitylog .log-card__tag--craft { background: #fff2df; border-color: #f0ddb8; color: #9a6a1c; }

  body.home .kidsclub { display: block; min-height: 0; padding: 56px var(--sp-gutter, 30px) 72px; overflow: visible; }
  body.home .kidsclub .kidsclub__photo {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 600px;
    height: auto !important;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
    border: 5px solid var(--white);
    border-radius: 2px;
    box-shadow: 0 8px 22px rgba(14, 58, 99, .16);
    transform: rotate(-1.5deg);
    background-size: cover !important;
    background-position: 62% 50% !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  body.home .kidsclub .kidsclub__panel { width: 100%; max-width: 600px; margin: 0 auto; padding: 36px 0 0 !important; }
}
@media (min-width: 600px) and (max-width: 899px) {
  body.home .kidsclub .kidsclub__photo { border-width: 6px; }
}
@media (max-width: 899px) {
  /* ボタンを他の SP ボタンと同じ幅（画面幅−60px）にするため、文字の入れ物は画面幅いっぱい（写真だけ最大 600px） */
  body.home .kidsclub .kidsclub__panel { max-width: none; }
}

/* =====================================================================
   PROD-20261009-039
   1. あゆみ（025 のやり直し・RYO「あゆみの背景じゃなくて白の浮いてた部分を青にしろって言っただろ」）
      セクションの地は 025 より前の白に戻す（マークアップで ks-section--tint を外した）。年表はカード（kk-panel）に戻し、
      カードの地を水色 #eaf4fb・影なし（角丸 16px はそのまま）。写真なし・中央 760px は 025 のまま。
      行の区切り線は水色の上で見えるように #e3edf4（白の上 1.19:1）→ #b9d1e2（水色の上 1.42:1）
   2. キッズクラブの比較カード（028・RYO「1a」）：「キッズクラブ」側の青い外枠（box-shadow の 3px リング）を消し、
      カードの地を水色に。区切り線（タイトル下 2px・行の 1px）は 1. と同じ #b9d1e2。対の「体験プログラム」カードは変えない
   3. 観察 SAFETY（034・RYO「2残りの1枚使えよ」）：写真を3枚に（v4_w23.jpg を追加）。
      1200px以上：写真群の列をカードの下端まで伸ばし、大1枚（残りの高さ）＋小2枚（4:3）の組みで埋める＝右下の空き 0
      900〜1199px：2カラムのままでは写真が縦長にならずに高さを埋められない（列幅 378〜528px・高さ 706〜793px）ため、
        899px以下と同じ1カラム（カードの下に写真の重ね・最大 600px）にする
   ===================================================================== */
.ks.kk20 .ks-timeline.kk-hist-card { background: var(--sky-01); box-shadow: none; }
.ks.kk20 .ks-timeline.kk-hist-card .ks-timeline__item { border-bottom-color: #b9d1e2; }
.ks.kk20 .ks-timeline.kk-hist-card .ks-timeline__item:last-child { border-bottom: 0; }

.ks.kk20 .kk-compare__card--hl { background: var(--sky-01); box-shadow: 0 8px 16px rgba(14, 58, 99, .08), 0 2px 4px rgba(14, 58, 99, .05); }
.ks.kk20 .kk-compare__card--hl .kk-compare__title { border-bottom-color: #b9d1e2; }
.ks.kk20 .kk-compare__card--hl .kk-compare__row { border-bottom-color: #b9d1e2; }
.ks.kk20 .kk-compare__card--hl .kk-compare__row:last-child { border-bottom: 0; }

@media (min-width: 1200px) {
  .ks.kk20 .kk-split--fill { align-items: stretch; }
  .ks.kk20 .kk-split--fill .ks-split__media { position: relative; }
  .ks.kk20 .kk-prints.kk-prints--fill {
    position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto;
    gap: 20px; padding: 0;
  }
  .ks.kk20 .kk-prints--fill .kk-print { position: static; width: auto; margin: 0; }
  .ks.kk20 .kk-prints--fill .kk-print--main { grid-column: 1 / -1; aspect-ratio: auto; min-height: 0; transform: rotate(-.6deg); }
  .ks.kk20 .kk-prints--fill .kk-print--main img { object-position: 50% 35%; }
  .ks.kk20 .kk-prints--fill .kk-print--s1 { aspect-ratio: 4 / 3; transform: rotate(-1.5deg); }
  .ks.kk20 .kk-prints--fill .kk-print--s2 { aspect-ratio: 4 / 3; transform: rotate(1.5deg); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .ks.kk20 .ks-split.kk-split--fill { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ks.kk20 .kk-split--fill .ks-split__media { width: 100%; max-width: 600px; margin: 0 auto; }
}

/* =====================================================================
   PROD-20261009-040（RYO「ボタンなんでこんな幅狭いんだ／あと2つのボタンで幅違うの気になる／幅広げて2つとも揃えて」）
   /experience/ の Instagram・LINE ボタン（.ks-more--row 内）。原因：幅の指定がなく（width:auto・flex 0 1 auto）、
   文字数＋左右 padding の幅（1440 で 167px／127px、899px以下 151px／111px）になっていた。
   変更：768px以上は2つとも TOP の他ボタンと同じ 307px で横並び。767px以下は2つとも同じ幅（最大 315px＝375 で TOP・お問い合わせの SP ボタンと同じ）で縦に積む。
   色・形・高さ・padding は変えない
   ===================================================================== */
.ks.kk20 .ks-more--row .btn.kk-btn--ig,
.ks.kk20 .ks-more--row .btn.kk-btn--line { width: 307px; min-width: 0; max-width: 100%; justify-content: center; }
@media (max-width: 767px) {
  .ks.kk20 .ks-more--row:has(.kk-btn--ig) { flex-direction: column; align-items: center; }
  .ks.kk20 .ks-more--row .btn.kk-btn--ig,
  .ks.kk20 .ks-more--row .btn.kk-btn--line { width: 100%; max-width: 315px; }   /* 375 で TOP・お問い合わせの SP ボタンと同じ 315px */
}

/* =====================================================================
   PROD-20261009-041（RYO「まだ余白気になる／あと写真左文字右に」）/experience/observation/「標本と草木染」のカード（2回目の指摘）
   原因（1440 実測）：カードが全幅 1160px で文字の列が 720px あり、本文が1行。写真 320×240 に対して文字のかたまりが 73px で、
     文字の上下に 84px ずつの空き。
   変更：写真を左・文字を右（ks-split--rev を外した）。カードの幅を最大 660px（900px以上）／720px（899px以下）で中央に、写真 280px（899px以下 240px）、本文は2〜3行になる列幅に、
     文字は写真の高さに対して上下中央、padding 32/40 → 24/28。599px以下は写真が上・文字が下のまま（写真の白枠 5px）
   ===================================================================== */
.ks.kk20 .kk-program.kk-program--mini { max-width: 720px; margin-left: auto; margin-right: auto; padding: 24px 28px; gap: 32px; align-items: center; }
.ks.kk20 .kk-program--mini .ks-split__body > :last-child { margin-bottom: 0; }
@media (min-width: 600px) {
  .ks.kk20 .kk-program.kk-program--mini { grid-template-columns: 280px minmax(0, 1fr); }
  .ks.kk20 .kk-program--mini .ks-split__media { max-width: none; margin: 0; }
}
@media (min-width: 900px) {
  .ks.kk20 .kk-program.kk-program--mini { max-width: 660px; }   /* 文字の列 292px＝本文が文節の切れ目で3行（13・16・16字） */
}
@media (min-width: 600px) and (max-width: 899px) {
  .ks.kk20 .kk-program.kk-program--mini { grid-template-columns: 240px minmax(0, 1fr); padding: 22px; gap: 24px; }
}
@media (max-width: 599px) {
  .ks.kk20 .kk-program.kk-program--mini { padding: 22px; gap: 20px; }
  .ks.kk20 .kk-program--mini .ks-split__media { max-width: 360px; }
  .ks.kk20 .kk-program--mini .ks-ph { border-width: 5px; }
}

/* =====================================================================
   PROD-20261009-042（DIR-20261009-007 差し戻し）
   F1 白枠の太さ（023/038・RYO「写真枠次は細すぎ」→ 6px（SP 5px）、023「サイト内で揃える」）：
      サイト全体の SP の境目（899px）に合わせ、900px以上はすべて 6px、899px以下はすべて 5px。
      これまでの 599px以下だけ 5px／重ねた2枚目は PC でも 5px、という分け方をやめる。
      対象：TOP 活動記録・TOP キッズクラブ（SP のプリント）・下層の写真枠・重ねのプリント・2枚重ねの外枠と2枚目・FOUND HERE・
      Instagram 風・活動記録カード・記事のアイキャッチ・番号タイル。TOP ABOUT は画像に枠が焼き込まれているため対象外（CSS では変わらない）
   ===================================================================== */
html .log-card__img, html .log-card__photo-empty, html .log-card__photo,
html .subpage-card--log .subpage-card__photo, html .subpage-media__photo, html .subpage-thumb--wide, html .ks-intro__sub,
html .kk20 .ks-ph, html .kk20 .kk-print, html .ks.kk20 .ks-ig, html .ks.kk20 .kk-figs .ks-ph,
html .ks.kk20 .ks-step__photos--2, html .ks.kk20 .ks-works__photos--2,
html .ks.kk20 .ks-works__photos--2 .ks-ph:nth-child(2), html .ks.kk20 .ks-step__photos--2 .ks-ph:nth-child(2),
html .ks.kk20 .ks-step--text .ks-step__num, html .kk20.kk20-single .subpage-thumb,
html .ks.kk20 .kk-program--mini .ks-ph { border-width: 6px; }
@media (max-width: 899px) {
  html .log-card__img, html .log-card__photo-empty, html .log-card__photo,
  html .subpage-card--log .subpage-card__photo, html .subpage-media__photo, html .subpage-thumb--wide, html .ks-intro__sub,
  html .kk20 .ks-ph, html .kk20 .kk-print, html .ks.kk20 .ks-ig, html .ks.kk20 .kk-figs .ks-ph,
  html .ks.kk20 .ks-step__photos--2, html .ks.kk20 .ks-works__photos--2,
  html .ks.kk20 .ks-works__photos--2 .ks-ph:nth-child(2), html .ks.kk20 .ks-step__photos--2 .ks-ph:nth-child(2),
  html .ks.kk20 .ks-step--text .ks-step__num, html .kk20.kk20-single .subpage-thumb,
  html .ks.kk20 .kk-program--mini .ks-ph,
  html body.home .kidsclub .kidsclub__photo { border-width: 5px; }
}

/* F3 TOP キッズクラブ 600〜899px（037c）：写真は最大 600px で中央、本文は約 255px で左寄せ、ボタンは全幅（708／839px）と、
      揃え方がばらばらだった。写真と同じ最大 600px・中央の列に、見出し・本文・ボタンを入れる（左端を写真とそろえる）。
      ボタンはその列の幅（600px）。375 は列が画面幅より広いので変わらない。PC（900px以上）は対象外 */
@media (min-width: 600px) and (max-width: 899px) {
  body.home .kidsclub .kidsclub__panel { max-width: 600px; }
}

/* F4 1090〜1199px で写真が実寸より大きく表示される（RYO「直せ違反だ」）：PROD-036 で 900〜1199px のステップを2列にしたため、
      写真の枠が実ファイルの幅（sub_obs_tarai・v4_ig_tsutsu 480px、v4_ig_kclogo 486px）より広くなっていた。
      2列のときは写真の枠を最大 492px（480px＋白枠 6px×2）にして左に寄せる（文字の列はそのまま）。 */
@media (min-width: 900px) and (max-width: 1199px) {
  .ks.kk20 .ks-steps--4 .ks-step__photo, .ks.kk20 .ks-steps--3 .ks-step__photos--1 .ks-step__photo,
  .ks.kk20 .ks-steps--3 > .ks-step > .ks-step__photo { max-width: 492px; }
  .ks.kk20 .ks-steps--3 .ks-step__photos--1, .ks.kk20 .ks-steps--3 .ks-step__photos--2 { max-width: 492px; }
}

/* =====================================================================
   PROD-20261010-043（RYO「送信ボタンのはみ出しだけなおして／他はいい」）/contact/ の送信ボタン（KK-55）
   原因：min-width 280px（L4117・L7107）で、ボタンの右端がどの幅でも左端 42px＋280px＝322px より左に来ない。
   変更：最小幅を「280px か、入力欄の列の幅の小さい方」にし、列からはみ出さないようにする（色・形・高さ・文言は変えない）
   ===================================================================== */
body:not(.home) .subpage-body .wpcf7 input[type="submit"] { min-width: min(280px, 100%); max-width: 100%; }

/* PROD-20261010-044 /about/ STORY：館長の写真 1枚（member_16.jpg・横長 3:2 をそのまま。切り抜かない） */
.ks.kk20 .kk-story-photo { margin: 0; aspect-ratio: 3 / 2; }

/* PROD-20261010-045／046：縦長の写真を 4:3 の枠に入れるとき、顔が入る位置に寄せる */
.kk20 .ks-ph img.kk-pos-face { object-position: 50% 22%; }

/* =====================================================================
   PROD-20261010-050（RYO「ワークショップ／写真縦長すぎない？／縦長しか使えないならレイアウト変えて／少なくといも今のレイアウトでこの写真の高さは違和感」）
   原因：写真の枠は正方形（ks-ph--11）で縦長ではないが、白いカードの幅いっぱい（1440 で 371px・1024 で 460px・375 で 335px）の
     正方形になるため、カードの上の 41〜58% を写真が占め、縦に長く見えていた。
   変更：カードを横型（左に正方形の写真・右に文字）に。告知画像（631×631）は正方形のまま切り抜かない。
     1200px以上：2列・写真 200px／768〜1199px：1列（カード最大 820px・中央）・写真 200px／
     767px以下：写真 112px と見出し・説明を横に並べ、料金などの表はカードの幅いっぱい。写真は白枠＋影のプリント
   ===================================================================== */
.ks.kk20 .ks-cols--3.kk-ws { grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 768px) and (max-width: 1199px) { .ks.kk20 .ks-cols--3.kk-ws { max-width: 820px; margin-left: auto; margin-right: auto; } }
@media (min-width: 1200px) { .ks.kk20 .ks-cols--3.kk-ws { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.ks.kk20 .kk-ws .ks-card--panel { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 28px; align-items: start; padding: 28px; }
.ks.kk20 .kk-ws .ks-card--panel .ks-card__photo {
  width: 100%; margin: 0; aspect-ratio: 1 / 1;
  border: 6px solid var(--white); border-radius: 2px; box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
}
.ks.kk20 .kk-ws .ks-card__inner { padding: 0; }
.ks.kk20 .kk-ws .ks-card__inner > .ks-h3 { margin-top: 0; }
@media (max-width: 899px) { .ks.kk20 .kk-ws .ks-card--panel .ks-card__photo { border-width: 5px; } }
@media (max-width: 767px) {
  .ks.kk20 .kk-ws .ks-card--panel { grid-template-columns: 112px minmax(0, 1fr); gap: 0 16px; padding: 20px; }
  .ks.kk20 .kk-ws .ks-card--panel .ks-card__photo { grid-row: 1 / span 2; }
  .ks.kk20 .kk-ws .ks-card__inner { display: contents; }
  .ks.kk20 .kk-ws .ks-card__inner > .ks-h3, .ks.kk20 .kk-ws .ks-card__inner > .ks-card__text { grid-column: 2; }
  .ks.kk20 .kk-ws .ks-card__inner > .ks-dl { grid-column: 1 / -1; margin-top: 16px; }
}

/* =====================================================================
   PROD-20261010-058（RYO「なんかハンバーガーメニュー幅狭いな／普通に横にもっと長くしてよ」）
   原因：ボタンの箱 32×24px にブラウザ既定の padding（1px 6px）が残り、線の幅が 20px（太さ 2px・間隔 10px）になっていた。押せる範囲も 32×24px。
   変更：押せる範囲を 44×44px、線を 30px（太さ 2px・間隔 9px）に。線の右端（画面右から 30px）と縦の中心は変えない（右に 7px はみ出す分を margin で戻す）。
     開いたときの × は新しい間隔に合わせて 9px ずらして回転
   ===================================================================== */
.header__burger { box-sizing: border-box; width: 44px; height: 44px; padding: 12px 7px; margin-right: -7px; background: none; border: 0; }
.header__burger span { width: 30px; height: 2px; }
.header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* =====================================================================
   PROD-20261010-053／055／056（RYO「見出し小さい」「ジャンプ率低いよ」「写真に対して見出し小さいだろ／本文と変わらん色変わってるだけじゃん」
     「01／海を見る／…大きさほぼ変わらんやん」「こういうとこも色変わってるだけで青文字小さいなあ」「コピーの下は余白開けろって／目立たないんだよコピーが」）
   大きさの順番：H2 ＞ キャッチ ＞ H3 ＞ 本文。色だけで区別していた見出し・項目名（H3・ステップの番号と見出し・定義リストの項目名・
   TOP ご利用案内の項目名・よくある質問の質問・年表の年）を、大きさでも区別する。
     SP（899px以下）：H2 28→32px（TOP と下層を統一）／キャッチ 18→24px／H3・ステップ見出し 18→20px／番号 20→30px／項目名 16→18px（本文 15px）
     PC（900px以上）：H2 40px（変えない）／キャッチ 22→28px／H3 20px（変えない）／番号 20→32px／項目名 16→19px（本文 16px）
   キャッチの下の余白：12〜20px → SP 32px／PC 40px（kk20_catch の全か所）
   ===================================================================== */
@media (max-width: 899px) {
  :root { --kk-fs-h2: 32px; --kk-fs-h3: 20px; }
  html body .section-title { font-size: 32px; }
  html body .ks.kk20 .ks-step__title, html body .ks.kk20 .ks-h3, html body .ks.kk20 .ks-flow__title,
  html body .ks.kk20 .ks-plist__name, html body .ks.kk20 .ks-works__name { font-size: 20px; }
}
html body .ks.kk20 .kk-catch { font-size: 28px; line-height: 1.55; font-weight: 700; margin-bottom: 40px; }
html body .ks.kk20 .ks-step__num, html body .ks.kk20 .ks-flow__num { font-size: 32px; line-height: 1.2; }
html body .ks.kk20 .ks-dl__row dt, html body .ks.kk20 .kk-compare__row dt, html body .ks.kk20 .ks-plist__fact dt,
html body .ks.kk20 .ks-faq__q, html body .ks.kk20 .ks-timeline__when { font-size: 19px; font-weight: 700; }
html body.home .tinfo__label, html body.home .info.kia .kia__label { font-size: 21px; font-weight: 700; }
@media (max-width: 899px) {
  html body .ks.kk20 .kk-catch { font-size: 24px; margin-bottom: 32px; }
  html body .ks.kk20 .ks-step__num, html body .ks.kk20 .ks-flow__num { font-size: 30px; }
  html body .ks.kk20 .ks-dl__row dt, html body .ks.kk20 .kk-compare__row dt, html body .ks.kk20 .ks-plist__fact dt,
  html body .ks.kk20 .ks-faq__q, html body .ks.kk20 .ks-timeline__when { font-size: 18px; }
  html body.home .tinfo__label, html body.home .info.kia .kia__label { font-size: 18px; }
}
/* 写真なしのステップの番号タイル（.ks-step--text）は大きい番号のまま（ここでは変えない） */
html body .ks.kk20 .ks-step--text .ks-step__num { font-size: 56px; }
@media (max-width: 599px) { html body .ks.kk20 .ks-step--text .ks-step__num { font-size: 44px; } }

/* =====================================================================
   PROD-20261010-054（RYO「あとコンセプトとかこういうのスマホでは二カラムにできんか？」）
   SP で1列に縦に積んでいた「写真＋短い見出し＋本文」のカード群を2列に（375 で文字の列 162px＝1行 10字前後）。
     /about/ CONCEPT（8段階）・/kidsclub/ GROWTH・/observation/ FIELD STEPS：599px以下を2列（600〜899px は既に2列）
     /about/ CLOSENESS（3枚）：899px以下を2列。3枚目は1枚分の幅で中央に置く
   対象外（1列のまま）：craft PROCESS（RYO「じゃあこのままで」）・WORKSHOP（PROD-050 の横型）・FLOOR GUIDE（ボタンと本文が長い）・
     PROGRAMS・A DAY HERE（2列にすると1行 4〜5字）・活動記録のカード（見出しが4行以上になる）
   ===================================================================== */
@media (max-width: 599px) {
  .ks.kk20 .ks-steps--4, .ks.kk20 .ks-steps--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
}
@media (max-width: 899px) {
  .ks.kk20 .ks-cols--3.kk-close { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .ks.kk20 .kk-close > .ks-card { display: flex; flex-direction: column; }
  .ks.kk20 .kk-close > .ks-card .ks-card__photo { margin-bottom: 16px; }
  .ks.kk20 .kk-close > .ks-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
}

/* PROD-20261010-057 /about/ COMMUNITY：899px以下はラベル・H2 → 写真 → 文章（PC の並びは変えない） */
@media (max-width: 899px) {
  .ks.kk20 .kk-community > .ks-split__body { display: contents; }
  .ks.kk20 .kk-community > .ks-split__body > .ks-head { order: -2; margin-bottom: 0; }
  .ks.kk20 .kk-community > .ks-split__media { order: -1; }
}
/* PROD-20261010-054：列の幅より長い文節は通常の文字に戻す（js/main.js の kkLong） */
.kk-ph.kk-ph--wide { display: inline; }
/* PROD-20261010-055：H2 を 32px にした SP で、TOP の「ご利用案内・アクセス」が「アクセ｜ス」で折れたため、H2 は文節で折り返す */
html body .section-title { word-break: auto-phrase; }
/* PROD-20261010-052：建物の写真は看板「くにみクラゲ公民館」が写真の下の方にあるため、900px以上は下寄りを見せる（899px以下は写真の高さ全体が入る） */
@media (min-width: 900px) { .subpage-hero--about { --kk-hero-pos: center 88%; } }
/* PROD-20261010-055：320〜359px では 32px の H2「フィールドプログラム」（区切れない1語）が画面からはみ出したため、375px 未満だけ画面幅に合わせて縮める（375px以上は 32px のまま） */
@media (max-width: 374px) {
  :root { --kk-fs-h2: calc(8vw + 2px); }
  html body .section-title { font-size: calc(8vw + 2px); }
}
/* PROD-20261010-056：項目名を 19px にしたため、アクセスの項目名「公共交通機関で」が 8em の列に入らず「で」だけ次の行に出た。列を 9em に（900〜1199px は従来どおり縦積み） */
@media (min-width: 600px) { .ks.kk20 .ks-access .ks-dl--stack.kk-panel .ks-dl__row { grid-template-columns: 9em 1fr; } }
@media (min-width: 900px) and (max-width: 1199px) { .ks.kk20 .ks-access .ks-dl--stack.kk-panel .ks-dl__row { grid-template-columns: 1fr; } }

/* =====================================================================
   PROD-20261010-059（DIR-20261010-010 差し戻し）
   ===================================================================== */
/* 2.（KK-57）TOP キッズクラブ 600〜899px：SP 用の文は <br> で 1行17字以下に区切ってあり、本文が約255px で 600px の列の右半分が空いていた。
   600〜899px だけ <br> を消して列の幅（600px）いっぱいに流す（文言は変えない。599px以下は <br> のまま） */
@media (min-width: 600px) and (max-width: 899px) {
  body.home .kidsclub .kidsclub__body--sp br { display: none; }
  body.home .kidsclub .kidsclub__body--sp { max-width: none; width: 100%; }
}

/* 3.（KK-63）/about/ ヘッダー：看板の位置（写真の高さの 60〜67%）がタイトルと重ならない位置を幅ごとに選ぶ。
   1200px以上は下端寄せ（看板がラベルより上）、900〜1199px は看板がタイトルの下に来る 30%、899px以下は下端寄せ（看板がラベルより上） */
.subpage-hero--about { --kk-hero-pos: center 100%; }
@media (min-width: 900px) and (max-width: 1199px) { .subpage-hero--about { --kk-hero-pos: center 30%; } }

/* 4.（KK-66）見出しの大きさをもう一段（RYO「大きさほぼ変わらんやん」「色変わってるだけ」3回目）
     SP：H2 32／キャッチ 24→26／H3・ステップ見出し 20→22／番号 30／項目名 18→20／本文 15
     PC：H2 40／キャッチ 28→30／H3・ステップ見出し 20→24／番号 32／項目名 19→21／本文 16 */
html body .ks.kk20 .kk-catch { font-size: 30px; }
html body .ks.kk20 .ks-step__title, html body .ks.kk20 .ks-h3, html body .ks.kk20 .ks-flow__title,
html body .ks.kk20 .ks-plist__name, html body .ks.kk20 .ks-works__name, html body .ks.kk20 .ks-process__title,
html body .ks.kk20 .ks-program__title, html body .ks.kk20 .ks-prog__title, html body .ks.kk20 .kk-compare__title, html body .kk20 .subpage-card--log .subpage-card__title, html body.home .activitylog .log-card__title { font-size: 24px; line-height: 1.45; }
html body .ks.kk20 .ks-dl__row dt, html body .ks.kk20 .kk-compare__row dt, html body .ks.kk20 .ks-plist__fact dt,
html body .ks.kk20 .ks-faq__q, html body .ks.kk20 .ks-timeline__when { font-size: 21px; }
html body.home .tinfo__label, html body.home .info.kia .kia__label { font-size: 22px; }
@media (max-width: 899px) {
  html body .ks.kk20 .kk-catch { font-size: 26px; }
  html body .ks.kk20 .ks-step__title, html body .ks.kk20 .ks-h3, html body .ks.kk20 .ks-flow__title,
  html body .ks.kk20 .ks-plist__name, html body .ks.kk20 .ks-works__name, html body .ks.kk20 .ks-process__title,
  html body .ks.kk20 .ks-program__title, html body .ks.kk20 .ks-prog__title, html body .ks.kk20 .kk-compare__title, html body .kk20 .subpage-card--log .subpage-card__title, html body.home .activitylog .log-card__title { font-size: 22px; }
  html body .ks.kk20 .ks-dl__row dt, html body .ks.kk20 .kk-compare__row dt, html body .ks.kk20 .ks-plist__fact dt,
  html body .ks.kk20 .ks-faq__q, html body .ks.kk20 .ks-timeline__when { font-size: 20px; }
  html body.home .tinfo__label, html body.home .info.kia .kia__label { font-size: 20px; }
}
/* 項目名を大きくした分、項目名の列を広げる（アクセス「公共交通機関で」7字） */
@media (min-width: 600px) { .ks.kk20 .ks-access .ks-dl--stack.kk-panel .ks-dl__row { grid-template-columns: 10.5em 1fr; } }
@media (min-width: 900px) and (max-width: 1199px) { .ks.kk20 .ks-access .ks-dl--stack.kk-panel .ks-dl__row { grid-template-columns: 1fr; } }

/* 5.（KK-65）CLOSENESS は SP で1列に戻す（375 で文字の列 151px・2〜4字の行が続いた）。054 の前の並び（600〜899px は写真左の横型・599px以下は縦積み） */
@media (max-width: 899px) {
  .ks.kk20 .ks-cols--3.kk-close { grid-template-columns: 1fr; gap: 48px var(--ks-gap); }
  .ks.kk20 .kk-close > .ks-card:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .ks.kk20 .kk-close > .ks-card { display: grid; grid-template-columns: 40% 1fr; gap: 0 24px; align-items: start; }
  .ks.kk20 .kk-close > .ks-card .ks-card__photo { grid-row: 1 / span 3; margin-bottom: 0; }
}

/* 6.（KK-60）540〜599px で活動記録カードの写真（log_iso_kansatsu_NEW.jpg 480px）が実寸より大きく表示された。
   1列になる 599px以下では、カードの並びの幅を最大 500px（写真 490px＝480px＋白枠 5px×2）にして中央に置く */
@media (max-width: 599px) {
  .subpage-cards--log, body.home .activitylog__list { max-width: 490px; margin-left: auto; margin-right: auto; }   /* 写真の中身が 480px（白枠 5px は枠の内側に入らないため 490px） */
}
/* PROD-20261010-059 5.：見出しを大きくした後に 375 で実測し、本文の1行平均が 8字未満だった CONCEPT（7.8字）・GROWTH（7.6字）は 599px以下を1列に戻す。
   FIELD STEPS（8.4字）だけ2列のまま */
@media (max-width: 599px) {
  .ks.kk20 .ks-steps--4, .ks.kk20 .ks-steps--3 { grid-template-columns: 1fr; gap: 40px var(--ks-gap); }
  .ks.kk20 .ks-steps--3.kk-steps-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
}
/* PROD-20261010-059 6.：1列に戻した CONCEPT・GROWTH は 540〜599px で写真の枠が実寸 480px を超えるため、枠を最大 490px（480px＋白枠 5px×2）に */
@media (max-width: 599px) {
  .ks.kk20 .ks-steps--4 .ks-step__photo, .ks.kk20 .ks-steps--3:not(.kk-steps-2col) .ks-step__photo { max-width: 490px; }
}
/* PROD-20261010-059：<br> を消した TOP キッズクラブの文（600〜899px）は文節で折り返す（「仲｜間」になったため） */
body.home .kidsclub .kidsclub__body--sp { word-break: auto-phrase; }
/* PROD-20261010-059：ワークショップの SP（767px以下）は、見出しを 22px にすると写真の横の列（約167px）で「海藻ハーバリウ｜ム」と折れたため、
   見出しをカードの幅いっぱいの1行目に置き、その下に写真と説明、料金などの表の順にする */
@media (max-width: 767px) {
  .ks.kk20 .kk-ws .ks-card__inner > .ks-h3 { grid-column: 1 / -1; grid-row: 1; margin-bottom: 14px; }
  .ks.kk20 .kk-ws .ks-card--panel .ks-card__photo { grid-row: 2; }
  .ks.kk20 .kk-ws .ks-card__inner > .ks-card__text { grid-column: 2; grid-row: 2; align-self: center; }
  .ks.kk20 .kk-ws .ks-card__inner > .ks-dl { grid-row: 3; }
}

/* =====================================================================
   PROD-20261010-060（DIR-20261010-011 差し戻し）
   ===================================================================== */
/* 3.（KK-66）H2 とキャッチの差が小さかった（375：32／26、1440：40／30）。H2 をいちばん大きくし、H2 がキャッチの 1.4倍以上になるようにする
     SP（899px以下）：H2 32→34／キャッチ 26→24（34÷24＝1.42）
     PC（900px以上）：H2 40（変えない）／キャッチ 30→28（40÷28＝1.43）
     H3・項目名は PROD-059 のまま（SP 22・20／PC 24・21） */
html body .ks.kk20 .kk-catch { font-size: 28px; }
@media (max-width: 899px) {
  :root { --kk-fs-h2: 34px; }
  html body .section-title { font-size: 34px; }
  html body .ks.kk20 .kk-catch { font-size: 24px; }
}
/* 375px 未満は H2 を画面幅に合わせて縮める（PROD-055 の考え方のまま）。374px で約34px・320px で約28px
   （TOP「体験学習施設です。」9字が 320px の列 260px に入る大きさ） */
@media (max-width: 374px) {
  :root { --kk-fs-h2: calc(10.8vw - 6.4px); }
  html body .section-title { font-size: calc(10.8vw - 6.4px); }
}
/* 375px 未満だけ、語の途中で折れていたところを直す（375px 以上は変えない）
   TOP：SP 用の <br> の行が列より長く「研究基｜地」「楽｜しみ」「お届｜け」と折れた（320・360）→ 文節で折り返す
   TOP ご利用案内：「（高校生以｜上）」（320）→ 料金の枠の左右の余白 4px→1px・字間 0 で1行に */
@media (max-width: 374px) {
  body.home .about .about__body, body.home .activitylog .activitylog__lead { word-break: auto-phrase; }
  body.home .info.kia .kia__fees li { padding: 0 1px; }
  body.home .info.kia .kia__fee-name small { white-space: nowrap; letter-spacing: 0; }
}
/* 360px 未満だけ（320 で折れていたもの。360px 以上はそのままで1行に入る）
   TOP「くにみクラゲ公民館について」ボタン：文字の入る幅 187px が13字 216px より狭く「につ｜いて」と折れた → 文字 16→15px・字間 0・左右の余白 22→14px・矢印との間 12→6px
   /kidsclub/ 1年の活動：「マイ水槽づく｜り」「透明標本づく｜り」→ カードの左右の余白 16→12px */
@media (max-width: 359px) {
  body.home .about .btn { font-size: 15px; letter-spacing: 0; padding-left: 14px; padding-right: 14px; gap: 6px; white-space: nowrap; }
  .ks.kk20 .kk-months .ks-timeline__item { padding-left: 12px; padding-right: 12px; }
}
/* PROD-20261010-060：長い文節の中の小さな区切り（js/main.js の kkSub） */
.kk-sub { display: inline-block; }
.kk-sub.kk-sub--wide { display: inline; }
/* 4.（KK-70）FIELD STEPS の SP 2列は 1行8字のルールを満たさなかったため 1列に戻した（page-observation.php から kk-steps-2col を外した。
   599px以下の .ks-steps--3 は PROD-059 の 1列・写真最大 490px がそのまま効く） */

/* =====================================================================
   PROD-20261010-061（DIR-20261010-012 差し戻し）
   ===================================================================== */
/* KK-71：TOP 本文「子ども｜たち」（320）— front-page.php で「子どもたち」を .kk-nw で包み、その中では折らない */
.kk-nw { white-space: nowrap; }
/* KK-66：375px 未満は H2 を縮めた分だけキャッチも縮め、H2÷キャッチ 1.35 以上を保つ（キャッチ＝H2÷1.35、最大 24px）
     320：H2 28.16／キャッチ 20.86（1.35）・360：32.48／24（1.35）。375px以上は変えない */
@media (max-width: 374px) {
  html body .ks.kk20 .kk-catch { font-size: min(24px, calc((10.8vw - 6.4px) / 1.35)); }
}

/* =====================================================================
   PROD-20261010-062（RYO 回答・指示）
   ===================================================================== */
/* G-1：SP（899px以下）の H2 を 34→32px（RYO「32pxに」）。TOP も同じ。375px 未満は、はみ出さないよう縮める（320 で 28.16px）
   キャッチ（例「たとえば、こんな一日。」SP 24px）は RYO の基準（「ここはちょうどいいサイズじゃん」）なので変えない（PROD-061 のまま） */
@media (max-width: 899px) {
  :root { --kk-fs-h2: 32px; }
  html body .section-title { font-size: 32px; }
}
@media (max-width: 374px) {
  :root { --kk-fs-h2: min(32px, calc(10.8vw - 6.4px)); }
  html body .section-title { font-size: min(32px, calc(10.8vw - 6.4px)); }
}
/* H／I：見出しの大きさはカードごとにスクショを見て決めた（案件 CLAUDE.md「見た目の一律適用禁止」）。SP（899px以下）だけ
   ・/experience/ 体験の種類「いきもの観察」など（.ks-prog__title）：22→24px（RYO「スマホのh3はやっぱり小さいな」）
   ・/experience/ プログラム一覧（.ks-plist）：見出し 22→24px、項目名 20→18px（RYO「h3は小さくて逆に開催／予約／料金の目安はでかいな」）。本文 15px
   ・/experience/observation/ フィールドプログラムのカード（.ks-program__title：漁港の生きもの探し・夜の漁港探検・磯の観察・ビーチコーミング・標本と草木染）：22→24px、項目名 20px はそのまま（RYO「項目名の大きさはこれでいいんだよ／見出しが小さい」）
   ・/kidsclub/ 体験プログラムとの違い（.kk-compare__title）：22→24px。項目名 20px と見出しがほぼ同じ大きさに見えていたため。項目名はそのまま
   ・大きな写真の下に見出しがあるもの（about CONCEPT・kidsclub GROWTH・observation FIELD STEPS のステップ見出し、craft 完成までの流れ、about 3つの近さ・館内のご案内のカード）：
     写真に対して見出しが小さく見えたため 22→24px（RYO の過去の指摘「写真に対して見出し小さいだろ」と同じ形）
   ・kidsclub 入会までの流れ（白いカード・丸い番号）：見出し 22→24px
   ・変えないもの：地域・学校との取り組み（写真なしの文章ブロック。本文との差が十分）、活動記録のカード（TOP・kidsclub。カード幅に対して釣り合っている）、
     craft ワークショップのカード（字間が広く、項目名より大きく見えている）、kidsclub 1年の活動・TOP いきもの（2〜3列。問題なし） */
@media (max-width: 899px) {
  html body .ks.kk20 .ks-prog__title, html body .ks.kk20 .ks-plist__name, html body .ks.kk20 .ks-program__title, html body .ks.kk20 .kk-compare__title,
  html body .ks.kk20 .ks-step__title, html body .ks.kk20 .ks-process__title, html body .ks.kk20 .ks-flow__title,
  html body .ks.kk20 .kk-close .ks-h3, html body .ks.kk20 .ks-card--plain .ks-h3 { font-size: 24px; }
  html body .ks.kk20 .ks-plist__fact dt { font-size: 18px; }
}
/* I（PC 900px以上も確認）：フィールドプログラムのカード（observation）と体験プログラムとの違い（kidsclub）は、PC でも見出し 24px と項目名 21px がほぼ同じ大きさに見えた
   → 見出し 24→28px（PC のキャッチと同じ）。項目名はそのまま
   PC で変えないもの：プログラム一覧（PC は表の形で項目名が見えず、見出し 24px と本文の差は十分）、体験の種類（項目名なし・写真付きカードで釣り合っている） */
@media (min-width: 900px) {
  html body .ks.kk20 .ks-program__title, html body .ks.kk20 .kk-compare__title { font-size: 28px; }
}
/* K：/experience/craft/ 作品例（599px以下は2列・カード幅 161px＠375）の作品名が大きすぎた（RYO「ここの作品名はでかいな」）。
   22px（062a では 24px）→ 17.5px：「海のフォトフレーム」（9字）までが1行、素材の行（15px）より大きい。600px以上は変えない */
@media (max-width: 599px) {
  html body .ks.kk20 .ks-works__name { font-size: 17.5px; }
}
/* F：ステップの番号を見出しより小さく（RYO「見つけるは上の01より大きく」）。見出しは変えず、番号だけ 見出しの約0.75倍に
     PC・SP とも 番号 32／30→18px（見出し 24px）。対象は .ks-step__num（about CONCEPT・kidsclub GROWTH・observation FIELD STEPS・craft 完成までの流れ）
     /kidsclub/ 入会までの流れの丸の中の番号（.ks-flow__num）も PROD-056 で 30／32px（見出しより大きい）になっていたので19px（見出し 24px）。写真なしのタイルの大きい番号（.ks-step--text）は対象外 */
html body .ks.kk20 .ks-step__num { font-size: 18px; }
html body .ks.kk20 .ks-flow__num { font-size: 19px; }   /* 丸（56px）の中の番号。18px では丸の中で小さく見えたため 19px */
html body .ks.kk20 .ks-step--text .ks-step__num { font-size: 56px; }
@media (max-width: 599px) { html body .ks.kk20 .ks-step--text .ks-step__num { font-size: 44px; } }
/* B（KK-61）：FIELD STEPS 04 の仮写真 exp_card_obs.jpg（792×448）は下端 15%（y≧382）に白い波が焼き込まれている。
   画像の高さを枠の 120% にして上端に合わせ、下の 1/6（y≧373）を枠の外に隠す（枠 480×360 で拡大率 0.964） */
.ks.kk20 .ks-ph.kk-ph--cropb img { height: 120%; object-position: 50% 0; }

/* C（KK-53）：Instagram ボタンの両端 1px の色の線。透明な 1px の枠の下でグラデーションが繰り返していたため、背景の基準を枠の外側に合わせ、繰り返さない */
body:not(.home) .btn.kk-btn--ig { background-origin: border-box; background-repeat: no-repeat; }

/* C（KK-54）/experience/observation/ の写真＋文字カード2枚
   ① 900px以上：「漁港の生きもの探し」は写真右（.kk-program--photo-r）、「標本と草木染」は写真左のまま → 交互
   ② 2枚の幅をそろえる：「標本と草木染」も上のカードと同じ全幅に。余白を詰めた状態（padding 24/28px・文字の上下の空き 約40px）を保つため、
      900px以上は写真と文字を半分ずつにして写真の枠を横長（5:2）にする。600〜899px は全幅で写真 240px・文字が右（PROD-041 と同じ並び） */
@media (min-width: 900px) {
  .ks.kk20 .kk-program.kk-program--photo-r .ks-split__media { order: 2; }
  .ks.kk20 .kk-program.kk-program--mini { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ks.kk20 .kk-program--mini .ks-split__media .ks-ph { aspect-ratio: 5 / 2; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .ks.kk20 .kk-program.kk-program--mini { max-width: none; }
}

/* C（KK-62）/about/ STORY：1200px以上で館長の写真の下に 880px の空きがあった。900〜1199px と同じく、写真を上（中央・最大 600px）・本文を下の1列にする */
@media (min-width: 1200px) {
  .ks.kk20 .ks-story { grid-template-columns: 1fr; gap: 48px; }
  .ks.kk20 .ks-story__media { position: static; width: 100%; max-width: 600px; margin: 0 auto; }
  .ks.kk20 .ks-story__body { width: 100%; max-width: 820px; margin: 0 auto; }
}

/* PROD-20261010-062：/experience/ 体験の種類のカードの箇条書き（.ks-bullets）で文字が重なっていた（前からあった不具合）。
   li の字下げ（text-indent: -15px）が文節の塊（inline-block の .kk-ph）の中にも引き継がれ、塊の幅が1字分狭くなって次の塊に重なっていた */
.kk-ph, .kk-sub { text-indent: 0; }

/* =====================================================================
   PROD-20261010-063（DIR-20261010-014）
   ===================================================================== */
/* 1.（KK-75）craft ワークショップのカード：見出しと項目名（料金・講師・予約）がほぼ同じ大きさに見えた（375 22／20px・1440 24／21px）。
   観察のフィールドプログラムのカードと同じく見出しを上げる。項目名はそのまま
     900〜1199px（1列・見出しの幅 536px）：24→28px。1200px以上（2列・見出しの幅 280px）：28px では大きすぎたため 24→26px（「ペットボトルキャップで生きもの飾り」だけ3行）。899px以下：22→24px */
html body .ks.kk20 .kk-ws .ks-card .ks-h3 { font-size: 28px; }
@media (min-width: 1200px) { html body .ks.kk20 .kk-ws .ks-card .ks-h3 { font-size: 26px; } }
@media (max-width: 899px) { html body .ks.kk20 .kk-ws .ks-card .ks-h3 { font-size: 24px; } }
/* 2. 観察「漁港の生きもの探し」900〜1199px：文字の列（430px）で項目名と内容が縦積みになり本文の塊が 806px、右の写真（322px）の上下が 290px ずつ空いていた。
   この幅だけ、見出し・説明（左・写真に対して上下中央）と写真（右）を上の段に並べ、開催・集合場所などの表はカードの幅いっぱいの下の段に置く（項目名と内容は横並び）。
   1200px以上・899px以下・写真右（KK-54）・カードの幅は変えない */
@media (min-width: 900px) and (max-width: 1199px) {
  .ks.kk20 .kk-program.kk-program--photo-r { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: 1fr auto auto 1fr auto; gap: 0 48px; align-items: start; }
  .ks.kk20 .kk-program--photo-r > .ks-split__body { display: contents; }
  .ks.kk20 .kk-program--photo-r > .ks-split__body > .ks-program__title { grid-column: 1; grid-row: 2; }
  .ks.kk20 .kk-program--photo-r > .ks-split__body > .ks-text { grid-column: 1; grid-row: 3; margin-bottom: 0; }
  .ks.kk20 .kk-program--photo-r > .ks-split__media { grid-column: 2; grid-row: 1 / 5; align-self: center; order: 0; }
  .ks.kk20 .kk-program--photo-r > .ks-split__body > .ks-dl { grid-column: 1 / -1; grid-row: 5; margin-top: 32px; }
  .ks.kk20 .kk-program--photo-r .ks-dl--compact .ks-dl__row { grid-template-columns: 7em minmax(0, 1fr); gap: 0 16px; }
}
/* 3.（RYO「生きもの図鑑のカードで、名前を大きくする」）名前・学名・説明がすべて 16px（SP 学名・説明 15px）だった。学名・説明は変えず、名前だけを箇所ごとに上げる
   ・TOP 大きいカード（クラゲのなかま）：写真が大きい（1440 で 490px 幅）ため 16→24px（899px以下 16→20px）
   ・TOP 小さいカード（900px以上は4枚・194〜300px 幅）：16→20px
   ・TOP 小さいカード（899px以下は3列・87〜105px 幅、学名は出ていない）：幅が狭く、名前が既に2行のため 16px のまま
   ・/creatures/ のカード（265〜392px 幅、SP は1列 280〜335px）：PC 16→22px、SP 16→20px */
html body.home .creatures .creature-feature__name { font-size: 24px; line-height: 1.4; }
html body.home .creatures .creature-card__name { font-size: 20px; line-height: 1.4; }
html body .subpage-creatures .creature-card__name { font-size: 22px; line-height: 1.4; }
@media (max-width: 899px) {
  html body.home .creatures .creature-feature__name { font-size: 20px; }
  html body.home .creatures .creature-card__name { font-size: 16px; }
  html body .subpage-creatures .creature-card__name { font-size: 20px; }
}

/* =====================================================================
   PROD-20261010-064（DIR-20261010-015）
   ===================================================================== */
/* 1.（KK-77）TOP いきものの小カード：600〜899px はカード幅 180〜277px あり名前も1行なのに 16px で小さく見えた（900px以上は 20px）。
   カード幅に合わせて 600〜899px：16→20px、560〜599px（カード幅 167〜177px）：16→18px。559px以下（名前が2行になる幅・学名なし）は 16px のまま */
@media (min-width: 600px) and (max-width: 899px) { html body.home .creatures .creature-card__name { font-size: 20px; } }
@media (min-width: 560px) and (max-width: 599px) { html body.home .creatures .creature-card__name { font-size: 18px; } }
/* 2.（KK-78）TOP 料金「大人（高校生以｜上）」：料金の枠が狭くなる 1200〜1339px と 600〜659px で、7字（12.5px＋字間で 約91px）が枠の中（78〜91px）に入らず語の途中で折れていた。
   この2つの幅帯だけ、文字 12.5→12px・字間 0・枠の左右の余白 4→1px にして1行に（374px以下は PROD-060 の対応のまま） */
@media (min-width: 1200px) and (max-width: 1339px), (min-width: 600px) and (max-width: 659px) {
  body.home .info.kia .kia__fees li { padding-left: 1px; padding-right: 1px; }
  body.home .info.kia .kia__fee-name small { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
}
/* 3.（320〜1440 を 10px刻みで調べて見つかったもの）TOP 活動記録のリード「…記録をお届けし｜ます。」（380〜390px）「…お届けしま｜す。」（400〜420px）：
   SP 用の <br> の行が列より少し長い幅で語の途中で折れていた。PROD-060 で 374px以下に当てた文節での折り返しを、899px以下まで広げる（行が列に収まる幅では見た目は変わらない） */
@media (max-width: 899px) { body.home .activitylog .activitylog__lead { word-break: auto-phrase; } }

/* =====================================================================
   PROD-20261010-065：TOP いきもの 大カード（クラゲのなかま）の名前
   600〜899px は大カード（幅 600〜890px・1列いっぱい）と小カードの名前がどちらも 20px で、900px以上の「大 24px ＞ 小 20px」の差がなかった。
   600〜899px：20→24px（900px以上と同じ差）。560〜599px（大カード 570〜590px・小カード 18px）：20→22px。559px以下は 20px のまま（小カード 16px と差がある）
   ===================================================================== */
@media (min-width: 600px) and (max-width: 899px) { html body.home .creatures .creature-feature__name { font-size: 24px; } }
@media (min-width: 560px) and (max-width: 599px) { html body.home .creatures .creature-feature__name { font-size: 22px; } }

/* =====================================================================
   PROD-20261010-066（RYO「ヘッダーのお問い合わせだけ色違う？」）ヘッダーナビの文字色をそろえる
   変更前：ナビ5項目 #1c4a73（--navy・サイトの濃い青3色のどれでもない）／お問い合わせ #33404a（.header__nav-cta の color: inherit !important で本文色を継いでいた）／
   サブメニュー #0c44a2／SP ドロワー #1c4a73
   → すべて #0c44a2（--kk-blue：見出し・英字ラベル・ボタンと同じメインの青。サブメニューが既にこの色）にそろえる。
   変えるのは文字色だけ（形・枠・下線のホバー・SP ドロワーの「お問い合わせ」ボタン〈白文字・塗り〉は変えない）
   ===================================================================== */
.header__nav a, .header__nav ul.header__sub a, .sp-nav a:not(.sp-nav__cta), .sp-nav ul.sp-nav__sub a { color: var(--kk-blue); }
.header__nav a.header__nav-cta { color: var(--kk-blue) !important; }
/* PROD-20261010-066 追加（秘書指示・RYO「前からある問題なら直せよ」）：画面に出ている #1c4a73（サイトの3色に無い色）を #0c44a2 にそろえる
   画面上の残り（本番 1440／375・12URL を getComputedStyle で洗い出し）：
   ① SP ドロワー「お問い合わせ」ボタンの地色（形・白文字はそのまま） ② ハンバーガーの3本線
   ③ お問い合わせフォームの「必須」バッジの地色 ④ お問い合わせフォームの選択欄の▼ */
.sp-nav .sp-nav__cta { background: var(--kk-blue); border-color: var(--kk-blue); }
.header__burger span { background: var(--kk-blue); }
.cf7-badge--req { background: var(--kk-blue); }
.subpage-body .wpcf7 select { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%230c44a2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); }