/* 松本大戦略 公式サイト — スカジャン刺繍 × アメコミ */
:root{
  --ink:#0c0a08; --ink2:#16120d; --ink3:#201a12;
  --paper:#f6efdd; --paper2:#ebe2cc; --line:#141008;
  --gold:#d4a72c; --gold2:#f3d26a; --gold3:#8a6a12;
  --red:#d8321a; --orange:#f08a24; --pink:#f5a3c7; --blue:#2f5fb5; --green:#3f9252;
  --moji:#f4eee0; --nibi:#b3a78f;
  --display:"Dela Gothic One","Hiragino Sans",system-ui,sans-serif;
  --bubble:"Yusei Magic","Hiragino Maru Gothic ProN","Zen Maru Gothic",sans-serif;
  --body:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --latin:"Bangers","Dela Gothic One",sans-serif;
  --s--1:clamp(.78rem,.74rem + .2vw,.86rem);
  --s-0:clamp(.95rem,.9rem + .25vw,1.05rem);
  --s-1:clamp(1.15rem,1.05rem + .5vw,1.4rem);
  --s-2:clamp(1.45rem,1.2rem + 1.1vw,2.1rem);
  --s-3:clamp(2rem,1.4rem + 2.6vw,3.4rem);
  --s-4:clamp(2.6rem,1.6rem + 4.5vw,5rem);
  --gap:clamp(.7rem,2.2vw,1.2rem);
  --wrap:68rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--moji);font-family:var(--body);font-size:var(--s-0);
  line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--gold2)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:.5rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}

/* 金の雷文（チェーンステッチ）ボーダー */
.kin{border:10px solid transparent;
  border-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><rect width='30' height='30' fill='%230c0a08'/><path d='M2 2h26v26H2z M6 6h18v18H6z M10 10h10v10H10z M14 14h2v2h-2z' fill='none' stroke='%23d4a72c' stroke-width='2'/></svg>") 10 round;
}
.kin-thin{border:6px solid transparent;
  border-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><rect width='18' height='18' fill='%230c0a08'/><path d='M1.5 1.5h15v15h-15z M5 5h8v8H5z' fill='none' stroke='%23d4a72c' stroke-width='1.5'/></svg>") 6 round;
}

/* ヘッダー */
.top{position:sticky;top:0;z-index:40;background:rgba(12,10,8,.94);backdrop-filter:blur(8px);
  border-bottom:3px solid var(--gold)}
.top-in{max-width:var(--wrap);margin:0 auto;padding:.45rem var(--gap);display:flex;align-items:center;gap:.7rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--moji);flex:0 0 auto}
.brand img{width:2.6rem;height:2.6rem;border-radius:50%;border:2px solid var(--gold)}
.brand b{font-family:var(--display);font-weight:400;font-size:var(--s-1);letter-spacing:.04em;line-height:1.15;white-space:nowrap}
.brand small{display:block;font-family:var(--latin);font-size:.72rem;letter-spacing:.12em;color:var(--gold2)}
.top nav{margin-left:auto;display:none;gap:.1rem;min-width:0;overflow-x:auto;scrollbar-width:none}
.top nav::-webkit-scrollbar{display:none}
.top nav a{color:var(--nibi);text-decoration:none;font-size:var(--s--1);padding:.45rem .44rem;letter-spacing:.04em;
  border-bottom:3px solid transparent;white-space:nowrap}
.top nav a:hover{color:var(--moji)} .top nav a.on{color:var(--gold2);border-color:var(--gold)}
.menu-btn{margin-left:auto;background:var(--gold);color:var(--ink);border:3px solid var(--line);font-family:var(--display);
  font-size:.95rem;padding:.35rem .7rem;box-shadow:3px 3px 0 var(--line);cursor:pointer;border-radius:4px}
@media(min-width:78rem){.top nav{display:flex}.menu-btn{display:none}}
/* ★2026-09-27 メニューに「ドラマ」を足しても、足す前と同じ項目まで見えるよう、左右の余白を少し詰めた（1300px幅で実測） */
@media(min-width:78rem) and (max-width:92rem){.top nav a{padding:.45rem .31rem;font-size:.78rem}}
.drawer{position:fixed;inset:0;z-index:60;background:rgba(12,10,8,.96);display:none;padding:1rem;overflow:auto}
.drawer.on{display:block}
.drawer .close{position:absolute;top:1rem;right:1rem}
.drawer ul{list-style:none;margin:3.5rem auto 0;padding:0;max-width:28rem;display:grid;gap:.6rem}
.drawer a{display:block;background:var(--paper);color:var(--line);text-decoration:none;font-family:var(--display);
  font-size:var(--s-1);padding:.8rem 1rem;border:4px solid var(--line);box-shadow:6px 6px 0 var(--gold)}
.drawer a small{display:block;font-family:var(--body);font-size:var(--s--1);font-weight:400;color:#5a4d33}

main{max-width:var(--wrap);margin:0 auto;padding:var(--gap) var(--gap) 5rem}

/* 漫画のコマ */
.page{display:grid;gap:var(--gap);grid-template-columns:repeat(12,1fr);grid-auto-flow:dense}
.koma{position:relative;background:var(--paper);color:var(--line);border:4px solid var(--line);
  box-shadow:7px 7px 0 var(--line), 7px 7px 0 3px var(--gold);padding:1rem 1.1rem;min-width:0;overflow:hidden}
.koma.dark{background:var(--ink2);color:var(--moji)}
.koma.gold{background:linear-gradient(160deg,#f7d974,#d4a72c 70%);color:var(--line)}
.koma.red{background:var(--red);color:#fff}
.koma::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:radial-gradient(circle,#000 1px,transparent 1.4px);background-size:7px 7px;
  -webkit-mask-image:linear-gradient(135deg,transparent 55%,#000);mask-image:linear-gradient(135deg,transparent 55%,#000)}
.koma.dark::before{opacity:.22;background-image:radial-gradient(circle,#fff 1px,transparent 1.4px)}
.koma>*{position:relative}
.c12{grid-column:span 12}.c8{grid-column:span 12}.c6{grid-column:span 12}.c4{grid-column:span 12}.c7{grid-column:span 12}.c5{grid-column:span 12}
@media(min-width:40rem){.c6{grid-column:span 6}.c4{grid-column:span 6}.c8{grid-column:span 12}.c7{grid-column:span 7}.c5{grid-column:span 5}}
@media(min-width:58rem){.c4{grid-column:span 4}.c8{grid-column:span 8}}
.tilt1{transform:rotate(-.6deg)} .tilt2{transform:rotate(.5deg)}
.koma h2,.koma h3{font-family:var(--display);font-weight:400;margin:0 0 .5rem;letter-spacing:.03em;line-height:1.2;text-wrap:balance}
.koma h2{font-size:var(--s-2)} .koma h3{font-size:var(--s-1)}
.koma p{margin:.3rem 0}
.koma a:not(.btn){color:#8d2a10}.koma.dark a:not(.btn){color:var(--gold2)}
.label{position:absolute;top:-4px;left:-4px;background:var(--line);color:var(--gold2);font-family:var(--latin);
  letter-spacing:.12em;font-size:.8rem;padding:.15rem .7rem .1rem;z-index:2}
.koma.link{cursor:pointer;transition:transform .15s}
.koma.link:hover{transform:translate(-2px,-2px) rotate(0)}
.koma.link .go{display:inline-block;margin-top:.5rem;font-family:var(--display);font-size:var(--s-0);color:var(--red);text-decoration:none}
.koma.link .go::after{content:" ▶"}

/* キャラ＋吹き出し */
.chara{display:grid;grid-template-columns:5.2rem 1fr;gap:.6rem;align-items:start}
.chara.r{grid-template-columns:1fr 5.2rem}
.chara.r > div:first-child{order:2}
.chara.r > .fuki{order:1}
.chara .face{width:5.2rem;height:5.2rem;border-radius:50%;border:3px solid var(--line);object-fit:cover;object-position:top;background:#000;
  box-shadow:3px 3px 0 var(--gold)}
.chara .name{display:block;font-family:var(--latin);letter-spacing:.08em;font-size:.75rem;text-align:center;margin-top:.25rem;color:#5a4d33}
.koma.dark .chara .name{color:var(--gold2)}
.fuki{position:relative;background:#fff;color:var(--line);border:3px solid var(--line);border-radius:1.1rem;
  padding:.65rem .9rem;font-family:var(--bubble);font-size:var(--s-0);line-height:1.6}
.fuki::before{content:"";position:absolute;left:-13px;top:1.3rem;width:0;height:0;border:10px solid transparent;border-right-color:var(--line);border-left:0}
.fuki::after{content:"";position:absolute;left:-8px;top:1.45rem;width:0;height:0;border:8px solid transparent;border-right-color:#fff;border-left:0}
.chara.r .fuki::before{left:auto;right:-13px;border:10px solid transparent;border-left-color:var(--line);border-right:0}
.chara.r .fuki::after{left:auto;right:-8px;border:8px solid transparent;border-left-color:#fff;border-right:0}
.fuki b{color:var(--red)}

/* 効果音バースト */
.bang{position:absolute;z-index:3;font-family:var(--display);color:var(--line);background:var(--gold2);
  padding:.6rem .9rem;transform:rotate(-8deg);font-size:var(--s-1);line-height:1;text-align:center;
  clip-path:polygon(50% 0,61% 14%,78% 6%,78% 24%,96% 22%,86% 40%,100% 50%,86% 60%,96% 78%,78% 76%,78% 94%,61% 86%,50% 100%,39% 86%,22% 94%,22% 76%,4% 78%,14% 60%,0 50%,14% 40%,4% 22%,22% 24%,22% 6%,39% 14%);
  width:7.2rem;height:7.2rem;display:flex;align-items:center;justify-content:center}
.bang.red{background:var(--red);color:#fff}

/* ヒーロー */
.hero{display:grid;gap:var(--gap);grid-template-columns:1fr;align-items:stretch}
@media(min-width:52rem){.hero{grid-template-columns:1.15fr 1fr}}
.hero .kv{position:relative;border:4px solid var(--line);box-shadow:7px 7px 0 var(--line),7px 7px 0 3px var(--gold);background:#000;min-height:14rem}
.hero .kv img,.hero .kv video{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media(min-width:52rem){.hero .kv img,.hero .kv video{aspect-ratio:auto;position:absolute;inset:0}}
.hero .info{display:flex;flex-direction:column;gap:.5rem}
.title{font-family:var(--display);font-weight:400;font-size:var(--s-4);line-height:1.02;margin:0;letter-spacing:.02em;
  color:var(--gold2);text-shadow:3px 3px 0 var(--line),-2px -2px 0 var(--line),2px -2px 0 var(--line),-2px 2px 0 var(--line),5px 5px 0 var(--red)}
.title small{display:block;font-family:var(--latin);font-size:.42em;letter-spacing:.14em;color:#fff;text-shadow:2px 2px 0 var(--line)}
.date{font-family:var(--display);font-size:var(--s-2);line-height:1.25;margin:0;color:var(--line)}
.date span{display:inline-block;background:var(--line);color:var(--gold2);padding:0 .45rem;margin-right:.3rem;font-size:.8em}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.45rem;margin:.3rem 0}
.fact{background:#fff;border:3px solid var(--line);padding:.45rem .6rem;line-height:1.3}
.fact .k{display:block;font-size:var(--s--1);color:#5a4d33;letter-spacing:.06em}
.fact .v{display:block;font-family:var(--display);font-size:var(--s-1);color:var(--line)}
.fact.free{background:var(--gold2)}
.fact.free .v{color:var(--red)}
.cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-decoration:none;font-family:var(--display);
  font-size:var(--s-1);padding:.75rem 1.3rem;border:4px solid var(--line);box-shadow:5px 5px 0 var(--line);border-radius:6px;
  background:var(--red);color:#fff;line-height:1.2;flex:1 1 12rem;text-align:center;transition:transform .12s}
.btn:hover{transform:translate(-2px,-2px)}
.btn.gold{background:var(--gold2);color:var(--line)} .btn.green{background:#06C755;color:#fff} .btn.white{background:#fff;color:var(--line)}
.btn small{font-family:var(--body);font-size:.7em;font-weight:700;display:block}

/* 出演者 */
.bands{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
.band{background:#fff;border:4px solid var(--line);box-shadow:5px 5px 0 var(--line);color:var(--line);overflow:hidden;position:relative}
.band img{aspect-ratio:4/3;object-fit:cover;width:100%;border-bottom:4px solid var(--line);background:#111}
.band .ph{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#ddd 0 8px,#eee 0 16px);border-bottom:4px solid var(--line);color:#777;font-family:var(--display)}
.band .no{position:absolute;top:.4rem;left:.4rem;background:var(--red);color:#fff;font-family:var(--latin);font-size:1.1rem;padding:.1rem .6rem;border:3px solid var(--line);letter-spacing:.05em}
.band .no.oa{background:var(--gold2);color:var(--line)}
.band .bd{padding:.6rem .8rem}
.band h3{font-family:var(--display);font-weight:400;font-size:var(--s-0);margin:0;line-height:1.3}
.band .t{font-family:var(--latin);color:var(--red);letter-spacing:.08em}
.band .d{font-size:var(--s--1);color:#4a3f2a;margin:.2rem 0 0;line-height:1.55}
.band .ln{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.35rem}
.band .ln a{font-size:var(--s--1);background:var(--paper2);border:2px solid var(--line);padding:0 .5rem;color:var(--line);text-decoration:none}

/* タイムテーブル */
.tt{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.tt li{display:grid;grid-template-columns:5.2rem 1fr;gap:.6rem;align-items:center;background:#fff;border:3px solid var(--line);padding:.35rem .7rem}
.tt .tm{font-family:var(--latin);font-size:1.25rem;letter-spacing:.06em;color:var(--red)}
.tt .nm{font-family:var(--display);font-size:var(--s-0);line-height:1.3}
.tt .nm small{display:block;font-family:var(--body);font-size:var(--s--1);color:#5a4d33;font-weight:400}
.tt li.sub{background:var(--paper2);border-style:dashed}
.tt li.hl{background:var(--gold2)}
/* ★2026-09-23 /timetable の出演者の行は各ページへのリンク（site.js の timetable(y, true)）。
   名前のリンクを行いっぱいに広げて、行のどこを押しても移る。見た目は今までの行のまま、出演者カードと同じく押せる行は少し浮く */
.tt li.go{position:relative;transition:transform .15s}
.tt li.go:hover{transform:translate(-2px,-2px)}
.tt li.go .nm a{color:inherit;text-decoration:none}
.tt li.go .nm a::after{content:"";position:absolute;inset:0}

/* 汎用 */
.grid2{display:grid;gap:var(--gap);grid-template-columns:1fr}
/* .grid2 の中で端から端まで広げる箱。★c12（span 12）を .grid2 の中で使うとスマホで崩れるので、こちらを使う */
.grid2>.g-full{grid-column:1/-1}
@media(min-width:44rem){.grid2{grid-template-columns:1fr 1fr}}
.tbl{width:100%;border-collapse:collapse;background:#fff;border:3px solid var(--line);font-size:var(--s-0)}
.tbl th,.tbl td{border:2px solid var(--line);padding:.45rem .6rem;vertical-align:top;text-align:left;color:var(--line)}
/* 暗い枠の中でも表は白地なので、文字は必ず黒に戻す */
.koma.dark .tbl,.koma.dark .tbl th,.koma.dark .tbl td,.koma.red .tbl th,.koma.red .tbl td,.koma.gold .tbl th,.koma.gold .tbl td{color:var(--line)}
.koma.dark .tbl a,.koma.red .tbl a,.koma.gold .tbl a{color:#8d2a10}
.tbl th{background:var(--paper2);font-family:var(--display);font-weight:400;white-space:nowrap;width:8rem}
.note{font-size:var(--s--1);color:#5a4d33}
.koma.dark .note{color:var(--nibi)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0}
.chip{background:#fff;border:3px solid var(--line);padding:.15rem .7rem;font-family:var(--display);font-size:var(--s--1);color:var(--line);text-decoration:none}
.chip.on{background:var(--gold2)}
.photos{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
.photos img{aspect-ratio:4/3;object-fit:cover;width:100%;border:3px solid var(--line);background:#000}
.photos img.tall{aspect-ratio:3/4}
.vwrap{position:relative;aspect-ratio:16/9;border:4px solid var(--line);box-shadow:5px 5px 0 var(--line);background:#000}
.vwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.posts{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.post{background:#fff;border:4px solid var(--line);box-shadow:5px 5px 0 var(--line);color:var(--line);padding:.7rem .9rem;text-decoration:none;display:block}
.post .dt{font-family:var(--latin);letter-spacing:.08em;color:var(--red)}
.post .kind{float:right;font-size:.72rem;background:var(--line);color:var(--gold2);padding:0 .5rem;letter-spacing:.1em}
.post h3{font-family:var(--display);font-weight:400;font-size:var(--s-0);margin:.2rem 0}
.post p{font-size:var(--s--1);color:#4a3f2a;margin:0}
.post img{border:2px solid var(--line);margin-bottom:.5rem;aspect-ratio:16/9;object-fit:cover;width:100%}
.sponsor{display:grid;grid-template-columns:1fr;gap:.6rem}
.sp{background:#fff;border:4px solid var(--line);box-shadow:5px 5px 0 var(--gold);padding:.8rem 1rem;color:var(--line)}
.sp h3{margin:0;font-family:var(--display);font-weight:400;font-size:var(--s-1)}
.sp .logo{max-height:4rem;max-width:100%;width:auto;height:auto;margin-bottom:.5rem;display:block}
.sp a{color:#8d2a10}
/* ===== 協賛企業様（2026年からの詳しいカード） ===== */
.sp-photo{display:block;width:100%;padding:0;cursor:zoom-in;aspect-ratio:auto;height:13rem;
  margin:-.2rem 0 .9rem;overflow:hidden;border:3px solid var(--line);box-shadow:4px 4px 0 var(--gold)}
.sp-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%}
@media (min-width:40rem){.sp-photo{height:16rem}}
/* ロゴを出したカードは、すぐ下に社名をもう一度書かない。
   ただし読み上げソフトと検索エンジンには残す（消さずに見えなくする） */
.sp h3.has-logo .nm{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sp h3.has-logo{margin:0}
.sp-full{padding:1.1rem 1.2rem}
.sp-full h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem}
.sp-full h3 .kana{font-family:var(--body);font-size:.62em;font-weight:400;color:#6b5c3e;letter-spacing:.08em}
.sp-full .sp-lead{margin:.2rem 0 .6rem;font-family:var(--bubble),var(--body);color:#8d2a10;font-size:var(--s-0)}
.sp-full p{margin:.4rem 0;line-height:1.9}
.sp-facts{display:grid;grid-template-columns:auto 1fr;gap:0 1rem;margin:.9rem 0 0;
  border-top:2px solid rgba(20,16,8,.18);padding-top:.7rem}
.sp-facts dt{font-family:var(--display);font-size:.8rem;color:#8d2a10;padding:.42rem 0;white-space:nowrap;
  border-bottom:1px solid rgba(20,16,8,.12)}
.sp-facts dd{margin:0;padding:.42rem 0;border-bottom:1px solid rgba(20,16,8,.12);font-size:var(--s--1)}
.sp-related{margin-top:.9rem;padding:.7rem .9rem;background:#fff8e6;border-left:5px solid var(--gold);font-size:var(--s--1)}
.sp-related a{display:inline-block;margin-left:.5rem;font-family:var(--display);white-space:nowrap}
.sp-recruit{margin-top:1rem;padding:.9rem 1rem;background:#f2f7ff;border:3px solid #2f5fb5;border-radius:4px}
.sp-recruit h4{margin:0 0 .35rem;font-family:var(--display);font-weight:400;font-size:var(--s-0);color:#1a4794}
.sp-recruit .t{font-weight:700;margin:.1rem 0 .3rem}
.sp-recruit p{font-size:var(--s--1);margin:.25rem 0}
.sp-recruit .btn{margin-top:.5rem;background:#2f5fb5;color:#fff;font-size:var(--s--1);padding:.4rem .9rem}
.sp-recruit .note{color:#4a5a72}
.sp-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.sp-links a{display:inline-block;background:var(--paper2);border:2px solid var(--line);padding:.3rem .8rem;
  font-size:var(--s--1);text-decoration:none;font-family:var(--display)}
.sp-links a:hover{background:var(--gold2)}
@media (min-width:52rem){.sponsor{grid-template-columns:1fr}}
.members{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}
.member{background:#fff;border:4px solid var(--line);box-shadow:6px 6px 0 var(--line);color:var(--line);overflow:hidden}
.member img{aspect-ratio:3/4;object-fit:cover;object-position:top;width:100%;background:#000;border-bottom:4px solid var(--line)}
.member .bd{padding:.6rem .8rem}
.member h3{font-family:var(--display);font-weight:400;font-size:var(--s-1);margin:0;line-height:1.2}
.member .part{font-family:var(--latin);letter-spacing:.1em;color:var(--red)}
.member p{font-size:var(--s--1);margin:.3rem 0 0;color:#4a3f2a;line-height:1.6}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.timeline li{background:#fff;border:3px solid var(--line);color:var(--line)}
.timeline .tl{display:grid;grid-template-columns:4.6rem 1fr;gap:.7rem;padding:.5rem .8rem;color:inherit;text-decoration:none}
.timeline .tl:hover{background:var(--paper2)}
.timeline .y{font-family:var(--latin);font-size:1.5rem;color:var(--red);letter-spacing:.05em;line-height:1}
.timeline .y small{display:block;font-family:var(--body);font-size:.7rem;color:#5a4d33;letter-spacing:0}
.timeline b{font-family:var(--display);font-weight:400}
.timeline .n{font-family:var(--display);color:var(--gold3)}
.sns{display:flex;flex-wrap:wrap;gap:.5rem}
.sns a{display:inline-flex;align-items:center;gap:.35rem;background:#fff;color:var(--line);border:3px solid var(--line);padding:.35rem .8rem;
  text-decoration:none;font-family:var(--display);font-size:var(--s--1);box-shadow:3px 3px 0 var(--line)}
.qr{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.8rem;text-align:center}
.qr img{width:100%;max-width:11rem;margin:0 auto;border:3px solid var(--line);background:#fff}
.qr b{display:block;font-family:var(--display);font-weight:400;margin-top:.3rem}
.crumb{font-size:var(--s--1);color:var(--nibi);margin:0 0 .6rem}
.crumb a{color:var(--gold2)}
.pgtitle{font-family:var(--display);font-weight:400;font-size:var(--s-3);margin:0 0 .2rem;line-height:1.1;color:var(--gold2);
  text-shadow:3px 3px 0 var(--line),-1px -1px 0 var(--line),1px -1px 0 var(--line),-1px 1px 0 var(--line)}
.pgtitle small{display:block;font-family:var(--latin);font-size:.45em;letter-spacing:.16em;color:#fff}
.lead{color:var(--nibi);margin:0 0 var(--gap);font-size:var(--s-0)}
.fb-kv{width:100%;border:4px solid var(--line);box-shadow:7px 7px 0 var(--line),7px 7px 0 3px var(--gold)}
footer{max-width:var(--wrap);margin:0 auto;padding:1.5rem var(--gap) 3rem;color:var(--nibi);font-size:var(--s--1);border-top:3px solid var(--gold)}
footer .row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
footer a{color:var(--gold2)}
.countdown{font-family:var(--latin);letter-spacing:.1em;font-size:var(--s-1);color:var(--red);background:#fff;border:3px solid var(--line);display:inline-block;padding:.1rem .7rem}
.tag-done{display:inline-block;background:var(--line);color:var(--gold2);font-family:var(--display);padding:.1rem .7rem;font-size:var(--s--1);margin-left:.4rem;vertical-align:middle}
.stripe{height:14px;background:repeating-linear-gradient(-45deg,var(--gold) 0 14px,var(--line) 14px 28px);margin:var(--gap) 0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.koma.link,.tt li.go{transition:none}}

/* ===== テーマカラー（4人） ===== */
:root{--c-kenta:#e4261b;--c-ozumin:#1f63d6;--c-roja:#ff5fa8;--c-supappa:#2fa84f;--c-kenta-t:#c91e14;--c-ozumin-t:#1a55b8;--c-roja-t:#c2186b;--c-supappa-t:#1f7a38}
.chara[data-c="kenta"]   {--tc:var(--c-kenta);--tct:var(--c-kenta-t)}
.chara[data-c="ozumin"]  {--tc:var(--c-ozumin);--tct:var(--c-ozumin-t)}
.chara[data-c="roja"]    {--tc:var(--c-roja);--tct:var(--c-roja-t)}
.chara[data-c="supappa"] {--tc:var(--c-supappa);--tct:var(--c-supappa-t)}
.chara .face{border-color:var(--tc,var(--line));box-shadow:3px 3px 0 var(--tc,var(--gold))}
.chara .name{color:var(--tct,#5a4d33);font-weight:700}
.koma.dark .chara .name{color:var(--tc,var(--gold2))}
.chara .fuki{border-color:var(--line);box-shadow:4px 4px 0 var(--tc,var(--gold))}
.chara .fuki b{color:var(--tct,var(--red))}
.koma[data-c]{border-color:var(--line)}
.koma[data-c="kenta"]   .label{background:var(--c-kenta);color:#fff}
.koma[data-c="ozumin"]  .label{background:var(--c-ozumin);color:#fff}
.koma[data-c="roja"]    .label{background:var(--c-roja-t);color:#fff}
.koma[data-c="supappa"] .label{background:var(--c-supappa-t);color:#fff}
.member[data-c]{border-color:var(--line)}
.member[data-c="kenta"]   {--tc:var(--c-kenta)} .member[data-c="ozumin"]{--tc:var(--c-ozumin)}
.member[data-c="roja"]    {--tc:var(--c-roja);--tct:var(--c-roja-t)}  .member[data-c="supappa"]{--tc:var(--c-supappa);--tct:var(--c-supappa-t)}
.member{box-shadow:6px 6px 0 var(--tc,var(--line))}
.member .part{color:var(--tct,var(--tc,var(--red)))}
.member .bd{border-top:6px solid var(--tc,var(--line))}
.swatch{display:inline-block;width:.9em;height:.9em;border:2px solid var(--line);vertical-align:-.1em;margin-right:.3em;background:var(--tc)}

/* ===== アメコミ要素 ===== */
.burst{position:relative}
.burst::after{content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;opacity:.55;
  background:repeating-conic-gradient(from 0deg,var(--gold2) 0 3deg,transparent 3deg 9deg);
  -webkit-mask-image:radial-gradient(circle,#000 10%,transparent 70%);mask-image:radial-gradient(circle,#000 10%,transparent 70%)}
.burst>*{position:relative;z-index:1}
.speed{background-image:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.07) 0 2deg,transparent 2deg 7deg)}
.dots{background-image:radial-gradient(circle,rgba(0,0,0,.22) 1.2px,transparent 1.6px);background-size:8px 8px}
.onoma{font-family:var(--latin);letter-spacing:.06em;color:var(--gold2);-webkit-text-stroke:2px var(--line);paint-order:stroke fill;
  text-shadow:4px 4px 0 var(--line);transform:rotate(-6deg);display:inline-block;font-size:var(--s-3);line-height:1}
.onoma.red{color:var(--red)} .onoma.pink{color:var(--c-roja)} .onoma.blue{color:#6ea3ff} .onoma.green{color:#7ee09a}
.bang.pink{background:var(--c-roja);color:#fff}.bang.blue{background:var(--c-ozumin);color:#fff}.bang.green{background:var(--c-supappa);color:#fff}
.hero .kv{overflow:hidden}
.hero .kv::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 40%,rgba(255,255,255,.08) 0 1.5deg,transparent 1.5deg 8deg);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,transparent 30%,#000 80%);mask-image:radial-gradient(circle at 50% 40%,transparent 30%,#000 80%);mix-blend-mode:screen}
.pop-bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:center;padding:.6rem var(--gap);
  background:repeating-linear-gradient(-45deg,var(--gold2) 0 18px,var(--gold) 18px 36px);border:4px solid var(--line);box-shadow:6px 6px 0 var(--line);margin:var(--gap) 0}
.pop-bar .onoma{font-size:var(--s-2);transform:rotate(-3deg)}
.pop-bar .onoma:nth-child(2n){transform:rotate(3deg)}
.hero-chara{position:absolute;bottom:0;right:0;width:38%;max-width:14rem;pointer-events:none;filter:drop-shadow(0 0 10px rgba(0,0,0,.8))}

/* ===== スマホの最初の1画面：情報→ボタン→画像 ===== */
.hero .info{order:-1}
@media(min-width:52rem){.hero .info{order:0}}
.info .title{color:var(--line);text-shadow:3px 3px 0 var(--gold2),5px 5px 0 var(--red);font-size:var(--s-3)}
.info .title small{color:var(--red);text-shadow:none;font-size:.4em}
.facts{grid-template-columns:1fr 1fr}
.fact .k{font-size:.72rem;line-height:1.25}
.fact .v{font-size:var(--s-0)}
.fact.free .v{font-size:var(--s-1)}
.date{font-size:var(--s-1)}
.btn{padding:.65rem 1rem;font-size:var(--s-0)}
.btn small{font-size:.72em}
.hero .kv img{aspect-ratio:4/3}
@media(max-width:52rem){.hero .kv img{height:auto}}
.bang{width:6rem;height:6rem;font-size:var(--s-0)}
.koma.info{padding:.9rem 1rem}

/* ラベルと見出しの重なり回避 */
.koma{padding-top:1.75rem}
.koma>h2:first-of-type,.koma>h3:first-of-type{margin-top:0}
.koma.link{text-decoration:none}
.koma.info{padding-top:1rem}

/* 仕上げ修正 */
.title{line-height:1.15}
.title small{margin-top:.35rem}
.btn{flex-direction:column;gap:.05rem}
.koma .btn,.btn{color:#fff}
.koma .btn.gold,.btn.gold,.koma .btn.white,.btn.white{color:var(--line)}
.koma .btn.green,.btn.green{color:#fff}
.btn small{font-weight:400;opacity:.92}
.info .title{text-shadow:3px 3px 0 var(--gold2);font-size:clamp(2.1rem,1.5rem + 2.8vw,3.4rem)}

.fact .k.drink{color:var(--line);font-weight:700;white-space:nowrap;margin-top:.15rem}
main:focus{outline:none}

/* ヒーロー：イラストを主役にするとき（切らずに全体を見せる） */
.hero .kv.art{background:#000}
.hero .kv.art img{aspect-ratio:16/9;object-fit:contain}
@media(min-width:52rem){.hero .kv.art img{position:static;height:auto;aspect-ratio:16/9}
  .hero .kv.art{display:flex;align-items:center}}

/* ================= アメコミ文字（ROCK! BOOM! と同じ質感） ================= */
.koma h2,.koma h3,.band h3,.member h3,.sp h3,.post h3,.koma.link .go,.chara .name,
.fact .v,.tt .nm,.timeline b,.timeline .n,.date span,.card .v{
  font-family:var(--display);font-weight:400}

/* コマごとのテーマ色（吹き出しのキャラと合わせる） */
.koma[data-c="kenta"]  {--tc:var(--c-kenta);  --tct:var(--c-kenta-t)}
.koma[data-c="ozumin"] {--tc:var(--c-ozumin); --tct:var(--c-ozumin-t)}
.koma[data-c="roja"]   {--tc:var(--c-roja);   --tct:var(--c-roja-t)}
.koma[data-c="supappa"]{--tc:var(--c-supappa);--tct:var(--c-supappa-t)}

/* 見出し＝色文字＋太い黒フチ＋黒い影（効果音と同じ作り） */
.koma h2{
  color:var(--gold2);letter-spacing:.04em;line-height:1.25;
  text-shadow:.055em .055em 0 var(--line),.11em .11em 0 rgba(0,0,0,.35)}
.koma h3{color:var(--gold2);text-shadow:.05em .05em 0 var(--line)}
@supports (paint-order:stroke){
  .koma h2{-webkit-text-stroke:.14em var(--line);paint-order:stroke fill}
  .koma h3{-webkit-text-stroke:.11em var(--line);paint-order:stroke fill}
}
.koma[data-c] h2{color:var(--tc)}
.koma.gold h2{color:#fff}
.koma.gold.link[data-c="roja"] h2{color:#ffd9ea}
.koma.red h2{color:var(--gold2)}
.koma.dark h2{color:var(--gold2)}

/* カード見出し */
.band h3,.sp h3,.post h3{color:var(--line);text-shadow:.055em .055em 0 var(--gold)}
.member h3{color:var(--tc,var(--gold2));text-shadow:.06em .06em 0 var(--line)}
@supports (paint-order:stroke){
  .member h3{-webkit-text-stroke:.1em var(--line);paint-order:stroke fill}
}

/* ラベル（HOST / TICKET など）＝黒地・金文字・金枠 */
.label{
  border:2px solid var(--gold);border-radius:2px;font-weight:400;
  text-shadow:2px 2px 0 rgba(0,0,0,.6);box-shadow:2px 2px 0 rgba(0,0,0,.35);
  transform:rotate(-1.5deg);transform-origin:left top;padding:.2rem .75rem .16rem}
.koma[data-c] .label{border-color:var(--line);color:#fff;text-shadow:1.5px 1.5px 0 rgba(0,0,0,.5)}

/* キャラ名 */
.chara .name{
  font-size:.84rem;letter-spacing:.1em;color:var(--tc,#5a4d33);
  text-shadow:2px 2px 0 var(--line)}
@supports (paint-order:stroke){
  .chara .name{-webkit-text-stroke:.09em var(--line);paint-order:stroke fill}
}

/* 「〜を見る ▶」 */
.koma.link .go{
  color:var(--gold2);font-size:var(--s-1);letter-spacing:.04em;
  text-shadow:.06em .06em 0 var(--line)}
@supports (paint-order:stroke){
  .koma.link .go{-webkit-text-stroke:.1em var(--line);paint-order:stroke fill}
}

/* トップの大見出し */
.info .title{
  color:var(--gold2);
  text-shadow:.045em .045em 0 var(--line),.085em .085em 0 var(--red)}
@supports (paint-order:stroke){
  .info .title{-webkit-text-stroke:.06em var(--line);paint-order:stroke fill}
}
.info .title small{color:var(--red);text-shadow:1px 1px 0 rgba(0,0,0,.25);-webkit-text-stroke:0}

/* 数字・時刻 */
.fact .v{color:var(--line);text-shadow:.05em .05em 0 var(--gold)}
.fact.free .v{color:var(--red);text-shadow:.05em .05em 0 var(--line)}
.tt .tm{text-shadow:2px 2px 0 rgba(0,0,0,.18)}
.timeline .y{text-shadow:2px 2px 0 var(--line)}

/* 右上の円形エンブレム */
.koma.info{position:relative}
.emblem{position:absolute;top:.5rem;right:.55rem;width:4.6rem;height:auto;border-radius:50%;
  border:3px solid var(--line);box-shadow:3px 3px 0 var(--gold);background:#000;z-index:2}
.info .title{padding-right:5.2rem}
@media(min-width:52rem){.emblem{width:7rem;top:.7rem;right:.7rem}.info .title{padding-right:7.6rem}}

/* ===== エンブレム（枠なし） ===== */
.emblem{border:0;box-shadow:none;border-radius:0;background:transparent}

/* ===== 想い ===== */
.omoi{background:linear-gradient(160deg,#1a1510,#0c0a08 70%)}
.omoi-t{font-size:var(--s-3)!important;line-height:1.3;text-align:center;margin:.4rem 0 .8rem}
.omoi-p{max-width:34rem;margin:0 auto;text-align:center;font-size:var(--s-0);line-height:2}
.omoi-c{text-align:center;margin-top:1.2rem;font-family:var(--display);font-size:var(--s-1);
  color:var(--gold2);letter-spacing:.06em;text-shadow:.05em .05em 0 var(--line)}
.omoi-c span{display:block;font-family:var(--latin);font-size:.62em;letter-spacing:.14em;color:var(--nibi);
  text-shadow:none;margin-top:.2rem}

/* ===== ハロウィン ===== */
.pmp{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.3em;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M30 14c1-6 6-9 11-9-1 5-4 8-8 9z' fill='%233f9252' stroke='%230c0a08' stroke-width='2.5' stroke-linejoin='round'/><ellipse cx='32' cy='39' rx='27' ry='22' fill='%23f0821e' stroke='%230c0a08' stroke-width='3'/><path d='M14 30c-3 6-3 12 0 18M50 30c3 6 3 12 0 18M23 22c-2 10-2 24 0 34M41 22c2 10 2 24 0 34' fill='none' stroke='%23c96a12' stroke-width='2.4'/><path d='M18 33l9-6 3 9zM46 33l-9-6-3 9zM32 38l4 6h-8z' fill='%230c0a08'/><path d='M18 47h6l3 4 4-4 4 4 4-4 3 4h6l-4 6H22z' fill='%230c0a08'/></svg>") center/contain no-repeat}
.hw{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.1rem 0 .5rem;
  font-family:var(--display);font-size:var(--s-1);color:var(--orange);letter-spacing:.03em;
  text-shadow:.05em .05em 0 var(--line)}
@supports (paint-order:stroke){.hw{-webkit-text-stroke:.1em var(--line);paint-order:stroke fill}}
.hw-sub{background:var(--line);color:var(--gold2);font-size:.72em;padding:.12rem .6rem;border-radius:2px;
  -webkit-text-stroke:0;text-shadow:none;letter-spacing:.08em}
.hw-koma{background:linear-gradient(160deg,#ffe9c9,#ffd39a 75%)}
.hw-koma .label{background:var(--orange);color:var(--line);border-color:var(--line)}
.hw-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.5rem;margin:.9rem 0 .5rem}
.hw-list div{background:#fff;border:3px solid var(--line);box-shadow:3px 3px 0 var(--orange);padding:.5rem .6rem;text-align:center}
.hw-list b{display:block;font-family:var(--display);font-weight:400;font-size:var(--s-0);color:var(--line)}
.hw-list span{font-size:var(--s--1);color:#5a4d33}
.onoma.orange{color:var(--orange)}
.hw{padding-right:5.2rem}
@media(min-width:52rem){.hw{padding-right:7.6rem}}

/* 出演者カード＝リンク */
.band.link{display:block;text-decoration:none;color:var(--line);transition:transform .12s}
.band.link:hover{transform:translate(-2px,-2px)}
.band .more{display:inline-block;margin-top:.4rem;font-family:var(--display);font-size:var(--s--1);color:var(--red)}
.artist-nav{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;align-items:center}
.artist-nav a{font-family:var(--display);font-size:var(--s--1);background:#fff;border:3px solid var(--line);
  box-shadow:3px 3px 0 var(--line);padding:.3rem .7rem;text-decoration:none;color:var(--line)}

/* ================= 券面（原本画像をそのまま） ================= */
.kenmen{background:#000;border:4px solid var(--line);box-shadow:7px 7px 0 var(--line),7px 7px 0 3px var(--gold);
  margin:var(--gap) 0;padding:0;line-height:0;overflow:hidden}
.kenmen img{width:100%;height:auto;display:block}

/* メンバーは2×2でバランスよく */
.members{grid-template-columns:1fr}
@media(min-width:34rem){.members{grid-template-columns:repeat(2,1fr)}}
.member .bd{border-top-width:4px}

/* ===== 写真ギャラリー ===== */
.ph-grid{display:grid;gap:.4rem;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr))}
@media(min-width:44rem){.ph-grid{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}}
.ph-t{padding:0;border:3px solid var(--line);background:#000;cursor:pointer;overflow:hidden;
  box-shadow:3px 3px 0 var(--line);transition:transform .12s;aspect-ratio:1/1;display:block}
.ph-t:hover{transform:translate(-2px,-2px)}
.ph-t img{width:100%;height:100%;object-fit:cover;display:block}
.lb{position:fixed;inset:0;z-index:80;background:rgba(6,5,4,.96);display:none;align-items:center;justify-content:center;padding:1rem}
.lb.on{display:flex}
.lb img{max-width:96vw;max-height:82vh;border:4px solid var(--line);box-shadow:0 0 0 3px var(--gold);background:#000}
.lb button{position:absolute;background:var(--gold);color:var(--line);border:3px solid var(--line);
  font-family:var(--display);font-size:1.1rem;padding:.4rem .8rem;cursor:pointer;box-shadow:3px 3px 0 var(--line)}
.lb-x{top:1rem;right:1rem} .lb-p{left:.6rem} .lb-n{right:.6rem}
.lb-c{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);color:var(--gold2);
  font-family:var(--latin);letter-spacing:.1em;font-size:1.1rem}
@media(max-width:30rem){.lb-p{left:.3rem}.lb-n{right:.3rem}.lb button{padding:.3rem .55rem}}

/* メンバーカード：新しい横長ポスターに合わせる */
.member img{aspect-ratio:16/9;object-position:center 22%}
.hero .kv.art img{aspect-ratio:16/9}

/* 仮装・ハロウィンの強調 */
.hw{font-size:clamp(1.15rem,.9rem + 1.3vw,1.8rem);gap:.4rem}
.hw-main{letter-spacing:.02em}
.hw-sub{background:var(--red);color:#fff;font-size:.66em;padding:.16rem .7rem;border:2px solid var(--line);
  box-shadow:2px 2px 0 var(--line);border-radius:2px}
.fact.hw-fact{background:var(--orange);grid-column:1/-1;border-color:var(--line)}
.fact.hw-fact .k{color:#3a1f04;font-weight:700}
.fact.hw-fact .v{color:#fff;text-shadow:.05em .05em 0 var(--line);font-size:var(--s-1)}
.ph-t.big{aspect-ratio:auto;width:100%}
.ph-t.big img{height:auto;object-fit:contain}

/* 仮装ギャラリー＆ハロウィン装飾 */
.kaso-grid{margin:.9rem 0 .6rem;grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr))}
@media(min-width:44rem){.kaso-grid{grid-template-columns:repeat(auto-fill,minmax(7rem,1fr))}}
.kaso-grid .ph-t{border-width:3px;box-shadow:3px 3px 0 var(--orange)}
.hw-koma{position:relative;overflow:hidden}
.hw-koma::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='%230c0a08'><path d='M30 24c-2 0-3 2-3 4-3-4-7-6-11-6 1 2 1 5 .5 7-3-1.5-6-.5-8 1.5 3.5 0 5.5 2 6 5 2-3 5.5-3.5 8-2 2 1.5 4 3.5 7.5 3.5s5.5-2 7.5-3.5c2.5-1.5 6-1 8 2 .5-3 2.5-5 6-5-2-2-5-2.5-8-1.5.5-2 .5-5 .5-7-4 0-8 2-11 6 0-2-1-4-3-4z'/><path d='M88 78c-2 0-3 2-3 4-3-4-7-6-11-6 1 2 1 5 .5 7-3-1.5-6-.5-8 1.5 3.5 0 5.5 2 6 5 2-3 5.5-3.5 8-2 2 1.5 4 3.5 7.5 3.5s5.5-2 7.5-3.5c2.5-1.5 6-1 8 2 .5-3 2.5-5 6-5-2-2-5-2.5-8-1.5.5-2 .5-5 .5-7-4 0-8 2-11 6 0-2-1-4-3-4z'/></g></svg>");
  background-size:150px 150px}
.hw-koma>*{position:relative;z-index:1}
.hw-koma .fuki{background:#fff}

/* ヒーロー：イラストの下に実写を重ねて置く */
.hero .kv.art{display:flex;flex-direction:column;justify-content:flex-start;gap:0}
.hero .kv.art img{position:static;width:100%;height:auto}
.hero .kv.art .kv-art{aspect-ratio:16/9;object-fit:contain;background:#000}
/* 実写は切らずに全体を見せる */
.hero .kv.art .kv-photo{aspect-ratio:auto;object-fit:contain;background:#000;border-top:3px solid var(--gold)}
/* 学生無料バーストは2枚の境目・右端に（写真を隠さない） */
.hero .kv.art .bang{bottom:auto;left:auto;right:.5rem;top:calc(56.25% - 3.4rem);
  transform:rotate(-8deg);width:6.4rem;height:6.4rem;font-size:var(--s-0)}

/* イラスト＋実写の2段組み */
.art-photo{display:grid;gap:0;border:3px solid var(--line);background:#000}
.art-photo img{width:100%;height:auto;display:block}
.art-photo .ap-photo{border-top:3px solid var(--gold)}
/* 実写はイラストより低く（主役はイラスト） */
.member .m-photo{width:100%;height:auto;display:block;border-top:4px solid var(--gold);
  aspect-ratio:12/5;object-fit:cover;object-position:center 28%;background:#000}

/* ===== 最後のエンブレム（原本画像をそのまま） ===== */
.emblem-final{background:#000;border:4px solid var(--line);box-shadow:7px 7px 0 var(--line),7px 7px 0 3px var(--gold);
  padding:0;line-height:0;overflow:hidden}
.emblem-final img{width:100%;height:auto;display:block}

/* 当日の流れ */
.flow{margin:.9rem 0 0;padding-left:0;list-style:none;counter-reset:f;display:grid;gap:.5rem}
.flow li{counter-increment:f;display:grid;grid-template-columns:2rem 1fr;gap:.6rem;align-items:start;
  background:#fff;border:3px solid var(--line);padding:.5rem .7rem;line-height:1.6}
.flow li::before{content:counter(f);font-family:var(--display);color:#fff;background:var(--red);
  border:2px solid var(--line);width:1.9rem;height:1.9rem;display:flex;align-items:center;justify-content:center}

/* 本人の言葉（想い） */
.omoi-q{font-family:var(--bubble),var(--body);font-size:var(--s-1);line-height:1.9;
  color:var(--line);border-left:5px solid var(--gold);padding:.3rem 0 .3rem .9rem;margin:.2rem 0 1rem}
.koma.dark .omoi-q{color:var(--moji)}
.omoi-q.big{font-size:var(--s-2);border-left-color:var(--red);margin-bottom:.4rem}
.koma.gold .omoi-q{color:var(--line);border-left-color:var(--red)}

/* ===== 読みにくさの一括修正（2026-08-28） =====
   金色・赤・暗色のコマの中で、本文の色が地色と近くなっていた箇所を全部そろえる */
.koma.gold, .koma.gold p, .koma.gold li, .koma.gold td, .koma.gold th,
.koma.gold .note, .koma.gold ul, .koma.gold ol{color:var(--line)}
.koma.gold .note{color:#5a4d33}
.koma.red, .koma.red p, .koma.red li, .koma.red .note{color:#fff}
.koma.dark .note, .koma.dark p, .koma.dark li{color:var(--moji)}
.koma.dark .note{color:#c9bda4}
.hw-koma .note{color:#4a3f2a}

/* 白地の紙コマの上の補足文字 */
.note{color:#4a3f2a}

/* 時刻（赤）を濃くして白地で読めるように */
.tt .tm{color:#b3230f}
.tt li.hl .tm{color:#8d1a08}
.band .t{color:#b3230f}

/* LINEの緑ボタンは白文字だと薄いので、濃い緑＋白に */
.btn.green{background:#04a247;color:#fff}
.btn.green small{color:#eafff2}

/* 事実マスの値 */
.fact.free .v{color:#c41d0c}
.fact.hw-fact .v{color:#fff;text-shadow:.06em .06em 0 var(--line)}
.fact.hw-fact .k{color:#2e1803}

/* ヘッダーの英字 */
.brand small{color:#d8c48a}

/* ===== 最終の読みやすさ調整 ===== */
.koma.gold *:not(.label):not(.btn):not(.btn *):not(.go):not(h2):not(h3){color:var(--line)}
.koma.gold .note,.koma.gold .note *{color:#4a3f2a}
.koma.dark .note,.koma.dark .note *{color:#cdc2ab}
.hw-koma .note,.hw-koma .note *{color:#4a3f2a}
.brand small{color:#e0cf9c}
.fact.free .v{color:#a8150a}
.fact.hw-fact{background:#d96f0f}
.fact.hw-fact .k{color:#1f1000}
.btn.green{background:#01823a}
.btn.green small{color:#fff}

/* 金色コマの中の本文（:not の連鎖に負けていたぶんを確実に） */
.koma.gold p,.koma.gold li,.koma.gold ul,.koma.gold ol,.koma.gold b,.koma.gold strong,.koma.gold span:not(.label):not(.go){color:var(--line)!important}
.koma.gold .note{color:#463a24!important}
.koma.gold .chara .fuki{color:var(--line)}
/* 仮装コマ（オレンジ地）の補足 */
.hw-koma .note{color:#3d3320!important}
/* ヘッダー英字 */
.brand small{color:#e8d7a6}
/* 「仮装OK！」の白文字は濃いオレンジ地に */
.fact.hw-fact{background:#b8570a}

/* ---- 文字色コントラスト 最終調整（2026-08-28）---- */
.info .title small{color:#b3230f}                 /* 赤の小文字を濃く（明るい紙地で4.17→5.8） */
.fact.hw-fact{background:#b8570a}                 /* 白文字「仮装OK！」が読める濃さに戻す（4.77） */
.fact.hw-fact .k{color:#fff;text-shadow:.05em .05em 0 rgba(0,0,0,.35)}  /* 小見出しは白へ（3.89→4.77） */
.band .ph{color:#555}                             /* 写真プレースホルダ（3.30→5.5） */
#app > .note, .page > .note{color:var(--nibi)}   /* コマの外に置いた注記は暗い地に合わせて明るく（1.92→8.3） */

/* ★2026-09-16 中にリンクを持つカード（トップの出演者）。カード全体は go のリンクの ::before が覆って今までどおり押せる。
   チップはその上に出して、各バンドのページへ行ける（.koma>* が position:relative なので go だけ static に戻す） */
.koma.link.multi>.go{position:static}
.koma.link.multi>.go::before{content:"";position:absolute;inset:0;z-index:1}
.koma.link.multi>.chips{z-index:2}
.koma.link.multi a.chip{color:var(--line)}
.koma.link.multi a.chip:hover{background:var(--gold2)}

/* ============================================================
   ★2026-09-27 ショートドラマ（/drama・トップと「動画・投稿」のカード）
   各話は縦長（ショート）なので 9:16 の枠で並べる。押すと同じ枠の再生機に入れ替わる（site.js の .dr-tile）
   ============================================================ */
.dr-lead{font-size:var(--s-0);line-height:2;margin:0 0 1rem}
.dr-teaser{max-width:13rem}
.dr-teaser .dr-ep figcaption{color:var(--moji)}
.dr-grid{display:grid;gap:1.2rem 1rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:.8rem}
@media(min-width:48rem){.dr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:72rem){.dr-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dr-ep{margin:0;min-width:0}
.dr-tile,.dr-play,.dr-soon,.dr-th{position:relative;display:block;width:100%;aspect-ratio:9/16;border:3px solid var(--line);
  background:#000;overflow:hidden;box-shadow:4px 4px 0 var(--line)}
.dr-tile{padding:0;cursor:pointer;transition:transform .12s}
.dr-tile:hover{transform:translate(-2px,-2px)}
.dr-tile img,.dr-th img{width:100%;height:100%;object-fit:cover;display:block}
.dr-tile .pl,.dr-th .pl{position:absolute;left:50%;top:50%;width:3.2rem;height:3.2rem;margin:-1.6rem 0 0 -1.6rem;border-radius:50%;
  background:rgba(0,0,0,.55);box-shadow:0 0 0 3px #fff}
.dr-tile .pl::after,.dr-th .pl::after{content:"";position:absolute;left:1.25rem;top:.95rem;border-left:1.05rem solid #fff;
  border-top:.65rem solid transparent;border-bottom:.65rem solid transparent}
.dr-tile .len{position:absolute;right:.35rem;bottom:.35rem;background:rgba(0,0,0,.78);color:#fff;font-size:.74rem;
  padding:.05rem .35rem;border-radius:3px;letter-spacing:.04em}
.dr-play iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dr-ep figcaption{margin-top:.6rem;line-height:1.6;overflow-wrap:anywhere}
.dr-ep .no{display:inline-block;font-family:var(--display);font-size:.78rem;background:var(--red);color:#fff;
  padding:.05rem .5rem;margin-bottom:.3rem;letter-spacing:.04em}
.dr-ep b{display:block;font-family:var(--display);font-weight:400;font-size:var(--s-0);line-height:1.45}
/* ★2026-10-01 各話の題は、site.js が入れる <wbr> の所だけで折る（狭いカードで語の途中で折れていた）。入りきらない時だけ anywhere。
   予告・短い動画（data-no="0"）は折れ目の無い題があり、「！」だけが次の行に落ちるので今までどおり */
.dr-ep:not([data-no="0"]) b{word-break:keep-all;overflow-wrap:anywhere}
.dr-ep .tx{display:block;font-size:var(--s--1);color:#4a3f2a;margin-top:.35rem;line-height:1.75}
.dr-ep .yt{display:inline-block;margin-top:.4rem;font-size:var(--s--1)}
.dr-soon{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#1a1510 0 12px,#241c14 12px 24px)}
.dr-soon span{color:var(--gold2);font-family:var(--display);font-size:var(--s-1);letter-spacing:.12em}
/* トップ・「動画・投稿」のカードに並べる縦長サムネイル（最新の5話まで） */
.dr-strip{display:flex;gap:.45rem;margin-top:.9rem}
.dr-strip img{flex:1 1 0;min-width:0;max-width:6.5rem;aspect-ratio:9/16;object-fit:cover;border:2px solid var(--gold3);display:block}
/* ★2026-09-27 トップの「ショートドラマ」の欄（「出演者」の欄と入れ替え）。サムネを押すと YouTube へ（site.js の dramaTop） */
.dr-top .dr-story{font-size:var(--s-0);line-height:2;margin:.9rem 0 0}
.dr-thumbs{display:grid;gap:1rem .8rem;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1.1rem}
.koma.link.multi>.dr-thumbs{position:relative;z-index:2}
.koma a.dr-lk{display:block;color:var(--line);text-decoration:none}
.dr-th{transition:transform .12s}
a.dr-lk:hover .dr-th,a.dr-lk:focus-visible .dr-th{transform:translate(-2px,-2px)}
.dr-thumbs .dr-th .pl{width:2.4rem;height:2.4rem;margin:-1.2rem 0 0 -1.2rem}
.dr-thumbs .dr-th .pl::after{left:.95rem;top:.7rem;border-left-width:.8rem;border-top-width:.5rem;border-bottom-width:.5rem}
.dr-thumbs .no{margin-top:.55rem}
.dr-thumbs .dr-ep b{font-size:var(--s--1);line-height:1.5}
.dr-thumbs .dr-soon span{font-size:var(--s-0)}
/* ★2026-09-29 広い画面は4列（話が増えても、右のタイムテーブルの下が空きすぎないように） */
@media(min-width:72rem){.dr-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* トップのタイムテーブル（/#timetable）へ飛んだ時、上の見出しの帯に隠れないように */
#timetable,#consult,#dr-eps{scroll-margin-top:4.5rem}
@media(prefers-reduced-motion:reduce){.dr-tile,.dr-th{transition:none}.dr-tile:hover,a.dr-lk:hover .dr-th{transform:none}}

/* ============================================================
   ★2026-09-29 動き・遊び心（FX）
   ・動きは html.fx-on の時だけ（site.js が、動きを減らす設定でない時に付ける）。付かなければ今までどおり全部止まって見える
   ・動かすのは transform ではなく translate / scale / rotate（今までの傾き .tilt1 などと重ならないように）
   ============================================================ */
/* 1) 画面に入る直前に「バン！」と出る。★隠した状態を既定にしない（画面に入った知らせが来ない環境＝非表示のタブ・
   Googleの読み取りなどでも、中身は必ず見える）。site.js が、画面の少し下まで来た時にだけ fx-in を付けて動かす */
.fx-on .fx-rv.fx-in{animation:fx-slam .72s cubic-bezier(.2,1.35,.35,1) var(--fx-d,0ms) both}
@keyframes fx-slam{0%{opacity:0;translate:0 34px;scale:.965;rotate:-.8deg}60%{opacity:1}100%{opacity:1;translate:0 0;scale:1;rotate:0deg}}
.fx-on .timeline li.fx-rv.fx-in:nth-child(2n){animation-name:fx-slide-l}
.fx-on .timeline li.fx-rv.fx-in:nth-child(2n+1){animation-name:fx-slide-r}
@keyframes fx-slide-l{0%{opacity:0;translate:-40px 0}100%{opacity:1;translate:0 0}}
@keyframes fx-slide-r{0%{opacity:0;translate:40px 0}100%{opacity:1;translate:0 0}}

/* 2) 押すと飛び出す効果音 */
.fx-pop{position:fixed;z-index:120;pointer-events:none;font-family:var(--latin);font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem);
  letter-spacing:.04em;color:var(--c,#f3d26a);-webkit-text-stroke:2px var(--line);paint-order:stroke fill;text-shadow:3px 3px 0 var(--line);
  translate:-50% -50%;rotate:var(--r,0deg);animation:fx-pop .95s cubic-bezier(.2,1.5,.4,1) forwards;white-space:nowrap}
@keyframes fx-pop{0%{opacity:0;scale:.3}18%{opacity:1;scale:1.25}40%{scale:1}100%{opacity:0;scale:1.05;translate:-50% -170%}}
/* ★2026-10-07 指・マウスに反応する粒を描く板（トップ＝.fx-sky。画面に固定・押せない・上のメニューより後ろ）。動きを減らす設定の人には出さない */
.fx-sky{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:30;pointer-events:none}
.fx-sky[hidden]{display:none}
html:not(.fx-on) .fx-sky{display:none}
@media print{.fx-sky,.fx-cv{display:none}}

/* 3) 流れる帯 */
.fx-marq{overflow:hidden;overflow:clip}
.fx-track{display:flex;width:max-content}
.fx-on .fx-marq .fx-track[data-dup]{animation:fx-marq var(--fx-dur,30s) linear infinite}
.fx-on .fx-marq.rev .fx-track[data-dup]{animation-direction:reverse}
.fx-on .fx-marq:hover .fx-track{animation-play-state:paused}
@keyframes fx-marq{from{translate:0 0}to{translate:-50% 0}}
.pop-bar.fx-marq{display:block;flex-wrap:nowrap;padding:.55rem 0}
.pop-bar .fx-track{gap:1.4rem;align-items:center;padding:0 .7rem}
.pop-bar .fx-track .onoma{flex:0 0 auto}
.fx-on .pop-bar .onoma{animation:fx-bob 1.6s ease-in-out infinite}
.fx-on .pop-bar .onoma:nth-child(2n){animation-delay:-.8s}
@keyframes fx-bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
html:not(.fx-on) .pop-bar .fx-track{flex-wrap:wrap;justify-content:center;width:auto}
html:not(.fx-on) .fx-marq .fx-clone{display:none}
/* 動きを減らす設定の人は、名場面の帯を指で横に送って全部見られる */
html:not(.fx-on) .drx-row{overflow-x:auto}
.fx-on .fx-marq:focus-within .fx-track[data-dup]{animation:none}

/* 4) ゆれる・脈打つ（学生無料・カウントダウン） */
.fx-on .fx-wob{animation:fx-wob 2.6s ease-in-out infinite}
@keyframes fx-wob{0%,100%{rotate:0deg;scale:1}8%{rotate:-7deg;scale:1.1}16%{rotate:5deg;scale:1.04}24%{rotate:0deg;scale:1}}
.fx-on .fx-beat{display:inline-block;animation:fx-beat 1.2s ease-in-out infinite}
@keyframes fx-beat{0%,100%{scale:1}12%{scale:1.1}24%{scale:1}36%{scale:1.06}48%{scale:1}}

/* 5) カードの傾き（マウスの時だけ・site.js の fx-tilting） */
.fx-on .fx-tilt{transition:transform .18s ease-out}
.fx-on .fx-tilt.fx-tilting,.fx-on a.dr-lk:hover .dr-th.fx-tilt.fx-tilting{transform:perspective(760px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-3px)}

/* 6) トップの写真欄：イラスト＋動く写真＋スマホ型のドラマの小窓 */
.hero .kv.fxkv{display:flex;flex-direction:column;align-items:stretch;gap:0;background:#000}
.hero .kv.fxkv::after{display:none}
.hero .kv.fxkv>.kv-art{position:static;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000}
.kv-shine{position:absolute;left:0;right:0;top:0;aspect-ratio:16/9;pointer-events:none;z-index:2;overflow:hidden}
.fx-on .kv-shine::before{content:"";position:absolute;top:-20%;bottom:-20%;width:28%;left:-40%;rotate:14deg;
  background:linear-gradient(90deg,transparent,rgba(255,240,190,.28),transparent);animation:fx-shine 6.5s ease-in-out 1.2s infinite}
/* 動かすのは translate だけ（left を動かすと、画面の外でも毎コマ組み直しが走って重い） */
@keyframes fx-shine{0%{translate:0 0}35%{translate:590% 0}100%{translate:590% 0}}
.kv-show{position:relative;flex:1 1 auto;min-height:15rem;aspect-ratio:4/3;overflow:hidden;background:#000;border-top:3px solid var(--gold)}
@media(min-width:52rem){.kv-show{aspect-ratio:auto;min-height:18rem}}
.hero .kv.fxkv .kb-s{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.3s ease}
.hero .kv.fxkv .kb-s.on{opacity:1;z-index:1}
.hero .kv.fxkv .kb-s.was{opacity:0;z-index:0}
.hero .kv.fxkv .kb-s::before{content:"";position:absolute;inset:-8%;background:var(--bg) center/cover no-repeat;filter:blur(16px) brightness(.5) saturate(1.2)}
.hero .kv.fxkv .kb-s img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;transform-origin:50% 50%;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.fx-on .hero .kv.fxkv .kb-s.on img,.fx-on .hero .kv.fxkv .kb-s.was img{animation:fx-kb 7.2s ease-out both}
.fx-on .hero .kv.fxkv .kb-s.on::before,.fx-on .hero .kv.fxkv .kb-s.was::before{animation:fx-kbb 7.2s ease-out both}
.fx-on .hero .kv.fxkv .kb-s:nth-child(2n).on img,.fx-on .hero .kv.fxkv .kb-s:nth-child(2n).was img{animation-name:fx-kb2}
@keyframes fx-kb{from{scale:1}to{scale:1.05}}
@keyframes fx-kb2{from{scale:1.05}to{scale:1}}
@keyframes fx-kbb{from{scale:1.05;translate:-2% 0}to{scale:1.2;translate:2% -2%}}
.kb-s figcaption{position:absolute;left:.6rem;top:.6rem;z-index:2;background:rgba(12,10,8,.78);color:var(--gold2);border:2px solid var(--gold);
  font-family:var(--display);font-size:.78rem;letter-spacing:.06em;padding:.12rem .55rem;line-height:1.5}
.kv-show::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 30%,transparent 62%,rgba(0,0,0,.55))}
.kv-dots{position:absolute;right:.7rem;bottom:.7rem;z-index:3;display:flex;gap:.3rem}
.kv-dots i{width:.5rem;height:.5rem;border-radius:50%;background:rgba(255,255,255,.35);border:1px solid rgba(0,0,0,.4);transition:background .3s,scale .3s}
.kv-dots i.on{background:var(--gold2);scale:1.3}
html:not(.fx-on) .kv-dots,html.fx-lite .kv-dots{display:none}
/* 切り替わる途中に、前の写真の札が重ならないように */
.hero .kv.fxkv .kb-s.was figcaption{opacity:0}
.hero .kv.fxkv .bang{top:auto;bottom:auto;left:auto;right:.6rem;top:.6rem;z-index:3;width:6rem;height:6rem;font-size:var(--s-0)}
.kv-phone{display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;background:#0f0c08;border-top:3px solid var(--gold);text-decoration:none}
.kv-phone .kv-phone-sc{width:2.9rem;flex:0 0 auto;border-radius:8px}
.kv-phone .kv-phone-l{margin:0;translate:none}
@media(min-width:52rem){
  .kv-phone{position:absolute;left:.7rem;bottom:.7rem;z-index:4;display:block;padding:0;background:none;border:0;width:clamp(4rem,17%,7.6rem);rotate:-5deg;transition:rotate .2s,scale .2s}
  .kv-phone .kv-phone-sc{width:auto;border-radius:14px}
  .kv-phone .kv-phone-l{margin:.3rem 0 0 50%;translate:-50% 0}
  .kv-phone:hover,.kv-phone:focus-visible{rotate:0deg;scale:1.06}
}
.kv-phone-sc{position:relative;display:block;aspect-ratio:9/16;border:3px solid #111;border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 0 0 2px var(--gold),4px 6px 0 rgba(0,0,0,.7)}
.kv-phone-sc img,.kv-phone-sc video{position:absolute!important;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover}
.kv-phone-sc video{opacity:0;transition:opacity .5s}
.kv-phone-sc video.playing{opacity:1}
.kv-phone-l{display:block;width:max-content;margin:.3rem 0 0 50%;translate:-50% 0;white-space:nowrap;text-align:center;background:var(--red);color:#fff;border:2px solid var(--line);font-family:var(--display);
  font-size:.66rem;line-height:1.35;padding:.15rem .45rem;box-shadow:2px 2px 0 var(--line)}
.kv-phone-l b{display:block;font-weight:400;font-size:.74rem;color:var(--gold2)}
.fx-on .kv-phone-l b{animation:fx-blink 1.4s steps(2,jump-none) infinite}
@keyframes fx-blink{50%{opacity:.35}}

/* 7) トップのドラマのサムネ：マウスを乗せると動く */
.dr-th video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.dr-th video.playing{opacity:1}
a.dr-lk:hover .dr-th video.playing{opacity:1}

/* 8) チケット：FREE のハンコ／アクセス：駐車場なしで一度ゆれる */
.fx-stamp{position:absolute;right:.8rem;top:.9rem;z-index:3;font-family:var(--latin);font-size:1.7rem;letter-spacing:.08em;color:var(--red);
  border:4px solid var(--red);border-radius:6px;padding:.05rem .55rem;rotate:12deg;background:rgba(255,255,255,.35);line-height:1.2;
  mix-blend-mode:multiply}
.fx-on .fx-stamp{animation:fx-stamp .6s cubic-bezier(.2,1.6,.4,1) .5s both}
@keyframes fx-stamp{0%{opacity:0;scale:2.6;rotate:30deg}100%{opacity:1;scale:1;rotate:12deg}}
.fx-on .fx-alert.fx-in{animation:fx-slam .72s cubic-bezier(.2,1.35,.35,1) both,fx-shake .5s ease-in-out .75s 2}
@keyframes fx-shake{0%,100%{translate:0 0}25%{translate:-6px 0}75%{translate:6px 0}}

/* 9) 暗いコマに、ゆっくり動く舞台の光 */
.fx-on .koma.dark{isolation:isolate}
.fx-on .koma.dark::after{content:"";position:absolute;top:-30%;bottom:-30%;width:34%;left:-40%;pointer-events:none;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(243,210,106,.08),transparent);rotate:12deg;animation:fx-beam 11s ease-in-out infinite}
@keyframes fx-beam{0%{translate:0 0}50%{translate:441% 0}100%{translate:0 0}}

/* 10) ケンタ☆ROCKのよろず相談（ひっそり） */
.nw{white-space:nowrap}
.kr-foot{max-width:var(--wrap);margin:.4rem auto 0;padding:0 var(--gap);text-align:center;font-size:.74rem;line-height:1.6}
.kr-foot a{color:var(--nibi);text-decoration:none;border-bottom:1px dotted rgba(179,167,143,.5)}
.kr-foot a:hover{color:var(--gold2)}
.kr-mini{display:block;margin-top:1rem;padding:.6rem .8rem;border:2px dashed rgba(20,16,8,.35);border-radius:6px;color:#4a3f2a!important;
  text-decoration:none;font-size:var(--s--1);line-height:1.7;background:rgba(255,255,255,.4)}
.kr-mini b{color:#8d2a10;font-weight:700}
.kr-mini-k{display:inline-block;margin-right:.45rem;background:var(--line);color:var(--gold2);font-family:var(--display);font-size:.72rem;padding:.02rem .45rem;letter-spacing:.06em}
.kr-mini:hover{border-color:var(--red)}
.kr-koma h2{word-break:keep-all;overflow-wrap:anywhere}
.kr-list{list-style:none;padding:0;margin:.9rem 0 .6rem;display:grid;gap:.55rem;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))}
.kr-list li{background:#fff;border:3px solid var(--line);box-shadow:4px 4px 0 var(--gold);padding:.55rem .75rem;line-height:1.55}
.kr-list b{display:block;font-family:var(--display);font-weight:400;font-size:var(--s-1);color:var(--red)}
.kr-list span{font-size:var(--s--1)}
.fx-on .kr-koma.fx-in .kr-list li{animation:fx-slam .6s cubic-bezier(.2,1.35,.35,1) calc(var(--i) * 90ms + 200ms) both}
.kr-card{margin:var(--gap) 0 0;background:#0f0c08;color:var(--moji);border:2px solid var(--gold3);border-left:6px solid var(--gold);padding:.9rem 1.1rem;
  display:grid;gap:.15rem;max-width:34rem}
.kr-card p{margin:0;word-break:keep-all;overflow-wrap:anywhere}
.kr-kick{font-family:var(--latin);letter-spacing:.14em;color:var(--gold);font-size:.85rem}
.kr-t{font-family:var(--display);font-size:var(--s-1);color:#fff}
.kr-go{justify-self:start;margin-top:.35rem;font-family:var(--display);color:var(--gold2);text-decoration:none}
.kr-go:hover{color:#fff}

/* 11) ショートドラマのページ（映画の予告編のように） */
.drx{--drx-gap:clamp(1.4rem,4vw,2.6rem)}
.drx-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:calc(var(--gap) * -1);min-height:min(86vh,50rem);
  display:grid;align-items:end;overflow:hidden;background:#000;border-bottom:4px solid var(--gold);isolation:isolate}
.drx-bg{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;object-position:50% 22%;z-index:-2}
.drx-veil{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse at 50% 30%,transparent 0 35%,rgba(0,0,0,.55) 100%),
  linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.2) 30%,rgba(0,0,0,.55) 62%,rgba(12,10,8,.96) 100%)}
.drx-grain{position:absolute;inset:-50%;z-index:-1;pointer-events:none;opacity:.11;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.9'/></svg>")}
.fx-on .drx-grain{animation:fx-grain .9s steps(4) infinite}
@keyframes fx-grain{0%{translate:0 0}25%{translate:-6% 4%}50%{translate:5% -3%}75%{translate:-3% -6%}100%{translate:0 0}}
.drx-copy{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;padding:6rem var(--gap) 3.4rem}
.drx-kicker{margin:0 0 .6rem;color:var(--gold2);font-size:var(--s--1);letter-spacing:.08em;display:flex;flex-wrap:wrap;gap:.3rem .7rem;align-items:center;text-shadow:0 1px 6px #000,0 0 12px rgba(0,0,0,.9)}
.drx-kicker b{font-weight:700}
.drx-kicker span{text-shadow:none}
.drx-kicker span{background:var(--red);color:#fff;font-family:var(--latin);letter-spacing:.14em;padding:.05rem .6rem;border:2px solid #000}
.drx-title{margin:0;font-family:var(--display);font-weight:400;color:#fff;line-height:1.02;letter-spacing:.02em;
  font-size:clamp(3rem,1.6rem + 7vw,7rem);text-shadow:0 0 28px rgba(0,0,0,.7),5px 5px 0 var(--red);cursor:default}
.drx-title span{display:block;font-size:.34em;letter-spacing:.14em;color:var(--gold2);text-shadow:0 0 18px rgba(0,0,0,.9);margin-top:.45rem}
.fx-on .drx-title{animation:fx-title 1.1s cubic-bezier(.2,1.2,.3,1) .15s both}
@keyframes fx-title{0%{opacity:0;scale:1.18;filter:blur(8px)}100%{opacity:1;scale:1;filter:blur(0)}}
.drx-lead{margin:1rem 0 0;max-width:36rem;color:#f4eee0;font-size:var(--s-0);line-height:1.9;text-shadow:0 1px 8px rgba(0,0,0,.9)}
.drx-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
.drx-cta .btn{font-size:var(--s-1);cursor:pointer}
.drx-cta .drx-go:first-child{position:relative}
.fx-on .drx-cta .drx-go:first-child::after{content:"";position:absolute;inset:-3px;border:3px solid var(--red);pointer-events:none;opacity:0;
  animation:fx-ringp 2.2s ease-out 1.4s infinite}
@keyframes fx-ringp{0%{opacity:.75;scale:1}100%{opacity:0;scale:1.08 1.4}}
.drx-ai{margin:1rem 0 0;font-size:.72rem;color:rgba(244,238,224,.72);letter-spacing:.04em}
.drx-down{position:absolute;left:50%;bottom:.7rem;translate:-50% 0;color:var(--gold2);font-family:var(--latin);letter-spacing:.18em;text-decoration:none;font-size:.9rem}
.fx-on .drx-down{animation:fx-bob 1.8s ease-in-out infinite}
.drx-lab{margin:0;font-family:var(--latin);letter-spacing:.2em;color:var(--gold);font-size:.95rem}
.drx-h{margin:var(--drx-gap) 0 .9rem}
.drx-h h2{margin:.1rem 0 0;font-family:var(--display);font-weight:400;font-size:var(--s-3);line-height:1.1;color:#fff}
.drx-story{display:grid;gap:1.2rem 2rem;align-items:center;margin-top:var(--drx-gap)}
@media(min-width:48rem){.drx-story{grid-template-columns:minmax(0,1fr) minmax(0,14rem)}}
.drx-story .dr-head{font-family:var(--display);font-weight:400;color:#fff;font-size:var(--s-2);line-height:1.25;margin:.2rem 0 .6rem;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.drx-h h2,.drx-title{word-break:keep-all;overflow-wrap:anywhere}
.drx-story .dr-lead{color:#e9e1cf;line-height:2.05;margin:0}
.drx-teaser{width:min(100%,12rem)}
@media(min-width:48rem){.drx-teaser{width:auto}}
.drx-teaser .dr-ep figcaption{color:var(--moji)}
.drx-teaser .dr-ep .tx{color:#cfc5ae}
.drx .dr-grid{margin-top:.4rem}
.drx .dr-ep figcaption{color:var(--moji)}
.drx .dr-ep .tx{color:#cfc5ae}
.drx .dr-ep b{color:#fff}
.drx .dr-ep .yt{color:var(--gold2)}
.drx .dr-tile{overflow:hidden;cursor:pointer}
.drx .dr-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.drx .dr-tile video.playing{opacity:1}
.drx .dr-tile .pl{z-index:2;transition:scale .2s,opacity .2s}
.drx .dr-tile:hover .pl{scale:1.18}
.drx .dr-tile .len{z-index:2}
.drx-new{position:absolute;top:.5rem;left:.5rem;z-index:3;background:var(--red);color:#fff;font-family:var(--latin);letter-spacing:.12em;
  font-size:.95rem;padding:.05rem .5rem;border:2px solid #000;rotate:-6deg}
.fx-on .drx-new{animation:fx-wob 2.2s ease-in-out infinite}
.drx .dr-soon{position:relative;overflow:hidden}
.drx .dr-soon span{position:relative;z-index:1;font-family:var(--latin);letter-spacing:.16em;text-align:center}
.drx .dr-soon i{position:absolute;inset:-50%;opacity:.28;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='turbulence' baseFrequency='.8' numOctaves='1'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
.fx-on .drx .dr-soon i{animation:fx-grain .5s steps(3) infinite}
.drx-scenes{margin-top:var(--drx-gap)}
.drx-row{margin:0 calc(50% - 50vw);width:100vw}
.drx-row+.drx-row{margin-top:.7rem}
.drx-row .fx-track{gap:.7rem;padding:0 .35rem}
.drx-sc{flex:0 0 auto;width:clamp(7.5rem,15vw,11rem);aspect-ratio:9/16;padding:0;border:3px solid #000;box-shadow:0 0 0 2px var(--gold3);background:#000;cursor:zoom-in;overflow:hidden}
.drx-sc img{width:100%;height:100%;object-fit:cover;transition:scale .4s}
.drx-sc:hover img{scale:1.08}
.drx .kr-card{margin-top:var(--drx-gap)}
.drx>.koma{margin-top:var(--drx-gap)}
.drx-modal{position:fixed;inset:0;z-index:110;display:none;align-items:center;align-items:safe center;justify-content:center;background:rgba(0,0,0,.9);padding:1rem;overflow-y:auto}
.drx-modal.on{display:flex}
html.drx-lock,html.drx-lock body{overflow:hidden}
/* 再生画面の幅は、画面の高さから決める（題・帯・余白の分を引いた高さ×9/16）。背の低い画面でも帯まで1画面に収める */
.drx-m-in{position:relative;width:min(100%,calc((100vh - 9.5rem) * 9 / 16),26rem);display:grid;gap:.5rem}
@supports (height:100svh){.drx-m-in{width:min(100%,calc((100svh - 9.5rem) * 9 / 16),26rem)}}
.drx-m-bar{flex-wrap:wrap}
.drx-m-bar button,.drx-m-yt{white-space:nowrap}
.drx-m-bar button{font-size:.8rem;padding:.3rem .5rem}
/* 背の低い縦長の画面（再生画面が細くなる）では「◀ 前」「次 ▶」と短く */
@media (orientation:portrait) and (max-height:620px){.drx-m-bar .wd{display:none}}
/* 横にしたスマホ（背が低い）：動画を左、題と帯を右に並べる */
@media (orientation:landscape) and (max-height:520px){
  .drx-m-in{width:auto;max-width:100%;grid-template-columns:auto minmax(9rem,15rem);grid-template-rows:auto 1fr auto;align-items:start;column-gap:.9rem}
  .drx-m-fr{grid-column:1;grid-row:1 / span 3;height:calc(100vh - 2rem);height:calc(100svh - 2rem);width:auto}
  .drx-m-t{grid-column:2;grid-row:1;margin:2.4rem 0 0}
  .drx-m-bar{grid-column:2;grid-row:3;flex-direction:column;align-items:stretch}
}
.drx-m-t{word-break:keep-all;overflow-wrap:anywhere;outline:none}
.drx-m-t{margin:0 2.6rem 0 0;color:var(--gold2);font-family:var(--display);font-size:var(--s-0);line-height:1.35}
.drx-m-fr{position:relative;aspect-ratio:9/16;background:#000;border:3px solid var(--gold);box-shadow:0 0 40px rgba(212,167,44,.25)}
.drx-m-fr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.drx-m-x{position:absolute;right:0;top:-.2rem;background:var(--gold);color:var(--line);border:3px solid var(--line);font-family:var(--display);
  font-size:1rem;padding:.2rem .6rem;cursor:pointer}
.drx-m-bar{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.drx-m-bar button{background:var(--paper);color:var(--line);border:3px solid var(--line);box-shadow:3px 3px 0 var(--gold);font-family:var(--display);
  font-size:.85rem;padding:.35rem .6rem;cursor:pointer}
.drx-m-bar button:disabled{opacity:.3;cursor:default}
.drx-m-yt{color:var(--gold2);font-size:.8rem}
@media(prefers-reduced-motion:reduce){.fx-tilt,.kv-phone,.drx-sc img{transition:none}}

/* ★2026-09-29 STORY の横に、予告とリエの動画を2本並べる */
.drx-teaser.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;width:min(100%,24rem)}
@media(min-width:48rem){.drx-story:has(.drx-teaser.two){grid-template-columns:minmax(0,1fr) minmax(0,24rem)}.drx-teaser.two{width:auto}}
.drx-teaser .dr-ep b{font-size:var(--s--1)}
/* ★2026-09-29 登場人物（名場面の下） */
.drx-cast{margin-top:var(--drx-gap)}
.drx-cast-g{display:grid;gap:1.2rem .9rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:48rem){.drx-cast-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:64rem){.drx-cast-g{grid-template-columns:repeat(5,minmax(0,1fr))}}
.drx-cc{margin:0;min-width:0}
.drx-cc-im{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:10px;background:#9a9a9a;border:2px solid var(--cc);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 10px 26px rgba(0,0,0,.45)}
.drx-cc-im::after{content:"";position:absolute;inset:auto 0 0 0;height:28%;background:linear-gradient(0deg,color-mix(in srgb,var(--cc) 45%,transparent),transparent);pointer-events:none}
.drx-cc-im img{width:100%;height:100%;object-fit:cover;display:block;transition:scale .5s ease}
.drx-cc:hover .drx-cc-im img{scale:1.05}
.drx-cc figcaption{margin-top:.6rem;display:grid;gap:.2rem;color:var(--moji);word-break:keep-all;overflow-wrap:anywhere}
.drx-cc-p{justify-self:start;background:var(--cc);color:#fff;font-family:var(--latin);letter-spacing:.1em;font-size:.8rem;padding:.02rem .5rem;border-radius:3px}
.drx-cc-n{font-family:var(--display);font-weight:400;font-size:var(--s-1);line-height:1.25;color:#fff;text-shadow:0 0 14px color-mix(in srgb,var(--cc) 60%,transparent)}
.drx-cc-t{font-size:var(--s--1);line-height:1.75;color:#d6ccb6}
.drx-cc-q{display:block;font-family:var(--bubble);font-size:var(--s--1);color:var(--gold2);quotes:"「" "」"}
.drx-story .dr-lead,.dr-top .dr-story{word-break:keep-all;overflow-wrap:anywhere}

/* ============================================================
   ★2026-10-07 最終話の上映の看板（.fin）— トップと /drama
   ・映画館の看板の電球（.fin-bulbs）／流れるフィルムの帯（.fin-film）
   ・劇場の絵（.fin-stage）の幕（.fin-cur）が開いて、舞台のスクリーン（.fin-scr）にドラマが映る。映写の光（.fin-beam）
   ・開催日までの日数（.fin-cd）
   既定は「幕が開いた止まった絵」。動くのは html.fx-on の時だけ（動きを減らす設定の人には止めたまま）。
   幕を閉じておく印（.fin-shut）は site.js が動きの直前にだけ付ける
   ============================================================ */
.fin{position:relative;isolation:isolate;overflow:hidden;min-width:0;color:var(--moji);
  background:radial-gradient(130% 100% at 50% -12%,#55140f 0%,#220a08 46%,#0b0605 100%);
  border:4px solid var(--line);box-shadow:7px 7px 0 var(--line),7px 7px 0 3px var(--gold);
  padding:3rem clamp(1.15rem,3.4vw,2rem) 2.9rem}
.page>.fin,.dr-grid>.fin{grid-column:1/-1}
.dr-grid>.fin{margin:.6rem 0 0}
.fin-in{position:relative;z-index:2;display:grid;gap:1.2rem;align-items:center}
@media(min-width:46rem){.fin-in{grid-template-columns:minmax(0,21rem) minmax(0,1fr);gap:clamp(1.4rem,3.6vw,2.6rem)}}
.fin figcaption{margin:0;min-width:0}

/* 看板の電球：2組が交互にまたたく */
.fin-bulbs{position:absolute;inset:7px;z-index:3;pointer-events:none}
.fin-bulbs::before,.fin-bulbs::after{content:"";position:absolute;inset:0;--bp:22px;
  background:
    radial-gradient(circle,var(--bc) 0 2.5px,transparent 3.3px) 0 0/var(--bp) 8px repeat-x,
    radial-gradient(circle,var(--bc) 0 2.5px,transparent 3.3px) 0 100%/var(--bp) 8px repeat-x,
    radial-gradient(circle,var(--bc) 0 2.5px,transparent 3.3px) 0 0/8px var(--bp) repeat-y,
    radial-gradient(circle,var(--bc) 0 2.5px,transparent 3.3px) 100% 0/8px var(--bp) repeat-y;
  filter:drop-shadow(0 0 3px rgba(255,190,70,.95))}
.fin-bulbs::before{--bc:#ffd76a}
.fin-bulbs::after{--bc:#fff4cf;background-position:11px 0,11px 100%,0 11px,100% 11px;opacity:.55}
.fx-on .fin-bulbs::before{animation:fin-bulb .84s steps(1) infinite}
.fx-on .fin-bulbs::after{animation:fin-bulb .84s steps(1) -.42s infinite}
@keyframes fin-bulb{0%{opacity:1}50%{opacity:.22}}

/* フィルムの帯（上と下）。穴の列を横へ送る */
.fin-film{position:absolute;left:0;right:0;top:21px;height:13px;z-index:1;overflow:hidden;background:#040303;border-block:1px solid #2a2018}
.fin-film.b{top:auto;bottom:21px}
.fin-film i{position:absolute;inset:0 -56px 0 0;
  background:linear-gradient(90deg,transparent 0 9px,#e9dfc6 9px 17px,transparent 17px 28px) 0 50%/28px 6px repeat-x}
.fx-on .fin-film i{animation:fin-film .7s linear infinite}
.fx-on .fin-film.b i{animation-direction:reverse}
@keyframes fin-film{to{translate:-28px 0}}

/* 劇場の絵 */
.fin-stage{position:relative;overflow:hidden;width:100%;max-width:24rem;margin-inline:auto;aspect-ratio:1/1.06;background:#050404;
  border:3px solid #000;box-shadow:0 0 0 2px var(--gold3),0 14px 34px rgba(0,0,0,.65)}
.fin-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 40%,transparent 52%,rgba(0,0,0,.62) 100%)}
.fin-st{position:absolute;left:0;top:0;width:100%;transform-origin:50% 38%}
.fin-th{display:block;width:100%;height:100%;object-fit:cover}
.fx-on .fin.fin-go .fin-st{animation:fin-push 16s ease-out both}
@keyframes fin-push{from{scale:1}to{scale:1.07}}
.fin-scr{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);overflow:hidden;background:#000}
.fin-scr>img,.fin-scr>video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.fin-scr>video{opacity:0;transition:opacity .6s}
.fin-scr>video.playing{opacity:1}
.fin-flick{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.16));opacity:.5}
.fx-on .fin-flick{animation:fin-flick 1.3s steps(7) infinite}
@keyframes fin-flick{0%,100%{opacity:.5}20%{opacity:.15}45%{opacity:.62}70%{opacity:.28}}
/* 幕：左右の半分ずつ。既定は端に寄せて開いた形。閉じる時（.fin-shut）は元の絵とぴったり重なる */
.fin-cur{position:absolute;top:0;bottom:0;width:50.5%;background-repeat:no-repeat;transition:transform 1.9s cubic-bezier(.66,0,.24,1);will-change:transform}
.fin-cur.l{left:0;transform-origin:0 50%;transform:scaleX(.14)}
.fin-cur.r{right:0;transform-origin:100% 50%;transform:scaleX(.14)}
.fin.fin-shut .fin-cur{transform:scaleX(1);transition:none}
/* 映写の光と、舞台にこぼれる明かり */
.fin-beam{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5;transition:opacity 1.3s .9s;
  /* 明かり（絵の上から7％）から幕の下の両端へ向かう円すい。縁はぼかし、スクリーンの下へ行くほど薄くする */
  background:conic-gradient(from calc(180deg - var(--ang,25deg) - 5deg) at 50% 7%,transparent 0deg,rgba(255,238,196,.92) 7deg,rgba(255,238,196,.92) calc(var(--ang,25deg) * 2 + 3deg),transparent calc(var(--ang,25deg) * 2 + 10deg),transparent 360deg);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 calc(var(--t) + 2%),rgba(0,0,0,.3) calc(var(--t) + var(--h) * .55),transparent calc(var(--t) + var(--h) + 1%));
  mask-image:linear-gradient(180deg,#000 0%,#000 calc(var(--t) + 2%),rgba(0,0,0,.3) calc(var(--t) + var(--h) * .55),transparent calc(var(--t) + var(--h) + 1%))}
.fin-glow{position:absolute;left:calc(var(--l) - 9%);top:calc(var(--t) + var(--h) - 1%);width:calc(var(--w) + 18%);height:15%;pointer-events:none;
  mix-blend-mode:screen;transition:opacity 1.3s .9s;background:radial-gradient(ellipse at 50% 0%,rgba(255,226,170,.55),transparent 70%)}
.fin.fin-shut .fin-beam,.fin.fin-shut .fin-glow{opacity:0;transition:none}
.fx-on .fin:not(.fin-shut) .fin-beam{animation:fin-beam 2.3s steps(9) 2.4s infinite}
@keyframes fin-beam{0%,100%{opacity:.5}18%{opacity:.36}37%{opacity:.58}61%{opacity:.42}83%{opacity:.54}}
.fin-grain{position:absolute;inset:-50%;z-index:1;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='turbulence' baseFrequency='.8' numOctaves='1'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
.fx-on .fin-grain{animation:fx-grain .6s steps(3) infinite}

/* 文字 */
.fin-msg{min-width:0;text-align:center}
@media(min-width:46rem){.fin-msg{text-align:left}}
.fin-badge{margin:0;line-height:.9}
.fin-word{position:relative;display:inline-block;rotate:-4deg;cursor:default;font-family:var(--latin);font-weight:400;
  font-size:clamp(3.6rem,17vw,6.4rem);letter-spacing:.07em;padding:0 .08em;
  color:#ffe08a;background:linear-gradient(180deg,#fffbe2 4%,#ffd75e 46%,#ee8e1c 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(4px 4px 0 #000) drop-shadow(0 0 16px rgba(255,160,40,.55))}
.fx-on .fin.fin-go .fin-word{animation:fin-slam .7s cubic-bezier(.2,1.5,.4,1) .9s both,fin-neon 5.2s steps(1) 2.2s infinite}
@keyframes fin-slam{0%{opacity:0;scale:2.4;rotate:14deg}100%{opacity:1;scale:1;rotate:-4deg}}
@keyframes fin-neon{0%,100%{opacity:1}41%{opacity:1}42%{opacity:.45}44%{opacity:1}46%{opacity:.6}48%{opacity:1}}
.fin-head{margin:.55rem 0 0;font-family:var(--display);font-weight:400;font-size:var(--s-2);line-height:1.2;letter-spacing:.05em;color:#fff;text-shadow:3px 3px 0 #000}
.fin-text{margin:.3rem 0 0;font-family:var(--display);font-weight:400;font-size:clamp(1.55rem,7.4vw,2.7rem);line-height:1.28;letter-spacing:.02em;
  word-break:keep-all;overflow-wrap:anywhere;text-shadow:3px 3px 0 #000}
.fin-date,.fin-place{display:inline-block;white-space:nowrap}
/* 左右に並ぶ幅では、文字の列が狭いので、列の幅に合わせて小さくする（「上映」の1字だけが次の行に落ちないように） */
@media(min-width:46rem){.fin-text{font-size:clamp(1.5rem,3.5vw,2.7rem)}.fin-word{font-size:clamp(3.6rem,9vw,6.4rem)}}
.fin-date{color:var(--gold2)}
.fin-place{color:#fff;background:linear-gradient(transparent 64%,rgba(216,50,26,.92) 64% 94%,transparent 94%);padding:0 .12em}
.fx-on .fin.fin-go .fin-date{animation:fx-slide-l .55s ease-out 1.35s both}
.fx-on .fin.fin-go .fin-place{animation:fx-slide-r .55s ease-out 1.55s both}
.fin-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem 1.1rem;margin-top:1.05rem}
@media(min-width:46rem){.fin-row{justify-content:flex-start}}
.fin-cta{display:flex;flex-wrap:wrap;gap:.6rem;flex:1 1 11rem;min-width:0}
.fin .btn{flex:1 1 100%}
@media(min-width:46rem){.fin-cta{gap:.7rem;flex-basis:15rem}.fin .btn{flex:1 1 11rem}}
/* 開催日までの日数：フィルムの頭のカウントダウンの形 */
.fin-cd{position:relative;flex:0 0 auto;width:5.6rem;aspect-ratio:1;border-radius:50%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#f1e8d0;border:3px solid #e9dfc6;background:radial-gradient(circle,#2e2924 0 58%,#161310 60%);box-shadow:0 0 0 3px #000,4px 4px 0 3px #000;line-height:1}
.fin-cd::before,.fin-cd::after{content:"";position:absolute;background:rgba(233,223,198,.3)}
.fin-cd::before{left:50%;top:0;bottom:0;width:1px}
.fin-cd::after{top:50%;left:0;right:0;height:1px}
.fin-cd i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(255,255,255,.3) 0 24%,transparent 24%)}
.fx-on .fin-cd i{animation:fin-sweep 2s linear infinite}
@keyframes fin-sweep{to{rotate:360deg}}
.fin-s{position:relative;z-index:1;font-family:var(--display);font-size:.72rem;letter-spacing:.08em}
.fin-n{position:relative;z-index:1;font-family:var(--latin);font-size:2.5rem;letter-spacing:.03em;color:#fff;text-shadow:2px 2px 0 #000;margin:.05rem 0}
.fin-cd.today .fin-n{font-size:1.25rem}

/* 小さい札（トップの写真欄の下の帯・/drama のいちばん上） */
.fin-chip{display:inline-flex;align-items:center;gap:.5rem;max-width:100%;text-decoration:none;line-height:1.3;
  background:#170706;color:#fff;border:2px solid var(--gold2);box-shadow:0 0 0 2px #000,0 0 14px rgba(255,180,60,.45);padding:.28rem .7rem .28rem .5rem}
.fin-k{flex:0 0 auto;font-family:var(--latin);letter-spacing:.1em;font-size:1.18rem;line-height:1;color:var(--line);background:var(--gold2);padding:.12rem .42rem .06rem;rotate:-4deg}
.fin-c{font-family:var(--display);font-size:var(--s--1);letter-spacing:.02em;word-break:keep-all;overflow-wrap:anywhere}
.fx-on .fin-chip{animation:fin-chip 1.7s ease-in-out infinite}
@keyframes fin-chip{0%,100%{box-shadow:0 0 0 2px #000,0 0 6px rgba(255,180,60,.3)}50%{box-shadow:0 0 0 2px #000,0 0 20px rgba(255,190,70,.95)}}
.fx-on .fin-chip .fin-k{animation:fx-wob 2.6s ease-in-out infinite}
.fin-chip.in-hero{margin-top:1.1rem}
/* トップの写真欄：スマホ幅では下の帯の右の空き、広い幅では小窓の右（写真の下の端） */
.kv-phone .fin-chip.in-kv{margin-left:auto;flex:0 1 auto;min-width:0;padding:.22rem .55rem .22rem .42rem}
.kv-phone .fin-chip.in-kv .fin-k{font-size:1.02rem}
.kv-phone .fin-chip.in-kv .fin-c{font-size:.72rem;line-height:1.25}
@media(min-width:40rem){
  .kv-phone .fin-chip.in-kv{position:absolute;left:112%;bottom:1.9rem;margin:0;width:max-content;max-width:none;rotate:5deg}
}

/* トップのドラマの欄：話の並びの最後の小さい札 */
.dr-soon.fin-tile{position:relative;overflow:hidden;background:radial-gradient(130% 90% at 50% 0%,#5a1711 0%,#1d0908 55%,#0a0605 100%);border-color:var(--line)}
.dr-soon.fin-tile span{position:relative;z-index:1;font-family:var(--latin);font-size:var(--s-1);letter-spacing:.1em;rotate:-6deg;
  color:#ffe08a;text-shadow:2px 2px 0 #000,0 0 12px rgba(255,170,40,.7)}
.dr-soon.fin-tile i{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.45;
  background:linear-gradient(180deg,rgba(255,238,196,.9),rgba(255,238,196,0) 78%);clip-path:polygon(44% 0,56% 0,96% 100%,4% 100%)}
.fx-on .dr-soon.fin-tile i{animation:fin-beam 2.3s steps(9) infinite}
.fx-on .dr-soon.fin-tile span{animation:fin-neon 5.2s steps(1) 1s infinite}
a.dr-final.dr-lk:hover .dr-soon,a.dr-final.dr-lk:focus-visible .dr-soon{transform:translate(-2px,-2px)}

@media(prefers-reduced-motion:reduce){.fin-cur,.fin-beam,.fin-glow{transition:none}}