/* 船浮音祭り 公式サイト — 案17 トラベルマガジン調 スタイル
   design-proposals/otomatsuri/17-travel-magazine-v2.html の <style> を移植。
   見出し=Zen Old Mincho／英字=Archivo／本文=Zen Kaku Gothic New。
   ※プロトタイプ専用の左上「案バッジ（.badge）」は本実装では非表示のため未移植。 */

/* ================= tokens ================= */
:root{
  /* v2「昼の祭り」パレットへ差し替え（2026-07-24・トークン名は据え置き＝既存CSSはそのまま動く） */
  --paper:#FFF7EA;       /* 地：明るい昼の陽射し（旧 #FFFDF5） */
  --teal:#12A08F;        /* 海（ジェイド・中／旧 #00A6A6） */
  --coral:#F0592B;       /* 夕陽（パーシモン・主／旧 #FF6B35） */
  --mustard:#FBB021;     /* 灯り（サン・主役級／旧 #F7C548） */
  --navy:#0E2C38;        /* 見出し等の濃色（インディゴ／旧 #124E78） */
  --lagoon:#16B0A0;      /* オーシャングラデ 明（ジェイド寄り／旧 #4CC9F0） */
  --palm:#0E8577;        /* オーシャングラデ 暗（深いジェイド／旧 #00C2A0） */
  --ink:#12333F;         /* 本文の墨（旧 #123047） */
  --ink-60:rgba(18,51,63,.6);
  /* アクセント4色の「テキスト用濃色版」（2026-07-29FB「英字が地色によって薄すぎ/バラバラ」）。
     明色版は mark ハイライト等の面用に残し、小さな英字テキストはこちらを使う。
     値は各色が載る地色（下の「地色→アクセント」対応）に対して 4.5:1 以上になるよう選定 */
  --coral-ink:#CD3E10;   /* 夕陽の濃色（生成り地 4.6:1・白カード 4.9:1） */
  --mustard-ink:#9A6200; /* 灯りの濃色＝琥珀（淡暖色地 4.7:1） */
  --lagoon-ink:#0D7B82;  /* オーシャン明の濃色。青寄りに振って --palm 系と区別（淡水色地 4.7:1） */
  --palm-ink:#0C7568;    /* オーシャン暗の濃色（薄緑地 5.1:1・空 5.0:1） */
  --line:rgba(18,51,63,.14);
  --sunset:linear-gradient(90deg,var(--coral) 0%,#F7852B 45%,var(--mustard) 100%);
  --ocean:linear-gradient(90deg,var(--lagoon) 0%,#12A08F 50%,var(--palm) 100%);
  --mincho:'Zen Old Mincho',serif;
  --arch:'Archivo',sans-serif;
  --jp:'Zen Kaku Gothic New',sans-serif;
  --wrap:1120px;
  --pad:clamp(18px,5vw,60px);
  --accent:var(--coral);
  --accent-ink:var(--coral-ink);
  /* 垂直リズム（エディトリアル統一スケール） */
  --sec-pad:clamp(72px,9vw,150px);    /* 全セクション上下padding（ゆったり呼吸。SP下限72px／PC上限150px） */
  --head-gap:clamp(40px,5vw,56px);    /* sec-head→本文の距離 */
  --sub-top:clamp(48px,7vw,72px);     /* 小見出しブロック上マージン */
  --sub-gap:clamp(24px,3vw,32px);     /* 小見出し→内容の距離 */
  --flow:clamp(40px,6vw,72px);        /* 全幅要素（写真マーキー等）前後 */
  --measure:36em;                     /* 本文段落の読み幅 */
  --gap-sm:16px; --gap-md:24px; --gap-lg:40px;
  /* 紙質感ノイズ（印刷物のグレイン・feTurbulenceを彩度0で焼き込み・地全体に敷く） */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)' opacity='0.05'/%3E%3C/svg%3E");
  /* セクション境界の手描き風波（横幅全体で山1つ谷1つの大きなスウェル・S字起伏・preserveAspectRatio none で全幅伸長） */
  --wave-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1200 V56 C1120,48 1000,36 850,37 C700,38 560,86 380,84 C240,82 120,70 0,60 Z' fill='%23000'/%3E%3C/svg%3E");
  /* もこもこ雲（白ベタ・平たい横長・opacityはCSS側で指定・色付きセクション地の上の余白装飾） */
  /* もこもこ雲（白ベタ・丸を重ねた輪郭がはっきり分かる横長雲＝中央に大きい円・左右に中小の円・下辺は角丸ベースでほぼ水平） */
  --cloud1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 48'%3E%3Cg fill='%23fff'%3E%3Crect x='10' y='28' width='104' height='16' rx='8'/%3E%3Ccircle cx='22' cy='30' r='10'/%3E%3Ccircle cx='40' cy='25' r='14'/%3E%3Ccircle cx='62' cy='20' r='18'/%3E%3Ccircle cx='84' cy='25' r='14'/%3E%3Ccircle cx='102' cy='30' r='10'/%3E%3C/g%3E%3C/svg%3E");
  --cloud2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 44'%3E%3Cg fill='%23fff'%3E%3Crect x='9' y='26' width='90' height='14' rx='7'/%3E%3Ccircle cx='20' cy='28' r='9'/%3E%3Ccircle cx='36' cy='23' r='12'/%3E%3Ccircle cx='54' cy='19' r='16'/%3E%3Ccircle cx='72' cy='23' r='12'/%3E%3Ccircle cx='88' cy='28' r='9'/%3E%3C/g%3E%3C/svg%3E");
  --cloud3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 42'%3E%3Cg fill='%23fff'%3E%3Crect x='7' y='22' width='82' height='13' rx='6'/%3E%3Ccircle cx='15' cy='27' r='8'/%3E%3Ccircle cx='31' cy='22' r='12'/%3E%3Ccircle cx='48' cy='17' r='16'/%3E%3Ccircle cx='65' cy='22' r='12'/%3E%3Ccircle cx='81' cy='27' r='8'/%3E%3C/g%3E%3C/svg%3E");
}
/* ================= base ================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
/* overflow-x:clip＝境界アニメ（船・魚など）の画面外はみ出しが横スクロール幅を作らないように。
   hiddenでなくclipなのはスクロールコンテナ化を避けsticky等を壊さないため */
html{ scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; }
/* PC幅は基本サイズを底上げ（rem全体を18px基準へスケール／SP=16px維持） */
@media (min-width:921px){ html{ font-size:18px; } }
body{
  font-family:var(--jp);
  font-weight:400;
  font-size:1rem;
  line-height:1.9;
  color:var(--ink);
  background-color:var(--paper);
  background-image:var(--noise);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad); }

/* 誌面キャプション類 */
.en{ font-family:var(--arch); font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
/* 差し色（旧グラデ文字→単色インク化・クラスは互換のため残置） */
.grad-sunset{ color:var(--coral); }
.grad-ocean{ color:var(--navy); }

/* ================= マストヘッド（誌名ナビ） ================= */
.site-head{
  position:sticky; top:0; z-index:200;
  background:rgba(255,253,245,.94);
  backdrop-filter:saturate(1.3) blur(7px);
  border-bottom:3px solid var(--navy);
}
.site-head .inner{
  max-width:var(--wrap); margin:0 auto; padding:10px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
/* 誌名ロゴ（左・明朝／トークン一致・ホームへ）＝2行構成（誌名＋英字） */
.site-brand{
  display:flex; flex-direction:column; line-height:1.15;
  font-family:var(--mincho); font-weight:900;
  font-size:clamp(1.05rem,3.4vw,1.28rem); letter-spacing:.06em;
  color:var(--navy); white-space:nowrap; transition:color .15s;
}
.site-brand:hover{ color:var(--coral); }
/* 誌名下の英字（濃いオレンジ＝コーラル） */
.brand-en{ display:block; font-family:var(--arch); font-weight:800; font-size:.6rem; letter-spacing:.16em; color:var(--coral); margin-top:1px; text-transform:uppercase; }
.gnav ul{ list-style:none; display:flex; gap:2px; }
.gnav a{
  display:block; font-weight:700; font-size:.85rem; padding:6px 10px;
  white-space:nowrap; transition:.15s; border-bottom:2px solid transparent; color:var(--navy);
}
.gnav a:hover{ border-color:var(--coral); color:var(--coral); }
.gnav a.oto{ color:#fff; background:var(--coral); border-radius:999px; padding:6px 15px; font-weight:900; border-bottom:none; }
.gnav a.oto:hover{ background:var(--navy); color:#fff; }
/* ハンバーガーボタン（PCは非表示・狭幅かつJS有効時のみ表示） */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  background:transparent; border:2px solid var(--navy); border-radius:8px;
  color:var(--navy); cursor:pointer;
}
.nav-toggle-bars{
  position:relative; display:block; width:22px; height:2px;
  background:var(--navy); border-radius:2px; transition:background .2s;
}
.nav-toggle-bars::before, .nav-toggle-bars::after{
  content:""; position:absolute; left:0; width:22px; height:2px;
  background:var(--navy); border-radius:2px; transition:transform .25s ease;
}
.nav-toggle-bars::before{ top:-7px; }
.nav-toggle-bars::after{ top:7px; }
/* 開いたら×へ */
.nav-open .nav-toggle-bars{ background:transparent; }
.nav-open .nav-toggle-bars::before{ transform:translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-bars::after{ transform:translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce){
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after{ transition:none; }
}
@media (max-width:920px){
  /* JS無効時のフォールバック＝従来の横スクロール（リンクに到達可能） */
  .site-head .inner{ flex-direction:column; align-items:stretch; gap:4px; padding-bottom:0; }
  .gnav{ overflow-x:auto; scrollbar-width:none; margin-inline:calc(var(--pad)*-1); padding-inline:var(--pad); }
  .gnav::-webkit-scrollbar{ display:none; }
  .gnav ul{ padding-bottom:7px; }

  /* JS有効時＝ハンバーガードロップダウン */
  .js .site-head .inner{ flex-direction:row; align-items:center; justify-content:space-between; gap:12px; padding-bottom:10px; }
  .js .nav-toggle{ display:inline-flex; }
  .js .gnav{
    position:absolute; top:100%; left:0; right:0;
    margin-inline:0; padding-inline:0;
    background:var(--paper);
    border-bottom:3px solid var(--navy);
    box-shadow:0 12px 24px rgba(18,48,71,.14);
    max-height:70vh; overflow-x:visible; overflow-y:auto;
    display:none;
  }
  .nav-open .gnav{ display:block; }
  .js .gnav ul{ flex-direction:column; gap:0; padding:6px var(--pad) 16px; }
  .js .gnav li{ border-bottom:1px solid var(--line); }
  .js .gnav li:last-child{ border-bottom:none; }
  .js .gnav a{
    display:flex; align-items:center; min-height:44px;
    font-size:15px; padding:11px 4px; border-bottom:none; white-space:normal;
  }
  .js .gnav a.oto{ justify-content:center; margin-top:12px; padding:12px 18px; }
}
/* アンカーナビ（#about〜#contact）の着地点が sticky の .site-head に隠れないための余白。
   実高＝.inner の上下padding 20px＋いちばん高い子（PC:ナビリンク約43px／SP:ハンバーガー44px）
   ＋下罫3px＝約67px。ここに逃げを11px足して78px（PC/SPで実高がほぼ同じなので単一値） */
section[id]{ scroll-margin-top:78px; }

/* ================= HERO（フルブリード大判＋乗船券） ================= */
.hero{ position:relative; }
.hero .stage{
  position:relative; width:100%;
  height:78vh; min-height:520px; max-height:780px;
  overflow:hidden; background:var(--navy);
}
.hero .stage img{ width:100%; height:100%; object-fit:cover; }
/* 可読性のための薄マスク（写真はフルカラーのまま・色味を殺さない） */
.hero .stage::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(18,46,78,.30) 0%, rgba(18,46,78,.12) 30%, rgba(18,46,78,.12) 42%, rgba(18,46,78,.55) 100%),
    linear-gradient(90deg, rgba(18,46,78,.24) 0%, rgba(18,46,78,0) 56%),
    rgba(18,46,78,.06);
}
.hero .cover{
  position:absolute; inset:0; z-index:2;
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(28px,4.5vw,56px) var(--pad) clamp(80px,10vw,124px);
  display:flex; flex-direction:column; color:#fff;
}
.hero .mm{ font-family:var(--arch); font-weight:800; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.hero-mid{ margin-top:auto; }
.hero-title{
  font-family:var(--mincho); font-weight:900;
  font-size:clamp(3.2rem,13vw,8rem); line-height:.96; letter-spacing:.03em;
  text-shadow:4px 4px 0 var(--navy), 0 2px 12px rgba(0,0,0,.5), 0 2px 30px rgba(0,0,0,.35);
}
.hero-en{
  font-family:var(--arch); font-weight:800; font-size:clamp(.8rem,2.4vw,1.3rem);
  letter-spacing:.28em; margin-top:14px; color:var(--mustard);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  text-shadow:2px 2px 0 var(--navy);
}
.hero-en::after{ content:""; flex:1; min-width:44px; height:5px; border-radius:3px; background:var(--sunset); }
.hero-lead{ margin-top:16px; max-width:30em; font-weight:500; font-size:clamp(.94rem,2vw,1.06rem); line-height:1.8; text-shadow:0 2px 14px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5); }
/* SP：タイトル（＋英字ライン）を上寄せし、リード文もタイトル直下に置く（2026-07-22ユーザー指示・PCは下寄せのまま） */
@media (max-width:920.98px){
  .hero-mid{ margin-top:0; }
}
/* SP：MVの丈を詰めて乗船券の上部をファーストビューに覗かせる（2026-07-29FB
   「mv-ticket は…今はスクロールしないと見えない」）。
   78vh のままだと 390x844 で券の上端が ヘッダー67 ＋ MV658 − 重なり40 ＝ 685px に来る。
   ヘッドレスの実測では券の上部163pxが画面内に入るが、実機はURLバーぶん表示高が
   660px前後に減る（vh は畳む前の高さのままなのでMVは縮まない）ため、券は画面外へ落ちる。
   58vh・上限540pxまで詰めると券の上端が約516pxまで上がり、実機でも券の上半分が残る。
   写真は横位置なので丈を詰めるほど左右の切り落としは減る＝トリミングは悪化しない。
   PC幅（601px以上）は据え置き。 */
@media (max-width:600px){
  .hero .stage{ height:58vh; min-height:400px; max-height:540px; }
}

/* MV乗船券（案16準拠：写真下端に少し傾けて重ねる1枚もの＋消印スタンプ。
   左半券=回数／本券=題名・開催日・航路。暖色グラデは--coral基調に彩度を抑えて翻案） */
/* 傾きと消印の受け皿。地・フチ・影は下の2層が持つ（消印はマスクの外＝この層の直下に置く） */
.mv-ticket{
  position:relative; z-index:6;
  max-width:760px; margin:-64px auto 0;
  transform:rotate(-2.2deg);
}
/* 左右中央の丸ノッチ＝切符の切れ込み（2026-07-29／suguru3_opus5 css/style.css の
   .cd-card＋.cd-ticket を翻案）。外側 .mv-card（藍のフチ）と内側 .mv-face（生成りの券面）の
   2層に、位置は同じで半径だけ --edge ぶん違うマスクを掛ける。内側は穴の中心をカードの端に
   合わせて半径を --edge 大きくすることで、藍のフチが一定幅の弧として切れ込みをなぞる
   （単層マスクだとノッチの所でフチが途切れて紙の断面が出る）。
   ※mask は box-shadow を切り落とすので、券の影は drop-shadow で代用している（出典元の注記どおり）。
     ただし drop-shadow を掛ける層はマスクを持つ .mv-card 自身ではなく、その外側の .mv-shadow。
     描画順が「filter→mask」なので同じ要素に両方置くと影ごとマスクに切り落とされる（実測で確認）。
     外側に出すと影はノッチ込みの輪郭をなぞってくれる。消印は影が要らないので .mv-shadow の外。 */
.mv-shadow{ filter:drop-shadow(12px 12px 0 rgba(18,78,120,.24)); }
.mv-card{
  --notch:15px;   /* 切れ込みの半径 */
  --edge:2px;     /* フチの太さ（旧 border:2px solid var(--navy) 相当） */
  background:var(--navy);
  padding:var(--edge);
  border-radius:10px;
  -webkit-mask-image:
    radial-gradient(circle var(--notch) at 0 50%,rgba(0,0,0,0) 96%,#000 100%),
    radial-gradient(circle var(--notch) at 100% 50%,rgba(0,0,0,0) 96%,#000 100%);
  mask-image:
    radial-gradient(circle var(--notch) at 0 50%,rgba(0,0,0,0) 96%,#000 100%),
    radial-gradient(circle var(--notch) at 100% 50%,rgba(0,0,0,0) 96%,#000 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
/* 地紋は無地（斜線ピンストライプは2026-07-22ユーザー指示で撤去） */
.mv-face{
  position:relative;
  display:flex; align-items:stretch;
  background-color:var(--paper);
  border-radius:8px;
  -webkit-mask-image:
    radial-gradient(circle calc(var(--notch) + var(--edge)) at calc(-1 * var(--edge)) 50%,rgba(0,0,0,0) 96%,#000 100%),
    radial-gradient(circle calc(var(--notch) + var(--edge)) at calc(100% + var(--edge)) 50%,rgba(0,0,0,0) 96%,#000 100%);
  mask-image:
    radial-gradient(circle calc(var(--notch) + var(--edge)) at calc(-1 * var(--edge)) 50%,rgba(0,0,0,0) 96%,#000 100%),
    radial-gradient(circle calc(var(--notch) + var(--edge)) at calc(100% + var(--edge)) 50%,rgba(0,0,0,0) 96%,#000 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
/* 左半券（暖色地・回数を大きく） */
.mv-stub{
  position:relative; flex:0 0 122px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:5px; padding:16px 8px;
  color:#fff;
  background:linear-gradient(180deg, var(--coral) 0%, #F7852B 55%, var(--mustard) 100%);
  border-right:3px dashed var(--paper);
  border-radius:8px 0 0 8px;
}
.mv-stub .adm{ font-family:var(--arch); font-weight:800; font-size:.72rem; letter-spacing:.14em; text-shadow:0 1px 0 rgba(18,78,120,.35); }
.mv-stub .no{ font-family:var(--arch); font-weight:800; font-size:3.6rem; line-height:.86; text-shadow:0 3px 0 rgba(18,78,120,.28); }
.mv-stub .no.yr{ font-size:2.1rem; letter-spacing:.02em; }
.mv-stub .kai{ font-weight:900; font-size:.76rem; background:var(--paper); color:var(--coral); border-radius:30px; padding:1px 12px; }
/* 半券と本券の境のミシン目（パンチ穴列） */
.mv-perf{ position:absolute; left:122px; top:0; bottom:0; width:8px; z-index:4; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-evenly; align-items:center; }
.mv-perf i{ position:static; margin-left:-6px; width:14px; height:14px; background:var(--paper); border-radius:50%; box-shadow:inset 0 0 0 2px rgba(18,78,120,.16); }
/* 本券（主情報：券名・題名・開催日・航路） */
.mv-body{ position:relative; flex:1 1 auto; min-width:0; padding:20px 26px 22px; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.mv-body .lbl{ font-family:var(--arch); font-weight:800; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--coral); }
.mv-body .ttl{ font-family:var(--mincho); font-weight:900; font-size:clamp(1.25rem,3.4vw,1.7rem); letter-spacing:.02em; line-height:1.2; color:var(--navy); }
.mv-body .dateline{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:2px; }
.mv-body .date{ font-family:var(--arch); font-weight:800; font-size:clamp(2rem,6vw,3.2rem); line-height:.9; letter-spacing:.01em; color:var(--coral); }
.mv-body .dow{ font-family:var(--arch); font-weight:800; font-size:clamp(1.1rem,3vw,1.5rem); letter-spacing:.1em; color:var(--navy); }
.mv-body .place{ font-family:var(--mincho); font-weight:700; font-size:.98rem; letter-spacing:.02em; color:var(--ink); margin-top:2px; }
.mv-body .place b{ color:var(--coral); font-weight:900; }
.mv-body .serial{ font-family:var(--arch); font-weight:700; font-size:.66rem; letter-spacing:.06em; color:var(--ink-60); margin-top:4px; }
/* 消印（右上に1つ・スクロール入視でポンと押す） */
.postmark{
  position:absolute; right:22px; top:-16px; z-index:8;
  width:100px; height:100px;
  transform:rotate(-13deg);
}
.postmark.pop{ animation:postmarkin .55s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes postmarkin{
  0%{ opacity:0; transform:scale(1.9) rotate(-24deg); }
  60%{ opacity:1; transform:scale(.92) rotate(-8deg); }
  100%{ opacity:1; transform:scale(1) rotate(-13deg); }
}
/* SP：横並び（左=半券・右=本券）を維持したまま縮小＝チケット感と消印の視認性を確保。
   幅が無いぶん字間は全て詰める（letter-spacing:0＝2026-07-22ユーザー指示） */
@media (max-width:600px){
  .mv-ticket{ transform:rotate(-1.5deg); margin-top:-40px; }
  /* 券が小さくなるぶん切れ込みも浅く（PC 15px → SP 11px） */
  .mv-card{ --notch:11px; }
  /* 詳細度(0,2,0)で .mv-body .lbl 等の字間指定と同格にし、後勝ちで全て0へ
     （消印.postmarkは対象外＝スタンプの字間は維持） */
  .mv-ticket .mv-stub *, .mv-ticket .mv-body *{ letter-spacing:0; }
  .mv-stub{ flex:0 0 84px; padding:12px 6px; gap:4px; }
  .mv-stub .adm{ font-size:.58rem; }
  .mv-stub .no{ font-size:2rem; }
  .mv-stub .no.yr{ font-size:1.5rem; }
  .mv-stub .kai{ font-size:.66rem; padding:1px 9px; }
  .mv-perf{ left:84px; }
  .mv-body{ padding:12px 14px 14px; }
  .mv-body .serial{ font-size:.6rem; }
  .postmark{ right:10px; top:-14px; width:76px; height:76px; }
}
/* 410px以下＝「乗船券 ／ Boarding Pass」の行が消印スタンプの下に潜り込んで重なる幅。
   ラベルだけ一段小さくして逃がす（2026-07-29FB）。消印・他の行のサイズは触らない。 */
@media (max-width:410px){
  .mv-body .lbl{ font-size:.62rem; }
}

/* ================= 号数バー ================= */
.editline{ background:var(--navy); color:#fff; margin-top:clamp(34px,5vw,58px); }
.editline .in{ max-width:var(--wrap); margin:0 auto; padding:13px var(--pad); display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; }
.editline .lead{ font-family:var(--arch); font-weight:800; font-size:.75rem; letter-spacing:.14em; color:var(--mustard); }
.editline .d{ font-weight:900; font-size:clamp(1rem,2.4vw,1.3rem); letter-spacing:.03em; }
.editline .d em{ font-family:var(--arch); font-style:normal; font-weight:800; color:var(--lagoon); }
.editline .v{ margin-left:auto; font-weight:700; font-size:.9rem; opacity:.92; }

/* ================= section 見出し ================= */
.sec{ padding:var(--sec-pad) 0; position:relative; isolation:isolate; }  /* isolate=波/雲(z-index:-1)を自身の背景上・本文下に収める */
.sec.alt{ background-color:#EFF8F6; background-image:var(--noise); }   /* 淡い水色（単色・区切りを明確化） */
.sec.warm{ background-color:#FBF4E7; background-image:var(--noise); }  /* 淡い暖色（単色・区切りを明確化） */
/* 協賛だけ砂っぽいテクスチャ（2026-07-29指示・池田卓サイトの textures/bg_texture_noise.png をコピーして使用）。
   境界波（#history::before）側の砂は、共通の波ルール（後方の #faq::before,… 一括指定）に
   上書きされない位置＝波色（--wave-prev）定義群の直後に置いてある */
#sponsors.sec.warm{ background-image:url("textures/bg_texture_noise.png"), var(--noise); background-repeat:repeat; }
.sec.fresh{ background-color:#EFF6EA; background-image:var(--noise); } /* 薄グリーン（旧・音祭りとは用→2026-07-28から主催の想い #omoi で使用） */
/* 想い＝薄グリーンのベタ地に代えて水彩のテクスチャを敷く（2026-07-29指示「『とは』の空のような
   水彩調を想いにも」）。素材は「とは」の空 bg-sky.jpg を Pillow で緑へ色相シフト（205°→118°）＋
   彩度・明度を上げて淡くし、最後に .fresh の地色 #EFF6EA で乗算したもの＝紙の白がそのまま
   地色になる不透明タイル（1400x948・6KB／レシピ=scratchpad/make_bg_omoi.py）。
   同じ絵から起こしているので「とは」の空と絵柄・筆致がそろう。
   多重背景の1枚目は他セクションと同じ紙質感ノイズ、2枚目が水彩。
   .sec.fresh の background-color は webp 非対応時のフォールバックとして残す。 */
#omoi{
  background-image:var(--noise), url("img/bg-omoi.webp");
  background-repeat:repeat, no-repeat;
  background-position:top left, top center;
  background-size:auto, cover;
}
/* 地色→アクセントの1対1対応（2026-07-29FB「英字の色に規則性が無い」）。
   従来は front-page.php の各 section にインラインで --accent を割り振っていた（セクション順の持ち回り）ため、
   同じ地色に別アクセント／同じアクセントが別の地色に載っていた。地色クラスで決まる形に一本化。
   この割当なら隣接セクションで同アクセントが連続しないことは確認済み
   （about=palm → events=coral → access=lagoon → faq=coral → omoi=palm → sponsors=mustard → history=lagoon → contact=coral） */
.sec{ --accent:var(--coral); --accent-ink:var(--coral-ink); }          /* 生成り（--paper）地 */
.sec.alt{ --accent:var(--lagoon); --accent-ink:var(--lagoon-ink); }    /* 淡水色地 */
.sec.warm{ --accent:var(--mustard); --accent-ink:var(--mustard-ink); } /* 淡暖色地 */
.sec.fresh{ --accent:var(--palm); --accent-ink:var(--palm-ink); }      /* 薄緑地 */
.sky-zone .sec{ --accent:var(--palm); --accent-ink:var(--palm-ink); }  /* 空の水彩地（とは） */
.sec-head{ margin-bottom:var(--head-gap); }
.sec-ttl{ font-family:var(--mincho); font-weight:900; font-size:clamp(1.9rem,5.4vw,3.2rem); line-height:1.14; letter-spacing:.03em; color:var(--navy); display:flex; align-items:baseline; flex-wrap:wrap; column-gap:14px; row-gap:4px; }
.sec-ttl mark{ background:linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%); color:inherit; padding:0 .05em; }
/* 見出し横の英字あしらい（右横ベースライン揃え）。色はテキスト用濃色 --accent-ink＝
   明色の --accent は薄い地色に対して 1.7〜3.2:1 しか出ず読めなかった（2026-07-29FB）。mark の明色ハイライトはそのまま */
.sec-en{ font-family:var(--arch); font-weight:700; font-size:clamp(.85rem,1.2vw,1rem); letter-spacing:.2em; text-transform:uppercase; color:var(--accent-ink, var(--accent)); }
@media (max-width:600px){
  /* SP: 英字は日本語見出しの上に小さなまえがき（eyebrow）として配置 */
  .sec-ttl{ flex-direction:column-reverse; align-items:flex-start; column-gap:0; row-gap:6px; }
  .sec-en{ font-size:.7rem; letter-spacing:.18em; }
}

/* ================= イベント情報（live CPT の器） ================= */
/* ================= 乗船券＋「船浮音祭りとは」のゾーンと空の背景（2026-07-28） =================
   「MV直下の乗船券の背景から、空のイメージを途切れず続けたい」（2026-07-28指示）。
   乗船券を .hero の外へ出し、「船浮音祭りとは」とまとめて .sky-zone でくくった。
   同日の並べ替えで「とは」がMV直下へ上がったため、包む対象を開催情報から「とは」へ変えた
   （旧クラス名 .event-zone）。「とは」は .fresh の地色を外し、空を透かして見せている。

   提供素材 資料/img/bk_sky02.png を 1400x948 の webp/jpg へ最適化（1186KB→28KB）。

   ・空は ::before に持たせて inset:0（ゾーン全体）。高さを px で決め打ちしないので、
     「とは」の中身が増減しても常に「とは」の末尾＝開催情報の直前で終わる
   ・background-size:cover ＋ top center。素材の下部は白に抜けるが、縦長のゾーンでは
     cover が上部（青が濃い側）を使うので、下まで青が続く。縦に引き伸ばさないので絵も崩れない
   ・最下部は mask で透明へ。素材の白(254,254,253)と地の生成り(#FFF7EA)は近いが完全一致では
     ないため、ベタで終わらせると境目に線が出る。マスクなら地の色に依存せず消える
   ・z-index:-1。乗船券(z:6)より後ろ、body の地より前。「とは」は .fresh を外して地色を
     持たない（上記）ので、この空がそのまま透けて見える
   ・webp 非対応ブラウザには jpg を出す（image-set は旧Safariで解釈が割れるため @supports で分岐） */
/* display:flow-root＝乗船券の margin-top:-64px がゾーンの外へ伝播（マージンの相殺）するのを止める。
   これが無いとゾーンの上端が64px持ち上がり、空が写真の下端に食い込む。
   相殺だけを止める指定なので、乗船券はこれまでどおりゾーンの上へはみ出して写真に重なる。 */
/* 白ベール（--sky-veil）は 2026-07-29 に #about 個別指定からここへ移した。
   乗船券の背後だけ青が濃く残っていた（FB「チケットの後ろの青空も下に合わせて薄くして」）ため、
   ゾーン全体＝乗船券＋とは に同じ濃さで掛ける。ここが空の濃さの唯一の調整点。
   画像の上に重ねる1枚目のレイヤーとして書くので、@supports の webp 差し替え側も2レイヤーで書く。 */
.sky-zone{ position:relative; display:flow-root; --sky-veil:rgba(255,255,255,.80); }
.sky-zone::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(var(--sky-veil), var(--sky-veil)),
    url("img/bg-sky.jpg") no-repeat top center / cover;
  z-index:-1; pointer-events:none;
  /* 下端の透明フェード（88%→100%）は2026-07-29FB「直線に」で撤去。空はゾーン下端でハードに終わる。
     同日、下端を占めていた山の帯も開催情報の下端へ移した（#events::before）ので、
     ゾーンの終わり＝写真モザイクの下の空が、開催情報の生成りへ直線で切り替わる。 */
}
@supports (background-image:url("data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==")){
  .sky-zone::before{
    background-image:
      linear-gradient(var(--sky-veil), var(--sky-veil)),
      url("img/bg-sky.webp");
  }
}

/* 開催情報の地＝「とは」の空の下端（ほぼ白）から生成りへ縦グラデで自然につなぐ（2026-07-29FB）。
   上端色 #FDFDFB ≒ bg-sky 素材の下端（白 254,254,253）×ベール。紙目ノイズは多重背景で維持 */
#events{
  background-image:var(--noise), linear-gradient(180deg, #FDFDFB 0, var(--paper) clamp(280px,34vw,560px));
}
.events .event-list{ display:grid; gap:var(--gap-md); }
/* 地は白（2026-07-27FB）。開催情報セクションは .alt/.warm を持たず地が --paper の生成りなので、
   カードも --paper だと枠線でしか分離できていなかった。協賛カード(.sp-card)と同じ扱いに揃える。 */
.event{ background:#fff; border:2px solid var(--navy); border-radius:8px; padding:clamp(28px,4vw,48px); box-shadow:4px 4px 0 rgba(18,78,120,.10); }
.event-venue{ display:inline-block; font-family:var(--arch); font-weight:800; font-size:.75rem; letter-spacing:.06em; color:#fff; background:var(--teal); padding:3px 10px; border-radius:2px; }
.event-ttl{ font-family:var(--mincho); font-weight:900; font-size:clamp(1.3rem,3.2vw,1.9rem); color:var(--navy); letter-spacing:.03em; margin:10px 0 8px; }
.event-text{ font-size:1rem; line-height:1.95; max-width:var(--measure); }
.event-text p + p{ margin-top:14px; }
.event-text .coming{ font-family:var(--arch); font-weight:800; letter-spacing:.14em; color:var(--coral); }
.event-btn{ display:inline-block; margin-top:16px; font-weight:900; font-size:.9rem; color:#fff; background:var(--coral); border:2px solid var(--navy); border-radius:999px; padding:9px 22px; box-shadow:3px 3px 0 rgba(18,78,120,.2); transition:.15s; }
.event-btn:hover{ background:var(--navy); }
/* --- イベント詳細（旅のしおり風・情報密度確認用／WPはブロックパターンで再現） --- */
.event-sub{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; font-family:var(--mincho); font-weight:900; font-size:clamp(1.06rem,2.4vw,1.34rem); color:var(--navy); letter-spacing:.04em; margin:clamp(30px,4vw,44px) 0 16px; padding-top:clamp(20px,3vw,26px); border-top:2px dashed rgba(18,78,120,.28); }
.event-sub:first-of-type{ margin-top:clamp(24px,3.2vw,32px); }
.event-sub .en{ font-family:var(--arch); font-weight:800; font-size:.75rem; letter-spacing:.14em; color:var(--accent-ink); text-transform:uppercase; }
.tbd{ display:inline-block; font-family:var(--arch); font-style:normal; font-weight:700; font-size:.72em; letter-spacing:.04em; color:#9a9486; vertical-align:.28em; margin-left:.3em; }
.event-body a[href^="tel:"]{ color:var(--navy); font-weight:800; border-bottom:1px solid var(--teal); white-space:nowrap; }
/* 開催概要＝左にポスター・右に項目の2カラム（2026-07-28指示）。
   ポスターはWP標準のアイキャッチ。無い年は .has-poster が付かず1カラムのまま項目だけ出る。
   ポスターは縦長（B2で1:1.41）なので、列幅は固定寄りにして項目側に幅を残す。 */
.event-overview.has-poster{ display:grid; grid-template-columns:minmax(0,clamp(190px,26%,300px)) 1fr; gap:clamp(20px,3vw,38px); align-items:start; }
.event-poster{ margin:0; }
.event-poster a{ display:block; }
.event-poster img{ width:100%; height:auto; display:block;
  background:#fff; border:1px solid var(--line); border-radius:4px; padding:5px;
  box-shadow:4px 5px 12px rgba(18,48,71,.14); transition:transform .2s, box-shadow .2s; }
.event-poster a:hover img{ transform:translateY(-2px); box-shadow:6px 8px 18px rgba(18,48,71,.2); }
.event-poster figcaption{ margin-top:8px; font-family:var(--arch); font-weight:800; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-60); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.event-poster .zoom{ font-family:var(--jp); font-weight:500; font-size:.76rem; letter-spacing:.02em; text-transform:none; }
@media (prefers-reduced-motion:reduce){ .event-poster a:hover img{ transform:none; } }
@media (max-width:760px){
  /* SPは縦積み。ポスターが先頭で、幅いっぱいだと縦に伸びすぎるので上限を設けて中央へ */
  .event-overview.has-poster{ grid-template-columns:1fr; gap:clamp(18px,4vw,26px); }
  .event-poster{ max-width:300px; margin-inline:auto; }
  .event-poster figcaption{ justify-content:center; }
}

/* スペックリスト（旅のしおり） */
.event-spec{ display:grid; grid-template-columns:auto 1fr; column-gap:clamp(18px,2.5vw,32px); font-size:.98rem; line-height:1.85; }
.event-spec dt{ display:flex; flex-direction:column; justify-content:center; font-weight:900; color:var(--navy); white-space:nowrap; padding:11px 0; border-top:1px dashed rgba(18,78,120,.26); }
.event-spec dt .lbl{ display:block; font-family:var(--arch); font-weight:800; font-size:.75rem; letter-spacing:.05em; color:var(--accent-ink); text-transform:uppercase; margin-top:2px; }
.event-spec dd{ display:flex; align-items:center; margin:0; padding:11px 0; border-top:1px dashed rgba(18,78,120,.26); }
.event-spec dt:first-of-type, .event-spec dt:first-of-type + dd{ border-top:0; padding-top:0; }
@media (max-width:600px){
  .event-spec{ grid-template-columns:1fr; column-gap:0; }
  .event-spec dt{ padding:12px 0 0; flex-direction:row; justify-content:flex-start; align-items:baseline; gap:8px; }
  .event-spec dt .lbl{ margin-top:0; }
  .event-spec dd{ padding:2px 0 0; border-top:0; }
  .event-spec dt:first-of-type + dd{ padding-top:2px; }
}

/* ================= 額装写真（角版＋濃紺細罫・本文写真） ================= */
.frame-photo{ background:#fff; border:1px solid var(--line); padding:5px; border-radius:4px; box-shadow:3px 3px 0 rgba(18,78,120,.08); }
.frame-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ================= about（額装写真） ================= */
.about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,68px); align-items:center; }
.about-lead{ font-family:var(--mincho); font-weight:700; font-size:clamp(1.35rem,3.4vw,2.05rem); line-height:1.6; letter-spacing:.03em; color:var(--navy); }
.about-lead b{ color:var(--coral); }
/* リード文は句の切れ目で折り返す（2026-07-28）。素の折り返しだと本文幅648px（PC）で
   「…年に一／度、…」、700px前後で「…唄でいっ／ぱいになる。」と語の途中で泣き別れる。
   句のかたまり（.lead-ph）を inline-block にすると、句と句の間が優先的な改行位置になる。
   inline-block は shrink-to-fit なので、句1つが本文幅に収まらない極狭幅（320px級）では
   箱がはみ出さずに内側で折り返す＝横スクロールや欠けは起きない。 */
.about-lead .lead-ph{ display:inline-block; }
.about-body{ margin-top:20px; max-width:var(--measure); font-size:1.01rem; line-height:1.95; }
.about-meta{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }
.chip{ display:inline-flex; flex-direction:column; border:2px solid var(--navy); border-radius:4px; padding:8px 14px; background:var(--paper); box-shadow:3px 3px 0 rgba(18,78,120,.14); }
.chip b{ font-family:var(--arch); font-weight:800; font-size:.75rem; letter-spacing:.05em; color:var(--accent-ink); }
.chip span{ font-weight:900; font-size:.96rem; letter-spacing:.02em; margin-top:2px; color:var(--navy); }
.about-photo{ position:relative; }
.about-photo .frame-photo img{ aspect-ratio:4/5; }
.about-photo .p-mustard{ position:absolute; left:-14px; top:-14px; width:44%; height:38%; background:var(--mustard); z-index:-1; border-radius:4px; }
@media (max-width:840px){
  .about-grid{ grid-template-columns:1fr; }
  .about-photo{ order:-1; }
  .about-photo .frame-photo img{ aspect-ratio:16/10; }
}

/* ================= グラビア（濃紺罫つき2枚組） ================= */
.gravure{ padding:0; }
.gravure .band-head{ background:var(--ocean); color:var(--navy); padding:11px var(--pad); display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.gravure .band-head .en{ font-size:.72rem; letter-spacing:.24em; }
.gravure .band-head .jp{ font-family:var(--mincho); font-weight:700; font-size:1.05rem; letter-spacing:.04em; }
.gravure .grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.gravure figure{ position:relative; margin:0; overflow:hidden; border-bottom:4px solid var(--navy); }
.gravure figure:first-child{ border-right:4px solid var(--navy); }
.gravure img{ width:100%; height:clamp(230px,32vw,420px); object-fit:cover; }
.gravure figcaption{ position:absolute; left:0; bottom:0; background:var(--navy); color:#fff; padding:7px 13px; display:flex; align-items:baseline; gap:10px; }
.gravure figcaption .fig{ color:var(--mustard); }
@media (max-width:640px){ .gravure .grid{ grid-template-columns:1fr; } .gravure figure:first-child{ border-right:none; } }

/* ================= アクセス（地図＋番号付きタイムライン） =================
   2026-07-29：切符調の横並びルート図（.route / .stp / .arw の START→GOAL カード列）は撤去した。
   港の名前しか載らず、乗り継ぎ5回ぶんの「何に乗るか・何時に出るか・どこへ電話するか」を置けな
   かったため。別案 suguru3_opus5（css/style.css の .steps/.step/.inset/.arrive/.alert）を翻案し、
   番号付きの縦タイムライン5ステップ＋到着メッセージ＋Googleマップ＋注意書き の構成へ。
   原案から変えたところ：丸ゴシック調の強い角丸と厚い影は控えめにし、色は本テーマのトークンへ
   置き換え（インセット＝海のジェイド／時刻表＝灯り色）。マスキングテープは持ち込まない。
   2026-07-29(2)：ユーザー指示で左右2カラム（.ac-two＝左タイムライン／右 .ac-side に到着＋地図＋
   注意書きを sticky で追従）を解体し、縦一列＝［地図（.wrap 幅いっぱい・大きく）］→［①〜⑤＋到着］
   →［時化の注意］へ。地図が右半分の幅しか使えず小さかったのが理由で、左右の丈の差を埋めるための
   .ac-side の sticky も器がなくなったので撤去した。ステップだけ PC（1080px以上）で2列に畳む。 */
.ac-lead{ margin-top:16px; max-width:var(--measure); font-size:clamp(.96rem,1.9vw,1.04rem); line-height:1.95; }
.ac-lead .lead-ph{ display:inline-block; }  /* .about-lead と同じ、句の切れ目で折り返す仕掛け */
/* --- 番号付きタイムライン（基底＝1列。PC 2列は下の min-width:1080px で） ---
   2026-07-29(3)：ステップの器を左右2本の <ol>（.ac-col）に分けた。1本の <ol> を grid の2列に
   畳む作りでは行の高さを左右の列で共有するため、右列の⑤（265px）に引かれて左列②の行が高くなり、
   ②と③の間だけ余白が170pxに開いていた（1440pxで実測・他のステップ間はいずれも18px）。
   列ごとに独立した器にすれば、各列とも18pxずつ詰めて並ぶ。SPは器が縦に続くだけ＝見え方は不変。 */
.ac-steps{ display:grid; gap:18px; margin-top:clamp(30px,4vw,46px); }
.ac-col{ position:relative; display:grid; gap:18px; padding-left:clamp(30px,6vw,52px); list-style:none; }
/* li＝番号の丸と点線を持つ「区間」の器。白いカードの見た目は中の .ac-card 側に持たせている
   （器と見た目を分けておくと、器の高さが変わってもカードが白い余白の塊にならない・2026-07-29(2)）。 */
.ac-step{ position:relative; }
.ac-card{
  background:#fff;
  border-radius:12px 15px 11px 14px/14px 11px 15px 12px;
  padding:20px 22px;
  box-shadow:0 2px 0 rgba(18,51,63,.08), 0 8px 18px rgba(18,51,63,.07);
}
/* 番号の丸どうしをつなぐ点線の航路（色は .qa の点線罫と同じ海のジェイド）。
   2026-07-29(2)：⑤の左にも点線を通すため、除外していた最後のステップにも引くようにした
   （リストの最後は到着バナー .ac-goal になったので、⑤の線はそこまで伸びて航路が閉じる）。
   左位置＝丸の中心（-padding + 丸の半径）から線幅の半分を戻した値。
   下は -32px＝カード間の gap 18px を越えて次の丸（top:18px）へ届く長さ。 */
.ac-step::before{
  content:""; position:absolute; width:4px; border-radius:4px;
  left:calc(-1 * clamp(30px,6vw,52px) + clamp(30px,5vw,40px) / 2 - 2px);
  top:calc(24px + clamp(30px,5vw,40px)); bottom:-32px;
  background:repeating-linear-gradient(180deg,var(--teal) 0 11px,transparent 11px 21px);
}
/* ⑤（＝到着バナーの直前）だけは受け手に丸がないので、gap ぶんの -18px＝バナーの上端で止める。
   右の器（.ac-col:last-child）に限るのは、左の器では②が nth-last-child(2) に当たってしまい、
   ②→③の点線が途中で切れるため（2026-07-29(3) の器分割にともなう限定）。 */
.ac-col:last-child .ac-step:nth-last-child(2)::before{ bottom:-18px; }
/* 番号の丸＝灯り色の玉に墨色の輪郭（「開催の趣旨」.aim .n と同じ作り） */
.ac-n{
  position:absolute; left:calc(-1 * clamp(30px,6vw,52px)); top:18px;
  width:clamp(30px,5vw,40px); height:clamp(30px,5vw,40px); border-radius:50%;
  background:var(--mustard); box-shadow:0 0 0 2px var(--navy);
  font-family:var(--arch); font-weight:800; font-size:clamp(.85rem,1.6vw,1rem); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
}
.ac-step h3{ font-family:var(--mincho); font-weight:900; font-size:clamp(1.05rem,2.2vw,1.3rem); line-height:1.5; letter-spacing:.03em; color:var(--navy); }
.ac-means{ margin-top:7px; font-size:.92rem; line-height:1.85; }
.ac-means b{ color:var(--coral); font-weight:800; }
/* 補足の枠（当日限定の直行便・定期船の時刻） */
.ac-inset{
  margin-top:16px; background:rgba(18,160,143,.10);
  border:2px solid var(--teal); border-radius:12px; padding:15px 17px;
}
.ac-inset.warm{ background:rgba(251,176,33,.16); border-color:var(--mustard); }
.ac-label{
  display:inline-block; background:var(--teal); color:#fff;
  font-size:.68rem; font-weight:800; letter-spacing:.08em; line-height:1.7;
  padding:3px 12px; border-radius:999px; margin-bottom:10px;
}
.ac-inset.warm .ac-label{ background:var(--navy); }
.ac-co{ font-size:.88rem; line-height:1.85; }
/* 社と社の間の余白＝12+12px→16+15pxへ（2026-07-29FB「TELと次の社名の間の余白調整」） */
.ac-co + .ac-co{ margin-top:16px; padding-top:15px; border-top:2px dotted rgba(18,160,143,.45); }
.ac-co b{ display:block; font-weight:800; color:var(--navy); margin-bottom:2px; }
/* 電話番号＝灯り色のマーカー（数字は Archivo で読み違えにくく） */
.ac-tel{
  font-family:var(--arch); font-weight:800; color:var(--ink); white-space:nowrap;
  background-image:linear-gradient(transparent 58%,rgba(251,176,33,.85) 58%);
  border-bottom:2.5px solid var(--mustard);
}
.ac-tel:hover{ background-image:linear-gradient(rgba(251,176,33,.85) 0,rgba(251,176,33,.85) 100%); }
/* 時刻表。狭い幅では枠内で横スクロールさせ、外側（ページ）に横スクロールを作らない */
.ac-scroll{ overflow-x:auto; overscroll-behavior-x:contain; }
.ac-table{ border-collapse:collapse; width:100%; min-width:16em; font-size:.85rem; }
.ac-table caption{ text-align:left; font-size:.72rem; font-weight:800; letter-spacing:.08em; color:var(--ink); padding-bottom:8px; }
.ac-table th,.ac-table td{ border:2px solid rgba(18,51,63,.18); padding:8px 10px; text-align:left; line-height:1.6; }
.ac-table th{ background:rgba(251,176,33,.35); font-weight:800; font-size:.8rem; white-space:nowrap; }
.ac-table td{ font-family:var(--arch); font-weight:700; }
/* 時刻はいずれも例年値。最新確認を促す注記は時刻表の直下に置く（旧レイアウトから継続） */
.route-note{ margin-top:20px; font-size:.92rem; color:var(--ink); line-height:1.9; border-left:5px solid var(--mustard); padding:4px 0 4px 14px; }
.route-note strong{ color:var(--coral); }
.ac-inset .route-note{ margin-top:14px; font-size:.82rem; line-height:1.85; border-left-width:4px; padding-left:11px; border-left-color:var(--navy); }
/* --- 到着！＝タイムラインの最後のリスト項目（⑤の点線がここまで伸びる） --- */
.ac-arrive{
  display:flex; align-items:center; gap:12px;
  background:var(--coral); color:#fff; border-radius:999px; padding:13px 24px;
  font-family:var(--mincho); font-weight:900; font-size:clamp(1.02rem,2vw,1.2rem); line-height:1.5;
  letter-spacing:.02em; box-shadow:4px 4px 0 rgba(18,78,120,.16);
}
.ac-ico{ width:24px; height:24px; flex:none; color:var(--mustard); }
.ac-nw{ white-space:nowrap; } /* 「徒歩2分」の泣き別れ防止（徒/歩で改行しない） */
/* --- 地図（見出しの直下・.wrap 幅いっぱい） --- */
/* 地図の白フチ枠＝「とは」のポラロイド（.om-polaroid）と同じ言語。傾きは付けない＝操作性を優先 */
.ac-mapfig{ margin-top:clamp(26px,3.4vw,40px); background:#fff; padding:14px 14px 10px; box-shadow:0 3px 0 rgba(18,51,63,.10), 0 12px 26px rgba(18,51,63,.18); }
/* 全幅に置くと基底の aspect-ratio:4/3 では縦が画面を埋めてしまうので、高さを直接決める
   （2026-07-29(2)・PCで380〜460px）。SPは従来どおりの見え方＝下の 599px 以下で戻す。 */
.ac-mapfig .routemap-map{ margin-bottom:0; aspect-ratio:auto; height:clamp(380px,30vw,460px); max-height:none; }
.ac-mapfig figcaption{ font-weight:700; font-size:.8rem; line-height:1.6; letter-spacing:.01em; color:var(--ink); padding:10px 3px 4px; }
.ac-mapfig figcaption .cap-sub{ display:block; font-weight:500; font-size:.72rem; letter-spacing:0; color:var(--ink-60); }
.ac-alert{
  margin-top:clamp(26px,3.4vw,40px); background:rgba(240,89,43,.09); border:2px dashed var(--coral);
  border-radius:12px; padding:15px 17px; font-size:.88rem; font-weight:700; line-height:1.8;
}
.ac-memo{ margin-top:16px; font-size:.85rem; line-height:1.9; color:var(--ink-60); }
/* PC（1080px以上）はステップの器2本を横に並べる＝左列 ①②③／右列 ④⑤到着。
   左→右→折り返しの行送りにすると、番号の丸をつなぐ縦の点線が①の下に③を指す形になり航路が
   壊れるため、順路は列ごとに縦へ通す。点線は ①→②→③・④→⑤→到着！ と順路どおりに繋がり、
   ⑤の左の点線も（SPと同じく）到着バナーまで伸びる。左列の最後＝③の線だけは次が右列の頭なので
   カード下端で止める。到着バナーを2列ぶち抜きで最下段に置く案は採らなかった：⑤（右列の途中）と
   バナーの間に左列の③ぶんの距離が空き、⑤からバナーへ点線を繋げられなくなるため。右列の末尾に
   置けば⑤の真下に来て航路が閉じる。左列が長いぶん右下に余白が残るが、そこは背景のさざ波が拾う。
   2カラム化の下限が1080pxなのは「音祭りとは」(.about-textblock) と同じ基準。
   列間は右列の番号の丸（カード左端から-52px）が左列のカードに被らない幅を確保している。 */
@media (min-width:1080px){
  .ac-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(64px,6vw,88px); align-items:start; }
  .ac-col:first-child .ac-step:last-child::before{ bottom:0; }
}
@media (max-width:599px){
  .ac-card{ padding:17px 18px; }
  .ac-step h3{ font-size:1.05rem; }
  .ac-means{ font-size:.88rem; }
  .ac-inset{ padding:13px 14px; }
  .ac-arrive{ padding:12px 18px; gap:9px; }
  .ac-ico{ width:20px; height:20px; }
  .ac-mapfig .routemap-map{ height:min(66vw,300px); }
}

/* ================= 三線グラビア（額装写真） ================= */
.feature{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,6vw,72px); align-items:center; }
.feature .frame-photo img{ aspect-ratio:5/4; }
.feature .txt .lead{ font-family:var(--mincho); font-weight:700; font-size:clamp(1.35rem,3.2vw,2rem); line-height:1.6; color:var(--navy); }
.feature .txt .body{ margin-top:16px; font-size:1.01rem; max-width:32em; }
@media (max-width:840px){ .feature{ grid-template-columns:1fr; } .feature .frame-photo img{ aspect-ratio:16/10; } }

/* ================= 主宰の想い（雑誌の扉） ================= */
.omoi-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,6vw,72px); align-items:center; }
.omoi-quote{ font-family:var(--mincho); font-weight:700; font-size:clamp(26px,4vw,40px); line-height:1.55; letter-spacing:.04em; color:var(--navy); }
.omoi-body{ margin-top:24px; max-width:34em; font-size:1.02rem; }
.omoi-sign{ margin-top:14px; display:flex; flex-direction:column; gap:3px; }
.omoi-sign .sig-en{ font-family:var(--arch); font-weight:800; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.omoi-sign .sig-jp{ font-weight:700; font-size:.96rem; color:var(--ink); }
.omoi-sign .name{ font-family:var(--mincho); font-weight:900; font-size:1.28rem; color:var(--navy); letter-spacing:.08em; margin:0 .15em; }
.omoi-photo .frame-photo img{ aspect-ratio:1/1; object-position:50% 22%; } /* スクエア＋縦位置写真の顔が収まる寄せ・下にOrganizerキャプション */
/* 縦積みになったら、テキストの塊と写真をカラム内で中央へ寄せる（2026-07-29FB）。
   本文自体は左揃えのまま＝中央寄せするのはブロックの位置だけ（justify-items と max-width で行う）。 */
@media (max-width:840px){
  .omoi-grid{ grid-template-columns:1fr; justify-items:center; }
  .omoi-text{ max-width:34em; width:100%; }   /* 読み幅で頭打ちにし、余った左右が均等に空く＝中央に見える */
  .omoi-photo{ max-width:340px; width:100%; }
  .omoi-photo .frame-photo img{ aspect-ratio:1/1; }
}
/* 想いのブロック（2026-07-28に about 内サブブロック→独立セクション #omoi の中身へ。器が変わるだけで値は据え置き） */
.omoi-block{ margin-top:var(--sub-gap); }
/* .subhead は #omoi の独立セクション化（2026-07-28）でいったん使用箇所が無くなったが、
   同日追加の「開催の趣旨」の小見出しで再び使っている（英字添えの .en 版も差し戻し用に温存） */
.subhead{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; font-family:var(--mincho); font-weight:900; font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--navy); letter-spacing:.04em; margin-bottom:var(--sub-gap); }
.subhead .en{ font-family:var(--arch); font-weight:800; font-size:.7rem; letter-spacing:.22em; color:var(--accent-ink); text-transform:uppercase; }
.subhead .src{ font-family:var(--jp); font-weight:700; font-size:.78rem; letter-spacing:.08em; color:var(--ink-60); } /* 和文の出典添え書き */
/* 開催の趣旨（8項目）＝#omoi の後半。別案 suguru3_opus5（css/style.css の .aims/.aim）からの翻案
   （2026-07-28）。文言は旧公式サイトの「開催の趣旨」そのまま。
   参照案の核＝白カード・不揃いの角丸・番号の丸バッジは踏襲し、丸ゴシック調の強い角丸と厚い影は
   控えめにして、色は本テーマのトークン（灯り色の丸に墨色の細い輪郭と数字）へ置き換えた。 */
.aims-block{ margin-top:var(--sub-top); }
.aims{ display:grid; grid-template-columns:1fr 1fr; gap:18px; list-style:none; }
.aim{
  position:relative; background:#fff;
  border-radius:12px 15px 11px 14px/14px 11px 15px 12px;
  padding:20px 22px 20px 62px;
  box-shadow:0 2px 0 rgba(18,51,63,.08), 0 8px 18px rgba(18,51,63,.07);
  font-size:.95rem; line-height:1.95;
}
/* 番号の丸＝灯り色の玉に墨色の輪郭を box-shadow で回す（.why-bubble の行頭ドットと同じ作り） */
.aim .n{
  position:absolute; left:18px; top:19px;
  width:32px; height:32px; border-radius:50%;
  background:var(--mustard); box-shadow:0 0 0 2px var(--navy);
  font-family:var(--arch); font-weight:800; font-size:.95rem; color:var(--navy);
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:840px){
  .aims{ grid-template-columns:1fr; gap:14px; }
}
@media (max-width:599px){
  .aim{ padding:16px 18px 16px 54px; font-size:.9rem; line-height:1.85; }
  .aim .n{ left:14px; top:16px; width:28px; height:28px; font-size:.86rem; }
}
/* とは＝空の水彩が透ける構造のまま、白ベールで青を薄める（2026-07-28ユーザーFB「もっと薄く」）。
   .sky-zone::before 自体の opacity を下げると乗船券の背後まで薄くなるので、#about だけに敷く。
   .sec の isolation:isolate により、z-index:-1 の白雲装飾はこのベールの上・本文の下に収まる。
   ベタ塗り（background-color）だと乗船券との境目に水彩を横切る直線の継ぎ目が出たため（実測で
   RGB差82の段差）、上下の端はグラデーションで抜いて地続きに見せる。濃さは中央の .5 が効き値。 */
/* 白ベールは 2026-07-29 に .sky-zone::before（--sky-veil）へ移した。
   乗船券の背後にもベールを掛けるため＝ゾーン全体で1枚にすると、上下端のフェードで
   継ぎ目を消す小細工も要らなくなる。ここで #about に地色は持たせない。 */
/* 開催情報＝島の情景の帯（2026-07-28ユーザー指示「背景に山」→2026-07-29指示で「とは」の下端から
   1セクション下げ、開催情報の下端へ移した）。
   セクションの地（生成り --paper）の手前・本文より下に、生成した山並み(mountains.webp)を
   セクション下端の帯として敷く。
   isolation:isolate 下の z-index:-1 は「自身の背景の上・本文の下」に収まる性質を利用。
   素材は 2000x450 の透過webp（上120px＝約27%は透明で、稜線の上は地がそのまま抜ける）。
   並びは 開催情報カード→山並み＋バンド。 */
#events{
  --mtn-h:clamp(130px,16vw,235px);         /* 山の絵の高さ＝帯の高さ（PC 230px／SP 130px） */
  --scene-ground:calc(var(--mtn-h) * .3);  /* 生きものの足元＝帯の下から30%（絵の70%地点＝前景の緑＝山裾） */
}
/* 山の帯ぶんの下余白＝帯の高さそのまま。これで帯の上端＝開催情報カードの下端に揃い、
   稜線はその 26.7% 下（PC 61px／SP 35px）に出る。
   「とは」に敷いていたときは直上が写真モザイク（margin-bottom:var(--flow) 持ち）だったので
   その分を差し引いていたが、開催情報カードは下マージンを持たないので差し引かない。 */
#events{ padding-bottom:var(--mtn-h); }
#events::before{
  content:""; position:absolute; left:0; right:0;
  /* 絵は縦を --mtn-h に詰めて（cover ではなく 100% var(--mtn-h)）敷く：素材どおりの比率で全幅に
     引くとPCで縦324pxになり、帯だけが重くなる。 */
  bottom:0;
  height:var(--mtn-h);
  background:url("img/mountains.webp") no-repeat top center / 100% var(--mtn-h);
  /* 下端のフェード（84%→透明）は2026-07-29FB「ぼかしでなく直線に」で撤去。
     帯の下端＝セクション下端で山がスパッと終わり、次セクション（道のり）との境がくっきり出る */
  z-index:-1; pointer-events:none;
}
/* 島の情景：山裾中央に立つ動物バンド。高さ0の基準線（--scene-ground＝帯の中の山裾）に足元を
   合わせる。z-index:-1 なので本文の背面へ回り込み、文字やカードを隠さない。
   2026-07-29指示で山並みの帯ごと「とは」の下端→開催情報の下端へ移動（変数は #events で宣言）。
   2026-07-29指示で、ここに一緒に立たせていた生きもの2組（ヤマネコ親子・カメ親子）は
   想い↓協賛の境界の波稜線（.wave-people／「背景の賑やかし」節）へ移動＝この器はバンド専用になった。
   同時に、2組のスウェイ用に持たせていた .sa の animation／transform-origin も外している
   （バンドは元から animation:none＝演奏の絵が傾くと楽器が滑って見えるため）。 */
.scene-animals{
  position:absolute; left:0; right:0; bottom:var(--scene-ground); height:0;
  pointer-events:none; z-index:-1;
}
/* 画像は実体のbboxで切り直してあり下余白0px＝bottom:0 がそのまま足元になる。 */
.sa{ position:absolute; bottom:0; height:auto; }
/* 中央＝動物バンド。2026-07-29FB「1体1体横に広がってステージにいる感じに」で、元絵（img_band.png）を
   Pillowで5体に切り分け→横一列へ再合成した band.webp（1400x310・83KB・レシピ=scratchpad/make_band_wide.py）へ差し替え。
   横長になったぶん幅は主役級に拡大 */
.sa-band{ left:50%; transform:translateX(-50%); width:clamp(320px,44vw,620px); }
/* 船浮音祭りとは：本文ブロック（本文→受賞バッジの縦積み）。
   .about-hero は 2026-07-28 に1カラム（=素のブロック）へ戻した。写真の縦マーキーを左列に置く
   PC専用の2カラム grid を持っていたが、写真は下の全幅モザイクへ移したので列そのものが不要になった。
   見出しを右寄せにしていた #about .sec-ttl{ justify-content:flex-end } も同時に外し、他セクションと
   同じ左寄せに戻してある。
   2026-07-28: その2カラム廃止に追従して .about-textblock も1カラムへ。基底に残っていた
   「左=本文(--measure)／右=受賞バッジ(auto)」の2列指定は、器が .wrap 実効1000pxになった今は
   バッジ列（max-content 490px）に押されて本文列が459pxまで縮み、リード文が3行＋泣き別れ
   （「…唄でいっぱ／いになる。」）になっていた。縦積みなら本文は --measure(36em=648px) を
   使い切れて2行に収まる。バッジは全幅の中央寄せ（基底 .about-awards の justify-content）。
   2026-07-29: PC（1080px以上）だけ2カラムに組み替えた（別案 suguru3_opus5 の構図）。
   左＝リード本文＋受賞バッジ／右＝吹き出し＋会場写真。DOMは SP の縦積み順（リード本文→吹き出し
   →写真→受賞バッジ）に置き、PCの振り分けは grid-template-areas で行う＝SP側は基底の1カラムのまま
   何もしなくてよい。 */
.about-textblock{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(26px,4vw,56px); }
.about-intro{ max-width:var(--measure); }
/* 1カラムに縦積みになる幅では、本文・吹き出し・写真をカラム内で中央へ寄せる（2026-07-29FB。
   想い（.omoi-grid）と同じ考え方）。文字揃えは左のままで、動かすのはブロックの位置だけ。
   各ブロックは既に上限幅を持つ（.about-intro=--measure／.why-bubble=520px／.om-polaroid=282px）ので、
   justify-items:center だけで左右が均等に空く。 */
@media (max-width:1079.98px){
  .about-textblock{ justify-items:center; }
}
@media (min-width:1080px){
  /* 列比 1.28:1 ＝ 左56%（画面1440pxで530px・1080pxで522px）。左列に要る幅は
     リード文の最長の句「人口50人に満たない集落が、」＝約500px と、受賞バッジ3つの横一列
     ＝150px×3＋gap20px×2＝490px。どちらも余裕をもって収まる幅にしてある。
     2カラム化の下限が1080pxなのも同じ理由（1000pxでは左列が473pxしか取れず、バッジが2段に折れた）。
     それ未満の幅は基底の1カラム縦積みのまま出す。 */
  .about-textblock{
    grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);
    grid-template-areas:
      "intro  bubble"
      "awards photo";
    column-gap:clamp(28px,4vw,56px); row-gap:clamp(26px,3vw,42px);
    align-items:start;
  }
  .about-intro{ grid-area:intro; }
  .why-bubble{ grid-area:bubble; }
  .om-polaroid{ grid-area:photo; }
  .about-awards{ grid-area:awards; }
}
/* 「なぜ、4月の第3土曜日？」の吹き出し（2026-07-28指示。本文と受賞バッジの間に挟む補足）。
   別案 suguru3_opus5（css/style.css の .bubble）からの翻案。手描きの感じの核＝不揃いの角丸
   （四隅で半径を変える横/縦の2値指定）と左下のしっぽはそのまま踏襲し、色だけ本テーマの
   トークンへ置き換えた。クラス名は既存の .bubble との衝突を避けて .why-bubble。
   地は不透明の紙色（--paper）。#about は .sky-zone の空の水彩が透ける構造なので、
   半透明の地にすると背後の青が乗って本文が読みにくくなる。 */
.why-bubble{
  position:relative; max-width:520px;
  background:var(--paper);
  border:3px solid var(--teal);
  border-radius:30px 24px 28px 26px/24px 30px 22px 30px;
  padding:22px 24px;
}
/* しっぽ＝地色の小さな四角の右辺・下辺だけにフチを引き、skew で傾けて三角に見せる */
.why-bubble::after{
  content:""; position:absolute; left:38px; bottom:-17px;
  width:26px; height:20px; background:var(--paper);
  border-right:3px solid var(--teal); border-bottom:3px solid var(--teal);
  transform:skewX(-22deg) rotate(4deg);
}
.why-bubble h3{ font-family:var(--mincho); font-weight:900; font-size:1.16rem; letter-spacing:.04em; line-height:1.5; color:var(--teal); margin-bottom:10px; }
.why-bubble ul{ display:grid; gap:9px; list-style:none; }
.why-bubble li{ position:relative; padding-left:26px; font-size:.9rem; line-height:1.8; }
/* 行頭の丸ドット＝灯りの色の玉に、墨色の輪郭線を box-shadow で回す */
.why-bubble li::before{
  content:""; position:absolute; left:0; top:.62em; width:13px; height:13px; border-radius:50%;
  background:var(--mustard); box-shadow:0 0 0 2px var(--navy);
}
@media (max-width:599px){
  /* SPは .about-textblock の gap が 22px まで詰まり、17px 出っぱるしっぽが受賞バッジに
     ぶつかりそうになるので、そのぶんの逃げを足す */
  .why-bubble{ padding:18px 18px; margin-bottom:12px; }
  .why-bubble::after{ left:28px; }
  .why-bubble h3{ font-size:1.06rem; }
  .why-bubble li{ padding-left:22px; font-size:.85rem; }
  .why-bubble li::before{ width:11px; height:11px; top:.6em; }
}
/* 会場写真＝白フチのポラロイド風（2026-07-29指示。吹き出しの下に置く）。
   別案 suguru3_opus5（css/style.css の .polaroid .tape .tape-em）の翻案で、色は本テーマのトークンへ。
   マスキングテープは当初「持ち込まない」方針だったが、同日FB「デザインを別サイトに合わせて」で
   参照どおり左上＋右下の2枚（参照はエメラルド→こちらは teal 系）を追加した。
   幅282px＝白フチ（左右14px）の内側が254px＝素材の原寸253x168とほぼ等倍で、拡大ボケが出ない。
   傾きは transform で直接あてる（.reveal を付けると .in の transform:none に打ち消されるため付けない）。 */
.om-polaroid{
  position:relative;
  /* 282px（素材253pxのほぼ等倍）→348px（約1.37倍・2026-07-29FB「もっと大きく」。
     これ以上は写真のボケが目立つので、さらに上げるなら素材の再調達が先 */
  width:min(348px,100%); margin-inline:auto;
  background:#fff; padding:14px 14px 10px;
  box-shadow:0 3px 0 rgba(18,51,63,.10), 0 12px 26px rgba(18,51,63,.18);
  transform:rotate(1.8deg);
}
.om-polaroid::before, .om-polaroid::after{
  content:""; position:absolute; z-index:3;
  width:92px; height:27px;
  background-color:rgba(18,160,143,.55);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 5px,rgba(255,255,255,0) 5px 11px);
  box-shadow:0 1px 3px rgba(18,51,63,.16);
  clip-path:polygon(2% 4%,98% 0,100% 95%,0 100%);
}
.om-polaroid::before{ top:-13px; left:8%; transform:rotate(-5deg); }
.om-polaroid::after{ bottom:-12px; right:8%; transform:rotate(-3.5deg); }
.om-polaroid img{ width:100%; background:rgba(18,51,63,.08); }
.om-polaroid figcaption{ font-weight:700; font-size:.8rem; line-height:1.6; letter-spacing:.01em; color:var(--ink); padding:10px 3px 4px; }
.om-polaroid figcaption .cap-sub{ display:block; font-weight:500; font-size:.72rem; letter-spacing:0; color:var(--ink-60); }
/* 受賞スタンプ（消印・案13 13-travel-magazine より移植。.mk はテーマ既存のため .st-mk に読替） */
.about-awards{ display:flex; flex-wrap:wrap; gap:24px 20px; justify-content:center; align-items:flex-start; }
.tl-item{ width:150px; text-align:center; }
.stamp{
  width:120px; height:120px; margin:0 auto 12px; position:relative;
  border:4px double var(--navy); border-radius:50%;
  display:grid; place-items:center; color:var(--navy);
  background:repeating-conic-gradient(from 0deg, transparent 0 11deg, rgba(18,78,120,.14) 11deg 12deg);
  box-shadow:inset 0 0 0 8px var(--paper);
  transform:rotate(-6deg);
}
.tl-item:nth-child(even) .stamp{ transform:rotate(5deg); }
.stamp .yr-n{ font-family:var(--arch); font-weight:800; font-size:1.9rem; line-height:1; color:var(--coral); }
.stamp .st-mk{ font-family:var(--arch); font-weight:800; font-size:.6rem; letter-spacing:.14em; color:var(--teal); margin-top:2px; }
.stamp.pop{ animation:stampin .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes stampin{
  0%{ opacity:0; transform:scale(1.9) rotate(-16deg); }
  60%{ opacity:1; transform:scale(.92) rotate(-4deg); }
  100%{ opacity:1; transform:scale(1) rotate(-6deg); }
}
.tl-item p{ font-size:.9rem; line-height:1.7; }
.tl-item .ev{ font-weight:700; color:var(--navy); }
/* 受賞ページへの外部リンク（2026-07-28指示）。バッジ全体をリンクにすると
   スタンプの回転と重なって当たり判定が分かりにくいので、リンクは説明文側に置く。
   2026-07-28ユーザーFB：独立した「受賞ページ」行をやめ、受賞名テキスト自体をリンクにした。
   受賞名は本文の一部なので色・太さは継承し（.ev の紺・太字がそのまま出る）、珊瑚色の下線でリンクと示す。
   ※ リンク内に <br> を含むため inline-flex は使えない（改行が無視される）→ インラインのまま下線で表現。 */
.award-link{ color:inherit;
  text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--coral) 55%,transparent);
  text-decoration-thickness:1px; text-underline-offset:3px; transition:.15s; }
.award-link:hover{ color:var(--coral); text-decoration-color:var(--coral); }
.award-link:hover .ev{ color:var(--coral); }
.award-link .ext{ font-size:.9em; line-height:1; margin-left:2px; color:var(--coral); }
/* 画面には出さず読み上げにだけ渡す（別タブで開く旨の補足） */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
@media (max-width:720px){
  .about-textblock{ grid-template-columns:1fr; gap:clamp(22px,5vw,30px); }
}
/* SPでも受賞バッジ3つを横一列に（2026-07-28ユーザーFB）。150px×3は折り返すので、
   列幅を1/3にして寸法系をおおむね7割へ縮める。390px幅で1列あたり約111px（スタンプ84px）。 */
@media (max-width:599px){
  /* 列幅は gap の16pxに4pxの余りを足して引く＝端数の丸めで3列目が落ちるのを防ぐ（nowrapと併用） */
  .about-awards{ gap:14px 8px; flex-wrap:nowrap; }
  .tl-item{ width:calc((100% - 20px) / 3); }
  .stamp{
    width:84px; height:84px; margin:0 auto 8px;
    border-width:3px;
    box-shadow:inset 0 0 0 6px var(--paper);
  }
  .stamp .yr-n{ font-size:1.3rem; }
  .stamp .st-mk{ font-size:.5rem; letter-spacing:.1em; }
  .tl-item p{ font-size:.78rem; line-height:1.6; }
}
/* ================= 「とは」の写真スライダー（2026-07-28／2026-07-29に1行へ戻す） =================
   従来の PC=写真1列の縦マーキー（.about-media/.am-track/.am-shot）と SP=横1列マーキー
   （.photo-marquee）の2本立ては、この全幅スライダー1本に統合して削除した（縦案は不採用）。
   復活が要るときは git 履歴（2026-07-28のコミット直前）から取り出す。
   ・2026-07-29: 「ぶち抜き（1行）＋2段積み（2行）」の混在モザイク（.pmz-tall/.pmz-stack）は
     ユーザー指示「すべて1行表示に戻してください」で撤去。全12枚を同じ高さで流す1行の
     フィルムストリップへ戻した。列幅を縦横そろえる必要が無くなったので、幅は各写真の
     アスペクト比なり＝縦位置は細く・横位置は広く出る。
   ・トラックに2セット並べて translateX(-50%) で継ぎ目なくループ（従来と同じ自家パターン）。
   ・寸法の根拠＝帯の高さ PC 210px／SP 140px。横素材(253x168)はPCで1.25倍・SPで0.83倍、
     縦素材(160x230)はPCで0.91倍・SPで0.61倍。拡大は横位置のPC 1.25倍が最大で、
     ボケの出ない範囲（1.3倍以内）に収めてある。
   ・全画面幅は .wrap の外＝.sec の直接の子に置くことで得る（.sec に横paddingは無い）。
     100vw ハックは使わない＝縦スクロールバーぶんの横スクロールを生まないため。
   設計: docs/superpowers/specs/2026-07-28-about-photo-mosaic-design.md */
/* --pmz-h（帯の高さ）は器（#about）側で宣言し、継承で .photo-mosaic に渡す。
   2026-07-28に山を帯の下へ移して --scene-ground がモザイク高さを参照しなくなった後も、
   宣言場所は据え置き（動きは同じ・差分を小さくするため）。 */
#about{ --pmz-h:clamp(140px,16vw,210px); }                /* 帯の高さ＝全写真そろえた高さ（PC 210px／SP 140px） */
/* 写真ストリップの「すぐ下」から開催情報が始まるよう、とはの下余白とストリップの下マージンを0に
   （2026-07-29FB。空の直線下端＝ストリップ下端になる） */
#about{ padding-bottom:0; }
#about .photo-mosaic{ margin-bottom:0; }
.photo-mosaic{
  /* 速さは px/秒で据え置く。1セットの長さは2段時代の PC 1648px／SP 1072px（38s＝PC 43／SP 28px/秒）
     に対し、1行化で PC 約3306px／SP 約2196px へ伸びた。76s なら PC 約43px/秒・SP 約29px/秒で同じ体感。 */
  --pmz-dur:76s;                                          /* 1セットぶんの所要時間＝速さ調整はここだけ */
  --pmz-gap:clamp(10px,1.4vw,16px);                       /* 写真の間隔 */
  --pmz-w-por:calc(var(--pmz-h) * 160 / 230);             /* 縦位置の幅（PC 146px／SP 97px） */
  --pmz-w-lan:calc(var(--pmz-h) * 253 / 168);             /* 横位置の幅（PC 316px／SP 211px） */
  margin:var(--flow) 0; overflow:hidden; position:relative;
}
.pmz-track{
  display:flex; align-items:stretch; width:max-content; height:var(--pmz-h);
  animation:pmz-scroll var(--pmz-dur) linear infinite; will-change:transform;
}
/* 写真の間隔は gap ではなく各写真の margin-right で取る。gap だとセット間の隙間が1つぶん足りず
   translateX(-50%) の折返しが gap の半分ずれて継ぎ目が見えるため（旧マーキーの弱点）。 */
.pmz-track > *{ flex:none; margin:0 var(--pmz-gap) 0 0; }
@keyframes pmz-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* 高さは全枚 --pmz-h でそろえ、幅だけ原寸比で出し分ける */
.pmz-por{ width:var(--pmz-w-por); height:100%; }          /* 縦位置（160x230） */
.pmz-lan{ width:var(--pmz-w-lan); height:100%; }          /* 横位置（253x168） */
/* フチなし＋小さめ角丸（白フチのプリント風は使わない＝2026-07-28決定） */
.photo-mosaic figure{ overflow:hidden; border-radius:8px; background:#e6edf1; }
.photo-mosaic img{ display:block; width:100%; height:100%; object-fit:cover; }
/* hover一時停止はマウス環境だけ（タッチでは「押したら止まる」になってしまうため） */
@media (hover:hover){
  .photo-mosaic:hover .pmz-track{ animation-play-state:paused; }
}
@media (prefers-reduced-motion:reduce){
  .photo-mosaic{ overflow-x:auto; }
  .pmz-track{ animation:none; }
}
/* 船浮港マップ（Googleマップ埋め込み・額装枠に合わせた濃紺罫） */
.routemap-map{ position:relative; width:100%; aspect-ratio:4/3; max-height:min(70vh,560px); border:3px solid var(--navy); background:#dff3f3; border-radius:6px; overflow:hidden; margin-bottom:clamp(20px,3vw,30px); box-shadow:4px 4px 0 rgba(18,78,120,.12); }
.routemap-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
/* ================= 開催情報の右上のコノハズク（2026-07-27指示） =================
   基準は .sec（position:relative・isolation:isolate）。z-index:-1 で地の上・本文の下に敷く。
   .sec の padding-top は clamp(72px,9vw,150px) あるので、見出しの上の余白に収まる。
   幅が狭いと .event カードに掛かるため、そこでは小さくして端へ寄せる。 */
/* 2026-07-29指示: コノハズクは .event カード（article）の右上枠にかぶさって留まる配置へ。
   基準＝.event（position:relative を付与）。top負値で枠の上へ頭を出し、z-index:2 で枠線の上に乗せる。
   画像の下端はサガリバナが垂れる絵柄なので、枠より少し内側まで下ろすと「枝ごと留まっている」ように見える */
.event{ position:relative; }
.events .sec-owl{ position:absolute; z-index:2; pointer-events:none;
  right:clamp(10px,2.4vw,34px); top:clamp(-60px,-4.5vw,-32px); width:clamp(90px,11vw,168px); }
.events .sec-owl img{ width:100%; height:auto; display:block; }
@media (max-width:700px){
  /* 2026-07-29FB「スマホのフクロウを大きく」＝76px→104px。枠上への頭の出しも比例して深く */
  .events .sec-owl{ width:104px; right:8px; top:-58px; }
}
/* 開催情報の両サイドの雲（2026-07-29指示・提供素材 kumo_1/2.png→webp化 7KB/5KB）。
   .sec の isolation 内 z-index:-1 ＝地の上・本文カードの下。PCの左右余白に散らし、
   SPはカードがほぼ全幅で隠れるため上部の2つだけ残す */
.events .ev-kumo{ position:absolute; z-index:-1; pointer-events:none; }
/* ふわふわ上下（2026-07-29指示・start-your.fujirockfestival.com の翻案）。
   参照実装＝横移動なし・縦だけの ease-in-out alternate 無限往復。周期(3〜5s)と振幅(8〜16px)を
   雲ごとに変えると delay なしでも位相が自然にずれて「群れ感」が消える。大きい雲ほど速く大きく＝手前感 */
.events .ev-kumo img{ width:100%; height:auto; display:block;
  animation:ev-kumo-bob var(--kb-t,4s) ease-in-out infinite alternate; }
@keyframes ev-kumo-bob{ from{ transform:translateY(0); } to{ transform:translateY(var(--kb-y,10px)); } }
/* 2026-07-29FB「控えめすぎ」→振幅を約1.5倍に（12/8/14/10 → 18/13/22/16px。やりすぎない範囲） */
.ev-kumo.k1{ left:1%;  top:10%; width:clamp(120px,15vw,250px); --kb-t:5s;   --kb-y:18px; }
.ev-kumo.k2{ left:2.5%; top:52%; width:clamp(90px,11vw,180px);  --kb-t:4s;   --kb-y:13px; }
.ev-kumo.k3{ right:1.5%; top:30%; width:clamp(100px,13vw,210px); --kb-t:3s;   --kb-y:22px; }
.ev-kumo.k4{ right:3%; top:68%; width:clamp(110px,12vw,190px);  --kb-t:4.5s; --kb-y:16px; }
@media (max-width:700px){
  .ev-kumo.k2, .ev-kumo.k4{ display:none; }
  /* SPは振幅を半分に（参照サイトと同じ縮小方針）。
     位置は%だと見出しの後ろに掛かるため、px でセクション最上部（境界波の直下）へ引き上げ（2026-07-29FB） */
  .ev-kumo.k1{ left:-14px; top:56px; width:110px; --kb-y:9px; }
  .ev-kumo.k3{ right:-10px; top:64px; width:96px; --kb-y:11px; }
}
@media (prefers-reduced-motion:reduce){
  .events .ev-kumo img{ animation:none; }
}
/* 「とは」の空に浮かぶ雲（2026-07-29指示）。開催情報の .ev-kumo と同じ素材・同じ ev-kumo-bob を
   流用し、周期と振幅だけ雲ごとに変える。地が .sky-zone の水彩の空なので、開催情報より数を絞って
   （PC3つ／SP1つ）上部の左右の余白帯だけに置く＝見出し・リード本文・吹き出しに掛からない位置。
   z-index:-1 は .sec の isolation 内なので「空の上・本文の下」に収まる。 */
#about .ab-kumo{ position:absolute; z-index:-1; pointer-events:none; }
#about .ab-kumo img{ width:100%; height:auto; display:block;
  animation:ev-kumo-bob var(--kb-t,4s) ease-in-out infinite alternate; }
/* top はセクション上端からの距離。ak1/ak2 は上端〜見出しの間の余白（--sec-pad）の中に収める
   ＝ top を --sec-pad の割合で置くと、余白が縮む狭い幅でも見出しに掛からない（実測で確認）。
   ak3 だけは本文の高さまで下りるので、左の余白帯が130px以上とれる1280px以上でだけ出す。 */
.ab-kumo.ak1{ left:1%;  top:calc(var(--sec-pad) * .3);  width:clamp(120px,14vw,220px); --kb-t:5.5s; --kb-y:17px; }
/* ak2 は 2026-07-29FB「もう少し下げて」で top を .12→.42 に（右側の余白帯の中段へ） */
.ab-kumo.ak2{ right:2%; top:calc(var(--sec-pad) * .42); width:clamp(100px,12vw,190px); --kb-t:4s;   --kb-y:22px; }
.ab-kumo.ak3{ left:1%;  top:250px;                      width:clamp(80px,8vw,130px);   --kb-t:3.2s; --kb-y:12px; }
@media (max-width:1279.98px){
  .ab-kumo.ak3{ display:none; }
}
@media (max-width:700px){
  /* SPは左右1つずつ（2026-07-29FB「ak2はスマホでも表示」）。振幅は半分・位置は端へ半分逃がす */
  .ab-kumo.ak1{ left:-16px; top:14px; width:104px; --kb-y:9px; }
  .ab-kumo.ak2{ right:-14px; top:88px; width:92px; --kb-y:10px; }
}
@media (prefers-reduced-motion:reduce){
  #about .ab-kumo img{ animation:none; }
}

/* ================= よくあるご質問の右下のイノシシ（2026-07-27指示） =================
   コノハズクと同じ層構造。.sec の padding-bottom は clamp(72px,9vw,150px) あるので、
   しおり枠の下の余白に収まる。ベンチに座った構図なので下端を地に接地させる。 */
/* 2026-07-29指示で復帰（左右反転）→追指示で「想いの境界線にかぶる」位置へ＝#omoi 側の左端・
   上へはみ出す配置（FAQ側だと後続セクションの背景に隠れて境界をまたげない）。
   top負値＝イノシシの約半身がFAQ側へ出て、境界の波に座る見え方 */
/* 2026-07-29FB「3組のサイズ感を合わせる」＝ヤマネコ(高さ最大約107px)・カメ(約89px)の間の
   約99pxになる幅へ縮小（inoshishi.png 320x226・aspect .706 → 140px幅で高さ約99px）。
   同日追FB「境界線が地面になる雰囲気に」＝足元を波の稜線に接地（.wpe と同じ考え方。
   左端 x≈0〜3% の稜線は --wave-svg で y≒60%。translateY(-96%)で足の沈み込みを4%残す） */
.sec#omoi .sec-boar{ position:absolute; z-index:-1; pointer-events:none;
  left:clamp(4px,2vw,44px); top:calc(clamp(55px,9vw,120px) * .60 - 8px); transform:translateY(-96%);
  width:clamp(82px,10.2vw,140px); }
.sec#omoi .sec-boar img{ width:100%; height:auto; display:block; transform:scaleX(-1); }
@media (max-width:700px){
  .sec#omoi .sec-boar{ width:84px; left:2px; opacity:.9; }
}

/* ================= これまでの音祭り：横フィルムストリップ（otomatsuri_archive CPT の器） =================
   別案 suguru3_opus5（index.html の .arch-strip ／ css/style.css の .arch-cell ／ js/main.js）からの翻案（2026-07-28）。
   同日に撤去したもの＝4列グリッド（.archive-grid / .archive / .lead-label）と「もっと見る」3段階
   （.archive-more / .js-archive-more / .arc-t2 / .arc-t3）。撤去理由＝全20回を一度に見渡せず、
   押すたびに縦へ伸びて下のセクションが遠ざかっていたため。
   参照案の骨格（画面いっぱいの帯・自動で流れる無限ループ・止める手段）は踏襲。
   2026-07-29：カードの意匠も参照案（css/style.css の .arch-cell / .arch-kai / .arch-seek と
   .polaroid / .tape）へ寄せた。当初は「紙コラージュ調は持ち込まない」方針で白カード＋濃紺罫にしていたが、
   ユーザー指示「カードのデザインを別サイトに合わせて」でこのコンポーネントに限り解除した。
   ただし書体は現行のまま（丸ゴシックは使わない）・色は現行トークン（--mustard/--teal/--coral）へ置換。
   地色は .alt（淡い水色）を保つ。 */
.arc-strip-wrap{ position:relative; margin-top:clamp(6px,1.5vw,16px); }
/* 左右端をセクションの地色（.sec.alt=#EFF8F6）へ溶かし、カードが切れ際で消えて「まだ続く」と見せる。
   透明側は同じ色の alpha 0 で書く（transparent だと黒が混ざる環境がある） */
.arc-strip-wrap::before, .arc-strip-wrap::after{
  content:""; position:absolute; top:0; bottom:0; z-index:2;
  width:clamp(16px,6vw,96px); pointer-events:none;
}
.arc-strip-wrap::before{ left:0;  background:linear-gradient(90deg,#EFF8F6,rgba(239,248,246,0)); }
.arc-strip-wrap::after { right:0; background:linear-gradient(270deg,#EFF8F6,rgba(239,248,246,0)); }
/* 素の状態（JSが動かないとき）は手でスクロールできる横スクローラ。
   JSが動くと site.js が .arc-track を transform で流す無限ループになる。 */
.arc-strip{
  position:relative; z-index:1;
  overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  /* 上下＝「第N回」の札・マスキングテープ・紙の影がはみ出すぶんの逃げ。
     左右＝止まったとき1枚目の札が画面端で欠けないための逃げ
     （.wrap と同じ --pad にして見出しと頭を揃える）。この padding は .arc-track の
     内側の寸法に影響しないので、ループの継ぎ目（1組ぶん＝half）の計算はずれない。 */
  padding:26px var(--pad) 34px;
}
/* touch-action:pan-y＝縦スクロールはブラウザに任せ、横スワイプは site.js のドラッグ手送りが拾う
   （2026-07-29FB「SPは矢印が無く自分でスライドできない」。cursor:grab はPC向けの掴める合図） */
.js .arc-strip{ overflow:hidden; touch-action:pan-y; cursor:grab; }
/* reduced-motion のときは自動で流さないので、手でスクロールできる状態に戻す */
@media (prefers-reduced-motion:reduce){ .js .arc-strip{ overflow-x:auto; } }
/* カードの高さは全回そろえる（2026-07-28FB「カードのサイズを合わせる」）。
   以前は align-items:flex-start で下辺を不揃いにしていたが、出演者の行数差が大きく
   帯としての並びが乱れて見えたため、stretch＝全カードを最も高い1枚に合わせる方針へ変更した。
   伸びすぎないよう、キャプション側（.arc-cap-sub）は行数制限で高さに上限を作ってある。 */
.arc-track{
  display:flex; align-items:stretch; gap:clamp(14px,2vw,22px); width:max-content;
  will-change:transform;   /* 途中で止めた位置から自然に動き出すよう、transform は site.js が毎フレーム書く */
}
/* position:relative＝「第N回」の札（.arc-kai）の位置基準。
   傾き（--rot）とテープの色（--tape）は front-page.php がカードごとにインラインstyleで入れる
   （参照案は JS で入れていた。PHPで出す理由＝site.js の cloneNode は style 属性ごと複製するので、
   ループの継ぎ目でも周期が飛ばない。詳細は front-page.php 側のコメント）。 */
.arc-cell{ position:relative; display:flex; flex:0 0 clamp(220px,68vw,268px); }
/* 「第N回」の札＝灯り色に濃紺の輪郭、紙の左上へ少しはみ出して傾けて貼る（参照案 .arch-kai）。
   題名の h3 をやめたぶん、この札が回を示す本文になる（aria-hidden にしない）。
   書体は本文のまま＝参照案の丸ゴシックは持ち込まない。 */
.arc-kai{
  position:absolute; z-index:4; left:-8px; top:-14px; margin:0;
  background:var(--mustard); color:var(--navy);
  font-weight:900; font-size:.82rem; line-height:1.15; letter-spacing:.02em;
  padding:5px 13px; border-radius:999px; border:2.5px solid var(--navy);
  transform:rotate(-6deg);
}
/* 操作列（.arc-ctl／停止ボタン .arc-pause／添え書き .arc-hint）は2026-07-28のユーザー裁定で撤去。
   自動で動くものを止める手段（WCAG 2.2.2）は、ホバー／フォーカス／タッチ中の一時停止（site.js）と、
   下の prefers-reduced-motion・.no-js のフォールバック（手でスクロールできる状態へ戻す）が引き受ける。 */
/* 前後ボタン：帯の左右端に重ねる（狭幅はスワイプで送るので出さない）。
   帯そのものはクリックを透かし、ボタンだけ受ける */
.arc-nav{
  display:none; position:absolute; z-index:5; top:50%; left:0; right:0;
  transform:translateY(-50%); justify-content:space-between;
  padding-inline:clamp(8px,1.6vw,20px); pointer-events:none;
}
.arc-btn{
  pointer-events:auto; width:44px; height:44px; padding:0; border-radius:50%;
  background:var(--mustard); color:var(--navy); border:2px solid var(--navy);
  box-shadow:3px 3px 0 rgba(18,78,120,.2); display:grid; place-items:center; cursor:pointer; transition:.15s;
}
.arc-btn:hover{ background:#fff; }
.arc-btn svg{ width:19px; height:19px; }
@media (min-width:920px){ .arc-nav{ display:flex; } }
/* JS無効時は押しても効かないので出さない（帯は overflow-x:auto のまま手でスクロールできる） */
.no-js .arc-nav{ display:none; }
/* ポラロイド＝白フチの紙（参照案 .polaroid）。旧・白カード（.arc-card／濃紺罫＋角丸）はこれに置き換えた。
   flex-direction:column ＋ キャプションの flex:1 ＝紙の下辺までを白で埋め、
   .arc-track の align-items:stretch と合わせて全カードの高さを揃える。 */
.arc-pola{
  position:relative; margin:0; width:100%;
  display:flex; flex-direction:column;
  background:#fff; padding:11px 11px 8px;
  box-shadow:0 3px 0 rgba(18,51,63,.10), 0 12px 26px rgba(18,51,63,.22);
  transform:rotate(var(--rot,0deg));
}
/* マスキングテープ（参照案 .tape::before）＝紙の上辺の中央へ。札（左上）と重ならない位置。
   色はカードごとの --tape（front-page.php が周期で入れる）。 */
.arc-pola::before{
  content:""; position:absolute; z-index:3; top:-13px; left:50%;
  width:92px; height:27px;
  background-color:var(--tape, rgba(251,176,33,.78));
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 5px,rgba(255,255,255,0) 5px 11px);
  box-shadow:0 1px 3px rgba(18,51,63,.16);
  clip-path:polygon(2% 4%,98% 0,100% 95%,0 100%);
  transform:translateX(-50%) rotate(-3deg);
}
/* 写真は参照案と同じ 200×152 の面に切り出す（第1〜6回の記録写真はこの比率そのもの＝切れない）。
   縦長のポスター（第11〜13・17・18回）は object-position:50% 0 ＝上端合わせで、
   題字と開催日の入る上半分を見せる（中央合わせだと題字が切れて何の回か分からなくなる）。
   横長（第20回=16:9）は左右が詰まるだけなので、上下位置の指定は効かない。 */
.arc-photo{ position:relative; flex:none; aspect-ratio:200/152; overflow:hidden; background:rgba(18,51,63,.08); }
.arc-photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0; }
/* 写真がまだ無い回・中止の回：写真と同じ比率の破線パネル（参照案 .arch-seek）。旧 .arc-noimg の後継 */
.arc-seek{
  flex:none; width:100%; aspect-ratio:200/152;
  background:var(--paper); border:2.5px dashed rgba(18,51,63,.42);
  border-radius:14px 10px 15px 11px/11px 15px 10px 14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:10px; text-align:center;
}
.arc-seek .ico{ width:26px; height:26px; flex:none; color:var(--teal); }
/* 短い語なので字間を開けてラベルらしく見せる。text-indent は字間ぶんの右寄りを打ち消して中央に見せるため */
.arc-seek p{ font-size:.72rem; font-weight:700; line-height:1.4; color:var(--ink); opacity:.62; letter-spacing:.14em; text-indent:.14em; }
.arc-seek-off{ border-color:rgba(240,89,43,.42); }
.arc-seek-off .ico{ color:var(--coral); }
/* キャプション＝1行目に開催日、下に小さく出演者（参照案 figcaption ＋ .cap-sub）。
   出す項目は「開催日＋出演」だけに絞り、ひとこと（_om_note）は出力ごとやめた。
   出演は3行で頭打ち（あふれは省略記号）にして中身の高さに上限を作る＝行数差でカードが伸びない。
   flex:1 ＝伸びたぶんの高さを紙の白地が埋める（中止回など出演の無いカードでも枠は同じ）。
   固定pxを置かないので、字詰めや画面幅が変わっても揃ったままになる。 */
.arc-cap{ flex:1; padding:9px 3px 6px; font-size:.78rem; line-height:1.6; font-weight:700; color:var(--navy); letter-spacing:.01em; }
.arc-cap-d{ display:block; font-family:var(--arch); font-weight:800; letter-spacing:.04em; }
.arc-cap-off{ font-family:inherit; color:var(--ink-60, #6b7c88); }  /* 中止回は「2020年」＝和文が混じるので本文の書体のまま */
.arc-cap-sub{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
  margin-top:3px; font-weight:500; font-size:.72rem; line-height:1.55; letter-spacing:0; color:var(--ink); opacity:.78;
}

/* ================= 協賛（実名・全件フラット表示） ================= */
.sponsor-year{ font-family:var(--arch); font-weight:800; font-size:.95rem; letter-spacing:.12em; color:var(--navy); margin-bottom:6px; }
.sponsor-note{ font-size:.95rem; line-height:1.7; color:var(--ink-60); margin-bottom:var(--gap-lg); }
/* 協賛者：文字のみのシンプルカード（同一サイズ・軽い枠） */
.sp-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(128px,20vw,172px),1fr)); gap:var(--gap-sm); }
/* 地は白（--paper の生成りだと .sec.warm の地と近く、カードの輪郭が立たない・2026-07-27FB）。
   高さは aspect-ratio:5/2 をやめて min-height に変更（2026-07-27FB「カードの高さ狭める」）。
   比率固定だとカード幅に高さが引きずられ、幅172pxのとき69pxまで伸びていた。
   min-height なら下限だけ決まり、社名が2行になったときはグリッドの行揃えで自動的に伸びる。 */
.sp-card{ min-height:clamp(44px,5.5vw,56px); display:flex; align-items:center; justify-content:center; text-align:center; border:1px solid var(--line); border-radius:5px; background:#fff; padding:8px 10px; }
.sp-card .nm{ font-weight:900; font-size:1rem; color:var(--navy); line-height:1.3; }
/* 協賛募集CTA（切符/枠の意匠） */
/* 左右中央の丸ノッチ＝切符の切れ込み（2026-07-29ユーザー指示「ご協賛のお願いもチケット風に
   横に丸の切れ込みを入れる」）。実装はMV乗船券 .mv-shadow/.mv-card/.mv-face のパターンを
   そのまま流用（理由の詳細は同ブロックのコメント参照）。外側 .cta-card（藍のフチ）と内側
   .cta-face（白い券面）に、位置は同じで半径だけ --edge ぶん違うマスクを掛け、フチが一定幅の
   弧としてノッチをなぞるようにする（単層マスクだとノッチの所でフチが途切れる）。
   ※mask は box-shadow を切り落とすので旧 box-shadow は drop-shadow へ移した。さらに
     filter と mask を同じ要素に置くと描画順「filter→mask」で影ごと切り落とされる（Chromeで実測）
     ため、影はマスクを持たない一段外の .sponsor-cta に置く。 */
.sponsor-cta{ position:relative; margin-top:var(--flow); filter:drop-shadow(5px 5px 0 rgba(18,78,120,.14)); }
.cta-card{
  --notch:15px;   /* 切れ込みの半径 */
  --edge:3px;     /* フチの太さ（旧 border:3px solid var(--navy) 相当） */
  background:var(--navy);
  padding:var(--edge);
  border-radius:8px;
  -webkit-mask-image:
    radial-gradient(circle var(--notch) at 0 50%,rgba(0,0,0,0) 96%,#000 100%),
    radial-gradient(circle var(--notch) at 100% 50%,rgba(0,0,0,0) 96%,#000 100%);
  mask-image:
    radial-gradient(circle var(--notch) at 0 50%,rgba(0,0,0,0) 96%,#000 100%),
    radial-gradient(circle var(--notch) at 100% 50%,rgba(0,0,0,0) 96%,#000 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.cta-face{
  display:flex; align-items:stretch;
  background:#fff;
  border-radius:5px;
  -webkit-mask-image:
    radial-gradient(circle calc(var(--notch) + var(--edge)) at calc(-1 * var(--edge)) 50%,rgba(0,0,0,0) 96%,#000 100%),
    radial-gradient(circle calc(var(--notch) + var(--edge)) at calc(100% + var(--edge)) 50%,rgba(0,0,0,0) 96%,#000 100%);
  mask-image:
    radial-gradient(circle calc(var(--notch) + var(--edge)) at calc(-1 * var(--edge)) 50%,rgba(0,0,0,0) 96%,#000 100%),
    radial-gradient(circle calc(var(--notch) + var(--edge)) at calc(100% + var(--edge)) 50%,rgba(0,0,0,0) 96%,#000 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
/* 帯の幅は min-width:100px だと「Support」の実測96.2px（PC）とほぼ同寸で左右の余白が0だった
   （2026-07-29ユーザー指示「PCサイズでSupportの両側余白が無い」）。左端はノッチが最大15px
   食い込むぶんも要るので、min-width 100→150px・左右 padding 0→26px へ広げて約27pxずつ確保する。 */
.cta-stub{ background:var(--sunset); color:#fff; min-width:150px; padding:0 26px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border-right:4px dashed var(--paper); border-radius:5px 0 0 5px; text-align:center; }
.cta-stub .en{ font-family:var(--arch); font-weight:800; font-size:.9rem; letter-spacing:.12em; }
.cta-stub .mk-ico{ font-size:1.7rem; line-height:1; }
.cta-body{ flex:1; padding:clamp(28px,4vw,48px); }
.cta-ttl{ font-family:var(--mincho); font-weight:900; font-size:clamp(1.2rem,3vw,1.6rem); color:var(--navy); letter-spacing:.03em; }
.cta-lead{ margin-top:10px; font-size:1rem; line-height:1.95; max-width:var(--measure); }
.cta-note{ margin-top:10px; font-size:.95rem; color:var(--ink-60); }
.cta-btn{ display:inline-block; margin-top:16px; font-weight:900; font-size:.92rem; color:#fff; background:var(--coral); border:2px solid var(--navy); border-radius:999px; padding:10px 26px; box-shadow:3px 3px 0 rgba(18,78,120,.2); transition:.15s; }
.cta-btn:hover{ background:var(--navy); }
/* 協賛CTAのボタンだけ一段大きく（2026-07-27FB「協賛はどんどん取りたいので目立つように」）。
   .cta-btn はアーカイブの「もっと見る」と共用なので、協賛側にスコープして影響を閉じる。 */
.sponsor-cta .cta-btn{ font-size:1rem; padding:12px 30px; }
/* SP：縦積み（上=帯・下=本文）。券が小さくなるぶん切れ込みも浅く（PC 15px → SP 11px＝乗船券と同じ流儀）。
   帯は横並びで幅いっぱいになるため、PCで足した min-width/padding は0と12pxへ戻す。 */
@media (max-width:600px){ .cta-face{ flex-direction:column; } .cta-card{ --notch:11px; }
  .cta-stub{ flex-direction:row; gap:12px; min-width:0; border-right:none; border-bottom:4px dashed var(--paper); border-radius:5px 5px 0 0; padding:12px; }
  .cta-btn{ display:block; width:max-content; margin-left:auto; margin-right:auto; } }

/* ================= よくあるご質問 FAQ（しおり枠アコーディオン） ================= */
/* 地は白（2026-07-27FB）。FAQセクションも .alt/.warm を持たず地が --paper の生成りのため、
   .event / .sp-card と同じく白にして面で分離する。上部の帯(.shiori-top)は灯り色のまま。 */
.shiori{ border:4px solid var(--navy); border-radius:8px; overflow:hidden; box-shadow:8px 8px 0 rgba(18,78,120,.16); background:#fff; }
.shiori-top{ background:var(--mustard); border-bottom:4px solid var(--navy); padding:14px clamp(18px,3vw,26px); display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.shiori-top h3{ font-family:var(--mincho); font-weight:900; font-size:1.4rem; color:var(--navy); letter-spacing:.04em; }
.shiori-top .en{ color:var(--navy); font-size:.75rem; letter-spacing:.14em; }
.qa{ border-bottom:2px dotted var(--teal); }
.qa:last-child{ border-bottom:none; }
.qa .q{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; cursor:pointer; list-style:none; padding:clamp(16px,2.4vw,24px) clamp(18px,3vw,26px); font-family:var(--mincho); font-weight:700; font-size:clamp(1.02rem,2.4vw,1.24rem); line-height:1.5; color:var(--navy); }
.qa .q::-webkit-details-marker{ display:none; }
.qa .q::after{ content:"＋"; font-family:var(--arch); font-weight:800; font-size:1.1rem; color:var(--teal); }
.qa[open] .q::after{ content:"−"; }
.qa .q:hover{ background:#eafafa; }
.qa .a{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline; padding:0 clamp(18px,3vw,26px) clamp(18px,2.6vw,26px); font-weight:500; font-size:1rem; line-height:1.8; }
/* 宿4軒の一覧（別案 suguru3_opus5 の STAY から取り込み・2026-07-29）。回答文中の箇条書き */
.qa-inns{ list-style:none; margin:10px 0; padding:0; display:grid; gap:6px; }
.qa-inns li{ font-weight:700; }
.qa-inns small{ display:block; font-weight:500; font-size:.85em; color:var(--ink-60); }
.mk{ flex-shrink:0; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-family:var(--arch); font-weight:800; font-size:1rem; border:2px solid var(--navy); }
.qa .q .mk{ background:var(--coral); color:#fff; }
.qa .a .mk{ background:var(--teal); color:#fff; }

/* ================= お問い合わせ ================= */
.contact-band{
  background:var(--navy); color:var(--paper);
  border:4px solid var(--mustard); border-radius:10px;
  box-shadow:10px 10px 0 rgba(18,78,120,.3);
  padding:clamp(32px,5vw,56px) clamp(22px,4vw,52px);
  display:grid; grid-template-columns:1fr auto; gap:clamp(22px,4vw,48px); align-items:center;
}
.contact-org{ font-weight:900; font-size:clamp(1.15rem,2.8vw,1.55rem); letter-spacing:.04em; }
.contact-org small{ display:block; font-family:var(--arch); font-weight:800; font-size:.75rem; letter-spacing:.12em; color:var(--mustard); margin-bottom:8px; }
.contact-org span{ display:block; font-weight:500; font-size:.96rem; line-height:1.8; margin-top:12px; max-width:26em; opacity:.92; }
.tel-box{ text-align:right; }
.tel-box small{ font-family:var(--arch); font-weight:800; font-size:.75rem; letter-spacing:.12em; color:var(--mustard); }
.tel-box a{ display:block; font-family:var(--arch); font-weight:800; font-size:clamp(1.9rem,6vw,3.2rem); line-height:1; letter-spacing:.01em; margin-top:6px; color:var(--mustard); }
.tel-box a::before{ content:"\260E  "; font-size:.62em; }
/* SPは電話番号を中央揃え（2026-07-29FB。縦積みで左寄せだと片側だけ重く見える） */
@media (max-width:680px){ .contact-band{ grid-template-columns:1fr; } .tel-box{ text-align:center; } }

/* ================= footer ================= */
.site-foot{ position:relative; background:var(--teal); color:#fff; padding:clamp(34px,5vw,56px) 0 46px; margin-top:clamp(34px,5vw,58px); }
/* 4色ライン：フッター最上端に全幅で敷く（サンセット＋オーシャン統合） */
.site-foot::before{ content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:linear-gradient(90deg,var(--coral) 0 25%,var(--mustard) 25% 50%,var(--lagoon) 50% 75%,var(--palm) 75% 100%); }
.foot-grid{ display:flex; justify-content:space-between; align-items:flex-end; gap:22px; flex-wrap:wrap; }
.foot-brand b{ font-family:var(--mincho); font-weight:900; font-size:1.3rem; letter-spacing:.05em; }
.foot-brand small{ display:block; font-family:var(--arch); font-weight:800; font-size:.75rem; letter-spacing:.12em; color:var(--mustard); margin-top:6px; }
.foot-nav{ display:flex; gap:6px 18px; flex-wrap:wrap; font-weight:700; font-size:.88rem; }
.foot-nav a{ opacity:.9; border-bottom:2px solid transparent; }
.foot-nav a:hover{ opacity:1; color:var(--mustard); border-color:var(--mustard); }
.copy{ margin-top:26px; font-size:.76rem; opacity:.85; letter-spacing:.03em; text-align:center; }
/* 池田卓 公式サイト・SNSへの控えめな導線（1行・footerの白文字と調和・SPで折返し可） */
.foot-links{ margin-top:22px; display:flex; align-items:center; gap:10px 20px; flex-wrap:wrap; }
.foot-official{ font-weight:700; font-size:.82rem; letter-spacing:.04em; opacity:.9; border-bottom:2px solid transparent; }
.foot-official:hover{ opacity:1; color:var(--mustard); border-color:var(--mustard); }
.foot-sns{ display:inline-flex; align-items:center; gap:12px; }
.foot-sns a{ display:inline-flex; opacity:.9; }
.foot-sns a:hover{ opacity:1; color:var(--mustard); }
.sns-ic{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ================= 背景の賑やかし（波デバイダ＋雲・静的装飾） ================= */
/* 色の変わり目に手描き風の波を挿入：前面波＝直前セクションの色が現セクション上部へ波打って垂れる。
   .sec は isolation:isolate 済みで z-index:-1 は自身の背景上・本文下に収まる。pointer-events:none。 */
/* #access の境界波は2026-07-29FB「開催情報と道のりの間は直線に」で対象から外した
   （山並みの帯の直線下端がそのまま境界になる） */
#faq::before, #omoi::before, #history::before, #sponsors::before, #contact::before{
  content:""; position:absolute; top:-1px; left:0; right:0;
  height:clamp(55px,9vw,120px);   /* 大胆化：SP=55〜75／PC=80〜120 */
  background-color:var(--wave-prev);
  background-image:var(--noise);
  -webkit-mask:var(--wave-svg) center top / 100% 100% no-repeat;
  mask:var(--wave-svg) center top / 100% 100% no-repeat;
  pointer-events:none; z-index:-1;
}
/* これまで上端の背面2層目（#history::after の奥行き演出）は 2026-07-29FB
   「波が二重になっている所は一本に」で撤去。境界波は ::before の1枚だけになった。 */
/* 境界波を航く船：#faq（よくあるご質問）上端＝道のりの下の波稜線に沿って左→右へゆっくり航行。
   2026-07-29指示で #access（道のり）の上端から1セクション下げた。波の絵（--wave-svg）は全境界で
   共通なので、稜線をなぞる値はそのまま使える。
   top%は--wave-svgの曲線y座標（viewBox 0 0 1200 100）をコンテナ高さ%に写像した近似値 */
.wave-sail{ position:absolute; top:-1px; left:0; right:0;
  height:clamp(55px,9vw,120px); pointer-events:none; z-index:-1; }
.ws-boat{ position:absolute; left:-4%; top:60%;
  width:clamp(56px,7.5vw,96px); height:auto; opacity:.95;
  transform:translate(-50%,-78%); rotate:2deg;
  animation:ws-sail 38s linear infinite; }
@keyframes ws-sail{
  0%   { left:-4%;   top:60%; rotate:2deg; }
  10%  { left:6.8%;  top:70%; rotate:4deg; }
  20%  { left:17.6%; top:79%; rotate:3deg; }
  31%  { left:29.5%; top:84%; rotate:1deg; }
  39%  { left:38.1%; top:86%; rotate:-2deg; }
  52%  { left:52.1%; top:62%; rotate:-7deg; }
  61%  { left:61.8%; top:45%; rotate:-6deg; }
  71%  { left:72.6%; top:37%; rotate:-1deg; }
  83%  { left:85.6%; top:38%; rotate:1deg; }
  93%  { left:96.4%; top:46%; rotate:3deg; }
  100% { left:104%;  top:56%; rotate:2deg; }
}
@media (prefers-reduced-motion:reduce){
  .ws-boat{ animation:none; left:64%; top:40%; rotate:-1deg; }
}
/* ご協賛下側の境界波（#history上端）：稜線の高い側（x≈61〜71%）から3匹の魚が群れで弧を描いて
   跳ね、水面へ戻る。8秒周期のうち跳躍は約1.2秒＝余韻を長めに。
   3匹は位置・大きさ・delayを少しずつずらして「群れ」に見せる。
   2026-07-29指示で #faq（よくあるご質問）の上端からここへ移動。波の絵も高さも全境界で共通なので
   跳ねる座標はそのまま使える。 */
.wave-fish{ position:absolute; top:-15px; left:0; right:0;
  height:clamp(55px,9vw,120px); pointer-events:none; z-index:-1; }
/* 魚は約1.5倍に拡大（2026-07-27FB「もっと大きく」）。3サイズの比（小:中:大＝33:44:37）は維持し、
   跳躍の @keyframes（移動量px）は据え置き＝弧の描き方は変えずに絵だけ大きくする。 */
.wf-fish{ position:absolute;
  width:clamp(42px,5.4vw,66px); height:auto; opacity:0;
  transform:translate(-18px,10px) rotate(-46deg);
  animation:wf-leap 8s linear infinite; }
/* 左右2グループ・各3匹。負のdelayで位相をずらし約4秒交互に跳ぶ */
.wave-fish.fl .wf-fish:nth-child(1){ left:18%; top:60%; width:clamp(32px,4.1vw,50px); animation-delay:-4.24s; }
.wave-fish.fl .wf-fish:nth-child(2){ left:23%; top:56%; animation-delay:-4.12s; }
.wave-fish.fl .wf-fish:nth-child(3){ left:28%; top:53%; width:clamp(36px,4.5vw,56px); animation-delay:-4s; }
.wave-fish.fr .wf-fish:nth-child(1){ left:61%; top:30%; width:clamp(32px,4.1vw,50px); animation-delay:.24s; }
.wave-fish.fr .wf-fish:nth-child(2){ left:66%; top:26%; animation-delay:.12s; }
.wave-fish.fr .wf-fish:nth-child(3){ left:71%; top:23%; width:clamp(36px,4.5vw,56px); animation-delay:0s; }
@keyframes wf-leap{
  0%, 62%  { opacity:0; transform:translate(-18px,10px) rotate(-46deg); animation-timing-function:ease-out; }
  63.5%    { opacity:1; }
  70%      { transform:translate(4px,-36px) rotate(-6deg); animation-timing-function:ease-in; }
  /* 消えるのは着水後＝波に12px沈んでから（2026-07-29FB「着地前に消えて見える」→フェードをぎりぎりまで遅延） */
  76%      { opacity:1; transform:translate(24px,0px) rotate(42deg); }
  78.5%    { opacity:1; transform:translate(29px,12px) rotate(50deg); }
  80%      { opacity:0; transform:translate(32px,18px) rotate(54deg); }
  100%     { opacity:0; transform:translate(32px,18px) rotate(54deg); }
}
@media (prefers-reduced-motion:reduce){
  .wf-fish{ animation:none; opacity:0; }
}
/* 動く波（.wave-drift/.wd-lay/.wd-f/wd-drift-l）一式は 2026-07-29FB
   「よくあるご質問の境界線の波は動かさない」で撤去。境界は静的な #faq::before のみ */
/* 各境界の小さな生きもの・乗りもの：コンテナspanは.wave-sail/.wave-fishと同じ層構造 */
.wave-gulls, .wave-sail-back{
  position:absolute; top:-8px; left:0; right:0;
  height:clamp(55px,9vw,120px); pointer-events:none; z-index:-1; }
/* 航行系は横方向だけクリップ（left:-4〜104%まで動くため）。縦は魚の跳躍が上へ出るのでvisibleのまま */
.wave-sail, .wave-fish, .wave-gulls, .wave-sail-back{ overflow-x:clip; }
/* 生きもの2組（.wave-people/.wpe）＝ヤマネコ親子・カメ親子。#history上端の波稜線（2026-07-22〜28）
   →「とは」の山裾（2026-07-28・.scene-animals）と移ったあと、2026-07-29指示で
   「主催 池田卓の想い」の下＝想い↓協賛の境界の波（#sponsors::before・想いの薄グリーン#EFF6EA）の
   稜線へ戻した。値は #history 時代のものをそのまま使える＝波の絵（--wave-svg）は全境界で共通のため。
   ・top% は --wave-svg の曲線y座標（viewBox 0 0 1200 100）をコンテナ高さ%に写像した値
     ＝x=26%地点の稜線y≒84／x=68%地点の稜線y≒38。コンテナを波より7px上げて（top:-8px と -1px の差）
     足元が稜線に乗る。
   ・DOMでは帰りの船（.wave-sail-back）の後ろに置く＝同じ z-index:-1 なので船が生きものの背後を通る。 */
.wave-people{ position:absolute; top:-8px; left:0; right:0;
  height:clamp(55px,9vw,120px); pointer-events:none; z-index:-1; }
.wpe{ position:absolute; height:auto; transform:translate(-50%,-96%); transform-origin:50% 100%;
  animation:wpe-sway 4.6s ease-in-out infinite alternate; }
/* 画像は実体のbboxで切り直してあり下余白0px＝translate(-50%,-96%)の足元合わせがそのまま効く。
   横長素材（ヤマネコ親子320x241／カメ親子320x216）なので、幅を引き上げて見た目の大きさを揃える。 */
.wpe-1{ left:26%; top:82%; width:clamp(84px,10.5vw,142px); }   /* ヤマネコ親子：最大時の高さ約107px */
.wpe-2{ left:68%; top:39%; width:clamp(78px,9.8vw,132px); animation-duration:5.4s; animation-delay:-2.2s; } /* カメ親子：同 約89px */
@media (prefers-reduced-motion:reduce){
  .wpe{ animation:none; }
}
@keyframes wpe-sway{
  from{ rotate:-1.5deg; }
  to  { rotate:1.5deg; }
}
/* #faq上端（船の境界）：カモメ2羽がその場でふわふわ上下に浮く（2026-07-29に船と一緒に
   #access上端からここへ移動） */
.wg-gull{ position:absolute; left:30%; top:22%; width:clamp(22px,3vw,36px); height:auto; color:var(--navy); opacity:.7;
  animation:wg-bob 3.2s ease-in-out infinite alternate; }
.wg-gull:nth-child(2){ left:38%; top:36%; width:clamp(16px,2.2vw,26px); animation-delay:-1.6s; animation-duration:3.8s; }
@keyframes wg-bob{
  from{ translate:0 0;   rotate:-2deg; }
  to  { translate:0 -8px; rotate:2deg; }
}
@media (prefers-reduced-motion:reduce){
  .wg-gull{ animation:none; }
}
/* #sponsors上端の帰りの船（.wsb-boat・wsb-sail）は2026-07-29指示で撤去。
   ヤマネコ親子・カメ親子が同じ稜線に立つようになり、足元を46秒周期で横切って煩かったため */
/* 大胆な波の分だけ、波を持つセクションの上余白を確保（波が本文に被らないように） */
/* 波デバイダ持ちセクションは波の高さ分だけ上paddingを増やす（波が本文に被らない＆実効の呼吸は他セクションと揃える。基本余白拡大に合わせて微増のみ＝二重増しすぎない） */
/* 見出し上の実効余白＝波の高さ＋SP40px〜PC80px（2026-07-22指示）。
   #about は 2026-07-28 に .sky-zone 内へ移り上端の波が無くなったので、この加算から外した。 */
#faq, #omoi, #history, #sponsors, #contact{
  padding-top:calc(clamp(55px,9vw,120px) + clamp(40px,5vw,80px)); }
/* #history の高め上書き（2層波の高さ対応）は 2026-07-29 の2層目撤去に伴い削除＝標準の波高計算へ。
   下余白は「これまでの下が空きすぎ」FBで --sec-pad（72〜150px）の約半分へ詰める */
#history{ padding-bottom:clamp(40px,5vw,72px); }
/* 各境界の波の色＝直前セクションの背景色（上と地続きに見せる）。
   2026-07-28の並べ替え（協賛→これまで→お問い合わせ）に合わせて下3つを付け替えた。
   同日に「想い」をFAQと協賛の間へ独立セクション化（薄グリーン）したので、その分も付け替えた
   ＝FAQ↓想い・想い↓協賛の2つの境界波が色差で見えるようになった。 */
/* #access の --wave-prev は境界波の撤去（2026-07-29「直線に」）で不要化 */
#faq     { --wave-prev:#EFF8F6; }       /* 直前=道のり（淡い水色） */
/* FAQ の音符パターン（onpu-tile.webp）は2026-07-29FBで撤去＝背景画像なし・bodyの紙地のまま */
#omoi    { --wave-prev:var(--paper); }  /* 直前=よくあるご質問（生成り） */
#sponsors{ --wave-prev:#EFF6EA; }       /* 直前=主催の想い（薄グリーン） */
#history { --wave-prev:#FBF4E7; }       /* 直前=ご協賛（淡い暖色） */
#contact { --wave-prev:#EFF8F6; }       /* 直前=これまで（淡い水色） */
/* 協賛の砂テクスチャを、協賛の色が垂れる境界波にも敷く（2026-07-29FB「波だけ無地に見える」）。
   ※共通の波ルール（上の #faq::before,… の background-image:var(--noise)）より後に書かないと
   後勝ちで打ち消される——当初その位置ミスで効いていなかった */
#history::before{ background-image:url("textures/bg_texture_noise.png"), var(--noise); background-repeat:repeat; }

/* 白ベタもこもこ雲：色付き地のセクション上部・本文の外側（PC幅のみ）。
   白は紙白地では見えないため、faq(紙白)から history(ミント#EFF8F6) へ配置替え。sponsors はクリーム地(#FBF4E7)で維持。
   about は 2026-07-28 の並べ替えで .sky-zone の空の水彩の上に乗るようになった（.fresh の薄グリーン地を外したため）。
   空は上が濃い青・下は白へ抜けるので、雲が見えるのは見出し付近＝上部の青い領域だけになる（実機確認済み）。
   z-index:-1 で本文背面・クリック阻害なし。 */
/* #omoi .wrap は雲を持たないが、中の音符（ne）の位置基準として同じく relative にする（2026-07-28の独立セクション化） */
#faq .wrap, #about .wrap, #sponsors .wrap, #access .wrap, #history .wrap, #omoi .wrap{ position:relative; }
@media (min-width:1000px){
  #history .wrap::before, #about .wrap::before, #about .wrap::after, #sponsors .wrap::before{
    content:""; position:absolute; pointer-events:none; z-index:-1; opacity:.9;
    background-repeat:no-repeat; background-position:center; background-size:contain;
    /* ふわふわ：ゆったり上下バウンス（雲ごとにdur/delayをずらす。2026-07-22指示で減速） */
    animation:cloud-bob 5.5s ease-in-out infinite; will-change:transform;
  }
  #history .wrap::before { top:8px;  right:-104px; width:98px;  height:40px; background-image:var(--cloud2); animation-duration:6.5s; animation-delay:-3s; }
  #about .wrap::before   { top:20px; left:-130px;  width:124px; height:48px; background-image:var(--cloud1); animation-duration:6s; animation-delay:0s; }
  #about .wrap::after    { top:60px; right:-92px;  width:84px;  height:37px; background-image:var(--cloud3); animation-duration:5s; animation-delay:-1.8s; }
  #sponsors .wrap::before{ top:14px; left:-104px;  width:98px;  height:40px; background-image:var(--cloud2); animation-duration:5.6s; animation-delay:-1s; }
}
/* ピコピコ本体：0を挟んだ二段バウンスで軽い弾みを出す */
@keyframes cloud-bob{
  0%   { transform:translateY(0); }
  30%  { transform:translateY(-5px); }
  55%  { transform:translateY(-1px); }
  78%  { transform:translateY(-6px); }
  100% { transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
  #history .wrap::before, #about .wrap::before, #about .wrap::after, #sponsors .wrap::before{ animation:none; }
}

/* ================= さざ波マーク（道のり#accessの背景全面に散らす・2026-07-27改訂／SPも表示） =================
   旧: 10個を .wrap の左右余白だけに px 直打ちで置いた静的装飾。
   新: セクション直下へ移し36個を全幅・全高へ散らす＋上下のゆったりした動きを付ける（ユーザー指示）。
   座標・幅・アニメの位相は front-page.php 側の固定表からカスタムプロパティで渡す
   （--x/--y/--w/--d/--t）。CSSは1ルールで済み、増減は表の行を足し引きするだけになる。
   基準は .sec（position:relative・isolation:isolate）＝ .wrap ではないので % が全幅に効く。
   雲/音符と同じ層構造（z-index:-1・pointer-events:none）。ただしSPでも表示する（2026-07-27FB）。
   提供素材 bg_wave.png（グレー地から波紋を透過抽出・単色化した軽量版）を全マーク共通で使用。
   淡色のためミント地では乗算で馴染ませる。 */
/* SPでも表示する（2026-07-27FB）。幅が狭いぶんマークは6割に縮める。 */
.wv{
  display:block; position:absolute; z-index:-1; pointer-events:none;
  left:var(--x); top:var(--y); width:var(--w); aspect-ratio:4/1;
  background-image:url("img/bg_wave.png"); mix-blend-mode:multiply;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  animation:wv-bob var(--t,3s) ease-in-out var(--d,0s) infinite;
}
@media (max-width:999.98px){
  .wv{ width:calc(var(--w) * .6); }
}
/* 水面が立ち上がっては戻る、上下のゆったりした動き。
   2026-07-27に一度「左右」→「上下＋左右の斜め」と試したが、どちらも不自然との評価により
   最初の上下だけの動きへ差し戻した。周期は表の値(--t=2.8〜4.8s)をそのまま使う（詰めない）。
   位相(--d)と周期(--t)を1つずつずらしてあるので、全体では不規則に見える。 */
@keyframes wv-bob{
  0%, 100%{ transform:translateY(2px) scaleY(.75); opacity:.45; }
  50%     { transform:translateY(-4px) scaleY(1.2); opacity:.95; }
}
@media (prefers-reduced-motion:reduce){
  .wv{ animation:none; opacity:.7; transform:none; }
}

/* ================= 浮遊する音符（明るいセクションの左右余白に散らす・純CSS） =================
   手描き風アニメGIF（onpu_1〜7）を使用。雲と同じ層構造（z-index:-1・pointer-events:none）に合流。
   PC幅（min-width:1000px）のみ表示・SPは雲と同基準で非表示。ゆっくり浮遊（要素ごとにdelay/durationずらし）。 */
.note{ display:none; }
/* 図柄と縦横比は共通（PC/SP両方で使う・display:none時は描画されないので待機コスト無し） */
.note.o1{ background-image:url("img/onpu_1.gif"); aspect-ratio:42/53; }  /* 四分休符 */
.note.o2{ background-image:url("img/onpu_2.gif"); aspect-ratio:46/56; }  /* シャープ */
.note.o3{ background-image:url("img/onpu_3.gif"); aspect-ratio:78/76; }  /* 連桁二連音符 */
.note.o4{ background-image:url("img/onpu_4.gif"); aspect-ratio:46/70; }  /* 八分音符 */
.note.o5{ background-image:url("img/onpu_5.gif"); aspect-ratio:62/156; } /* ト音記号 */
.note.o6{ background-image:url("img/onpu_6.gif"); aspect-ratio:84/94; }  /* ヘ音記号 */
.note.o7{ background-image:url("img/onpu_7.gif"); aspect-ratio:31/77; }  /* 四分音符 */
@media (min-width:1000px){
  .note{
    display:block; position:absolute; z-index:-1; pointer-events:none;
    background-repeat:no-repeat; background-position:center; background-size:contain;
    opacity:.3; mix-blend-mode:multiply;
    animation:var(--anim,note-float) var(--dur,9s) ease-in-out var(--delay,0s) infinite alternate;
  }
  /* 配置（親wrap基準・大小混在／雲と重ならない位置）。na,nb=MV直下(道のり上部) */
  /* na/nb（道のり）は2026-07-22ユーザー指示で撤去（道のりはさざ波マークのみ） */
  /* nc,nd=音祭りとは（厚め・雲は左上/右上なので中〜下段へ）／ne=主催の想い（2026-07-28に独立セクション化して移動・位置値は据え置き） */
  .note.nc{ left:-58px;  top:150px; width:30px; --delay:-2s; --dur:9s; }
  .note.nd{ right:-50px; top:250px; width:17px; --delay:-6s; --dur:11s; --anim:note-float-b; }
  .note.ne{ left:-56px;  top:40px;  width:21px; --delay:-3s; --dur:8.5s; }
  /* nf,ng=これまで（厚め） */
  .note.nf{ left:-50px;  top:70px;  width:18px; --delay:-5s; --dur:12s; }
  .note.ng{ right:-64px; top:230px; width:28px; --delay:-2.5s; --dur:9.5s; --anim:note-float-b; }
  /* nh=協賛（雲は左なので右へ）／ni=FAQ（雲は右上なので左へ） */
  .note.nh{ right:-58px; top:96px;  width:20px; --delay:-7s; --dur:10s; }
  .note.ni{ left:-60px;  top:130px; width:29px; --delay:-3.5s; --dur:8s; --anim:note-float-b; }
  /* nj,nk,nl=開催情報／nm,nn=FAQ／nx,np,nq=音祭りとは／nr,ns=これまで／nt,nu=協賛／nv,nw=お問い合わせ（増量分・2026-07-22） */
  .note.nj{ right:-60px; top:120px; width:34px; --delay:-1.5s; --dur:9.5s; }
  .note.nk{ left:-52px;  top:420px; width:20px; --delay:-5.5s; --dur:11s;  --anim:note-float-b; }
  .note.nl{ right:-64px; top:60%;   width:22px; --delay:-8s;   --dur:8.5s; }
  .note.nm{ right:-58px; top:55%;   width:26px; --delay:-2.2s; --dur:10s;  --anim:note-float-b; }
  .note.nn{ left:-64px;  top:75%;   width:20px; --delay:-6.5s; --dur:9s; }
  .note.nx{ left:-60px;  top:58%;   width:34px; --delay:-4.2s; --dur:10.5s; }
  .note.np{ right:-56px; top:78%;   width:20px; --delay:-1.8s; --dur:8s;   --anim:note-float-b; }
  .note.nq{ left:-48px;  top:88%;   width:16px; --delay:-7.2s; --dur:12s; }
  .note.nr{ left:-64px;  top:45%;   width:30px; --delay:-3.8s; --dur:9s;   --anim:note-float-b; }
  .note.ns{ right:-52px; top:70%;   width:18px; --delay:-9s;   --dur:10s; }
  .note.nt{ left:-56px;  top:40%;   width:24px; --delay:-2.8s; --dur:11.5s; }
  .note.nu{ right:-62px; top:65%;   width:30px; --delay:-6s;   --dur:8.5s; --anim:note-float-b; }
  .note.nv{ right:-56px; top:80px;  width:22px; --delay:-4.8s; --dur:9.5s; }
  .note.nw{ left:-60px;  top:50%;   width:28px; --delay:-1.2s; --dur:10s;  --anim:note-float-b; }
}
@keyframes note-float{
  from{ transform:translateY(-8px) rotate(-4deg); }
  to{   transform:translateY(8px)  rotate(4deg); }
}
@keyframes note-float-b{
  from{ transform:translateY(7px)  rotate(4deg); }
  to{   transform:translateY(-9px) rotate(-3deg); }
}
@media (prefers-reduced-motion:reduce){
  .note{ animation:none; }
}

/* ================= SP（〜999.98px）：音符・雲を見出し付近に間引き表示 =================
   PCはmin-width:1000pxで左右余白に散らす。SPは空きスペース（見出しの右上）へ密度を絞って添える。
   共通の .note{display:none} を上書き＝各セクション音符1つ（na/ni/nc/nf/nh）のみ表示（nb/nd/ne/ngは非表示のまま）。
   雲は::beforeのみ（::afterはSP非表示のまま・白雲なので色地セクションでのみ視認）。 */
@media (max-width:999.98px){
  /* 音符20個をSPでも全表示（wrap基準・本文背面）。位置は左右と高さをジグザグに散らす。高さはo1〜o7のaspect-ratioで自動 */
  .note.nc, .note.nd, .note.ne, .note.nf, .note.ng, .note.nh, .note.ni,
  .note.nj, .note.nk, .note.nl, .note.nm, .note.nn, .note.nx, .note.np,
  .note.nq, .note.nr, .note.ns, .note.nt, .note.nu, .note.nv, .note.nw{
    display:block; position:absolute; z-index:-1; pointer-events:none;
    background-repeat:no-repeat; background-position:center; background-size:contain;
    opacity:.3; mix-blend-mode:multiply;
    animation:var(--anim,note-float) var(--dur,9s) ease-in-out var(--delay,0s) infinite alternate;
  }
  .note.ni{ right:6px;  top:-8px;  width:24px; --delay:-3.5s; --dur:8s;    --anim:note-float-b; } /* #faq */
  .note.nc{ right:4px;  top:-12px; width:26px; --delay:-2s;   --dur:9s; }                       /* #about */
  .note.nd{ left:6px;   top:38%;   width:16px; --delay:-6s;   --dur:11s;   --anim:note-float-b; } /* #about */
  .note.ne{ right:8px;  top:36px;  width:18px; --delay:-3s;   --dur:8.5s; }                     /* #omoi */
  .note.nf{ left:6px;   top:-6px;  width:15px; --delay:-5s;   --dur:12s; }                      /* #history */
  .note.ng{ right:8px;  top:58%;   width:24px; --delay:-2.5s; --dur:9.5s;  --anim:note-float-b; } /* #history */
  .note.nh{ left:10px;  top:-16px; width:20px; --delay:-7s;   --dur:10s; }                      /* #sponsors */
  /* 増量分（2026-07-22）：wrap内・左右交互・%とpxを混ぜて散らす */
  .note.nj{ right:8px;  top:24%;   width:22px; --delay:-1.5s; --dur:9.5s; }                     /* #events */
  .note.nk{ left:8px;   top:64%;   width:15px; --delay:-5.5s; --dur:11s;   --anim:note-float-b; } /* #events */
  .note.nl{ right:12px; top:82%;   width:16px; --delay:-8s;   --dur:8.5s; }                     /* #events */
  .note.nm{ right:10px; top:52%;   width:18px; --delay:-2.2s; --dur:10s;   --anim:note-float-b; } /* #faq */
  .note.nn{ left:8px;   top:78%;   width:15px; --delay:-6.5s; --dur:9s; }                       /* #faq */
  .note.nx{ left:10px;  top:56%;   width:22px; --delay:-4.2s; --dur:10.5s; }                    /* #about */
  .note.np{ right:8px;  top:74%;   width:15px; --delay:-1.8s; --dur:8s;    --anim:note-float-b; } /* #about */
  .note.nq{ left:12px;  top:90%;   width:13px; --delay:-7.2s; --dur:12s; }                      /* #about */
  .note.nr{ left:8px;   top:42%;   width:20px; --delay:-3.8s; --dur:9s;    --anim:note-float-b; } /* #history */
  .note.ns{ right:12px; top:68%;   width:14px; --delay:-9s;   --dur:10s; }                      /* #history */
  .note.nt{ left:10px;  top:36%;   width:17px; --delay:-2.8s; --dur:11.5s; }                    /* #sponsors */
  .note.nu{ right:8px;  top:62%;   width:20px; --delay:-6s;   --dur:8.5s;  --anim:note-float-b; } /* #sponsors */
  .note.nv{ right:10px; top:20%;   width:16px; --delay:-4.8s; --dur:9.5s; }                     /* #contact */
  .note.nw{ left:8px;   top:48%;   width:19px; --delay:-1.2s; --dur:10s;   --anim:note-float-b; } /* #contact */
  /* 雲：色地セクション（history/about/sponsors）に::before/::afterを大小・左右違い・別高さで散らす（白雲・PCと同じopacity） */
  #history .wrap::before, #about .wrap::before, #sponsors .wrap::before,
  #history .wrap::after,  #about .wrap::after,  #sponsors .wrap::after{
    content:""; position:absolute; pointer-events:none; z-index:-1; opacity:.9;
    background-repeat:no-repeat; background-position:center; background-size:contain;
    animation:cloud-bob 6s ease-in-out infinite; will-change:transform;
  }
  #history .wrap::before { top:6px;  right:8px; width:66px; height:27px; background-image:var(--cloud2); }
  #about .wrap::before   { top:6px;  right:8px; width:72px; height:28px; background-image:var(--cloud1); }
  #sponsors .wrap::before{ top:6px;  right:8px; width:60px; height:24px; background-image:var(--cloud2); }
  #history .wrap::after  { top:44%;  left:8px;  width:52px; height:23px; background-image:var(--cloud3); }
  #about .wrap::after    { top:62%;  left:8px;  width:64px; height:28px; background-image:var(--cloud3); }
  #sponsors .wrap::after { top:50%;  left:8px;  width:78px; height:30px; background-image:var(--cloud1); }
}
/* reduced-motion：上のSP追加分もアニメ停止（順序・特異性で既存ルールを確実に上書き） */
@media (prefers-reduced-motion:reduce){
  .note.nc, .note.nd, .note.ne, .note.nf, .note.ng, .note.nh, .note.ni,
  .note.nj, .note.nk, .note.nl, .note.nm, .note.nn, .note.nx, .note.np,
  .note.nq, .note.nr, .note.ns, .note.nt, .note.nu, .note.nv, .note.nw{ animation:none; }
  #history .wrap::before, #about .wrap::before, #sponsors .wrap::before,
  #history .wrap::after,  #about .wrap::after,  #sponsors .wrap::after{ animation:none; }
}

/* ================= 音符・白雲の一時非表示（2026-07-28ユーザー指示「いったん取りたい」） =================
   対象=背景に散る音符（.note 全部）と、セクション脇の白ベタもこもこ雲（.wrap の疑似要素）。
   HTMLのspan・既存定義・座標はすべて温存してあるので、復活はこのブロックの削除だけでよい。
   生きもの装飾（コノハズク/イノシシ/船/魚/ヤマネコ/カメ/カモメ）とオープニングの雲パネル（.op-cloud）は対象外。
   置き場所は上の音符・雲の定義より後ろであること＝同じ特異性を後勝ちで上書きするため（雲は !important 不要）。
   音符だけはSPの .note.nc 等（特異性が1つ上）も止める必要があるので !important を付ける。
   雲の定義があるのは #history / #about / #sponsors の3つ（PC=939行付近／SP=1090行付近）。
   #omoi は雲を持たないが、独立セクション化した経緯から復活時の取りこぼし防止に併記しておく。 */
.note{ display:none !important; }
#history .wrap::before,  #history .wrap::after,
#about .wrap::before,    #about .wrap::after,
#sponsors .wrap::before, #sponsors .wrap::after,
#omoi .wrap::before,     #omoi .wrap::after{ content:none; }

/* ================= reveal ================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
/* JS無効時（html.no-js のまま）は隠さず最初から表示する */
.no-js .reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .stamp.pop{ animation:none; }
  .postmark.pop{ animation:none; }
}

/* ===== 雲晴れオープニング（front-page限定）ここから =====
   タイムライン: 雲空0〜.25s → 雲が左右へ流れながら薄れる.25〜1.75s → 晴れ空フェード1.75〜2.35s。
   すべて transform/opacity のみ。fill-mode:forwards で終了状態=不可視＋操作透過が
   JSなしでも保証される（visibilityはキーフレーム終端で hidden になる）。
   下地=晴れ空グラデ（bk_sky01と同系の淡い水色→白）。画像読込が遅れても下地が必ず先に
   表示される＝白画面や本文のチラ見えを防ぐ。
   旧演出（船＋波の幕・2026-07-24）は 2026-07-28 に本演出へ差し替え。
   設計: docs/superpowers/specs/2026-07-28-cloud-opening-design.md */
.opening{ position:fixed; inset:0; z-index:300; overflow:hidden;
  background:linear-gradient(180deg,#CDE9F6,#F6FBFE 70%,#fff);
  animation:op-fade .6s ease 1.75s forwards; }
@keyframes op-fade{ to{ opacity:0; visibility:hidden; } }
.op-lock{ overflow:hidden; }               /* htmlに付与＝再生中のスクロールロック */
.no-js .opening{ display:none; }           /* JS無効時は演出なしで即コンテンツ */
.opening[hidden]{ display:none; }          /* 2回目以降（インラインscriptが付与） */
@media (prefers-reduced-motion: reduce){ .opening{ display:none; } }

/* 雲パネル4枚（左右×奥/手前）。奥(bl/br)は反対側の画像を左右反転で使い回し＝素材2枚のまま
   柄を変える。手前=速く遠く・奥=遅く近くの視差で「幕のスライド」でなく「雲の流れ」に見せる。
   transformはアニメで上書きされるため、奥の反転・拡大は from/to の両方にフル指定する。
   反転座標系の罠: scaleX(-1)下では translateX の正負が画面上で逆になる（blはtranslateX(+34%)で
   画面左へ退場）。%は自身の幅基準。fill-mode:both＝delay中(0〜.25s)も from が適用され、
   奥パネルの反転・拡大が最初から効く（forwardsだと0.25sで反転にスナップする）。 */
.op-cloud{ position:absolute; top:0; height:100%; object-fit:cover; z-index:1; pointer-events:none; }
.op-cloud.bl{ left:-4vw;  width:max(74vw,740px); opacity:.92;
  animation:op-drift-bl 1.5s cubic-bezier(.45,0,.55,1) .25s both; }
.op-cloud.br{ right:-4vw; width:max(74vw,740px); opacity:.92;
  animation:op-drift-br 1.5s cubic-bezier(.45,0,.55,1) .25s both; }
.op-cloud.fl{ left:0;  width:max(66vw,660px);
  animation:op-drift-fl 1.5s cubic-bezier(.4,0,.5,1) .25s both; }
.op-cloud.fr{ right:0; width:max(66vw,660px);
  animation:op-drift-fr 1.5s cubic-bezier(.4,0,.5,1) .25s both; }
@keyframes op-drift-bl{ from{ transform:scaleX(-1) scale(1.12); }
  to{ transform:scaleX(-1) scale(1.12) translateX(34%); opacity:0; } }
@keyframes op-drift-br{ from{ transform:scaleX(-1) scale(1.12); }
  to{ transform:scaleX(-1) scale(1.12) translateX(-34%); opacity:0; } }
@keyframes op-drift-fl{ from{ transform:none; }
  to{ transform:translateX(-58%) translateY(-3%); opacity:0; } }
@keyframes op-drift-fr{ from{ transform:none; }
  to{ transform:translateX(58%) translateY(-2%); opacity:0; } }

/* スキップ（常時表示・紙白チップ） */
.op-skip{ position:absolute; right:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px); z-index:3;
  font-family:var(--jp); font-size:.85rem; letter-spacing:.12em; color:var(--ink);
  background:rgba(255,253,245,.92); border:1px solid var(--line); border-radius:999px;
  padding:.5em 1.4em; cursor:pointer; }
.op-skip:hover{ background:#fff; }
/* ===== 雲晴れオープニング ここまで ===== */

/* ================= スクロール進捗バー voyage-bar（2026-07-28） =================
   原本 assets/voyage-bar/（README.md 参照）は無改変で同梱し、テーマへの馴染ませはここだけで行う
   ＝コンポーネントを差し替えるだけで更新できるようにするため。CSSは voyage-bar.css → site.css の
   順で読み込む（functions.php で site.css の依存に入れてある）ので、この上書きが後勝ちになる。
   ・上→下固定へ反転：上端は .site-head（sticky・3px罫）が既に占めており、進捗表示は視線の下端に
     置いたほうが読書の邪魔にならない。「読み進むほど船浮港へ近づく」の見え方も自然。
   ・配色は乗船券・道のりの航路図と地続きに：地=生成り（--paper #FFF7EA）の半透明、
     航路の点線=海のジェイド（--teal／.qa の点線罫と同じ扱い）、ラベル=墨（--ink-60）、
     到着＝船浮港に着いたら夕陽（--coral）で強調。
   ・船は道のり（.stp-veh.sv-fune）と同じ fune01.png・同じ34px＝サイト内の船を1種類に揃える。 */
.voyage-bar{
  /* .wrap の実効幅（max-width 1120px − 左右padding）に合わせる。100vw ではなく 100% ＝
     固定要素の幅（＝縦スクロールバーを除いた表示幅）を基準にして .wrap と横位置を揃える */
  --vb-max-width:calc(min(var(--wrap), 100%) - var(--pad) * 2);
  --vb-bg:rgba(255,247,234,.9);      /* --paper #FFF7EA の半透明（.site-head と同じ作り） */
  --vb-border:rgba(18,51,63,.22);    /* --line より少し強い＝本文との境を出す */
  --vb-line:var(--teal);
  --vb-label:var(--ink-60);
  --vb-label-arrived:var(--coral);
  /* バー高＝原本44px→54px（2026-07-29FB「船が目立たないので大きく」。船46pxが収まる高さ） */
  --vb-height:54px;
  top:auto; bottom:0;
  border-bottom:0;
  /* 上辺はヘッダー下端（.site-head の border-bottom:3px solid var(--navy)）と同じ線に（2026-07-29FB） */
  border-top:3px solid var(--navy);
  /* 最下部でのふわっとフェード（vb-hide は site.js が付与・2026-07-29指示） */
  transition:opacity .5s ease, visibility .5s ease;
}
.voyage-bar.vb-hide{ opacity:0; visibility:hidden; }
@media (prefers-reduced-motion:reduce){ .voyage-bar{ transition:none; } }
.voyage-bar .vb-port{ font-weight:700; }
/* 船を34px（原本のSVGは24px）にしたぶん、出発直後・到着時に船の半身（17px）が
   ラベルへ重なるので、航路とラベルの間隔を原本の.7remから広げて逃がす */
.voyage-bar .vb-inner{ gap:1.6rem; }
/* 船はSVGではなくテーマのPNG。margin-left は幅の半分＝進捗位置に船の中心を合わせる。
   34px→46px（2026-07-29FB「目立たないのでもう少し大きく」。原画145x53＝高さ17px相当でバー54pxに収まる） */
.voyage-bar .vb-ship{ width:46px; margin-left:-23px; }
.voyage-bar .vb-ship img{ display:block; width:100%; height:auto; transition:transform .25s ease; }
/* 上スクロール中は船を左向きに反転（2026-07-29指示。vb-back は site.js が方向判定して付与） */
.voyage-bar.vb-back .vb-ship img{ transform:scaleX(-1); }
@media (prefers-reduced-motion:reduce){ .voyage-bar .vb-ship img{ transition:none; } }
/* バー（44px）がフッター最下部（コピーライト）に被らないよう下余白を積む */
/* 2026-07-29FB「コピーライトの下が大きすぎ」＝voyage-bar が最下部でフェードアウトする仕様に
   なったため、バー高54pxの逃げ確保は不要になった。純粋な下余白24pxのみ */
.site-foot{ padding-bottom:24px; }