@charset "utf-8";
/* spankbangjp.com 独自スタイル（ライブハウスの転換表） */

:root{
  --ink:#0c0f0d;
  --deck:#12160f;
  --panel:#171c16;
  --panel-2:#1c221a;
  --line:#272e24;
  --line-2:#39422f;
  --txt:#e7ebe0;
  --dim:#9aa697;
  --dim-2:#74806f;
  --acid:#c9ff45;
  --acid-soft:rgba(201,255,69,.13);
  --display:"Saira Condensed","M PLUS 1",system-ui,sans-serif;
  --sans:"M PLUS 1","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --mono:"Azeret Mono",ui-monospace,"Courier New",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--txt);
  font-family:var(--sans);font-size:15.5px;line-height:1.85;
  font-feature-settings:"palt" 1;
  background-image:radial-gradient(1200px 520px at 78% -8%,rgba(201,255,69,.055),transparent 62%);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;letter-spacing:.005em;line-height:1.16}
p{margin:0}
ul,dl{margin:0;padding:0;list-style:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 30px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── 上部テープ（開場時刻の帯） ── */
.tape{background:#090b09;border-bottom:1px solid #1d231b}
.tape .wrap{display:flex;align-items:center;gap:14px;height:32px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--dim-2);text-transform:uppercase;white-space:nowrap;overflow:hidden}
.tape b{color:var(--acid);font-weight:500}
.tape .sep{flex:1}

/* ── ヘッダー（楽屋口のプレート） ── */
.bar{background:var(--deck);border-bottom:1px solid var(--line);position:relative}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--acid) 0 96px,transparent 96px)}
.bar .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:26px;padding-top:16px;padding-bottom:16px}
.mark{display:flex;align-items:flex-end;gap:10px;border-left:3px solid var(--acid);padding-left:12px}
.mark b{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:.01em;line-height:1}
.mark i{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.16em;color:var(--acid);border:1px solid var(--line-2);padding:2px 5px;position:relative;top:-2px}
.mark span{display:block;font-size:10.5px;letter-spacing:.34em;color:var(--dim);margin-top:6px}
.nav{display:flex;flex-wrap:wrap;gap:4px 20px;justify-content:center}
.nav a{font-size:13px;letter-spacing:.06em;color:#cfd6c9;padding:3px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a.on{color:#fff;border-bottom-color:var(--acid)}
.door{display:inline-flex;align-items:center;gap:8px;background:var(--acid);color:#0b0e09;font-family:var(--mono);font-size:11px;letter-spacing:.12em;padding:11px 16px;font-weight:500;white-space:nowrap}
.door::before{content:"";width:6px;height:6px;background:#0b0e09}
.door:hover{background:#d9ff7a}

/* ── ヒーロー：左に文、右に舞台袖の実写パネル ── */
.hero{padding:34px 0 28px}
.hero .wrap{display:grid;grid-template-columns:.94fr 1.06fr;gap:46px;align-items:start}
.kick{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;color:var(--acid);text-transform:uppercase;margin-bottom:20px}
.kick::after{content:"";height:1px;flex:1;background:var(--line-2)}
h1{font-size:clamp(34px,3.9vw,50px);font-weight:700;letter-spacing:.005em;line-height:1.06;margin-bottom:18px}
h1 em{font-style:normal;display:inline-block;box-shadow:inset 0 -.16em 0 rgba(201,255,69,.30)}
.lead{color:#c3cbbc;font-size:14.9px;line-height:1.76;max-width:34em;margin-bottom:12px}
.lead b{color:#fff;font-weight:600}

.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:18px 0 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.meta div{padding:11px 12px 10px 0}
.meta dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--dim-2);text-transform:uppercase}
.meta dd{margin:4px 0 0;font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:.01em}
.meta dd small{font-family:var(--sans);font-size:11px;color:var(--dim);font-weight:400;margin-left:3px}

.acts{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.act-main{background:var(--acid);color:#0b0e09;font-weight:600;font-size:14.5px;padding:14px 22px;display:inline-flex;gap:10px;align-items:center}
.act-main::after{content:"";width:5px;height:5px;background:#0b0e09}
.act-main:hover{background:#d9ff7a}
.act-sub{font-size:13.5px;color:#d5dccd;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.act-sub:hover{color:var(--acid);border-bottom-color:var(--acid)}

/* 舞台袖パネル */
.case{margin:0;background:var(--panel);border:1px solid var(--line-2);padding:13px 13px 11px;position:relative;box-shadow:0 26px 60px -30px #000}
.case .screw{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a5440,#0a0d09 70%);border:1px solid #0a0d09}
.case .s1{left:6px;top:6px}.case .s2{right:6px;top:6px}.case .s3{left:6px;bottom:6px}.case .s4{right:6px;bottom:6px}
.case-head{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--dim);padding:0 4px 9px;text-transform:uppercase}
.case-head i{width:6px;height:6px;background:var(--acid);border-radius:50%;box-shadow:0 0 8px var(--acid)}
.case-head span:last-child{margin-left:auto;color:var(--dim-2)}
.case img{border:1px solid #000;width:100%;height:auto}
.case figcaption{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;font-size:11.5px;line-height:1.7;color:#a9b3a3;border-top:1px dashed var(--line-2);margin-top:11px;padding-top:9px}
.case figcaption .st{font-family:var(--mono);font-size:9.5px;color:var(--dim-2);letter-spacing:.06em;white-space:nowrap;align-self:start}

/* ── パートナー（6枠・3×2） ── */
.partners{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0e120e;padding:19px 0 21px}
.partners h2{font-family:var(--mono);font-size:9.5px;letter-spacing:.32em;font-weight:400;color:var(--dim-2);margin-bottom:13px}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pgrid a{display:flex;align-items:center;justify-content:center;min-height:84px;padding:8px 14px;background:var(--panel);border:1px solid var(--line)}
.pgrid a:hover{border-color:var(--line-2);background:var(--panel-2)}
.pgrid img{height:60px;width:auto;max-width:100%;object-fit:contain}

/* ── セクション共通 ── */
.sec{padding:52px 0 14px;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}
.shead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:14px;margin-bottom:14px}
.sno{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--acid);border:1px solid var(--line-2);padding:3px 7px;align-self:center}
.shead h2{font-size:clamp(23px,2.7vw,33px)}
.shead .st{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--dim-2);text-transform:uppercase}
.lede{color:#bcc5b5;font-size:14.6px;max-width:60em;margin-bottom:22px}

/* セットリスト表 */
.list{border-top:1px solid var(--line-2)}
.lrow{display:grid;grid-template-columns:56px minmax(0,1fr) 132px 78px 64px;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px dotted var(--line-2)}
.lrow .n{font-family:var(--mono);font-size:11px;color:var(--acid)}
.lrow .t{font-size:14.8px;line-height:1.6}
.lrow .t small{display:block;font-size:11.5px;color:var(--dim);letter-spacing:.02em;margin-top:2px}
.lrow .c{font-size:12px;color:#cfd7c7}
.lrow .d,.lrow .v{font-family:var(--mono);font-size:11.5px;color:var(--dim);text-align:right}
.lmore{margin-top:18px;display:flex;align-items:center;gap:14px;font-size:13px}
.lmore a{border-bottom:1px solid var(--acid);padding-bottom:2px;color:#e9efdf}
.lmore span{font-family:var(--mono);font-size:10px;color:var(--dim-2);letter-spacing:.14em}

/* フロア（分類） */
.floors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.floor{background:var(--ink);padding:20px 20px 22px}
.floor .fn{font-family:var(--mono);font-size:10px;color:var(--dim-2);letter-spacing:.16em}
.floor h3{font-size:21px;margin:7px 0 3px}
.floor .ro{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;color:var(--acid);text-transform:uppercase;margin-bottom:9px}
.floor p{font-size:13.2px;color:#aeb8a7;line-height:1.75}
.floor:hover{background:#131811}

/* 転換表 */
.chg{border-left:1px solid var(--line-2);margin-left:70px}
.crow{display:grid;grid-template-columns:64px minmax(0,1fr);gap:26px;padding:14px 0 15px;position:relative;border-bottom:1px dotted var(--line-2)}
.crow::before{content:"";position:absolute;left:-4px;top:22px;width:7px;height:7px;background:var(--ink);border:1px solid var(--acid);border-radius:50%}
.crow .time{font-family:var(--mono);font-size:11px;color:var(--acid);margin-left:-96px;width:64px;text-align:right;align-self:start;padding-top:3px}
.crow h3{font-size:18px;margin-bottom:3px}
.crow .en{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--dim-2);text-transform:uppercase;margin-bottom:5px}
.crow p{font-size:13.4px;color:#aeb8a7;max-width:52em}

/* 読み方（テキスト＋切り出し） */
.read{display:grid;grid-template-columns:.95fr 1.05fr;gap:44px;align-items:start}
.read .shot{border:1px solid var(--line-2);background:var(--panel);padding:10px}
.read .shot img{border:1px solid #000}
.read .shot p{font-family:var(--mono);font-size:9.5px;color:var(--dim-2);letter-spacing:.06em;margin-top:8px}
.fields{margin-top:4px;border-top:1px solid var(--line)}
.fields div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px dotted var(--line-2);font-size:13.2px;color:#b3bda9}
.fields b{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--acid);font-weight:500;padding-top:4px}

/* 入場（ゲート） */
.gate{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.gate .box{border:1px solid var(--line-2);background:var(--panel);padding:22px}
.gate .box h3{font-size:19px;margin-bottom:10px}
.gate .box p{font-size:13.4px;color:#b0baa6;margin-bottom:10px}
.gate .q{font-family:var(--sans);font-size:15px;color:#fff;border-left:2px solid var(--acid);padding-left:12px;margin-bottom:12px}
.btn-line{display:inline-block;border:1px solid var(--line-2);padding:9px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#dde5d3}
.btn-line:hover{border-color:var(--acid);color:var(--acid)}

/* ── 下段ページ共通 ── */
.pagehead{padding:46px 0 30px;border-bottom:1px solid var(--line)}
.pagehead .kick{margin-bottom:14px}
.pagehead h1{font-size:clamp(30px,3.8vw,46px);margin-bottom:14px}
.pagehead p{color:#b8c1b0;font-size:14.6px;max-width:56em}

.body{padding:44px 0 30px}
.chap{margin-bottom:40px}
.chap h2{font-size:23px;margin-bottom:8px;display:flex;gap:12px;align-items:baseline}
.chap h2 span{font-family:var(--mono);font-size:10px;color:var(--acid);letter-spacing:.12em}
.chap p{font-size:14.4px;color:#bcc5b4;margin-bottom:10px;max-width:60em}
.chap p b{color:#fff;font-weight:600}

/* 実データ表（セットリスト／フロア） */
.tbl{width:100%;border-collapse:collapse;font-size:13.4px}
.tbl caption{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim-2);padding-bottom:8px}
.tbl th{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--dim-2);text-align:left;font-weight:400;border-bottom:1px solid var(--line-2);padding:0 10px 7px 0;text-transform:uppercase}
.tbl td{border-bottom:1px dotted var(--line-2);padding:12px 10px 12px 0;vertical-align:top;color:#c6cfbd}
.tbl td.k{font-family:var(--mono);font-size:11px;color:var(--acid);white-space:nowrap}
.tbl td.t{color:#eef2e6}
.tbl td.t small{display:block;color:var(--dim);font-size:11px;margin-top:3px}
.tbl td.num{font-family:var(--mono);font-size:11.5px;text-align:right;white-space:nowrap;color:#aab4a2}

/* カテゴリブロック（stages） */
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.cat{background:var(--ink);padding:24px 24px 26px}
.cat .top{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.cat .no{font-family:var(--mono);font-size:10px;color:var(--acid)}
.cat h2{font-size:22px}
.cat .en{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--dim-2);margin-bottom:10px;text-transform:uppercase}
.cat p{font-size:13.4px;color:#b2bcaa;margin-bottom:9px}
.cat .use{font-size:12.4px;color:#8f9a89;border-top:1px dotted var(--line-2);padding-top:9px}
.cat .use b{color:var(--acid);font-weight:500;font-family:var(--mono);font-size:10px;letter-spacing:.1em}

/* FAQ */
.qa{border-top:1px solid var(--line-2)}
.qa details{border-bottom:1px dotted var(--line-2);padding:15px 0}
.qa summary{cursor:pointer;font-size:14.6px;list-style:none;display:flex;gap:14px;align-items:baseline}
.qa summary::-webkit-details-marker{display:none}
.qa summary .q{font-family:var(--mono);font-size:10px;color:var(--acid);letter-spacing:.1em}
.qa .a{padding:9px 0 2px 34px;font-size:13.6px;color:#b3bda9;max-width:64em}

/* フッター */
.foot{border-top:1px solid var(--line-2);background:#0a0d0a;margin-top:40px;padding:34px 0 26px}
.foot .sign{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:22px}
.foot .sign b{font-family:var(--display);font-size:28px;letter-spacing:.02em;text-transform:uppercase}
.foot .sign span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim-2)}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.fcols h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--acid);font-weight:400;margin-bottom:8px;text-transform:uppercase}
.fcols p{font-size:12.2px;color:#8d9887;line-height:1.8}
.fcols a{color:#b9c3b1;border-bottom:1px solid #2b3326}
.fcols a:hover{color:var(--acid)}
.legal{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 20px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:#6d7768}

/* 404 */
.nf{padding:80px 0 60px;text-align:left}
.nf .big{font-family:var(--display);font-size:clamp(84px,16vw,190px);line-height:.86;color:#252d22;letter-spacing:.01em}
.nf h1{font-size:clamp(26px,3.4vw,40px);margin:-14px 0 16px}
.nf p{color:#b3bda9;font-size:14.4px;max-width:40em;margin-bottom:22px}

/* ── モバイル ── */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .read{grid-template-columns:1fr;gap:26px}
  .gate{grid-template-columns:1fr;gap:20px}
  .floors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcols{grid-template-columns:1fr 1fr}
  .lrow{grid-template-columns:44px minmax(0,1fr) 78px 62px}
  .lrow .c{display:none}
  .chg{margin-left:0;border-left:0}
  .crow{grid-template-columns:56px minmax(0,1fr);gap:16px}
  .crow .time{margin-left:0;text-align:left}
  .crow::before{display:none}
}
@media (max-width:640px){
  body{font-size:15px}
  .bar::after{display:none}
  .tape .wrap{gap:10px;font-size:9px;letter-spacing:.1em}
  .tape .wrap span:nth-child(2){display:none}
  .wrap{padding:0 18px}
  .bar .wrap{grid-template-columns:minmax(0,1fr) auto;gap:12px 14px;padding-top:14px;padding-bottom:14px}
  .mark{grid-area:1/1/2/2}
  .door{grid-area:1/2/2/3;justify-self:end}
  .nav{grid-area:2/1/3/3}
  .mark b{font-size:22px}
  .mark span{letter-spacing:.2em;font-size:9.5px}
  .door{padding:9px 12px;font-size:10px}
  .nav{grid-column:1/-1;justify-content:flex-start;gap:6px 14px;border-top:1px solid var(--line);padding-top:10px}
  .nav a{font-size:12.5px}
  .hero{padding:34px 0 32px}
  h1{font-size:31px}
  .lead{font-size:14.4px}
  .meta{grid-template-columns:1fr 1fr;row-gap:2px}
  .meta dd{font-size:21px}
  .acts{gap:14px}
  .act-main{padding:12px 16px;font-size:13.5px}
  .case{padding:10px 10px 9px}
  .case figcaption{grid-template-columns:1fr;gap:4px}
  .case figcaption .st{white-space:normal}
  .partners{padding:16px 0 18px}
  .pgrid{gap:8px}
  .pgrid a{min-height:62px;padding:6px 8px}
  .pgrid img{height:38px}
  .sec{padding:38px 0 8px}
  .shead{grid-template-columns:auto minmax(0,1fr);gap:10px}
  .shead .st{display:none}
  .lrow{grid-template-columns:38px minmax(0,1fr) 58px;gap:10px}
  .lrow .v{display:none}
  .lrow .t{font-size:13.6px}
  .floors{grid-template-columns:1fr}
  .cats{grid-template-columns:1fr}
  .fields div{grid-template-columns:82px minmax(0,1fr);gap:10px}
  .tbl th:nth-child(5),.tbl td:nth-child(5){display:none}
  .tbl th:nth-child(3),.tbl td:nth-child(3){width:74px;font-size:11px}
  .tbl td{padding:10px 6px 10px 0}
  .tbl th{padding:0 6px 7px 0}
  .fcols{grid-template-columns:1fr;gap:20px}
  .nf{padding:56px 0 40px}
}