/* =========================================================
   BLUEGOATS テーマ — site.css（試作 v14 の style.css から移植）
   書体：見出し・日付・小さな英字 Barlow Condensed（DIN Condensed 系に寄せた無料書体）
         日本語 ヒラギノ角ゴ／Noto Sans JP。BLUEGOATS の文字は公式ロゴの文字（開いた時の演出・ヘッダー）
   背景：章ごとに 紙 → 黒 → 紙 → 黒 … と交互
   ========================================================= */

@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --ink: #1d1d1c;
  --ink-2: #5a5a57;            /* paper上 6.4:1 */
  --paper: #f1f0ec;
  --paper-2: #f1f0ec;          /* FIRST TIME（2026-11-11 までは淡い青灰 #e3e7ea。ほかの明るい地とそろえた） */
  --card: #fbfaf7;
  --night: #121212;
  --night-2: #1c1c1c;
  --night-text: #f1f0ec;
  --night-dim: #a8a8a3;        /* night上 7.8:1 */
  --line: rgba(29, 29, 28, .22);
  --line-dark: rgba(241, 240, 236, .2);
  --blue: #2f4fe0;
  --blue-soft: #a8b7ff;
  --alert: #ff9d90;

  --cond: "Barlow Condensed", "DIN Condensed", "Arial Narrow", sans-serif;
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;

  --g: 4vw;
  --hd: 72px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain: .04;
}
@media (max-width: 759px) { :root { --g: 5vw; --hd: 62px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.85; letter-spacing: .03em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .25em; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.en { font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: .005em; }
.lbl { font-family: var(--cond); font-weight: 500; font-size: 14px; letter-spacing: .05em; line-height: 1.3; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.on-dark :focus-visible, .menu :focus-visible, .player :focus-visible, .viewer :focus-visible { outline-color: var(--blue-soft); }
#main:focus { outline: none; }
.on-dark { background: var(--night); color: var(--night-text); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 120; background: var(--ink); color: #fff; padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }
.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: var(--noise); background-size: 180px; opacity: var(--grain); mix-blend-mode: overlay; }

/* ---------- 共通部品 ---------- */
.arw { display: inline-block; width: 18px; height: 10px; position: relative; flex: none; transition: transform .5s var(--ease); }
.arw::before { content: ""; position: absolute; left: 0; right: 1px; top: 50%; height: 1px; background: currentColor; }
.arw::after { content: ""; position: absolute; right: 1px; top: 50%; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.arw-l { transform: scaleX(-1); }
.more { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; white-space: nowrap; font-family: var(--cond); font-weight: 600; font-size: 18px; letter-spacing: .04em; text-decoration: none; border-bottom: 1px solid currentColor; padding-top: 6px; }
.more:hover .arw { transform: translateX(5px); }
.more.ja-more { font-family: var(--sans); font-weight: 400; font-size: 13px; text-transform: none; letter-spacing: .04em; }
.back .more, .box .more { white-space: normal; max-width: 100%; }
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; padding: 0 22px; border-radius: 999px; background: var(--blue); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; border: 0; cursor: pointer; transition: filter .3s; }
.btn:hover { filter: brightness(1.15); }
.btn-line { background: transparent; color: inherit; border: 1px solid currentColor; }
.icon-btn { appearance: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid currentColor; background: transparent; cursor: pointer; display: inline-grid; place-items: center; transition: background .3s, color .3s, opacity .3s; }
.icon-btn:hover { background: currentColor; }
.icon-btn:hover .arw { color: var(--night); }
.icon-btn[disabled] { opacity: .3; cursor: default; }
.icon-btn[disabled]:hover { background: transparent; }
.icon-btn[disabled]:hover .arw { color: inherit; }
.tag { display: inline-block; font-size: 11px; line-height: 1; letter-spacing: .04em; font-weight: 700; padding: 5px 8px; border: 1px solid currentColor; border-radius: 3px; white-space: nowrap; vertical-align: middle; }
.tag-sample { border-style: dashed; opacity: .75; font-weight: 400; }
.status-on_sale { background: var(--blue); border-color: var(--blue); color: #fff; }
.status-sold_out { background: currentColor; }
.status-sold_out > span { color: var(--paper); }
.on-dark .status-sold_out > span { color: var(--night); }
.status-canceled { color: #c2412f; }
.on-dark .status-canceled { color: var(--alert); }
.status-before_sale, .status-tba, .status-ended { opacity: .8; }
.pending { color: var(--ink-2); }
.on-dark .pending { color: var(--night-dim); }
.pending-label { display: inline-block; font-size: 11px; padding: 2px 7px; margin-right: 6px; border: 1px dashed currentColor; border-radius: 3px; vertical-align: 1px; }
.proto-note { display: none; }
.show-notes .proto-note { display: block; font-size: 12px; line-height: 1.6; color: #6b4e00; background: #fff6d6; border: 1px dashed #c49a1a; padding: 6px 10px; margin-top: 12px; max-width: 46em; position: relative; z-index: 5; }

/* 文字ごとの登場（約1.05秒＋45msずつ） */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .03em .08em; margin: -.06em -.03em -.08em; }
.js .split .c { display: inline-block; transform: translateY(110%); }
.js .split.is-in .c { transform: none; transition: transform 1.05s var(--ease); transition-delay: calc(var(--ci) * 45ms); }
.js [data-rv] { opacity: 0; transform: translateY(46px); }
.js [data-rv].is-in { opacity: 1; transform: none; transition: opacity 1s ease, transform 1.1s var(--ease); transition-delay: var(--rd, 0s); }

/* ---------- ヘッダー：ロゴとメニューの2本線だけ ---------- */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--hd); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--g); color: #fff; mix-blend-mode: difference; pointer-events: none; }
.hd > * { pointer-events: auto; }
.hd-brand { display: inline-flex; align-items: center; min-height: 44px; }
.hd-brand svg { width: 140px; height: 27.2px; fill: currentColor; overflow: visible; }
.hd-menu { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; width: 48px; height: 48px; display: grid; place-items: center; margin-right: -10px; }
.ln { width: 30px; height: 9px; position: relative; display: block; }
.ln i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.ln i:first-child { top: 0; } .ln i:last-child { bottom: 0; }
.hd-menu:hover .ln i:first-child { transform: translateX(-5px); }
.hd-menu:hover .ln i:last-child { transform: translateX(5px); }

/* ---------- メニュー ---------- */
.menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--night-text); overflow: hidden; }
.menu::backdrop { background: transparent; }
/* 全面の重ね（メニュー・プレーヤー・写真・歌詞）を開いた瞬間だけ、下の端に出す黒い帯（site.js の openModal が足して、1秒で消す）。
   X などのアプリ内ブラウザは、重ねを開いた時に「画面の下の端から数px内側にある、いちばん手前の部品の色」で、下のボタン帯の裏を塗る。
   メニューは開いた瞬間は中身が幕で隠れていて、プレーヤーなどは地が透明から暗くなるので、色が決まらず帯の裏に下のページが透けていた。
   重ね自身の地・::after・透明（opacity: 0）の部品では拾われず、見えている中の部品でないと効かない。高さは 8px で効き、2px では効かなかった
   （2026-11-13。iPhone のシミュレーターで X と同じ作りを再現して確認） */
.ov-edge { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2147483647; height: 12px; background: var(--night); opacity: 0; pointer-events: none; }
.is-edge > .ov-edge { opacity: 1; }
.menu-bg { position: absolute; inset: 0; background: var(--night); overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .65s var(--ease-io); }
.menu-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--ease); }
.menu.is-open .menu-video { transform: none; }
/* 半透明の黒：文字が読める濃さで、後ろのライブ映像が透けて見える */
.menu-inner { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: rgba(12, 12, 12, .64); padding: 0 var(--g) 40px; clip-path: inset(0 0 100% 0); transition: clip-path .65s var(--ease-io); }
.menu.is-open .menu-inner, .menu.is-open .menu-bg { clip-path: inset(0); }
.menu-top { height: var(--hd); display: flex; align-items: center; justify-content: space-between; }
.menu-top .hd-brand svg { fill: var(--night-text); }
.close-btn { appearance: none; background: none; border: 0; cursor: pointer; padding: 0; color: inherit; width: 48px; height: 48px; display: inline-grid; place-items: center; margin-right: -10px; }
.close-btn .x { width: 24px; height: 24px; position: relative; }
.close-btn .x::before, .close-btn .x::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.close-btn .x::after { transform: rotate(-45deg); }
.menu-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 10vw; padding-top: clamp(8px, 3vh, 40px); align-items: start; }
.menu-list li { border-bottom: 1px solid var(--line-dark); opacity: 0; transform: translateY(26px); transition: opacity .5s ease, transform .8s var(--ease); transition-delay: calc(var(--i) * 40ms + 220ms); }
.menu.is-open .menu-list li, .menu.is-open .menu-side > * { opacity: 1; transform: none; }
.menu-list a { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 18px; padding: 8px 0 6px; text-decoration: none; }
.menu-list .en { white-space: nowrap; font-size: clamp(38px, 4.4vw, 70px); line-height: .95; transition: transform .6s var(--ease), opacity .4s; }
.menu-list .ja { font-size: 12px; color: rgba(241, 240, 236, .78); letter-spacing: .08em; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.menu-list a:hover .en { transform: translateX(12px); }
.menu-list:hover a:not(:hover) .en { opacity: .45; }
.menu-list sup { font-size: .32em; vertical-align: 1.5em; margin-left: .2em; }
.menu-side > * { opacity: 0; transform: translateY(20px); transition: opacity .5s ease .5s, transform .8s var(--ease) .5s; }
.menu-side-h a { display: flex; align-items: baseline; gap: 14px; text-decoration: none; padding: 12px 0; flex-wrap: wrap; }
.menu-side-h .en { font-size: clamp(30px, 2.6vw, 42px); line-height: 1; }
.menu-side-h .ja, .menu-sub .ja { font-size: 12px; color: rgba(241, 240, 236, .78); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.menu-list, .menu-sub { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.menu-sub { border-top: 1px solid var(--line-dark); margin-bottom: 36px; }
.menu-sub li { border-bottom: 1px solid var(--line-dark); }
.menu-sub a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; text-decoration: none; }
.menu-sub .en { font-size: 24px; }
.menu-settings { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.switch { appearance: none; background: none; border: 0; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 13px; color: inherit; }
.switch-ui { width: 38px; height: 22px; border-radius: 22px; border: 1px solid currentColor; position: relative; flex: none; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: currentColor; transition: transform .3s var(--ease); }
.switch[aria-checked="true"] .switch-ui { background: var(--blue); border-color: var(--blue); }
.switch[aria-checked="true"] .switch-ui::after { transform: translateX(16px); background: #fff; }

/* =========================================================
   HERO（紙）
   ========================================================= */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 540px; padding: var(--hd) var(--g) clamp(16px, 2.2vw, 34px); background: var(--paper); }
.hero-frame { position: relative; height: 100%; overflow: hidden; background: #151515; }
.js .hero-frame { clip-path: inset(100% 0 0 0); }
.js .hero.is-on .hero-frame { clip-path: inset(0); transition: clip-path 1.3s cubic-bezier(.76, 0, .18, 1); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateY(calc(var(--hp, 0) * 9%)) scale(1.1); }
.js .hero.is-on .hero-video { animation: heroZoom 2.6s var(--ease) both; }
@keyframes heroZoom { from { scale: 1.16; } to { scale: 1; } }
.hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .26) 0%, rgba(0, 0, 0, 0) 40%); }
.hero-toggle { position: absolute; z-index: 4; right: 18px; top: 18px; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, .6); background: rgba(10, 11, 13, .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-toggle:hover { background: rgba(255, 255, 255, .16); }
.i-pause { width: 10px; height: 12px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.i-play { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.hero-toggle .i-play, .hero-toggle.is-paused .i-pause { display: none; }
.hero-toggle.is-paused .i-play { display: block; }
.hero-toggle[disabled] { opacity: .4; cursor: default; }
.notice-bar { position: absolute; z-index: 5; left: calc(var(--g) + 16px); right: calc(var(--g) + 16px); top: calc(var(--hd) + 16px); display: block; padding: 12px 18px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; border-left: 4px solid var(--blue); }
.show-notes .note-hero { position: absolute; z-index: 6; left: calc(var(--g) + 16px); top: calc(var(--hd) + 14px); margin: 0; }

/* ---------- セクション共通 ---------- */
.sec { position: relative; padding: clamp(96px, 11vw, 180px) var(--g); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-bottom: clamp(36px, 4.5vw, 72px); position: relative; z-index: 3; }
.ttl { display: flex; align-items: baseline; gap: 10px 22px; flex-wrap: wrap; font-weight: 400; }
.ttl .en { font-size: clamp(60px, 8.4vw, 150px); line-height: .82; margin-left: -.03em; }
.head-links { display: flex; gap: 28px; flex-wrap: wrap; }

/* ---------- DISCOGRAPHY（黒） ---------- */
.disco { overflow: clip; isolation: isolate; background: #161616; }
.disco-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.disco-bg img { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(60px) saturate(1.25) brightness(.6); opacity: 0; transform: scale(1.06); transition: opacity 1s ease, transform 1.8s var(--ease); }
.disco-bg img.on { opacity: 1; transform: none; }
.disco::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .3) 100%); }
.disco > :not(.disco-bg) { position: relative; z-index: 1; }
.shelf { display: flex; gap: clamp(18px, 2.4vw, 40px); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 calc(var(--g) * -1); padding: 52px var(--g) 18px; scroll-padding-inline: var(--g); cursor: grab; -webkit-user-select: none; user-select: none; }
.shelf::-webkit-scrollbar { display: none; }
.shelf.is-drag { cursor: grabbing; scroll-snap-type: none; }
.shelf.is-drag a { pointer-events: none; }
.work { flex: 0 0 clamp(200px, 23vw, 360px); scroll-snap-align: start; transition: opacity .5s ease; }
.shelf:hover .work:not(.is-hot) { opacity: .5; }
.work a { display: block; text-decoration: none; }
.work-cover { position: relative; aspect-ratio: 1; background: var(--night-2); box-shadow: 0 30px 50px -32px rgba(0, 0, 0, .9); transform-origin: 50% 100%; transition: transform .7s var(--ease), box-shadow .7s; }
.work-cover img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.work.is-hot { position: relative; z-index: 2; }
.work.is-hot .work-cover { transform: scale(1.12); box-shadow: 0 50px 70px -36px rgba(0, 0, 0, .95); }
.work-meta { margin-top: 18px; color: rgba(241, 240, 236, .72); }
.work-title { margin-top: 4px; font-size: clamp(15px, 1.2vw, 18px); font-weight: 700; letter-spacing: .04em; line-height: 1.45; }
.work-meta, .work-title { transition: transform .7s var(--ease); }
.work.is-hot .work-meta, .work.is-hot .work-title { transform: translateY(6px); }
.work .fail { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; text-align: center; font-size: 12px; color: var(--night-dim); }
.js .work { opacity: 0; transform: translateX(80px); }
.js .shelf.is-in .work { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.2s var(--ease); transition-delay: calc(var(--i) * 70ms); }
.js .shelf.is-in:hover .work:not(.is-hot) { opacity: .5; transition-delay: 0s; }
.shelf-foot { display: flex; justify-content: flex-end; margin-top: 18px; }
.shelf-nav { display: flex; gap: 12px; }

/* ---------- LIVE（紙）：写真に重なる大見出し ---------- */
.live-home { background: var(--paper); }
.live-stage { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; margin-bottom: clamp(40px, 5vw, 80px); }
.live-photo { grid-column: 4 / 13; grid-row: 1; aspect-ratio: 16 / 10; overflow: hidden; background: #222; }
.live-photo img { width: 100%; height: 115%; object-fit: cover; transform: translateY(calc(var(--lp, 0) * -8%)); }
.live-big { grid-column: 1 / 13; grid-row: 1; align-self: end; position: relative; z-index: 3; font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: clamp(130px, 27vw, 470px); line-height: .76; letter-spacing: -.01em; color: #fff; mix-blend-mode: difference; margin: 0 0 -.07em -.04em; pointer-events: none; }
.live-cap { grid-column: 1 / 4; grid-row: 1; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-right: 2vw; position: relative; z-index: 4; }

/* 公演の行（日付・曜日・種別・公演名・矢印） */
.live-list { border-top: 1px solid var(--line); }
.on-dark .live-list { border-top-color: var(--line-dark); }
.live-row { border-bottom: 1px solid var(--line); }
.on-dark .live-row { border-bottom-color: var(--line-dark); }
.live-link { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 48px; gap: 2.4rem; align-items: center; padding: 30px 14px; text-decoration: none; transition: background-color .4s; }
a.live-link:hover { background: rgba(0, 0, 0, .035); }
.on-dark a.live-link:hover { background: rgba(255, 255, 255, .04); }
.live-date { display: flex; align-items: center; gap: 4px; font-family: var(--cond); font-weight: 600; line-height: 1; white-space: nowrap; }
.live-date .y { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: .04em; font-weight: 600; }
.live-date .md { font-size: clamp(32px, 2.7vw, 42px); letter-spacing: .015em; }
.live-date .w { font-size: 17px; letter-spacing: .06em; align-self: flex-end; margin: 0 0 3px 6px; }
.live-cat { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--ink-2); margin-bottom: 6px; }
.on-dark .live-cat { color: var(--night-dim); }
.live-title { font-size: 16px; line-height: 1.7; letter-spacing: .04em; }
.is-canceled .live-title { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .65; }
.live-go { justify-self: end; width: 28px; height: 28px; position: relative; }
.live-go::before { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.2px; background: currentColor; transform: rotate(-45deg); }
.live-go::after { content: ""; position: absolute; right: 3px; top: 3px; width: 12px; height: 12px; border-top: 1.2px solid currentColor; border-right: 1.2px solid currentColor; }
a.live-link:hover .live-go { transform: translate(3px, -3px); transition: transform .4s var(--ease); }
.live-empty { padding: 48px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-2); }
.on-dark .live-empty { border-color: var(--line-dark); color: var(--night-dim); }
.live-empty strong { display: block; color: inherit; font-size: 17px; margin-bottom: 8px; }

/* 公演詳細ページ */
.ld-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.ld-date { display: flex; align-items: center; gap: 8px; font-family: var(--cond); font-weight: 600; line-height: .85; }
.ld-date .y { writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(14px, 1.4vw, 22px); }
.ld-date .big { font-size: clamp(76px, 11vw, 190px); }
.ld-date .w { font-size: clamp(22px, 2.2vw, 36px); align-self: flex-end; margin-bottom: .2em; letter-spacing: .06em; }
.ld-title { font-size: clamp(22px, 2.6vw, 36px); font-weight: 700; line-height: 1.55; letter-spacing: .04em; max-width: 30em; margin-bottom: 36px; outline: none; }
.alert { border: 1px solid var(--alert); padding: 16px 20px; margin-bottom: 32px; max-width: 46em; display: grid; grid-template-columns: auto 1fr; gap: 14px; }
.alert b { color: var(--alert); }
.ld-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 5vw; align-items: start; }
.spec { border-top: 1px solid var(--line-dark); }
.spec > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line-dark); }
.spec dt { font-size: 13px; color: var(--night-dim); }
.spec dd { font-size: 15px; line-height: 1.8; }
.spec dd a { color: var(--blue-soft); }
.ticket-box { position: sticky; top: calc(var(--hd) + 24px); border: 1px solid var(--line-dark); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.ticket-box h2 { font-family: var(--cond); font-weight: 600; text-transform: uppercase; font-size: 40px; line-height: 1; }
.ticket-box .small { font-size: 13px; color: var(--night-dim); }
.ticket-box .btn { width: 100%; }

/* ---------- MUSIC VIDEO（黒）：中央に1本、左右がのぞく横スライド ---------- */
.mvs { overflow: clip; }
.mvc { position: relative; --sw: min(60vw, 960px); --gap: 2.6vw; }
.mvc-view { margin: 0 calc(var(--g) * -1); overflow: hidden; }
.mvc-track { display: flex; gap: var(--gap); transform: translateX(var(--tx, 0)); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.mvc-track.is-anim { transition: transform .8s var(--ease); }
.mvc-slide { flex: 0 0 var(--sw); position: relative; opacity: .4; transition: opacity .6s ease; }
.mvc-slide.is-center { opacity: 1; }
.mv-media { appearance: none; border: 0; padding: 0; cursor: pointer; display: block; width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #000; color: #fff; }
.mv-media .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); -webkit-user-drag: none; }
.mv-media:hover .poster { transform: scale(1.03); }
.mv-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 40%); pointer-events: none; }
.mv-play { position: absolute; z-index: 2; left: 20px; bottom: 20px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .85); display: grid; place-items: center; background: rgba(0, 0, 0, .2); transition: background .3s, border-color .3s; }
.mv-play::before { content: ""; width: 0; height: 0; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 4px; }
.mv-media:hover .mv-play { background: var(--blue); border-color: var(--blue); }
.mvc-arrow { position: absolute; z-index: 3; top: calc(var(--sw) * 9 / 16 / 2); width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 0; background: var(--night-text); color: var(--night); cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: transform .3s var(--ease); }
.mvc-arrow:hover { transform: scale(1.08); }
.mvc-prev { left: calc(50% - var(--sw) / 2 - 26px); }
.mvc-next { right: calc(50% - var(--sw) / 2 - 26px); }
.mvc-cap { text-align: center; margin-top: 24px; min-height: 64px; }
.mvc-cap .t { font-size: clamp(18px, 1.6vw, 24px); font-weight: 700; letter-spacing: .06em; }
.mvc-cap .meta { display: flex; justify-content: center; gap: 18px; align-items: center; flex-wrap: wrap; color: var(--night-dim); margin-top: 4px; }
.mvc-cap .meta a { color: var(--night-text); font-size: 13px; text-decoration: none; border-bottom: 1px solid var(--line-dark); min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.mvc-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.mvc-dots button { appearance: none; border: 0; padding: 14px 0; width: 40px; background: none; cursor: pointer; position: relative; }
.mvc-dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(241, 240, 236, .3); transition: background .3s; }
.mvc-dots button[aria-current="true"]::before { background: var(--night-text); }

/* ---------- PHOTO（紙） ---------- */
.photos { background: var(--paper); overflow: clip; }
.ph-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr) minmax(0, 1fr); gap: 4vw; align-items: start; }
.ph-col { display: flex; flex-direction: column; gap: clamp(40px, 5.5vw, 96px); transform: translateY(var(--py, 0)); will-change: transform; }
.ph-col:nth-child(2) { margin-top: clamp(120px, 16vw, 300px); }
.ph-col:nth-child(3) { margin-top: clamp(40px, 6vw, 110px); }
.ph { appearance: none; border: 0; padding: 0; background: none; cursor: zoom-in; display: block; text-align: left; }
.ph.s-a { width: 100%; } .ph.s-b { width: 80%; align-self: flex-end; } .ph.s-c { width: 88%; } .ph.s-d { width: 70%; align-self: center; }
.ph .pic { position: relative; overflow: hidden; background: #d8d4cc; }
.ph .pic img { width: 100%; height: auto; transition: transform 1.4s var(--ease); }
.ph:hover .pic img { transform: scale(1.035); }
.pic.is-broken::before { content: "写真を読み込めませんでした"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--ink-2); z-index: 2; }
/* 写真ページ：アルバムの絞り込み＋一覧。選ぶと大きく表示 */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; }
.chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-size: 14px; }
.chips a .n { font-family: var(--cond); font-weight: 600; font-size: 15px; opacity: .7; }
.chips a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 200px), 1fr)); gap: 10px; }
.pgrid .ph { width: 100%; }
.pgrid .pic { aspect-ratio: 1; }
.pgrid .pic img { height: 100%; object-fit: cover; }

/* ---------- PROFILE（黒） ---------- */
.profile-stage { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: clamp(48px, 5vw, 90px); }
.profile-photo { grid-column: 3 / 13; grid-row: 1; position: relative; overflow: hidden; background: #111; }
.profile-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transform: scale(calc(1.08 - var(--pp, 0) * .08)); }
.profile-big { grid-column: 1 / 13; grid-row: 1; align-self: start; position: relative; z-index: 3; font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: clamp(96px, 18vw, 320px); line-height: .8; color: #fff; mix-blend-mode: difference; margin: -.1em 0 0 -.03em; pointer-events: none; }
.profile-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; align-items: start; }
.profile-lead { font-size: clamp(28px, 3.4vw, 52px); font-weight: 700; line-height: 1.3; letter-spacing: .04em; }
.profile-text p { max-width: 32em; line-height: 2.05; }
.profile-text p + p { margin-top: 1em; }
.mem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.4vw 2.2vw; margin-top: clamp(64px, 8vw, 130px); }
.mem { display: flex; flex-direction: column; }
.mem-ph { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: #2a1a1a; margin-bottom: 18px; }
.mem-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.mem:hover .mem-ph img { transform: scale(1.04); }
.mem-role { color: var(--night-dim); }
.mem-name { font-size: clamp(20px, 1.7vw, 26px); font-weight: 700; letter-spacing: .06em; line-height: 1.35; margin: 4px 0 12px; }
.mem-intro { font-size: 13.5px; line-height: 1.95; color: rgba(241, 240, 236, .86); flex: 1; }
.mem .sns { align-self: flex-start; margin-top: 16px; font-family: var(--cond); font-weight: 600; font-size: 16px; text-decoration: none; min-width: 44px; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-dark); border-radius: 999px; padding: 0 16px; transition: background .3s, color .3s; }
.mem .sns:hover { background: var(--night-text); color: var(--night); }
.js .mem-grid .mem { opacity: 0; transform: translateY(50px); }
.js .mem-grid.is-in .mem { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.1s var(--ease); transition-delay: calc(var(--i) * 100ms); }

/* ---------- FIRST TIME（淡い青灰） ---------- */
.first { background: var(--paper-2); }
.first-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2vw; align-items: stretch; }
.first-card { display: flex; flex-direction: column; text-decoration: none; background: var(--card); transition: transform .6s var(--ease), box-shadow .6s; }
.first-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -34px rgba(18, 19, 21, .45); }
.first-card .pic { aspect-ratio: 4 / 3; overflow: hidden; background: #d8d4cc; position: relative; }
.first-card .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.first-card:hover .pic img { transform: scale(1.05); }
.first-card .body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.first-card .en { font-size: clamp(32px, 2.8vw, 46px); line-height: 1; }
.first-card .t { font-size: 16px; font-weight: 700; letter-spacing: .06em; }
.first-card .d { font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.first-card .go { margin-top: auto; padding-top: 16px; display: flex; justify-content: flex-end; }
.first-card:hover .go .arw { transform: translateX(6px); }
.js .first-grid .first-card { opacity: 0; transform: translateY(50px); }
.js .first-grid.is-in .first-card { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.1s var(--ease), box-shadow .6s; transition-delay: calc(var(--i) * 100ms); }
.js .first-grid.is-in .first-card:hover { transform: translateY(-6px); transition-delay: 0s; }

/* ---------- NEWS（黒）／SHOP（紙）／フッター ---------- */
.news-list { border-top: 1px solid var(--line); }
.on-dark .news-list { border-top-color: var(--line-dark); }
.news-row a { display: grid; grid-template-columns: 9.5rem 6.5rem minmax(0, 1fr) auto; gap: 1.6rem; align-items: center; padding: 26px 14px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color .4s; }
.on-dark .news-row a { border-bottom-color: var(--line-dark); }
.news-row a:hover { background: rgba(0, 0, 0, .035); }
.on-dark .news-row a:hover { background: rgba(255, 255, 255, .04); }
.news-date { font-family: var(--cond); font-weight: 600; font-size: 22px; letter-spacing: .02em; }
.news-cat { color: var(--ink-2); }
.on-dark .news-cat { color: var(--night-dim); }
.news-title { font-size: 15px; line-height: 1.7; }
.news-row a:hover .arw { transform: translateX(6px); }
.shop { padding: clamp(40px, 5vw, 80px) var(--g); background: var(--paper); }
.shop-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3vw; padding: clamp(36px, 5vw, 80px) 0; text-decoration: none; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.shop-link .en { font-weight: 700; font-size: clamp(80px, 12vw, 210px); line-height: .8; transition: letter-spacing .8s var(--ease); }
.shop-link:hover .en { letter-spacing: .04em; }
.shop-ja { font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; letter-spacing: .06em; }
.shop-arrow { font-size: clamp(44px, 6vw, 100px); line-height: 1; font-weight: 200; transition: transform .6s var(--ease); }
.shop-link:hover .shop-arrow { transform: translate(10px, -10px); }
.ft { padding: clamp(64px, 8vw, 120px) var(--g) 28px; }
.ft-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 6vw; align-items: start; }
.ft-logo svg { width: 120px; height: 121.3px; fill: var(--night-text); }
.ft-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3vw; }
.ft-nav ul:first-child a { font-family: var(--cond); font-weight: 600; font-size: 19px; text-transform: uppercase; letter-spacing: .03em; }
.ft-nav a { display: inline-flex; min-height: 40px; align-items: center; text-decoration: none; font-size: 13px; }
.ft-nav a:hover { text-decoration: underline; }
.ft-settings { display: flex; flex-direction: column; gap: 4px; }
.copy { margin-top: 64px; font-size: 12px; color: var(--night-dim); }

/* ---------- 画面遷移「照明」（2026-11-12 採用。本人「照明＋ロゴめっちゃいいな」。操作は塞がない）----------
   ライブハウスの客電が落ちるように暗くなり（b）、ロゴが照明のようにチカッと点く → 次のページで、ロゴが消えて明かりが戻る。
   トップの文字が点く演出と同じ考え方（4本の帯・暗転・光・静か と見比べて決めた） */
.curtain { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; visibility: hidden; }
/* 暗くなる・明かりが戻る間だけ出す。透明でも置いたままだと、X のアプリ内ブラウザが下のボタン帯の裏をこの幕の色（黒）で塗り続けるため（2026-11-13。下の body::after の説明も参照） */
.curtain.is-in, .curtain.is-out, .nav-in .curtain { visibility: visible; }
.curtain b { position: absolute; inset: 0; display: block; background: var(--night); opacity: 0; }
/* ロゴの大きさ：スマホ 56px 〜 PC 112px（2026-11-12「PCで見ると遷移のロゴが小さすぎ」）
   高さは「アドレスバーが出ている時の画面」の真ん中（50svh）に固定。スクロールしてバーが縮んだページから移ると、
   次のページでバーが戻って真ん中がずれ、ロゴが跳ねて見えたため（2026-11-12「トップページからの遷移だけロゴがちょっとおかしい」） */
.curtain-mark { position: absolute; display: block; left: 50%; top: 50%; top: 50svh; width: clamp(56px, 6.5vw, 112px); height: auto; aspect-ratio: 187.8 / 189.69; transform: translate(-50%, -50%); fill: var(--night-text); opacity: 0; }
.curtain.is-in b { opacity: 1; transition: opacity .42s cubic-bezier(.55, 0, .75, .2); }
.curtain.is-in .curtain-mark { animation: pt-flick-on .4s steps(1, end) .38s both; }
/* 次のページでは、ロゴを --hold のあいだ点けたままにしてから消し、そのあと明かりを戻す。--hold は読み込みが速かった時だけ長くなる（site.js。2026-11-12） */
.curtain.is-out b { opacity: 0; transition: opacity .8s cubic-bezier(.25, .1, .25, 1) calc(var(--hold, 250ms) + 200ms); }
.curtain.is-out .curtain-mark { animation: pt-flick-off .24s steps(1, end) var(--hold, 250ms) both; }
@keyframes pt-flick-on { 0% { opacity: 0; } 20% { opacity: .85; } 40% { opacity: .1; } 55% { opacity: 1; } 75% { opacity: .3; } 100% { opacity: 1; } }
@keyframes pt-flick-off { 0% { opacity: 1; } 35% { opacity: .15; } 55% { opacity: .8; } 100% { opacity: 0; } }

/* 同じ欄の中の移動（一覧→詳細、詳細→一覧など。例：DISCOGRAPHY → 作品）は照明を使わず、中身だけすっと入れ替える
   （2026-11-12 本人「何度もでると鬱陶しい」「別のページ遷移があったほうがいい」）。ヘッダーはそのまま */
.pt-out :is(#main, .ft, .menu) { opacity: 0; transform: translateY(-.75rem); transition: opacity .28s cubic-bezier(.65, 0, .35, 1), transform .28s cubic-bezier(.65, 0, .35, 1); }
.nav-soft :is(#main, .ft) { opacity: 0; }
body.bg-dark { background: var(--night); }
/* ページの外側の地（端で引っぱった時に跳ね返って見える部分）は、どのページも明るい色に揃える。
   黒いページでも、トップと同じく明るいふちが見える（2026-11-12「どっちかに揃えたい」「ふちがあってもいいと思うよLIVEページとかも」）。
   html に色を付けると外側は html の色になり、body の黒は中身の後ろだけに塗られる（入れ替えの時に白く光らないのはそのまま） */
html { background: var(--paper); }
.pt-in :is(#main, .ft) { animation: pt-soft .7s var(--ease) backwards; }
@keyframes pt-soft { from { opacity: 0; transform: translateY(1rem); } }
.rise { animation: rise .9s var(--ease) both; animation-delay: calc(var(--d, 0) * 80ms + .15s); }
@keyframes rise { from { opacity: 0; transform: translateY(36px); } }

/* ---------- プレーヤー／ビューア ---------- */
.player, .viewer { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 8, 8, .96); color: var(--night-text); }
.player::backdrop, .viewer::backdrop { background: rgba(8, 8, 8, .6); }
.player-inner, .viewer-inner { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px var(--g); }
.player-stage { width: min(100%, calc((100svh - 150px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; position: relative; }
.player-stage iframe, .player-stage video, .player-stage img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.player-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; background: rgba(0, 0, 0, .55); z-index: 2; }
.player-msg p { margin-bottom: 18px; font-size: 14px; line-height: 1.8; }
.player-bar, .viewer-bar { width: min(100%, 1280px); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.player-title { font-size: 14px; }
.player-bar .links { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.player-bar .links a { font-size: 13px; text-decoration: none; border-bottom: 1px solid currentColor; min-height: 40px; display: inline-flex; align-items: center; }
.viewer img { max-width: 100%; max-height: calc(100svh - 150px); width: auto; height: auto; background: #222; }
.viewer-bar { justify-content: center; }
.viewer-bar .close-btn { margin-left: auto; }
.viewer .icon-btn:hover .arw { color: var(--night); }
.count { font-family: var(--cond); font-weight: 600; font-size: 20px; min-width: 72px; text-align: center; }

/* ---------- 下層画面 ---------- */
.page { min-height: 100vh; padding: calc(var(--hd) + clamp(40px, 7vw, 110px)) var(--g) clamp(96px, 10vw, 160px); background: var(--paper); }
.page.on-dark { background: var(--night); }
.crumb { font-family: var(--cond); font-weight: 500; font-size: 14px; letter-spacing: .05em; display: flex; gap: 10px; align-items: center; color: var(--ink-2); margin-bottom: 20px; flex-wrap: wrap; }
.on-dark .crumb { color: var(--night-dim); }
.crumb a { text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.crumb a:hover { text-decoration: underline; }
.page-title { display: flex; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-bottom: clamp(40px, 6vw, 96px); font-weight: 400; outline: none; }
.page-title .en { font-size: clamp(76px, 12vw, 220px); line-height: .82; margin-left: -.03em; }
.page-title .ja { font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--ink-2); }
.on-dark .page-title .ja { color: var(--night-dim); }
.page-lead { max-width: 36em; font-size: 15px; line-height: 2; margin-bottom: 48px; color: var(--ink-2); }
.on-dark .page-lead { color: var(--night-dim); }
.back { margin-top: 56px; }
.tabs { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-dark); text-decoration: none; font-size: 13px; }
.tabs a[aria-current="page"] { background: var(--night-text); color: var(--night); border-color: var(--night-text); }
.works-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3vw 2.4vw; margin-bottom: clamp(80px, 10vw, 150px); }
.works-grid .work { flex: none; }
.works-grid .work-cover { box-shadow: 0 30px 40px -34px rgba(18, 19, 21, .5); }
.works-grid .work-meta { color: var(--ink-2); }
.js .works-grid .work { opacity: 1; transform: none; }
.sub-title { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.sub-title .en { font-size: clamp(44px, 5vw, 90px); line-height: .9; }
.sub-title .ja { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4vw 2.4vw; }
.vcard .mv-media { margin-bottom: 14px; }
.vcard .t { font-size: 17px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; }
.vcard .meta { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.vcard .meta a { color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; display: inline-flex; min-height: 36px; align-items: center; margin-top: 4px; }
.on-dark .vcard .meta { color: var(--night-dim); }
.on-dark .vcard .meta a { color: var(--night-text); }
.page:not(.on-dark) .mem-role, .page:not(.on-dark) .mem-intro { color: var(--ink-2); }
.exp-list { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 120px); }
.exp-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 5vw; align-items: center; }
.exp-step:nth-child(even) .exp-ph { order: 2; }
.exp-ph .pic { position: relative; aspect-ratio: 1100 / 763; overflow: hidden; background: #d8d4cc; }
.exp-ph img { width: 100%; height: 100%; object-fit: cover; }
.exp-step .en { font-size: clamp(52px, 6vw, 104px); line-height: .9; }
.exp-step h2 { font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: .06em; margin: 14px 0 22px; }
.bullets { display: flex; flex-direction: column; gap: 12px; max-width: 32em; }
.bullets li { padding-left: 1.4em; position: relative; line-height: 1.85; }
.bullets li::before { content: ""; position: absolute; left: 0; top: .9em; width: .7em; height: 1px; background: currentColor; }
.page-end { margin-top: clamp(72px, 9vw, 140px); padding-top: 40px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.page-end p { font-size: 18px; font-weight: 700; letter-spacing: .06em; }
.guide-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-bottom: clamp(48px, 6vw, 88px); }
.guide-meta > div { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--line); }
.guide-meta dt { font-size: 12px; color: var(--ink-2); }
.guide-meta dd { font-size: 15px; margin-top: 4px; }
.guide-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2vw; counter-reset: st; margin-bottom: clamp(56px, 7vw, 100px); }
.guide-step { border-top: 2px solid var(--ink); padding-top: 18px; counter-increment: st; }
.guide-step .no { font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: .05em; color: var(--ink-2); }
.guide-step .no::before { content: "STEP " counter(st, decimal-leading-zero); }
.guide-step .en { display: block; font-size: clamp(34px, 3vw, 48px); line-height: 1; margin: 8px 0 6px; }
.guide-step h3 { font-size: 16px; font-weight: 700; letter-spacing: .06em; margin-bottom: 10px; }
.guide-step p { font-size: 13px; color: var(--ink-2); }
.box { border: 1px solid var(--line); padding: clamp(22px, 3vw, 36px); margin-bottom: 28px; max-width: 54em; }
.box h2 { font-size: 17px; font-weight: 700; letter-spacing: .06em; margin-bottom: 12px; }
.box ul { display: flex; flex-direction: column; gap: 8px; }
.box a { display: inline-flex; gap: 8px; align-items: center; min-height: 32px; }
.qa-cats { display: flex; flex-direction: column; gap: clamp(44px, 6vw, 80px); max-width: 60em; }
.qa-cat h2 { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--ink-2); margin-bottom: 14px; }
.qa-list { border-top: 1px solid var(--line); }
.qa-item { border-bottom: 1px solid var(--line); }
.qa-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 28px; gap: 10px; align-items: center; padding: 20px 0; font-size: 16px; font-weight: 700; letter-spacing: .04em; min-height: 44px; }
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary .q { font-family: var(--cond); font-weight: 700; font-size: 28px; color: var(--blue); }
.qa-item summary .pm { width: 14px; height: 14px; position: relative; justify-self: end; }
.qa-item summary .pm::before, .qa-item summary .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.qa-item summary .pm::after { transform: rotate(90deg); }
.qa-item[open] summary .pm::after { transform: rotate(0deg); }
.qa-a { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 10px; padding: 0 0 24px; }
.qa-a .a { font-family: var(--cond); font-weight: 700; font-size: 28px; line-height: 1; color: var(--ink-2); }
.qa-a p { line-height: 1.9; }
.qa-a .more { margin-top: 10px; }
.qa-item.is-target summary { color: var(--blue); }
.qa-checked { margin-top: 40px; font-size: 13px; color: var(--ink-2); }
.news-article { max-width: 44em; }
.news-article .meta { display: flex; gap: 16px; align-items: center; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; margin-bottom: 18px; }
.news-article h1 { font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; line-height: 1.6; letter-spacing: .04em; margin-bottom: 36px; outline: none; }
.news-article .body p + p { margin-top: 1.2em; }
.news-article .body { font-size: 16px; line-height: 2; }
/* お問い合わせフォーム */
.form { max-width: 44em; display: flex; flex-direction: column; gap: 26px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field .label { font-size: 14px; font-weight: 700; letter-spacing: .06em; display: flex; gap: 10px; align-items: center; }
.req { font-size: 11px; font-weight: 700; color: #fff; background: var(--ink); padding: 3px 7px; border-radius: 3px; letter-spacing: .04em; }
.field input[type="text"], .field input[type="email"], .field textarea { width: 100%; border: 1px solid var(--line); background: var(--card); padding: 14px 16px; font-size: 16px; border-radius: 4px; line-height: 1.6; }
.field textarea { min-height: 220px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: transparent; }
.field .hint { font-size: 12px; color: var(--ink-2); }
.field .err { font-size: 13px; color: #c2412f; display: none; }
.field.is-error .err { display: block; }
.field.is-error input, .field.is-error textarea { border-color: #c2412f; }
.agree { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.7; }
.agree input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--blue); }
.form .btn { align-self: flex-start; min-width: 220px; }
.form-done { border: 1px solid var(--blue); padding: 24px; max-width: 44em; }
.form-done strong { display: block; font-size: 17px; margin-bottom: 6px; }
.contact-side { margin-top: 48px; font-size: 13px; color: var(--ink-2); max-width: 44em; line-height: 1.9; }
.noscript { padding: 120px var(--g); }

/* =========================================================
   開いた時の演出：黒地に BLUEGOATS の文字がランダムな順に灯り → 全部が点く → 4枚の幕が上がって消える
   （HOMEで開いた時だけ。押す・キーで飛ばせる。JSが止まっても6秒で必ず消える）
   ========================================================= */
.intro { display: none; }
.intro-on { overflow: hidden; }
.intro-on .intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; cursor: pointer; animation: introKill .01s linear 6s forwards; }
@keyframes introKill { to { visibility: hidden; opacity: 0; } }
.intro-pan { position: absolute; inset: 0; display: grid; }
.intro-pan i { background: var(--night); }
.intro-word { position: relative; width: min(72vw, 1080px); height: auto; overflow: visible; fill: var(--night-text); }
.intro-word path { opacity: 0; }
/* 1文字ずつ：ほの暗く灯る（ちらつきながら） */
.intro.is-play .intro-word path { animation: ltDim .7s steps(1, end) forwards; animation-delay: var(--d, 0s); }
@keyframes ltDim { 0% { opacity: .08; } 18% { opacity: .02; } 32% { opacity: .2; } 46% { opacity: .06; } 60%, 100% { opacity: .2; } }
/* 全部が点く */
.intro.is-lit .intro-word path { animation: ltOn .5s steps(1, end) both; animation-delay: var(--d2, 0s); }
@keyframes ltOn { 0% { opacity: .2; } 14% { opacity: 1; } 28% { opacity: .35; } 42%, 100% { opacity: 1; } }
/* 幕が上がって消える */
.intro.is-out { pointer-events: none; }
.intro.is-out .intro-word { opacity: 0; transform: translateY(-14px); transition: opacity .35s ease, transform .6s var(--ease); }
.intro.is-out .intro-word path { opacity: 1; animation: none; }
.intro.is-out .intro-pan i { opacity: 0; transition: opacity 1.3s ease .15s; } /* 照明に合わせて、黒い地がゆっくり消えて映像が出る（明かりが点く） */
@media (max-width: 759px) { .intro-word { width: 84vw; } }

/* =========================================================
   v6：写真の拡大表示（押した写真がその場から開く）
   ========================================================= */
.viewer { background: rgba(8, 8, 8, 0); transition: background-color .5s ease; }
.viewer.is-in { background: rgba(8, 8, 8, .96); }
.viewer::backdrop { background: transparent; }
.viewer img { max-width: none; max-height: none; transform-origin: 0 0; background: transparent; will-change: transform; }
.viewer-bar { opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .5s var(--ease); }
.viewer.is-in .viewer-bar { opacity: 1; transform: none; transition-delay: .3s; }

/* =========================================================
   v6：LIVE一覧 — 乗せると日付と公演名が少し大きく
   ========================================================= */
@media (hover: hover) {
  .live-date, .live-main { transform-origin: 0 50%; transition: transform .55s var(--ease); }
  a.live-link:hover .live-date { transform: scale(1.12); }
  a.live-link:hover .live-main { transform: translateX(10px) scale(1.04); }
}

/* =========================================================
   v6：作品の詳細（ジャケットのぼかしを背景に、収録曲と歌詞）
   ========================================================= */
.work-page { position: relative; overflow: clip; isolation: isolate; background: #141414; }
.wd-bg { position: absolute; inset: 0 0 auto 0; height: min(140vh, 1400px); z-index: -1; overflow: hidden; pointer-events: none; }
.wd-bg img { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(70px) saturate(1.2) brightness(.55); }
.wd-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 20, .1) 0%, rgba(20, 20, 20, .45) 55%, #141414 100%); }
.wd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; margin-top: clamp(12px, 2.4vw, 36px); }
.wd-cover { aspect-ratio: 1; background: var(--night-2); box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .9); }
.wd-cover img { width: 100%; height: 100%; object-fit: cover; }
.js .wd-cover { animation: wdCover 1.3s var(--ease) both .12s; }
@keyframes wdCover { from { clip-path: inset(0 0 100% 0); transform: translateY(40px); } to { clip-path: inset(0); transform: none; } }
.wd-type span { display: inline-block; font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px 5px; border: 1px solid currentColor; line-height: 1; }
.wd-title { font-size: clamp(30px, 3.6vw, 56px); font-weight: 700; line-height: 1.3; letter-spacing: .04em; margin: 20px 0 12px; outline: none; }
.wd-date { font-family: var(--cond); font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: .04em; text-transform: uppercase; }
.wd-format { color: var(--night-dim); font-size: 14px; margin-top: 4px; }
.wd-tracks { margin-top: clamp(24px, 3vw, 40px); padding: 4px clamp(16px, 2vw, 26px); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wd-tracks li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px dotted rgba(241, 240, 236, .25); }
.wd-tracks li:last-child { border-bottom: 0; }
.wd-tracks .no, .wd-tracks .len { font-family: var(--cond); font-weight: 500; font-size: 15px; color: var(--night-dim); }
.wd-tracks .t { font-size: 15.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; }
.wd-ly { appearance: none; background: none; color: inherit; border: 1px solid rgba(241, 240, 236, .35); border-radius: 999px; min-height: 32px; padding: 0 12px; cursor: pointer; font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; transition: background-color .3s, color .3s; }
.wd-ly:hover { background: var(--night-text); color: var(--night); }
.wd-links { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.wd-links .pending { font-size: 13px; }
/* 歌詞：紙色のカードに2段（スマホは1段）。連の途中で段が割れない */
.lyrics { margin-top: clamp(90px, 11vw, 170px); }
.lyric { background: var(--paper); color: var(--ink); padding: clamp(28px, 4vw, 64px) clamp(22px, 5vw, 84px); margin-bottom: clamp(16px, 1.6vw, 24px); scroll-margin-top: calc(var(--hd) + 16px); }
.lyric-head { display: flex; align-items: baseline; gap: 10px 18px; flex-wrap: wrap; padding-bottom: clamp(18px, 2vw, 28px); margin-bottom: clamp(26px, 3vw, 44px); border-bottom: 1px solid var(--ink); }
.lyric-head .no { font-family: var(--cond); font-weight: 700; font-size: clamp(30px, 3vw, 46px); line-height: 1; }
.lyric-head h3 { font-size: clamp(19px, 1.9vw, 27px); font-weight: 700; letter-spacing: .06em; line-height: 1.4; }
.lyric-head .credit { margin-left: auto; font-size: 13px; color: var(--ink-2); }
.lyric-head .tag-sample { margin-left: auto; }
.lyric-body { columns: 2; column-gap: clamp(36px, 6vw, 110px); font-size: 15px; line-height: 2.15; letter-spacing: .08em; }
.lyric-body p { break-inside: avoid; margin: 0 0 1.7em; }
.lyric.is-empty { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding: 18px clamp(22px, 2.4vw, 32px); background: rgba(241, 240, 236, .06); color: var(--night-text); border: 1px solid rgba(241, 240, 236, .1); }
.lyric.is-empty .lyric-head { border: 0; padding: 0; margin: 0; }
.lyric.is-empty .lyric-head .no { font-size: 22px; color: var(--night-dim); }
.lyric.is-empty .lyric-head h3 { font-size: 16px; }
.lyric-empty { font-size: 13px; color: var(--night-dim); }
.wd-pager { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; margin-top: clamp(64px, 8vw, 120px); padding-top: 32px; border-top: 1px solid var(--line-dark); }
.wd-pg { display: flex; align-items: center; gap: 16px; text-decoration: none; min-width: 0; }
.wd-pg-next { justify-self: end; flex-direction: row-reverse; text-align: right; }
.wd-pg img { width: 76px; height: 76px; object-fit: cover; flex: none; transition: transform .6s var(--ease); }
.wd-pg:hover img { transform: scale(1.06); }
.wd-pg .lbl { display: block; color: var(--night-dim); }
.wd-pg .t { display: block; font-weight: 700; font-size: 15px; line-height: 1.5; }
@media (max-width: 759px) {
  .wd { grid-template-columns: 1fr; gap: 28px; }
  .wd-tracks li { grid-template-columns: 1.7rem minmax(0, 1fr) auto auto; gap: 8px; }
  .wd-tracks .t { font-size: 14.5px; }
  .wd-ly { padding: 0 10px; font-size: 12px; }
  .lyric-body { columns: 1; font-size: 14.5px; }
  .wd-pager { grid-template-columns: 1fr 1fr; }
  .wd-pager > .more { grid-column: 1 / 3; grid-row: 2; justify-self: center; }
  .wd-pg img { width: 56px; height: 56px; }
}
.reduce-motion .wd-cover { animation: none !important; }

/* =========================================================
   v7：DISCOGRAPHY — ジャケットに乗せると少し大きく
   ========================================================= */
.disc-gap { margin-top: clamp(80px, 9vw, 140px); }
.sub-title { scroll-margin-top: calc(var(--hd) + 24px); }
@media (hover: hover) {
  .works-grid .work a .work-cover { transition: transform .6s var(--ease), box-shadow .6s; }
  .works-grid .work a:hover .work-cover { transform: scale(1.05); box-shadow: 0 46px 56px -32px rgba(18, 19, 21, .6); }
  .works-grid .work a:hover .work-title { transform: translateY(6px); }
}

/* =========================================================
   v7：作品ページ（別案）— 大きな作品名がジャケットに重なり、曲名は大きな文字の一覧
   ========================================================= */
.wk { position: relative; overflow: clip; isolation: isolate; background: #141414; }
.wk .wd-bg img { filter: blur(70px) saturate(1.2) brightness(.4); } /* 作品名の反転が背景に負けないよう少し暗く */
.wk-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 0 4.4vw; align-items: start; margin-top: clamp(12px, 2.4vw, 36px); }
.wk-cover { position: sticky; top: calc(var(--hd) + 24px); aspect-ratio: 1; background: var(--night-2); box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .9); }
.wk-cover img { width: 100%; height: 100%; object-fit: cover; }
.js .wk-cover { animation: wdCover 1.3s var(--ease) both .12s; }
.wk-main { padding-top: clamp(0px, 1.4vw, 24px); }
.wk-meta { display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: .12em; color: var(--night-dim); }
.wk-meta span + span::before { content: "—"; margin: 0 14px; opacity: .6; }
/* 作品名：ジャケットの右端にかかる大きさ。重なった部分は反転（LIVE 欄と同じ見せ方） */
.wk-title { position: relative; z-index: 2; margin: 12px 0 8px calc(-1 * clamp(36px, 6.4vw, 120px)); font-family: "Barlow Condensed", var(--sans); font-weight: 700; font-size: clamp(52px, 7.4vw, 136px); line-height: 1.02; letter-spacing: .01em; color: #fff; mix-blend-mode: difference; outline: none; overflow-wrap: anywhere; }
.wk-tracks { margin-top: clamp(30px, 4vw, 60px); border-top: 1px solid var(--line-dark); }
.wk-track { appearance: none; width: 100%; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: clamp(14px, 1.3vw, 20px) 0; background: none; border: 0; border-bottom: 1px solid var(--line-dark); color: inherit; text-align: left; cursor: pointer; }
.wk-track .no, .wk-track .len { font-family: var(--cond); font-weight: 600; font-size: 16px; color: var(--night-dim); }
.wk-track .t { font-size: clamp(21px, 2.2vw, 34px); font-weight: 700; letter-spacing: .03em; line-height: 1.3; transform-origin: 0 50%; transition: transform .5s var(--ease), opacity .4s; }
.wk-live { display: inline-block; vertical-align: .35em; margin-left: 12px; padding: 3px 9px 2px; border: 1px solid rgba(241, 240, 236, .45); border-radius: 999px; color: var(--night-text); font-family: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: .1em; line-height: 1.2; }
@media (hover: hover) {
  .wk-track:hover .t { transform: translateX(10px) scale(1.04); }
  .wk-tracks:hover .wk-track:not(:hover) .t { opacity: .45; }
}
.wk-hint { margin-top: 14px; font-size: 12px; color: var(--night-dim); }
.wk-listen { margin-top: 26px; }
.wk-onstage { margin-top: clamp(90px, 11vw, 170px); }
.wk-stage { margin-bottom: clamp(48px, 6vw, 90px); }
.wk-stage header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 18px; }
.wk-stage .no { font-family: var(--cond); font-weight: 700; font-size: clamp(30px, 3vw, 46px); line-height: 1; }
.wk-stage h3 { font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: .04em; }
.wk-stage .more { margin-left: auto; }
.wk-stage-ph { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wk-stage-ph .ph, .wk-stage-ph .pic { display: block; width: 100%; }
.wk-stage-ph .pic { aspect-ratio: 4 / 3; overflow: hidden; }
.wk-stage-ph .pic img { width: 100%; height: 100%; object-fit: cover; }
.wk-video { position: relative; display: block; width: min(100%, 560px); margin-top: 14px; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; text-align: left; }
.wk-video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.wk-video .cap { display: block; margin-top: 8px; font-size: 13px; color: var(--night-dim); }

/* 歌詞のモーダル：紙色のカード。前後の曲へ移れる */
.lyr { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 8, 8, 0); transition: background-color .4s ease; color: var(--ink); }
.lyr[open] { display: grid; place-items: center; }
.lyr::backdrop { background: transparent; }
.lyr.is-in { background: rgba(8, 8, 8, .8); }
.lyr-card { position: relative; display: flex; flex-direction: column; width: min(900px, calc(100% - 2 * var(--g))); max-height: calc(100svh - 48px); background: var(--paper); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); opacity: 0; transform: translateY(32px); transition: opacity .35s ease, transform .6s var(--ease); }
.lyr.is-in .lyr-card { opacity: 1; transform: none; }
.lyr-box { overflow-y: auto; overscroll-behavior: contain; padding: clamp(28px, 4vw, 56px) clamp(22px, 5vw, 64px) 28px; }
.lyr-box.is-swap { animation: lyrSwap .45s var(--ease); }
@keyframes lyrSwap { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.lyr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--ink); }
.lyr-head .lbl { width: 100%; color: var(--ink-2); }
.lyr-head h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: .04em; line-height: 1.3; }
.lyr-head .credit { margin-left: auto; font-size: 13px; color: var(--ink-2); }
.lyr-head .tag-sample { margin-left: auto; }
.lyr-body { columns: 2; column-gap: clamp(32px, 5vw, 64px); font-size: 15px; line-height: 2.1; letter-spacing: .08em; }
.lyr-body p { break-inside: avoid; margin: 0 0 1.6em; }
.lyr-empty { color: var(--ink-2); }
.lyr-live { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(29, 29, 28, .15); }
.lyr-live .lbl { color: var(--ink-2); }
.lyr-live-ph { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.lyr-live-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease), filter .3s; }
.lyr-live-ph:hover img { filter: brightness(1.08); }
.lyr-bar { display: flex; align-items: center; gap: 10px; padding: 12px clamp(16px, 3vw, 28px); border-top: 1px solid rgba(29, 29, 28, .12); }
.lyr-bar .close-btn { margin-left: auto; margin-right: -6px; }
.lyr .icon-btn:hover .arw { color: var(--paper); }

/* =========================================================
   v7：ライブの記録 — 連写のパラパラ → セトリ用紙 → 曲ごとの写真
   ========================================================= */
.rec { padding: 0 0 clamp(96px, 10vw, 160px); background: #0f0f0f; }
.flip { position: relative; height: 320vh; height: 320svh; }
.flip-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.flip-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(calc(1.08 - var(--fp, 0) * .08)); transition: opacity .12s linear; }
.flip-stage img.on { opacity: 1; }
.flip-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .12) 46%, rgba(0, 0, 0, .3) 100%); }
.flip-cap { position: absolute; left: var(--g); right: var(--g); bottom: clamp(28px, 5vw, 72px); }
.flip-cap .crumb { color: rgba(241, 240, 236, .75); margin-bottom: 14px; }
.rec-title { max-width: 16ch; margin: 10px 0 18px; font-family: var(--cond); font-weight: 700; font-size: clamp(40px, 6.2vw, 116px); line-height: .92; letter-spacing: .005em; text-transform: uppercase; outline: none; }
.rec-meta { display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--cond); font-weight: 600; font-size: clamp(16px, 1.4vw, 20px); letter-spacing: .08em; }
.rec-meta span + span::before { content: "—"; margin: 0 14px; opacity: .6; }
.reduce-motion .flip { height: auto; }
.reduce-motion .flip-sticky { position: relative; }
.reduce-motion .flip-stage img { transform: none; }
.rec-body { padding: 0 var(--g); }
/* セトリ：運営のセトリ用紙と同じ、黒地・黄色の文字・中央揃え・広めの行間 */
@media (hover: hover) { .sl a:hover { transform: scale(1.06); color: #fff; } }
.rec-foot { font-size: 13px; color: var(--night-dim); }

@media (max-width: 759px) {
  .wk-grid { grid-template-columns: 1fr; }
  .wk-cover { position: relative; top: 0; }
  .wk-main { display: flex; flex-direction: column; }
  .wk-title { order: -1; margin: -.58em 0 14px 4px; font-size: clamp(46px, 14vw, 72px); }
  .wk-meta, .rec-meta { gap: 2px 16px; }
  .wk-meta span + span::before, .rec-meta span + span::before { content: none; }
  .wk-track { grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 10px; }
  .wk-stage-ph, .lyr-live-ph { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lyr-body { columns: 1; font-size: 14.5px; }
  .lyr-card { width: calc(100% - 20px); max-height: calc(100svh - 20px); }
  .rec-title { font-size: clamp(36px, 11vw, 56px); }
}
.reduce-motion .wk-cover { animation: none !important; }

/* =========================================================
   タブレット・スマホ
   ========================================================= */
@media (max-width: 1100px) {
  .live-link { grid-template-columns: 10.5rem minmax(0, 1fr) 40px; gap: 1.6rem; }
  .menu-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 6vw; }
  .mem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 4vw; }
  .guide-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 759px) {
  .hd-brand svg { width: 118px; height: 22.9px; }
  .hero { padding-bottom: 14px; }
  .hero-toggle { right: 12px; top: 12px; }
  .menu-body { grid-template-columns: 1fr; gap: 30px; padding-top: 0; }
  .menu-list .en { font-size: clamp(34px, 10vw, 50px); }
  .ttl .en { font-size: 17vw; }

  .work { flex-basis: 62vw; }
  .shelf { padding-top: 40px; }
  .work.is-hot .work-cover { transform: scale(1.06); }
  .shelf-nav { display: none; }

  .live-stage { grid-template-columns: 1fr; }
  .live-photo { grid-column: 1; aspect-ratio: 4 / 3; }
  .live-big { grid-column: 1; font-size: 36vw; margin-bottom: -.06em; }
  .live-cap { grid-column: 1; grid-row: 2; flex-direction: row; justify-content: space-between; align-items: center; padding: 18px 0 0; }
  .live-link { grid-template-columns: 1fr 28px; gap: 8px 14px; padding: 22px 6px; }
  .live-date { grid-column: 1 / 3; grid-row: 1; }
  .live-main { grid-column: 1; grid-row: 2; }
  .live-go { grid-column: 2; grid-row: 1; }
  .live-title { font-size: 15px; }
  .ld-grid { grid-template-columns: 1fr; gap: 36px; }
  .ld-grid .ticket-box { position: static; order: -1; }
  .spec > div { grid-template-columns: 1fr; gap: 4px; padding: 13px 0; }

  .mvc { --sw: 84vw; --gap: 3vw; }
  .mvc-arrow { width: 42px; height: 42px; margin-top: -21px; }
  .mvc-prev { left: calc(50% - var(--sw) / 2 + 8px); }
  .mvc-next { right: calc(50% - var(--sw) / 2 + 8px); }
  .mv-play { width: 42px; height: 42px; left: 12px; bottom: 12px; }

  .ph-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4vw; }
  .ph-col { gap: 30px; }
  .ph-col:nth-child(2) { margin-top: 90px; }
  .ph-col:nth-child(3) { display: none; }
  .pgrid { gap: 6px; }

  .profile-stage { grid-template-columns: 1fr; }
  .profile-photo { grid-column: 1; }
  .profile-big { grid-column: 1; font-size: 27vw; margin-top: -.1em; }
  .profile-body { grid-template-columns: 1fr; gap: 28px; }
  .mem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 4vw; }
  .mem-name { font-size: 17px; letter-spacing: .02em; }
  .mem-intro { font-size: 12.5px; line-height: 1.85; }

  .first-grid { grid-template-columns: 1fr; gap: 18px; }
  .news-row a { grid-template-columns: auto 1fr auto; gap: 6px 14px; padding: 18px 6px; }
  .news-title { grid-column: 1 / 3; }
  .news-row .arw { grid-column: 3; grid-row: 1 / 3; }
  .shop-link { grid-template-columns: 1fr auto; row-gap: 14px; }
  .shop-ja { grid-column: 1; grid-row: 2; }
  .shop-arrow { grid-column: 2; grid-row: 1 / 3; }
  .ft-grid { grid-template-columns: 1fr; gap: 36px; }
  .ft-logo svg { width: 96px; height: 97px; }

  .page-title .en { font-size: 19vw; }
  .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 4vw; }
  .vgrid { grid-template-columns: 1fr; gap: 40px; }
  .exp-step { grid-template-columns: 1fr; gap: 26px; }
  .exp-step:nth-child(even) .exp-ph { order: 0; }
  .guide-meta { grid-template-columns: 1fr; }
  .guide-steps { grid-template-columns: 1fr; }
  .player-bar { flex-direction: column; align-items: stretch; }
}

/* 演出の保険：一定時間後は必ず最終状態（演出が止まる環境でも内容を見せる） */
.js .hero.is-done .hero-frame { clip-path: none; transition: none; }
.js .split.is-done .c { transform: none; transition: none !important; }
.js [data-rv].is-done { opacity: 1; transform: none; transition: none; }
.js .shelf.is-done .work { opacity: 1; transform: none; transition: opacity .5s ease; }
.js .shelf.is-done:hover .work:not(.is-hot) { opacity: .5; }
.js .first-grid.is-done .first-card { opacity: 1; transform: none; transition: transform .6s var(--ease), box-shadow .6s; }
.js .first-grid.is-done .first-card:hover { transform: translateY(-6px); }
.js .mem-grid.is-done .mem { opacity: 1; transform: none; transition: none; }
.menu.is-open.is-done .menu-inner, .menu.is-open.is-done .menu-bg { clip-path: none; transition: none; }
.menu.is-open.is-done { background: var(--night); } /* 開ききったら黒い地も敷く（動画と重ねで覆われて見えない）。X のブラウザが色を拾い直しても、帯の裏が黒のままになるように（.ov-edge の説明を参照） */
.menu.is-open.is-done .menu-list li, .menu.is-open.is-done .menu-side > * { opacity: 1; transform: none; transition: none; }

/* =========================================================
   動きを減らす：移動・拡大・反復を止め、即時表示
   ========================================================= */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
.reduce-motion .split .c, .reduce-motion [data-rv], .reduce-motion .work, .reduce-motion .first-card, .reduce-motion .mem { opacity: 1 !important; transform: none !important; }
.reduce-motion .hero-frame { clip-path: none !important; }
.reduce-motion .hero-video { animation: none !important; transform: scale(1.04) !important; }
.reduce-motion .ph-col, .reduce-motion .live-photo img, .reduce-motion .profile-photo img { transform: none !important; }
.reduce-motion .work.is-hot .work-cover { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.js) *, html:not(.js) *::before, html:not(.js) *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   v8：英字は見出しだけ大文字。セトリはサイトの書体と色で。LIVE RECORDS・ライブ映像
   ========================================================= */
.rec-body > section { margin-top: clamp(90px, 11vw, 170px); }
/* セトリ：2段の一覧。作品に入っている曲は作品ページへ */
.sl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(10, auto); grid-auto-flow: column; column-gap: 6vw; border-top: 1px solid var(--line-dark); }
.sl li { border-bottom: 1px solid var(--line-dark); }
.sl a, .sl .sl-row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: baseline; gap: 14px; padding: clamp(12px, 1.2vw, 18px) 0; text-decoration: none; }
.sl .no { font-family: var(--cond); font-weight: 600; font-size: 16px; color: var(--night-dim); }
.sl .t { font-size: clamp(18px, 1.7vw, 26px); font-weight: 700; letter-spacing: .03em; line-height: 1.35; transform-origin: 0 50%; transition: transform .5s var(--ease); }
.sl-w { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--night-dim); white-space: nowrap; transition: color .3s; }
@media (hover: hover) { .sl a:hover .t { transform: translateX(8px) scale(1.04); } .sl a:hover .sl-w { color: var(--night-text); } }
.sl-src { margin-top: 22px; font-size: 12px; color: var(--night-dim); }
.sl-src a { color: inherit; }
/* ライブ映像のカード（記録ページ・作品ページ・歌詞のモーダル共通） */
.rec-vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3vw 2.4vw; }
.ls-video { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.ls-video-ph { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.ls-video-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ls-video:hover .ls-video-ph img { transform: scale(1.04); }
.ls-video-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 10px; font-size: 14px; font-weight: 700; letter-spacing: .03em; }
.ls-video-cap .lbl { font-weight: 500; color: var(--night-dim); }
/* 作品ページの On Stage：曲名・演奏した公演・映像 */
.wk-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px 4vw; align-items: start; margin: 0; padding: clamp(22px, 2.4vw, 34px) 0; border-top: 1px solid var(--line-dark); }
.wk-stage:not(.has-video) { grid-template-columns: 1fr; }
.wk-stage header { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; }
.wk-stage header .links { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 6px; }
.wk-stage .more { margin-left: 0; font-size: 16px; }
/* 歌詞のモーダルの On Stage */
.lyr-live .ls-video { max-width: 440px; margin-top: 10px; }
.lyr-live .ls-video-cap .lbl { color: var(--ink-2); }
.lyr-live .links { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 8px; }
.lyr-live .more { font-size: 15px; }
/* LIVE ページの LIVE RECORDS */
.live-records { margin-top: clamp(90px, 11vw, 160px); }
.lr-lead { margin: -14px 0 26px; font-size: 14px; color: var(--night-dim); }
.rec-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4vw 3vw; }
.rec-card { display: block; text-decoration: none; }
.rec-card-ph { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.rec-card-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.rec-card:hover .rec-card-ph img { transform: scale(1.05); }
.rec-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 14px; }
.rec-card-body .lbl { color: var(--night-dim); }
.rec-card-body .t { font-family: var(--cond); font-weight: 700; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.05; }
.rec-card-body .more { margin-top: 4px; font-size: 16px; }
@media (max-width: 759px) {
  .sl { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .sl a, .sl .sl-row { grid-template-columns: 2rem minmax(0, 1fr); }
  .sl-w { grid-column: 2; }
  .rec-vgrid, .rec-cards, .wk-stage { grid-template-columns: 1fr; }
}

/* =========================================================
   v9：レスポンシブの調整
   ========================================================= */
/* 大きな英字の見出しは、文字数から画面幅に収まる大きさに（DISCOGRAPHY が2行に割れていた） */
.page-title .en { font-size: min(clamp(76px, 12vw, 220px), calc((100vw - 2 * var(--g)) / (var(--len, 6) * .5))); }
.ttl .en { font-size: min(clamp(60px, 8.4vw, 150px), calc((100vw - 2 * var(--g)) / (var(--len, 6) * .5))); }
/* 縦長の画面ではトップの映像を横長の映像に近い比率で見せる（全画面の縦長だと左右が大きく切れ、煙だけの場面が多かった） */
@media (orientation: portrait) and (min-width: 760px) {
  .hero { height: auto; min-height: 0; }
  .hero-frame { height: auto; aspect-ratio: 4 / 3; }
}
/* セトリはタブレット幅までは1段（2段だと長い曲名が折り返していた） */
@media (max-width: 1100px) {
  .sl { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 759px) {
  .page-title .en { font-size: min(19vw, calc((100vw - 2 * var(--g)) / (var(--len, 6) * .5))); }
  .ttl .en { font-size: min(17vw, calc((100vw - 2 * var(--g)) / (var(--len, 6) * .5))); }
  /* MV の矢印は映像に重ねず、下の線の左右に */
  .mvc-arrow { top: auto; bottom: 0; margin-top: 0; width: 40px; height: 40px; }
  .mvc-prev { left: 0; }
  .mvc-next { right: 0; }
  .mvc-dots { min-height: 40px; align-items: center; margin-top: 16px; }
  .mvc-dots button { width: 32px; }
  /* 作品の棚：一番左の作品が拡大した時に左の余白からはみ出さない */
  .work:first-child .work-cover { transform-origin: 0 100%; }
}
/* スマホ（縦）のトップ映像は 4:5 */
@media (max-width: 759px) and (orientation: portrait) {
  .hero { height: auto; min-height: 0; }
  .hero-frame { height: auto; aspect-ratio: 4 / 5; }
}

/* =========================================================
   v10：区切りの線（下線）を減らす。線ではなく余白・文字の大きさ・面で区切る
   ========================================================= */
/* セトリ：ポスターのように曲名を流して組む（線なし）。作品に入っている曲は ↗ から作品ページへ */
.sl-flow { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: .12em; font-size: clamp(26px, 3.4vw, 56px); font-weight: 800; line-height: 1.34; letter-spacing: .02em; }
.sl-flow li { display: inline-flex; align-items: baseline; }
.sl-flow li:not(:last-child)::after { content: "/"; margin: 0 .42em; font-weight: 300; color: rgba(241, 240, 236, .28); }
.sl-flow .no { display: inline-block; margin-right: .32em; font-family: var(--cond); font-weight: 600; font-size: .34em; color: var(--night-dim); transform: translateY(-.95em); }
.sl-flow a { text-decoration: none; transition: color .3s; }
.sl-flow .sl-go { display: inline-block; margin-left: .18em; font-family: var(--cond); font-weight: 500; font-size: .42em; color: var(--night-dim); transform: translateY(-.75em); transition: transform .4s var(--ease), color .3s; }
@media (hover: hover) {
  .sl-flow a:hover { color: var(--blue-soft); }
  .sl-flow a:hover .sl-go { color: var(--blue-soft); transform: translate(3px, -1em); }
}
.sl-src { margin-top: clamp(22px, 3vw, 40px); }

/* SHOP：上下の線をやめ、大きな面のリンクに。乗せると下から色が満ちて反転 */
.shop { padding: clamp(24px, 3vw, 48px) var(--g); }
.shop-link { position: relative; isolation: isolate; overflow: hidden; border: 0; margin: 0 calc(-1 * clamp(16px, 2.4vw, 40px)); padding: clamp(40px, 6vw, 96px) clamp(16px, 2.4vw, 40px); transition: color .5s var(--ease); }
.shop-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s var(--ease); }
@media (hover: hover) {
  .shop-link:hover { color: var(--paper); }
  .shop-link:hover::before { transform: scaleY(1); }
}

/* 公演詳細：表の線をやめ、項目を余白で並べる。日時・会場・開場／開演は大きく */
.spec { border-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 3vw, 40px) 4vw; }
.spec > div { display: block; padding: 0; border: 0; }
.spec dt { margin-bottom: 6px; font-size: 12px; letter-spacing: .06em; }
.spec dd { font-size: 16px; line-height: 1.75; }
.spec > .is-key { grid-column: 1 / -1; }
.spec > .is-key dd { font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: .03em; line-height: 1.5; }
/* チケット：枠線ではなく面で */
.ticket-box { border: 0; background: var(--night-2); padding: clamp(24px, 2.6vw, 36px); }
/* GUIDE の適用日など：線をやめて、うすい面にまとめる */
.guide-meta { border-top: 0; gap: 20px 4vw; padding: clamp(20px, 2.4vw, 32px); background: rgba(29, 29, 28, .04); }
.guide-meta > div { padding: 0; border: 0; }
/* 作品ページの On Stage：行ごとの線をやめ、余白で区切る */
.wk-stage { border-top: 0; padding: 0; margin-bottom: clamp(44px, 5vw, 76px); }
@media (max-width: 759px) {
  .spec { grid-template-columns: 1fr; }
  .spec > div { grid-template-columns: none; padding: 0; }
  .sl-flow { font-size: clamp(22px, 6.4vw, 30px); }
  .shop-link { margin: 0; padding: 36px 0; }
}
/* GUIDE の注意書き・ページ末尾・Q&A も、線ではなく面と余白で */
.box { border: 0; background: rgba(29, 29, 28, .045); }
.page-end { border-top: 0; padding-top: 0; }
.guide-step { border-top: 0; padding-top: 0; }
.guide-step .en { margin-top: 4px; }
.qa-list { display: flex; flex-direction: column; gap: 8px; border-top: 0; }
.qa-item { border-bottom: 0; background: rgba(29, 29, 28, .045); padding: 0 clamp(16px, 2vw, 24px); }
.qa-item summary { padding: 18px 0; }
.on-dark .box, .on-dark .qa-item { background: rgba(241, 240, 236, .06); }

/* フライヤーのある公演詳細：左にフライヤー（押すと拡大）、右にチケット→公演の情報 */
.status-check { opacity: .85; border-style: dashed; }
.ld-grid:not(.has-flyer) { display: block; }
.ld-grid:not(.has-flyer) .ld-info { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 5vw; align-items: start; }
.ld-grid.has-flyer { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5vw; }
.ld-flyer { position: sticky; top: calc(var(--hd) + 24px); margin: 0; }
.ld-flyer .ph, .ld-flyer .pic { display: block; width: 100%; }
.ld-flyer .pic { background: var(--night-2); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9); }
.ld-flyer .pic img { width: 100%; height: auto; }
.has-flyer .ld-info { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }
.has-flyer .ticket-box { position: static; order: -1; }
.spec > .is-wide { grid-column: 1 / -1; }
.spec > .is-wide dd { font-size: 15px; line-height: 1.9; }
@media (max-width: 759px) {
  .ld-grid.has-flyer { grid-template-columns: 1fr; gap: 32px; }
  .ld-flyer { position: static; max-width: 440px; }
  .ld-grid:not(.has-flyer) .ld-info, .has-flyer .ld-info { display: flex; flex-direction: column; gap: 36px; }
}

/* =========================================================
   v11：LIVE一覧に会場・料金 ／ 公演詳細の重複をなくす ／ GUIDE（特典会）
   ========================================================= */
/* 一覧：日付 ｜ 種別・公演名 ｜ 会場・料金 ｜ 矢印 */
/* 一覧：日付を大きく ｜ 種別・公演名・会場 ｜ 矢印。料金は公演詳細だけに出す */
.live-link { grid-template-columns: 17rem minmax(0, 1fr) 48px; gap: 2.4rem; padding: 34px 14px; }
.live-date .md { font-size: clamp(50px, 4.6vw, 72px); letter-spacing: .01em; }
.live-date .y { font-size: 13px; }
.live-date .w { font-size: clamp(17px, 1.5vw, 22px); margin: 0 0 .3em 8px; }
.live-title { font-size: 18px; font-weight: 700; line-height: 1.6; }
.live-venue { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.live-venue .area { margin-right: .8em; font-size: 12px; }
.live-venue .v { color: var(--ink); }
.on-dark .live-venue { color: var(--night-dim); }
.on-dark .live-venue .v { color: var(--night-text); }
.is-canceled .live-venue { opacity: .6; }
@media (hover: hover) { a.live-link:hover .live-date { transform: scale(1.06); } }

/* 公演詳細：会場・開場・開演・料金を大きく。日時はページ上の大きな日付だけ（重複させない） */
.ld-key { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: clamp(30px, 3.2vw, 48px) clamp(28px, 3.4vw, 56px); align-items: start; }
.ld-key dt { font-size: 12px; letter-spacing: .1em; color: var(--night-dim); margin-bottom: 10px; }
.ld-venue { grid-column: 1 / -1; }
.ld-venue .v { display: block; font-size: clamp(26px, 2.9vw, 42px); font-weight: 700; letter-spacing: .03em; line-height: 1.3; }
.ld-venue .sub { display: block; margin-top: 8px; font-size: 14px; color: var(--night-dim); }
.ld-time dd { font-family: var(--cond); font-weight: 600; font-size: clamp(46px, 4.8vw, 76px); line-height: .86; letter-spacing: .01em; }
.ld-time .pending, .ld-venue .pending { font-family: var(--sans); font-size: 16px; font-weight: 400; }
.ld-price { padding-left: clamp(0px, 1vw, 12px); }
.ld-price ul { display: flex; flex-direction: column; gap: 8px; }
.ld-price li { display: flex; align-items: baseline; gap: 14px; font-size: 14px; }
.ld-price .k { min-width: 2.8em; font-size: 13px; color: var(--night-dim); }
.ld-price b { font-family: var(--cond); font-weight: 600; font-size: clamp(28px, 2.5vw, 36px); line-height: .95; letter-spacing: .01em; margin-right: 2px; }
.ld-price .sub { display: block; margin-top: 12px; font-size: 13px; color: var(--night-dim); }
.ld-tba { font-size: 13px; color: var(--night-dim); line-height: 1.8; }
.ld-tba .k { font-weight: 700; margin-right: 1em; color: var(--night-text); }
.ticket-box .small + .small { margin-top: -6px; }
.has-flyer .ticket-box { order: 0; }
.ld-grid:not(.has-flyer) .ld-info { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "key tk" "spec tk" "tba tk"; gap: clamp(36px, 4vw, 56px) 5vw; }
.ld-grid:not(.has-flyer) .ld-key { grid-area: key; }
.ld-grid:not(.has-flyer) .ticket-box { grid-area: tk; }
.ld-grid:not(.has-flyer) .spec { grid-area: spec; }
.ld-grid:not(.has-flyer) .ld-tba { grid-area: tba; }

@media (max-width: 1100px) {
  .live-link { grid-template-columns: 13.5rem minmax(0, 1fr) 40px; gap: 1.8rem; }
  .live-date .md { font-size: clamp(46px, 5.6vw, 58px); }
}
@media (max-width: 759px) {
  .live-link { grid-template-columns: 1fr 28px; gap: 12px 14px; padding: 26px 6px; }
  .live-date { grid-column: 1 / 3; grid-row: 1; }
  .live-go { grid-column: 2; grid-row: 1; }
  .live-main { grid-column: 1 / 3; grid-row: 2; }
  .live-date .md { font-size: 54px; }
  .live-date .y { font-size: 12px; }
  .live-date .w { font-size: 18px; }
  .live-title { font-size: 16px; }
  .live-venue { font-size: 13px; }
  .ld-key { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .ld-price { grid-column: 1 / -1; padding-left: 0; }
  .ld-grid .ticket-box { order: 0; }
}

/* GUIDE（特典会）：告知画像の内容を、サイトの書体・色で。線や囲みは使わず、面と大きな数字で */
.guide { --red: #d63a2f; }
.g-index { margin-bottom: clamp(80px, 10vw, 150px); }
.g-index ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.g-index a { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); align-items: baseline; gap: 2px 10px; padding: 16px 18px; background: rgba(29, 29, 28, .045); text-decoration: none; transition: background-color .35s, color .35s; }
.g-index .n { grid-row: 1 / span 2; font-family: var(--cond); font-weight: 600; font-size: 22px; line-height: 1; }
.g-index .t { font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.g-index .s { font-size: 12px; color: var(--ink-2); transition: color .35s; }
@media (hover: hover) { .g-index a:hover { background: var(--ink); color: var(--paper); } .g-index a:hover .s { color: rgba(241, 240, 236, .7); } }

.g-sec { margin-bottom: clamp(110px, 13vw, 200px); scroll-margin-top: calc(var(--hd) + 20px); }
.g-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 12px clamp(18px, 2.2vw, 34px); margin-bottom: clamp(36px, 4.4vw, 64px); }
.g-no { font-family: var(--cond); font-weight: 600; font-size: clamp(76px, 9vw, 150px); line-height: .76; letter-spacing: -.01em; }
.g-ttl h2 { font-size: clamp(26px, 3.3vw, 48px); font-weight: 800; letter-spacing: .04em; line-height: 1.3; }
.g-lead { margin-top: 8px; font-size: clamp(14px, 1.3vw, 18px); color: var(--ink-2); }
.g-tag { align-self: end; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 700; letter-spacing: .06em; padding: 9px 14px; line-height: 1.4; }
.g-only { position: absolute; top: 12px; left: 12px; font-style: normal; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 6px 10px; line-height: 1.3; }

/* 01 はじめての特典会 */
.g-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); }
.g-ph { position: relative; aspect-ratio: 4 / 5; background: rgba(29, 29, 28, .07); display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 14px 16px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.g-ph .en { font-size: clamp(28px, 2.6vw, 40px); line-height: 1; color: rgba(29, 29, 28, .18); }
.g-step h3 { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 8px; font-size: clamp(16px, 1.4vw, 19px); font-weight: 800; letter-spacing: .04em; }
.g-step h3 .n, .g-row3 .n, .ft-steps .n { font-family: var(--cond); font-weight: 600; line-height: .8; }
.g-step h3 .n { font-size: clamp(34px, 3vw, 46px); }
.g-step p { font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.g-kinds, .ft-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); margin-top: clamp(40px, 5vw, 72px); }
.g-kind { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; padding: clamp(22px, 2.6vw, 36px) clamp(22px, 2.8vw, 40px); background: var(--card); }
.g-kind .sw { width: 16px; height: 16px; flex: none; background: var(--blue); }
.g-kind.is-red .sw { background: var(--red, #d63a2f); }
.g-kind b { font-size: clamp(24px, 2.5vw, 36px); font-weight: 800; letter-spacing: .06em; }
.g-kind span:last-child { font-size: clamp(15px, 1.3vw, 18px); font-weight: 700; }
.g-notes { margin-top: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.8; color: var(--ink-2); }
.g-notes li { padding-left: 1.2em; text-indent: -1.2em; }
.g-notes li::before { content: "※"; margin-right: .2em; }

/* 02 撮り直し・06 移行：3つの手順を矢印でつなぐ */
.g-row3 { --gap: clamp(36px, 4.6vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.g-row3 > li { position: relative; }
.g-row3 > li + li::before { content: ""; position: absolute; top: 50%; left: calc(var(--gap) / -2); width: calc(var(--gap) * .5); height: 2px; background: currentColor; transform: translate(-50%, -50%); }
.g-row3 > li + li::after { content: ""; position: absolute; top: 50%; left: calc(var(--gap) / -2 + var(--gap) * .25 - 1px); width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translate(-100%, -50%) rotate(45deg); }
.g-retake .g-row3 > li { padding-top: 4px; }
.g-row3 .n { display: block; font-size: clamp(60px, 6.4vw, 104px); }
.g-row3 h3 { margin: 18px 0 8px; font-size: clamp(18px, 1.7vw, 23px); font-weight: 800; letter-spacing: .04em; }
.g-row3 p { font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.g-band { margin-top: clamp(40px, 5vw, 72px); background: var(--blue); color: #fff; font-size: clamp(19px, 2.4vw, 34px); font-weight: 800; letter-spacing: .06em; line-height: 1.5; text-align: center; padding: clamp(20px, 2.6vw, 34px) clamp(18px, 3vw, 40px); }
.g-sub { margin-top: clamp(28px, 3vw, 44px); }
.g-sub h3 { font-size: 17px; font-weight: 800; color: var(--blue); margin-bottom: 6px; }
.g-sub p { font-size: 15px; line-height: 1.9; }

/* 大きな数字と矢印 */
.g-num { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.g-num b { font-family: var(--cond); font-weight: 700; font-size: clamp(76px, 9vw, 150px); line-height: .8; letter-spacing: -.01em; }
.g-num span { font-size: clamp(18px, 2vw, 30px); font-weight: 800; }
.g-arw { position: relative; display: block; flex: none; width: clamp(36px, 4vw, 64px); height: 2px; background: currentColor; }
.g-arw::after { content: ""; position: absolute; right: 0; top: 50%; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); }

/* 03 写メ撮影 */
.g-eq { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); align-items: stretch; gap: clamp(16px, 2.6vw, 40px); }
.g-eq > .g-arw { align-self: center; }
.g-eq > div, .g-prices > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: clamp(30px, 3.8vw, 56px) 20px; background: var(--card); }
.g-eq .k, .g-prices .k { font-size: clamp(16px, 1.6vw, 22px); font-weight: 800; letter-spacing: .04em; }
.g-eq .s { font-size: 14px; color: var(--ink-2); }
.g-rule { margin-top: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.g-rule b { font-size: clamp(18px, 1.9vw, 26px); font-weight: 800; letter-spacing: .04em; color: var(--ink); }

/* 04 女性割引 */
.g-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.g-prices .v { font-size: clamp(22px, 2.4vw, 36px); font-weight: 800; white-space: nowrap; }
.g-prices .v b { font-family: var(--cond); font-weight: 700; font-size: clamp(72px, 8.4vw, 140px); line-height: .8; margin-right: 4px; letter-spacing: -.01em; }

/* 05 予約特典券 */
.g-tk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(10px, 1.4vw, 20px); }
.g-card { background: var(--card); padding: clamp(24px, 3vw, 44px); }
.g-card h3 { display: flex; align-items: baseline; gap: 12px; font-size: clamp(20px, 2vw, 28px); font-weight: 800; letter-spacing: .04em; margin-bottom: clamp(18px, 2vw, 28px); }
.g-card h3 .n, .g-mig > li > .n { font-family: var(--cond); font-weight: 600; font-size: .85em; color: var(--ink-2); }
.g-card .s { font-size: 13px; line-height: 1.8; color: var(--ink-2); }
.g-tk-head { font-size: clamp(18px, 1.8vw, 24px); font-weight: 800; line-height: 1.5; letter-spacing: .03em; margin-bottom: 6px; }
.g-tk-give { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: clamp(22px, 2.6vw, 36px); }
.g-tk-give .s { font-size: 15px; font-weight: 700; color: var(--ink); }
.g-tk-give .k { font-size: 18px; font-weight: 800; }
.g-tk .g-num b { font-size: clamp(64px, 6.6vw, 112px); }
.g-far { margin-top: clamp(22px, 2.6vw, 36px); }
.g-far .k { font-size: 14px; font-weight: 700; }
.g-far .v { font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: .04em; margin: 2px 0 6px; }
.g-trade { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 44px); }
.g-trade li { display: grid; grid-template-columns: 7.2em auto minmax(0, 1fr); align-items: center; gap: clamp(12px, 1.6vw, 24px); }
.g-trade li .g-num { justify-self: end; }
.g-trade p { display: flex; flex-direction: column; gap: 2px; }
.g-trade p b { font-size: clamp(22px, 2.2vw, 32px); font-weight: 800; letter-spacing: .03em; line-height: 1.35; }
.g-more { margin-top: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.g-more .more { white-space: normal; }
.g-more .pending { font-size: 12px; }

/* 06 ポイントカードの移行 */
.g-big { font-size: clamp(28px, 4.6vw, 68px); font-weight: 800; letter-spacing: .02em; line-height: 1.3; }
.g-lead2 { margin-top: 12px; font-size: clamp(16px, 1.7vw, 23px); font-weight: 700; }
.g-ex { margin: clamp(44px, 5vw, 72px) 0 16px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.g-mig > li { display: flex; flex-direction: column; align-items: flex-start; }
.g-mig > li > .n { display: inline; font-size: 18px; line-height: 1; }
.g-mig h3 { margin: 8px 0 18px; font-size: clamp(16px, 1.5vw, 20px); }
.g-mig .g-num b { font-size: clamp(64px, 6.4vw, 108px); }
.g-mig dl { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.g-mig dt { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; background: var(--ink); color: var(--paper); padding: 4px 9px; }
.g-mig dd { margin-top: 6px; font-size: 15px; font-weight: 800; }
.g-mig .s { margin-top: 14px; font-size: 13px; }
.g-mig .s b { font-size: 16px; color: var(--blue); }
.g-goal { display: flex; align-items: center; flex-wrap: wrap; gap: 14px clamp(18px, 3vw, 44px); margin-top: clamp(56px, 7vw, 110px); }
.g-goal > b { font-size: clamp(32px, 5.6vw, 84px); font-weight: 800; letter-spacing: .02em; line-height: 1.2; }
.g-goal .s { flex-basis: 100%; font-size: 15px; color: var(--ink-2); }

/* はじめての方へ：特典会のきほん */
.ft { margin-top: clamp(96px, 12vw, 180px); }
.ft-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.ft-head .sub-title { margin-bottom: 0; }
.ft-head .sub-title .ja { font-size: 16px; color: var(--ink); }
.ft-head p { font-size: 15px; font-weight: 700; }
.ft-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.ft-steps li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: clamp(20px, 2.2vw, 30px); background: var(--card); }
.ft-steps .n { font-size: clamp(48px, 4.6vw, 72px); margin-bottom: 10px; }
.ft-steps b { font-size: 17px; font-weight: 800; letter-spacing: .04em; }
.ft-steps .d { font-size: 13px; line-height: 1.8; color: var(--ink-2); }
.ft-steps .g-only { top: auto; left: auto; position: static; align-self: flex-start; margin-top: 2px; }
.ft-kinds { margin-top: clamp(10px, 1.4vw, 20px); }
.ft .g-kind { padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 30px); }
.ft .g-kind b { font-size: clamp(20px, 2vw, 28px); }
.ft-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: clamp(28px, 3.4vw, 48px); }
.ft-links a { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 44px 16px 16px; text-decoration: none; background: rgba(29, 29, 28, .05); transition: background-color .35s, color .35s; }
.ft-links .t { font-size: 15px; font-weight: 700; }
.ft-links .s { font-size: 12px; color: var(--ink-2); transition: color .35s; }
.ft-links .arw { position: absolute; right: 16px; top: 50%; margin-top: -1px; }
@media (hover: hover) { .ft-links a:hover { background: var(--ink); color: var(--paper); } .ft-links a:hover .s { color: rgba(241, 240, 236, .7); } }
.ft-more { margin-top: 24px; }
.guide { --red: #d63a2f; }
.first { --red: #d63a2f; }

@media (max-width: 1100px) {
  .g-steps, .ft-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-trade li { grid-template-columns: 5.6em auto minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .g-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .g-index a { padding: 13px 12px; grid-template-columns: 1.8em minmax(0, 1fr); }
  .g-index .n { font-size: 18px; }
  .g-index .t { font-size: 14px; }
  .g-head { grid-template-columns: auto minmax(0, 1fr); }
  .g-tag { grid-column: 1 / -1; justify-self: start; }
  .g-steps { gap: 28px 14px; }
  .g-step p { font-size: 13px; }
  .g-kinds, .ft-kinds, .g-prices, .g-tk { grid-template-columns: 1fr; }
  .g-row3 { grid-template-columns: 1fr; --gap: 52px; }
  .g-row3 > li + li::before { top: calc(var(--gap) / -2); left: 26px; width: 2px; height: calc(var(--gap) * .5); transform: translate(-50%, -50%); }
  .g-row3 > li + li::after { top: calc(var(--gap) / -2 + var(--gap) * .25 - 1px); left: 26px; transform: translate(-50%, -100%) rotate(135deg); }
  .g-retake .g-row3 > li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; }
  .g-retake .g-row3 .n { grid-row: 1 / span 2; text-align: center; font-size: 60px; }
  .g-retake .g-row3 h3 { margin: 4px 0 4px; }
  .g-mig > li + li::before, .g-mig > li + li::after { left: 50%; }
  .g-eq { grid-template-columns: 1fr; }
  .g-eq > .g-arw { justify-self: center; transform: rotate(90deg); margin: 14px 0; }
  .g-trade li { grid-template-columns: 4.6em auto minmax(0, 1fr); }
  .g-goal .g-arw { width: 32px; }
  .ft-steps { gap: 8px; }
  .ft-steps li { padding: 18px 16px; }
  .ft-links { grid-template-columns: 1fr; gap: 6px; }
}
/* 日本語の見出し・大きな文は文節で折り返す（対応ブラウザのみ） */
.g-ttl h2, .g-big, .g-lead2, .g-band, .g-rule b, .g-tk-head, .g-trade p b, .g-goal > b, .g-kind b, .ld-title, .live-title, .ft-steps b, .ft-steps .d, .ft-links .t, .g-step p, .g-row3 p { word-break: auto-phrase; text-wrap: pretty; }
.guide, .ft, .ld-info { word-break: auto-phrase; }
@media (max-width: 759px) {
  .g-trade li { grid-template-columns: 3.4em 28px minmax(0, 1fr); gap: 10px; }
  .g-trade .g-arw { width: 28px; }
  .g-tk .g-num b { font-size: 58px; }
  .g-trade p b { font-size: 20px; }
}
@media (max-width: 1100px) { .g-tk { grid-template-columns: 1fr; } }
@media (max-width: 360px) { .g-trade p b { font-size: 17px; } .g-tk .g-num b { font-size: 50px; } }

/* スマホ（縦）のトップ映像：紙の余白で囲まず、画面の端から端まで。下の黒い MV 欄と幅をそろえる。
   ヘッダーは映像の上に重ねる（ロゴは差の合成で白く見える）。停止ボタンはメニューと重ならないよう右下へ */
@media (max-width: 759px) and (orientation: portrait) {
  .hero { padding: 0; background: var(--night); }
  .hero-frame { aspect-ratio: auto; height: min(128vw, 80svh); }
  .hero-shade { background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 24%), linear-gradient(to top, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 30%); }
  .hero-video { transform: translateY(calc(var(--hp, 0) * 7%)) scale(1.04); }
  .hero-toggle { top: auto; bottom: 16px; right: var(--g); width: 42px; height: 42px; }
}

/* =========================================================
   v12：GUIDE の崩れを直す
   ========================================================= */
/* 予約特典券「30枚」が枠の外にはみ出していた → 数字の列を中身の幅に合わせ、行どうしで矢印の位置をそろえる */
.g-trade { display: grid; grid-template-columns: max-content auto minmax(0, 1fr); gap: clamp(26px, 3vw, 44px) clamp(12px, 1.6vw, 24px); }
.g-trade li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; gap: inherit; }
.g-trade li .g-num { justify-self: end; }
/* 撮り直し：矢印が手順名に重なっていた → 大きな数字の高さにそろえる */
.g-retake .g-row3 > li + li::before, .g-retake .g-row3 > li + li::after { top: calc(clamp(60px, 6.4vw, 104px) * .4); }
/* 写真の枠：タブレット幅で2列だと縦に長くなりすぎた → 760px 以上は4列 */
@media (min-width: 760px) and (max-width: 1100px) {
  .g-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .g-step h3 { font-size: 15px; gap: 6px; }
  .g-step h3 .n { font-size: 30px; }
  .g-step p { font-size: 13px; }
}
@media (max-width: 759px) {
  .g-trade { gap: 26px 10px; }
  .g-trade li { grid-template-columns: subgrid; }
  .g-retake .g-row3 > li + li::before, .g-retake .g-row3 > li + li::after { top: calc(var(--gap) / -2); }
  .g-retake .g-row3 > li + li::after { top: calc(var(--gap) / -2 + var(--gap) * .25 - 1px); }
}

/* =========================================================
   v12：PROFILE の重なり・はじめての方へ（ライブの流れ）・COLUMN・開いた時の演出（スマホ縦）
   ========================================================= */
/* PROFILE：大きな文字がアー写の顔まで隠していた → 写真を下げ、文字の下の方だけが写真の上端にかかる程度に */
.profile-photo { margin-top: calc(clamp(96px, 18vw, 320px) * .5); }
@media (max-width: 759px) { .profile-photo { margin-top: calc(27vw * .5); } }

/* はじめての方へ：ライブの流れ（旧 EXPERIENCE）を4つ並べて1ページに */
.ex-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); }
.ex-step .pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #d8d4cc; }
.ex-step .pic img { width: 100%; height: 100%; object-fit: cover; }
.ex-step .en { display: block; margin-top: 18px; font-size: clamp(30px, 2.6vw, 42px); line-height: .9; }
.ex-step h3 { font-size: 17px; font-weight: 800; letter-spacing: .05em; margin: 6px 0 12px; }
.ex-step .bullets { gap: 8px; font-size: 13.5px; }
.first-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.first .page-end { margin-top: 0; }
@media (max-width: 1100px) { .ex-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; } }
@media (max-width: 759px) {
  .ex-steps { grid-template-columns: 1fr; gap: 26px; }
  .ex-step { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 0 16px; align-items: start; }
  .ex-step .en { margin-top: 0; font-size: 26px; }
  .ex-step h3 { font-size: 16px; margin: 4px 0 8px; }
  .ex-step .bullets { font-size: 13px; }
  .first-grid.is-two { grid-template-columns: 1fr; }
}

/* PROFILE のメンバー：X とコラムへのリンクを横に */
.mem-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mem-links .sns { margin-top: 0; }

/* COLUMN（HOME の欄）：メンバーごとに1枚 */
.col-lead { max-width: 36em; font-size: 15px; line-height: 2; color: var(--ink-2); margin: -16px 0 clamp(32px, 4vw, 56px); }
.col-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); }
.col-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--card); transition: transform .6s var(--ease), box-shadow .6s; }
.col-card-ph { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #2a1a1a; }
.col-card-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 1.4s var(--ease); }
.col-card-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 45%); }
.col-card-name { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 14px; color: #fff; font-size: clamp(18px, 1.6vw, 24px); font-weight: 800; letter-spacing: .05em; line-height: 1.3; }
.col-card-body { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 48px 20px 18px; flex: 1; }
.col-card-body .arw { position: absolute; right: 18px; bottom: 22px; }
.col-type { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-2); }
.col-title { font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: .03em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) {
  .col-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -34px rgba(18, 19, 21, .45); }
  .col-card:hover .col-card-ph img { transform: scale(1.05); }
  .col-card:hover .arw { transform: translateX(6px); }
}
@media (max-width: 1100px) { .col-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .col-cards { gap: 10px; }
  .col-card-body { padding: 14px 14px 40px; }
  .col-card-body .arw { right: 14px; bottom: 16px; }
  .col-title { font-size: 13.5px; }
}

/* COLUMN（ページ）：左にメンバー、右に「これを見ればわかる」もの */
.col-nav { margin-bottom: clamp(72px, 9vw, 140px); }
.col-nav ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.col-nav a { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; background: rgba(29, 29, 28, .045); text-decoration: none; font-size: 15px; font-weight: 700; letter-spacing: .04em; transition: background-color .35s, color .35s; }
.col-nav img { width: 44px; height: 56px; object-fit: cover; object-position: 50% 15%; flex: none; }
@media (hover: hover) { .col-nav a:hover { background: var(--ink); color: var(--paper); } }
.col-mem { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 5vw; align-items: start; margin-bottom: clamp(88px, 11vw, 170px); scroll-margin-top: calc(var(--hd) + 20px); }
.col-who { position: sticky; top: calc(var(--hd) + 24px); }
.col-ph { margin: 0 0 18px; aspect-ratio: 2 / 3; max-width: 300px; overflow: hidden; background: #2a1a1a; }
.col-ph img { width: 100%; height: 100%; object-fit: cover; }
.col-who .lbl { color: var(--ink-2); }
.col-who h2 { font-size: clamp(26px, 2.6vw, 40px); font-weight: 800; letter-spacing: .05em; line-height: 1.3; margin: 4px 0 14px; }
.col-who .sns { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; font-family: var(--cond); font-weight: 600; font-size: 16px; text-decoration: none; background: rgba(29, 29, 28, .06); }
.col-items { display: flex; flex-direction: column; gap: 14px; }
.col-item a { display: grid; grid-template-columns: minmax(0, 1fr); text-decoration: none; background: var(--card); transition: background-color .35s, color .35s; }
.col-item.has-thumb a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.col-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #1c1c1c; }
.col-thumb img { width: 100%; height: 100%; object-fit: cover; }
.col-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(10, 11, 13, .55); border: 1px solid rgba(255, 255, 255, .7); }
.col-play::after { content: ""; position: absolute; left: 21px; top: 17px; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.col-meta { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2.2vw, 30px); }
.col-item .col-title { font-size: clamp(16px, 1.4vw, 19px); -webkit-line-clamp: 4; }
.col-note { font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.col-src { margin-top: auto; font-size: 12px; color: var(--ink-2); }
.col-empty { padding: clamp(22px, 2.6vw, 34px); background: rgba(29, 29, 28, .045); font-size: 14px; color: var(--ink-2); }
.col-empty b { display: block; font-size: 18px; color: var(--ink); margin-bottom: 4px; letter-spacing: .06em; }
@media (hover: hover) {
  .col-item a:hover { background: var(--ink); color: var(--paper); }
  .col-item a:hover .col-type, .col-item a:hover .col-src, .col-item a:hover .col-note { color: rgba(241, 240, 236, .7); }
}
@media (max-width: 1100px) { .col-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .col-mem { grid-template-columns: 1fr; gap: 22px; }
  .col-who { position: static; display: grid; grid-template-columns: 30% minmax(0, 1fr); gap: 16px; align-items: end; }
  .col-ph { margin: 0; }
  .col-item.has-thumb a { grid-template-columns: 1fr; }
  .col-nav a { padding: 8px 12px 8px 8px; font-size: 14px; gap: 10px; }
  .col-nav img { width: 36px; height: 46px; }
}

/* 開いた時の演出（スマホ縦）：文字を縦に積む */

/* 撮り直し（PC・タブレット）：矢印が次の数字にくっついて見えた → 数字のあとから次の数字の手前まで線でつなぐ */
@media (min-width: 760px) {
  .g-retake .g-row3 > li + li::before, .g-retake .g-row3 > li + li::after { content: none; }
  .g-retake .g-row3 > li:not(:last-child)::before { content: ""; position: absolute; top: calc(clamp(60px, 6.4vw, 104px) * .4); left: calc(clamp(60px, 6.4vw, 104px) * .55 + 18px); right: calc(-1 * var(--gap) + 14px); width: auto; height: 2px; background: currentColor; transform: translateY(-50%); }
  .g-retake .g-row3 > li:not(:last-child)::after { content: ""; position: absolute; left: auto; top: calc(clamp(60px, 6.4vw, 104px) * .4); right: calc(-1 * var(--gap) + 14px); width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); }
}
/* はじめての方へ「もっとくわしく」の2枚は写真を横長に（縦に長くなりすぎない） */
.first-grid.is-two .pic { aspect-ratio: 16 / 9; }
.col-lead, .col-card-name, .col-card-body, .col-who h2, .column-page .page-lead, .first .page-lead { word-break: auto-phrase; }
@media (max-width: 759px) { .col-card-name { font-size: 14px; } }
.col-tbd { display: block; margin-top: 6px; font-size: 12px; font-weight: 400; letter-spacing: .04em; }

/* HOME の写真の壁（v12）：同じ大きさの写真を端から端まで3列（スマホ2列）、細い黒の隙間。列ごとに違う速さで上下に流れる */
.photos { padding-bottom: 0; }
.photos .proto-note { margin: 0 0 12px; }
.ph-wall { --wg: 2.6vw; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--wg); margin: 0 calc(-1 * var(--g)); height: min(92svh, 1000px); min-height: 520px; overflow: hidden; background: var(--night); }
.ph-wall[data-cols="2"] { --wg: 3.8vw; grid-template-columns: repeat(2, minmax(0, 1fr)); height: min(74svh, 640px); min-height: 420px; }
.ph-wcol { display: flex; flex-direction: column; gap: var(--wg); will-change: transform; }
.ph-cell { width: 100%; }
.ph-cell .pic { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #1c1c1c; }
.ph .ph-cell .pic img, .ph-cell .pic img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .ph-cell:hover .pic img { transform: scale(1.04); } }

/* =========================================================
   v13：HOME の写真の壁を長く ／ 黒く塗りつぶすホバーをやめる
   ========================================================= */
/* 写真の壁：高さを固定した枠の中で動かすのをやめ、30枚を縦横比そのままで並べた長い壁に（高さは app.js の wallSize） */
.ph-wall, .ph-wall[data-cols="2"] { height: auto; min-height: 0; align-items: start; }
.ph-cell .pic { aspect-ratio: auto; }
.ph .ph-cell .pic img, .ph-cell .pic img { height: auto; object-fit: initial; }

/* ホバー：黒い面で覆うのをやめ、少し浮く・矢印が動く程度に */
.shop-link::before { content: none; }
@media (hover: hover) {
  .shop-link:hover { color: inherit; }
  .shop-link .shop-ja { transition: transform .6s var(--ease); }
  .shop-link:hover .shop-ja { transform: translateX(8px); }
  .g-index a:hover, .ft-links a:hover, .col-nav a:hover { background: var(--card); color: inherit; box-shadow: 0 18px 34px -26px rgba(18, 19, 21, .5); }
  .g-index a:hover .s, .ft-links a:hover .s { color: var(--ink-2); }
  .g-index a, .ft-links a, .col-nav a { transition: background-color .35s, box-shadow .35s, transform .35s var(--ease); }
  .g-index a:hover, .col-nav a:hover { transform: translateY(-2px); }
  .ft-links a:hover .arw { transform: translateX(6px); }
  .col-nav img { transition: transform .6s var(--ease); }
  .col-nav a:hover img { transform: scale(1.06); }
  .col-item a:hover { background: var(--card); color: inherit; transform: translateY(-3px); box-shadow: 0 26px 46px -32px rgba(18, 19, 21, .5); }
  .col-item a:hover .col-type, .col-item a:hover .col-src, .col-item a:hover .col-note { color: var(--ink-2); }
  .col-item a { transition: transform .45s var(--ease), box-shadow .45s; }
  .col-thumb img { transition: transform .9s var(--ease); }
  .col-item a:hover .col-thumb img { transform: scale(1.04); }
}

/* =========================================================
   v14：INTERVIEW（サイト内のインタビュー記事のデザイン見本）
   構成：見出し → 大きな写真（INTERVIEW の文字が下端にかかる）→ リード → 取材クレジット → 目次 →
         小見出しで章立て（「──」の質問／名前つきの発言／写真／大きく抜き出す一言）→ 最後にプロフィール・作品・ライブ
   ========================================================= */
.iv-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 70; pointer-events: none; }
.iv-progress i { display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }
.iv-sample { font-size: 12px; color: var(--ink-2); margin-bottom: 22px; }
.iv-head { max-width: 1000px; margin-bottom: clamp(32px, 4vw, 56px); }
.iv-kick { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-2); }
.iv-kick .lbl { font-size: 17px; font-weight: 600; letter-spacing: .06em; color: var(--ink); }
.iv-kick time { font-family: var(--cond); font-weight: 500; font-size: 16px; letter-spacing: .04em; }
.iv-title { margin: 14px 0 12px; font-size: clamp(26px, 3.6vw, 52px); font-weight: 800; line-height: 1.42; letter-spacing: .02em; word-break: auto-phrase; text-wrap: pretty; }
.iv-sub { font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; color: var(--ink-2); }
.iv-mems { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 24px; }
.iv-mems li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.iv-mems img { width: 34px; height: 44px; object-fit: cover; object-position: 50% 15%; }

.iv-hero { position: relative; margin: 0 calc(-1 * var(--g)) clamp(64px, 8vw, 120px); }
.iv-hero-ph { margin: 0; }
.iv-hero-ph .ph, .iv-hero-ph .pic { display: block; width: 100%; }
.iv-hero-ph .pic { aspect-ratio: 21 / 9; overflow: hidden; background: #1c1c1c; }
.iv-hero-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.iv-hero-ph figcaption { display: none; }
.iv-hero-en { position: absolute; left: var(--g); bottom: 0; transform: translateY(40%); font-size: clamp(64px, 11vw, 200px); line-height: .8; color: #fff; mix-blend-mode: difference; pointer-events: none; }

.iv-body { max-width: 760px; margin: 0 auto; }
.iv-lead { font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; line-height: 2.1; word-break: auto-phrase; }
.iv-credits { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 24px; font-size: 13px; color: var(--ink-2); }
.iv-credits div { display: flex; gap: 8px; }
.iv-credits dt { font-weight: 700; color: var(--ink); }
.iv-toc { margin-top: clamp(40px, 5vw, 64px); }
.iv-toc ol { display: flex; flex-direction: column; gap: 6px; }
.iv-toc a { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 13px 18px; background: rgba(29, 29, 28, .045); text-decoration: none; font-size: 14px; font-weight: 700; line-height: 1.6; transition: background-color .3s, transform .35s var(--ease); }
.iv-toc .n { font-family: var(--cond); font-weight: 600; font-size: 18px; color: var(--ink-2); }
@media (hover: hover) { .iv-toc a:hover { background: var(--card); transform: translateX(4px); } }

.iv-ch { scroll-margin-top: calc(var(--hd) + 20px); }
.iv-ch h2 { display: flex; align-items: baseline; gap: 18px; margin: clamp(72px, 9vw, 120px) 0 clamp(26px, 3vw, 40px); font-size: clamp(21px, 2.2vw, 30px); font-weight: 800; line-height: 1.5; letter-spacing: .03em; word-break: auto-phrase; }
.iv-ch h2 .n { flex: none; font-size: clamp(46px, 4.6vw, 72px); line-height: .8; }
/* 発言：名前の欄（右寄せ）＋本文。質問と地の文は本文の位置にそろえ、「──」は左にぶら下げる */
.iv-q { margin: 48px 0 22px; padding-left: 176px; text-indent: -2.2em; font-size: 16px; font-weight: 800; line-height: 1.95; }
.iv-q .dash { margin-right: .2em; color: var(--ink-2); }
.iv-a { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 0 24px; margin: 16px 0; }
.iv-who { padding-top: .3em; text-align: right; font-size: 13px; font-weight: 800; letter-spacing: .04em; line-height: 1.9; word-break: auto-phrase; }
.iv-say { font-size: 16px; line-height: 2.05; }
.iv-p { margin: 28px 0; padding-left: 176px; font-size: 15px; line-height: 2; color: var(--ink-2); }
.iv-photo { margin: clamp(40px, 5vw, 64px) 0; }
.iv-photo .ph, .iv-photo .pic { display: block; width: 100%; }
.iv-photo .pic { overflow: hidden; background: #d8d4cc; }
.iv-photo img { width: 100%; height: auto; }
.iv-photo figcaption { margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.iv-photo.is-wide { width: min(1100px, calc(100vw - 2 * var(--g))); margin-left: 50%; transform: translateX(-50%); }
.iv-photo.is-tall { max-width: 520px; margin-left: auto; margin-right: auto; }
.iv-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); margin: clamp(40px, 5vw, 64px) 0; }
.iv-pair .iv-photo { margin: 0; }
/* 大きく抜き出す一言：本文より少し広く */
.iv-quote { width: min(940px, calc(100vw - 2 * var(--g))); margin: clamp(64px, 8vw, 112px) 0 clamp(64px, 8vw, 112px) 50%; transform: translateX(-50%); }
.iv-quote::before { content: "\201C"; display: block; font-family: var(--cond); font-weight: 700; font-size: clamp(80px, 8vw, 128px); line-height: .7; color: var(--ink-2); }
.iv-quote p { font-size: clamp(23px, 3vw, 40px); font-weight: 800; line-height: 1.6; letter-spacing: .02em; word-break: auto-phrase; text-wrap: pretty; }
.iv-quote cite { display: block; margin-top: 16px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.iv-quote cite::before { content: "— "; }

/* 記事の最後：プロフィール・作品・ライブ */
.iv-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); max-width: 1100px; margin: clamp(96px, 11vw, 160px) auto 0; }
.iv-box { display: flex; flex-direction: column; background: var(--card); text-decoration: none; transition: transform .45s var(--ease), box-shadow .45s; }
@media (hover: hover) { a.iv-box:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -32px rgba(18, 19, 21, .5); } }
.iv-box-ph { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #d8d4cc; }
.iv-box-ph img { width: 100%; height: 100%; object-fit: cover; }
.iv-box-ph.is-sq { background: var(--night-2); }
.iv-box-ph.is-sq img { object-fit: contain; }
.iv-box-body { position: relative; display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 18px 20px 22px; }
.iv-box-body > .en { font-size: 22px; line-height: 1; margin-bottom: 8px; }
.iv-box-body b { font-size: 16px; font-weight: 800; letter-spacing: .04em; }
.iv-box-body .d { font-size: 13px; color: var(--ink-2); }
.iv-box-body > .arw { position: absolute; right: 20px; bottom: 24px; }
.iv-box.is-live ul { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 18px; }
.iv-box.is-live li a { display: flex; flex-direction: column; gap: 3px; text-decoration: none; }
.iv-box.is-live time { font-family: var(--cond); font-weight: 600; font-size: 24px; line-height: 1; }
.iv-box.is-live b { font-size: 14px; line-height: 1.6; }
.iv-box.is-live .more { align-self: flex-start; margin-top: auto; }

/* COLUMN のページ：サイト内のインタビュー記事の一覧 */
.col-iv { margin-top: clamp(40px, 6vw, 80px); }
.iv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.iv-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); height: 100%; background: var(--card); text-decoration: none; transition: transform .45s var(--ease), box-shadow .45s; }
@media (hover: hover) { .iv-card:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -32px rgba(18, 19, 21, .5); } }
.iv-card-ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #d8d4cc; }
.iv-card-ph img { width: 100%; height: 100%; object-fit: cover; }
.iv-card-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; }
.iv-card .iv-kick .lbl { font-size: 15px; }
.iv-card .iv-kick time { font-size: 14px; }
.iv-card-t { font-size: 15px; font-weight: 800; line-height: 1.6; word-break: auto-phrase; }
.iv-card-m { margin-top: auto; font-size: 12px; color: var(--ink-2); }

@media (max-width: 1100px) { .iv-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iv-cards { grid-template-columns: 1fr; } }
@media (max-width: 759px) {
  .iv-hero-ph .pic { aspect-ratio: 4 / 3; }
  .iv-q { padding-left: 2.2em; }
  .iv-p { padding-left: 0; }
  .iv-a { grid-template-columns: 1fr; gap: 2px; margin: 18px 0; }
  .iv-who { padding-top: 0; text-align: left; }
  .iv-say { font-size: 15.5px; }
  .iv-info { grid-template-columns: 1fr; }
  .iv-card { grid-template-columns: 1fr; }
}

/* =========================================================
   WordPress テーマ用の追加
   ========================================================= */
/* ページ切り替えの幕：前のページで幕を閉じて移動してきた時は、幕が閉じた状態から始めて上げる */
.nav-in .curtain b { opacity: 1; transition: none; }
.nav-in .curtain-mark { opacity: 1; }
/* 管理画面のツールバーが出ている時、固定ヘッダーをその下に */
.admin-bar .hd { top: var(--wp-admin--admin-bar--height, 32px); }
/* NEWS・固定ページの本文（ブロックエディターで書いたもの） */
.wp-content { max-width: 760px; font-size: 16px; line-height: 2; }
.wp-content > * + * { margin-top: 1.2em; }
.wp-content h2 { font-size: 22px; font-weight: 800; margin-top: 2em; }
.wp-content h3 { font-size: 18px; font-weight: 800; margin-top: 1.6em; }
.wp-content a { text-decoration: underline; text-underline-offset: .2em; }
.wp-content img { max-width: 100%; height: auto; }
.wp-content ul, .wp-content ol { padding-left: 1.4em; list-style: revert; }

/* NEWS 一覧のページ送り（WordPress の paginate_links） */
.news-pager ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.news-pager a, .news-pager span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; font-family: var(--cond); font-size: 15px; }
.news-pager .current { border-bottom: 2px solid currentColor; }
/* 映像がない時はトップの再生ボタンを出さない（.hero-toggle の display より優先） */
[hidden] { display: none !important; }

/* トップの LIVE：大見出しは写真の下端に少しだけ重ねる（2026-11-11 HP修正.pdf「被りすぎ」） */
.live-photo { margin-bottom: calc(clamp(130px, 27vw, 470px) * .5); }
@media (max-width: 759px) { .live-photo { margin-bottom: calc(36vw * .5); } }

/* PROFILE の公式 SNS：メンバーの X・Instagram と同じ丸いボタン */
.prof-sns { margin-top: 28px; }
.prof-sns .sns { font-family: var(--cond); font-weight: 600; font-size: 16px; text-decoration: none; min-width: 44px; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-dark); border-radius: 999px; padding: 0 16px; transition: background .3s, color .3s; }
.prof-sns .sns:hover { background: var(--night-text); color: var(--night); }

/* お問い合わせ：ロボット用の見えない欄・送信できなかった時の文 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { color: #c2412f; font-size: 14px; font-weight: 700; }
.form [data-contact-send][disabled] { opacity: .5; cursor: progress; }

/* 公演詳細：地域は「会場」の見出しの横に（2026-11-11 「東京」の位置を修正） */
.ld-area { margin-left: 1.4em; color: var(--night-text); }

/* 入場無料：赤い四角（販売中の青と同じ形。白い文字で 6:1 以上） */
.status-free { background: #d1352b; border-color: #d1352b; color: #fff; }

/* メンバーのプロフィール（公式サイト BIOGRAPHY の文面。1行ずつ） */
.mem-intro p + p { margin-top: .9em; }

/* 作品：補足（発売・配信の日付など） */
.wk-note { margin-top: 14px; font-size: 13px; line-height: 1.9; color: var(--night-dim); }

/* プレーヤー：サムネイルから広がって開く（背景と下の文字は少し遅れて出る） */
.player { background: rgba(8, 8, 8, 0); transition: background-color .5s ease; }
.player.is-in { background: rgba(8, 8, 8, .96); }
.player::backdrop { background: transparent; }
.player-stage { will-change: transform; }
.player-bar { opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .5s var(--ease); }
.player.is-in .player-bar { opacity: 1; transform: none; transition-delay: .35s; }
.reduce-motion .player, .reduce-motion .player-bar { transition: none; }

/* 「View more」（DISCOGRAPHY など） */
.more-wrap { display: flex; justify-content: center; margin: calc(-1 * clamp(40px, 6vw, 100px)) 0 clamp(80px, 10vw, 150px); }
.more-wrap .more { background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0; cursor: pointer; color: inherit; }
.more-n { font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: .04em; margin-left: -4px; }
.arw-d { transform: rotate(90deg); }
.more:hover .arw-d { transform: rotate(90deg) translateX(4px); }
.more-in { animation: moreIn .7s var(--ease) both; animation-delay: calc(var(--mi, 0) * 60ms); }
@keyframes moreIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.reduce-motion .more-in { animation: none; }

/* DISCOGRAPHY の一覧：ジャケ写の下の影をなくす（2026-11-11） */
.works-grid .work-cover, .works-grid .work a:hover .work-cover { box-shadow: none; }

/* トップ映像：PC・タブレットも紙の余白で囲まず、画面の端から端まで（2026-11-11）。
   ヘッダーは映像の上に重なる（差の合成で白く見える）。上下を少し暗くして文字を読みやすく。停止ボタンはメニューと重ならない右下へ */
.hero { padding: 0; background: var(--night); }
/* 映像の高さはそれぞれの画面の指定のまま（ここで height: 100% にすると、スマホ・縦のタブレットで高さが0になり映像が消えた。2026-11-11 修正） */
@media (min-width: 760px) {
  .hero-shade { background: linear-gradient(to bottom, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 18%), linear-gradient(to top, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 28%); }
}
.hero-toggle { top: auto; bottom: clamp(16px, 2.4vw, 32px); right: var(--g); }

/* PHOTO ⇔ LIVE RECORDS のリンク */
.ph-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: -8px 0 28px; font-size: 13px; color: var(--ink-2); }
.rec-ph-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }

/* 写真が入るまでの「撮影予定」の枠（FIRST TIME のカード・はじめての方へ）。GUIDE の枠と同じ見た目 */
.pic-todo { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 14px 16px; background: rgba(29, 29, 28, .07); font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.pic-todo .en { font-size: clamp(28px, 2.6vw, 40px); line-height: 1; color: rgba(29, 29, 28, .18); }
/* MV の「View more」：映像の下に少し間をあけて（作品の一覧と違い、下の余白がない並びのため） */
.vgrid + .more-wrap { margin: clamp(40px, 5vw, 72px) 0 0; }
/* トップの LIVE（PC）：見出しをもう少し上げて、写真に重なる量を少し増やす（2026-11-11）。スマホはそのまま */
@media (min-width: 760px) { .live-photo { margin-bottom: calc(clamp(130px, 27vw, 470px) * .36); } }

/* ライブの記録：パラパラがない公演は写真1枚を画面いっぱいに（スクロールで切り替えない）。写真もない時は余白をとって文字だけ */
.flip.is-still { height: 100vh; height: 100svh; }
.rec-plain { padding: calc(var(--hd) + clamp(40px, 7vw, 110px)) var(--g) 0; }

/* 大きな見出しの改行：1文字だけ次の行に落ちないよう、行の長さを釣り合わせ、言葉の切れ目で折り返す（2026-11-11 「青春を、もう一｜度」の修正） */
.page-lead { text-wrap: balance; word-break: auto-phrase; }
/* 大きな見出しの改行（2026-11-11）：折り返してよい所は PHP の bg_wrap() が決める。まとまり（.bt）はなるべく1行に。行の長さはそろえる */
.rec-title, .ld-title, .wk-title, .news-article h1, .iv-title, .live-title { word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; }
.bt { display: inline-block; max-width: 100%; }

/* ライブの記録の冒頭：写真のスライドショー（2026-11-11 パラパラから変更）。重ねて切り替え、ゆっくり寄る */
.flip-stage img { transform: none; transition: opacity 1.4s ease; }
.flip-stage img.kb { animation: rec-kb 8s ease-out both; }
@keyframes rec-kb { from { transform: scale(1.1); } to { transform: scale(1); } }
.reduce-motion .flip-stage img.kb { animation: none; }

/* LIVE の切替（2026-11-11）：いま見ている方の見出し＋件数と、もう一方へのリンク（View all と同じ下線と矢印） */
.lhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 28px; margin: 0 0 clamp(20px, 2.4vw, 32px); }
.lhead-t { margin: 0; font-size: clamp(20px, 2vw, 28px); font-weight: 800; letter-spacing: .06em; line-height: 1.3; }
.lhead-t .n { margin-left: .7em; font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--ink-2); }
.lhead-t .n b { margin-right: .15em; font-family: var(--cond); font-size: clamp(22px, 2vw, 28px); font-weight: 600; color: var(--ink); }
.on-dark .lhead-t .n { color: rgba(241, 240, 236, .6); }
.on-dark .lhead-t .n b { color: var(--night-text); }
.lhead-to { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-decoration: none; border-bottom: 1px solid currentColor; }
@media (hover: hover) { .lhead-to:hover .arw { transform: translateX(6px); } .lhead-to:hover .arw-l { transform: translateX(-6px); } }

/* 公演詳細：フライヤー・タイムテーブルなどの画像（2枚以上は横に並べてスワイプ） */
.ld-pic { margin: 0; }
.ld-pic figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .06em; color: rgba(241, 240, 236, .6); }
.ld-flyer.is-multi .ld-track { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.ld-flyer.is-multi .ld-track::-webkit-scrollbar { display: none; }
.ld-flyer.is-multi .ld-pic { flex: 0 0 100%; scroll-snap-align: start; }
.ld-pager { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.ld-pager button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-dark); background: none; color: inherit; cursor: pointer; transition: opacity .2s, background .2s; }
.ld-pager button:hover { background: rgba(241, 240, 236, .1); }
.ld-flyer.at-start .ld-prev, .ld-flyer.at-end .ld-next { opacity: .3; pointer-events: none; }
.ld-count { font-family: var(--cond); font-size: 16px; letter-spacing: .08em; }
.ld-count b { font-weight: 600; }
/* 画像が2枚以上の時：大きい画像の下に、全部の画像を小さく並べる（押すと切り替え。いま出ている画像は枠で分かる）2026-11-11 */
.ld-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ld-thumb { display: flex; flex-direction: column; gap: 6px; width: 84px; padding: 0; border: 0; background: none; color: rgba(241, 240, 236, .6); cursor: pointer; text-align: left; }
.ld-thumb img { width: 84px; height: 84px; object-fit: cover; object-position: top; outline: 1px solid rgba(241, 240, 236, .2); outline-offset: -1px; opacity: .55; transition: opacity .3s, outline-color .3s; }
.ld-thumb span { font-size: 11px; letter-spacing: .04em; line-height: 1.4; }
.ld-thumb:hover img { opacity: .85; }
.ld-thumb.is-on img { opacity: 1; outline: 2px solid var(--night-text); outline-offset: -2px; }
.ld-thumb.is-on { color: var(--night-text); }
.ld-flyer.is-multi .ld-pic figcaption { display: none; } /* 名前は小さな一覧の方に出す */

/* Q&A の開閉（2026-11-11 強めに）：開くと背景が少し濃くなり、＋が回って－に。A が回りながら現れ、答えが下から出る。閉じる時は答えが先に消える */
.qa-item { transition: background .45s var(--ease); }
.qa-item[open]:not(.is-closing) { background: rgba(29, 29, 28, .085); }
.on-dark .qa-item[open]:not(.is-closing) { background: rgba(241, 240, 236, .1); }
.qa-item summary > span:nth-child(2) { transition: transform .45s var(--ease); }
.qa-item summary:hover > span:nth-child(2) { transform: translateX(6px); }
.qa-item summary .q { display: inline-block; transition: transform .5s var(--ease); }
.qa-item[open]:not(.is-closing) summary .q { transform: scale(1.12); }
.qa-item summary .pm { transition: transform .55s var(--ease); }
.qa-item[open]:not(.is-closing) summary .pm { transform: rotate(180deg); }
.qa-item.is-opening .qa-a .a { animation: qa-a-pop .7s cubic-bezier(.2, 1.5, .4, 1) .06s both; }
.qa-item.is-opening .qa-a > div { animation: qa-a-in .7s var(--ease) .12s both; }
.qa-item.is-closing .qa-a { opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .3s; }
@keyframes qa-a-pop { from { opacity: 0; transform: scale(.2) rotate(-35deg); } to { opacity: 1; transform: none; } }
@keyframes qa-a-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.reduce-motion .qa-item .qa-a .a, .reduce-motion .qa-item .qa-a > div { animation: none; }
/* トップの LIVE の大きな文字：スマホだけ少し左へ（2026-11-11「もうちょい左、スマホのみ」） */
@media (max-width: 759px) { .live-big { margin-left: -.1em; } }
/* LIVE RECORDS のカードの公演名も、言葉の途中で折り返さない（bg_wrap） */
.rec-card .t { word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; }

/* 大きな見出し：かっこ・句読点の前後の空きを詰める（行頭の『が字下げのように見えないように）。2026-11-11 */
.rec-title, .ld-title, .wk-title, .news-article h1, .iv-title, .live-title, .rec-card .t { font-feature-settings: "palt"; text-spacing-trim: trim-start; }
/* ライブの記録の見出し：長い公演名は文字を小さく（PHP の bg_title_size） */
.rec-title.tl-m { max-width: 13em; font-size: clamp(36px, 5vw, 88px); }
.rec-title.tl-l { max-width: 15em; font-size: clamp(30px, 3.8vw, 66px); line-height: 1; }
@media (max-width: 759px) {
  .rec-title.tl-m { font-size: 9.6vw; }
  .rec-title.tl-l { font-size: 7.4vw; }
}

/* はじめての方へ（ライブの流れ）：スマホは写真を上に大きく、文はその下に（2026-11-11「画像とのバランスが悪い」） */
@media (max-width: 759px) {
  .ex-steps { gap: 40px; }
  .ex-step { display: block; }
  .ex-step .pic { aspect-ratio: 16 / 9; margin-bottom: 16px; }
  .ex-step .pic-todo { aspect-ratio: 16 / 7; }
  .ex-step .en { font-size: 30px; }
}

/* はじめての方へ：特典会のルールのモーダル（中身は GUIDE の欄） */
.gdlg .lyr-box { padding-top: clamp(24px, 3vw, 44px); }
.gdlg .g-sec { margin: 0; padding: 0; border: 0; }
.gdlg .lyr-bar .more { font-size: 13px; }
.ws { white-space: nowrap; }
/* はじめての方への目次（3つ）：スマホは2列だと1つ余って崩れるので、1列に（2026-11-11） */
@media (max-width: 759px) {
  .fi-index ol { grid-template-columns: 1fr; }
  .fi-index a { grid-template-columns: 2em minmax(0, 1fr); align-items: center; padding: 14px 16px; }
  .fi-index .n { grid-row: 1 / span 2; font-size: 20px; }
}

/* トップ映像の「音を出す」と停止のボタン：右下に並べる（2026-11-11） */
.hero-ctrls { position: absolute; z-index: 4; right: var(--g); bottom: clamp(16px, 2.4vw, 32px); display: flex; gap: 10px; }
.hero-ctrls .hero-toggle { position: static; }
.hero-sound { width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; padding: 0; color: #fff; border: 1px solid rgba(255, 255, 255, .6); background: rgba(10, 11, 13, .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .3s; }
.hero-sound:hover { background: rgba(255, 255, 255, .16); }
.hero-sound .i-snd { width: 22px; height: 22px; }
.hero-sound .w-on, .hero-sound.is-on .w-off { display: none; }
.hero-sound.is-on .w-on { display: inline; }
.hero-sound.is-on { background: #fff; color: var(--ink); border-color: #fff; }
@media (max-width: 759px) {
  .hero-ctrls { bottom: 16px; gap: 8px; }
  .hero-sound { width: 42px; height: 42px; }
}
/* スマホ（縦）のトップ映像：画面の8割ほどの高さに（2026-11-11「いきなり MV が出ちゃってる」→「でかすぎ、少し見えてても良い」）。左右の位置は顔に合わせて自動で動く（hero_focus） */
@media (max-width: 759px) and (orientation: portrait) {
  .hero-frame { height: min(178vw, 84vh); height: min(178vw, 84svh); }
}



/* スマホ：トップ映像と MUSIC VIDEO の間の余白を詰める（2026-11-11） */
@media (max-width: 759px) {
  #video.sec { padding-top: 44px; }
}

/* メンバー写真：顔の高さ・大きさをそろえる（PHP の bg_member_align が --ms・--mx・--my を入れる） */
.mem-ph img { transform: translate(var(--mx, 0%), var(--my, 0%)) scale(var(--ms, 1)); }
.mem:hover .mem-ph img { transform: translate(var(--mx, 0%), var(--my, 0%)) scale(calc(var(--ms, 1) * 1.04)); }

/* お問い合わせ（2026-11-11）：PC は左に入力欄、右に案内。スマホは 案内 → 入力欄 → 補足 の順 */
@media (min-width: 1000px) {
  .contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(48px, 6vw, 120px); align-items: start; }
  .contact-main { order: 1; } /* 入力欄を左、案内を右に（2026-11-11「左右逆じゃない？」） */
  .contact-info { order: 2; padding-top: 8px; }
  .contact-info { position: sticky; top: calc(var(--hd) + 40px); }
  .contact-info .page-lead { margin-bottom: 0; }
  .contact-info .contact-side { margin-top: 28px; }
  .contact-main .form, .contact-main .form-done { max-width: none; }
}
@media (max-width: 999px) {
  .contact-grid { display: flex; flex-direction: column; }
  .contact-info { display: contents; }
  .contact-info .page-lead { order: 1; }
  .contact-main { order: 2; }
  .contact-info .contact-side { order: 3; }
}

/* 背景のグレイン（2026-11-11）：写真・映像だけでなく、ページ全体にもうっすら。画面に固定（スクロールしても動かない） */
/* ざらつきの層は、全面の幕（ページ移動の暗転 100・開いた時の演出 200）より奥に置く（2026-11-13 まで 900）。
   X などのアプリ内ブラウザは、下のボタン帯の裏を「画面の端にある fixed の幕の色」で塗る。いちばん手前の fixed がこの層（ほぼ透明）だと色を拾えず、
   幕の下に帯1本分だけ中身が透けていた（2026-11-13「Xのプロフィールから開くと下が欠ける」。iPhone のシミュレーターで X と同じ作りを再現して確認）。
   幕の外へ影などではみ出させても、帯の上で切られて描かれないので効かない */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background-image: var(--noise); background-size: 180px; opacity: .05; }
.reduce-motion body::after { opacity: .04; }
.ld-flyer.is-multi .ld-pic .pic { display: flex; align-items: center; justify-content: center; aspect-ratio: var(--ar, .7071); }
.ld-flyer.is-multi .ld-pic .pic img { width: 100%; height: 100%; object-fit: contain; }
/* 写真の壁：写真の間は欄の地の色に（黒い地をやめる。2026-11-11「背景くろになってない？」） */
.ph-wall { background: transparent; }

/* 各ページの地の色をトップの同じ欄に合わせた（2026-11-11）：DISCOGRAPHY・NEWS は黒、LIVE 一覧は明るい地。黒い地で暗すぎた文字の色 */
.on-dark .work-meta { color: rgba(241, 240, 236, .58); }
.page:not(.on-dark) .lr-lead, .page:not(.on-dark) .rec-card-body .lbl { color: var(--ink-2); } /* LIVE 一覧を明るい地にしたので */
.on-dark .news-article .meta, .on-dark .news-article .tag { color: var(--night-dim); border-color: currentColor; } /* NEWS を黒い地にしたので */
/* 写真の壁の下の端：写真がぶつっと切れないよう、下をふわっと消して、次の欄との間に余白（2026-11-11「写真急に切れちゃってる」） */
.ph-wall { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%); }
.photos { padding-bottom: clamp(40px, 5vw, 88px); }
/* フッターの上の余白をなくす（黒いページとフッターの間に地の色の帯が出ていた。2026-11-11「あいだのしろ」）。ページの下の余白は各ページ側にある */
.ft { margin-top: 0; }

/* 公演詳細を明るい地に（2026-11-11「LIVE 詳細になると黒くなる」）。黒い地の前提だった色を明るい地用に */
.live-page .spec dt, .live-page .ld-key dt, .live-page .ticket-box .small, .live-page .ld-pic figcaption { color: var(--ink-2); }
.live-page .ld-area { color: var(--ink); }
.live-page .spec dd a { color: var(--blue); }
.live-page .ticket-box { background: rgba(29, 29, 28, .05); }
.live-page .ld-flyer .pic { background: rgba(29, 29, 28, .06); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .45); }
.live-page .ld-thumb { color: var(--ink-2); }
.live-page .ld-thumb img { outline-color: rgba(29, 29, 28, .2); }
.live-page .ld-thumb.is-on { color: var(--ink); }
.live-page .ld-thumb.is-on img { outline-color: var(--ink); }
.live-page .ld-key .sub, .live-page .ld-key .k, .live-page .ld-price .k, .live-page .ld-price .sub { color: var(--ink-2); }
.ld-venue .v { word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; } /* 会場名も言葉の途中で折り返さない */

/* トップの NEWS 欄の写真（2026-11-11）：LIVE 欄と左右を逆に。写真は左、View all は右、大きな NEWS は右下に重なる */
.news-stage .news-photo { grid-column: 1 / 10; }
.news-stage .news-cap { grid-column: 10 / 13; align-items: flex-end; padding: 0 0 0 2vw; }
.news-stage .news-big { text-align: right; margin: 0 -.03em -.07em 0; }
@media (max-width: 759px) {
  .news-stage .news-photo, .news-stage .news-cap { grid-column: 1; }
  .news-stage .news-big { margin-left: 0; }
}
/* ライブの記録の写真は全部見せる（下をふわっと消さない。列も動かさない） */
.ph-wall[data-full] { -webkit-mask-image: none; mask-image: none; }
/* GUIDE・はじめての方への欄の見出し（スマホ）：番号と見出しの上をそろえ、帯（「12月末より変更」など）が番号に重ならないように（2026-11-12「デザイン壊れ」） */
@media (max-width: 759px) {
  .g-head { align-items: start; row-gap: 16px; }
  .g-no { font-size: 64px; line-height: .8; padding-top: .06em; }
  .g-ttl h2 { line-height: 1.35; }
  .g-tag { margin-top: 4px; }
}

/* NEWS の記事の本文：見出し・箇条書き・区切り線（2026-11-12 お手紙・プレゼントの記事から。今後の記事でも使える） */
.news-article .body h2 { margin: 2.4em 0 .7em; padding-left: 12px; border-left: 3px solid currentColor; font-size: 18px; font-weight: 800; letter-spacing: .04em; line-height: 1.6; }
.news-article .body h3 { margin: 2em 0 .6em; font-size: 16px; font-weight: 800; letter-spacing: .04em; }
.news-article .body ul, .news-article .body ol { margin: .6em 0 1.2em; padding: 0; list-style: none; }
.news-article .body ol { counter-reset: n; }
.news-article .body li { position: relative; padding-left: 1.3em; }
.news-article .body ul > li::before { content: "・"; position: absolute; left: 0; }
.news-article .body ol > li { counter-increment: n; } .news-article .body ol > li::before { content: counter(n) "."; position: absolute; left: 0; font-weight: 700; }
.news-article .body hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--line); }
.news-article .body p + h2, .news-article .body ul + p { margin-top: 2.4em; }
.news-article .body ul + p { margin-top: 1.2em; }
/* Q&A：冒頭の2行目（小さく）と、文中のリンク */
.qa-note { margin: -8px 0 clamp(36px, 4vw, 56px); font-size: 13px; color: var(--ink-2); }
.page-lead a, .qa-note a, .qa-a p a { text-decoration: underline; text-underline-offset: 3px; }

/* スマホで押した時に、リンクの形の灰色の箱（ふち）が出て、暗転まで残らないように（2026-11-12「トップページたぶん外側にふちがはいってて、挙動として不自然」）
   ・押した瞬間の灰色の四角（iPhone が標準で出す印）を出さない。押すとすぐ照明・入れ替えが始まるので、押した手ごたえはそちらで分かる
   ・指で押したあとも「乗せた時」の背景が残るのをやめる（乗せた時の背景はマウスの時だけ） */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  a.live-link:hover, .on-dark a.live-link:hover, .news-row a:hover, .on-dark .news-row a:hover { background: transparent; }
}


/* =========================================================
   2026-11-12 いただいた改善案
   ========================================================= */
/* メニューの FIRST TIME 側も、左の一覧と同じく1行ずつ出る・触れると動く（「こっちがわアニメーションない」）。
   スマホ（1段）では一覧の下にあるので、スクロールして見えた時に出す（site.js の sideWatch） */
.menu-side > * { opacity: 1; transform: none; transition: none; }
.menu .menu-side > .menu-side-h, .menu .menu-sub li { opacity: 0; transform: translateY(26px); transition: opacity .5s ease, transform .8s var(--ease); transition-delay: calc(var(--i) * 40ms + 220ms); }
.menu.is-open .menu-side > .menu-side-h, .menu.is-open .menu-sub li { opacity: 1; transform: none; }
.menu-side-h .en, .menu-sub .en { display: inline-block; transition: transform .6s var(--ease), opacity .4s; }
.menu-side-h a:hover .en, .menu-sub a:hover .en { transform: translateX(12px); }
.menu-sub:hover a:not(:hover) .en { opacity: .45; }
@media (max-width: 759px) {
  .menu.is-open .menu-side > .menu-side-h:not(.is-vis), .menu.is-open .menu-sub li:not(.is-vis) { opacity: 0; transform: translateY(26px); }
  .menu.is-open .menu-side > .menu-side-h, .menu.is-open.is-done .menu-side > .menu-side-h, .menu.is-open .menu-sub li { transition: opacity .5s ease, transform .8s var(--ease); transition-delay: calc(var(--j, 0) * 70ms); }
}
.reduce-motion .menu .menu-side > .menu-side-h, .reduce-motion .menu .menu-sub li { opacity: 1 !important; transform: none !important; }

/* LIVE のカード：時間（同じ日の昼・夜を見分ける）と、チケットの受付の段階・締切 */
.live-when { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--ink-2); letter-spacing: .04em; }
.on-dark .live-when { color: var(--night-dim); }
.live-sale { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 10px; font-size: 13px; line-height: 1.5; }
.live-sale b { color: var(--blue); font-weight: 700; }
.on-dark .live-sale b { color: var(--blue-soft); }
.live-sale.is-end b { color: var(--ink-2); }
.on-dark .live-sale.is-end b { color: var(--night-dim); }
.live-sale span:not(.vh) { color: var(--ink); }
.on-dark .live-sale span:not(.vh) { color: var(--night-text); }
@media (max-width: 759px) { .live-when, .live-sale { font-size: 12px; } }

/* 公演詳細：地図のリンク */
.ld-map { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--night-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ld-map:hover { text-decoration: none; }

/* 公演詳細の TICKET：いまの受付の段階（大きく）と、受付期間の一覧 */
.tk-now { display: flex; flex-direction: column; gap: 4px; }
.tk-now b { font-size: 20px; font-weight: 700; letter-spacing: .04em; color: var(--blue-soft); }
.tk-now.is-end b { color: var(--night-dim); }
.tk-now span { font-size: 14px; }
.tk-periods { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line-dark); }
.tk-periods-h { font-size: 12px; letter-spacing: .1em; color: var(--night-dim); margin-bottom: 10px; }
.tk-periods ul { display: flex; flex-direction: column; gap: 12px; }
.tk-periods li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; font-size: 13px; line-height: 1.6; }
.tk-periods .k { font-weight: 700; }
.tk-periods .st { justify-self: start; font-size: 11px; line-height: 1; padding: 4px 7px; border: 1px solid currentColor; border-radius: 3px; color: var(--night-dim); }
.tk-periods .is-now .st { background: var(--blue); border-color: var(--blue); color: #fff; }
.tk-periods .d, .tk-periods .r { grid-column: 1 / -1; }
.tk-periods .r { font-size: 12px; color: var(--night-dim); }
.tk-periods .is-end { color: var(--night-dim); }

/* チケットの受付の段階の色（2026-11-12「段階によって色変えたい」）：抽選＝赤紫／先着・一般＝青／受付前・結果待ち＝橙／終了＝灰
   （文字の前の小さな四角は「いらないかも」でやめた） */
:root { --st-lottery: #a01f8c; --st-first: var(--blue); --st-wait: #9a5200; --st-end: var(--ink-2); }
.on-dark { --st-lottery: #f0a6e6; --st-first: var(--blue-soft); --st-wait: #f0b45c; --st-end: var(--night-dim); }
.live-sale, .tk-now { --st: var(--st-first); }
.st-lottery { --st: var(--st-lottery); }
.st-first { --st: var(--st-first); }
.st-wait { --st: var(--st-wait); }
.st-end { --st: var(--st-end); }
.live-sale b, .on-dark .live-sale b, .live-sale.is-end b, .on-dark .live-sale.is-end b, .tk-now b, .tk-now.is-end b { color: var(--st); }
.tk-periods li .st { color: var(--st, var(--night-dim)); }
.tk-periods li.is-now .st { background: var(--st); border-color: var(--st); color: var(--night); }
.tk-periods li.is-end .st { color: var(--night-dim); }

/* トップのスライダー（PICKUP。2026-11-12）：トップ映像のすぐ下、黒い地。真ん中に1枚、左右に前後がのぞく（端はつながる）。
   文字は画像の上に大きく（「記事っぽい」→ 見直し）。左上に販売の札（受付の段階の色。入場無料・SOLD OUT は赤）。
   縦長・正方形の画像（フライヤー・ジャケット）は右に全体が見えるように置き、後ろにぼかした同じ画像。文字は左 */
.pickup { --pkw: clamp(280px, 26vw, 480px); --pkt: clamp(28px, 3vw, 48px); position: relative; background: var(--night); color: var(--night-text); padding: var(--pkt) 0 clamp(14px, 1.6vw, 26px); }
.pk-view { position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pk-view.no-snap { scroll-snap-type: none; }
.pk-view::-webkit-scrollbar { display: none; }
.pk-view:focus-visible { outline-offset: -4px; }
.pk-track { display: flex; gap: clamp(14px, 1.6vw, 26px); width: max-content; padding: 0 calc((100vw - var(--pkw)) / 2); }
.pk-slide { flex: 0 0 var(--pkw); scroll-snap-align: center; }
.pk-card { appearance: none; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.pk-ph { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--night-2); }
.pk-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pk-ph.is-tall img { object-fit: contain; object-position: 94% 50%; }
.pk-blur { position: absolute; inset: -12%; background-size: cover; background-position: center; filter: blur(22px) brightness(.45) saturate(1.1); }
.pk-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .42) 40%, rgba(0, 0, 0, 0) 72%); }
.pk-ph.is-tall .pk-shade { background: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .15) 55%, rgba(0, 0, 0, 0) 70%), linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 55%); }
.pk-cap { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 7px; padding: clamp(14px, 1.3vw, 22px); color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
.pk-ph.is-tall .pk-cap { right: 40%; }
.pk-cap .en { font-size: clamp(13px, 1vw, 16px); line-height: 1; letter-spacing: .14em; opacity: .9; }
.pk-cap .t { font-size: clamp(19px, 1.55vw, 27px); font-weight: 800; line-height: 1.32; letter-spacing: .02em; font-feature-settings: "palt"; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-cap .t { word-break: auto-phrase; text-wrap: pretty; }
.pk-ph.is-tall .pk-cap { right: 42%; }
.pk-ph.is-tall .pk-cap .t { -webkit-line-clamp: 3; font-size: clamp(16px, 1.25vw, 22px); }
.pk-cap .s { font-size: 12px; line-height: 1.5; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-sale { position: absolute; z-index: 3; top: clamp(10px, 1vw, 16px); left: clamp(10px, 1vw, 16px); display: inline-flex; align-items: baseline; gap: 8px; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 3px; background: var(--blue); color: #fff; font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; }
.pk-sale b { font-weight: 700; color: #fff; }
.pk-sale.st-lottery { background: #a01f8c; }
.pk-sale.st-first { background: var(--blue); }
.pk-sale.st-wait { background: #9a5200; }
.pk-sale.st-end { background: #5a5a57; }
.pk-sale.st-free, .pk-sale.st-soldout { background: #d1352b; }
.pk-play { position: absolute; z-index: 3; top: clamp(10px, 1vw, 16px); right: clamp(10px, 1vw, 16px); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .75); background: rgba(10, 11, 13, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pk-play::before { content: ""; position: absolute; left: 50%; top: 50%; margin: -7px 0 0 -4px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; }
@media (hover: hover) {
  .pk-card:hover .pk-ph img { transform: scale(1.04); }
  .pk-card:hover .pk-ph.is-tall img { transform: scale(1.02); }
}
@media (min-width: 760px) and (max-width: 1100px) { .pickup { --pkw: 40vw; } }
@media (max-width: 759px) {
  .pickup { --pkw: 80vw; --pkt: 22px; }
  .pk-ph { aspect-ratio: 4 / 3; }
  .pk-cap { gap: 6px; padding: 14px; }
  .pk-cap .en { font-size: 12px; }
  .pk-cap .t { font-size: 19px; }
  /* スマホ：縦長の画像は真ん中に。文字は下に横いっぱい（下を濃く） */
  .pk-ph.is-tall img { object-position: 50% 50%; }
  .pk-ph.is-tall .pk-cap { right: 0; }
  .pk-ph.is-tall .pk-shade { background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .5) 40%, rgba(0, 0, 0, 0) 70%); }
  .pk-ph.is-tall .pk-cap .t { -webkit-line-clamp: 2; font-size: 17px; }
}
.reduce-motion .pk-ph img { transition: none; }

/* SOLD OUT の札は赤（2026-11-12「SOLD OUT のパターンも、赤四角かな」） */
.status-sold_out { background: #d1352b; border-color: #d1352b; }
.status-sold_out > span, .on-dark .status-sold_out > span { color: #fff; }

/* 横スライドの操作「‹ ── ›」（2026-11-12：スライダー・MV 共通）：丸い矢印2つの間に、いまの位置を示す線。色はサイトの白・黒のまま */
.snav { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 1.6vw, 22px); }
.snav-btn { appearance: none; flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--night-text); color: var(--night); cursor: pointer; display: grid; place-items: center; transition: transform .3s var(--ease), background-color .3s; }
.snav-btn:hover { background: #fff; transform: scale(1.06); }
.chev { display: block; width: 10px; height: 10px; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; transform: translateX(2px) rotate(-45deg); }
.chev-r { transform: translateX(-2px) rotate(135deg); }
.snav-track { position: relative; width: clamp(150px, 17vw, 250px); height: 3px; background: var(--line-dark); overflow: hidden; }
.snav-track i { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% / var(--n, 1)); background: var(--night-text); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .5s var(--ease); }
.pk-nav { padding: clamp(18px, 1.8vw, 28px) var(--g) 0; }
.mvc-nav { margin-top: clamp(22px, 2.2vw, 34px); }
.mvc-arrow, .mvc-dots { display: none; } /* 旧：MV の左右の矢印と点（JS ではもう作らない） */
@media (max-width: 759px) {
  .snav-btn { width: 44px; height: 44px; }
  .snav-track { width: 42vw; }
  .pk-nav { padding-top: 16px; }
}
.reduce-motion .snav-track i { transition: none; }

/* スライダーの見出し（2026-11-12 見直し：「日本語要らない」「デザインもっと良く」）。左上に英字だけ、短い線つき。上も少し暗くして読みやすく。
   販売の札は、タイトルの下（日付・会場の次） */
.pk-kind { position: absolute; z-index: 3; top: clamp(12px, 1.2vw, 18px); left: clamp(14px, 1.3vw, 22px); display: inline-flex; align-items: center; gap: 10px; color: #fff; line-height: 1; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.pk-kind::before { content: ""; flex: none; width: 20px; height: 2px; background: currentColor; box-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
.pk-kind .en { font-size: clamp(17px, 1.3vw, 21px); letter-spacing: .14em; }
.pk-shade { background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 28%), linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .42) 40%, rgba(0, 0, 0, 0) 72%); }
.pk-ph.is-tall .pk-shade { background: linear-gradient(to bottom, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 28%), linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .15) 55%, rgba(0, 0, 0, 0) 70%), linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 55%); }
.pk-cap .pk-sale { position: static; align-self: flex-start; max-width: 100%; margin-top: 4px; text-shadow: none; }
@media (max-width: 759px) {
  .pk-kind { gap: 8px; }
  .pk-kind::before { width: 16px; }
  .pk-kind .en { font-size: 16px; }
  .pk-ph.is-tall .pk-shade { background: linear-gradient(to bottom, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 28%), linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .5) 40%, rgba(0, 0, 0, 0) 70%); }
}

/* スライダーは中央固定（2026-11-12）：自由にスクロールせず、いつも1枚が真ん中（site.js の pickup が位置を決める）。真ん中以外は少し暗く */
.pk-view { overflow: hidden; scroll-snap-type: none; }
.pk-track { padding: 0; transform: translateX(var(--tx, 0)); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.pk-track.is-anim { transition: transform .8s var(--ease); }
.js .pk-track:not(.is-ready) { opacity: 0; }
.pk-slide { opacity: .5; transition: opacity .6s ease; }
.pk-slide.is-center { opacity: 1; }
.reduce-motion .pk-slide { transition: none; }

/* 「‹ ── ›」の丸：白い丸をやめて、細い線の丸（トップ映像の音・停止ボタンと同じ見た目。2026-11-12「白丸いやかも」） */
.snav-btn { background: rgba(10, 11, 13, .25); color: var(--night-text); border: 1px solid rgba(241, 240, 236, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .3s, border-color .3s, transform .3s var(--ease); }
.snav-btn:hover { background: rgba(255, 255, 255, .12); border-color: var(--night-text); transform: none; }

/* スライダーのバナー（2026-11-12「これみたいに中に入れる」）：文字と画像を1枚のバナーの中に組む。MV（写真に文字を重ねる形）はそのまま。
   date＝日付を大きく／split＝左に画像・右に文字（作品は明るい地）／type＝青い地に文字だけ／image＝画像だけ */
.pk-ph.v-image img { object-fit: cover; }
.pk-txt { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.pk-txt .en { font-size: clamp(13px, .95vw, 15px); line-height: 1; letter-spacing: .16em; color: var(--blue-soft); }
.pk-txt .t { font-size: clamp(16px, 1.3vw, 22px); font-weight: 800; line-height: 1.32; letter-spacing: .02em; font-feature-settings: "palt"; word-break: auto-phrase; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pk-txt .s { font-size: 12px; line-height: 1.5; color: var(--night-dim); }
.pk-txt .pk-sale { position: static; margin-top: 2px; }

/* date：フライヤーのない公演。日付を大きく、後ろに写真をうっすら */
.pk-ph.v-date { display: flex; align-items: center; padding: clamp(14px, 1.4vw, 24px) clamp(16px, 1.6vw, 28px); background: var(--night-2); }
.pk-bgimg { position: absolute; inset: 0 0 0 38%; z-index: 0; background-size: cover; background-position: center; opacity: .5; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%); mask-image: linear-gradient(to right, transparent 0%, #000 55%); }
.v-date .pk-txt { max-width: 78%; }
.pk-date { font-family: var(--cond); font-weight: 600; font-size: clamp(50px, 4.6vw, 82px); line-height: .82; letter-spacing: .01em; margin: 2px 0 4px; }
.pk-date small { margin-left: .18em; font-size: .3em; letter-spacing: .12em; }
.v-date .pk-txt .t { -webkit-line-clamp: 2; font-size: clamp(15px, 1.15vw, 19px); }

/* split：左に画像（フライヤー・ジャケット）、右に文字 */
.pk-ph.v-split { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: clamp(14px, 1.4vw, 24px); padding: clamp(12px, 1.1vw, 18px); background: var(--night-2); }
.pk-img { height: 100%; display: flex; align-items: center; }
.pk-ph.v-split .pk-img img { position: static; display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; box-shadow: 0 12px 26px rgba(0, 0, 0, .45); }
.pk-txt .t.is-big { font-family: var(--cond); font-weight: 600; text-transform: uppercase; font-size: clamp(40px, 3.6vw, 64px); line-height: .9; letter-spacing: .01em; }
.pk-rel { display: inline-block; margin-top: 4px; padding: 6px 10px 5px; border: 1px solid currentColor; font-family: var(--cond); font-weight: 600; font-size: 14px !important; letter-spacing: .1em; text-transform: uppercase; }
/* 作品は明るい地 */
.pk-ph.t-light { background: var(--paper); color: var(--ink); }
.t-light .pk-txt .en { color: var(--blue); }
.t-light .pk-txt .s { color: var(--ink); }
.t-light .pk-img img { box-shadow: 0 12px 26px rgba(0, 0, 0, .18); }

/* type：はじめての方へ。青い地に文字だけ、内側に細い枠、ロゴを大きく薄く */
.pk-ph.v-type { display: flex; align-items: center; justify-content: center; text-align: center; padding: 22px; background: var(--blue); color: #fff; }
.pk-ph.v-type::before { content: ""; position: absolute; inset: 10px; z-index: 3; border: 1px solid rgba(255, 255, 255, .4); pointer-events: none; }
.pk-mark { position: absolute; z-index: 0; right: -8%; bottom: -22%; width: 52%; height: auto; fill: rgba(255, 255, 255, .1); }
.v-type .pk-txt { align-items: center; }
.v-type .pk-txt .en { color: #fff; opacity: .85; letter-spacing: .24em; }
.v-type .pk-txt .t { font-size: clamp(22px, 1.9vw, 32px); }
.v-type .pk-txt .s { color: rgba(255, 255, 255, .85); }
.pk-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding-bottom: 3px; border-bottom: 1px solid currentColor; font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .12em; }
@media (hover: hover) {
  .pk-card:hover .pk-go .arw { transform: translateX(5px); }
  .pk-card:hover .pk-ph.v-split .pk-img img { transform: none; }
}
@media (max-width: 759px) {
  .pk-ph.v-date { padding: 16px 18px; }
  .pk-date { font-size: 56px; }
  .v-date .pk-txt { max-width: 88%; }
  .pk-ph.v-split { gap: 14px; padding: 12px; }
  .pk-txt .t { font-size: 16px; }
  .pk-txt .t.is-big { font-size: 42px; }
  .v-type .pk-txt .t { font-size: 24px; }
}
.pk-txt .pk-sale { white-space: normal; flex-wrap: wrap; row-gap: 2px; }
.pk-rel { white-space: nowrap; }

/* =========================================================
   スライダーのカード（2026-11-12 3回目：「わかりやすく、さらに洗練」「スマホででかすぎ」「スマホで切れる」）
   どのカードも同じ形：明るい地、左に画像（約4割）、右に文字。上から 英字の見出し（細い線つき）→ 主役（日付・題名）→ 公演名・説明 → 札
   ここより前の .v-date / .v-split / .v-type / .v-photo の組み方は使わない（PHP がもう出さない）
   ========================================================= */
.pickup { --pkw: clamp(300px, 27vw, 500px); }
.pk-ph.v-b { display: grid; grid-template-columns: 42% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); aspect-ratio: 16 / 9; background: var(--paper); color: var(--ink); }
.pk-ph.v-b::after { display: none; } /* ざらつきは出さない（明るい地がにごるので） */
.pk-pic { position: relative; overflow: hidden; background: var(--night-2); }
.pk-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pk-pic.is-contain img { object-fit: contain; z-index: 1; }
.pk-pic .pk-blur { inset: -15%; filter: blur(18px) brightness(.55); }
.pk-pic .pk-play { top: 50%; left: 50%; right: auto; margin: -22px 0 0 -22px; width: 44px; height: 44px; }
.pk-ph.v-b .pk-txt { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 6px; min-width: 0; overflow: hidden; padding: clamp(14px, 1.3vw, 22px) clamp(14px, 1.4vw, 24px); text-align: left; }
.pk-ph.v-b .pk-txt > * { min-width: 0; }
.pk-ph.v-b .en { display: flex; align-items: center; gap: 10px; font-family: var(--cond); font-weight: 600; text-transform: uppercase; font-size: clamp(12px, .9vw, 14px); line-height: 1; letter-spacing: .16em; color: var(--blue); opacity: 1; }
.pk-ph.v-b .en::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; }
.pk-main { font-family: var(--cond); font-weight: 600; text-transform: uppercase; line-height: .86; letter-spacing: .01em; color: var(--ink); white-space: nowrap; }
.pk-date { font-size: clamp(40px, 3.3vw, 58px); }
.pk-date small { margin-left: .2em; font-size: .3em; letter-spacing: .12em; }
.pk-word { font-size: clamp(44px, 3.8vw, 68px); overflow: hidden; text-overflow: ellipsis; }
.pk-ph.v-b .t { font-size: clamp(14px, 1.08vw, 18px); font-weight: 700; line-height: 1.4; letter-spacing: .02em; color: var(--ink); font-feature-settings: "palt"; word-break: auto-phrase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-ph.v-b .t.is-lead { font-size: clamp(20px, 1.6vw, 28px); line-height: 1.3; }
.pk-ph.v-b .k-mv .t, .pk-ph.v-b.k-mv .t { -webkit-line-clamp: 3; }
.pk-ph.v-b .s { font-size: 12px; line-height: 1.5; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-ph.v-b.k-first .s { white-space: normal; }
.pk-ph.v-b .pk-rel { align-self: flex-start; max-width: 100%; margin-top: 4px; padding: 6px 9px 5px; border: 1px solid currentColor; color: var(--ink); font-family: var(--cond); font-weight: 600; font-size: 13px !important; letter-spacing: .1em; text-transform: uppercase; }
.pk-ph.v-b .pk-go { align-self: flex-start; margin-top: 4px; color: var(--ink); }
.pk-ph.v-b .pk-sale { position: static; align-self: flex-start; max-width: 100%; margin-top: 2px; padding: 5px 8px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pk-ph.v-b .pk-sale span { margin-left: 6px; }
@media (hover: hover) { .pk-card:hover .pk-pic img { transform: scale(1.04); } .pk-card:hover .pk-pic.is-contain img { transform: scale(1.02); } }

/* 矢印：真ん中のカードの左右の端に重ねる（半透明の暗い丸）。下は位置の線だけ */
.pk-side { position: absolute; z-index: 5; top: calc(var(--pkt) + var(--pkw) * 9 / 32); width: 48px; height: 48px; margin-top: -24px; padding: 0; border-radius: 50%; border: 1px solid rgba(241, 240, 236, .5); background: rgba(18, 18, 18, .62); color: #fff; cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .3s, border-color .3s; }
.pk-side:hover { background: rgba(18, 18, 18, .85); border-color: #fff; }
.pk-prev { left: calc(50% - var(--pkw) / 2 - 24px); }
.pk-next { right: calc(50% - var(--pkw) / 2 - 24px); }
.pk-ind { display: flex; justify-content: center; padding: clamp(16px, 1.6vw, 24px) var(--g) 0; }
.pk-ind .snav-track { width: clamp(120px, 12vw, 200px); height: 2px; }

@media (max-width: 759px) {
  .pickup { --pkw: 78vw; --pkt: 20px; }
  .pk-ph.v-b { aspect-ratio: 16 / 9; grid-template-columns: 40% minmax(0, 1fr); }
  .pk-ph.v-b .pk-txt { gap: 4px; padding: 10px 12px; }
  .pk-ph.v-b .en { font-size: 11px; gap: 7px; letter-spacing: .14em; }
  .pk-date { font-size: 30px; }
  .pk-word { font-size: 34px; }
  .pk-ph.v-b .t { font-size: 13px; line-height: 1.38; }
  .pk-ph.v-b .t.is-lead { font-size: 17px; }
  .pk-ph.v-b .s { font-size: 11px; }
  .pk-ph.v-b.k-first .s { display: none; }
  .pk-ph.v-b .pk-rel { font-size: 11px !important; padding: 4px 7px 3px; }
  .pk-ph.v-b .pk-go { font-size: 12px; }
  .pk-ph.v-b .pk-sale { font-size: 10px; padding: 4px 6px; }
  .pk-pic .pk-play { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .pk-side { width: 36px; height: 36px; margin-top: -18px; }
  .pk-prev { left: calc(50% - var(--pkw) / 2 - 18px); }
  .pk-next { right: calc(50% - var(--pkw) / 2 - 18px); }
  .pk-ind { padding-top: 14px; }
}
@media (max-width: 759px) { .pk-ph.v-image { aspect-ratio: 16 / 9; } }
.pk-pic .pk-play { top: auto; left: 10px; bottom: 10px; margin: 0; } /* 再生の印は画像の左下（顔にかからないように） */

/* 写真がメインのカード（2026-11-12「写真あるやつはメインに」）：カードいっぱいに写真、文字は下に白く重ねる。見出し・日付の組み方は明るいカードと同じ */
.pk-ph.v-p { aspect-ratio: 16 / 9; background: var(--night-2); color: #fff; }
.pk-ph.v-p::after { display: none; }
.pk-ph.v-p > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pk-ph.v-p .pk-shade { background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .5) 40%, rgba(0, 0, 0, .05) 72%), linear-gradient(to right, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 60%); }
.pk-ph.v-p .pk-txt { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: clamp(14px, 1.3vw, 22px) clamp(16px, 1.5vw, 26px); text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.pk-ph.v-p .pk-txt > * { max-width: 100%; min-width: 0; }
.pk-ph.v-p .en { display: flex; align-items: center; gap: 10px; width: min(62%, 240px); font-family: var(--cond); font-weight: 600; text-transform: uppercase; font-size: clamp(12px, .9vw, 14px); line-height: 1; letter-spacing: .16em; color: #fff; }
.pk-ph.v-p .en::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .5; }
.pk-ph.v-p .pk-main { color: #fff; }
.pk-ph.v-p .t { font-size: clamp(15px, 1.15vw, 19px); font-weight: 700; line-height: 1.4; letter-spacing: .02em; color: #fff; font-feature-settings: "palt"; word-break: auto-phrase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-ph.v-p .t.is-lead { font-size: clamp(22px, 1.8vw, 30px); line-height: 1.25; }
.pk-ph.v-p .s { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-ph.v-p .pk-sale { position: static; margin-top: 2px; padding: 5px 8px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; text-shadow: none; }
.pk-ph.v-p .pk-sale span { margin-left: 6px; }
.pk-ph.v-p .pk-go { margin-top: 2px; color: #fff; }
.pk-ph.v-p .pk-play { top: clamp(10px, 1vw, 16px); right: clamp(10px, 1vw, 16px); left: auto; bottom: auto; margin: 0; }
@media (hover: hover) { .pk-card:hover .pk-ph.v-p > img { transform: scale(1.04); } }
@media (max-width: 759px) {
  .pk-ph.v-p .pk-txt { gap: 4px; padding: 12px 14px; }
  .pk-ph.v-p .en { font-size: 11px; gap: 7px; }
  .pk-ph.v-p .pk-date { font-size: 30px; }
  .pk-ph.v-p .t { font-size: 13px; line-height: 1.38; }
  .pk-ph.v-p .t.is-lead { font-size: 19px; }
  .pk-ph.v-p .s { font-size: 11px; }
  .pk-ph.v-p.k-first .s { display: none; }
  .pk-ph.v-p .pk-sale { font-size: 10px; padding: 4px 6px; }
  .pk-ph.v-p .pk-play { width: 34px; height: 34px; }
}

/* チェキの種類の料金（2026-11-12）：名前・説明の下に。青は「単独 2,500円　対バン 2,000円」、赤は「1,000円」 */
.g-kind .d { font-size: clamp(15px, 1.3vw, 18px); font-weight: 700; }
.g-kind .g-kprices { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 400; }
.g-kp { display: inline-flex; align-items: baseline; gap: 10px; }
.g-kp .k { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.g-kp .v { font-size: 14px; font-weight: 700; }
.g-kp .v b { font-family: var(--cond); font-weight: 600; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; margin-right: 2px; letter-spacing: .01em; }
.ft .g-kp .v b { font-size: clamp(26px, 2.2vw, 34px); }
.g-kp .w { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); } /* 女性の料金（小さく。数字は大きい料金と同じ書体：2026-11-12「フォントちがくない？」） */
.g-kp .w b { font-family: var(--cond); font-weight: 600; font-size: clamp(19px, 1.6vw, 24px); line-height: 1; letter-spacing: .01em; margin-right: 1px; color: var(--ink-2); }
.g-kp .w { gap: 0; } .g-kp .w .k { margin-right: 6px; } /* 「2,000」と「円」の間をあけない */