/* web-design-control · mode: direction→build · ds: provisional（コンセプト作品 07 港町サウンドウォーク 2027）
 * read: 回遊型の音楽フェスの特設サイト / 音楽好きの20〜30代・子ども連れの地元の人 / ポップで弾む / 行動: チケット・回遊プランをつくる
 * core: 約束=港を歩いて、音を拾う / 人格=弾む・ひらかれた・ちょっとふざけた / 印=積んだコンテナ＝音量のメーター、歩く道の点線 / 見せ場=回遊プラン
 * refs: popisyousakae.com（3D のジオラマ・色の札・横の時間軸）/ shibuyastreetlive.jp（角丸の写真と矢印・黒い角丸の面）/ kashiwanoha-innovation.jp/specialcontents（顔のある街のモノ・色違いの step カード）
 * site: / · /lineup/ · /timetable/ · /map/ · /ticket/
 * dials: V9 M7 D3
 */
/* RocknRoll One は 30px 以上の見出しだけに使う（小さい見出し・名前は M PLUS 2 の 800。J-09） */
/* design-lint: allow-file J-02 — 1.1 未満の行送りは、欧文の大きな飾り文字・数字だけの表示 */
/* design-lint: allow-file J-03 — 字間を詰めているのは Unbounded の欧文・数字だけ（和文の見出しは詰めない） */

/* ============ トークン ============ */
:root {
  /* 色（WCAG 2.x の相対輝度で計算）。会場ごとに1色 */
  --white: #FFFFFF;  /* 地。ink 18.1 */
  --paper: #F3F2EE;  /* 一段濃い面。ink 16.0 / soft 7.4 */
  --ink:   #141414;  /* 文字と黒の面 */
  --soft:  #4D4B47;  /* 補助の文字。white 8.4 */
  --line:  #D9D7D0;
  --on-ink: #FFFFFF; --on-ink-dim: #C9C6BE; /* 黒の面の補助の文字 10.9 */
  --blue:   #2F4BFF; /* 1 コンテナ広場。white 5.9（上の文字は白） / 白地の青い文字 5.9 */
  --cyan:   #3EC6E0; /* 2 渡し船。上の ink 9.0 */
  --orange: #FF8A3D; /* 3 レンガ倉庫。上の ink 7.9 */
  --lime:   #C9F24D; /* 4 灯台の芝生。上の ink 15.0 */
  --pink:   #FF79A8; /* 5 商店街。上の ink 7.5 */
  --yellow: #FFD43B; /* 6 朝市。上の ink 13.6 */
  --sea:    #C8F0F7; /* 地図の海 */
  --land:   #FBFAF6; --pier: #E7E3D8; --cape: #DDF3B0; --street: #FFE1EC; --road: #ECE8DE; /* 地図の陸・岸壁・岬・商店街・道 */
  --bf:     #29A35A; /* 段差の少ない道 */
  --late:   #A3002E; /* 間に合わない注意の文字。white 8.3 */
  --rib:    rgba(0, 0, 0, .18); --rule-ink: rgba(255, 255, 255, .25);

  --display: "RocknRoll One", "Hiragino Sans", "Yu Gothic", sans-serif;
  --jp: "M PLUS 2", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --en: "Unbounded", "Arial Black", sans-serif;

  --shell: 76rem;
  --wide: 90rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --sec-y: clamp(4.5rem, 3rem + 5vw, 8rem);
  --header-h: 4.25rem;
  --r-s: 14px; --r-m: 22px; --r-l: clamp(28px, 3vw, 48px);
  --shadow: 5px 5px 0 var(--ink);

  /* 動き: 少し跳ねて止まる（参考の POP IS YOU と TALKING CITY から） */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .2s;
  --t-reveal: .7s;
}

/* ============ 基本 ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 2rem); }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--jp); font-size: 1rem; line-height: 1.9; letter-spacing: .03em;
  -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; overflow-x: clip; word-break: auto-phrase; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-underline-offset: .25em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.sec--ink :focus-visible, .site-footer :focus-visible, .phead--tt :focus-visible, .band--blue :focus-visible { outline-color: var(--lime); }
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
p, li, dd, td { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
button { font: inherit; color: inherit; }
.shell { width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--white); padding: .5rem 1rem; border-radius: 999px; }
.skip:focus { top: 1rem; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.num { font-family: var(--en); font-weight: 600; letter-spacing: 0; font-feature-settings: "tnum"; }
.note { font-size: .8125rem; color: var(--soft); line-height: 1.85; margin-top: 1.25rem; }
.nw { white-space: nowrap; }
/* 出演者の名前は、語の切れ目（<wbr>）でだけ折る */
.act__name, .artist__name, .slot__act, .lane__act { word-break: keep-all; overflow-wrap: anywhere; }

/* 札（会場の色。番号と名前を必ず添える） */
.pill { display: inline-flex; align-items: center; gap: .35em; padding: .1em .75em .12em; border-radius: 999px; font-size: .8125rem; font-weight: 700; line-height: 1.6; white-space: nowrap; background: var(--paper); color: var(--ink); }
.pill .num { font-size: .9em; }
.pill--blue { background: var(--blue); color: var(--white); } .pill--cyan { background: var(--cyan); } .pill--orange { background: var(--orange); }
.pill--lime { background: var(--lime); } .pill--pink { background: var(--pink); } .pill--yellow { background: var(--yellow); }
.pill--line { background: var(--white); box-shadow: inset 0 0 0 2px var(--ink); }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: .7rem 1.5rem; border-radius: 999px; border: 2.5px solid var(--ink);
  font-weight: 800; font-size: 1rem; line-height: 1.3; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--t-fast) var(--pop), box-shadow var(--t-fast) var(--ease); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--line { background: var(--white); color: var(--ink); }
.btn--white { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--small { min-height: 2.75rem; padding: .45rem 1.1rem; font-size: .9375rem; }
.arw { width: 1.15em; height: .7em; flex: none; transition: transform var(--t-fast) var(--pop); }

/* ============ ヘッダー（浮いた丸い帯） ============ */
.site-header { position: sticky; top: .6rem; z-index: 50; padding-inline: var(--gutter); margin-top: .6rem; }
.site-header__bar { max-width: var(--wide); margin-inline: auto; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--white); border: 2.5px solid var(--ink); border-radius: 999px; padding: 0 .5rem 0 1.1rem; transition: box-shadow var(--t-fast) var(--ease); }
.site-header.is-scrolled .site-header__bar { box-shadow: 0 4px 0 var(--ink); }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); min-width: 0; }
.logo__mark { width: 40px; height: 40px; flex: none; }
.logo__type { display: grid; line-height: 1.15; }
.logo__en { font: 800 1.0625rem/1.1 var(--en); letter-spacing: .01em; white-space: nowrap; }
.logo__jp { font-size: .6875rem; font-weight: 700; color: var(--soft); white-space: nowrap; }
.logo--light { color: var(--white); } .logo--light .logo__jp { color: var(--on-ink-dim); }
.gnav__list { display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.75rem); }
.gnav__link { display: grid; line-height: 1.3; text-decoration: none; font-weight: 800; font-size: .875rem; padding: .3rem .2rem; white-space: nowrap; position: relative; }
.gnav__link span { font: 600 .625rem/1.2 var(--en); letter-spacing: .06em; color: var(--soft); }
.gnav__link::after { content: ""; position: absolute; left: .2rem; right: .2rem; bottom: -.05rem; height: 4px; border-radius: 4px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease); }
.gnav__link[aria-current="page"]::after { transform: none; }
.menu-btn { display: none; }
@media (max-width: 900px) {
  .menu-btn { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--lime); cursor: pointer; flex: none; }
  .menu-btn__bars { width: 18px; height: 10px; position: relative; }
  .menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform var(--t-fast) var(--ease); }
  .menu-btn__bars::before { top: 0; } .menu-btn__bars::after { bottom: 0; }
  .menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(3.75px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__bars::after { transform: translateY(-3.75px) rotate(-45deg); }
  .gnav { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + .6rem); background: var(--white); border: 2.5px solid var(--ink); border-radius: var(--r-m);
    padding: .75rem 1.25rem 1.25rem; display: none; box-shadow: var(--shadow); }
  .gnav.is-open { display: block; }
  .gnav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .gnav__link { padding: .85rem 0; border-bottom: 1.5px dashed var(--line); font-size: 1.0625rem; }
  .gnav__link::after { display: none; }
  .gnav__cta { margin-top: 1rem; } .gnav__cta .btn { width: 100%; }
}
@media (max-width: 380px) { .logo__jp { display: none; } }

/* ============ FV（ポスターの型: 上に大きな文字、下に横長の枠） ============ */
.fv { padding-top: clamp(.75rem, 2vw, 1.5rem); }
.fv__shell { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; container-type: inline-size; position: relative; }
.fv__big { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: .28em; align-items: center; white-space: nowrap; font: 900 8.7cqi/.9 var(--en); letter-spacing: -.035em; text-transform: uppercase; margin: 0 0 1.4cqi; }
.fv__word { display: inline-flex; flex-wrap: nowrap; align-items: center; }
.fv__o { display: inline-block; width: .82em; height: .82em; position: relative; margin-inline: .02em; }
.fv__buoy { position: absolute; inset: -14%; width: 128%; height: 128%; object-fit: contain; max-width: none; }
.fv__panel { position: relative; border: 3px solid var(--ink); border-radius: var(--r-l); aspect-ratio: 2.35 / 1; background: var(--white); }
.fv__kv { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: block; }
.fv__kv img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.fv__gull { position: absolute; right: 1%; top: 0; width: 13.5cqi; transform: translateY(-74%); z-index: 2; pointer-events: none; }
.fv__sticker { position: absolute; left: 2.2cqi; top: 2.2cqi; width: 12cqi; aspect-ratio: 1; border-radius: 50%; background: var(--pink); border: 3px solid var(--ink);
  display: grid; place-content: center; text-align: center; transform: rotate(-9deg); box-shadow: var(--shadow); z-index: 2; }
.fv__sticker .num { display: block; font-weight: 900; font-size: max(.95rem, 1.75cqi); line-height: 1.12; }
.fv__sticker small { font-size: .55em; margin-left: .2em; vertical-align: .2em; }
.fv__sticker .fv__year { font-size: max(.7rem, 1cqi); font-weight: 600; margin-top: .3em; }
.fv__label { position: absolute; left: 2.2cqi; bottom: 2.2cqi; width: min(32rem, 44cqi); background: var(--white); border: 3px solid var(--ink); border-radius: var(--r-m);
  padding: clamp(1rem, 2cqi, 1.75rem); box-shadow: var(--shadow); z-index: 2; }
.fv__event { font-weight: 800; font-size: .875rem; }
.fv__event .num { font-size: .95em; }
.fv__title { font: 400 clamp(1.875rem, 3.3cqi, 3.25rem)/1.3 var(--display); letter-spacing: .02em; margin: .25rem 0 .5rem; }
.fv__lead { font-size: .9375rem; line-height: 1.8; }
.fv__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.fv__walk { position: absolute; right: 2.2cqi; bottom: 2.2cqi; width: min(21rem, 30cqi); display: grid; gap: .35rem; padding: 1rem 1.1rem; background: var(--white);
  border: 3px solid var(--ink); border-radius: var(--r-m); text-decoration: none; font-size: .8125rem; font-weight: 700; line-height: 1.5; z-index: 2; box-shadow: var(--shadow); }
.fv__walk-en { font: 800 .6875rem/1 var(--en); letter-spacing: .08em; color: var(--blue); }
.fv__walk-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.fv__walk-row > .num { font-size: .8rem; }
.fv__walk-step { display: flex; align-items: center; gap: .4rem; padding-left: .6rem; color: var(--soft); font-size: .75rem; }
.fv__dots { width: 4px; height: 1.6rem; background: radial-gradient(circle, var(--ink) 1.6px, transparent 2px) 0 0 / 4px 6px repeat-y; }
@media (max-width: 1100px) {
  .fv__walk { display: none; }
  .fv__label { width: min(30rem, 56cqi); }
}
@media (max-width: 760px) {
  .fv__big { flex-direction: column; align-items: flex-start; gap: 0; font-size: 17cqi; line-height: .92; margin-bottom: 2.5cqi; }
  .fv__panel { aspect-ratio: auto; display: flex; flex-direction: column; overflow: visible; }
  .fv__kv { position: relative; inset: auto; aspect-ratio: 4 / 5; border-radius: calc(var(--r-l) - 3px) calc(var(--r-l) - 3px) 0 0; }
  .fv__kv img { object-position: 50% 50%; }
  .fv__gull { width: 25cqi; right: 0; transform: translateY(-88%); }
  .fv__sticker { width: 27cqi; left: 3cqi; top: 3cqi; }
  .fv__sticker .num { font-size: max(1rem, 4.6cqi); }
  .fv__sticker .fv__year { font-size: max(.7rem, 2.8cqi); }
  .fv__label { position: relative; left: auto; bottom: auto; width: auto; border: 0; border-top: 3px solid var(--ink); border-radius: 0 0 calc(var(--r-l) - 3px) calc(var(--r-l) - 3px); box-shadow: none; }
  .fv__actions .btn { flex: 1 1 14rem; }
}

/* 節の区切り: 点線と「徒歩◯分」の札 */
.wstep { display: flex; align-items: center; gap: .75rem; width: min(100% - 2 * var(--gutter), var(--shell)); margin: clamp(.5rem, 2vw, 1.5rem) auto; }
.wstep__line { flex: 1; height: 6px; background: radial-gradient(circle, var(--ink) 2.4px, transparent 3px) 0 50% / 14px 6px repeat-x; }
.wstep__tag { flex: none; padding: .35rem 1rem; border: 2.5px solid var(--ink); border-radius: 999px; font-weight: 800; font-size: .875rem; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-3deg); }
.wstep__tag .num { font-size: 1.05em; margin: 0 .1em; }
.wstep__tag--yellow { background: var(--yellow); } .wstep__tag--orange { background: var(--orange); } .wstep__tag--lime { background: var(--lime); }
.wstep__tag--cyan { background: var(--cyan); } .wstep__tag--pink { background: var(--pink); }
.sec--top0 { padding-top: clamp(3rem, 5vw, 5rem); }

/* 流れる文字の帯 */
.marquee { margin-top: clamp(1rem, 2.5vw, 1.75rem); background: var(--ink); color: var(--white); overflow: hidden; border-block: 3px solid var(--ink); }
.marquee__track { display: flex; width: max-content; gap: 1.5rem; padding: .7rem 0; font: 800 clamp(.875rem, .7rem + .5vw, 1.125rem)/1.2 var(--en); letter-spacing: .04em; white-space: nowrap; }
.marquee__track span { flex: none; }
.marquee__dot { width: .55em; height: .55em; align-self: center; border-radius: 50%; background: var(--lime); }

/* ============ 開催の概要 ============ */
.facts { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
.facts__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 2vw, 1.5rem); }
.fact { border: 3px solid var(--ink); border-radius: var(--r-m); padding: 1.25rem 1.5rem 1.4rem; display: grid; align-content: start; gap: .2rem; }
.fact--blue { background: var(--blue); color: var(--white); } .fact--pink { background: var(--pink); } .fact--lime { background: var(--lime); }
.fact__en { font: 800 .75rem/1 var(--en); letter-spacing: .1em; }
.fact__big { font-weight: 900; font-size: clamp(3rem, 2rem + 4vw, 5.75rem); line-height: 1; letter-spacing: -.04em; }
.fact__big span { font-weight: 600; margin-inline: .05em; }
.fact__big small { font-size: .4em; margin-left: .1em; letter-spacing: 0; }
.fact__jp { font-weight: 700; font-size: .9375rem; line-height: 1.7; margin-top: .4rem; }
@media (max-width: 760px) { .facts__list { grid-template-columns: 1fr; } .fact { padding: 1rem 1.25rem 1.1rem; } .fact__big { font-size: clamp(2.5rem, 11vw, 3.5rem); } .fact__jp { margin-top: .2rem; } }

/* ============ 節 ============ */
.sec { padding-block: var(--sec-y); }
.sec--tight { padding-block: clamp(2rem, 4vw, 3.5rem) var(--sec-y); }
.sec--paper { background: var(--paper); }
.sec--ink { background: var(--ink); color: var(--on-ink); margin-inline: clamp(.5rem, 1.5vw, 1.25rem); border-radius: var(--r-l); }
.sec--ink a { color: var(--on-ink); }
.sec--ink .btn--white { color: var(--ink); }
.sec-head { display: grid; align-content: start; gap: .6rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); max-width: 46rem; }
.sec-head__en { justify-self: start; font: 800 .75rem/1 var(--en); letter-spacing: .1em; padding: .5rem .9rem; border-radius: 999px; border: 2.5px solid var(--ink); background: var(--white); }
.sec-head__en--blue { background: var(--blue); color: var(--white); } .sec-head__en--cyan { background: var(--cyan); } .sec-head__en--orange { background: var(--orange); }
.sec-head__en--lime { background: var(--lime); } .sec-head__en--pink { background: var(--pink); } .sec-head__en--yellow { background: var(--yellow); }
.sec--ink .sec-head__en { border-color: var(--on-ink); color: var(--ink); }
.h2 { font: 400 clamp(2rem, 1.35rem + 2.4vw, 3.25rem)/1.32 var(--display); letter-spacing: .02em; }
.lead { font-size: 1.0625rem; line-height: 1.9; }
.sec--ink .lead { color: var(--on-ink-dim); }
.sec-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.sec-row .sec-head { margin-bottom: 0; }

/* ============ 港の地図（見せ場） ============ */
.walk__grid > .map { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.walk__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.map { position: relative; aspect-ratio: 1000 / 640; border: 3px solid var(--ink); border-radius: var(--r-l); background: var(--land); overflow: hidden; }
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__how { position: absolute; right: .9rem; bottom: .8rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; max-width: 60%; justify-content: flex-end;
  padding: .45rem .8rem; background: var(--white); border: 2px solid var(--ink); border-radius: var(--r-s); font-size: .75rem; font-weight: 700; line-height: 1.5; z-index: 1; }
.map__how-dots { width: 1.8rem; height: 5px; background: radial-gradient(circle, var(--ink) 2px, transparent 2.5px) 0 50% / 7px 5px repeat-x; }
.map__how-tag { padding: 0 .45rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--yellow); font-size: .6875rem; }
.map--full .map__how { display: none; }
.map__sea { fill: var(--sea); }
.map__wave { fill: none; stroke: var(--white); stroke-width: 4; stroke-linecap: round; }
.map__pier { fill: var(--pier); stroke: var(--ink); stroke-width: 2.5; }
.map__cape { fill: var(--cape); stroke: var(--ink); stroke-width: 2.5; }
.map__street { fill: var(--street); stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 8 6; }
.map__road { fill: none; stroke: var(--road); stroke-width: 28; stroke-linecap: round; }
.map__route { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0 .013; }
.map__walk rect { fill: var(--yellow); stroke: var(--ink); stroke-width: 2.5; }
.map__walk text { font: 800 17px var(--jp); text-anchor: middle; fill: var(--ink); }
.map__mk circle { stroke: var(--ink); stroke-width: 2.5; fill: var(--white); }
.map__mk text { font: 800 15px var(--jp); text-anchor: middle; fill: var(--ink); }
.map__mk--aid circle { fill: var(--pink); } .map__mk--info circle { fill: var(--yellow); } .map__mk--rest circle { fill: var(--lime); }
.map__station rect { fill: var(--ink); } .map__station text { font: 800 17px var(--jp); fill: var(--white); text-anchor: middle; }
.map__bf { fill: none; stroke: var(--bf); stroke-width: 8; stroke-linecap: round; opacity: .85; }
.map__pins li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 1; }
.pin__btn { display: grid; justify-items: center; gap: .2rem; padding: 0; border: 0; background: none; font-weight: 800; font-size: .8125rem; line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: transform var(--t-fast) var(--pop); transform: translateY(.9rem); }
.pin__no { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2.5px solid var(--ink); font-size: 1rem; font-weight: 800; box-shadow: 3px 3px 0 var(--ink); }
.pin__name { padding: .1rem .6rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--white); }
.pin--blue .pin__no { background: var(--blue); color: var(--white); } .pin--cyan .pin__no { background: var(--cyan); } .pin--orange .pin__no { background: var(--orange); }
.pin--lime .pin__no { background: var(--lime); } .pin--pink .pin__no { background: var(--pink); } .pin--yellow .pin__no { background: var(--yellow); }
.pin__btn[aria-pressed="true"] { transform: translateY(.9rem) scale(1.1); }
.pin__btn[aria-pressed="true"] .pin__name { background: var(--ink); color: var(--white); }
.pin__btn[aria-pressed="true"] .pin__no { outline: 4px solid var(--ink); outline-offset: 2px; }
@media (max-width: 700px) {
  .map__walk { display: none; }
  .map__how { position: static; max-width: none; justify-content: flex-start; border: 0; border-top: 2px solid var(--ink); border-radius: 0; }
  .map:has(.map__how) { aspect-ratio: auto; } .map:has(.map__how) .map__svg { position: relative; aspect-ratio: 1000 / 640; height: auto; display: block; }
  .map:has(.map__how) .map__pins { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1000 / 640; }
  .pin__btn { transform: none; } .pin__btn[aria-pressed="true"] { transform: scale(1.1); }
  .pin__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pin__no { width: 2rem; height: 2rem; box-shadow: 2px 2px 0 var(--ink); }
}

/* 会場の案内 */
.vp { border: 3px solid var(--ink); border-radius: var(--r-l); background: var(--white); overflow: hidden; }
.walk__panels .vp + .vp { margin-top: 1.25rem; }
.vp__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 3px solid var(--ink); }
.vp__body { padding: 1.25rem 1.4rem 1.5rem; }
.vp__no { display: inline-flex; align-items: center; gap: .6rem; font: 800 .75rem/1 var(--en); letter-spacing: .08em; }
.vp__no .num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2.5px solid var(--ink); font-size: .875rem; font-weight: 800; }
.vp--blue .vp__no .num { background: var(--blue); color: var(--white); } .vp--cyan .vp__no .num { background: var(--cyan); } .vp--orange .vp__no .num { background: var(--orange); }
.vp--lime .vp__no .num { background: var(--lime); } .vp--pink .vp__no .num { background: var(--pink); } .vp--yellow .vp__no .num { background: var(--yellow); }
.vp__name { font-size: 1.5rem; font-weight: 800; line-height: 1.4; margin: .5rem 0 .4rem; }
.vp__desc { line-height: 1.85; }
.vp__fac { margin-top: .5rem; font-size: .8125rem; font-weight: 700; color: var(--soft); }
.vp__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; margin-top: 1rem; padding-top: 1rem; border-top: 2px dashed var(--line); }
.vp__label { font-size: .75rem; font-weight: 800; color: var(--soft); margin-bottom: .35rem; }
.vp__on li, .vp__near li { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .45rem; font-size: .875rem; line-height: 1.6; padding-block: .2rem; }
.vp__on .num { font-size: .78rem; }
.vp__near .pill { font-size: .75rem; }
.vp__min { font-size: .8125rem; font-weight: 700; }
.vp__min .num { font-size: 1rem; }
.walk__panels--wide { margin-top: 1.5rem; }
.vp[hidden] { display: none !important; }
.vp.is-hl { box-shadow: 0 0 0 5px var(--lime), var(--shadow); }
.walk__panels--wide .vp + .vp { margin-top: 1.25rem; }
.walk__panels--wide .vp { scroll-margin-top: calc(var(--header-h) + 2rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.walk__panels--wide .vp__photo img { height: 100%; border-bottom: 0; border-right: 3px solid var(--ink); }
.walk__panels--wide .vp:nth-child(even) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.walk__panels--wide .vp:nth-child(even) .vp__photo { order: 2; }
.walk__panels--wide .vp:nth-child(even) .vp__photo img { border-right: 0; border-left: 3px solid var(--ink); }
@media (max-width: 1000px) { .walk__grid { grid-template-columns: 1fr; } .walk__grid > .map { position: relative; top: auto; } }
@media (max-width: 760px) {
  .walk__panels--wide .vp, .walk__panels--wide .vp:nth-child(even) { grid-template-columns: 1fr; }
  .walk__panels--wide .vp:nth-child(even) .vp__photo { order: 0; }
  .walk__panels--wide .vp:nth-child(even) .vp__photo img { border-left: 0; }
  .walk__panels--wide .vp__photo img { border-right: 0; border-bottom: 3px solid var(--ink); height: auto; }
}
@media (max-width: 420px) { .vp__cols { grid-template-columns: 1fr; } }

/* ============ 出演者（トップ） ============ */
.acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem) clamp(.75rem, 1.6vw, 1.5rem); }
.act__link { display: grid; text-decoration: none; position: relative; }
.act__photo { position: relative; border: 3px solid var(--ink); border-radius: var(--r-m); overflow: hidden; background: var(--white); }
.act__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .5s var(--ease); }
.act__tag { position: absolute; left: .6rem; top: .6rem; max-width: calc(100% - 1.2rem); display: inline-flex; gap: .4rem; align-items: center; padding: .15rem .7rem; border-radius: 999px; border: 2px solid var(--ink);
  font-size: .75rem; font-weight: 800; background: var(--white); white-space: nowrap; }
.act--blue .act__tag { background: var(--blue); color: var(--white); } .act--cyan .act__tag { background: var(--cyan); } .act--orange .act__tag { background: var(--orange); }
.act--lime .act__tag { background: var(--lime); } .act--pink .act__tag { background: var(--pink); } .act--yellow .act__tag { background: var(--yellow); }
.act__genre { margin-top: .7rem; font-size: .8125rem; font-weight: 700; color: var(--soft); }
.act__name { font-size: clamp(1rem, .95rem + .4vw, 1.3125rem); font-weight: 800; line-height: 1.45; }
.act__go { position: absolute; right: .6rem; bottom: .6rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--white); transition: background var(--t-fast); }
.lineup__more { margin-top: 2rem; font-weight: 700; }
.lineup.sec--ink .act__photo { border-color: var(--white); }
.lineup.sec--ink .act__genre { color: var(--on-ink-dim); }
.lineup.sec--ink .act__name, .lineup.sec--ink .act__link { color: var(--on-ink); }
.lineup.sec--ink .act__go { border-color: var(--ink); color: var(--ink); }
@media (max-width: 1100px) { .acts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .act__go { width: 2rem; height: 2rem; right: .45rem; bottom: .45rem; } }

/* ============ 時間割の抜粋（横に流れる列） ============ */
.tt__wrap { padding-bottom: .5rem; }

.tt__hours { position: relative; height: 1.75rem; margin-left: 12rem; }
.tt__hours li { position: absolute; left: var(--l); transform: translateX(-50%); font-size: .75rem; color: var(--soft); white-space: nowrap; }
.tt__hours li:first-child { transform: none; } .tt__hours li:last-child { transform: translateX(-100%); }
.lanes { display: grid; gap: .6rem; }
.lane { display: grid; grid-template-columns: 11.25rem 1fr; gap: .75rem; align-items: center; }
@media (max-width: 700px) { .lane { grid-template-columns: 1fr; gap: .4rem; } }
.lane__venue { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .875rem; line-height: 1.3; }
.lane__venue .num { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid var(--ink); font-size: .8rem; }
.lane--blue .lane__venue .num, .lane--blue .lane__slot { background: var(--blue); color: var(--white); }
.lane--cyan .lane__venue .num, .lane--cyan .lane__slot { background: var(--cyan); } .lane--orange .lane__venue .num, .lane--orange .lane__slot { background: var(--orange); }
.lane--lime .lane__venue .num, .lane--lime .lane__slot { background: var(--lime); } .lane--pink .lane__venue .num, .lane--pink .lane__slot { background: var(--pink); }
.lane--yellow .lane__venue .num, .lane--yellow .lane__slot { background: var(--yellow); }
.lane__track { display: flex; flex-wrap: wrap; gap: .5rem; padding: .45rem; border-radius: 18px; background: var(--paper); }
.lane__slot { display: inline-flex; align-items: center; gap: .5rem; border: 2px solid var(--ink); border-radius: 999px; padding: .35rem .9rem .35rem .75rem; line-height: 1.3; white-space: nowrap; }
.lane__slot .num { font-size: .75rem; }
.lane__act { font-size: .875rem; font-weight: 800; }

/* ============ 港のなかま（黒の面） ============ */
.tips__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: 3.5rem; }
.tip { position: relative; border-radius: var(--r-l); padding: 0 1.4rem 1.6rem; color: var(--ink); display: grid; align-content: start; border: 3px solid var(--ink); }
.tip--pink { background: var(--pink); } .tip--cyan { background: var(--cyan); } .tip--lime { background: var(--lime); } .tip--orange { background: var(--orange); }
.tip__chara { width: 62%; margin: -.25rem auto .25rem; }
.tip__who { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .875rem; margin-bottom: .4rem; }
.tip__who .num { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink); color: var(--white); font-size: .75rem; }
.tip__title { margin: -2.6rem -.4rem 0; position: relative; z-index: 1; font-size: 1.125rem; font-weight: 800; line-height: 1.45; }
.tip__bubble { display: block; position: relative; background: var(--white); border: 2.5px solid var(--ink); border-radius: 20px; padding: .7rem .9rem; box-shadow: 3px 3px 0 var(--ink); }
.tip__bubble::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 18px; height: 18px; background: var(--white); border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.tip:nth-child(even) .tip__bubble { transform: rotate(2deg); } .tip:nth-child(odd) .tip__bubble { transform: rotate(-2deg); }
.tip__text { font-size: .9375rem; line-height: 1.85; }
@media (max-width: 1100px) { .tips__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4rem; } }
@media (max-width: 560px) { .tips__list { grid-template-columns: 1fr; row-gap: 3.5rem; } .tip__chara { width: 46%; } }

/* ============ 6つの会場 ============ */
.vcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.vcard a { display: grid; text-decoration: none; }
.vcard__photo { border: 3px solid var(--ink); border-radius: var(--r-l); overflow: hidden; }
.vcard__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s var(--ease); }
.vcard__name { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-top: .8rem; font-weight: 800; font-size: 1.125rem; line-height: 1.4; }
.vcard__no { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2.5px solid var(--ink); font-size: .875rem; }
.vcard--blue .vcard__no { background: var(--blue); color: var(--white); } .vcard--cyan .vcard__no { background: var(--cyan); } .vcard--orange .vcard__no { background: var(--orange); }
.vcard--lime .vcard__no { background: var(--lime); } .vcard--pink .vcard__no { background: var(--pink); } .vcard--yellow .vcard__no { background: var(--yellow); }
.vcard__en { font: 600 .6875rem/1 var(--en); letter-spacing: .08em; color: var(--soft); }
@media (max-width: 1000px) { .vcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .vcards { grid-template-columns: 1fr; } }

/* ============ 港の1日（大きな時刻と写真） ============ */
.days { overflow: hidden; }
.days__big { font: 900 clamp(3rem, 1rem + 9vw, 10rem)/.9 var(--en); letter-spacing: -.04em; white-space: nowrap; color: var(--ink); margin: 0 0 clamp(1.5rem, 3vw, 2.5rem) -.04em; }
.days__list { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.day { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "time photo" "text photo"; gap: .5rem clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
.day:nth-child(even) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "photo time" "photo text"; }
.day__time { grid-area: time; font-weight: 900; font-size: clamp(4rem, 2rem + 8vw, 9.5rem); line-height: .9; letter-spacing: -.05em; }
.day--yellow .day__time { color: var(--ink); text-shadow: 6px 6px 0 var(--yellow); } .day--cyan .day__time { text-shadow: 6px 6px 0 var(--cyan); } .day--orange .day__time { text-shadow: 6px 6px 0 var(--orange); }
.day__photo { grid-area: photo; }
.day__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 3px solid var(--ink); border-radius: var(--r-l); }
.day:nth-child(1) .day__photo img { transform: rotate(-1.5deg); } .day:nth-child(3) .day__photo img { transform: rotate(1.5deg); }
.day__text { grid-area: text; align-self: start; font-size: 1.125rem; font-weight: 700; line-height: 1.8; }
@media (max-width: 760px) { .day, .day:nth-child(even) { grid-template-columns: 1fr; grid-template-areas: "time" "photo" "text"; } }

/* ============ チケット（トップ） ============ */
.tickets__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.tix { display: grid; gap: 1rem; }
.tix__item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "kind price" "note price"; align-items: center; column-gap: 1.5rem; padding: 1.25rem 2.25rem;
  border-radius: var(--r-m); --notch: radial-gradient(circle at 0 50%, #0000 15px, #000 16px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 15px, #000 16px) right / 51% 100% no-repeat;
  -webkit-mask: var(--notch); mask: var(--notch); }
.tix__item--ink { background: var(--ink); color: var(--white); }
.tix__item--band { background: linear-gradient(90deg, var(--blue) 0 16.66%, var(--cyan) 0 33.33%, var(--orange) 0 50%, var(--lime) 0 66.66%, var(--pink) 0 83.33%, var(--yellow) 0) top / 100% 12px no-repeat, var(--white); padding-top: 1.75rem; }
.tix__item--white { background: var(--white); box-shadow: inset 0 0 0 3px var(--ink); }
.tix__kind { grid-area: kind; font-weight: 800; font-size: 1.25rem; }
.tix__note { grid-area: note; font-size: .875rem; font-weight: 500; }
.tix__price { grid-area: price; font-weight: 900; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; padding-left: 1.5rem; border-left: 2.5px dashed currentColor; letter-spacing: -.03em; }
.tix__price small { font-family: var(--jp); font-size: .4em; font-weight: 800; margin-left: .15em; }
@media (max-width: 900px) { .tickets__grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .tix__item { padding: 1.1rem 1.6rem; } .tix__price { padding-left: 1rem; } }

/* ============ お知らせ ============ */
.news__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 2rem; }
.news__list li { display: grid; grid-template-columns: 7rem 6rem 1fr; gap: .5rem 1rem; align-items: center; padding: 1.1rem 0; border-bottom: 2px dashed var(--line); }
.news__list li:first-child { border-top: 2px dashed var(--line); }
.news__list time { font-size: .8125rem; color: var(--soft); }
.news__list .pill { justify-self: start; }
.news__list a { font-weight: 700; }
@media (max-width: 860px) { .news__grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .news__list li { grid-template-columns: auto 1fr; } .news__list a { grid-column: 1 / -1; } }

/* ============ フッター（黒い角丸の面と、積んだコンテナ） ============ */
.site-footer { padding: 0 clamp(.5rem, 1.5vw, 1.25rem) clamp(.5rem, 1.5vw, 1.25rem); }
.footer__panel { background: var(--ink); color: var(--on-ink); border-radius: var(--r-l); padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 4.5rem) 2rem; overflow: hidden; }
.footer__panel a { color: var(--on-ink); }
.eq { display: flex; align-items: flex-end; gap: clamp(.3rem, .8vw, .6rem); height: clamp(6rem, 12vw, 9.5rem); }
.eq__bar { display: flex; flex-direction: column-reverse; gap: 3px; flex: 1 1 0; min-width: 0; transform-origin: bottom; }
.eq__box { display: block; height: clamp(.9rem, 1.8vw, 1.45rem); border-radius: 4px; border: 2px solid var(--ink); background: currentColor;
  background-image: repeating-linear-gradient(90deg, transparent 0 14%, var(--rib) 14% 17%); }
.eq__bar--blue { color: var(--blue); } .eq__bar--pink { color: var(--pink); } .eq__bar--lime { color: var(--lime); } .eq__bar--orange { color: var(--orange); }
.eq__bar--cyan { color: var(--cyan); } .eq__bar--yellow { color: var(--yellow); }
.footer__big { font: 900 clamp(2.4rem, 1rem + 6.4vw, 7rem)/.95 var(--en); letter-spacing: -.035em; margin: 1.5rem 0 clamp(2rem, 4vw, 3.5rem); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; padding-top: 2rem; border-top: 2px dashed var(--rule-ink); }
.footer__addr { margin-top: 1rem; font-size: .875rem; line-height: 1.85; color: var(--on-ink-dim); }
.footer__list { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.5rem; align-content: start; font-weight: 700; }
.footer__list a { text-decoration: none; display: inline-block; padding: .3rem 0; }
.footer__legal { margin-top: 2rem; font-size: .75rem; line-height: 1.8; color: var(--on-ink-dim); }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } }

/* ============ 下層の頭（骨組みは共通、見せ方はページの中身で変える） ============ */
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8125rem; font-weight: 700; margin-bottom: 1rem; }
.crumbs li + li::before { content: "→"; margin-right: .4rem; }
.phead { padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; }
.phead__big { font: 900 clamp(3.25rem, 1rem + 11vw, 11rem)/.85 var(--en); letter-spacing: -.02em; margin-bottom: .75rem; }
.phead__en { font: 800 .8125rem/1 var(--en); letter-spacing: .1em; margin-bottom: .75rem; }
.phead__title { font: 400 clamp(2rem, 1.3rem + 2.6vw, 3.25rem)/1.32 var(--display); letter-spacing: .02em; }
.phead__lead { margin-top: .9rem; font-size: 1.0625rem; max-width: 40rem; }
/* 出演者: 白地に巨大な欧文と、顔の丸 */
.phead__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; }
.phead--lineup .phead__big { font-size: clamp(3.25rem, 1rem + 15vw, 15rem); }
.faces { display: flex; padding-left: 14px; }
.phead--lineup .phead__lead { flex: 1 1 20rem; max-width: 30rem; }
.faces li { margin-left: -14px; width: clamp(3rem, 6vw, 6.5rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid var(--ink); background: var(--paper); }
.faces li:nth-child(4n+1) { outline: 4px solid var(--pink); } .faces li:nth-child(4n+2) { outline: 4px solid var(--lime); }
.faces li:nth-child(4n+3) { outline: 4px solid var(--cyan); } .faces li:nth-child(4n) { outline: 4px solid var(--orange); }
.faces img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
/* タイムテーブル: 青い帯に文字だけ */
.phead--tt { background: var(--blue); color: var(--white); margin-inline: clamp(.5rem, 1.5vw, 1.25rem); margin-top: 1rem; border-radius: var(--r-l); }
.phead--tt a { color: var(--white); }
.phead--tt .phead__big { color: var(--lime); font-size: clamp(2.2rem, 12.5vw - 1rem, 9.5rem); }
.tabs { display: flex; gap: .6rem; margin-top: 1.75rem; flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .4rem 1.3rem; border-radius: 999px; border: 2.5px solid var(--white); background: transparent; color: var(--white); font-weight: 800; cursor: pointer; }
.tab .num { font-size: 1.05rem; }
.tab[aria-selected="true"] { background: var(--white); color: var(--ink); }
/* 会場マップ: 横長の写真に札 */
.phead--map { padding: 0; }
.phead__photo img { width: 100%; height: clamp(18rem, 40vw, 34rem); object-fit: cover; object-position: 50% 45%; }
.phead__over { position: relative; margin-top: clamp(-9rem, -12vw, -5rem); }
.phead--map .crumbs { position: absolute; top: calc(clamp(-24rem, -28vw, -12rem)); left: 0; background: var(--white); padding: .3rem .9rem; border-radius: 999px; border: 2px solid var(--ink); }
.phead__card { background: var(--white); border: 3px solid var(--ink); border-radius: var(--r-l); padding: clamp(1.25rem, 3vw, 2.25rem); max-width: 38rem; box-shadow: var(--shadow); }
.phead__card .phead__en { color: var(--blue); }
/* チケット: 桃の面とリストバンドの写真 */
.phead--ticket { background: var(--pink); margin-inline: clamp(.5rem, 1.5vw, 1.25rem); margin-top: 1rem; border-radius: var(--r-l); }
.phead__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.phead__wrist img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 3px solid var(--ink); border-radius: var(--r-l); transform: rotate(2deg); box-shadow: var(--shadow); }
@media (max-width: 860px) { .phead__split { grid-template-columns: 1fr; } .phead__wrist img { transform: none; } }
@media (max-width: 600px) { .phead--map .crumbs { position: static; display: inline-flex; margin-bottom: .75rem; } }

/* ============ 出演者のページ ============ */
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 2rem; padding: 1rem 1.25rem; border: 2.5px solid var(--ink); border-radius: 999px; }
.filter__label { font-weight: 800; font-size: .875rem; }
.filter__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { min-height: 2.75rem; padding: .3rem 1.1rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--white); font-weight: 800; font-size: .9375rem; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.filter__count { margin-left: auto; font-size: .875rem; font-weight: 700; color: var(--soft); }
@media (max-width: 600px) { .filter { border-radius: var(--r-m); } .filter__count { margin-left: 0; } }
.artists { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.5rem); }
.artist.artist--local { grid-column: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto; }
.artist--local .artist__photo { position: relative; min-height: 16rem; }
.artist--local .artist__photo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-bottom: 0; border-right: 3px solid var(--ink); }
.artist { border: 3px solid var(--ink); border-radius: var(--r-l); overflow: hidden; background: var(--white); display: grid; grid-template-rows: auto 1fr; scroll-margin-top: calc(var(--header-h) + 2rem); }
.artist[hidden] { display: none; }
.artist__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-bottom: 3px solid var(--ink); }
.artist__photo--scene img { aspect-ratio: 4 / 5; }
.artist__body { padding: 1.1rem 1.3rem 1.4rem; display: grid; align-content: start; gap: .3rem; }
.artist__name { font-size: 1.375rem; font-weight: 800; line-height: 1.4; margin-top: .3rem; }
.artist__en { font: 600 .6875rem/1.4 var(--en); letter-spacing: .06em; color: var(--soft); }
.artist__en:lang(ja) { font-family: var(--jp); font-weight: 700; font-size: .75rem; }
.artist__intro { font-size: .9375rem; line-height: 1.85; margin-top: .3rem; }
.artist__times { margin-top: .6rem; padding-top: .7rem; border-top: 2px dashed var(--line); display: grid; gap: .35rem; }
.artist__times li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; font-size: .8125rem; font-weight: 700; }
.artist__times .num { font-size: .78rem; }
@media (max-width: 1100px) { .artists { grid-template-columns: repeat(3, minmax(0, 1fr)); } .artist.artist--local { grid-column: span 3; } }
@media (max-width: 1000px) { .artists { grid-template-columns: repeat(2, minmax(0, 1fr)); } .artist.artist--local { grid-column: span 2; } }
@media (max-width: 600px) { .artists { grid-template-columns: 1fr; } .artist.artist--local { grid-column: auto; grid-template-columns: 40% 1fr; } .artist--local .artist__photo { min-height: 0; } .artist--local .artist__photo img { position: static; } .artist { grid-template-columns: 40% 1fr; grid-template-rows: auto; } .artist__photo img { height: 100%; border-bottom: 0; border-right: 3px solid var(--ink); } .artist__body { padding: 1rem; } .artist__name { font-size: 1.1875rem; } }

/* 色の帯（下層の終わり） */
.band { margin: 0 clamp(.5rem, 1.5vw, 1.25rem) clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-l); padding-block: clamp(2.5rem, 5vw, 4rem); }
.band--blue { background: var(--blue); color: var(--white); } .band--pink { background: var(--pink); }
.band__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; }
.band__chara { width: clamp(7rem, 13vw, 11rem); }
.band__title { font: 400 clamp(1.875rem, 1.3rem + 1.8vw, 2.6rem)/1.35 var(--display); margin-bottom: .5rem; }
@media (max-width: 860px) { .band__inner { grid-template-columns: auto 1fr; } .band__inner .btn { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 520px) { .band__inner { grid-template-columns: 1fr; } .band__chara { width: 7rem; } }

/* ============ タイムテーブルと回遊プラン（見せ場） ============ */
.planner { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: start; }
.grid { display: grid; grid-template-columns: 4rem repeat(6, minmax(0, 1fr)); grid-template-rows: 3.25rem repeat(51, 1.6rem); column-gap: .4rem;
  background: linear-gradient(var(--line) 1.5px, transparent 1.5px) 0 3.25rem / 100% 9.6rem; }
.grid__venue { grid-row: 1; align-self: stretch; display: flex; align-items: center; gap: .35rem; padding: 0 .4rem; border-radius: var(--r-s) var(--r-s) 0 0; border: 2.5px solid var(--ink); border-bottom: 0;
  font-weight: 800; font-size: .75rem; line-height: 1.25; position: sticky; top: calc(var(--header-h) + .6rem); z-index: 2; }
.grid__venue .num { font-size: .8rem; }
.grid__venue--blue { background: var(--blue); color: var(--white); } .grid__venue--cyan { background: var(--cyan); } .grid__venue--orange { background: var(--orange); }
.grid__venue--lime { background: var(--lime); } .grid__venue--pink { background: var(--pink); } .grid__venue--yellow { background: var(--yellow); }
.grid__hour { grid-column: 1; font-size: .75rem; color: var(--soft); transform: translateY(-.55rem); }
.slot { padding-block: 3px; display: flex; }
.slot__btn { flex: 1; display: grid; align-content: start; gap: .1rem; text-align: left; padding: .4rem .5rem; border: 2.5px solid var(--ink); border-radius: var(--r-s); cursor: pointer; position: relative;
  line-height: 1.3; transition: transform var(--t-fast) var(--pop), background var(--t-fast); min-height: 2.75rem; }
.slot--blue .slot__btn { background: var(--blue); color: var(--white); } .slot--cyan .slot__btn { background: var(--cyan); } .slot--orange .slot__btn { background: var(--orange); }
.slot--lime .slot__btn { background: var(--lime); } .slot--pink .slot__btn { background: var(--pink); } .slot--yellow .slot__btn { background: var(--yellow); }
.slot__time { font-size: .625rem; padding-right: 1.4rem; }
.slot__act { font-size: .8125rem; font-weight: 800; line-height: 1.25; }
.slot__venue { display: none; }
.slot__add { position: absolute; right: .3rem; top: .3rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid currentColor; }
.slot__add::before, .slot__add::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.slot__add::after { transform: translate(-50%, -50%) rotate(90deg); }
.slot__btn[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink), 4px 4px 0 3px var(--ink); transform: translate(-2px, -2px); z-index: 1; }
.slot__btn[aria-pressed="true"] .slot__add { background: var(--ink); border-color: var(--ink); }
.slot__btn[aria-pressed="true"] .slot__add::before { width: 5px; transform: translate(-90%, 0) rotate(45deg); background: var(--lime); }
.slot__btn[aria-pressed="true"] .slot__add::after { width: 9px; transform: translate(-30%, -50%) rotate(-50deg); background: var(--lime); }
.ttday[hidden] { display: none; }
.plan { position: sticky; top: calc(var(--header-h) + 1.5rem); border: 3px solid var(--ink); border-radius: var(--r-l); padding: 1.25rem 1.25rem 1.4rem; background: var(--white); box-shadow: var(--shadow); scroll-margin-top: calc(var(--header-h) + 2rem); }
.plan__head { display: flex; align-items: center; gap: .6rem; }
.plan__chara { width: 4.25rem; margin: -.4rem 0 -.2rem -.3rem; }
.plan__title { font-size: 1.1875rem; font-weight: 800; line-height: 1.4; }
.plan__sample { margin-top: .9rem; padding: .5rem .75rem; border-radius: var(--r-s); background: var(--yellow); font-size: .8125rem; font-weight: 700; line-height: 1.6; }
.plan__sample[hidden] { display: none; }
.plan__empty { margin-top: .9rem; font-size: .9375rem; line-height: 1.8; color: var(--soft); }
.plan__list { margin-top: 1rem; display: grid; }
.plan__item { display: grid; grid-template-columns: 1fr auto; gap: .1rem .5rem; align-items: center; padding: .65rem .8rem; border-radius: var(--r-s); border: 2px solid var(--ink); background: var(--paper); }
.plan__item .num { font-size: .75rem; }
.plan__act { font-weight: 800; font-size: .9375rem; line-height: 1.4; grid-column: 1; }
.plan__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; grid-column: 1; }
.plan__meta .pill { font-size: .6875rem; }
.plan__del { grid-column: 2; grid-row: 1 / span 2; min-height: 2.75rem; min-width: 2.75rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); font-size: .75rem; font-weight: 800; cursor: pointer; }
.plan__walk { display: flex; align-items: center; gap: .5rem; padding: .45rem 0 .45rem 1.1rem; font-size: .8125rem; font-weight: 700; position: relative; }
.plan__walk::before { content: ""; width: 4px; align-self: stretch; min-height: 1.6rem; background: radial-gradient(circle, var(--ink) 1.6px, transparent 2px) 0 0 / 4px 6px repeat-y; }
.plan__walk--late { color: var(--late); }
.plan__walk--late::after { content: "!"; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--pink); color: var(--ink); font-weight: 900; font-size: .75rem; order: -1; }
.plan__sum { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
.plan__sum[hidden] { display: none; }
.plan__sum div { background: var(--lime); border: 2px solid var(--ink); border-radius: var(--r-s); padding: .5rem .75rem; }
.plan__sum dt { font-size: .75rem; font-weight: 800; }
.plan__sum dd { font-weight: 800; font-size: .875rem; }
.plan__sum dd .num { font-size: 1.375rem; margin-right: .1rem; }
.plan__clear { margin-top: 1rem; width: 100%; }
.plan__clear[hidden] { display: none; }
.plan-bar { position: fixed; left: 50%; bottom: max(.75rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; display: none; max-width: calc(100% - 2rem); padding-inline: 1.1rem; }
@media (max-width: 1100px) {
  .planner { grid-template-columns: 1fr; }
  .plan { position: static; }
  .plan-bar.is-on { display: inline-flex; }
  .sec--tight:has(.plan-bar.is-on) { padding-bottom: calc(var(--sec-y) + 4rem); }
}
@media (max-width: 900px) {
  .planner { grid-template-columns: 1fr; }
  .grid { display: flex; flex-direction: column; gap: .5rem; background: none; }
  .grid__venue, .grid__hour { display: none; }
  .slot { padding: 0; }
  .slot__btn { grid-template-columns: 6.5rem 1fr; align-items: center; padding: .7rem 3rem .7rem .9rem; column-gap: .75rem; }
  .slot__time { font-size: .75rem; grid-row: 1 / span 2; }
  .slot__act { font-size: 1rem; }
  .slot__venue { display: flex; gap: .35rem; font-size: .75rem; font-weight: 700; }
  .slot__add { top: 50%; bottom: auto; right: .9rem; transform: translateY(-50%); width: 1.6rem; height: 1.6rem; }
}

/* ============ 会場マップのページ ============ */
.map--full { margin-top: .5rem; }
.legend { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 1rem; font-size: .875rem; font-weight: 700; }
.legend li { display: inline-flex; align-items: center; gap: .45rem; }
.mk { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); font-size: .6875rem; font-weight: 800; }
.mk--rest { background: var(--lime); } .mk--aid { background: var(--pink); } .mk--info { background: var(--yellow); }
.mk--bf { width: 2rem; height: 6px; border: 0; border-radius: 3px; background: var(--bf); }
.access { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.access .sec-head { grid-column: 1 / -1; margin-bottom: 0; }
.access__list div { display: grid; grid-template-columns: 9rem 1fr; gap: .5rem 1rem; padding: 1rem 0; border-bottom: 2px dashed var(--line); }
.access__list div:first-child { border-top: 2px dashed var(--line); }
.access__list dt { font-weight: 800; }
.access__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 3px solid var(--ink); border-radius: var(--r-l); }
@media (max-width: 860px) { .access { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .access__list div { grid-template-columns: 1fr; gap: .2rem; } }

/* ============ チケットのページ ============ */
.table-wrap { overflow-x: auto; border: 3px solid var(--ink); border-radius: var(--r-l); }
.price { width: 100%; border-collapse: collapse; min-width: 34rem; }
.price th, .price td { padding: 1.1rem 1.4rem; text-align: left; border-bottom: 2px dashed var(--line); vertical-align: middle; line-height: 1.6; }
.price thead th { background: var(--ink); color: var(--white); font-size: .875rem; border-bottom: 0; }
.price tbody tr:last-child > * { border-bottom: 0; }
.price tbody th { font-weight: 800; }
.price td.num { font-size: 1.375rem; font-weight: 800; white-space: nowrap; }
.dot { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid var(--ink); margin-right: .6rem; vertical-align: -.1em; }
.dot--blue { background: var(--blue); } .dot--pink { background: var(--pink); } .dot--orange { background: var(--orange); } .dot--lime { background: var(--lime); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.step { border: 3px solid var(--ink); border-radius: var(--r-l); padding: 0 1.4rem 1.5rem; background: var(--white); }
.step--pink { background: var(--pink); } .step--orange { background: var(--orange); } .step--cyan { background: var(--cyan); }
.step__chara { width: 56%; margin: -20% auto .25rem; }
.step__no { font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.step__title { font-size: 1.25rem; font-weight: 800; margin: .3rem 0 .4rem; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; row-gap: 4.5rem; } .step__chara { width: 34%; margin-top: -12%; } }
.care { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.care__photo { position: sticky; top: calc(var(--header-h) + 2rem); }
.care__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 3px solid var(--ink); border-radius: var(--r-l); }
.care__list { display: grid; gap: .75rem; }
.care__list li { padding: .9rem 1.1rem; border: 2px solid var(--ink); border-radius: var(--r-m); line-height: 1.8; }
.care__list strong { display: block; font-weight: 800; }
@media (max-width: 860px) { .care { grid-template-columns: 1fr; } .care__photo { position: static; } }
@media (max-width: 600px) {
  .price { min-width: 0; }
  .price thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .price tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: 1rem 1.1rem; border-bottom: 2px dashed var(--line); }
  .price tbody tr:last-child { border-bottom: 0; }
  .price th, .price td { padding: 0; border: 0; }
  .price td.num { grid-column: 2; grid-row: 1; }
  .price td:last-child { grid-column: 1 / -1; font-size: .875rem; color: var(--soft); }
}
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 2rem; }
.faq__item { border: 2.5px solid var(--ink); border-radius: var(--r-m); background: var(--white); }
.faq__item + .faq__item { margin-top: .75rem; }
.faq__item summary { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; font-weight: 800; cursor: pointer; list-style: none; line-height: 1.5; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; margin-left: auto; font: 800 1.25rem/1 var(--en); }
.faq__item[open] summary::after { content: "−"; }
.faq__q { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--orange); border: 2px solid var(--ink); font: 800 .875rem/1 var(--en); }
.faq__item p { padding: 0 1.25rem 1.2rem 4rem; line-height: 1.85; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .faq__item p { padding-left: 1.25rem; } }

/* ============ 触れたとき（マウスのみ） ============ */
@media (hover: hover) {
  .btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
  .btn--white:hover { box-shadow: 4px 4px 0 var(--ink); }
  .btn:hover .arw, .act__link:hover .arw { transform: translateX(3px); }
  .gnav__link:hover::after { transform: none; }
  .act__link:hover img, .vcard a:hover img { transform: scale(1.04); }
  .act__link:hover .act__go { background: var(--lime); }
  .pin__btn:hover .pin__name { background: var(--lime); }
  .slot__btn:hover { transform: translateY(-2px); }
  .chip:hover, .tab:hover { box-shadow: 3px 3px 0 currentColor; }
}

/* ============ 動き（減らす設定では止める） ============ */
@media (prefers-reduced-motion: no-preference) {
  .js-motion [data-reveal] { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--pop); }
  .js-motion [data-reveal].is-in { opacity: 1; transform: none; }
  .marquee__track { animation: flow 38s linear infinite; }
  .fv__gull, .tip__chara, .band__chara, .step__chara { animation: bob 3.2s ease-in-out infinite; }
  .fv__buoy { animation: sway 4s ease-in-out infinite; transform-origin: 50% 80%; }
  .tip:nth-child(2n) .tip__chara { animation-delay: -1.4s; }
  .eq__bar { animation: level 1.6s ease-in-out infinite alternate; }
  .eq__bar:nth-child(2n) { animation-duration: 1.1s; } .eq__bar:nth-child(3n) { animation-duration: 1.9s; animation-delay: -.6s; }
  .map__route { animation: march 1.8s linear infinite; }
}
@keyframes flow { to { transform: translateX(-50%); } }
@keyframes bob { 50% { translate: 0 -8px; } }
@keyframes sway { 50% { rotate: 8deg; } }
@keyframes level { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@keyframes march { to { stroke-dashoffset: -.026; } }