/* ==========================================================================
   メレグノン：ハート・オブ・アイス コンサート
   色は Key Art（版元素材）の「青空・雪・盾の濃紺・盾の金文字」から取る（2026-10-15）
   ライセンサーのデザイン情報が届いたら :root の色と --en / --mincho だけ差し替える
   PC コンテンツ 1200px ／ SP 375px（左右 15px）
   ========================================================================== */

:root {
  --navy: #262c45;        /* 盾の濃紺（Key Art #383f5b を本文用に締めた色） */
  --deep: #2f4a8c;
  --sky: #3f7fe6;         /* Key Art の空 #5692f6 を文字で読める濃さに */
  --sky-light: #9dc0f7;
  --ice: #eef2fb;         /* 雪の明るい面（青みの白） */
  --frost: #f6f7fc;
  --snow-shade: #c3d1f4;  /* 雪の影 */
  --line: #cfd9ef;
  --gold: #f5bd55;        /* 盾の金文字。差し色に少しだけ */
  --logo: #389bcd;        /* ロゴの色 */
  --leaf: #8fbe6d;        /* キュゴの葉 */
  --text: #1f2538;
  --muted: #5a6480;
  --gutter: clamp(1.5rem, 2.5vw, 3rem);
  --en: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* 1rem = 10px（にこいちコーディングルール） */
html { font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--text);
  background: #fff;
}
[hidden] { display: none !important; }
img, svg { max-width: 100%; height: auto; vertical-align: top; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
figure { margin: 0; }
small { font-size: .8em; }
.sp { display: none; }

.inner {
  width: min(100% - var(--gutter) * 2, 1200px);
  margin-inline: auto;
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- オープニング（幕が上がる）----------
   html.is-loading は head の小さなスクリプトが付ける（同じタブで1回だけ）。JS が動かなければ出ない。
   背景は単色。楽器4つ→ロゴ→ひとこと の順に出て、main.js の合図で幕が上がる */
.loader { display: none; }
.is-loading { overflow: hidden; }
.is-loading .loader, .loader.is-leaving {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--frost);
  transition: transform 1s cubic-bezier(.75, 0, .2, 1);
}
.loader::after {   /* 幕のすそ：ヒーローの境目と同じ雪の影の線 */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--snow-shade);
}
.loader.is-done { transform: translateY(-100%); }
.loader { cursor: pointer; }   /* 押したらすぐ幕を上げる */
.loader__inner { position: relative; display: grid; justify-items: center; width: min(100% - 48px, 440px); text-align: center; }
.loader__inst { display: flex; justify-content: center; gap: clamp(14px, 3vw, 24px); }
.loader__inst li { width: clamp(52px, 13vw, 64px); opacity: 0; transform: translateY(14px); animation: loader-in .7s cubic-bezier(.2,.7,.2,1) forwards; }
.loader__inst li:nth-child(2) { animation-delay: .18s; }
.loader__inst li:nth-child(3) { animation-delay: .36s; }
.loader__inst li:nth-child(4) { animation-delay: .54s; }
.loader__inst img { display: block; width: 100%; height: auto; }
.loader__logo { width: min(100%, 340px); margin-top: 28px; opacity: 0; animation: loader-in 1s ease .8s forwards; }
.loader__lead {
  margin-top: 14px;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(1.4rem, .4vw + 1.3rem, 1.7rem);
  letter-spacing: .2em;
  color: var(--deep);
  opacity: 0;
  animation: loader-in 1s ease 1.2s forwards;
}
.loader__bar { display: block; width: 120px; height: 2px; margin-top: 28px; background: var(--line); overflow: hidden; }
.loader__bar span { display: block; height: 100%; background: var(--sky); transform-origin: left; transform: scaleX(0); animation: loader-bar 2.2s ease-in-out forwards; }
.loader__snow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.loader__snow i {
  position: absolute;
  top: -12px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--sky-light);
  opacity: .55;
  animation: loader-snow var(--t) linear var(--d) infinite;
}
@keyframes loader-in { to { opacity: 1; transform: none; } }
@keyframes loader-bar { to { transform: scaleX(1); } }
@keyframes loader-snow { to { transform: translate3d(24px, 105vh, 0); } }
@media (prefers-reduced-motion: reduce) {
  .loader__inst li, .loader__logo, .loader__lead { opacity: 1; transform: none; animation: none; }
  .loader__snow { display: none; }
  .loader__bar span { animation: none; transform: none; }
  .is-loading .loader, .loader.is-leaving { transition: opacity .4s; }
  .loader.is-done { transform: none; opacity: 0; }
}

/* ---------- ボタン ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  max-width: 100%;
  height: 64px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
  transition: opacity .3s, transform .3s, box-shadow .3s;
}
.btn::after {
  content: "";
  position: absolute;
  right: 28px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn--ice {
  color: #fff;
  background: #3a74db;
  box-shadow: 0 6px 18px rgba(47, 74, 140, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn--ice:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(29, 79, 154, .45), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn--small { width: 240px; height: 52px; font-size: 1.5rem; }
.btn--small::after { right: 20px; }
.btn-wrap { text-align: center; }

/* ボタンに乗るキャラ（ボタンの上のふちに座る。文字には重ねない・絵は切らない）
   絵は縮小のみ。動きは位置の上下だけ */
.btn__buddy {
  position: absolute;
  right: 22px;
  bottom: calc(100% - 7px);
  height: 58px;
  pointer-events: none;
  animation: buddy-idle 3.2s ease-in-out var(--bd, 0s) infinite;
}
.btn__buddy img { display: block; width: auto; height: 100%; filter: drop-shadow(0 3px 4px rgba(38, 44, 69, .2)); }
.btn__buddy--beru { right: 18px; height: 50px; --bd: -.8s; }
.btn__buddy--nuobi { --bd: -1.6s; }
.btn__buddy--goyakai { --bd: -2.4s; }
.btn--small .btn__buddy { right: 16px; height: 46px; }
.btn--small .btn__buddy--beru { height: 40px; }
.btn:hover .btn__buddy, .btn:focus-visible .btn__buddy { animation: buddy-hop .55s cubic-bezier(.3, .6, .4, 1); }
.btn.is-disabled .btn__buddy { display: none; }   /* 押せない間は出さない（灰色に加工しない） */
/* キャラが乗る分、ボタンの上をあける */
.hero__btn, .news__btn, .intro .btn-wrap, .program .btn-wrap { padding-top: 54px; }
.hero__info .hero__btn { margin-top: 0; padding-top: 62px; }   /* 揺れても上の文に触れない */
.sale__btn { margin-top: 54px; }
.sale__vendors .btn-wrap { margin-top: 0; padding-top: 22px; }   /* 店名は中央、キャラは右端で横に並ぶ（重ならない） */
@keyframes buddy-idle { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
@keyframes buddy-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-12px); } 70% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .btn__buddy, .btn:hover .btn__buddy, .btn:focus-visible .btn__buddy { animation: none; }
}

/* 販売期間外のボタン。文言は変えられないので、押せないことを見た目で伝える */
.btn.is-disabled {
  pointer-events: none;
  filter: grayscale(1);
  opacity: .4;
  box-shadow: none;
}

/* ---------- セクション見出し ---------- */
.sec-title { text-align: center; }
.sec-title__en {
  display: block;
  font-family: var(--en);
  font-weight: 300;
  font-size: clamp(1.4rem, 0.4848vw + 1.2182rem, 1.8rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sky);
}
.sec-title__ja {
  display: block;
  margin-top: 4px;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.2121vw + 2.1455rem, 3.6rem);
  line-height: 1.6;
  letter-spacing: .12em;
  color: var(--navy);
}
.sec-title::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin: 16px auto 0;
  background: var(--sky-light);
  transform: rotate(45deg);
  box-shadow: 22px -22px 0 -4px var(--line), -22px 22px 0 -4px var(--line);
}
.sec-title--light .sec-title__en { color: var(--sky-light); }
.sec-title--light .sec-title__ja { color: #fff; }
.sec-title--light::after { background: #fff; box-shadow: 22px -22px 0 -4px rgba(255,255,255,.35), -22px 22px 0 -4px rgba(255,255,255,.35); }

/* ==========================================================================
   ヒーロー：Key Art をそのまま見せ、文字は絵の上に載せない（版元の絵を隠さない）
   ========================================================================== */
.hero { position: relative; background: var(--frost); }
.hero__kv { position: relative; overflow: hidden; background: #5692f6; }
.hero__kv img {
  display: block;
  width: 100%;
  height: min(calc(100vw * 1187 / 2400), 68svh);
  object-fit: cover;
  object-position: 78% 40%;   /* 盾とキュゴを残す */
}
.hero__body {
  position: relative;
  padding: clamp(2.8rem, 2.4vw + 1.6rem, 4.8rem) var(--gutter) clamp(3.6rem, 3vw + 2rem, 6rem);
  background: #fff;
}
.hero__body::before {   /* 絵と白地の境目に雪の影の線 */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--snow-shade);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px 64px;
  width: min(100%, 1200px);
  margin-inline: auto;
}
.hero__lead {
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(1.4rem, .5vw + 1.2rem, 1.8rem);
  letter-spacing: .2em;
  color: var(--deep);
}
.hero__title { margin-top: 10px; }
.hero__logo { display: block; width: min(100%, 440px); height: auto; }
.hero__title-ja {
  display: block;
  margin-top: 14px;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(1.6rem, .7vw + 1.2rem, 2.1rem);
  line-height: 1.6;
  letter-spacing: .08em;
  color: var(--navy);
}
.hero__title-en { display: block; margin-top: 6px; font-family: var(--en); font-size: clamp(1.2rem, .3vw + 1.1rem, 1.5rem); letter-spacing: .12em; color: var(--muted); }
.hero__info { text-align: center; color: var(--navy); }
.hero__date {
  display: inline-flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: .4rem 2rem;
  border-top: 1px solid var(--navy);
  border-bottom: 1px solid var(--navy);
  font-family: var(--en);
  font-size: clamp(2.2rem, 1.4vw + 1.6rem, 3.2rem);
  line-height: 1.3;
  letter-spacing: .08em;
}
.hero__date strong { font-weight: 600; font-size: 1.4em; }
.hero__dow { font-size: .6em; letter-spacing: .2em; }
.hero__venue { margin-top: 10px; font-weight: 700; font-size: clamp(1.5rem, .4vw + 1.35rem, 1.8rem); letter-spacing: .1em; }
.hero__sale { margin-top: 14px; font-size: 1.4rem; color: var(--muted); }
.hero__sale strong { color: var(--navy); }
.hero__btn { margin-top: 16px; }

/* 要確認ラベル。stg・ローカルでだけ出す（main.js が html.is-preview を付ける）。
   本番公開前に grep 'class="tbc' が0件になるまで片付ける */
.tbc { display: none; }
.is-preview .tbc {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 12px 0 0;
  padding: 4px 10px;
  border: 1px dashed #c0392b;
  background: #fff4f2;
  color: #a5281b;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: left;
}
.is-preview .tbc--center { margin-inline: auto; }

/* 追従CTA */
.cta-fixed {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 50;
  transition: opacity .3s, transform .3s, visibility .3s;
}
/* 隠す指示は JS が動いたときだけ html に付く（.js-cta）。JS が落ちても購入導線は出たまま */
.js-cta .cta-fixed { transform: translateY(150%); opacity: 0; visibility: hidden; }
.js-cta .cta-fixed.is-shown { transform: none; opacity: 1; visibility: visible; }

/* 出現アニメーション（1ブロック1回だけ）。JS が動かない環境では最初から見えている */
.js-anim [data-anim] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.js-anim [data-anim].is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-anim], .js-anim [data-anim].is-inview { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   News
   ========================================================================== */
.news { padding: clamp(4rem, 4vw + 2.5rem, 7rem) 0; background: var(--ice); }
.news__inner { display: grid; grid-template-columns: 200px 1fr; gap: 20px 40px; align-items: center; }
.news__en {
  display: block;
  font-family: var(--en);
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 1.1;
  letter-spacing: .1em;
  color: var(--deep);
}
.news__ja { display: block; font-size: 1.4rem; color: var(--muted); letter-spacing: .1em; }
.news__list li + li { border-top: 1px solid var(--line); }
.news__list a {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 14px 0;
  transition: color .3s;
}
.news__list a:hover { color: var(--sky); }
.news__item { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 14px 0; }
.news__text small { display: block; font-size: 1.3rem; color: var(--muted); }
.news__list time { font-family: var(--en); font-weight: 600; color: var(--sky); letter-spacing: .05em; }
.news__btn { grid-column: 1 / -1; margin-top: 10px; }

/* ==========================================================================
   Introduction：スクロールで場面が切り替わる（画面に固定して1場面ずつ）
   既定（JS なし・動きを減らす設定）は、場面を縦に並べて全部見せる。
   html.js-scrolly のときだけ固定・切り替えにする
   ========================================================================== */
.intro { background: var(--ice); }
.scrolly__stage { padding: clamp(6rem, 7vw + 3rem, 12rem) 0 0; }
.scrolly__head { text-align: center; }
.scrolly__head-en {
  display: block;
  font-family: var(--en);
  font-weight: 300;
  font-size: clamp(1.4rem, 0.4848vw + 1.2182rem, 1.8rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sky);
}
.scrolly__head-ja {
  display: block;
  margin-top: 4px;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.2121vw + 2.1455rem, 3.6rem);
  line-height: 1.6;
  letter-spacing: .12em;
  color: var(--navy);
}
.scrolly__steps {
  width: min(100% - var(--gutter) * 2, 1100px);
  margin: clamp(3.6rem, 3vw + 2.4rem, 6rem) auto 0;
}
.scrolly__step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.4rem, 4vw, 6.4rem);
}
.scrolly__step + .scrolly__step { margin-top: clamp(4rem, 5vw, 7rem); }
.scrolly__fig { display: grid; place-items: center; }
.scrolly__pic {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4%;
  width: 100%;
  height: clamp(24rem, 34vw, 46rem);
}
/* 絵は枠に収める（切らない・形を変えない） */
.scrolly__pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.scrolly__step--title .scrolly__pic { align-items: center; }
.scrolly__step--title .scrolly__pic img { width: min(100%, 520px); }
.scrolly__pic--duo img { max-width: 48%; }
.scrolly__pic--inst {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 4%;
}
.scrolly__pic--inst span { display: grid; justify-items: center; gap: 10px; text-align: center; }
.scrolly__pic--inst img { max-height: clamp(9rem, 12vw, 15rem); }
.scrolly__pic--inst small {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .05em;
  color: var(--deep);
}
.scrolly__main {
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(2rem, .8vw + 1.6rem, 2.6rem);
  line-height: 1.9;
  letter-spacing: .06em;
  color: var(--navy);
}
.scrolly__sub { margin-top: 1.2em; font-size: clamp(1.4rem, .3vw + 1.3rem, 1.6rem); line-height: 1.9; color: var(--muted); }
.scrolly__progress { display: none; }
.scrolly__main br.sp { display: inline; }   /* 場面の文は PC でも同じ位置で改行（1〜2字だけ次の行に残さない） */

/* --- 固定して1場面ずつ切り替える（main.js が html.js-scrolly を付けたときだけ） --- */
.js-scrolly .scrolly { --step-h: 75; position: relative; height: calc(var(--steps) * var(--step-h) * 1vh + 100vh); height: calc(var(--steps) * var(--step-h) * 1svh + 100svh); }
.js-scrolly .scrolly.is-quick { --step-h: 30; }   /* 2回目以降の訪問は短く（main.js） */
.js-scrolly .scrolly__stage {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100svh;
  padding: clamp(3.2rem, 3vw + 1.6rem, 5.6rem) 0 clamp(2.4rem, 2vw + 1.2rem, 4rem);
  overflow: hidden;
}
.js-scrolly .scrolly__steps { position: relative; margin-top: clamp(1.6rem, 2vw, 3.2rem); }
.js-scrolly .scrolly__step {
  position: absolute;
  inset: 0;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .6s ease, visibility 0s .6s;
}
.js-scrolly .scrolly__step.is-active { visibility: visible; opacity: 1; transition: opacity .6s ease, visibility 0s; }
.js-scrolly .scrolly__pic { height: min(52rem, 62vh); }
/* 入ってくるとき：絵が先に上がってきて、文字が後から1行ずつ */
.js-scrolly .scrolly__fig { transform: translateY(32px); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.js-scrolly .scrolly__main,
.js-scrolly .scrolly__sub { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.js-scrolly .is-active .scrolly__fig { transform: none; }
.js-scrolly .is-active .scrolly__main { opacity: 1; transform: none; transition-delay: .3s; }
.js-scrolly .is-active .scrolly__sub { opacity: 1; transform: none; transition-delay: .6s; }
/* 場面の中では絵だけがゆっくり動く（パララックス）。--p は場面の中の進み具合 0〜1 */
.js-scrolly .scrolly__pic { transform: translateY(calc((.5 - var(--p, .5)) * 36px)); }
.scrolly__skip { display: none; }
.js-scrolly .scrolly__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(100% - var(--gutter) * 2, 1100px);
  margin: clamp(1.6rem, 2vw, 2.4rem) auto 0;
}
.js-scrolly .scrolly__progress {
  display: block;
  flex: 1;
  height: 2px;
  background: var(--line);
}
/* 物語をとばす：2回目以降の人や、先に日程・チケットを見たい人の逃げ道 */
.js-scrolly .scrolly__skip {
  display: inline-block;
  flex: none;
  padding: .6em 1.2em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 1.3rem;
  line-height: 1.4;
  cursor: pointer;
}
.js-scrolly .scrolly__skip:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
@media (hover: hover) { .js-scrolly .scrolly__skip:hover { color: var(--text); border-color: currentColor; } }
.js-scrolly .scrolly__progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--sky);
  transform: scaleX(var(--total, 0));
  transform-origin: left;
}

.intro__inner { max-width: 900px; padding: clamp(4rem, 4vw + 2rem, 7rem) 0 clamp(6rem, 7vw + 3rem, 12rem); }
.intro__more { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.intro__more summary {
  position: relative;
  padding: 20px 56px 20px 24px;
  font-weight: 700;
  color: var(--deep);
  cursor: pointer;
  list-style: none;
}
.intro__more summary::-webkit-details-marker { display: none; }
.intro__more summary::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s;
}
.intro__more[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.intro__body { padding: 0 clamp(2.4rem, 3vw + 1.2rem, 5rem) clamp(2.4rem, 3vw + 1.2rem, 4rem); }
.intro__body p + p { margin-top: 1.2em; }
.intro__lead { font-family: var(--mincho); font-weight: 700; color: var(--navy); }
.intro .btn-wrap { margin-top: 48px; }

/* ==========================================================================
   Event Information
   ========================================================================== */
.event {
  padding: clamp(6rem, 7vw + 3rem, 12rem) 0;
  color: #fff;
  background: #262c45;
}
.event__box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(3.6rem, 3vw + 2.4rem, 6rem);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(2px);
}
.event__col { padding: clamp(3rem, 3vw + 1.8rem, 5.6rem) clamp(2rem, 4vw, 6rem); }
.event__col + .event__col { border-left: 1px solid rgba(255, 255, 255, .3); }
.event__tag {
  font-family: var(--en);
  font-size: 1.4rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sky-light);
}
.event__date { margin-top: 12px; font-family: var(--en); font-size: 3rem; line-height: 1.2; letter-spacing: .05em; }
.event__date strong { font-weight: 600; font-size: 2.2em; }
.event__date span:last-child { font-family: inherit; font-size: .7em; }
.event__times { margin-top: 16px; }
.event__times li { display: flex; align-items: center; gap: 12px; font-size: 1.8rem; }
.event__times li + li { margin-top: 6px; }
.event__times strong { font-size: 1.15em; }
.event__num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--sky-light);
  font-family: var(--en);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--sky-light);
}
.event__venue {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed rgba(255, 255, 255, .3);
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: .08em;
}
.event__col--full { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .3); }
.event__col + .event__col.event__col--full { border-left: 0; }
.event__parts { margin-top: 12px; }
.event__parts li { display: grid; grid-template-columns: 5em 1fr; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.event__part { color: var(--sky-light); }
.event__part-body { font-family: var(--mincho); font-weight: 700; font-size: 2rem; line-height: 1.5; }
.event__part-body--soon { font-family: var(--en); font-weight: 400; letter-spacing: .15em; }
.event__part-body small { display: block; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; font-size: 1.3rem; letter-spacing: .05em; color: rgba(255, 255, 255, .75); }
.event__break { color: rgba(255, 255, 255, .75); }
.cast { margin-top: 12px; }
.cast__row { display: grid; grid-template-columns: 5em 1fr; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.cast__row dt { color: var(--sky-light); }
.cast__row dd { font-family: var(--mincho); font-weight: 700; font-size: 2rem; line-height: 1.5; }
.cast__row dd small { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; font-size: 1.4rem; }

/* ==========================================================================
   Movie：Key Art の切り抜きを表紙にして、押したら YouTube を読み込む
   再生ボタンは盾（銅鑼）の上に置き、キャラクターに重ねない
   ========================================================================== */
.movie { padding: clamp(6rem, 6vw + 3rem, 10rem) 0; background: #1c2136; }
.movie__frame {
  position: relative;
  max-width: 960px;
  margin: clamp(3.2rem, 3vw + 2rem, 5.6rem) auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #1c2136;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 60px rgba(0, 0, 0, .35);
}
.movie__poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.movie__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.movie__play {
  position: absolute;
  left: 50%;
  top: 38%;   /* 銅鑼の中心。キュゴとベルは下の雪の上にいるので重ならない */
  display: grid;
  place-items: center;
  width: clamp(72px, 9vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--navy);
  transform: translate(-50%, -50%);
  transition: transform .3s;
}
.movie__play::before {   /* 再生の三角 */
  content: "";
  width: 34%;
  aspect-ratio: 1;
  margin-left: 8%;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.movie__play::after {    /* 波紋：音が広がる */
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  animation: movie-ring 2.4s ease-out infinite;
}
.movie__play-label {
  position: absolute;
  top: calc(100% + 12px);
  font-family: var(--en);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .3em;
  padding-left: .3em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.movie__play:hover { transform: translate(-50%, -50%) scale(1.06); }
@keyframes movie-ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.movie__cap { max-width: 960px; margin: 20px auto 0; color: #fff; text-align: center; }
.movie__cap-tag {
  display: inline-block;
  padding: 2px 14px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 4px;
  font-size: 1.3rem;
  letter-spacing: .15em;
}
.movie__cap-title { margin-top: 10px; font-family: var(--mincho); font-weight: 700; font-size: clamp(1.8rem, .6vw + 1.6rem, 2.4rem); letter-spacing: .08em; }
.movie__cap-title span { display: block; font-family: var(--en); font-weight: 300; font-size: 1.4rem; letter-spacing: .2em; color: var(--sky-light); }
.movie__cap-note { margin-top: 6px; font-size: 1.3rem; color: rgba(255, 255, 255, .7); }
@media (prefers-reduced-motion: reduce) { .movie__play::after { animation: none; opacity: 0; } }

/* ==========================================================================
   Story & Characters（版元のキャラクターカードの見せ方に合わせる：空色の地＋右上に楽器）
   ========================================================================== */
.story { padding: clamp(6rem, 7vw + 3rem, 12rem) 0; background: var(--frost); }
.story__lead {
  margin-top: clamp(3.6rem, 3vw + 2.4rem, 6rem);
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(1.7rem, .6vw + 1.5rem, 2.2rem);
  line-height: 2.1;
  text-align: center;
  color: var(--navy);
}
.story__sub { margin-top: 16px; font-size: 1.5rem; text-align: center; color: var(--muted); }
.chara {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.chara__item { display: flex; flex-direction: column; border-radius: 10px; background: #fff; box-shadow: 0 6px 20px rgba(38, 44, 69, .08); overflow: hidden; }
.chara__card {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #8db4f5;
}
.chara__img { position: absolute; top: 28px; left: 16px; width: calc(100% - 32px); height: calc(100% - 40px); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 6px 10px rgba(38, 44, 69, .18)); }
.chara__inst {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(38, 44, 69, .15);
}
.chara__inst img { width: 100%; height: 100%; object-fit: contain; }
.chara__body { padding: 20px 20px 24px; }
.chara__group { font-size: 1.3rem; font-weight: 700; color: var(--sky); letter-spacing: .08em; }
.chara__group span { margin-left: 8px; font-family: var(--en); font-weight: 400; font-size: 1.2rem; letter-spacing: .15em; text-transform: uppercase; }
.chara__name { margin-top: 2px; font-family: var(--mincho); font-weight: 700; font-size: 2.4rem; line-height: 1.4; letter-spacing: .1em; color: var(--navy); }
.chara__name-en { display: block; font-family: var(--en); font-weight: 600; font-size: 1.3rem; letter-spacing: .2em; color: var(--logo); }
.chara__role { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 700; font-size: 1.4rem; color: var(--deep); }
.chara__text { margin-top: 8px; font-size: 1.4rem; line-height: 1.85; }
/* 登場人物の動き：カードが出たらキャラが下からふわっと立ち上がり、楽器の丸がぽんと出る。
   そのあとキャラはゆっくり浮き沈み、楽器は小さく揺れる。触る（押す）と跳ねる。
   絵は縮小・位置・回転のみで、色や形は変えない。上にだけ動かすので下が切れない */
.js-anim .chara__img {
  opacity: 0;
  transform: scale(.88);
  transform-origin: 50% 100%;
  transition: opacity .7s ease-out calc(.15s + var(--cd, 0s)), transform .9s cubic-bezier(.2, .8, .25, 1.15) calc(.15s + var(--cd, 0s));
}
.js-anim .chara__inst {
  transform: scale(0) rotate(-40deg);
  transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) calc(.6s + var(--cd, 0s));
}
.js-anim .chara__item.is-inview .chara__img { opacity: 1; transform: none; animation: chara-float 4.8s ease-in-out calc(1.3s + var(--cd, 0s)) infinite; }
.js-anim .chara__item.is-inview .chara__inst { transform: none; animation: inst-sway 3.6s ease-in-out calc(1.4s + var(--cd, 0s)) infinite; }
.js-anim .chara__item.is-inview.is-hop .chara__img { animation: chara-hop .6s cubic-bezier(.3, .6, .4, 1); }
.js-anim .chara__item.is-inview.is-hop .chara__inst { animation: inst-wiggle .6s ease-in-out; }
@media (hover: hover) {
  .js-anim .chara__item.is-inview:hover .chara__img { animation: chara-hop .6s cubic-bezier(.3, .6, .4, 1); }
  .js-anim .chara__item.is-inview:hover .chara__inst { animation: inst-wiggle .6s ease-in-out; }
}
@media (min-width: 768px) {   /* 横に並ぶときだけ順番にずらす */
  .chara__item:nth-child(2) { --cd: .15s; }
  .chara__item:nth-child(3) { --cd: .3s; }
  .chara__item:nth-child(4) { --cd: .45s; }
}
@keyframes chara-float { 0%, 100% { transform: none; } 50% { transform: translateY(-7px); } }
@keyframes chara-hop { 0%, 100% { transform: none; } 35% { transform: translateY(-16px); } 65% { transform: translateY(-3px); } }
@keyframes inst-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes inst-wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-14deg) scale(1.08); } 60% { transform: rotate(10deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .js-anim .chara__img, .js-anim .chara__inst,
  .js-anim .chara__item.is-inview .chara__img, .js-anim .chara__item.is-inview .chara__inst { opacity: 1; transform: none; transition: none; animation: none !important; }
}
.story__credit { margin-top: 24px; font-size: 1.2rem; color: var(--muted); text-align: right; }
.story__cd { margin: 48px auto 0; max-width: 560px; padding-top: 32px; border-top: 1px solid currentColor; border-top-color: rgba(0,0,0,.12); text-align: center; }
.story__cd-head { font-size: 1.8rem; font-weight: 700; color: var(--deep); }
.story__cd-text { margin-top: 12px; font-size: 1.5rem; line-height: 1.9; }
.story__cd-link { margin-top: 16px; font-size: 1.6rem; }
.story__cd-link a { display: inline-block; min-height: 44px; padding: 10px 4px; color: var(--deep); text-decoration: none; }
.story__cd-label { text-decoration: underline; text-underline-offset: 4px; }
.story__cd-label::after { content: "↗"; margin-left: .3em; display: inline-block; text-decoration: none; }
.story__cd-note { display: block; margin-top: 4px; font-size: 1.2rem; color: var(--muted); text-decoration: none; }
/* 音色を聴く（KOA 10/17 試し入れ）：押したときだけ鳴らす。絵には重ねず、カード下の文字欄に置く */
.chara__body { position: relative; display: flex; flex: 1; flex-direction: column; }
.js-audio .chara__text { margin-bottom: 14px; }
.chara__play {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: auto;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--deep);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.chara__play:hover { border-color: var(--sky); }
.chara__play:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.chara__play-ico { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sky); }
.chara__play-ico::before { content: ""; margin-left: 2px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
.chara__play[aria-pressed="true"] { border-color: var(--sky); background: var(--ice); }
.chara__play[aria-pressed="true"] .chara__play-ico::before { margin-left: 0; width: 8px; height: 8px; border: 0; background: #fff; }
.chara__play[aria-pressed="true"] .chara__play-ico::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--sky-light); animation: play-ring 1.4s ease-out infinite; }
@keyframes play-ring { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chara__play[aria-pressed="true"] .chara__play-ico::after { animation: none; opacity: .6; } }
.js-audio .chara__card { cursor: pointer; }
.story__audio-note { margin-top: 20px; font-size: 1.2rem; color: var(--muted); }
.story__audio-note + .story__credit { margin-top: 4px; }
.chara__play, .story__audio-note { display: none; }
.js-audio .chara__play { display: inline-flex; }
.js-audio .story__audio-note { display: block; }
/* 出演者写真のクレジット */
.profile__photo-credit { margin-top: 6px; font-size: 1.1rem; color: var(--muted); text-align: right; }
.story .tbc { margin-left: auto; }
/* ==========================================================================
   Program
   ========================================================================== */
.program { padding: clamp(6rem, 7vw + 3rem, 12rem) 0; background: #fff; }
.program__part,
.program__box {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(2.4rem, 3vw + 1.2rem, 5rem);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.program__part { margin-top: clamp(3.6rem, 3vw + 2.4rem, 6rem); padding: clamp(2.4rem, 2vw + 1.6rem, 4rem); border: 1px solid var(--line); border-radius: 12px; text-align: center; background: var(--frost); }
.program__label {
  font-family: var(--mincho);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: .3em;
  text-align: center;
  color: var(--sky);
}
.program__soon { margin-top: 6px; font-family: var(--en); font-weight: 300; font-size: clamp(2.8rem, 2vw + 2rem, 4rem); letter-spacing: .2em; padding-left: .2em; color: var(--navy); }
.program__soon--sub { margin-top: 6px; font-size: clamp(2rem, 1vw + 1.6rem, 2.8rem); }
.program__soon-note { margin-top: 14px; font-size: 1.4rem; color: var(--muted); }
.program__break { display: flex; align-items: center; gap: 16px; max-width: 900px; margin: 24px auto; font-size: 1.4rem; letter-spacing: .3em; color: var(--muted); }
.program__break::before, .program__break::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.program__work {
  margin-top: 6px;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(1.8rem, .6vw + 1.6rem, 2.4rem);
  line-height: 1.6;
  text-align: center;
  color: var(--navy);
}
.program__work small { font-size: .65em; color: var(--muted); }
.program__wrap { position: relative; margin-top: 28px; transition: max-height .5s ease; overflow: hidden; --clamp-h: 34rem; }
.program__list { counter-reset: track; columns: 2; column-gap: 40px; }
.program__list li {
  counter-increment: track;
  display: grid;
  grid-template-columns: 2.6em 1fr;
  break-inside: avoid;
  padding: 8px 0;
  border-bottom: 1px dotted var(--line);
  line-height: 1.5;
}
.program__list li::before {
  content: counter(track, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--en);
  font-weight: 600;
  color: var(--sky);
}
.program__ja { font-weight: 700; }
.program__en { font-family: var(--en); font-size: 1.3rem; color: var(--muted); letter-spacing: .02em; }
.program__note { margin-top: 20px; font-size: 1.4rem; color: var(--muted); }
.program .btn-wrap { margin-top: 48px; }

/* ==========================================================================
   Profiles
   ========================================================================== */
.profiles {
  padding: clamp(6rem, 7vw + 3rem, 12rem) 0;
  background: #262c45;
}
.profiles__list { display: grid; gap: 32px; margin-top: clamp(3.6rem, 3vw + 2.4rem, 6rem); }
.profile {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  padding: 32px;
  border-radius: 12px;
  background: #fff;
}
.profile__img img { display: block; width: 100%; aspect-ratio: 634 / 582; object-fit: cover; border-radius: 8px; }
.profile__img--wide img { aspect-ratio: 3 / 2; }   /* 東京フィル：楽団の全員を入れるため横長 */
.profiles__sub { margin-top: clamp(5.6rem, 4vw + 4rem, 8rem); color: #fff; text-align: center; }   /* 出演者ではない紹介枠の見出し */
.profiles__sub-en { display: block; font-family: var(--en); font-size: 1.3rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sky-light); }
.profiles__sub-ja { display: block; margin-top: 6px; font-family: var(--mincho); font-weight: 700; font-size: clamp(1.8rem, .6vw + 1.6rem, 2.2rem); letter-spacing: .1em; }
.profiles__list--sub { margin-top: clamp(2rem, 2vw + 1.2rem, 3.2rem); }
.profile__img--ph {
  display: grid;
  place-items: center;
  aspect-ratio: 634 / 582;
  border-radius: 8px;
  background: var(--ice);
  font-family: var(--en);
  font-size: 2rem;
  letter-spacing: .1em;
  color: rgba(29, 63, 115, .35);
}
.profile__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.profile__name { font-family: var(--mincho); font-weight: 700; font-size: 2.6rem; letter-spacing: .08em; color: var(--navy); }
.profile__name-en { display: block; margin-top: 4px; font-family: var(--en); font-weight: 400; font-size: 1.4rem; letter-spacing: .1em; color: var(--muted); }   /* 英字の名前（KOA指定の綴り）をカタカナの下に控えめに */
.profile__role { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; color: var(--sky); }
.profile__role-ja { font-weight: 700; white-space: nowrap; }   /* 長い肩書きを途中で折らない */
.profile__role-en { font-family: var(--en); font-size: 1.3rem; letter-spacing: .15em; text-transform: uppercase; }
.profile__detail {
  --clamp-h: 15.2rem;   /* 1.6rem × 行送り1.9 × 5行 */
  position: relative;
  margin-top: 16px;
  overflow: hidden;
  transition: max-height .5s ease;
}
.profile__text { font-size: 1.6rem; }
.profile__text--tbd { color: var(--muted); }
.profile__text--link { margin-top: 12px; font-size: 1.4rem; word-break: break-all; }
.profile__text--link a { color: var(--sky); text-decoration: underline; }

/* 折りたたみ（出演者紹介・曲目一覧）。.js-clamp は JS が動いたときだけ付く */
.js-clamp .is-clampable:not(.is-open) { max-height: var(--clamp-h); }
.is-measuring { transition: none !important; }
.is-clampable::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 85%);
  pointer-events: none;
  transition: opacity .3s;
}
.is-open::after { opacity: 0; }
.profile__toggle {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--deep);
  transition: background .3s, color .3s;
}
.profile__toggle::after { content: "＋"; font-size: 1.3rem; line-height: 1; }
.profile__toggle[aria-expanded="true"]::after { content: "－"; }
.profile__toggle:hover { background: var(--deep); color: #fff; }

/* ==========================================================================
   Ticket
   ========================================================================== */
.ticket { padding: clamp(6rem, 7vw + 3rem, 12rem) 0; background: var(--ice); }
.ticket__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: clamp(3.6rem, 3vw + 2.4rem, 6rem);
}
.ticket__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(29, 63, 115, .08);
  text-align: center;
}
.ticket__seat { display: flex; flex-direction: column; align-items: center; color: var(--deep); }
.ticket__seat strong { font-family: var(--en); font-weight: 600; font-size: 4rem; line-height: 1.1; }
.ticket__seat span { font-size: 1.4rem; }
.ticket__item--family .ticket__seat strong { font-family: var(--mincho); font-size: 3rem; line-height: 1.4; }
.ticket__price { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); min-width: 70%; }
.ticket__price strong { font-family: var(--en); font-weight: 600; font-size: 3.6rem; color: var(--navy); }
.ticket__price span { margin-left: 4px; }
.ticket__notes { margin-top: 24px; font-size: 1.4rem; color: var(--muted); }
.ticket__notes a { color: var(--deep); text-decoration: underline; }

.sale { margin-top: 56px; }
.sale__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sale__row + .sale__box,
.sale > .sale__box + .sale__box { margin-top: 24px; }
.sale__box { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgba(29, 63, 115, .08); }
.sale__head {
  padding: 14px 20px;
  background: var(--deep);
  color: #fff;
  font-weight: 700;
  font-size: 1.8rem;
  text-align: center;
  letter-spacing: .08em;
}
.sale__body { padding: 28px 24px 32px; text-align: center; }
.sale__date { font-weight: 700; font-size: 1.7rem; color: var(--navy); }
.sale__memo { font-size: 1.4rem; color: var(--muted); }
.sale__btn { margin-top: 20px; }
.sale__vendors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px; }
.sale__vendors > li[hidden] { display: none; }
.sale__vendors.is-single { grid-template-columns: minmax(0, 360px); justify-content: center; }
.sale__vendor { font-weight: 700; }
.sale__vendors .btn-wrap { margin-top: 8px; }
.sale__vendors .btn { width: 100%; }
.ticket__contact { margin-top: 40px; font-size: 1.5rem; text-align: center; }
.ticket__contact a { color: var(--deep); text-decoration: underline; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding: 48px 0 40px; background: var(--navy); color: #fff; text-align: center; }
.footer__org { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 32px; font-size: 1.4rem; }
.footer__credit { margin-top: 16px; font-family: var(--en); font-size: 1.2rem; color: rgba(255, 255, 255, .75); }
.footer .tbc { margin-inline: auto; }
.footer__credit + .footer__copy { margin-top: 4px; }
.footer__copy { margin-top: 16px; font-family: var(--en); font-size: 1.3rem; color: rgba(255, 255, 255, .6); }

/* ==========================================================================
   中間幅
   ========================================================================== */
@media (max-width: 1100px) {
  .sale__vendors { grid-template-columns: repeat(2, 1fr); }
  .chara { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__logo { margin-inline: auto; }
}

/* ==========================================================================
   SP（767px 以下）
   ========================================================================== */
@media (max-width: 767px) {
  .sp { display: inline; }
  .pc { display: none; }
  body { padding-bottom: 64px; font-size: 1.5rem; }

  .btn { width: 300px; height: 58px; font-size: 1.5rem; }
  .btn--small { width: 100%; height: 54px; }

  /* 追従CTA → 下部バー */
  .cta-fixed {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    border-radius: 0;
  }

  .hero__kv img { height: auto; aspect-ratio: 4 / 5; max-height: 72svh; object-position: 50% 30%; }
  .hero__body { padding: 24px 15px 32px; }
  .hero__inner { gap: 20px; }
  .hero__logo { width: min(78%, 320px); }
  .hero__title-ja { letter-spacing: .04em; }
  .hero__title-en { text-align: center; }
  .hero__sale { font-size: 1.3rem; }
  .hero__sale strong { display: block; }

  .movie__play-label { top: auto; bottom: calc(100% + 6px); font-size: 1.1rem; }   /* 表紙の下にキュゴの頭が来るので、スマホは文字を丸の上に出す */

  .news__inner { grid-template-columns: 1fr; text-align: center; }
  .news__list { text-align: left; }
  .news__list a, .news__item { gap: 0; }

  /* SP：絵を上、文字を下に。文字は絵に重ねない */
  .scrolly__step { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .scrolly__pic { height: 30rem; }
  .scrolly__main { font-size: 1.9rem; line-height: 1.85; letter-spacing: .04em; }
  .scrolly__sub { font-size: 1.4rem; text-align: left; }
  .scrolly__pic--inst { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .scrolly__pic--inst small { font-size: 1.1rem; }
  .js-scrolly .scrolly__stage { padding: 20px 0 calc(20px + env(safe-area-inset-bottom)); }   /* 場面の間は購入ボタンの帯を引っ込める（main.js） */
  .js-scrolly .scrolly__steps { margin-top: 12px; }
  .js-scrolly .scrolly__step { grid-template-rows: auto auto; align-content: center; gap: 20px; }
  .js-scrolly .scrolly__pic { height: clamp(20rem, 100vh - 40rem, 42rem); height: clamp(20rem, 100svh - 40rem, 42rem); align-items: center; }
  .js-scrolly .scrolly__txt { min-height: 12.5em; }
  .scrolly__step--title .scrolly__sub { text-align: center; }
  .scrolly__sub--short { text-align: center; }
  .scrolly__pic--inst img { max-height: 12rem; }
  .scrolly__head-ja { font-size: 2.2rem; }
  .intro__more summary { padding: 16px 48px 16px 18px; }
  .intro__body { padding: 0 18px 24px; }

  .event__box { grid-template-columns: 1fr; }
  .event__col { padding: 28px 20px; }
  .event__col + .event__col { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .3); }
  .event__times li { font-size: 1.6rem; }
  .event__venue { font-size: 1.7rem; }
  .cast__row { grid-template-columns: 4em 1fr; }
  .cast__row dd { font-size: 1.7rem; }

  .chara { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
  .chara__item { display: grid; grid-template-columns: 42% 1fr; }
  .chara__card { aspect-ratio: auto; min-height: 180px; }
  .chara__img { top: 56px; left: 8px; width: calc(100% - 16px); height: calc(100% - 66px); object-position: center; }
  .chara__inst { top: 8px; left: 8px; right: auto; width: 44px; height: 44px; padding: 6px; }
  .chara__body { padding: 16px 14px 18px; }
  .chara__name { font-size: 2.1rem; }
  .chara__text { font-size: 1.4rem; line-height: 1.8; }
  .story__lead { text-align: center; }
  .story__sub { font-size: 1.4rem; }
  .story__credit { text-align: left; }
  .event__parts li { grid-template-columns: 4em 1fr; }
  .event__part-body { font-size: 1.7rem; }

  .program__box { padding: 24px 16px; }
  .program__list { columns: 1; }
  .program__wrap { --clamp-h: 30rem; }

  .profile { grid-template-columns: 1fr; gap: 20px; padding: 20px 16px; }
  .profile__name { font-size: 2.2rem; }
  .profile__text { font-size: 1.4rem; line-height: 1.8; }
  .profile__detail { --clamp-h: 17.6rem; }   /* 1.4rem × 行送り1.8 × 7行 */

  .ticket__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ticket__item--family { grid-column: 1 / -1; }
  .ticket__seat strong { font-size: 3.2rem; }
  .ticket__price strong { font-size: 2.8rem; }
  .ticket__notes { font-size: 1.3rem; }

  .sale__row { grid-template-columns: 1fr; gap: 20px; }
  .sale__row + .sale__box,
  .sale > .sale__box + .sale__box { margin-top: 20px; }
  .sale__head { font-size: 1.6rem; }
  .sale__body { padding: 20px 15px 24px; }
  .sale__date { font-size: 1.5rem; }
  .sale__vendors { grid-template-columns: 1fr; row-gap: 28px; }
  .ticket__contact { font-size: 1.4rem; text-align: left; }

  .footer { padding-bottom: 32px; }
  .footer__org { flex-direction: column; font-size: 1.3rem; }
}

/* 注記は12px未満にしない（small の .8em で小さくなりすぎるため） */
.footer__credit small, .footer__copy small { font-size: 1.2rem; }