/* 松本大戦略 公式サイト — スカジャン刺繍 × アメコミ */
: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 .6rem;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}}
@media(min-width:78rem) and (max-width:92rem){.top nav a{padding:.45rem .45rem;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)}

/* 汎用 */
.grid2{display:grid;gap:var(--gap);grid-template-columns:1fr}
@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}
.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;width:auto;margin-bottom:.4rem}
.sp a{color:#8d2a10}
.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{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.link[data-c]{border-color:var(--line)}
.koma.link[data-c="kenta"]   .label{background:var(--c-kenta);color:#fff}
.koma.link[data-c="ozumin"]  .label{background:var(--c-ozumin);color:#fff}
.koma.link[data-c="roja"]    .label{background:var(--c-roja-t);color:#fff}
.koma.link[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.link[data-c="kenta"]  {--tc:var(--c-kenta);  --tct:var(--c-kenta-t)}
.koma.link[data-c="ozumin"] {--tc:var(--c-ozumin); --tct:var(--c-ozumin-t)}
.koma.link[data-c="roja"]   {--tc:var(--c-roja);   --tct:var(--c-roja-t)}
.koma.link[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.link[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.link[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}