/* ==========================================================================
   GHOST NOTE RECORDS — テーマ本体のスタイル（デザインプレビュー v11 から移植。全ページ共通の石と飛沫の背景）
   白80 / 黒15 / シルバー・写真5。依存なし（フォントは assets/fonts に同梱 / SIL OFL）
   スクロール連動はJSが設定するCSS変数で行う：
     --hp  HEROの固定区間の進行 0→1
     --p   各場面が画面を通過する進行 0→1（未設定時 0.5）
     --in  各場面が入ってくる進行 0→1（未設定時 1）
   ========================================================================== */

/* 英字は D-DIN（Datto / SIL Open Font License 1.1。assets/fonts/D-DIN-OFL-1.1.txt 同梱）。太さは Regular と Bold の2種 */
@font-face { font-family: "D-DIN"; src: url("../fonts/d-din-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "D-DIN"; src: url("../fonts/d-din-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --white: #ffffff;
  --ink: #0a0a0b;
  --silver: #d7d9dd;
  --steel: #82868e;
  --pad: clamp(16px, 2.2vw, 36px);
  --font-display: "D-DIN", "DIN Alternate", "Bahnschrift", "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-jp: "D-DIN", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --vh: 1vh;
}
@supports (height: 1svh) { :root { --vh: 1svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font-jp); font-size: 15px; line-height: 1.9;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@supports not (overflow: clip) { body { overflow-x: hidden; } }
main { overflow-x: clip; }

/* 背景（v4）：全セクション共通の1枚。本文・写真の背面、黒い面の前面に置く */
.gnr-bg { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: -1; pointer-events: none; }
.gnr-bg.is-unsupported { display: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; font-weight: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 5px var(--white); }
::selection { background: var(--ink); color: var(--white); }

.gnr-skip { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--ink); color: var(--white); padding: 10px 16px; font: 700 13px/1 var(--font-display); }
.gnr-skip:focus { top: 12px; }

/* ---------- 部品 ---------- */
.gnr-slashes { display: inline-flex; gap: 0.16em; vertical-align: -0.06em; }
.gnr-slashes i { display: block; width: 0.17em; height: 0.86em; background: currentColor; transform: skewX(-16deg); }

.gnr-label { font: 700 12px/1.4 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; }
.gnr-label span { color: var(--steel); margin-left: 0.6em; }

.gnr-pending { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1.6 var(--font-jp); letter-spacing: 0.04em; color: var(--steel); }
.gnr-pending::before { content: "仮"; flex: none; font: 700 12px/1 var(--font-jp); border: 1px dashed currentColor; padding: 3px 4px; }

.gnr-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 36px;
  min-height: 46px; padding: 0 16px; border: 1px solid var(--ink);
  font: 700 12px/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); background: var(--white); transition: color 0.4s var(--ease);
}
.gnr-btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--ink); transform: translateY(102%); transition: transform 0.5s var(--ease); }
.gnr-btn__arrow { font-size: 14px; transition: transform 0.5s var(--ease); }
.gnr-btn--solid { background: var(--ink); color: var(--white); }
.gnr-btn--solid::before { background: var(--white); }
.gnr-btn--light { background: transparent; color: var(--white); border-color: var(--white); }
.gnr-btn--light::before { background: var(--white); }
.gnr-btn.is-pending { border-style: dashed; opacity: 0.6; cursor: not-allowed; }
.gnr-btn.is-pending::before { display: none; }
@media (hover: hover) {
  .gnr-btn:not(.is-pending):hover { color: var(--white); }
  .gnr-btn:not(.is-pending):hover::before { transform: none; }
  .gnr-btn--solid:not(.is-pending):hover, .gnr-btn--light:not(.is-pending):hover { color: var(--ink); }
  .gnr-btn:not(.is-pending):hover .gnr-btn__arrow { transform: translateX(6px); }
}
.gnr-link { display: inline-flex; gap: 8px; align-items: center; font: 700 12px/1 var(--font-display); letter-spacing: 0.16em; padding: 10px 0; border-bottom: 1px solid currentColor; }
.gnr-link.is-pending { color: var(--steel); border-bottom-style: dashed; font: 500 11px/1 var(--font-jp); letter-spacing: 0.04em; }

/* 巨大タイポの共通設定 */
.gnr-split, .gnr-artist__name, .gnr-artist__ghost, .gnr-menu-list__en, .gnr-contact__giant {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -0.012em; line-height: 0.9; text-transform: uppercase; white-space: nowrap;
}

/* マスクによる出現（フェードではなく切り出し） */
.gnr-mask { display: block; overflow: hidden; padding-block: 0.1em; margin-block: -0.1em; }
.gnr-mask > span { display: block; }
.js .gnr-mask > span { transform: translateY(112%); transition: transform 1.1s var(--ease); }
.js .is-in .gnr-mask > span, .js .gnr-mask.is-in > span { transform: none; }
.js .is-in .gnr-mask:nth-child(2) > span { transition-delay: 0.12s; }

.js [data-gnr-reveal] > * { clip-path: inset(0 0 100% 0); transform: translateY(24px); transition: clip-path 1.1s var(--ease), transform 1.1s var(--ease); }
.js [data-gnr-reveal].is-in > * { clip-path: inset(-10% -10% -10% -10%); transform: none; }
.js [data-gnr-reveal="mask"] > * { clip-path: inset(0 100% 0 0); transform: none; transition: clip-path 1.4s var(--ease-io); }
.js [data-gnr-reveal="mask"].is-in > * { clip-path: inset(0 0 0 0); }

/* 左右に離した見出し */
.gnr-split { display: flex; justify-content: space-between; align-items: flex-start; font-size: 10.4vw; }
.gnr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gnr-sp-br { display: none; }
.gnr-split { --drift: 9vw; }
.gnr-split__l { transform: translate3d(calc((var(--p, 0.5) - 0.5) * var(--drift) * -1), 0, 0); }
.gnr-split__r { transform: translate3d(calc((var(--p, 0.5) - 0.5) * var(--drift)), 0, 0); }
@media (max-width: 860px) { .gnr-split { --drift: 2.5vw; } }
.gnr-split--stagger { display: block; }
.gnr-split--stagger > span { display: block; width: max-content; }
.gnr-split--stagger .gnr-split__r { margin: 0.12em 0 0 auto; }
.gnr-split--small { font-size: clamp(22px, 2.5vw, 42px); letter-spacing: 0; }
.gnr-split--small > span { transform: none; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.gnr-header { position: fixed; inset: 14px var(--pad) auto var(--pad); z-index: 100; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.gnr-header > * { pointer-events: auto; }
.gnr-header__logo { display: block; padding: 7px 12px 7px 0; position: relative; z-index: 2; }
/* v8：ロゴは背後のセクションの背景色に合わせて黒／白を切り替える（JSが .is-on-dark を付け外しする）。
   同じSVGを反転表示するだけなので形状・透過・縦横比・サイズは変わらない。合成はしないので、石や飛沫の色は移らない */
.gnr-header__logo img { transition: filter 0.25s linear; }
.gnr-header__logo.is-on-dark img { filter: invert(1); }
.gnr-nav-open .gnr-header__logo.is-on-dark img { filter: none; }   /* スマホのメニューは白い面なので黒に戻す */
.gnr-header__logo img { width: clamp(150px, 46vw, 228px); height: auto; }   /* v7：SVGロゴ。従来ロゴと同じ横幅に合わせる */
/* v9：メニューもロゴと同じく、背後のセクションの背景色に合わせて黒／白を切り替える（JSが .is-on-dark を付け外しする）。
   文字・下線・アイコンはすべて currentColor で描いているので、色を1か所変えるだけで揃って切り替わる */
.gnr-nav { padding: 0 6px; color: var(--ink); transition: color 0.25s linear; }
.gnr-nav.is-on-dark, .gnr-menu.is-on-dark { color: var(--white); }
.gnr-header .is-on-dark:focus-visible, .gnr-header .is-on-dark :focus-visible { outline-color: var(--white); box-shadow: 0 0 0 5px var(--ink); }
.gnr-nav ul { display: flex; }
.gnr-nav a { display: block; padding: 12px 10px 11px; font: 700 12px/1 var(--font-display); letter-spacing: 0.16em; position: relative; }
.gnr-nav a span { display: none; }
.gnr-nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease); }
.gnr-nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) { .gnr-nav a:hover::after { transform: scaleX(1); transform-origin: left; } }
.gnr-menu { display: none; }

@media (max-width: 860px) {
  .gnr-header { inset: 10px var(--pad) auto var(--pad); }
  .gnr-menu { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 0 0 12px; color: var(--ink); transition: color 0.25s linear; font: 700 12px/1 var(--font-display); letter-spacing: 0.16em; }
  .gnr-menu__icon { display: inline-flex; gap: 3px; }
  .gnr-menu__icon i { display: block; width: 2px; height: 13px; background: currentColor; transform: skewX(-16deg); transition: transform 0.45s var(--ease); }
  .gnr-nav-open .gnr-menu__icon i:first-child { transform: translateX(2.5px) rotate(45deg); }
  .gnr-nav-open .gnr-menu__icon i:last-child { transform: translateX(-2.5px) rotate(-45deg); }
  /* 開いたメニューは白い面：文字・ボタンは常に黒 */
  .gnr-nav-open .gnr-menu, .gnr-nav-open .gnr-menu.is-on-dark { color: var(--ink); }
  .gnr-nav, .gnr-nav.is-on-dark { color: var(--ink); background: var(--white); transition: none; }
  .gnr-nav { position: fixed; inset: 0; z-index: 1; display: flex; align-items: flex-end; padding: 90px var(--pad) max(32px, env(safe-area-inset-bottom)); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 0.7s var(--ease-io), visibility 0s 0.7s; }
  .gnr-nav-open .gnr-nav { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.7s var(--ease-io), visibility 0s; }
  .gnr-nav ul { flex-direction: column; width: 100%; }
  .gnr-nav li { border-top: 1px solid var(--ink); }
  .gnr-nav a { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; font: 700 13vw/0.95 var(--font-display); letter-spacing: -0.01em; }
  .gnr-nav a span { display: inline; font: 700 12px/1 var(--font-display); letter-spacing: 0.1em; color: var(--steel); }
  .gnr-nav a::after { display: none; }
  html.gnr-nav-open { overflow: hidden; }
}

/* ==========================================================================
   1. HERO：WHITE SOUND SCULPTURE
   ========================================================================== */
/* 固定した中身を、スクロールする枠で切り抜く（次の場面が下から覆う） */
.gnr-hero { position: relative; height: calc(var(--vh) * 112); }
/* メインビジュアルは2層：奥＝大きなコピー（石と飛沫の背面）、手前＝日本語コピーとボタン（石と飛沫の前面）。
   石と飛沫のcanvasは z-index:-1。奥の層を -2 に置くことで「背景 → コピー → 石・飛沫」の順になる。
   どちらの層も、固定した中身をスクロールする枠で切り抜く（次の場面が下から覆う見え方は従来と同じ） */
.gnr-hero__layer { position: absolute; inset: 0; clip-path: inset(0); pointer-events: none; }
.gnr-hero__layer--back { z-index: -2; }
.gnr-hero__layer--front .gnr-hero__note, .gnr-hero__layer--front .gnr-hero__cta { pointer-events: auto; }
.gnr-hero__ghost { visibility: hidden; }   /* 位置合わせ用：場所だけ確保して表示しない */
.gnr-hero__pin { position: fixed; left: 0; right: 0; top: 0; height: calc(var(--vh) * 100); overflow: hidden; }
/* v5：大きなレーベル名を外し、コピーを主役にして左下へまとめる */
.gnr-hero__body {
  position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(22px, calc(var(--vh) * 5), 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(18px, 2.4vw, 36px) 40px;
  transform: translate3d(0, calc(var(--hp, 0) * var(--vh) * -14), 0); opacity: calc(1 - var(--hp, 0) * 1.5);
}
.gnr-hero__copy { grid-column: 1 / -1; margin-left: -0.03em; font: 700 clamp(44px, 10.2vw, 190px)/0.88 var(--font-display); letter-spacing: -0.015em; text-transform: uppercase; white-space: nowrap; }
.gnr-hero__note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 32px; padding-top: 16px; border-top: 1px solid var(--ink); }
.gnr-hero__jp { font-size: clamp(13px, 1.15vw, 17px); font-weight: 600; letter-spacing: 0.14em; line-height: 1.6; }
.gnr-hero__tags { font: 700 12px/1.5 var(--font-display); letter-spacing: 0.18em; color: var(--steel); }
.gnr-hero__cta { justify-self: end; }
.js .gnr-hero__note, .js .gnr-hero__cta { clip-path: inset(0 0 110% 0); transition: clip-path 0.9s var(--ease) 0.35s; }
.js .is-in .gnr-hero__note, .js .is-in .gnr-hero__cta { clip-path: inset(-10% -10% -10% -10%); }
@media (max-width: 860px) {
  .gnr-hero { height: calc(var(--vh) * 100); }
  .gnr-hero__body { grid-template-columns: minmax(0, 1fr); }
  .gnr-hero__copy { font-size: 13.2vw; }
  .gnr-hero__cta { justify-self: stretch; }
}

/* ==========================================================================
   スライダー共通
   ========================================================================== */
.gnr-slider { position: relative; }
.gnr-slider__track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.gnr-slider__track::-webkit-scrollbar { display: none; }
.gnr-slider:not(.is-multiple) .gnr-slider__track { overflow: visible; }
.gnr-slider.is-multiple .gnr-slider__track { cursor: grab; overflow-y: hidden; touch-action: pan-x pan-y; }   /* 縦方向はスクロール領域にしない（ページの縦スクロールを奪わない） */
.gnr-slider.is-dragging .gnr-slider__track { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.gnr-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }

.gnr-slider__ui { display: flex; align-items: center; justify-content: center; gap: 12px; margin: clamp(28px, 4vw, 56px) var(--pad) 0; }
.gnr-slider__ui[hidden] { display: none; }
.gnr-slider__btn { position: relative; overflow: hidden; isolation: isolate; width: 52px; height: 52px; flex: none; border: 1px solid var(--ink); font-size: 17px; background: var(--white); transition: color 0.3s; }
.gnr-slider__btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--ink); transform: translateY(102%); transition: transform 0.45s var(--ease); }
@media (hover: hover) { .gnr-slider__btn:hover { color: var(--white); } .gnr-slider__btn:hover::before { transform: none; } }
.gnr-slider__count { display: flex; align-items: center; justify-content: center; gap: 0.5em; min-width: 96px; font: 700 18px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.gnr-slider__count > span:last-child { color: var(--steel); }
.gnr-slider__dots { display: flex; gap: 4px; margin-left: 14px; }
.gnr-slider__dot { width: 30px; height: 44px; display: grid; place-items: center; }
.gnr-slider__dot::before { content: ""; width: 100%; height: 1px; background: var(--silver); transition: background 0.3s, height 0.3s; }
.gnr-slider__dot[aria-current="true"]::before { background: var(--ink); height: 3px; }
/* スマホ幅：件数が増えても操作部が画面からはみ出さないよう、ページ線を残りの幅に合わせて縮める（最大は今までと同じ30px）。
   1本が12px未満になるほど件数が多いときは、JSが .is-hidden を付けてページ線を隠す（矢印・カウンタ・スワイプで操作できる） */
@media (max-width: 860px) {
  .gnr-slider__dots { flex: 0 1 auto; min-width: 0; }
  .gnr-slider__dot { flex: 0 1 auto; min-width: 0; }
}
.gnr-slider__dots.is-hidden { display: none; }

/* ==========================================================================
   2. RELEASES
   ========================================================================== */
.gnr-releases {
  --cover: min(28vw, calc(var(--vh) * 46.7));   /* v5：ジャケットは従来の約2/3 */
  --jacket: max(var(--cover), 340px);          /* スライド幅（曲名・ボタンが窮屈にならない最小幅） */
  position: relative;
  padding: calc(var(--vh) * 9) 0 clamp(70px, 9vw, 140px);
}
.gnr-releases__stage { position: relative; isolation: isolate; }
.gnr-releases .gnr-split {
  position: absolute; left: var(--pad); right: var(--pad); top: 0; height: var(--cover);
  z-index: 3; pointer-events: none; color: var(--white); mix-blend-mode: difference;   /* ジャケット上では反転、それ以外は白 */
}
/* v11：同じ文字をもう1枚重ね、文字の内側だけ下の彩度を0にする（＝重なり部分だけモノトーン。ジャケット自体はカラーのまま） */
.gnr-releases .gnr-split--mono { z-index: 4; mix-blend-mode: saturation; }
.gnr-releases .gnr-split__l { margin-top: calc(var(--cover) * 0.06); }
.gnr-releases .gnr-split__r { margin-top: calc(var(--cover) * 0.62); }

.gnr-slider--center .gnr-slider__track { padding-inline: calc(50% - var(--jacket) / 2); gap: 5vw; }
.gnr-slider--center .gnr-slide { flex: 0 0 var(--jacket); }
.gnr-release__cover {
  width: var(--cover); margin-inline: auto; overflow: hidden; background: var(--silver);
  clip-path: inset(calc((1 - var(--in, 1)) * 16%));
  transform: scale(calc(1 - var(--d, 0) * 0.16)); transform-origin: 50% 60%;
}
.gnr-release__cover img { width: 100%; aspect-ratio: 1; object-fit: cover; transform: scale(calc(1.3 - var(--in, 1) * 0.3)); }
.gnr-release__info { width: var(--cover); min-width: min(100%, 300px); margin: 20px auto 0; display: flex; flex-direction: column; align-items: stretch; gap: 22px; opacity: calc(1 - var(--d, 0) * 1.4); transition: opacity 0.3s; }
.gnr-release__artist { margin-top: 14px; font: 700 13px/1 var(--font-display); letter-spacing: 0.26em; }
.gnr-release__title { margin: 8px 0 8px -0.1em; font: 600 clamp(20px, 2vw, 30px)/1.2 var(--font-jp); letter-spacing: 0.02em; font-feature-settings: "palt"; overflow-wrap: anywhere; }
.gnr-release__links { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.gnr-release__links .gnr-btn { width: 100%; }

/* v6：RELEASESは黒い場面（CONTACTと同じ黒。黒い面は背景canvasの背面に敷く） */
.gnr-releases { color: var(--white); }
.gnr-releases::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.gnr-releases .gnr-label span { color: #a4a7ad; }
.gnr-releases .gnr-pending { color: #b4b7bd; }
.gnr-releases .gnr-btn--solid { background: var(--white); color: var(--ink); border-color: var(--white); }
.gnr-releases .gnr-btn--solid::before { background: var(--ink); }
.gnr-releases .gnr-slider__btn { background: transparent; color: var(--white); border-color: var(--white); }
.gnr-releases .gnr-slider__btn::before { background: var(--white); }
.gnr-releases .gnr-slider__count > span:last-child { color: #a4a7ad; }
.gnr-releases .gnr-slider__dot::before { background: rgba(255, 255, 255, 0.4); }
.gnr-releases .gnr-slider__dot[aria-current="true"]::before { background: var(--white); }
.gnr-releases :focus-visible { outline-color: var(--white); box-shadow: 0 0 0 5px var(--ink); }
@media (hover: hover) {
  .gnr-releases .gnr-btn--solid:not(.is-pending):hover { color: var(--white); }
  .gnr-releases .gnr-slider__btn:hover { color: var(--ink); }
}
@media (max-width: 860px) {
  .gnr-releases { --cover: 52vw; --jacket: 76vw; padding-top: calc(var(--vh) * 12); }
  .gnr-releases .gnr-split { font-size: 15vw; display: block; }
  .gnr-releases .gnr-split > span { display: block; width: max-content; }
  .gnr-releases .gnr-split__l { margin-top: -0.42em; }
  .gnr-releases .gnr-split__r { margin: calc(var(--cover) - 1.15em) 0 0 auto; }
  .gnr-release__info { width: auto; }
}

/* ==========================================================================
   3. ARTISTS
   ========================================================================== */
.gnr-artists { position: relative; padding: 0; }   /* v7：上の線は黒いRELEASESの下端に接する。下の余白はABOUT側で150pxに決める */
.gnr-artists .gnr-split { --gap: clamp(20px, 2.4vw, 40px); margin: 0 var(--pad) var(--gap); padding-top: var(--gap); border-top: 1px solid var(--steel); }   /* 線と見出しの間 = 見出しの下の余白。線は黒の直下でも見えるグレー */
.gnr-artist {
  position: relative; padding-inline: var(--pad);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: start;
}
.gnr-artist__info { grid-column: 1 / 4; grid-row: 1; padding-top: 4px; }
.gnr-artist__bio { margin: 22px 0 18px; }
.gnr-artist__bio:not(.gnr-pending) { font-size: 14px; line-height: 2.1; }
.gnr-artist__links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.gnr-artist__photo { grid-column: 4 / -1; grid-row: 1; width: 66.667%; justify-self: end; margin-right: calc(var(--pad) * -1);   /* v5：写真は従来の約2/3 */ overflow: hidden; background: var(--silver); aspect-ratio: 16 / 10; max-height: calc(var(--vh) * 86); clip-path: inset(0 0 0 calc((1 - var(--in, 1)) * 30%)); }
.gnr-artist__photo img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 66%; transform: translate3d(0, calc(-7.6% + (var(--p, 0.5) - 0.5) * -14%), 0); }
.gnr-artist__name {
  grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 0; pointer-events: none;
  font-size: 26vw; margin: -0.2em 0 0 -0.03em; padding-bottom: 0.06em; color: var(--ink);
  transform: translate3d(calc((0.5 - var(--p, 0.5)) * 9vw), 0, 0);
}
/* 写真は名前より手前。写真の中にだけ、同じ位置・同じ大きさの文字を重ねてモノトーンの反転を作る（位置はJSが合わせる） */
.gnr-artist__photo { position: relative; z-index: 1; isolation: isolate; }
.gnr-artist__ghost {
  position: absolute; left: 0; top: 0; display: block; pointer-events: none;
  color: var(--white); mix-blend-mode: difference;
  transform: translate3d(calc((0.5 - var(--p, 0.5)) * 9vw), 0, 0);
}
.gnr-artist__ghost--mono { color: #808080; mix-blend-mode: saturation; }
@media (max-width: 860px) {
  .gnr-artist { grid-template-columns: minmax(0, 1fr); }
  .gnr-artist__photo { grid-column: 1; grid-row: 1; width: auto; justify-self: stretch; margin-right: calc(var(--pad) * -1); margin-left: 38vw; aspect-ratio: 4 / 5; max-height: none; }
  .gnr-artist__photo img { object-position: 42% 50%; }
  .gnr-artist__name { grid-column: 1; grid-row: 2; font-size: 25vw; margin-top: -0.22em; }
  .gnr-artist__info { grid-column: 1; grid-row: 3; padding-top: 26px; }
}

/* v7：矢印ボタンを約50px上へ（PC基準。スマホは詰めすぎない） */
.gnr-artists .gnr-slider__ui { margin-top: calc(clamp(28px, 4vw, 56px) - 50px); }
@media (max-width: 860px) { .gnr-artists .gnr-slider__ui { margin-top: 10px; } }

/* ==========================================================================
   4. LABEL STATEMENT（白）→ 黒い場面
   ========================================================================== */
.gnr-statement { position: relative; padding: 150px var(--pad) clamp(110px, 15vw, 240px); }   /* v7：ARTISTSの矢印下端から線まで150px */
.gnr-statement__label { padding-top: 14px; border-top: 1px solid var(--ink); }

/* 英語コピー4行：行ごとに画面幅いっぱいへ合わせた大きな文字。スクロールに連動して
   「ぼけた状態で入ってくる → 鮮明に読める → そのまま薄くなって抜けていく」（位置・濃さ・ぼけはJSがスクロール位置から決める）。
   ぼかし（filter）は登場の間だけ。読ませる区間と退場は filter: none。
   --fx：横位置（+1/-1=外側、0=定位置）  --fo：不透明度  --fb：ぼけ（0=鮮明、1=最大）
   どれも未設定なら静止して全文が読める（動きを減らす設定・JS無効時） */
.gnr-fly-lines { --travel: 46vw; --blur-max: 8px; margin-inline: calc(var(--pad) * -1 + 10px); font-family: var(--font-display); font-weight: 700; line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; }
.gnr-fly { display: block; font-size: 6vw; text-align: center; }
.gnr-fly > span { display: inline-block; transform: translate3d(calc(var(--fx, 0) * var(--travel)), 0, 0); opacity: var(--fo, 1); }
.gnr-fly > span.is-live { will-change: transform, opacity; }   /* 画面内にある間だけ */
.gnr-fly > span.is-blur { filter: blur(calc(var(--fb, 0) * var(--blur-max))); }   /* 登場の間だけ */
.gnr-statement .gnr-fly:first-child { margin-top: calc(var(--vh) * 16); }
.gnr-fly + .gnr-fly { margin-top: clamp(28px, 5vw, 90px); }

/* 黒い面は背景canvasの背面に敷く（石と飛沫が黒の上にも見える） */
.gnr-dark { position: relative; --open: calc((1 - var(--in, 1)) * 18vw); }
.gnr-dark::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--ink); clip-path: inset(0 var(--open) 0 var(--open)); }
.gnr-dark__panel {
  color: var(--white);
  padding: clamp(110px, 16vw, 260px) var(--pad) clamp(90px, 12vw, 200px);
  clip-path: inset(0 var(--open) 0 var(--open)); /* 黒が左右へ開いて全幅になる */
}
.gnr-dark__body { margin: clamp(70px, 11vw, 180px) 0 0 34vw; max-width: 31em; font-size: clamp(15px, 1.2vw, 17px); line-height: 2.3; color: #ececee; line-break: strict; word-break: auto-phrase; }
.gnr-dark__body p + p { margin-top: 1.5em; }
.gnr-dark :focus-visible { outline-color: var(--white); box-shadow: 0 0 0 5px var(--ink); }

.gnr-visuals { margin-top: calc(150px - clamp(15px, 1.2vw, 17px) * 0.65); }   /* v7：本文最終行の文字の下端から線まで150px（行間の半分を差し引く） */
.gnr-visuals .gnr-label { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.4); }
.gnr-visuals__frame { position: relative; overflow: hidden; margin: 102px 0 14px 17vw; aspect-ratio: 16 / 8; display: grid; place-items: center; background: #151517; }
.gnr-visuals__bars { position: absolute; inset: 0 4%; display: flex; align-items: center; justify-content: space-between; }
.gnr-visuals__bars i { display: block; width: 0.5%; min-width: 2px; height: 70%; background: rgba(255, 255, 255, 0.34); transform: skewX(-16deg) scaleY(0.2); animation: gnr-bar 3s ease-in-out infinite alternate; }
.gnr-visuals__bars i:nth-child(3n) { animation-duration: 2.2s; animation-delay: -0.7s; }
.gnr-visuals__bars i:nth-child(4n+1) { animation-duration: 3.6s; animation-delay: -1.5s; }
.gnr-visuals__bars i:nth-child(5n+2) { animation-duration: 1.9s; animation-delay: -0.3s; }
.gnr-visuals__bars i:nth-child(7n+3) { animation-duration: 4.1s; animation-delay: -2.4s; }
@keyframes gnr-bar { to { transform: skewX(-16deg) scaleY(1); } }
.gnr-visuals__copy { position: relative; font-size: clamp(22px, 3.6vw, 60px); font-weight: 600; letter-spacing: 0.12em; }
.gnr-visuals__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-left: 17vw; font: 700 12px/1.5 var(--font-display); letter-spacing: 0.18em; }
.gnr-dark .gnr-pending { color: #a4a7ad; }

@media (max-width: 860px) {
  .gnr-sp-br { display: inline; }
  .gnr-statement { padding-top: 84px; }
  .gnr-fly-lines { --travel: 26vw; --blur-max: 4px; line-height: 0.88; }   /* スマホは移動量とぼけを控えめに */
  .gnr-statement .gnr-fly:first-child { margin-top: calc(var(--vh) * 9); }
  .gnr-visuals { margin-top: 96px; }
  .gnr-dark__body { margin-left: 0; }
  .gnr-visuals__frame { margin: 62px 0 14px; aspect-ratio: 4 / 3; }
  .gnr-visuals__meta { margin-left: 0; }
  .gnr-dark { --open: calc((1 - var(--in, 1)) * 10vw); }
}

/* ==========================================================================
   5. MUSIC PRODUCTION
   ========================================================================== */
.gnr-production { position: relative; padding: 0 var(--pad) clamp(90px, 12vw, 190px); }   /* v7：上の線は黒いVISUALSの下端に接する */
.gnr-production > .gnr-label { padding-top: 14px; border-top: 1px solid var(--steel); margin-bottom: clamp(30px, 4vw, 64px); }
.gnr-production__lead { margin: clamp(48px, 7vw, 110px) 0 clamp(60px, 8vw, 130px) 34vw; max-width: 34em; font-size: clamp(14px, 1.1vw, 16px); line-height: 2.2; line-break: strict; word-break: auto-phrase; }
.gnr-production__jp { font-size: clamp(20px, 2.2vw, 34px); font-weight: 600; letter-spacing: 0.06em; line-height: 1.5; margin-bottom: 14px; }

.gnr-menu-list { border-bottom: 1px solid var(--ink); }
.gnr-menu-list__row { position: relative; display: grid; grid-template-columns: 6vw minmax(0, 1fr) minmax(0, calc(50vw - var(--pad))); column-gap: 0;   /* v11：説明文の左端 = 画面幅の50% */ align-items: end; padding: clamp(18px, 2vw, 30px) 0 clamp(14px, 1.6vw, 24px); }
.gnr-menu-list__row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: left; }
.js .gnr-menu-list__row::before { transform: scaleX(0); transition: transform 1.3s var(--ease-io); }
.js .gnr-menu-list__row.is-in::before { transform: scaleX(1); }
.js .gnr-menu-list__row > * { clip-path: inset(0 0 100% 0); transform: translateY(40%); transition: clip-path 1s var(--ease) 0.15s, transform 1s var(--ease) 0.15s; }
.js .gnr-menu-list__row.is-in > * { clip-path: inset(-20% -5% -20% -5%); transform: none; }
.gnr-menu-list__no { font: 700 12px/1 var(--font-display); letter-spacing: 0.16em; padding-bottom: 0.9em; }
.gnr-menu-list__en { font-size: 5.07vw; display: flex; align-items: baseline; }   /* v11：従来（7.6vw）の約2/3 */
.gnr-menu-list__row:nth-child(even) .gnr-menu-list__en { padding-left: 7vw; }
.gnr-menu-list__en .gnr-slashes { width: 0; opacity: 0; overflow: hidden; transition: width 0.6s var(--ease), opacity 0.4s, margin 0.6s var(--ease); }
.gnr-menu-list__body { font-size: clamp(13px, 1vw, 15px); line-height: 1.9; padding-bottom: 0.5em; }
.gnr-menu-list__jp { font-size: clamp(15px, 1.25vw, 19px); font-weight: 600; letter-spacing: 0.08em; }
@media (hover: hover) and (min-width: 861px) {
  .gnr-menu-list__row:hover .gnr-menu-list__en .gnr-slashes { width: 0.55em; opacity: 1; margin-right: 0.18em; }
  .gnr-menu-list__row .gnr-menu-list__no { transition: transform 0.6s var(--ease); }
  .gnr-menu-list__row:hover .gnr-menu-list__no { transform: translateX(1.4vw); }
}
.gnr-production__cta { display: flex; justify-content: flex-end; margin-top: clamp(28px, 4vw, 60px); }
@media (max-width: 860px) {
  .gnr-production .gnr-split { font-size: 13.4vw; }
  .gnr-production__lead { margin-left: 0; }
  .gnr-menu-list__row { grid-template-columns: 34px minmax(0, 1fr); row-gap: 10px; align-items: baseline; }
  .gnr-menu-list__en { font-size: 7.8vw; }
  .gnr-menu-list__row:nth-child(even) .gnr-menu-list__en { padding-left: 0; }
  .gnr-menu-list__no { padding-bottom: 0; }
  .gnr-menu-list__body { grid-column: 2; }
  .gnr-production__cta .gnr-btn { width: 100%; }
}

/* ==========================================================================
   6. CONTACT（黒）/ FOOTER
   ========================================================================== */
.gnr-contact { position: relative; overflow: hidden; color: var(--white); padding: 0 var(--pad) clamp(20px, 2vw, 32px); }   /* v10：上の線は黒い面の上端に合わせる */
.gnr-contact::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.gnr-contact > .gnr-label { padding-top: 14px; border-top: 1px solid var(--steel); margin-bottom: clamp(30px, 4vw, 64px); }
.gnr-contact :focus-visible { outline-color: var(--white); box-shadow: 0 0 0 5px var(--ink); }
.gnr-contact__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(24px, 4vw, 72px); align-items: start; margin-top: clamp(70px, 10vw, 170px); }
.gnr-contact__jp { font-size: clamp(14px, 1.3vw, 19px); font-weight: 600; letter-spacing: 0.08em; line-height: 1.8; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.4); }

/* コンタクトフォーム（v9）：黒い面・白文字・細い罫線。
   背景の石や飛沫に文字が負けないよう、フォームの下にほぼ不透明の黒い面を敷く */
.gnr-form { position: relative; padding: clamp(20px, 2.6vw, 40px); background: rgba(10, 10, 11, 0.92); border: 1px solid rgba(255, 255, 255, 0.4); }
.gnr-form__note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: clamp(20px, 2.4vw, 34px); font-size: 12px; line-height: 1.6; color: #b4b7bd; }
.gnr-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.4vw, 34px) clamp(16px, 2vw, 28px); }
.gnr-form__field { min-width: 0; }
.gnr-form__field--wide { grid-column: 1 / -1; }
.gnr-form__label { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; }
.gnr-form__tag { flex: none; padding: 3px 6px 2px; border: 1px solid rgba(255, 255, 255, 0.5); font: 600 10px/1 var(--font-jp); letter-spacing: 0.08em; color: #c4c7cd; }
.gnr-form__tag--req { background: var(--white); border-color: var(--white); color: var(--ink); }
.gnr-form__input {
  display: block; width: 100%; min-height: 52px; margin: 0; padding: 13px 14px;
  background: rgba(255, 255, 255, 0.05); color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 0;
  font: 400 16px/1.6 var(--font-jp); letter-spacing: 0.02em;   /* 16px：iOSで入力時に画面が拡大されない大きさ */
  -webkit-appearance: none; appearance: none; transition: border-color 0.2s, background 0.2s;
}
textarea.gnr-form__input { min-height: 190px; resize: vertical; }
.gnr-form__input:hover { border-color: rgba(255, 255, 255, 0.8); }
.gnr-form__input:focus, .gnr-form__input:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; box-shadow: none; border-color: var(--white); background: rgba(255, 255, 255, 0.1); }
.gnr-form__input[aria-invalid="true"] { border-color: #ff5c8a; border-width: 2px; padding: 12px 13px; }
.gnr-form__input:-webkit-autofill { -webkit-text-fill-color: var(--white); box-shadow: 0 0 0 1000px #1c1c1f inset; caret-color: var(--white); }
/* プライバシーポリシーの枠：高さは「お問い合わせ内容」の入力欄（207px）の約半分。収まらない本文は枠内で縦スクロール */
.gnr-form__policy {
  height: 104px; overflow-y: auto; padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03); color: #e2e4e8; border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 13px; line-height: 1.9; letter-spacing: 0.02em; overflow-wrap: anywhere;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
}
.gnr-form__policy p + p { margin-top: 0.9em; }
.gnr-form__policy:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; box-shadow: none; border-color: var(--white); }
p.gnr-form__label { margin-bottom: 10px; }

/* 同意チェック：ラベル全体がクリック範囲。チェックボックス本体は見た目だけ置き換え、操作と読み上げは標準のまま */
.gnr-form__check { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 44px; cursor: pointer; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.5; }
.gnr-form__check input { position: absolute; left: 0; top: 50%; width: 24px; height: 24px; margin: -12px 0 0; opacity: 0; cursor: pointer; }
.gnr-form__check-box { position: relative; flex: none; width: 24px; height: 24px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.05); transition: background 0.15s, border-color 0.15s; }
.gnr-form__check-box::after { content: ""; position: absolute; left: 8px; top: 3px; width: 6px; height: 12px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) scale(0); transition: transform 0.15s; }
.gnr-form__check input:checked + .gnr-form__check-box { background: var(--white); border-color: var(--white); }
.gnr-form__check input:checked + .gnr-form__check-box::after { transform: rotate(45deg) scale(1); }
.gnr-form__check input:focus-visible + .gnr-form__check-box { outline: 2px solid var(--white); outline-offset: 3px; }
.gnr-form__check input[aria-invalid="true"] + .gnr-form__check-box { border: 2px solid #ff5c8a; }
@media (hover: hover) { .gnr-form__check:hover .gnr-form__check-box { border-color: var(--white); } }
.gnr-form__select { position: relative; }
.gnr-form__select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -7px; border-right: 1px solid var(--white); border-bottom: 1px solid var(--white); transform: rotate(45deg); pointer-events: none; }
.gnr-form__select select { padding-right: 44px; cursor: pointer; }
.gnr-form__select option { color: #0a0a0b; background: #ffffff; }
.gnr-form__error { margin-top: 8px; font-size: 13px; font-weight: 600; line-height: 1.6; color: #ff8fae; }
.gnr-form__error::before { content: "！ "; }
.gnr-form__error[hidden], .gnr-form__status[hidden] { display: none; }
.gnr-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: clamp(26px, 3vw, 44px); }
.gnr-form__submit { min-height: 60px; min-width: min(280px, 100%); background: var(--white); color: var(--ink); border-color: var(--white); font: 700 14px/1 var(--font-jp); letter-spacing: 0.2em; cursor: pointer; }
.gnr-form__submit::before { background: var(--ink); }
.gnr-form__submit:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; box-shadow: 0 0 0 5px var(--ink); }
@media (hover: hover) { .gnr-form__submit:hover { color: var(--white); } }
.gnr-form__status { padding: 12px 14px; border: 1px dashed rgba(255, 255, 255, 0.6); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.5; }
.gnr-contact .gnr-pending { color: #a4a7ad; }
.gnr-contact__giant { display: flex; justify-content: space-between; align-items: baseline; margin-top: clamp(120px, 20vw, 340px); font-size: 14.4vw; }
.gnr-contact__giant > span:first-child { margin-left: -0.04em; transform: translate3d(calc((1 - var(--in, 1)) * -10vw), 0, 0); }
.gnr-contact__giant > span:last-child { transform: translate3d(calc((1 - var(--in, 1)) * 10vw), 0, 0); }
.gnr-contact__giant .gnr-slashes { font-size: 0.52em; align-self: center; opacity: 0.9; }
@media (max-width: 860px) {
  .gnr-contact .gnr-split { font-size: 13.4vw; }
  .gnr-contact__body { grid-template-columns: minmax(0, 1fr); }
  .gnr-form__grid { grid-template-columns: minmax(0, 1fr); }
  .gnr-form__submit { width: 100%; }
}

.gnr-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; background: var(--white); padding: 22px var(--pad) max(22px, env(safe-area-inset-bottom)); }
.gnr-footer__logo img { width: 150px; height: auto; }
.gnr-footer__nav { display: flex; flex-wrap: wrap; gap: 0 22px; font: 700 12px/1 var(--font-display); letter-spacing: 0.16em; }
.gnr-footer__nav a { display: block; padding: 12px 0; }
.gnr-footer__copy { font: 700 12px/1 var(--font-display); letter-spacing: 0.16em; color: var(--steel); }
@media (hover: hover) { .gnr-footer a:hover { text-decoration: underline; text-underline-offset: 4px; } }

/* ==========================================================================
   動きを減らす設定：固定区間・追従・回転を外し、全内容を静止状態で読める
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* transitionは完全に切る（極短時間でも残すと、文字サイズを測って合わせる処理が変化前の値を読んでしまう） */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .gnr-hero { height: calc(var(--vh) * 100); }
  .js .gnr-mask > span, .js [data-gnr-reveal] > *, .js .gnr-menu-list__row > * { transform: none !important; clip-path: none !important; }
  .js .gnr-menu-list__row::before { transform: none !important; }
  .js .gnr-hero__note, .js .gnr-hero__cta { clip-path: none !important; }
  .gnr-hero__body { transform: none; opacity: 1; }
  .gnr-fly > span { transform: none !important; opacity: 1 !important; filter: none !important; }
  .gnr-visuals__bars i:nth-child(odd) { transform: skewX(-16deg) scaleY(0.75); }
  .gnr-visuals__bars i:nth-child(even) { transform: skewX(-16deg) scaleY(0.35); }
}