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

/* ================= tokens ================= */
:root{
  --paper:#FFFDF5;       /* 紙白：地 */
  --teal:#00A6A6;
  --coral:#FF6B35;
  --mustard:#F7C548;
  --navy:#124E78;
  --lagoon:#4CC9F0;      /* オーシャングラデ 明 */
  --palm:#00C2A0;        /* オーシャングラデ 暗 */
  --ink:#123047;         /* 本文の墨（濃紺寄り） */
  --ink-60:rgba(18,48,71,.6);
  --line:rgba(18,78,120,.16);
  --sunset:linear-gradient(90deg,var(--coral) 0%,#ff8a2b 45%,var(--mustard) 100%);
  --ocean:linear-gradient(90deg,var(--lagoon) 0%,#1ec7c2 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);
  /* 垂直リズム（エディトリアル統一スケール） */
  --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; }
}

/* ================= 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; }
}

/* MV乗船券（案16準拠：写真下端に少し傾けて重ねる1枚もの＋消印スタンプ。
   左半券=回数／本券=題名・開催日・航路。暖色グラデは--coral基調に彩度を抑えて翻案） */
.mv-ticket{
  position:relative; z-index:6;
  max-width:760px; margin:-64px auto 0;
  display:flex; align-items:stretch;
  background-color:var(--paper);
  border:2px solid var(--navy); border-radius:10px;
  box-shadow:12px 12px 0 rgba(18,78,120,.24);
  transform:rotate(-2.2deg);
}
/* 地紋は無地（斜線ピンストライプは2026-07-22ユーザー指示で撤去） */
/* 左半券（暖色地・回数を大きく） */
.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%, #ff8a2b 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; }
  /* 詳細度(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; }
}

/* ================= 号数バー ================= */
.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); }  /* 淡い暖色（単色・区切りを明確化） */
.sec.fresh{ background-color:#EFF6EA; background-image:var(--noise); } /* 薄グリーン（音祭りとは用） */
.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） */
.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, var(--coral)); }
@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 の器） ================= */
.events .event-list{ display:grid; gap:var(--gap-md); }
.event{ background:var(--paper); 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); 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; }
/* スペックリスト（旅のしおり） */
.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(--palm); 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); }
.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(--palm); }
.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; } }

/* ================= アクセス（切符調ステップ） ================= */
.route{ border:4px solid var(--navy); border-radius:8px; overflow:hidden; box-shadow:8px 8px 0 rgba(18,78,120,.16); background:var(--paper); }
.route .hd{ background:var(--teal); color:#fff; padding:12px clamp(16px,3vw,26px); font-family:var(--arch); font-weight:800; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.route .hd span{ letter-spacing:.05em; }
.route .steps{ display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:8px; padding:clamp(18px,3vw,30px); }
.stp{
  position:relative;
  display:flex; flex-direction:column; justify-content:center; text-align:center;
  background:var(--paper); border:2.5px solid var(--navy); border-radius:6px;
  padding:9px 15px; min-width:0; box-shadow:3px 3px 0 rgba(18,78,120,.16);
}
.stp b{ font-family:var(--arch); font-weight:800; font-size:.75rem; letter-spacing:.05em; color:var(--coral); }
.stp .nm{ font-family:var(--mincho); font-weight:700; font-size:clamp(1rem,2.4vw,1.28rem); letter-spacing:.03em; color:var(--navy); }
.stp .via{ font-size:.74rem; color:var(--ink-60); font-weight:500; }
.stp.port{ background:#eafafa; }
.stp.goal{ background:var(--coral); border-color:var(--navy); }
.stp.goal .nm{ color:#fff; }
.stp.goal b,.stp.goal .via{ color:#fff; opacity:.92; }
.arw{ align-self:center; color:var(--coral); font-weight:900; font-size:1.3rem; }
/* 乗り物アイコン付き矢印（船=海区間／車=陸区間・アイコンは補助・チェブロン › は残す） */
.arw.arw-ic{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.arw .ch{ font-style:normal; line-height:1; }
.arw .rv-ic{ display:block; height:auto; }
.rv-ic.rv-fune{ width:42px; }
.rv-ic.rv-car{ width:26px; }
/* SPで各出発カード右下に表示する乗り物アイコン（PCは非表示） */
.stp-veh{ display:none; }
.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); }
@media (max-width:640px){
  .route .steps{ flex-direction:column; align-items:stretch; }
  .arw{ transform:rotate(90deg); align-self:center; padding-left:0; }
  /* SP縦積み時：矢印は中央・チェブロンだけ下向き（乗り物SVGはカード右下へ移すため矢印内は非表示） */
  .arw.arw-ic{ transform:none; flex-direction:row; align-items:center; gap:9px; align-self:center; padding-left:0; }
  .arw.arw-ic .ch{ display:inline-block; transform:rotate(90deg); }
  .arw.arw-ic .rv-ic{ display:none; }
  /* 乗り物アイコンを各レグの出発側カード右下に重ね置き（カード内テキストは短く被らないため
     余白は左右対称のまま＝padding追加なし） */
  .stp-veh{ display:block; position:absolute; right:8px; bottom:6px; height:auto; opacity:.95; }
  .stp-veh.sv-fune{ width:34px; }
  .stp-veh.sv-car{ width:24px; }
}

/* ================= 三線グラビア（額装写真） ================= */
.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); }
.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キャプション */
@media (max-width:840px){ .omoi-grid{ grid-template-columns:1fr; } .omoi-photo{ max-width:340px; } .omoi-photo .frame-photo img{ aspect-ratio:1/1; } }
/* 統合後の about 内サブブロック */
.omoi-block{ margin-top:var(--sub-gap); }
.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); text-transform:uppercase; }
/* 船浮音祭りとは：本文ブロック（左＝本文／右＝受賞バッジ） */
.about-textblock{ display:grid; grid-template-columns:minmax(0,var(--measure)) auto; gap:clamp(26px,4vw,56px); align-items:center; }
.about-intro{ max-width:var(--measure); }
/* 受賞スタンプ（消印・案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); }
@media (max-width:720px){
  .about-textblock{ grid-template-columns:1fr; gap:clamp(22px,5vw,30px); }
}
/* 写真オートスライド（disco-marquee方式） */
.photo-marquee{ margin:var(--flow) 0; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.photo-marquee .track{ display:flex; gap:clamp(12px,2vw,22px); width:max-content; animation:marquee 45s linear infinite; }
.photo-marquee:hover .track{ animation-play-state:paused; }
.photo-marquee img{ height:clamp(160px,32vw,208px); width:auto; flex:none; display:block;
  background:var(--paper); padding:7px 7px 20px;
  border:1px solid var(--line); border-radius:2px;
  box-shadow:4px 5px 12px rgba(18,48,71,.14); }
.photo-marquee .track img:nth-child(odd){ transform:rotate(-1.6deg); }
.photo-marquee .track img:nth-child(even){ transform:rotate(1.2deg); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* 「音祭りとは」導入部：PC(1000px以上)は左=写真1列のアーカイブプリント縦マーキー／右=本文＋受賞スタンプの2カラム（wellness-arao「取扱商品」様式）。
   写真は原寸が小さいため大判化せず、白フチのプリントを束ねて超低速で上へ流す（2周複製・CSSアニメのみでno-js動作）。SPは横マーキー(.photo-marquee)を維持。 */
.about-media{ display:none; }
@media (min-width:1000px){
  .photo-marquee{ display:none; }
  /* 2カラム時は見出しを本文側=右へ寄せる */
  #about .sec-ttl{ justify-content:flex-end; }
  .about-hero{
    display:grid; grid-template-columns:minmax(0,43%) 1fr;
    gap:clamp(34px,4vw,64px); align-items:start;
  }
  .about-media{
    display:block; position:relative;
    height:clamp(560px,72vh,760px); overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
  }
  .about-media .am-track{
    display:flex; flex-direction:column; align-items:center; gap:clamp(20px,2.4vw,32px);
    animation:am-scroll 56s linear infinite; will-change:transform;
  }
  .about-media:hover .am-track{ animation-play-state:paused; }
  /* アーカイブプリント：白フチ＋下余白＋薄影。原寸以上に拡大しない（小さな元画像をボケさせない） */
  .about-media .am-shot{
    width:max-content; max-width:300px; margin:0;
    background:var(--paper); padding:9px 9px 24px;
    border:1px solid var(--line); border-radius:2px;
    box-shadow:5px 7px 15px rgba(18,48,71,.16);
  }
  .about-media .am-shot img{ display:block; width:auto; height:auto; max-width:282px; border-radius:1px; }
  /* 交互に傾け、左右へ少しずらして「プリントの束」感を出す */
  .about-media .am-shot:nth-child(odd){ transform:rotate(-2.2deg) translateX(-12px); }
  .about-media .am-shot:nth-child(even){ transform:rotate(1.8deg) translateX(14px); }
  .about-media .am-shot:nth-child(3n){ transform:rotate(2.4deg) translateX(2px); }
  /* 右カラム：本文→受賞スタンプを縦積み（左の写真列と2カラム） */
  .about-hero .about-textblock{ display:block; }
  .about-hero .about-awards{ margin-top:clamp(28px,4vw,44px); justify-content:flex-start; }
}
@keyframes am-scroll{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@media (prefers-reduced-motion:reduce){
  .about-media .am-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; }
/* Archive もっと見る */
.archive-more{ margin-top:var(--gap-lg); text-align:center; }
/* これまで：JS時は4件目以降(.arc-extra)を初期非表示。展開(.is-expanded)で全件表示。no-js/JS無効時は常に全件表示。 */
/* 3段階表示：st-1=12件・st-2=全件（クラス無し=初期4件） */
.js .archive-grid:not(.st-1):not(.st-2) .arc-t2{ display:none; }
.js .archive-grid:not(.st-2) .arc-t3{ display:none; }
@media (prefers-reduced-motion:reduce){
  .photo-marquee{ overflow-x:auto; }
  .photo-marquee .track{ animation:none; }
}

/* ================= 過去回カード（otomatsuri_archive CPT の器） ================= */
.archive{ margin-top:clamp(46px,7vw,80px); }
.archive .lead-label{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(20px,3vw,32px); }
.archive .lead-label .en{ font-family:var(--arch); font-weight:800; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--palm); }
.archive .lead-label .jp{ font-family:var(--mincho); font-weight:700; font-size:1.1rem; color:var(--navy); letter-spacing:.04em; }
.archive .lead-label::after{ content:""; flex:1; height:2px; background:var(--line); }
.archive-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(168px,20vw,224px), 1fr)); gap:clamp(14px,2vw,20px); }
/* PCは横並び4枚固定（ユーザー指示 2026-07-22） */
@media (min-width:1000px){ .archive-grid{ grid-template-columns:repeat(4,1fr); } }
.arc-card{ display:flex; flex-direction:column; background:var(--paper); border:2px solid var(--navy); border-radius:8px; overflow:hidden; box-shadow:4px 4px 0 rgba(18,78,120,.10); }
.arc-photo{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#e6edf1; }
.arc-photo img{ width:100%; height:100%; object-fit:cover; }
.arc-noimg{ display:grid; place-items:center; background:repeating-linear-gradient(45deg,#e6ebef 0 10px,#dae0e5 10px 20px); }
.arc-noimg span{ font-family:var(--arch); font-weight:800; font-size:.75rem; letter-spacing:.08em; color:#8a97a3; }
.arc-body{ padding:10px; }
.arc-ttl{ font-family:var(--mincho); font-weight:900; font-size:.98rem; color:var(--navy); letter-spacing:.02em; }
.arc-date{ display:block; font-family:var(--arch); font-weight:800; font-size:.64rem; letter-spacing:.05em; line-height:1; color:var(--coral); margin:0 0 2px; } /* タイトル上・余白詰め */
.arc-date.arc-cancelled{ color:var(--ink-60, #6b7c88); }
.arc-cast{ font-size:.72rem; line-height:1.7; color:var(--navy); margin:0 0 6px; }
.arc-cast .arc-cast-lbl{ display:inline-block; margin-right:8px; padding:1px 8px; border:1px solid var(--navy); border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:.08em; vertical-align:1px; }
.arc-note{ font-size:.78rem; line-height:1.8; }

/* ================= 協賛（実名・全件フラット表示） ================= */
.sponsor-year{ font-family:var(--arch); font-weight:800; font-size:.78rem; letter-spacing:.12em; color:var(--navy); margin-bottom:6px; }
.sponsor-note{ font-size:.82rem; 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); }
.sp-card{ aspect-ratio:5/2; display:flex; align-items:center; justify-content:center; text-align:center; border:1px solid var(--line); border-radius:5px; background:var(--paper); padding:10px; }
.sp-card .nm{ font-weight:900; font-size:.9rem; color:var(--navy); line-height:1.3; }
/* 協賛募集CTA（切符/枠の意匠） */
.sponsor-cta{ position:relative; margin-top:var(--flow); display:flex; align-items:stretch; background:var(--paper); border:3px solid var(--navy); border-radius:8px; box-shadow:5px 5px 0 rgba(18,78,120,.14); }
.cta-stub{ background:var(--sunset); color:#fff; min-width:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border-right:4px dashed var(--paper); border-radius:4px 0 0 4px; text-align:center; }
.cta-stub .en{ font-family:var(--arch); font-weight:800; font-size:.75rem; 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:.82rem; 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); }
@media (max-width:600px){ .sponsor-cta{ flex-direction:column; } .cta-stub{ flex-direction:row; gap:12px; min-width:0; border-right:none; border-bottom:4px dashed var(--paper); border-radius:4px 4px 0 0; padding:12px; }
  .cta-btn{ display:block; width:max-content; margin-left:auto; margin-right:auto; } }

/* ================= よくあるご質問 FAQ（しおり枠アコーディオン） ================= */
.shiori{ border:4px solid var(--navy); border-radius:8px; overflow:hidden; box-shadow:8px 8px 0 rgba(18,78,120,.16); background:var(--paper); }
.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; }
.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; }
@media (max-width:680px){ .contact-band{ grid-template-columns:1fr; } .tel-box{ text-align:left; } }

/* ================= 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::before, #faq::before, #about::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;
}
/* 主要境界（音祭りとは／これまで）は背面にもう一層・同色薄め・横と高さをずらして奥行き */
#about::after, #history::after{
  content:""; position:absolute; top:-1px; left:-2%; width:104%;
  height:clamp(64px,10.5vw,138px);
  background-color:var(--wave-prev); opacity:.5;
  background-image:var(--noise);
  -webkit-mask:var(--wave-svg) left top / 100% 100% no-repeat;
  mask:var(--wave-svg) left top / 100% 100% no-repeat;
  pointer-events:none; z-index:-2;
}
/* 境界波を航く船：#access（道のり）の波稜線に沿って左→右へゆっくり航行。
   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; }
}
/* 道のり下側の境界波（#faq上端）：稜線の高い側（道のり寄り・x≈61〜71%）から3匹の魚が
   群れで弧を描いて跳ね、水面へ戻る。8秒周期のうち跳躍は約1.2秒＝余韻を長めに。
   3匹は位置・大きさ・delayを少しずつずらして「群れ」に見せる */
.wave-fish{ position:absolute; top:-15px; left:0; right:0;
  height:clamp(55px,9vw,120px); pointer-events:none; z-index:-1; }
.wf-fish{ position:absolute;
  width:clamp(28px,3.6vw,44px); 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(21px,2.7vw,33px); 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(24px,3vw,37px); animation-delay:-4s; }
.wave-fish.fr .wf-fish:nth-child(1){ left:61%; top:30%; width:clamp(21px,2.7vw,33px); 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(24px,3vw,37px); 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; }
  76%      { opacity:1; transform:translate(24px,0px) rotate(42deg); }
  78%      { opacity:0; transform:translate(30px,14px) rotate(52deg); }
  100%     { opacity:0; transform:translate(30px,14px) rotate(52deg); }
}
@media (prefers-reduced-motion:reduce){
  .wf-fish{ animation:none; opacity:0; }
}
/* 各境界の小さな生きもの・乗りもの：コンテナ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; }
/* #history上端（とは↓境界）：観客2組が波稜線に立ち、ゆっくり左右に揺れる */
.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; }
.wpe-1{ left:26%; top:82%; width:clamp(64px,8vw,110px); }
.wpe-2{ left:68%; top:39%; width:clamp(58px,7.5vw,100px); animation-duration:5.4s; animation-delay:-2.2s; }
@keyframes wpe-sway{
  from{ rotate:-1.5deg; }
  to  { rotate:1.5deg; }
}
@media (prefers-reduced-motion:reduce){
  .wpe{ animation:none; }
}
/* #access上端（船の境界）：カモメ2羽がその場でふわふわ上下に浮く */
.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上端：帰りの船（右→左・既存ws-boatを左右反転しゆっくり小さめ） */
.wsb-boat{ position:absolute; left:104%; top:56%; width:clamp(46px,6vw,78px); height:auto; opacity:.9;
  transform:translate(-50%,-78%); rotate:-2deg;
  animation:wsb-sail 46s linear infinite; }
@keyframes wsb-sail{
  0%   { left:104%;  top:56%; rotate:-2deg; }
  7%   { left:96.4%; top:46%; rotate:-3deg; }
  17%  { left:85.6%; top:38%; rotate:-1deg; }
  29%  { left:72.6%; top:37%; rotate:1deg; }
  39%  { left:61.8%; top:45%; rotate:6deg; }
  48%  { left:52.1%; top:62%; rotate:7deg; }
  61%  { left:38.1%; top:86%; rotate:2deg; }
  69%  { left:29.5%; top:84%; rotate:-1deg; }
  80%  { left:17.6%; top:79%; rotate:-3deg; }
  90%  { left:6.8%;  top:70%; rotate:-4deg; }
  100% { left:-4%;   top:60%; rotate:-2deg; }
}
@media (prefers-reduced-motion:reduce){
  .wsb-boat{ animation:none; left:36%; top:80%; }
}
/* 大胆な波の分だけ、波を持つセクションの上余白を確保（波が本文に被らないように） */
/* 波デバイダ持ちセクションは波の高さ分だけ上paddingを増やす（波が本文に被らない＆実効の呼吸は他セクションと揃える。基本余白拡大に合わせて微増のみ＝二重増しすぎない） */
/* 見出し上の実効余白＝波の高さ＋SP40px〜PC80px（2026-07-22指示） */
#access, #faq, #about, #history, #sponsors, #contact{
  padding-top:calc(clamp(55px,9vw,120px) + clamp(40px,5vw,80px)); }
#about, #history{
  padding-top:calc(clamp(64px,10.5vw,138px) + clamp(40px,5vw,80px)); }
/* 各境界の波の色＝直前セクションの背景色（上と地続きに見せる） */
#access  { --wave-prev:var(--paper); }
#faq     { --wave-prev:#EFF8F6; }
#about   { --wave-prev:var(--paper); }
#history { --wave-prev:#EFF6EA; } /* 直前=音祭りとは（薄グリーン） */
#sponsors{ --wave-prev:#EFF8F6; }
#contact { --wave-prev:#FBF4E7; }

/* 白ベタもこもこ雲：色付き地（ミント#EFF8F6／クリーム#FBF4E7）セクション上部・本文の外側（PC幅のみ）。
   白は紙白地では見えないため、faq(紙白)から history(ミント) へ配置替え。about/sponsors はクリーム地で維持。
   z-index:-1 で本文背面・クリック阻害なし。 */
#faq .wrap, #about .wrap, #sponsors .wrap, #access .wrap, #history .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の余白に大小散らす・静的装飾） =================
   雲/音符と同じ層構造（z-index:-1・pointer-events:none・PC幅min-width:1000pxのみ・SP非表示）。
   提供素材 bg_wave.png（グレー地から波紋を透過抽出・単色化した軽量版）を全マーク共通で使用。
   淡色のためミント地では乗算で馴染ませる。 */
.wv{ display:none; }
@media (min-width:1000px){
  .wv{
    display:block; position:absolute; z-index:-1; pointer-events:none; opacity:.9;
    background-image:url("img/bg_wave.png"); mix-blend-mode:multiply;
    background-repeat:no-repeat; background-position:center; background-size:contain;
  }
  /* 半分サイズ×10個：左右余白の上下にジグザグで増量（2026-07-22ユーザー指示） */
  .wv.w1{ left:-118px; top:64px;  width:48px; height:12px; }
  .wv.w2{ right:-96px; top:196px; width:35px; height:9px; }
  .wv.w3{ left:-92px;  top:372px; width:37px; height:10px; }
  .wv.w4{ right:-126px;top:452px; width:52px; height:14px; }
  .wv.w5{ left:-108px; top:600px; width:42px; height:11px; }
  .wv.w6{ right:-84px; top:88px;  width:44px; height:11px; }
  .wv.w7{ left:-64px;  top:236px; width:38px; height:10px; }
  .wv.w8{ right:-112px;top:330px; width:50px; height:13px; }
  .wv.w9{ left:-124px; top:492px; width:36px; height:9px; }
  .wv.w10{right:-70px; top:560px; width:46px; height:12px; }
}

/* ================= 浮遊する音符（明るいセクションの左右余白に散らす・純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=音祭りとは（厚め・雲は左上/右上なので中〜下段へ） */
  .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; }                     /* #about */
  .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; }
}

/* ================= 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; }
}