/* =========================================================
   くめくめEXPO2026 — style.css  (v2 / WORLD FESTIVAL)
   原画（assets/img/artwork.jpg）からサンプリングした色だけで構成。
   ダーク基調をやめ、温かいオフホワイト地＋青空／緑／黄土のバンド構成。
   アニメーションは GSAP による progressive enhancement。
   ここで opacity:0 の初期値は置かない（GSAP 不在でも読める）。
   ========================================================= */

:root{
  /* --- 原画からサンプリングした実測値 ---
     空 #3455ad / 濃い空 #304ea8 / 木々 #236036 #337244
     建物クリーム #c29d68 #cebb6e / 黄土 #dc9938 / 朱 #c77630 */
  --paper:#f7f1e3;      /* ページ地（温かいオフホワイト） */
  --sand:#efdcaa;       /* 砂バンド */
  --sand-2:#e9c98a;     /* 砂・濃い */
  --cream:#f7f1e3;      /* 濃色地の上の文字 */
  --ink:#14213d;        /* 文字の基準色＝黒ではなく濃紺 */
  --blue:#1d4fa6;
  --blue-lt:#2a6bc4;
  --sky:#3455ad;        /* 原画の空そのもの */
  --green:#3f8f3f;
  --green-lt:#79b34f;
  --mustard:#e0a53a;
  --ochre:#d9a955;
  --red:#d9532b;        /* 踊り手の服の朱 */
  --magenta:#b7457c;    /* 同・赤紫 */

  /* セクションごとに差し替えるローカル変数（バンド配色の要） */
  --bg:var(--paper);
  --fg:var(--ink);
  --rule:rgba(20,33,61,.18);
  --rule-strong:rgba(20,33,61,.34);

  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --displayja:"Dela Gothic One","Hiragino Sans","Yu Gothic",sans-serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;

  --pad:clamp(20px,5vw,80px);
  --maxw:1560px;
  --header-h:64px;
}

*,*::before,*::after{box-sizing:border-box;}

html,body{
  margin:0;padding:0;
  /* overflow-x:hidden ではなく clip。hidden は body をスクロールコンテナ化して
     ScrollTrigger の pin を壊すことがあるため。clip なら横スクロールだけ止まる。 */
  overflow-x:clip;
  max-width:100%;
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-h);
  scrollbar-gutter:stable;         /* ドロワー開閉で幅が揺れないように */
  background:var(--paper);
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
/* スクロールロックは html にも当てる。html が overflow-x:clip を持つと
   body の overflow はビューポートに伝播しなくなり、body だけでは効かない。 */
html.is-locked,body.is-locked{overflow:hidden;}

img{max-width:100%;display:block;}
a{color:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}

::selection{background:var(--mustard);color:var(--ink);}

/* ---------- グレイン ----------
   明るい地なので multiply で紙の砂目として効かせる（暗くしすぎない）。 */
.grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

/* ---------- カスタムカーソル ----------
   明るい地では mix-blend-mode:difference が汚く反転するので使わない。 */
.cursor-dot,.cursor-ring{display:none;}
@media (pointer:fine){
  .cursor-dot,.cursor-ring{
    display:block;position:fixed;top:0;left:0;z-index:9500;
    pointer-events:none;border-radius:50%;will-change:transform;
    /* JS が最初の mousemove で transform を上書きするまで画面外に逃がす */
    transform:translate(-200px,-200px);
  }
  .cursor-dot{
    width:8px;height:8px;background:var(--mustard);margin:-4px 0 0 -4px;
    box-shadow:0 0 0 1px rgba(20,33,61,.35);
  }
  .cursor-ring{
    width:34px;height:34px;margin:-17px 0 0 -17px;
    border:1.5px solid rgba(20,33,61,.55);
    transition:width .25s,height .25s,margin .25s,border-color .25s,background .25s;
  }
  body.cursor-hot .cursor-ring{
    width:64px;height:64px;margin:-32px 0 0 -32px;
    border-color:var(--mustard);background:rgba(224,165,58,.12);
  }
  body.has-cursor a,body.has-cursor button,body.has-cursor .card{cursor:none;}
  body.has-cursor{cursor:none;}
}

/* ---------- ヘッダー ----------
   青空の上でも白地の上でも読めるよう、常にクリームの帯にする（ポスターの天） */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:8000;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(14px,3vw,32px);
  background:rgba(247,241,227,.9);
  border-bottom:1px solid rgba(20,33,61,.14);
  backdrop-filter:blur(6px);
  color:var(--ink);
}
.logo{
  font-family:var(--display);letter-spacing:.06em;
  font-size:clamp(13px,1.5vw,17px);text-decoration:none;
  color:var(--ink);white-space:nowrap;
}
.logo span{color:var(--red);margin:0 .25em;}
.nav-desktop{display:flex;gap:clamp(12px,2vw,28px);}
.nav-desktop a{
  font-family:var(--display);font-size:13px;letter-spacing:.1em;
  text-decoration:none;color:var(--blue);transition:color .2s,transform .2s;
}
.nav-desktop a:hover{color:var(--red);transform:translateY(-1px);}
.burger{
  display:none;width:44px;height:44px;background:none;border:0;
  padding:10px;position:relative;
}
.burger span{
  display:block;height:2px;background:var(--ink);margin:6px 0;
  transition:transform .3s,opacity .3s;
}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg);}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg);}
@media (max-width:860px){
  .nav-desktop{display:none;}
  .burger{display:block;}
}

.mobile-menu{
  position:fixed;inset:0;z-index:7900;background:var(--paper);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
}
.mobile-menu[hidden]{display:none;}
.mobile-menu nav{display:flex;flex-direction:column;gap:clamp(6px,2vh,18px);padding:24px;}
.mobile-menu a{
  font-family:var(--display);font-size:clamp(28px,9vw,52px);
  letter-spacing:.03em;text-decoration:none;line-height:1.1;
  display:flex;align-items:baseline;gap:14px;color:var(--blue);
}
.mobile-menu a i{
  font-family:var(--body);font-style:normal;font-size:12px;
  color:var(--red);letter-spacing:.2em;
}
.mobile-menu a:active{color:var(--red);}

/* =========================================================
   HERO — 原画を「切らずに」見せる
   ウィンドウの縦横比で原画を選ぶ：横長なら横長版、縦長なら縦長版。
   <picture> の media と下のメディアクエリは必ず同じ条件にすること。
   ========================================================= */
/* 既定は「縦長のウィンドウ」向け＝縦長の原画をそのまま流し込む。
   横長のウィンドウだけを下の @media (min-aspect-ratio:5/4) で上書きする。
   幅ではなく縦横比で分けるのが肝。1270x1570 のような縦長デスクトップは
   幅は広いが空も群衆も入らないので、横長の原画を敷いてはいけない。 */
.hero{
  position:relative;overflow:hidden;   /* はみ出しは何があってもここで止める */
  background:var(--sky);   /* 画像が載る前・落ちた時の下地は原画の空の色 */
}
.hero-media{position:relative;z-index:1;}
.hero-media picture{display:contents;}
.hero-media img{
  display:block;width:100%;height:auto;
  /* 背の高いウィンドウで絵だけで画面を埋め尽くさないよう頭打ちにする。
     max-height に達した時だけ cover が効いて上下がわずかに詰まる。 */
  max-height:72svh;
  object-fit:cover;object-position:center 42%;
}
/* 空の上に乗る文字を読みやすくする、ごく薄い青のヴェール */
.hero-veil{
  position:absolute;inset:0;z-index:2;
  /* 見た目だけの層。縦長レイアウトでは .hero-foot が static になり
     z-index が効かないため、これが無いと日付札のボタンを覆って押せなくなる。 */
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(29,79,166,.34) 0%, rgba(29,79,166,.10) 26%, rgba(29,79,166,0) 42%);
}
/* --- 上：空に置くタイトル --- */
.hero-inner{
  position:absolute;z-index:3;left:0;right:0;
  top:var(--header-h);
  display:grid;justify-items:center;
  text-align:center;padding:clamp(6px,2vh,26px) var(--pad) 0;
}
/* 読み上げ用の h1（見た目には出さない） */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.hero-eyebrow{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;
  font-family:var(--display);letter-spacing:.22em;font-size:clamp(10px,1.3vw,13px);
  color:var(--mustard);margin:0 0 8px;
  text-shadow:0 2px 12px rgba(20,33,61,.5);
}
.hero-eyebrow .dot{color:var(--cream);opacity:.65;}
/* ---------- 手描きロゴ ----------
   原本 3228x2639 での各グリフの位置をそのまま % に置き換えて再現する。
   幅だけ指定し高さは auto＝元画像の比率のまま歪まない。
   GSAP が無くてもこの CSS だけで正しい組みになる（opacity:0 は置かない）。 */
.hero-logo{
  position:relative;
  /* px 固定は使わない。縦長＝幅基準、横長＝幅と高さの小さい方。
     中央寄せは margin-inline:auto で行う（left:50%+translateX(-50%) と
     結果は同じだが、幅が画面を超えた時にはみ出さない分こちらが安全）。 */
  width:min(84vw, 54svh);
  max-width:100%;
  aspect-ratio:3228 / 2639;
  container-type:inline-size;
  filter:drop-shadow(0 12px 24px rgba(20,33,61,.25));
  margin-inline:auto;
}
.hero-logo .glyph{
  position:absolute;height:auto;
  will-change:transform;
}
.g-ku1 { left:0;      top:20.7%; width:30.6%; z-index:1; }
.g-ku2 { left:26.6%;  top:56.8%; width:29.4%; z-index:2; }
.g-me1 { left:26.8%;  top:0;     width:42.4%; z-index:3; }
.g-me2 { left:54.5%;  top:32.2%; width:45.5%; z-index:4; }
.g-expo{ left:52.4%;  top:91.4%; width:41.5%; z-index:5; }
/* EXPO の真下に置く「2026」 */
.hero-year{
  position:absolute;left:56%;top:106%;z-index:5;
  font-family:var(--display);color:var(--cream);
  line-height:.85;letter-spacing:.02em;
  font-size:clamp(20px,4.6vw,58px);          /* cqw 非対応ブラウザ向け */
  font-size:10.5cqw;
  text-shadow:0 4px 18px rgba(20,33,61,.4);
}

/* --- 下：地面の上に置く日付とボタン（クリームの札） --- */
.hero-foot{
  position:static;z-index:3;
  display:flex;justify-content:center;
  padding:18px var(--pad) 22px;background:var(--paper);
}
.hero-plate{
  background:rgba(247,241,227,.94);
  border:1.5px solid var(--ink);
  box-shadow:6px 7px 0 rgba(20,33,61,.22);
  padding:clamp(12px,2vw,20px) clamp(16px,3vw,34px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px clamp(14px,2.4vw,30px);
  max-width:100%;
  transform:none;
}
.hero-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:0;}
.hero-date{
  margin:0;font-family:var(--display);color:var(--ink);
  font-size:clamp(20px,3.6vw,42px);letter-spacing:.02em;line-height:1;
}
.hero-date em{font-style:normal;color:var(--red);}
.hero-place{
  margin:0;font-size:clamp(11px,1.5vw,14px);letter-spacing:.2em;
  font-weight:700;color:var(--blue);
}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;}

/* --- 横長のウィンドウだけ：横長の原画を全幅で敷く ---
   ここは .hero-foot / .hero-plate より後ろに置くこと。
   メディアクエリは詳細度を上げないので、前に置くと後続の規則に負ける。 */
@media (min-aspect-ratio:5/4){
  .hero{min-height:100svh;}
  .hero-media{position:absolute;inset:0;}
  .hero-media img{
    position:absolute;inset:0;
    width:100%;height:100%;max-height:none;
    /* 下（群衆と地面）を必ず残す */
    object-fit:cover;object-position:center bottom;
  }
  /* 空が抜けているのは画面中央あたりなので、ロゴは中央に置く。
     高さでも頭打ちにして、平べったいウィンドウでも絵から溢れさせない。 */
  .hero-logo{width:clamp(240px, min(46vw, 70svh), 900px);}
  .hero-inner{align-content:start;padding-top:clamp(4px,1.2vh,16px);}
  /* 日付の札だけ左に寄せて、群衆の中心を隠さない */
  .hero-foot{
    position:absolute;left:0;right:0;bottom:clamp(18px,5vh,56px);
    justify-content:flex-start;padding:0 var(--pad);background:none;
  }
  .hero-plate{transform:rotate(-.6deg);}
}

/* ---------- ボタン ---------- */
.btn{
  display:inline-block;text-decoration:none;
  font-family:var(--display);letter-spacing:.14em;
  font-size:clamp(13px,1.6vw,16px);
  padding:13px 28px;border:1.5px solid currentColor;
  transition:background .25s,color .25s,transform .25s,border-color .25s,box-shadow .25s;
}
.btn-fill{
  background:var(--mustard);border-color:var(--ink);color:var(--ink);
  box-shadow:4px 4px 0 rgba(20,33,61,.28);
}
.btn-fill:hover{background:var(--red);color:var(--cream);transform:translateY(-3px);box-shadow:4px 7px 0 rgba(20,33,61,.28);}
.btn-ghost{color:var(--cream);border-color:var(--cream);}
.btn-ghost:hover{background:var(--cream);color:var(--ink);transform:translateY(-3px);}
/* クリームの札の中では白抜きボタンは読めないので濃紺に */
.hero-plate .btn-ghost{color:var(--blue);border-color:var(--blue);}
.hero-plate .btn-ghost:hover{background:var(--blue);color:var(--cream);}
.btn-disabled{
  border-color:var(--rule-strong);color:var(--fg);opacity:.55;
  background:transparent;cursor:not-allowed;box-shadow:none;
}

/* 回転バッジ */
.badge-spin{
  position:absolute;z-index:4;
  right:clamp(12px,4vw,64px);top:calc(var(--header-h) + clamp(14px,4vh,48px));
  width:clamp(86px,11vw,150px);aspect-ratio:1;
  display:grid;place-items:center;
}
.badge-spin svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 16s linear infinite;}
.badge-spin text{
  font-family:var(--display);font-size:17px;letter-spacing:.06em;
  fill:var(--cream);
}
.badge-core{
  font-family:var(--display);font-size:clamp(15px,2.2vw,26px);
  color:var(--mustard);line-height:1;
}
.badge-core i{font-style:normal;opacity:.6;}
@keyframes spin{to{transform:rotate(360deg);}}
/* スマホではロゴと必ずぶつかるので出さない（装飾・aria-hidden） */
@media (max-width:899px),(max-aspect-ratio:5/4){ .badge-spin{display:none;} }

.scroll-hint{
  position:absolute;bottom:16px;left:clamp(10px,2.5vw,34px);z-index:3;
}
@media (max-width:780px){ .scroll-hint{display:none;} }
.scroll-hint span{
  font-family:var(--display);font-size:10px;letter-spacing:.35em;
  color:var(--ink);opacity:.55;writing-mode:vertical-rl;
}

/* ---------- マーキー ---------- */
.marquee{
  overflow:hidden;white-space:nowrap;
  padding:clamp(8px,1.4vw,16px) 0;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
}
/* マスタード帯（濃紺文字） */
.marquee-fill{background:var(--mustard);}
/* 緑帯（クリーム文字） */
.marquee-outline{background:var(--green);}
.marquee-track{display:inline-flex;will-change:transform;animation:marq 32s linear infinite;}
.marquee-track.marquee-reverse{animation-direction:reverse;}
.marquee-track > span{
  font-family:var(--display);
  font-size:clamp(22px,4.6vw,64px);letter-spacing:.03em;
  padding-right:.5em;flex:0 0 auto;
}
.marquee-fill .marquee-track > span{color:var(--ink);}
.marquee-outline .marquee-track > span{color:var(--cream);}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* =========================================================
   セクション共通 — 地色はバンドで切り替える
   背景を全幅にしたいので max-width は padding 側で作る。
   ========================================================= */
.section{
  position:relative;
  background:var(--bg);color:var(--fg);
  padding-block:clamp(64px,11vh,140px);
  padding-inline:max(var(--pad),calc((100% - var(--maxw)) / 2));
}
/* バンド配色（HTML を触らずに id で割り当てる） */
#info,#timetable,#history{--bg:var(--sand);}
#ticket{--bg:var(--blue);--fg:var(--cream);--rule:rgba(247,241,227,.3);--rule-strong:rgba(247,241,227,.55);}
#food{--bg:var(--green);--fg:var(--cream);--rule:rgba(247,241,227,.3);--rule-strong:rgba(247,241,227,.55);}

.tape{
  display:inline-block;margin:0 0 14px;
  background:var(--mustard);color:var(--ink);
  font-family:var(--display);font-size:12px;letter-spacing:.22em;
  padding:5px 14px;transform:rotate(-2.2deg);
  box-shadow:2px 2px 0 rgba(20,33,61,.2);
}
.sec-title{
  margin:0 0 clamp(20px,4vh,48px);
  font-family:var(--display);line-height:.92;
  font-size:clamp(42px,10vw,150px);letter-spacing:.01em;
  word-break:break-word;
}
.sec-title .fill{color:var(--fg);}
.sec-title .outline{color:transparent;-webkit-text-stroke:1.5px var(--fg);}
/* オフホワイト／砂の上では見出しは濃紺、濃色バンドではクリーム */
.section:not(#ticket):not(#food) .sec-title .fill{color:var(--blue);}
@supports not ((-webkit-text-stroke:1px #fff)){
  .sec-title .outline{color:var(--fg);opacity:.4;}
}
.sec-lead{margin:-24px 0 32px;letter-spacing:.12em;opacity:.72;font-size:14px;}

/* スタンプ（判子） */
.stamp{
  display:inline-grid;place-items:center;flex:0 0 auto;
  width:clamp(58px,7vw,86px);aspect-ratio:1;border-radius:50%;
  font-family:var(--display);font-size:clamp(11px,1.4vw,15px);
  letter-spacing:.04em;transform:rotate(-8deg);text-align:center;line-height:1;
  box-shadow:0 0 0 2px rgba(247,241,227,.55) inset;
}
.stamp-blue{background:var(--blue);color:var(--cream);}
.stamp-green{background:var(--green);color:var(--cream);}
.stamp-ochre{background:var(--mustard);color:var(--ink);}

/* ---------- ABOUT ---------- */
.about-quotes{display:flex;flex-direction:column;gap:clamp(6px,1.5vh,16px);margin-bottom:clamp(28px,5vh,56px);}
.about-quotes p{
  margin:0;font-family:var(--displayja);
  font-size:clamp(20px,4.4vw,62px);line-height:1.25;letter-spacing:-.01em;
  color:var(--ink);
}
.about-quotes p:nth-child(2){color:var(--red);padding-left:clamp(0px,4vw,90px);}
.about-body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(16px,3vw,54px);border-top:2px solid var(--rule);padding-top:clamp(20px,3vh,40px);
}
.about-heading{
  margin:0;font-family:var(--display);
  font-size:clamp(22px,3vw,46px);letter-spacing:.02em;color:var(--green);line-height:1.1;
}
.about-text{margin:0;font-size:clamp(14px,1.15vw,17px);line-height:2.1;opacity:.92;}
@media (max-width:780px){ .about-body{grid-template-columns:1fr;} }

/* ---------- INFO ---------- */
.area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,2vw,28px);}
.area-card{
  position:relative;border:2px solid var(--ink);
  padding:clamp(22px,3vw,44px);overflow:hidden;color:var(--cream);
  box-shadow:7px 8px 0 rgba(20,33,61,.18);
}
/* PARK＝緑、MAIN＝青のカード */
.area-card[data-area="park"]{background:var(--green);}
.area-card[data-area="main"]{background:var(--blue);}
.area-card .area-en{
  margin:0;font-family:var(--display);
  font-size:clamp(24px,3.2vw,46px);line-height:1.05;letter-spacing:.01em;
}
.area-card .area-ja{margin:4px 0 18px;font-size:13px;letter-spacing:.14em;opacity:.8;}
/* FREE / ¥3,000 は大きなマスタードの判子 */
.area-price{
  display:inline-block;font-family:var(--display);
  font-size:clamp(26px,3.6vw,48px);line-height:1;
  padding:10px 20px;margin-bottom:18px;
  background:var(--mustard);color:var(--ink);
  transform:rotate(-2.5deg);box-shadow:3px 3px 0 rgba(20,33,61,.3);
}
.area-rows{display:grid;gap:8px;font-size:14px;}
.area-rows div{display:grid;grid-template-columns:78px 1fr;gap:10px;border-bottom:1px dashed rgba(247,241,227,.4);padding-bottom:8px;}
.area-rows dt,.area-rows b{font-family:var(--display);letter-spacing:.12em;font-size:11px;color:var(--sand-2);align-self:center;}
.area-note{margin:16px 0 0;font-size:13px;opacity:.85;}
.rain-note{margin:22px 0 0;font-size:14px;letter-spacing:.06em;color:var(--red);font-weight:700;}

/* ---------- LINEUP ---------- */
.sub-head{
  display:flex;align-items:center;gap:clamp(10px,2vw,22px);
  margin:clamp(38px,6vh,72px) 0 clamp(16px,2.6vh,30px);
  border-top:2px solid var(--rule);padding-top:clamp(16px,2.6vh,30px);
}
.sub-head h3{
  margin:0;font-family:var(--display);color:var(--blue);
  font-size:clamp(24px,4.6vw,68px);line-height:1;letter-spacing:.01em;
}
.cat-head{
  margin:clamp(30px,5vh,54px) 0 12px;
  font-family:var(--display);letter-spacing:.24em;
  font-size:clamp(14px,1.8vw,20px);color:var(--red);
}

/* 横スクロール帯（デスクトップ） */
.strip-wrap{overflow:hidden;max-width:100%;}
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(12px,1.6vw,22px);}
@media (min-width:900px){
  .strip-wrap.is-pinned .strip{
    display:flex;flex-wrap:nowrap;gap:28px;width:max-content;will-change:transform;
  }
  .strip-wrap.is-pinned .strip .card{width:clamp(300px,26vw,420px);flex:0 0 auto;}
}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(12px,1.6vw,22px);}
/* スマホは1列だと縦に伸びすぎるので2列に */
@media (max-width:700px){
  .card-grid,.strip{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- アーティストカード ----------
   写真はフルカラーのまま（グレースケールにしない）。
   クリームの細い額装＋砂色の柔らかい影で、貼った写真のように。 */
.card{min-width:0;
  position:relative;background:var(--cream);
  border:1px solid rgba(20,33,61,.22);
  padding:8px;overflow:hidden;text-align:left;color:var(--ink);font:inherit;
  display:block;width:100%;
  box-shadow:5px 6px 0 rgba(217,169,85,.42);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;
}
button.card{-webkit-appearance:none;appearance:none;cursor:pointer;}
.card:hover,.card:focus-visible{
  transform:translateY(-6px) rotate(1deg);
  border-color:var(--mustard);
  box-shadow:7px 10px 0 rgba(224,165,58,.6);
}
.card-media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sand);}
.card-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.card:hover .card-media img,.card:focus-visible .card-media img{transform:scale(1.05);}

.card-noimg{
  aspect-ratio:3/4;display:grid;align-content:center;gap:8px;
  padding:22px;color:var(--ink);
  background:
    repeating-linear-gradient(135deg,rgba(29,79,166,.10) 0 2px,transparent 2px 9px),
    var(--sand);
}
.card-noimg .big{
  font-family:var(--displayja);font-size:clamp(16px,1.7vw,24px);
  line-height:1.25;overflow-wrap:anywhere;
}
.card-body{padding:12px 8px 8px;display:grid;gap:5px;}
.card-name{font-family:var(--displayja);font-size:clamp(13px,1.05vw,17px);line-height:1.35;word-break:keep-all;overflow-wrap:anywhere;min-width:0;}
.card-suffix{font-size:11px;opacity:.65;letter-spacing:.08em;}
.card-cat{font-family:var(--display);font-size:10px;letter-spacing:.2em;color:var(--blue);}
/* 「from ◯◯」は朱色の判子風 */
.from-badge{
  position:absolute;top:16px;left:16px;z-index:2;
  background:var(--red);color:var(--cream);
  font-family:var(--display);font-size:11px;letter-spacing:.1em;
  padding:3px 9px;transform:rotate(-3deg);
  box-shadow:0 0 0 1.5px rgba(247,241,227,.6) inset;
}
.card-more{
  position:absolute;right:16px;bottom:16px;
  font-family:var(--display);font-size:10px;letter-spacing:.18em;
  color:var(--ink);background:var(--mustard);padding:3px 8px;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;
}
.card:hover .card-more,.card:focus-visible .card-more{opacity:1;transform:none;}

/* タイポグラフィのみのリスト（DANCE / MC） */
.type-list{border-top:2px solid var(--rule);}
.type-list li{
  border-bottom:1px solid var(--rule);
  padding:clamp(12px,2vh,22px) 0;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  transition:padding-left .3s ease,color .3s ease;
}
.type-list li:hover{padding-left:12px;color:var(--red);}
.type-list .nm{font-family:var(--displayja);font-size:clamp(20px,3.4vw,46px);line-height:1.1;}
.type-list .sfx{font-size:11px;letter-spacing:.14em;opacity:.6;}

/* ---------- TIMETABLE（砂の上に濃紺の白抜き） ---------- */
.coming{
  position:relative;border:2px solid var(--ink);overflow:hidden;
  padding:clamp(40px,9vh,110px) clamp(16px,4vw,40px);text-align:center;
  background:rgba(247,241,227,.5);
}
.coming .big{
  font-family:var(--display);
  font-size:clamp(30px,9vw,124px);line-height:1;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:2px var(--blue);
  word-break:break-word;
}
@supports not ((-webkit-text-stroke:1px #fff)){ .coming .big{color:var(--blue);opacity:.6;} }
.coming p{margin:16px 0 0;font-size:14px;opacity:.75;letter-spacing:.1em;}
.scanline{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--mustard),transparent);
  opacity:.85;animation:scan 4.5s linear infinite;
}
@keyframes scan{0%{top:-2px;}100%{top:100%;}}
.tt-area{margin-top:clamp(24px,4vh,44px);}
.tt-area h3{font-family:var(--display);font-size:clamp(18px,2.4vw,30px);margin:0 0 10px;letter-spacing:.06em;color:var(--blue);}
.tt-list li{display:grid;grid-template-columns:100px 1fr;gap:14px;border-bottom:1px solid var(--rule);padding:12px 0;}
.tt-list .t{font-family:var(--display);color:var(--red);letter-spacing:.08em;}

/* ---------- TICKET（濃紺のブロック） ---------- */
.ticket-block{
  border:2px solid rgba(247,241,227,.5);
  background:rgba(247,241,227,.06);
  padding:clamp(26px,5vw,64px);
  display:grid;gap:clamp(12px,2vh,22px);justify-items:start;
}
.ticket-label{font-family:var(--display);letter-spacing:.22em;font-size:13px;color:var(--mustard);margin:0;}
.ticket-price{
  margin:0;font-family:var(--display);line-height:.9;
  font-size:clamp(56px,15vw,190px);letter-spacing:-.01em;color:var(--cream);
}
.ticket-note{margin:0;font-size:14px;opacity:.85;max-width:60ch;}
.ticket-free{
  margin:0;font-size:14px;
  border-left:4px solid var(--green-lt);padding-left:12px;
}
#ticket .btn-fill{border-color:var(--mustard);box-shadow:4px 4px 0 rgba(20,33,61,.5);}

/* ---------- FOOD（緑のバンド） ---------- */
.food-block{display:grid;gap:18px;justify-items:start;}
.food-block p{margin:0;max-width:64ch;}
.food-block .lead{font-size:clamp(15px,1.6vw,20px);}
.food-block .recruit{font-size:14px;opacity:.9;}

/* ---------- ACCESS ---------- */
.access-map{
  border:2px solid var(--ink);overflow:hidden;
  /* width:100% は必須。aspect-ratio と min-height だけだと
     高さが確定した扱いになり、幅が高さ×16/9 に膨らんで横にはみ出す。 */
  width:100%;aspect-ratio:16/9;background:var(--sand);
}
@media (max-width:640px){ .access-map{aspect-ratio:4/5;} }
/* 地図はそのままの色で（暗転フィルタをかけない） */
.access-map iframe{width:100%;height:100%;border:0;}
.access-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(14px,2vw,28px);margin-top:clamp(18px,3vh,34px);
}
.access-col h3{margin:0 0 8px;font-family:var(--display);letter-spacing:.14em;font-size:14px;color:var(--red);}
.access-col p{margin:0 0 6px;font-size:14px;}
.access-row{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;border-bottom:1px dashed var(--rule);padding:10px 0;}
.access-row .st{font-family:var(--displayja);font-size:clamp(16px,2vw,24px);}
.access-row .ln{font-size:12px;opacity:.75;}
.access-row .wk{font-family:var(--display);color:var(--blue);letter-spacing:.08em;}

/* ---------- INSTAGRAM ---------- */
.insta-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,18px);}
@media (max-width:900px){ .insta-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.insta-cell{
  position:relative;aspect-ratio:1/1.25;overflow:hidden;
  border:1px solid var(--rule);background:#fff;
}
.insta-cell iframe{width:100%;height:100%;border:0;display:block;}
.center-cta{margin-top:clamp(20px,4vh,40px);display:flex;gap:12px;flex-wrap:wrap;}
/* 明るい地の上では ghost ボタンは濃紺に */
.section:not(#ticket):not(#food) .btn-ghost{color:var(--blue);border-color:var(--blue);}
.section:not(#ticket):not(#food) .btn-ghost:hover{background:var(--blue);color:var(--cream);}

/* ---------- ARCHIVE ---------- */
.yt-featured{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(12px,1.6vw,22px);}
.yt-lite{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sand);
  border:2px solid var(--ink);cursor:pointer;padding:0;width:100%;display:block;
  box-shadow:4px 5px 0 rgba(217,169,85,.45);
}
.yt-lite img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.yt-lite:hover img{transform:scale(1.04);}
.yt-lite iframe{width:100%;height:100%;border:0;display:block;}
.yt-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;}
.yt-play span{
  width:64px;height:64px;border-radius:50%;background:var(--red);
  display:grid;place-items:center;color:var(--cream);font-size:20px;
  box-shadow:0 6px 26px rgba(20,33,61,.45);
}
.yt-cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;text-align:left;
  background:linear-gradient(0deg,rgba(20,33,61,.88),transparent);
  color:var(--cream);font-size:12px;line-height:1.5;pointer-events:none;
}
.yt-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:clamp(10px,1.2vw,16px);margin-top:clamp(16px,2.6vh,28px);
}
.yt-card{
  display:block;text-decoration:none;border:1px solid rgba(20,33,61,.22);
  background:var(--cream);transition:transform .3s,box-shadow .3s;
}
.yt-card:hover{transform:translateY(-4px);box-shadow:4px 6px 0 rgba(224,165,58,.5);}
.yt-card img{aspect-ratio:16/9;object-fit:cover;width:100%;}
.yt-card span{display:block;padding:9px 10px 12px;font-size:11.5px;line-height:1.5;opacity:.9;}

/* ---------- HISTORY（砂の上に青の白抜き年号） ---------- */
.timeline{border-top:2px solid var(--rule);}
.timeline li{
  display:grid;grid-template-columns:minmax(120px,.9fr) minmax(0,3fr);
  gap:clamp(12px,3vw,44px);
  border-bottom:1px solid var(--rule);padding:clamp(18px,3.4vh,44px) 0;
}
.timeline .yr{
  font-family:var(--display);line-height:.9;
  font-size:clamp(38px,7vw,110px);
  color:transparent;-webkit-text-stroke:2px var(--blue);
}
@supports not ((-webkit-text-stroke:1px #fff)){ .timeline .yr{color:var(--blue);opacity:.6;} }
.timeline h3{margin:0 0 6px;font-family:var(--displayja);font-size:clamp(15px,1.7vw,22px);line-height:1.4;}
.timeline p{margin:0;font-size:14px;opacity:.85;line-height:1.9;}
@media (max-width:640px){ .timeline li{grid-template-columns:1fr;gap:6px;} }

/* ---------- FOOTER（濃紺地・クリーム文字） ---------- */
.site-footer{
  background:var(--ink);color:var(--cream);
  padding-block:clamp(46px,8vh,96px) clamp(30px,5vh,60px);
  padding-inline:max(var(--pad),calc((100% - var(--maxw)) / 2));
}
.footer-mark{line-height:.9;margin-bottom:clamp(22px,4vh,44px);}
.fm-kume{display:block;font-family:var(--displayja);font-size:clamp(34px,10vw,120px);color:var(--cream);}
.fm-expo{
  display:block;font-family:var(--display);font-size:clamp(20px,6vw,74px);
  color:transparent;-webkit-text-stroke:1.5px var(--mustard);
}
@supports not ((-webkit-text-stroke:1px #fff)){ .fm-expo{color:var(--mustard);} }
.footer-cols{font-size:14px;}
.footer-cols dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px 24px;margin:0;}
.footer-cols dt{font-family:var(--display);font-size:10px;letter-spacing:.2em;color:var(--mustard);margin-bottom:4px;}
.footer-cols dd{margin:0 0 12px;}
.footer-cols a{text-decoration:none;border-bottom:1px solid rgba(247,241,227,.35);}
.footer-cols a:hover{border-bottom-color:var(--mustard);color:var(--mustard);}
.footer-social{display:flex;gap:14px;margin:clamp(22px,4vh,42px) 0 18px;}
.footer-social a{
  width:46px;height:46px;border:1px solid rgba(247,241,227,.4);
  display:grid;place-items:center;transition:background .25s,color .25s,border-color .25s;
}
.footer-social a:hover{background:var(--mustard);color:var(--ink);border-color:var(--mustard);}
.footer-social svg{width:20px;height:20px;fill:currentColor;}
.copyright{margin:0;font-size:12px;opacity:.6;letter-spacing:.08em;}

/* ---------- ドロワー（クリーム地・濃紺文字） ---------- */
.drawer-scrim{position:fixed;inset:0;z-index:9100;background:rgba(20,33,61,.55);backdrop-filter:blur(3px);}
.drawer-scrim[hidden]{display:none;}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:9200;
  width:min(620px,94vw);background:var(--cream);color:var(--ink);
  border-left:3px solid var(--ink);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .42s cubic-bezier(.2,.8,.2,1);
}
.drawer[hidden]{display:none;}
.drawer.is-open{transform:none;}
.drawer-close{
  position:sticky;top:0;z-index:2;width:100%;
  background:var(--blue);color:var(--cream);border:0;
  font-family:var(--display);letter-spacing:.18em;font-size:12px;
  padding:14px;cursor:pointer;text-align:right;
}
.drawer-body{padding:clamp(18px,4vw,36px);}
.drawer-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:20px;}
.drawer-photos img{
  width:100%;aspect-ratio:3/4;max-height:44vh;object-fit:cover;object-position:center top;
  border:1px solid rgba(20,33,61,.2);
}
.drawer-from{
  display:inline-block;background:var(--red);color:var(--cream);
  font-family:var(--display);font-size:11px;letter-spacing:.12em;padding:3px 10px;margin-bottom:8px;
  transform:rotate(-2deg);
}
.drawer-name{margin:0 0 4px;font-family:var(--displayja);font-size:clamp(20px,3.2vw,34px);line-height:1.25;color:var(--blue);}
.drawer-suffix{margin:0 0 18px;font-size:12px;letter-spacing:.12em;opacity:.7;}
.drawer-profile{
  white-space:pre-line;font-size:14.5px;line-height:2.05;
  border-top:2px solid rgba(20,33,61,.18);padding-top:18px;margin:0;
}
.drawer-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.drawer-links a{
  text-decoration:none;border:1.5px solid var(--blue);border-radius:999px;color:var(--blue);
  font-family:var(--display);font-size:12px;letter-spacing:.14em;padding:9px 20px;
  transition:background .2s,color .2s;
}
.drawer-links a:hover{background:var(--blue);color:var(--cream);}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .marquee-track,.badge-spin svg,.scanline{animation:none;}
  .drawer{transition:none;}
  *{transition-duration:.01ms !important;}
}

/* ORIGIN STORY（空堀川のほとりで生まれた） */
.about-story{grid-column:1 / -1;margin-top:56px;padding-top:36px;border-top:2px solid rgba(20,33,61,.15);max-width:760px;}
.about-story h3{font-family:var(--displayja);font-size:clamp(22px,2.6vw,36px);line-height:1.3;color:var(--blue);margin:14px 0 18px;}
.about-story p{font-size:clamp(14px,1.05vw,16px);line-height:2;margin:0 0 1em;}

.ticket-limit{font-size:14px;letter-spacing:.06em;color:var(--mustard);margin:12px 0 0;}
.ticket-qr{margin-top:22px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.ticket-qr img{width:160px;height:160px;display:block;background:#fff;padding:8px;border-radius:8px;}
.ticket-qr-note{font-size:13px;letter-spacing:.06em;opacity:.8;margin:0;}