/* ============================================================
   えがおのまち 那覇KIDS DAY — 新V1（2026-09-22）
   「実写写真＋タイポグラフィ＋色面＋新メインロゴ」
   ------------------------------------------------------------
   ■ 色：新ロゴの実測値が正（チラシは印刷の色ずれがあるため）
     ネイビー #01438B／オレンジ #F46D01／グリーン #38A77D／レッド #CC2B2C／白／クリーム #FEFBDD
     色相は増やさない。濃淡だけを、文字のコントラスト確保のために使う。
       --orange-s  #E86100 … 白文字（大）を載せる面（白との比 3.4:1）
       --orange-lg #D95F00 … 白・クリーム地の大きな文字（3.7:1）
       --orange-t  #C25300 … 白地の小さな文字（4.6:1）
     グリーンは文字に使わない（白との比 3.0:1）。線と印だけ。
     レッドは「20日（日）」と「駐車場不可」だけ。
   ■ 大胆にするのは「写真と巨大な文字」だけ。ほかは静かに組む。
   ■ モーションはFVの読み込み時の一連の動きだけ。
   ============================================================ */

:root{
  --navy:#01438B; --navy-d:#01346C;
  --orange:#F46D01; --orange-s:#E86100; --orange-lg:#D95F00; --orange-t:#C25300;
  --green:#38A77D; --red:#CC2B2C; --white:#FFFFFF; --cream:#FEFBDD;
  --ink:var(--navy); --ink-2:#3A5F8C;
  --rule:rgba(1,67,139,.2);
  --tint:#E4ECF5;                /* 写真枠の地（ネイビーの淡色） */
  --focus:var(--navy);
  /* 書体（2026-10-16 整理）
     --f-ja  … すべての文字。見出しも本文も数字もこれで組む
     --f-num … Archivo。ロゴの太い欧文（KIDS DAY）に合わせた「表示用」の数字・英字だけ：
               FVの日付、19／20の巨大数字、フロア番号、NAHA NEXT SMILE MOVEMENT。小さな数字・時刻・電話番号には使わない
     太さ：本文 400／見出し・ラベル・ボタン 700／900 は体験名・「やってみたい！」・FVの日付・巨大数字・コンセプトだけ */
  --f-ja:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --f-num:"Archivo",var(--f-ja);
  --f-min:var(--f-ja);   /* 旧：明朝（2026-10-16 廃止。残っている参照はゴシックに落ちる） */
  --gut:16px;
  --wrap:1328px;
}
@media (min-width:1024px){ :root{ --gut:56px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; -webkit-text-size-adjust:100%; scroll-padding-top:16px; line-break:strict; }
@media (min-width:1024px){ html{ scroll-padding-top:80px; } }
body{
  margin:0; font-family:var(--f-ja); font-weight:400; font-size:16px; line-height:1.85;
  color:var(--ink); background:var(--white); overflow-x:hidden;
  font-feature-settings:"palt" 0;
}
@media (min-width:1024px){ body{ font-size:17px; } }
h1,h2,h3,p,dl,dd,ul,figure,table{ margin:0; }
ul{ padding:0; list-style:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
p,li,dd,dt,td,th,summary,h2,h3{ word-break:auto-phrase; text-wrap:pretty; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.is-dark{ --focus:#fff; }

/* 大きな見出しだけ字詰め。本文はベタ組みのまま */
.secH,.secLead,.fv__venue,.expIndex__n,.scene__name,.venue__lead,
.access__venue,.ticket__h,.recruit__lead,.deadline__v,.mission__conceptJa,.org__lead,.warn__h,.about__msg{
  font-feature-settings:"palt" 1; letter-spacing:.02em; }
.num{ font-weight:700; letter-spacing:0; }                        /* 小さな数字は日本語書体のまま（浮かせない） */
.num--d{ font-family:var(--f-num); font-weight:900; font-stretch:112%; }   /* 表示用の数字（ロゴの欧文に合わせる） */
.ph{ display:inline-block; }
.ln{ display:block; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.skip{ position:absolute; left:8px; top:-60px; z-index:110; background:var(--navy); color:#fff; padding:10px 16px; font-weight:700; }
.skip:focus{ top:8px; }
[hidden]{ display:none!important; }

.wrap{ width:min(100% - var(--gut) * 2, var(--wrap)); margin-inline:auto; }

/* 文字の大きさの段（2026-10-16 整理。ページのどこでも同じ段に見えるようにする）
     大（表示）  … FVの日付／「やってみたい！」／NAHA NEXT SMILE MOVEMENT の3か所だけ（19・20 の巨大な数字とフロア番号は図形として別）
     中1 章タイトル .secH … PC 32px／SP 24px。どの章も最初・左そろえ。項目名で書く（キャッチを章タイトルにしない）
     中2 要点 .secLead・体験のキャッチ .scene__lead … PC 24px／SP 19〜20px。章タイトルの直後に、その章で最初に伝える1〜2文
     体験名 .scene__nameT … PC 32〜38px／SP 26〜30px（6つとも同じ）
     本文 … PC 17px／SP 16px。補足 … 14px */
/* 章の見出し。英字の小見出しや番号は付けない */
.secH{ font-size:24px; line-height:1.35; font-weight:700; letter-spacing:.02em; }
.secH--rev{ color:#fff; }
/* 要点：章タイトルの直後の1〜2文。見出しより一段小さく、本文より大きい。行長は全角32字まで */
.secLead{ margin-top:12px; font-size:19px; font-weight:700; line-height:1.55; max-width:32em; }
.secLead--rev{ color:#fff; }
@media (min-width:1024px){ .secH{ font-size:32px; } .secLead{ margin-top:16px; font-size:24px; line-height:1.5; } }

/* ボタン */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 24px; font-weight:700; font-size:17px; text-decoration:none;
  border:2px solid currentColor; border-radius:4px; transition:background-color .15s, color .15s;
}
.btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; }
.btn--light{ background:#fff; color:var(--navy); border-color:#fff; }
.btn--light:hover{ background:var(--cream); border-color:var(--cream); }
.btn--line{ color:var(--navy); }
.btn--line:hover{ background:var(--navy); color:#fff; }

/* ============================================================
   写真枠（写真が届くまで）
   トンボ（トリムマーク）で「ここに写真が入る範囲」を示し、
   左下に待っている写真と撮影の指示を出す。グレーの四角にしない。
   ============================================================ */
.shot{ position:relative; overflow:hidden; background:var(--tint); }
.shot__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.shot__wait{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; padding:18px 20px; color:var(--ink-2); }
.shot__mark{ position:absolute; inset:12px; pointer-events:none;
  --m:rgba(1,67,139,.45);
  background:
    linear-gradient(var(--m),var(--m)) left top/18px 2px, linear-gradient(var(--m),var(--m)) left top/2px 18px,
    linear-gradient(var(--m),var(--m)) right top/18px 2px, linear-gradient(var(--m),var(--m)) right top/2px 18px,
    linear-gradient(var(--m),var(--m)) left bottom/18px 2px, linear-gradient(var(--m),var(--m)) left bottom/2px 18px,
    linear-gradient(var(--m),var(--m)) right bottom/18px 2px, linear-gradient(var(--m),var(--m)) right bottom/2px 18px;
  background-repeat:no-repeat; }
.shot__label{ position:relative; font-size:13px; font-weight:700; line-height:1.5; }
.shot__label b{ display:inline-block; margin-left:8px; padding:0 6px; font-size:11px; color:#fff; background:var(--ink-2); vertical-align:1px; }
.shot__brief{ position:relative; font-size:12px; line-height:1.6; max-width:30em; }

/* ============================================================
   開催日の表示（6体験・フロア・参加方法で共通）
   開催する日＝塗り／開催しない日＝線＋斜線。形で見分けられる。
   ============================================================ */
.dm{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.dm__box{ display:inline-flex; gap:4px; }
.dm__d{
  --on19-bg:var(--navy); --on19-fg:#fff; --on20-bg:var(--red); --on20-fg:#fff; --off:rgba(1,67,139,.42);
  position:relative; display:inline-flex; align-items:baseline; gap:1px;
  padding:3px 7px 2px; border:1.5px solid var(--off); color:var(--off);
  font-size:12px; font-weight:700; line-height:1.2; white-space:nowrap;
}   /* 札の中の「土／日」は12pxだが、数字と対で読む印なので例外 */
.dm__d b{ font-weight:700; font-size:15px; }
.dm__d:not(.is-on)::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top right, transparent calc(50% - 1px), var(--off) calc(50% - 1px), var(--off) calc(50% + .5px), transparent calc(50% + .5px)); }
.dm__d--19.is-on{ background:var(--on19-bg); border-color:var(--on19-bg); color:var(--on19-fg); }
.dm__d--20.is-on{ background:var(--on20-bg); border-color:var(--on20-bg); color:var(--on20-fg); }
.dm__t{ font-size:15px; font-weight:700; }
.dm--s .dm__d{ padding:2px 5px 1px; font-size:11px; }
.dm--s .dm__d b{ font-size:14px; }
.dm--s .dm__t{ font-size:14px; }
/* 濃い地の上 */
.is-dark .dm__d{ --on19-bg:#fff; --on19-fg:var(--navy); --off:rgba(255,255,255,.5); }
.is-dark .dm__d--20.is-on{ border-color:#fff; }

/* ============================================================
   FVを過ぎてから出る案内
   ============================================================ */
.gbar,.qbar{ position:fixed; left:0; right:0; z-index:50; transition:transform .25s ease; }
.gbar{ top:0; display:none; transform:translateY(-100%); }
.qbar{ bottom:0; display:flex; transform:translateY(100%); }
.gbar.is-on,.qbar.is-on{ transform:none; }
.qbar{
  align-items:center; justify-content:space-between; gap:8px;
  /* 右端は固定のメニューボタン（.menuBtn）の場所としてあける */
  padding:10px calc(var(--gut) + var(--menuW) + 8px) calc(10px + env(safe-area-inset-bottom)) var(--gut);
  background:var(--navy); color:#fff; box-shadow:0 -1px 0 rgba(255,255,255,.2);
}
.qbar__when{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 2px; font-weight:700; line-height:1.3; }
.qbar__when .num{ font-size:20px; }
.qbar__when small{ font-size:12px; margin-right:2px; }
.qbar__sep{ font-size:14px; }
.qbar__free{ margin-left:10px; padding:2px 8px; background:#fff; color:var(--orange-t); font-size:14px; font-weight:700; align-self:center; }
.qbar__btn{ flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 14px; background:#fff; color:var(--navy); font-weight:700; text-decoration:none; border-radius:4px; }
@media (min-width:600px){ .qbar__btn{ padding:0 18px; } }
@media (min-width:1024px){
  .qbar{ display:none; }
  .gbar{
    display:flex; align-items:center; gap:40px; height:64px;
    padding:0 calc(var(--gut) + var(--menuW) + 24px) 0 var(--gut);     /* 右端は固定のメニューボタンの場所 */
    background:#fff; box-shadow:0 1px 0 var(--rule);
  }
  .gbar__logo{ display:block; width:78px; flex:none; }
  .gbar__logo img{ width:100%; height:auto; }
  .gbar__when{ margin-left:auto; font-size:14px; font-weight:700; }
  .gbar__when .num{ font-size:17px; }
}

/* ============================================================
   サイトメニュー（2026-10-22）
   ・ボタンは画面に固定。SP・タブレット＝右下（親指で届く。FVを過ぎると下の案内バーの右端に収まる）、
     PC＝右上（FVを過ぎると上の案内バーの右端に収まる）。FV・本文の上では小さな1つのボタンだけで、大きく覆わない
   ・アイコンだけにせず「メニュー」と書く。SPの狭い幅ではアイコンの下に文字（横幅をとらない）
   ・開いた画面：SP＝全面、600px以上＝右からの板（幅400px）。項目は1行ずつ、押せる高さ52px。画面の高さが足りなければ一覧だけスクロール
   ・飾り（影・動き）は付けない
   ============================================================ */
:root{ --menuW:68px; }                                    /* ボタンの幅（案内バーの右端にあける幅もこの値） */
@media (min-width:600px){ :root{ --menuW:132px; } }
.menuBtn{
  position:fixed; z-index:60; right:var(--gut); bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:var(--menuW); min-height:44px; padding:4px 2px; white-space:nowrap;
  background:var(--navy); color:#fff; border:2px solid #fff; border-radius:4px;
  font:inherit; font-size:14px; font-weight:700; line-height:1.2; cursor:pointer;
}
.menuBtn__i,.menuBtn__i::before,.menuBtn__i::after{ display:block; width:18px; height:2px; background:currentColor; }
.menuBtn__i{ position:relative; margin:5px 0; }
.menuBtn__i::before,.menuBtn__i::after{ content:""; position:absolute; left:0; }
.menuBtn__i::before{ top:-5px; }
.menuBtn__i::after{ top:5px; }
@media (min-width:600px){
  .menuBtn{ flex-direction:row; gap:8px; font-size:16px; padding:0 14px; }
}
@media (min-width:1024px){
  .menuBtn{ top:10px; bottom:auto; }
}
.menuBtn:hover{ background:var(--navy-d); }
.menuBtn:focus-visible{ outline:3px solid var(--navy); outline-offset:2px; }

.smenu{ position:fixed; inset:0; z-index:100; display:flex; justify-content:flex-end; background:rgba(1,52,108,.45); }
.smenu[hidden]{ display:none; }
.smenu__panel{ display:flex; flex-direction:column; width:100%; height:100%; background:#fff; color:var(--navy); }
@media (min-width:600px){ .smenu__panel{ width:400px; } }
.smenu__head{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:64px; padding:10px var(--gut); border-bottom:1px solid var(--rule);
}
.smenu__h{ font-size:16px; font-weight:700; }
.smenu__close{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  background:#fff; color:var(--navy); border:2px solid var(--navy); border-radius:4px;
  font:inherit; font-size:16px; font-weight:700; cursor:pointer;
}
.smenu__close:hover{ background:var(--cream); }
.smenu__x{ position:relative; width:14px; height:14px; }
.smenu__x::before,.smenu__x::after{ content:""; position:absolute; left:-1px; top:6px; width:16px; height:2px; background:currentColor; }
.smenu__x::before{ transform:rotate(45deg); }
.smenu__x::after{ transform:rotate(-45deg); }
.smenu__nav{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.smenu__list{ margin:0; padding:4px var(--gut) calc(24px + env(safe-area-inset-bottom)); list-style:none; }
.smenu__list li + li{ border-top:1px solid var(--rule); }
.smenu__a{ display:flex; align-items:center; min-height:52px; padding:4px 0; font-size:18px; font-weight:700; line-height:1.4; color:var(--navy); text-decoration:none; }
.smenu__a:hover{ text-decoration:underline; text-underline-offset:4px; }
html.is-menu-open,html.is-menu-open body{ overflow:hidden; }      /* 開いているあいだ背景をスクロールさせない */

/* ============================================================
   ① FV — 1枚のイベントビジュアル（2026-10-16 改訂：読む順を整える）
   読む順：冠協賛「エールクリエイト presents」（上・クレジット）→ イベントロゴ（主役）→ 何のイベントか（キャッチ＋サブ）
           → 開催日 → 時間・会場 → 参加無料／入場は申込不要 → 6つの体験（詳しい内容への出口はここだけ）→ 最寄り駅1行＋主催
   SP：冠協賛は写真の上の細い帯（写真に重ねない）。写真の下端にロゴをまたがせ、その下にキャッチ → 情報をひと続きで組む。
       1画面目（390×844）に「冠協賛・写真・ロゴ・何のイベントか・開催日・時間・会場・無料・申込不要」まで入れる
   PC：左の段は「ロゴ → キャッチ → 日時・会場・札 → 最寄り駅＋主催」の1本の流れ。右は写真を天地いっぱいに。
       6体験は写真の下端に入り込むネイビーの帯（視線は 左上のロゴ → 右上の写真 → 左の情報 → 右下の6体験 と動く）
   ============================================================ */
.fv{
  position:relative; display:grid; background:var(--cream); color:var(--navy);
  grid-template-columns:var(--gut) minmax(0,1fr) var(--gut);
  grid-template-rows:repeat(7,auto);            /* 冠協賛 / 写真 / ロゴ / キャッチ / 日時・会場・札 / 6体験 / 最寄り駅＋主催 */
  min-height:100svh;
}
.fv > *{ min-width:0; }

/* 冠協賛：SPは写真の上の帯。ロゴと presents を横に並べ、中央にそろえる（写真を覆わない）。
   2026-10-23 依頼者の指示で大きく：ロゴの高さ 22px → 画面幅の8.6%（390px幅で約34px）。タブレットは42px */
.fv__presents{ grid-column:1/-1; grid-row:1; display:flex; align-items:center; justify-content:center; gap:12px; padding:12px var(--gut) 10px; }
.fv__presentsLogo{ height:clamp(30px, 8.6vw, 36px); width:auto; }
.fv__presentsName{ font-size:18px; font-weight:700; }
.fv__presentsBy{ font-family:var(--f-num); font-weight:700; font-stretch:100%; font-size:16px; letter-spacing:.1em; line-height:1; color:var(--navy); }
/* presents の枠の幅を固定する（読み込み中に書体が切り替わっても、ロゴと presents の位置が動かない。2026-10-23） */
.fv__presentsBy{ display:inline-block; width:5.2em; white-space:nowrap; }
@media (min-width:600px) and (max-width:1023px){
  .fv__presentsLogo{ height:42px; }
  .fv__presentsBy{ font-size:18px; }
}

.fv__photo--sp{ grid-column:1/-1; grid-row:2; height:34svh; min-height:240px; max-height:340px; }
.fv__photo--pc{ display:none; }
.fv__photo{ isolation:isolate; }        /* 重ねた写真の重なり順を枠の中に閉じる（6体験の帯より上に出ない） */
.fv__cutout{ display:none; pointer-events:none; }
.fv__cutout img,.fv__cutout .shot__img{ position:static; width:100%; height:auto; display:block; object-fit:contain; }
/* イベントロゴ：写真の下端にまたがせる。幅は画面の約84%（旧 100%。キャッチを足したぶん約1割小さく。主役であることは変わらない） */
.fv__logo{ grid-column:2; grid-row:3; z-index:2; margin-top:-96px; }
.fv__logo img{ width:min(100%, 84vw, 470px); height:auto; }

/* 何のイベントか：ロゴのすぐ下。キャッチは2行で言い切り（site.js の fvCopy）、サブは本文の大きさ */
.fv__copy{ grid-column:2; grid-row:4; margin-top:14px; }
.fv__catch{ font-size:clamp(21px, 5.9vw, 24px); font-weight:700; line-height:1.4; letter-spacing:.01em; font-feature-settings:"palt" 1; }
.fv__sub{ margin-top:8px; font-size:16px; line-height:1.65; }

.fv__info{ grid-column:2; grid-row:5; padding-top:16px; }
.fv__date{ line-height:1; }
.fv__year{ display:block; font-size:14px; font-weight:700; letter-spacing:.06em; margin-bottom:4px; }
.fv__days{ display:flex; align-items:flex-start; font-size:clamp(44px, 13vw, 56px); }
.fv__days .num{ font-weight:900; font-stretch:116%; line-height:.9; }
.dow{ font-family:var(--f-ja); font-size:15px; font-weight:700; line-height:1; padding:4px 4px 3px; margin:.08em 0 0 5px; }
.dow--sat{ background:var(--navy); color:#fff; }
.dow--sun{ background:var(--red); color:#fff; }
.fv__sep{ font-size:.45em; align-self:center; margin:0 1px 0 4px; }
.fv__place{ margin-top:10px; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; }
.fv__time{ font-size:24px; font-weight:700; font-stretch:104%; line-height:1.2; }
.fv__venue{ font-size:20px; font-weight:700; line-height:1.35; }
.fv__venue small{ font-size:13px; font-weight:700; margin-left:8px; }

/* 「参加無料」「入場は申込不要」：同じ高さ・同じ文字の大きさの札を2つ並べる（色だけ役割で変える）。
   体験の一部は事前申込制なので、下に短い注記を添える */
.fv__keys{ margin-top:14px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.fv__key{ display:inline-flex; align-items:center; min-height:46px; padding:0 14px; color:#fff; font-size:19px; font-weight:700; line-height:1.2; letter-spacing:.04em; font-feature-settings:"palt" 1; }
.fv__key--free{ background:var(--orange-s); }
.fv__keyNote{ margin-top:8px; font-size:14px; font-weight:400; line-height:1.6; color:var(--ink-2); }
.fv__keyNoteL{ display:block; }                                  /* 注記は1行ずつ（飲食は有料／事前申込の体験） */

/* 6つの体験：それぞれの詳しい内容へ移動するリンク。6つとも同じ形（選択中の状態は持たない）。
   下向きの矢印で「このページの下へ移動する」ことを示す。FVから詳しい内容への出口はここだけ */
.fv__exps{ grid-column:2; grid-row:6; margin-top:20px; }
.fv__expsH{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 10px; font-size:16px; font-weight:700; line-height:1.5; }
.fv__expsL{ margin-top:8px; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.fvx__link{
  display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:46px; padding:0 14px;
  font-size:16px; font-weight:700; line-height:1.3; color:var(--navy); text-decoration:none;
  background:#fff; border:1.5px solid rgba(1,67,139,.35); border-radius:4px;
  transition:border-color .2s, background-color .2s, color .2s;
}
/* 矢印は下向き（ページ内の下へ移動する印。開閉の印に見えないように） */
.fvx__linkI{ flex:none; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; transition:transform .2s ease; }
.fvx__link:hover{ border-color:var(--navy); }
.fvx__link:hover .fvx__linkI{ transform:translateY(2px); }
@media (min-width:600px) and (max-width:1023px){ .fv__expsL{ grid-template-columns:repeat(3,minmax(0,1fr)); } }   /* タブレットは3つずつ2段 */
@media (max-width:599px){ .fvx__link{ padding:0 12px; font-size:15px; } }

/* 写真の重ね方：体験ごとの写真を枠いっぱいに重ね、表示中のものだけ見せる。
   次の写真が上でフェードし、終わってから下の写真を外す（枠の大きさは変わらない） */
.fvx__layer{ position:absolute; inset:0; opacity:0; }
.fvx__layer.is-active{ opacity:1; }

/* FVの最後の段：最寄り駅1行（＋⑧アクセスへのリンク）と、主催のクレジット。SPは縦に並べる */
.fv__foot{ grid-column:2; grid-row:7; margin:20px 0 24px; padding-top:14px; border-top:1px solid var(--rule); display:grid; gap:14px; }
/* 最寄り駅の案内（ふつうの文字）と、⑧アクセスへのリンク（太字＋矢印）。強調はリンクの1か所だけにし、
   下線はカーソルを合わせたときだけ。狭い幅ではリンクが丸ごと次の行へ回る（2026-10-23） */
.fv__access{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 20px; font-size:15px; font-weight:400; line-height:1.6; color:var(--ink); }
.fv__accessMore{ display:inline-flex; align-items:baseline; gap:6px; padding:4px 0; font-weight:700; text-decoration:none; white-space:nowrap; }
.fv__accessMore:hover{ text-decoration:underline; text-underline-offset:4px; }
.fv__org{ display:flex; align-items:center; gap:12px; }
.fv__orgMark{ flex:none; }
.fv__orgMark img{ height:44px; width:auto; }
.fv__orgT{ display:grid; font-size:15px; font-weight:700; line-height:1.4; }
.fv__orgT small{ font-size:14px; font-weight:400; color:var(--ink-2); }

@media (min-width:1024px){
  .fv{
    grid-template-columns:var(--gut) repeat(12,minmax(0,1fr)) var(--gut);
    /* 冠協賛 / ロゴ / キャッチ / 日時・会場・札 / 最寄り駅＋主催。
       4行目（日時・会場・札）は中身より縮めない（minmax(0,1fr) だと低い画面で行が潰れて下に重なる） */
    grid-template-rows:auto auto auto minmax(auto,1fr) auto;
    /* 高さを固定すると、入り切らないぶんがそのまま重なりになる。足りないときだけFVが伸びるように min-height にする */
    min-height:min(100svh,980px);
    /* イベントロゴの幅。画面の高さが低いときだけ縮める（高さ800pxで約380px、900pxで約500px、1000px以上で540px）。
       2026-10-16：キャッチを足したぶん約1割小さく（旧 140svh−700px：800→420／900→560／上限600）。冠協賛も同じ幅で中央にそろえる */
    --fv-logo-w:min(100%, clamp(340px, calc(126svh - 630px), 540px));
    --fv-split:8;                                /* 写真とクリーム面の境界（何列目から写真か） */
    --crown-h:clamp(46px, 7svh, 64px);           /* 冠協賛のロゴの高さ（2026-10-23：旧 約43px → 高さ900pxで約63px） */
  }
  .fv__photo--sp{ display:none; }
  .fv__photo--pc{ display:block; grid-column:var(--fv-split)/-1; grid-row:1/-1; }
  .fv__cutout{ display:block; grid-column:calc(var(--fv-split) - 2)/calc(var(--fv-split) + 3); grid-row:2/-1; align-self:end; z-index:2; }
  /* 冠協賛：ページ全体の中央（写真の左右をまたぐ上の帯）に「エールクリエイト presents」を横一列のまとまりで置く。
     2026-10-23：ロゴを大きく（--crown-h）し、presents を右に並べた（旧：小さなロゴの下に線つきの presents）。
     帯の高さは旧とほぼ同じなので、写真のアーチ（.fv__photo--pc の margin-top）とFVの高さは変わらない */
  .fv__presents{ grid-column:2/14; grid-row:1; width:auto; justify-self:center; flex-direction:row; align-items:center; gap:18px; padding:22px 0 0; z-index:3; }
  .fv__presentsLogo{ height:var(--crown-h); }
  .fv__presentsBy{ font-size:22px; letter-spacing:.14em; width:5.5em; }
  .fv__logo{ grid-column:2/8; grid-row:2; margin:8px 0 0; }
  .fv__logo img{ width:var(--fv-logo-w); max-width:none; }
  /* キャッチ：ロゴの直下。大きさはロゴ＞キャッチ＞（日付の数字は大きいが、位置で2番目に読まれる） */
  .fv__copy{ grid-column:2/8; grid-row:3; margin-top:clamp(12px, 2.2svh, 22px); max-width:600px; }
  .fv__catch{ font-size:clamp(24px, 3.1svh, 28px); line-height:1.35; }
  .fv__sub{ margin-top:8px; font-size:17px; }
  .fv__info{ grid-column:2/8; grid-row:4; align-self:start; padding:clamp(12px, 2svh, 20px) 0 16px; }
  .fv__year{ font-size:15px; margin-bottom:6px; }
  .fv__days{ font-size:clamp(60px, min(5.8vw, 8.4svh), 88px); }                                /* 1440×900 で約76px（旧 90px） */
  .dow{ font-size:18px; padding:5px 5px 4px; margin-left:8px; }
  .fv__place{ margin-top:12px; gap:4px 20px; }
  .fv__time{ font-size:28px; }
  .fv__venue{ font-size:24px; }
  .fv__venue small{ font-size:14px; }
  .fv__keys{ margin-top:14px; gap:10px; }
  .fv__key{ min-height:48px; padding:0 18px; font-size:21px; }
  .fv__keyNote{ margin-top:6px; }
  /* 最寄り駅と主催を1行に。幅が足りないときだけ主催が下の行へ */
  .fv__foot{ grid-column:2/8; grid-row:5; align-self:end; margin:0 0 26px; padding:12px 24px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; }   /* 右の余白は6体験の帯に主催が触れないため */
  .fv__access{ font-size:15px; }
  .fv__accessMore{ padding:0; }
  .fv__org{ gap:10px; }
  .fv__orgMark img{ height:40px; }
  .fv__orgT{ font-size:15px; line-height:1.3; }
  /* 6体験は、写真の下端に入り込むネイビーの帯。帯の下端は写真の下端（＝FVの下端）とそろえる。
     帯は「日時・会場」の段から最下段にまたがせる（帯が高くなっても、FV全体の高さを押し上げない） */
  .fv__exps{
    grid-column:8/-1; grid-row:4/-1; align-self:end; z-index:10; margin:0;
    background:var(--navy); color:#fff; padding:14px var(--gut) 18px 24px;
    --focus:#fff;                                                /* 紺の帯の中ではフォーカス枠を白に */
  }
  .fv__expsH{ font-size:15px; }
  .fv__expsL{ margin-top:10px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .fvx__link{ min-height:44px; padding:0 12px; color:#fff; background:transparent; border-color:rgba(255,255,255,.5); font-size:16px; }
  .fvx__link:hover{ background:#fff; border-color:#fff; color:var(--navy); }
}
@media (min-width:1024px) and (max-width:1279px){
  .fv__expsL{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* 1365px以下では主催が最寄り駅の下の行に回るぶん、縦の余白を詰めて 1280×800 でもFVが1画面に収まるようにする */
@media (min-width:1024px) and (max-width:1365px){
  .fv__copy{ margin-top:10px; }
  .fv__info{ padding-bottom:8px; }
  .fv__foot{ margin-bottom:16px; }
}
/* 画面の高さが低いノートPC（1366×768 など）では、上下の余白と札の高さだけを詰める（文字の大きさは変えない） */
@media (min-width:1024px) and (max-height:800px){
  .fv__presents{ padding-top:16px; }
  .fv__logo{ margin-top:4px; }
  .fv__keys{ margin-top:10px; }
  .fv__key{ min-height:44px; }
  .fv__foot{ margin-bottom:12px; }
}

/* ひので：FVの写真の上辺を、ロゴの太陽の半円から取ったアーチにする */
.fv__photo--sp{ border-radius:50% 50% 0 0 / 22% 22% 0 0; }
@media (min-width:1024px){
  .fv__photo--pc{ border-radius:50% 50% 0 0 / 30% 30% 0 0; margin-top:calc(var(--crown-h) + 40px); }   /* 上の帯（冠協賛）のぶん下げる */
  .fv__logo{ position:relative; z-index:3; }
}

/* SPのページ内リンク（旧V1のFV内ナビの役割） */
.jump{ display:flex; background:#fff; border-bottom:1px solid var(--rule); }
.jump a{ flex:1 1 auto; padding:13px 4px; font-size:14px; font-weight:700; text-align:center; text-decoration:none; white-space:nowrap; }
.jump a + a{ border-left:1px solid var(--rule); }
@media (min-width:1024px){ .jump{ display:none; } }

/* ============================================================
   ② NEWS
   ============================================================ */
.news{ padding:32px 0 28px; border-bottom:1px solid var(--rule); }
.news__h{ margin-bottom:12px; }                                   /* 大きさは章タイトル（.secH）と同じ */
/* 件数が増えても、この高さまでで一覧だけが内部スクロールになる。
   収まっているあいだは高さが中身ぶんしかないので、少数のときに空の枠はできない。
   見出し「最新情報」は枠の外にあるので動かない */
/* 枠の高さは「直近3件が隠れずに見える」ところまで。4件目以降が一覧の内部スクロールになる */
.news__list{ max-height:340px; overflow-y:auto; overflow-x:hidden; }
.news__list li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; padding:6px 0; }
.news__list time{ font-size:15px; }
.news__cat{ font-size:13px; font-weight:700; padding:0 6px; border:1px solid var(--navy); line-height:1.6; }
.news__t{ flex-basis:100%; font-weight:700; }
.news__body{ flex-basis:100%; font-size:15px; font-weight:400; line-height:1.7; color:var(--ink-2); }   /* 本文（任意。2026-10-22） */
/* リンク付きのお知らせ。並びは li と同じにして、見た目を変えない */
.news__a{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; width:100%; color:inherit; text-decoration:none; }
.news__a:hover .news__t{ text-decoration:underline; }
/* スクロールが起きる状態のときだけ、細いスクロールバーを常に見せる（macOSの自動で隠れるバー対策）。
   スクロールバーは環境によって見えないことがあるため、
   「まだ下に続きがある」あいだは下端をぼかして、続きがあることを必ず示す。
   いちばん下まで見たら（.is-end）ぼかしを外し、最後の1件を欠けずに読めるようにする */
.news__list.is-scrollable{ padding-right:12px; scrollbar-width:thin; scrollbar-color:var(--navy) rgba(1,67,139,.12);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),rgba(0,0,0,.15));
          mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),rgba(0,0,0,.15)); }
.news__list.is-scrollable.is-end{ -webkit-mask-image:none; mask-image:none; }
.news__list.is-scrollable::-webkit-scrollbar{ width:8px; }
.news__list.is-scrollable::-webkit-scrollbar-track{ background:rgba(1,67,139,.12); border-radius:4px; }
.news__list.is-scrollable::-webkit-scrollbar-thumb{ background:var(--navy); border-radius:4px; }
.news__list:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.news__note{ margin-top:6px; font-size:14px; color:var(--ink-2); }
.news__undated{ font-size:14px; font-weight:700; color:var(--red); }
@media (min-width:1024px){
  .news{ padding:40px 0; }
  .news__in{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; align-items:baseline; }
  .news__h{ grid-column:1/3; margin:0; }
  /* PCは1行が低いので、同じ見せ方になる高さに合わせる。
     内部スクロールの箱は baseline ではなく行の上端にそろえる */
  /* 2026-10-23：右の補足の列をやめ、一覧に幅を持たせる。1件を「日付｜カテゴリ｜見出し」の3列で1行にそろえる（見出しが長いときは見出しの列の中で折り返す） */
  .news__list{ grid-column:3/12; max-height:360px; align-self:start; }
  .news__list li,.news__a{ display:grid; grid-template-columns:5.6em 5.2em minmax(0,1fr); column-gap:16px; align-items:baseline; }
  .news__a{ grid-column:1 / -1; }                                     /* リンク付きのお知らせは、リンクの中で同じ3列にそろえる */
  .news__cat{ justify-self:start; }
  .news__t{ flex-basis:auto; }
  .news__body{ grid-column:3; }
}

/* ============================================================
   ③ イベント概要 — 章タイトル → 要点（何のイベントか）→ 詳細 → 理念（チラシのメッセージ）と短い説明（WHAT → WHY）。
   基本情報はクリームの板にして、次のオレンジの章へ食い込ませる
   ============================================================ */
.about{ padding-top:56px; position:relative; z-index:1; }
.about__body{ margin-top:20px; }
.about__body p{ font-size:16px; line-height:1.95; }
.about__body p + p{ margin-top:.6em; }
/* 理念：チラシのメッセージを要点と同じ大きさで。2行目を一段下げて語りとして読ませる。下に短い説明と⑩へのリンク */
.about__why{ margin-top:32px; padding-top:24px; border-top:1px solid var(--rule); }
.about__msg{ font-weight:700; font-size:clamp(20px, 5.6vw, 22px); line-height:1.5; }
.about__msg .ln:nth-child(2){ padding-left:1.1em; }
.about__whyBody{ margin-top:14px; }
.about__whyBody p{ font-size:16px; line-height:1.95; }
.about__whyBody p + p{ margin-top:.6em; }
.about__whyLink{ margin-top:12px; font-size:15px; font-weight:700; }
.about__whyLink a{ display:inline-block; padding-block:4px; text-underline-offset:5px; }
.about__body[hidden] + .about__why{ border-top:0; padding-top:0; }      /* 本文が無いとき（2026-10-23〜）は、要点とメッセージを線で区切らない */
.about__photo{ margin-top:28px; aspect-ratio:4/5; }
.spec{ position:relative; margin:36px 0 -56px; background:var(--cream); padding:10px 18px 12px; }
.spec__list > div{ display:grid; grid-template-columns:5.2em minmax(0,1fr); gap:0 12px; padding:12px 0; border-top:1px solid var(--rule); }
.spec__list > div:first-child{ border-top:0; }
.spec__list dt{ font-size:14px; font-weight:700; color:var(--ink-2); }
.spec__list dd{ font-size:16px; font-weight:700; line-height:1.6; }
.spec__list small{ display:block; font-size:14px; font-weight:400; color:var(--ink-2); margin-top:2px; }
@media (min-width:1024px){
  .about{ padding-top:128px; }
  .about__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; align-items:start; }
  /* 左の列（見出し・要点・メッセージ）と、右の基本情報の表を同じ高さから始める。表の高さの残りは最後の行（1fr）が受ける（2026-10-23） */
  .about__grid{ grid-template-rows:repeat(3, auto) 1fr; }
  .about__h{ grid-column:1/8; }
  .about__point{ grid-column:1/8; }
  .about__body{ grid-column:1/7; margin-top:28px; }
  .about__body p{ font-size:17px; }
  .about__why{ grid-column:1/7; margin-top:40px; padding-top:28px; }
  .about__msg{ font-size:24px; line-height:1.45; }
  .about__msg .ln:nth-child(2){ padding-left:1.6em; }
  .about__whyBody p{ font-size:17px; }
  .about__photo{ grid-column:1/7; margin-top:32px; }
  .spec{ grid-column:8/13; grid-row:1 / -1; margin:0 0 -150px; padding:20px 36px 24px; }
  .spec__list dd{ font-size:16px; }
}

/* ============================================================
   ④ 6つの体験 — 章扉（オレンジ。ページで唯一のオレンジ全面）
   章タイトル「6つの体験」→ 章の中のキャッチ「やってみたい！」が、ここにある。（表示用の大きな文字。ページで3か所のうちの1つ）
   → 要点 → 補足（協賛）→ 6つの一覧
   ============================================================ */
.expIntro{ background:var(--orange-s); color:#fff; padding:64px 0 64px; }
/* キャッチは中身の幅だけ持つ（「が、ここにある。」を「やってみたい！」の右端にそろえる） */
.expIntro__catch{ display:block; width:max-content; max-width:100%; margin-top:22px; }
.expIntro__q{ display:block; font-size:clamp(34px, 9vw, 40px); font-weight:900; line-height:1.1; font-feature-settings:"palt" 1; letter-spacing:-.01em; margin-left:-.3em; }   /* 「 を余白へ少しぶら下げる（画面外へは出さない） */
.expIntro__r{ display:block; margin-top:8px; font-weight:700; font-size:20px; line-height:1.3; text-align:right; }
.expIntro__copy{ margin-top:26px; }
.expIntro__point{ margin-top:0; }
.expIntro__support{ margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.55); font-size:15px; line-height:1.75; opacity:.92; }
.expIndex{ margin-top:30px; }
.expIndex a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid rgba(255,255,255,.45); text-decoration:none; }
.expIndex li:last-child a{ border-bottom:1px solid rgba(255,255,255,.55); }
.expIndex__n{ font-size:17px; font-weight:700; line-height:1.35; }
.expIndex .dm__d{ --on19-bg:var(--navy); --on19-fg:#fff; --on20-bg:#fff; --on20-fg:var(--red); --off:rgba(255,255,255,.62); }
.expIndex .dm__d--20.is-on{ border-color:#fff; }
.expIndex a:hover .expIndex__n{ text-decoration:underline; text-underline-offset:5px; }
@media (min-width:1024px){
  .expIntro{ padding:120px 0 112px; }
  .expIntro__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; align-items:start; }
  .expIntro__h{ grid-column:1/13; }
  .expIntro__catch{ grid-column:1/13; margin-top:28px; }
  .expIntro__q{ font-size:clamp(56px, 5.2vw, 72px); }                /* 旧 96〜140px。表示用の大きさは FV の日付と同じ段 */
  .expIntro__r{ font-size:28px; margin-top:10px; }
  .expIntro__copy{ grid-column:1/7; margin-top:48px; }
  .expIntro__support{ font-size:16px; }
  .expIndex{ grid-column:8/13; margin-top:48px; }
  .expIndex__n{ font-size:18px; }
}

/* ============================================================
   ④ 6つの体験 — 写真と情報の2つだけで組む
   ------------------------------------------------------------
   ■ 情報は色の箱に入れない。名前の大きさ・明朝のキャッチ・細い罫・余白で階層をつける
     （箱の高さが情報量と無関係に大きくなる「空の色面」をつくらない）
   ■ 写真は1体験に1枚。顔・手元・体験の対象物には文字も色面も重ねない
     重なりは「写真が章扉や数字の上に乗る」向きだけにする
   ■ 組み方（site.js の layout）
       wide   食育      全幅の大きな写真 → 下に2段の情報
       detail シーサー  寄りの写真1枚（顔とシーサーが両方入る範囲）＋横の情報
       side   モルック  横長の写真をそのまま大きく ＋ 細い情報の段
       screen プログラミング  ネイビーの地で写真全体を見せる
       number エイサー／メイク  その日だけの日付を巨大に置き、写真を重ねる（2回目は鏡像）
   ■ 余白：写真から次の写真へは近く、情報を読む場所は密に
   ============================================================ */
.scene{
  position:relative; display:grid; grid-template-columns:var(--gut) minmax(0,1fr) var(--gut);
  padding-bottom:52px; background:#fff;
}
.scene > *{ min-width:0; }
.scene__photo{ grid-column:1/-1; aspect-ratio:3/2; }
.scene__info{ grid-column:2; align-self:start; padding-top:20px; position:relative; z-index:1; }
.scene__name{ font-size:clamp(34px, 9.6vw, 40px); font-weight:900; line-height:1.15; color:var(--orange-lg); }
.scene__name small{ font-size:.42em; margin-left:.25em; color:var(--navy); }
/* 正式なブースタイトルを見出しにする形：短い名前を上に小さく、タイトルを大きく。
   タイトルは長い（最長15字）ので、短い名前だけのときより一段小さい */
.scene__name--title{ display:grid; gap:4px; }
.scene__nameS{ font-size:16px; font-weight:700; line-height:1.4; color:var(--navy); letter-spacing:.04em; }
.scene__nameT{ font-size:clamp(26px, 7vw, 30px); line-height:1.2; }
.scene--screen .scene__nameS{ color:#fff; }
/* 情報の順は6つとも同じ：体験名 → 一言（キャッチ）→ 実用情報（開催日・フロア・所要時間・定員・参加方法）→ 詳しい説明 → 体験の流れ（2026-10-16）。
   階層：体験名 ＞ キャッチ（要点と同じ大きさ） ＞ 本文 ≒ 実用情報の値（太字） ＞ 項目名・注記（共通ルール 20 §12：本文 16px以上、注釈 14px） */
.scene__lead{ margin-top:14px; font-weight:700; font-size:20px; line-height:1.55; }
.scene__body{ margin-top:18px; font-size:16px; line-height:1.85; }
.facts{ margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.facts > div{ padding:10px 0; border-top:1px solid var(--rule); }
.facts dt{ font-size:14px; font-weight:700; line-height:1.5; color:var(--ink-2); }
.facts dd{ margin-top:2px; font-size:17px; font-weight:700; line-height:1.45; }
.facts .is-pending dd{ font-size:15px; font-weight:400; color:var(--ink-2); }

/* 章扉のオレンジへ、最初の写真を食い込ませる（写真が色面の上に乗る向き） */
#expList > .scene:first-child .scene__photo{ margin-top:-48px; }

/* --- wide（食育） --- */
.scene--wide .scene__photo{ aspect-ratio:4/3; }
/* 体験名へリンクで移動したとき、写真の下の部分を少し見せてから体験名が来るようにする */
.scene--wide .scene__name{ scroll-margin-top:180px; }
@media (min-width:1024px){ .scene--wide .scene__name{ scroll-margin-top:220px; } }

/* --- 写真が未受領の体験：枠を出さず、文字だけで組む（assets.js で optional のあいだ） --- */
.scene--nophoto .scene__info{ padding-top:36px; }

/* --- 体験の流れ（site.js の steps。任意）：箱に入れず、番号・細い罫・余白で組む ---
   SP：番号・名前・目安を1行ずつ。説明は「くわしく見る」で開く（ほかの体験と長さをそろえる）
   PC：横に並べて順番を見せる。説明は常に出す */
.steps{ margin-top:24px; }
/* お米以外の体験：写真と情報の下に全幅で置く（SPは本文の続き） */
.scene > .steps--row{ grid-column:2; margin-top:28px; }
.steps__h{ font-size:14px; font-weight:700; color:var(--ink-2); }
.steps__list{ margin:6px 0 0; padding:0; list-style:none; counter-reset:step; border-bottom:1px solid var(--rule); }
.steps__list > li{
  counter-increment:step; position:relative; padding:10px 0 10px 34px; border-top:1px solid var(--rule);
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; align-items:baseline;
}
.steps__list > li::before{
  content:counter(step); position:absolute; left:0; top:7px;
  font-weight:700; font-size:19px; line-height:1.5; color:var(--orange-lg);
}
.steps__t{ font-size:16px; font-weight:700; line-height:1.5; }
.steps__m{ font-size:14px; font-weight:700; color:var(--ink-2); white-space:nowrap; }
.steps__b{ grid-column:1/-1; margin-top:4px; font-size:16px; line-height:1.8; display:none; }
.steps.is-open .steps__b{ display:block; }
.steps__more{
  display:flex; align-items:center; gap:10px; width:100%; min-height:48px; margin:0; padding:0;
  font:inherit; font-size:16px; font-weight:700; color:var(--navy); text-align:left;
  background:none; border:0; border-bottom:1px solid var(--rule); cursor:pointer;
}
.steps__more::after{
  content:""; flex:none; margin-left:auto; margin-right:6px; width:9px; height:9px;
  border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor;
  transform:translateY(-3px) rotate(45deg); transition:transform .2s ease;
}
.steps__more[aria-expanded="true"]::after{ transform:translateY(2px) rotate(-135deg); }
.steps__note{ font-size:14px; line-height:1.75; color:var(--ink-2); }
.steps__more + .steps__note{ margin-top:12px; }
.scene--screen .steps__h,.scene--screen .steps__m,.scene--screen .steps__note{ color:rgba(255,255,255,.82); }
.scene--screen .steps__list,.scene--screen .steps__list > li,.scene--screen .steps__more{ border-color:rgba(255,255,255,.28); }
.scene--screen .steps__list > li::before{ color:var(--orange); }
.scene--screen .steps__more{ color:#fff; }
@media (prefers-reduced-motion:reduce){ .steps__more::after{ transition:none; } }
@media (min-width:1024px){
  .steps__b{ display:block; }
  .steps__more{ display:none; }
  .steps__list{ border-bottom:0; }
  .steps__list + .steps__more + .steps__note,.steps__more + .steps__note{ margin-top:16px; }
}

/* --- detail（シーサー）：寄りの写真1枚 --- */
.scene--detail{ background:var(--cream); }
.scene--detail .scene__photo{ aspect-ratio:1/1; }

/* --- side（モルック）：写真の比率のまま --- */
.scene--side{ padding-top:44px; }

/* --- screen（プログラミング）：ネイビーの地 --- */
.scene--screen{ background:var(--navy); color:#fff; }
.scene--screen .scene__name{ color:var(--orange); }
.scene--screen .scene__name small{ color:#fff; }
.scene--screen .facts > div{ border-top-color:rgba(255,255,255,.28); }
.scene--screen .facts dt,.scene--screen .facts .is-pending dd{ color:rgba(255,255,255,.82); }

/* --- number（エイサー 19／メイク 20）：数字の上に写真が乗る --- */
.scene--number{ padding-top:28px; }
.scene__num{
  grid-column:1/-1; grid-row:1; z-index:0; margin:0 0 0 calc(var(--gut) - .06em);
  font-family:var(--f-num); font-size:64vw; line-height:.8; font-weight:900; font-stretch:125%; letter-spacing:-.04em; color:var(--navy);
}
.scene--d20 .scene__num{ color:var(--red); }
.scene--number .scene__photo{ grid-column:1/-1; grid-row:1; z-index:1; margin-top:40vw; }
.scene--number .scene__info{ grid-row:2; }
.scene--number.is-alt{ background:var(--cream); }
.scene--number.is-alt .scene__num{ text-align:right; margin:0 calc(var(--gut) - .06em) 0 0; }
.scene--number.is-alt .scene__photo{ grid-column:1/3; margin-right:40px; }
.scene--d20 .scene__photo{ aspect-ratio:5/4; }   /* メイクは手元と鏡の表情が左右に離れているため 5:4 */

@media (min-width:1024px){
  .scene{ grid-template-columns:var(--gut) repeat(12,minmax(0,1fr)) var(--gut); padding-bottom:96px; column-gap:0; }
  .scene__name{ font-size:clamp(52px, 4.6vw, 68px); }
  .scene__nameS{ font-size:18px; }
  .scene__nameT{ font-size:clamp(32px, 2.6vw, 38px); }             /* 6つとも同じ大きさ（旧：wide 40〜52／ほか 30〜38） */
  .scene__lead{ font-size:24px; margin-top:14px; }
  .scene__body{ font-size:17px; max-width:30em; margin-top:20px; }
  .facts{ grid-template-columns:repeat(4,auto); justify-content:start; gap:0 36px; margin-top:18px; }
  .facts dd{ font-size:18px; }
  #expList > .scene:first-child .scene__photo{ margin-top:-120px; }

  /* wide：写真は天地を大きく。情報は下に1本の流れ（ほかの体験と同じ順）。実用情報は1行に */
  .scene--wide .scene__photo{ aspect-ratio:auto; height:min(78vh, 700px); }
  .scene--wide .scene__info{ grid-column:2/14; padding-top:36px; }
  .scene--wide .facts{ display:flex; flex-wrap:wrap; gap:0 36px; }
  .scene--wide .scene__body{ max-width:36em; }
  /* 流れは情報の下に全幅で。6つまでは1段、幅が足りないあいだは3つずつ2段。
     お米（wide）は情報の中、ほかの体験（.steps--row）は写真と情報の下の段に、同じ見せ方で置く */
  .scene--wide .steps{ margin-top:44px; }
  .scene > .steps--row{ grid-column:2/14; grid-row:2; margin-top:56px; }
  .scene--wide .steps__list,.steps--row .steps__list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 28px; }
  .steps--row .steps__list{ grid-template-columns:repeat(var(--n, 3),minmax(0,1fr)); }
  .scene--wide .steps__list > li,.steps--row .steps__list > li{ display:block; padding:40px 0 0; border-top:2px solid var(--navy); }
  .scene--wide .steps__list > li::before,.steps--row .steps__list > li::before{ top:6px; font-size:24px; }
  .scene--wide .steps__t,.steps--row .steps__t{ font-size:18px; }
  .scene--wide .steps__m,.steps--row .steps__m{ margin-top:2px; }
  .scene--wide .steps__b,.steps--row .steps__b{ margin-top:6px; }
  .scene--nophoto .scene__info{ padding-top:72px; }
  .scene--wide.scene--nophoto .scene__info{ padding-top:72px; }

  /* detail：寄りの写真を右に、情報は左の段で写真の中ほどにそろえる */
  .scene--detail{ padding:96px 0; align-items:center; }
  .scene--detail .scene__photo{ grid-column:6/-1; grid-row:1; aspect-ratio:5/4; }
  .scene--detail .scene__info{ grid-column:2/6; grid-row:1; align-self:center; padding:0 40px 0 0; }
  /* 幅の狭い段の実用情報：1024〜1279px は段が狭いので2列のまま。1280px以上は収まるぶんを1行に並べる（収まらないときだけ折り返す） */
  .scene--detail .facts,.scene--side .facts,.scene--screen .facts,.scene--number .facts{ grid-template-columns:repeat(2,auto); }
  @media (min-width:1280px){
    .scene--detail .facts,.scene--side .facts,.scene--screen .facts,.scene--number .facts{ display:flex; flex-wrap:wrap; gap:0 32px; }
  }

  /* side：横長の写真を左に大きく、情報は右の細い段で写真の下端にそろえる */
  .scene--side{ padding-top:96px; align-items:end; }
  .scene--side .scene__photo{ grid-column:1/10; grid-row:1; }
  .scene--side .scene__info{ grid-column:10/14; grid-row:1; align-self:end; padding:0 0 0 36px; }
  /* 幅の狭い段に置く名前（title が無い体験の予備）は、「体験」まで1行に収まる大きさにする（写真へはみ出さない） */
  .scene--detail .scene__name,.scene--side .scene__name,.scene--screen .scene__name,.scene--number .scene__name{ font-size:clamp(38px, 3.3vw, 48px); }
  .scene--side .scene__lead{ font-size:22px; }

  /* screen：写真全体を右に、情報は左 */
  .scene--screen{ padding:96px 0; align-items:center; }
  .scene--screen .scene__photo{ grid-column:6/-1; grid-row:1; }
  .scene--screen .scene__info{ grid-column:2/6; grid-row:1; align-self:center; padding:0 40px 0 0; }

  /* number：数字の下に情報、写真は数字の右側へ重ねる（文字は写真に重ねない） */
  .scene--number{ --num:clamp(300px, 34vw, 500px); padding:64px 0 96px; align-items:start; }
  .scene__num{ grid-column:1/11; font-size:var(--num); margin-left:calc(var(--gut) - .05em); }
  /* 写真は「19」の右端にだけ重ねる（数字として読める範囲を残す） */
  .scene--number .scene__photo{ grid-column:7/-1; grid-row:1; margin-top:calc(var(--num) * .42); }
  .scene--number .scene__info{ grid-column:2/6; grid-row:1; margin-top:calc(var(--num) * .84); padding:0 32px 0 0; }
  .scene--number.is-alt .scene__num{ grid-column:5/-1; margin:0 calc(var(--gut) - .05em) 0 0; }
  .scene--number.is-alt .scene__photo{ grid-column:1/9; margin-right:0; margin-top:calc(var(--num) * .42); }
  .scene--number.is-alt .scene__info{ grid-column:10/14; padding:0 0 0 8px; }
}

/* ============================================================
   ⑤⑦ 会場・フロア ＋ 参加方法（1つの章）
   ネイビーの面で「どこへ行くか」。下端にクリームの板で「どう参加するか」を食い込ませる
   ============================================================ */
.venue__navy{ background:var(--navy); color:#fff; padding:72px 0 120px; }
.venue__meta{ margin-top:18px; }
.venue__addr{ font-size:14px; line-height:1.7; }
.venue__body{ margin-top:12px; font-size:16px; line-height:1.8; }
.venue__pending{ margin-top:14px; padding-left:12px; border-left:3px solid var(--orange); font-size:14px; line-height:1.7; }
.venue__link{ margin-top:14px; font-size:15px; font-weight:700; }
/* 文章の中ではなく単独で置くリンク。クリック領域を 24px 以上にする（WCAG 2.2 AA 2.5.8） */
.venue__link a{ display:inline-block; padding-block:4px; text-underline-offset:5px; }

/* JavaScriptが動かないときの案内（noscript の中だけで使う） */
.nojs{
  width:min(100% - 32px,1100px); margin:24px auto 0; padding:16px 20px;
  border:2px solid var(--navy); background:#fff;
}
.nojs__h{ font-weight:700; }
.nojs__b{ margin-top:6px; font-size:15px; }
.nojs__b a{ font-weight:700; }
.floors{ margin-top:36px; }
.floor{ display:grid; grid-template-columns:84px minmax(0,1fr); gap:0 14px; padding:16px 0; border-top:1px solid rgba(255,255,255,.32); }
.floor:last-child{ border-bottom:1px solid rgba(255,255,255,.32); }
.floor__id{ line-height:1; }
.floor__id .num{ display:block; font-family:var(--f-num); font-size:44px; font-weight:900; font-stretch:118%; }
.floor__id small{ display:block; margin-top:6px; font-size:12px; font-weight:700; line-height:1.4; }
.floor__note{ font-size:14px; font-weight:700; margin-bottom:4px; }
.floor__items li{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 12px; padding:5px 0; }
.fItem__n{ font-size:16px; font-weight:700; }
.floor .dm__t{ font-size:13px; }
/* SPのフロア一覧は「体験名＋日付の四角」を1行に（日付の文字は読み上げ用に残す） */
@media (max-width:1023px){
  .floor .dm__t{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .floor__items li{ flex-wrap:nowrap; padding:4px 0; }
  .fItem__n{ font-size:15px; }
}
.venue{ padding-bottom:72px; }
.joinPanel{ position:relative; z-index:1; margin-top:-72px; background:var(--cream); padding:28px 20px 30px; }
.join__h{ margin-top:24px; font-size:16px; font-weight:700; color:var(--ink-2); }
.join__when{ margin-top:6px; font-size:16px; font-weight:700; line-height:1.8; }
.join__btns{ margin-top:18px; }
.join__exp{ margin-top:40px; }
.join__exp .join__h{ margin-top:0; }
.join__lead{ margin-top:4px; font-size:15px; }
.join__fallback{ margin-top:12px; font-size:14px; line-height:1.7; color:var(--ink-2); }
.entry{ width:100%; margin-top:14px; border-collapse:collapse; }
.entry th,.entry td{ text-align:left; vertical-align:top; padding:11px 10px 11px 0; border-bottom:1px solid var(--rule); }
.entry thead th{ font-size:12px; font-weight:700; color:var(--ink-2); padding-top:0; }
.entry tbody th{ font-size:15px; font-weight:700; line-height:1.5; }
.entry td{ font-size:15px; font-weight:700; line-height:1.5; }
.entry td:last-child{ padding-right:0; }
.entry .dm{ flex-direction:column; align-items:flex-start; gap:4px; }
.entry .dm__t{ font-size:13px; }
@media (max-width:1023px){ .entry .dm__t{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } }
.entry tr.is-pending td:last-child{ font-size:14px; font-weight:400; color:var(--ink-2); }
@media (min-width:1024px){
  .venue__navy{ padding:128px 0 200px; }
  .venue__top{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; align-items:start; }
  .venue__top .secH{ grid-column:1/13; }
  .venue__lead{ grid-column:1/8; }
  .venue__meta{ grid-column:9/13; margin:18px 0 0; }                /* 要点と同じ高さから始める */
  .venue__lead[hidden] + .venue__meta{ grid-column:1/8; }           /* 要点が無いとき（2026-10-23〜）は見出しの下に置く */
  /* フロアは建物の断面として全幅に積む。階数は図形として大きめに（本文の見出しの段ではない） */
  .floors{ margin-top:64px; }
  .floor{ grid-template-columns:180px minmax(0,1fr); padding:24px 0; align-items:center; }
  .floor__id .num{ font-size:80px; line-height:.85; }
  .floor__id small{ font-size:14px; margin-top:10px; }
  .floor__items{ display:flex; flex-wrap:wrap; gap:6px 56px; }
  .floor__items li{ justify-content:flex-start; }
  .fItem__n{ font-size:19px; }
  .venue{ padding-bottom:120px; }
  .joinPanel{ margin-top:-120px; padding:60px 64px 64px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; align-items:start; }
  .join__event{ grid-column:1/6; }
  .join__exp{ grid-column:7/13; margin:0; padding-top:10px; }
  .entry .dm{ flex-direction:row; align-items:center; gap:4px 10px; }
  .entry th,.entry td{ padding:14px 16px 14px 0; }
  .entry tbody th,.entry td{ font-size:16px; }
}

/* ============================================================
   ⑧ アクセス — 静かな情報。駐車場不可だけをレッドの帯で1回強く出す
   2026-10-23 再構成：章タイトル → 会場情報＋公共交通（左）と地図（右）をひとまとまりに。
   左右は半分ずつにせず、会場情報に要る幅と地図の見やすい幅で分ける。地図に枠線は付けない
   ============================================================ */
.access{ padding:56px 0 0; }
.access__grid{ margin-top:20px; display:grid; gap:24px; }
.access__venue{ font-size:20px; font-weight:700; line-height:1.3; }
.access__addr{ margin-top:4px; font-size:15px; }
/* 「Google マップで開く ↗」：控えめな文字のリンク（枠のボタンにしない） */
.access__maplink{ margin-top:4px; font-size:15px; }
.access__maplink a{ display:inline-flex; align-items:baseline; gap:4px; padding:8px 0; font-weight:700; text-underline-offset:4px; }
.access__ext{ font-weight:400; }
.access__transit{ margin-top:20px; }
.access__h{ font-size:17px; font-weight:700; line-height:1.4; padding-bottom:8px; border-bottom:1px solid var(--navy); }
.access__photo{ margin-top:24px; aspect-ratio:3/2; }
.access__map{ aspect-ratio:16/10; background:var(--tint); }
.access__map iframe{ width:100%; height:100%; border:0; display:block; }
.warn{ margin-top:40px; background:var(--red); color:#fff; padding:20px 0 22px; }
.warn__h{ font-size:20px; font-weight:700; line-height:1.4; }
.warn__b{ margin-top:4px; font-size:16px; line-height:1.7; }

/* 公共交通（会場情報の下）と、周辺の有料駐車場（駐車場不可の帯の下） */
.getthere{ padding:28px 0 52px; }
.getthere__h{ font-size:20px; font-weight:700; line-height:1.4; padding-bottom:10px; border-bottom:1px solid var(--navy); }
.routes > li{ display:grid; grid-template-columns:6.2em minmax(0,1fr); gap:2px 14px; padding:12px 0; border-bottom:1px solid var(--rule); align-items:baseline; }
.routes__k{ font-size:14px; font-weight:700; color:var(--ink-2); }
.routes__v{ font-size:17px; font-weight:700; line-height:1.5; }
.routes__w{ display:inline-block; margin-left:10px; font-weight:700; }
.routes__n{ grid-column:2; font-size:14px; line-height:1.7; color:var(--ink-2); }
.lots > li{ padding:14px 0; border-bottom:1px solid var(--rule); }
.lots__n{ font-size:17px; font-weight:700; line-height:1.45; }
.lots__a{ margin-top:2px; font-size:15px; line-height:1.6; }
.lots__w{ margin-top:2px; font-size:15px; font-weight:700; }
.lots__w b{ margin-left:6px; font-weight:700; }
.lots__x{ margin-top:2px; font-size:14px; line-height:1.7; color:var(--ink-2); }
.lots__note{ margin-top:14px; font-size:14px; line-height:1.8; color:var(--ink-2); }
/* 駐車場は3件。幅があれば横に3つ並べる */
@media (min-width:768px){
  .lots{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:28px; }
}
@media (min-width:1024px){
  .access{ padding-top:96px; }
  .access__grid{ margin-top:28px; grid-template-columns:minmax(300px,2fr) minmax(0,3fr); column-gap:40px; align-items:start; }
  .access__venue{ font-size:22px; }
  .access__transit{ margin-top:24px; }
  .access__h{ font-size:18px; }
  .routes__v{ font-size:18px; }
  .warn{ margin-top:56px; padding:28px 0; }
  .warn__in{ display:flex; align-items:baseline; gap:32px; }
  .warn__h{ font-size:28px; flex:none; }
  .warn__b{ font-size:17px; margin:0; }
  .getthere{ padding:40px 0 64px; }
  .getthere__h{ font-size:22px; }
  .lots{ column-gap:40px; }
  .lots__n{ font-size:18px; }
}
/* PCの狭い幅（1024〜1279px）では、公共交通の1行が折り返さない幅を会場情報に確保する */
@media (min-width:1024px) and (max-width:1279px){
  .access__grid{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:32px; }
}

/* ============================================================
   ⑥ 飲食・休憩＋こども未来チケット — 静かな章
   2026-10-23 再構成：章タイトルの下に、3項目を短い案内として並べる（タブレット・PCは横に3つ、SPは縦）。
   その下に細い区切り線を引き、こども未来チケットを見出し＋短い説明で置く。カード・アイコン・影・券の形は使わない
   ============================================================ */
.extra{ background:var(--cream); padding:48px 0 48px; }
.fun{ margin:20px 0 0; padding:0; }
.fun__i{ padding:14px 0; border-top:1px solid var(--rule); }
.fun__t{ font-size:17px; font-weight:700; line-height:1.4; }
.fun__b{ margin:4px 0 0; font-size:15px; line-height:1.7; }
.ticket{ margin-top:8px; padding-top:18px; border-top:1px solid var(--rule); }
.ticket__h{ font-size:17px; font-weight:700; line-height:1.4; }
.ticket__b{ margin-top:4px; max-width:46em; font-size:15px; line-height:1.75; }
@media (min-width:768px){
  .fun{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:32px; border-top:1px solid var(--rule); }
  .fun__i{ padding:16px 0 20px; border-top:0; }
  .ticket{ margin-top:4px; padding-top:20px; }
}
@media (min-width:1024px){
  .extra{ padding:64px 0 80px; }
  .fun{ margin-top:28px; column-gap:40px; }
  .fun__i{ padding:20px 0 24px; }
  .fun__t{ font-size:18px; }
  .fun__b{ font-size:16px; }
  .ticket{ padding-top:24px; }
  .ticket__h{ font-size:18px; }
  .ticket__b{ font-size:16px; }
}

/* ============================================================
   ⑨ よくある質問 — 静かな章。余白を詰め、読むだけの一覧にする
   ============================================================ */
.faq{ padding:48px 0 52px; }
.faq__list{ margin-top:20px; }
.qa{ border-top:1px solid var(--rule); }
.qa:last-child{ border-bottom:1px solid var(--rule); }
.qa summary{ position:relative; list-style:none; cursor:pointer; padding:14px 36px 14px 0; font-size:16px; font-weight:700; line-height:1.5; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::before,.qa summary::after{ content:""; position:absolute; right:6px; top:50%; width:14px; height:2.5px; background:var(--navy); transition:transform .2s ease; }
.qa summary::after{ transform:rotate(90deg); }
.qa[open] summary::after{ transform:rotate(0); }
.qa__a{ padding:0 0 18px; font-size:16px; line-height:1.85; max-width:38em; }
.qa__a p + p{ margin-top:.8em; }                                   /* 結論と補足・例外の段落を分ける */
.qa__a a{ font-weight:700; text-underline-offset:4px; }
@media (min-width:1024px){
  .faq{ padding:96px 0; }
  .faq__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:auto 1fr; column-gap:24px; align-items:start; }
  .faq__grid .secH{ grid-column:1/5; }
  .faq__lead{ grid-column:1/5; grid-row:2; }
  .faq__list{ grid-column:5/13; grid-row:1/3; margin:0; }
  .qa summary{ font-size:17px; padding:18px 44px 18px 0; }
}

/* ============================================================
   ⑩⑪ 想い ＋ 主催 — 後半で唯一の強い場面
   ネイビーの面に、コンセプトを画面幅いっぱいの文字で置く
   ============================================================ */
.mission{ background:var(--navy); color:#fff; }
.mission__photo{ aspect-ratio:4/3; }
.mission__in{ padding:56px 0 60px; }
/* コンセプトの英字：表示用の大きな文字（ページで3か所のうちの1つ）。章タイトル → 要点 → この英字 → 詳細 の順 */
.mission__concept{
  margin-top:28px; font-family:var(--f-num); font-weight:900; font-stretch:116%;
  font-size:clamp(30px, 8.6vw, 36px); line-height:1; letter-spacing:-.01em;
}
.mission__concept .ph{ display:block; }
.mission__conceptJa{ margin-top:18px; font-size:20px; font-weight:700; line-height:1.45; }
.mission__words{ margin-top:16px; display:flex; flex-wrap:wrap; gap:12px 24px; }
.mission__words > div{ padding-top:6px; border-top:3px solid var(--green); }
.mission__words dt{ font-family:var(--f-num); font-weight:700; font-stretch:108%; font-size:14px; line-height:1.2; }
.mission__words dd{ font-size:13px; font-weight:700; }
.mission__main{ margin-top:32px; }
.mission__body{ margin-top:0; }
.mission__body p{ font-size:15px; line-height:1.95; }
.mission__body p + p{ margin-top:10px; }
.org{ margin-top:44px; padding-top:28px; border-top:1px solid rgba(255,255,255,.3); display:grid; grid-template-columns:88px minmax(0,1fr); gap:0 18px; align-items:start; }
.org__mark{ background:#fff; padding:8px; }          /* ロゴの文字が黒いので、濃い地では白い台に載せる */
.org__mark img{ width:100%; height:auto; }
.org__label{ font-size:14px; font-weight:400; opacity:.9; }
.org__name{ font-size:18px; font-weight:700; line-height:1.4; }
.org__lead{ margin-top:12px; font-size:18px; font-weight:700; line-height:1.45; }
.org__text p{ margin-top:6px; font-size:14px; line-height:1.85; }
.org__endorse{ margin-top:10px; font-size:13px; }
@media (min-width:1024px){
  .mission__photo{ aspect-ratio:21/8; }
  .mission__in{ padding:112px 0 112px; }
  .mission__concept{ margin-top:40px; font-size:clamp(48px, 5vw, 64px); line-height:1; }   /* 旧 64〜104px */
  .mission__concept .ph{ display:inline-block; }
  .mission__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; margin-top:40px; align-items:start; }
  .mission__head{ grid-column:1/6; }
  .mission__conceptJa{ margin:0; font-size:26px; }
  .mission__words{ margin-top:24px; gap:16px 36px; }
  .mission__words dt{ font-size:16px; }
  .mission__words dd{ font-size:14px; }
  .mission__main{ grid-column:7/13; margin:0; }
  .mission__body p{ font-size:16px; }
  .org{ margin-top:88px; padding-top:48px; grid-template-columns:120px minmax(0,1fr); gap:0 40px; max-width:880px; }
  .org__mark{ padding:12px; }
  .org__lead{ font-size:22px; }
}

/* ============================================================
   ⑫⑬ 協賛企業 ＋ 協賛募集（1つの章）
   企業が0件のあいだは、掲載する段の名前と案内1行だけ（空の枠を並べない）。
   企業が入れば段ごとのロゴ一覧に広がる
   ============================================================ */
.sponsors{ padding:64px 0 56px; }
/* 見出しと要点はほかの章と同じ左そろえ（下の協賛の並びだけ中央そろえ） */
.sponsors{ background:#fff; }
.sponsors__note{ margin-top:18px; font-size:14px; color:var(--ink-2); }
.tiersHold{ margin-top:24px; padding:18px 18px 20px; border:1.5px dashed rgba(1,67,139,.4); }
.tiersHold__t{ font-size:14px; color:var(--ink-2); }
/* 協賛企業・後援の見せ方（2026-10-16 改訂：白地の1枚の板）
   ・色面は使わない。白地の上で、ロゴの大きさ・配置・余白・「冠協賛」の表記だけで序列を出す
     （冠協賛は、見出しと最大のロゴを広い余白の中に1社だけ置くことで分かる。箱で囲わない）
   ・ほかの区分は見出しを付けず、下へ続けて並べる（A 3 → B 1 → C 4／タブレット 3 → 1 → 3／SP 2 → 1 → 2）。
     区分は依頼者の指定した冠／A／B／C（2026-10-22）。A は正式ロゴ（届いていない社は社名を文字で）、B・C は社名だけで、
     文字の大きさで A ＞ B ＞ C の順が分かるようにする（B は C より明確に大きく）
     企業が増えたら行が増えるだけ。区画の幅は「1行の数」で決まり、ロゴは区画の中央に置く
   ・ロゴの幅は main.js が「見た目の面積」から計算して --w で渡す（横長・縦長でも同じ大きさに見える）
   ・ロゴが無い企業は社名を文字で（法人の種類と（屋号）の前後でだけ折り返す）
   ・後援は協賛ではないので、細い線で区切って同じ板の最後に置く。団体名は協賛の社名（大）と同じ大きさで、ひと目で読める
   ・ロゴには枠線・影・透明度の変更を付けない（協賛企業のロゴ規定） */
.tiersHold{ margin-top:24px; padding:18px 18px 20px; border:1.5px dashed rgba(1,67,139,.4); }
.tiersHold__t{ font-size:14px; color:var(--ink-2); }
.spWall{ margin-top:32px; }
.spWall__rule{ height:1px; margin:28px auto; max-width:1040px; background:var(--rule); }
.spWall{ max-width:1040px; margin-left:auto; margin-right:auto; }
.spGroup__h{ display:flex; align-items:center; justify-content:center; gap:14px; font-size:15px; font-weight:700; line-height:1.4; letter-spacing:.12em; color:var(--ink); }
.spGroup__h::before,.spGroup__h::after{ content:""; flex:0 1 40px; height:1px; background:var(--rule); }
.spGroup--title .spGroup__h{ color:var(--navy); font-size:16px; }
.spRank{
  --gx:12px; --gy:16px;
  margin:0 auto; max-width:1040px; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gy) var(--gx);
}
.spGroup__h + .spRank{ margin-top:16px; }
.spRank + .spRank{ margin-top:20px; }
.spRank > .spCell{ flex:0 0 calc((100% - (var(--sp-cols) - 1) * var(--gx)) / var(--sp-cols)); display:flex; align-items:center; justify-content:center; min-height:var(--rowH, 48px); }
.spRank--title > .spCell{ --rowH:64px; }
.spRank--a > .spCell{ --rowH:72px; }
.spRank--b > .spCell{ --rowH:52px; }
.spRank--c > .spCell{ --rowH:44px; }
.spCell a,.spCell .spIn{ display:flex; align-items:center; justify-content:center; width:100%; text-decoration:none; }
/* 企業の公式サイトへのリンク（2026-10-22）。区画の高さいっぱいを押せる（SPでも押しやすい）。
   ロゴ自体には枠・影・透明度の変更を付けない（協賛企業のロゴ規定）。PCのhoverは区画の下の細い線＋社名の下線、
   キーボードは区画の外枠（:focus-visible）でリンクだと分かるようにする */
.spCell > a{ position:relative; align-self:stretch; color:inherit; }
/* 下の線はロゴの幅に合わせて短く（区画の幅にすると、1社で全幅を使う区分だけ線が長くなる。2026-10-23）。
   社名の文字は下線が出るので、線は付けない */
.spCell > a::after{ content:""; position:absolute; left:50%; bottom:0; width:min(calc(var(--lw, 160px) * .6), 80%); height:2px; transform:translateX(-50%); background:var(--navy); visibility:hidden; }
.spCell--text > a::after{ display:none; }
.spCell > a:hover::after,.spCell > a:focus-visible::after{ visibility:visible; }
/* 社名の文字のリンク（2026-10-23）：カーソルを合わせると下線が出る（矢印などは付けない）。
   社名は文節ごとの inline-block（.ph）なので、親の下線は届かない。下線は .ph に直接付ける */
.spCell > a .spName .ph{ text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:5px; }
.spCell > a:hover .spName .ph,.spCell > a:focus-visible .spName .ph{ text-decoration-color:currentColor; }
.spCell > a:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.spCell img{ display:block; width:min(calc(var(--w) * .78), 100%); height:auto; }
.spRank--title .spCell img{ width:min(calc(var(--w) * .86), 100%); }
.spName{ display:block; text-align:center; font-weight:700; line-height:1.45; letter-spacing:.03em; }
.spRank--a .spName{ font-size:25px; }
.spRank--b .spName{ font-size:22px; }                 /* 2026-10-23 B（社名・大）を C（15〜16px）より一目で大きく：SP 22px／タブレット 24px／PC 28px */
@media (min-width:600px){ .spRank--a .spName{ font-size:28px; } .spRank--b .spName{ font-size:24px; } }
/* A でロゴが届くまでの社名（2026-10-23）：B の社名と区別がつくよう、同じ書体のまま
   「株式会社」などを小さく上の行に置き、社名の本体をいちばん太い字（900）で組む（ロゴを作ったり、書体を変えたりはしない） */
.spRank--a .spName{ font-weight:900; line-height:1.2; letter-spacing:.02em; }
.spRank--a .spName .ph--kind{ display:block; margin-bottom:4px; font-size:.5em; font-weight:700; letter-spacing:.2em; }
/* 社名の後ろの（施設名など）（2026-10-28 リトルスター「（産業支援センター内保育園）」）：「株式会社」と同じ小ささで、社名の下の行に置く。
   スマホでも「株式会社」と（ ）は14px（共通ルールの文字の下限）を下回らない。
   360px未満は社名の本体を少し小さくし、A の2列を崩さない（「リトルスター」がセルに入りきらず1社だけの段ができていた） */
.spRank--a .spName .ph--kind{ font-size:max(14px, .5em); }
.spRank--a .spName .ph--sub{ display:block; margin-top:4px; font-size:max(14px, .5em); font-weight:700; line-height:1.3; letter-spacing:.04em; }
@media (max-width:599px){ .spRank--a .spName{ font-size:clamp(22px, 6.9vw, 25px); } }
.spRank--c .spName{ font-size:16px; }
@media (max-width:599px){ .spRank--c .spName{ font-size:15px; } }
/* 後援：線で区切り、見出し＋団体名。団体名は協賛（大）の社名と同じ大きさで、紺の太字 */
.endorseBlock{ margin:28px auto 0; max-width:1040px; padding-top:28px; border-top:1px solid var(--rule); }
.endorse{ margin:14px auto 0; max-width:1040px; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 28px; }
.endorse__i{ display:flex; align-items:center; }
.endorse__i .spName{ font-size:20px; letter-spacing:.04em; }
.endorse__i img{ display:block; width:min(calc(var(--w) * .8), 100%); height:auto; }

@media (min-width:600px){
  .spRank > .spCell{ flex-basis:calc((100% - (var(--tab-cols) - 1) * var(--gx)) / var(--tab-cols)); }
}
@media (min-width:1024px){
  .spWall{ margin-top:44px; }
  .spWall__rule{ margin:36px auto; }
  .spGroup__h{ font-size:16px; }
  .spGroup__h::before,.spGroup__h::after{ flex-basis:56px; }
  .spRank{ --gx:24px; --gy:20px; }
  .spGroup__h + .spRank{ margin-top:22px; }
  .spRank + .spRank{ margin-top:28px; }
  .spRank > .spCell{ flex-basis:calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols)); }
  /* 区分ごとに並びの幅を絞る（社数が少なくても間が空きすぎない） */
  .spRank--a{ max-width:960px; }
  .spRank--c{ max-width:960px; }
  .spRank--title > .spCell{ --rowH:96px; }
  .spRank--a > .spCell{ --rowH:92px; }
  .spRank--b > .spCell{ --rowH:56px; }
  .spRank--c > .spCell{ --rowH:48px; }
  .spCell img,.spRank--title .spCell img{ width:min(var(--w), 100%); }
  .spRank--a .spName{ font-size:34px; }
  .spRank--b .spName{ font-size:28px; }
  .spRank--c .spName{ font-size:16px; }
  .endorseBlock{ margin-top:36px; padding-top:36px; }
  .endorse{ margin-top:18px; gap:10px 48px; }
  .endorse__i .spName{ font-size:24px; }
  .endorse__i img{ width:min(var(--w), 100%); }
}

.recruit{ margin-top:56px; background:var(--navy); color:#fff; padding:32px 20px 34px; }
/* 板の見出しは章タイトルと同じ段（.secH）、呼びかけは要点（.secLead）。巨大な文字にしない */
.recruit__text p{ margin-top:12px; font-size:15px; line-height:1.85; }
.recruit__text p:first-child{ margin-top:16px; }
.recruit__act{ margin-top:28px; }
.deadline__k{ display:block; font-size:14px; font-weight:700; }
.deadline__v{ display:block; font-size:30px; font-weight:700; line-height:1.2; }
.ctaMain{ display:block; margin-top:20px; padding:18px 20px; border:2px solid #fff; text-decoration:none; }
.ctaMain b{ display:block; font-size:18px; font-weight:700; }
.ctaMain small{ display:block; margin-top:2px; font-size:14px; }
/* 協賛案内PDF：紺の板の中の主ボタン。ブランドのオレンジ（白文字で 4.6:1）。
   カーソルを合わせると色が濃くなり、矢印が右へ動く（キーボードのフォーカスでも同じ） */
a.ctaMain{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--orange-t); color:#fff; border:0; border-radius:4px; padding:18px 22px;
  transition:background-color .2s ease;
}
.ctaMain__t{ display:block; }
.ctaMain__arrow{ flex:none; width:12px; height:12px; margin-right:6px; border-top:3px solid currentColor; border-right:3px solid currentColor; transform:rotate(45deg); transition:transform .2s ease; }
a.ctaMain:hover,a.ctaMain:focus-visible{ background:#A34500; }
a.ctaMain:hover .ctaMain__arrow,a.ctaMain:focus-visible .ctaMain__arrow{ transform:translateX(5px) rotate(45deg); }
a.ctaMain:hover b{ text-decoration:underline; text-underline-offset:4px; }
.ctaMain.is-pending{ border-style:dashed; border-color:rgba(255,255,255,.6); }
.ctaSub{ margin-top:20px; font-size:14px; line-height:1.6; }
.ctaSub span{ display:block; font-weight:700; }
.ctaSub a{ display:inline-block; font-size:24px; text-decoration:none; border-bottom:2px solid rgba(255,255,255,.6); }
.ctaSub small{ display:block; margin-top:4px; font-size:14px; }
@media (min-width:1024px){
  .sponsors{ padding:104px 0 88px; }
  .tiersHold{ margin-top:40px; display:flex; align-items:baseline; gap:12px 40px; padding:22px 28px; }
  .tiersHold__t{ margin:0; }
  .recruit{ margin-top:96px; padding:56px 64px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; align-items:start; }
  .recruit__msg{ grid-column:1/7; }
  .recruit__text{ max-width:30em; }
  .recruit__act{ grid-column:8/13; margin:0; }
  .deadline__v{ font-size:36px; }                                 /* 旧 52px */
}

/* ============================================================
   ⑭⑮ お問い合わせ・撮影について ＋ Footer
   最後にもう一度「いつ・どこ・いくら」と連絡先。補足はここにまとめる
   ============================================================ */
.ft{ background:var(--cream); }
.ft__grid{ padding:44px 0 36px; display:grid; gap:28px; }
.ft__logo img{ width:200px; height:auto; }
.ft__date{ margin-top:18px; font-size:15px; font-weight:700; }
.ft__date .num{ font-size:26px; }
.ft__sub{ margin-top:2px; font-size:15px; font-weight:700; }
.ft__free{ margin-top:2px; font-size:14px; }
.ft__h{ font-size:14px; font-weight:700; padding-top:12px; border-top:1px solid var(--rule); color:var(--ink-2); }
.ft__name{ margin-top:6px; font-size:16px; font-weight:700; line-height:1.5; }
.ft__staff{ display:inline-block; margin-left:12px; font-size:15px; font-weight:700; }
.ft__tel{ margin-top:2px; line-height:1.15; }
.ft__tel a{ font-size:32px; text-decoration:none; }
.ft__more{ margin-top:8px; display:grid; gap:2px; font-size:15px; }
.ft__more > div{ display:flex; align-items:baseline; gap:10px; }
.ft__more dt{ min-width:4.2em; font-size:14px; font-weight:700; color:var(--ink-2); }
.ft__more dd{ font-weight:700; }
.ft__more a{ display:inline-block; padding:4px 0; text-underline-offset:4px; word-break:break-all; }
.ft__photoB p{ margin-top:6px; font-size:14px; line-height:1.8; color:var(--ink-2); }
.ft__org{ display:flex; align-items:center; gap:14px; }
.ft__orgMark{ width:64px; flex:none; }
.ft__orgMark img{ width:100%; height:auto; }
.ft__orgT{ font-size:14px; font-weight:400; color:var(--ink-2); }
.ft__orgT b{ display:block; font-size:15px; font-weight:700; color:var(--ink); }
.ft__links{ padding-bottom:20px; font-size:14px; }
.ft__links a{ display:inline-block; padding:12px 0; text-underline-offset:4px; color:var(--ink-2); }   /* 押せる高さ 44px */
.ft__base{ background:var(--navy); color:#fff; font-size:13px; padding:12px 0; }
.ft__base .wrap{ display:block; }
@media (min-width:1024px){
  .ft__grid{ padding:72px 0 40px; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; row-gap:0; align-items:start; }
  .ft__brand{ grid-column:1/5; grid-row:1/3; }
  .ft__logo img{ width:260px; }
  .ft__contact{ grid-column:6/10; }
  .ft__tel a{ font-size:40px; }
  .ft__photo{ grid-column:10/13; }
  .ft__org{ grid-column:6/13; margin-top:40px; }
  .ft__orgMark{ width:72px; }
}

/* ============================================================
   グラフィックとモーション（実験版 2026-09-22） — motion.js と対
   ------------------------------------------------------------
   図形（ひかり）は常に描く。動く前の状態は html.motion のときだけ定義する
   （reduce・JSなしでは最初から完成状態）。動かすのは transform / opacity / clip-path / stroke-dashoffset のみ
   ============================================================ */

/* --- ひかり（ロゴの光線）：「やってみたい！」の「！」と 19／20 の数字だけ --- */
.rays{ position:absolute; width:40px; height:40px; overflow:visible; pointer-events:none; color:var(--orange); }
.rays line{ stroke:currentColor; stroke-width:3.4; stroke-linecap:round; fill:none; }
.rays--l{ transform:scaleX(-1); }
.fv__days{ position:relative; width:max-content; max-width:100%; }
/* 日付の右肩のひかりは 2026-09-23 に不採用（「日」の上に出るため）。
   ひかりは「やってみたい！」の「！」と、19／20 の数字の2か所だけに残す */
.ch--bang{ position:relative; }
.ch--bang .rays{ color:#fff; width:.4em; height:.4em; right:-.26em; top:-.22em; }
.scene__numT{ position:relative; display:inline-block; }
.scene__numT .rays{ width:.12em; height:.12em; right:-.1em; top:.04em; }
.scene__numT .rays--l{ right:auto; left:-.1em; }

@media (prefers-reduced-motion:no-preference){

  /* ① FV：写真が地平線から昇る（ひので）→ ロゴが中央から開く。初回のみ */
  .motion .fv__photo{ clip-path:circle(0% at 50% 100%); }
  .motion .fv__photo .shot__img{ transform:scale(1.08); }
  .motion .fv__logo{ clip-path:inset(0 50% 0 50%); transform:scale(.94); }
  .motion .fv__copy,.motion .fv__info,.motion .fv__exps,.motion .fv__foot{ opacity:0; transform:translateY(10px); }
  .motion.is-ready .fv__photo{ clip-path:circle(150% at 50% 100%); transition:clip-path 1.1s cubic-bezier(.3,.7,.2,1); }
  .motion.is-ready .fv__photo .shot__img{ transform:none; transition:transform 1.8s cubic-bezier(.2,.7,.2,1); }
  .motion.is-ready .fv__logo{ clip-path:inset(0 0 0 0); transform:none; transition:clip-path .8s cubic-bezier(.3,.8,.2,1) .2s, transform .9s cubic-bezier(.2,.9,.2,1) .2s; }
  /* ロゴのあと、読む順に出る：キャッチ → 日時・会場・札 → 6体験と最寄り駅・主催 */
  .motion.is-ready .fv__copy{ opacity:1; transform:none; transition:opacity .4s ease .28s, transform .5s cubic-bezier(.2,.7,.2,1) .28s; }
  .motion.is-ready .fv__info{ opacity:1; transform:none; transition:opacity .4s ease .38s, transform .5s cubic-bezier(.2,.7,.2,1) .38s; }
  .motion.is-ready .fv__exps,.motion.is-ready .fv__foot{ opacity:1; transform:none; transition:opacity .4s ease .5s, transform .5s cubic-bezier(.2,.7,.2,1) .5s; }
  /* 冠協賛のクレジット（2026-10-23）：読み込み時の1回だけ。読む順（冠協賛 → イベントロゴ）に合わせて最初に出す。
     ① ロゴが少し下から浮かび上がる（0.1秒後から0.9秒）→ ② 「presents」が左から寄って現れる（0.65秒後から0.7秒）。
     動かすのは透明度と位置（transform）だけで、大きさ・形・色は変えない。場所は最初から確保しているのでレイアウトは動かない。
     動きを減らす設定では、このブロックごと効かない（最初から表示） */
  .motion .fv__presentsLogo,.motion .fv__presentsName{ opacity:0; transform:translateY(12px); }
  .motion .fv__presentsBy{ opacity:0; transform:translateX(-14px); }
  .motion.is-ready .fv__presentsLogo,.motion.is-ready .fv__presentsName{ opacity:1; transform:none; transition:opacity .6s ease .1s, transform .9s cubic-bezier(.2,.7,.2,1) .1s; }
  .motion.is-ready .fv__presentsBy{ opacity:1; transform:none; transition:opacity .5s ease .65s, transform .7s cubic-bezier(.2,.7,.2,1) .65s; }

  /* ①' FVの写真の自動切り替え：次の写真がわずかに寄った状態から、短くフェードしながら元の大きさへ落ち着く。
     フェードの長さは site.js の fvSlides.fade（0.9秒）と同じにする。動くのは切り替わる間だけ（表示中は止まっている） */
  .fvx__layer{ transform:scale(1.02); }
  .fvx__layer.is-active{ transform:none; transition:opacity .9s ease, transform 1.4s cubic-bezier(.2,.6,.2,1); }

  /* ② 章扉：「やってみたい」が声のように1字ずつ弾み、最後の「！」が押印のように決まって光る */
  .motion .expIntro__q .ch{ display:inline-block; opacity:0; transform:translateY(.42em) scale(.92); }
  .motion .expIntro__q .ch--bang{ transform:scale(.2) rotate(-16deg); transform-origin:50% 80%; }
  .motion .expIntro__q .rays line{ stroke-dasharray:1; stroke-dashoffset:1; }
  .motion .expIntro__r{ clip-path:inset(0 100% 0 0); }
  .motion .is-in .ch{ opacity:1; transform:none;
    transition:transform .5s cubic-bezier(.2,1.45,.4,1) calc(var(--i) * 55ms), opacity .2s linear calc(var(--i) * 55ms); }
  .motion .is-in .ch--bang{ transition:transform .55s cubic-bezier(.2,1.9,.35,1) calc(var(--i) * 55ms + 120ms), opacity .15s linear calc(var(--i) * 55ms + 120ms); }
  .motion .is-in .expIntro__q .rays line{ stroke-dashoffset:0; transition:stroke-dashoffset .3s cubic-bezier(.2,.8,.2,1) calc(.62s + var(--i) * 50ms); }
  .motion .is-in .expIntro__r{ clip-path:inset(0 0 0 0); transition:clip-path .7s cubic-bezier(.4,.1,.2,1) .8s; }

  /* ③ 6体験：写真1枚の中で見え方が変わる。体験ごとに動きを変える */
  /* お米：章扉のオレンジの下端で待っていた写真が、オレンジの上へ昇る（隠す量＝食い込みの深さ）。
     そのあと写真の中を、表情 → 洗米の手元へゆっくり下りる（motion.js の drift） */
  .motion .scene--wide .scene__photo{ clip-path:inset(48px 0 0 0); }
  .motion .scene--wide.is-in .scene__photo{ clip-path:inset(0 0 0 0); transition:clip-path .8s cubic-bezier(.3,.7,.2,1); }
  @media (min-width:1024px){ .motion .scene--wide .scene__photo{ clip-path:inset(120px 0 0 0); } }
  /* プログラミング：画面がつくように左から右へ */
  .motion .scene--screen .scene__photo{ clip-path:inset(0 100% 0 0); }
  .motion .scene--screen .scene__photo{ clip-path:inset(0 35% 0 0); }
  .motion .scene--screen.is-in .scene__photo{ clip-path:inset(0 0 0 0); transition:clip-path .6s cubic-bezier(.3,.7,.2,1); }
  /* 19・20：巨大な数字が先に立ち上がり、少し遅れて写真が横から重なる。最後に数字が光る */
  .motion .scene--number .scene__numT{ clip-path:inset(100% 0 0 0); transform:translateY(14%); }
  .motion .scene--number .scene__photo{ clip-path:inset(0 0 0 100%); transform:translateX(6%); }
  .motion .scene--number.is-alt .scene__photo{ clip-path:inset(0 100% 0 0); transform:translateX(-6%); }
  .motion .scene--number .rays line{ stroke-dasharray:1; stroke-dashoffset:1; }
  .motion .scene--number.is-in .scene__numT{ clip-path:inset(0 0 0 0); transform:none; transition:clip-path .7s cubic-bezier(.3,.8,.2,1), transform .8s cubic-bezier(.2,.9,.2,1); }
  .motion .scene--number.is-in .scene__photo{ clip-path:inset(0 0 0 0); transform:none; transition:clip-path .8s cubic-bezier(.4,.1,.2,1) .45s, transform .9s cubic-bezier(.2,.8,.2,1) .45s; }
  .motion .scene--number.is-in .rays line{ stroke-dashoffset:0; transition:stroke-dashoffset .3s cubic-bezier(.2,.8,.2,1) calc(1.15s + var(--i) * 60ms); }

  /* ⑤ 会場：見出しは最初から見えている。フロアだけが、スクロールして読む順（5F → 3F → 2F → 1F）に現れる（遅延は motion.js） */
  .motion .floor{ opacity:0; transform:translateY(14px); }
  .motion .floor .floor__id .num{ display:inline-block; transform:translateY(40%); }
  .motion #floorList.is-in .floor{ opacity:1; transform:none; transition:opacity .35s ease var(--d, 0s), transform .5s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
  .motion #floorList.is-in .floor .floor__id .num{ transform:none; transition:transform .6s cubic-bezier(.2,1.3,.4,1) var(--d, 0s); }
}

/* 印刷・reduced-motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none!important; animation:none!important; }
}

/* 体験の流れ：幅が取れる画面では6つを1段に並べる */
@media (min-width:1280px){
  .scene--wide .steps__list{ grid-template-columns:repeat(6,minmax(0,1fr)); column-gap:24px; }
}

/* 体験の流れ：タブレット幅では2列にして、名前と目安の距離を縮める（1行が横に長くなりすぎない） */
@media (min-width:700px) and (max-width:1023px){
  .steps__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; }
}

/* 幅の狭い段のキャッチ：1024〜1279px では段が狭いので一段小さく（文節がはみ出さない大きさ） */
@media (min-width:1024px) and (max-width:1279px){
  .scene--number .scene__lead{ font-size:22px; }
}
/* 幅の狭い段に置く体験名：1024px付近でも「体験」まで1行に収める */
@media (min-width:1024px) and (max-width:1119px){
  .scene--detail .scene__name,.scene--side .scene__name,.scene--screen .scene__name,.scene--number .scene__name{ font-size:30px; }
}

/* 2026-10-27 後援4団体：依頼者の指定で3行（那覇市・那覇市教育委員会／沖縄観光コンベンションビューロー／沖縄タイムス社）。
   site.js の endorsers の並び順に対応している（3つ目以降をそれぞれ独立した行にする） */
.endorse__i{ max-width:100%; justify-content:center; }
.endorse__i:nth-child(n+3){ flex-basis:100%; }
@media (max-width:599px){
  .endorse{ gap:14px 24px; }
  /* 「沖縄観光コンベンションビューロー」（16字）は1つのまとまりで折り返せないため、
     390px未満だけ4団体そろって小さくし、320px（17px）でも枠からはみ出さないようにする */
  .endorse__i .spName{ font-size:clamp(17px, 5.3vw, 20px); }
  .endorse__i:nth-child(3) .ph--kind{ display:block; }
  .endorse__i:nth-child(3) .ph:not(.ph--kind){ display:inline; }
}