@charset "UTF-8";

/* 月が綺麗じゃなくたって。Official Website */

:root {
  --colorbg: #05070d;
  --colorbgsoft: #0b1020;
  --colorsurface: #11182a;
  --colortext: #f4f1e8;
  --colortextmuted: #a9afbd;
  --coloraccent: #d7c99b;
  --colorline: rgba(255, 255, 255, 0.14);
  --coloroverlay: rgba(5, 7, 13, 0.72);

  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "BIZ UDMincho", serif;
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "BIZ UDGothic", sans-serif;

  --space-section: clamp(6.5rem, 15vw, 12rem);
  --width-content: 68rem;
  --header-height: 4.25rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* リセット・基礎 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  overscroll-behavior-x: none;
}

/* 地の色は html が持つ。 */
html {
  background-color: var(--colorbg);
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overscroll-behavior-x: none;
  background-color: transparent;
  color: var(--colortext);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

/* 電波の粒子（フィルムグレイン・常時動く） */

body::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: 44;
  pointer-events: none;
  /* 濃さは固定。明滅させない（画面がチカチカする原因になるため） */
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: atmo-static-a 0.42s steps(1, end) infinite;
}

/* 粗いほうの粒。逆向き・別周期で重ねて、柄の反復を消す */
.atmo-noise {
  position: absolute;
  inset: -32%;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23m)'/%3E%3C/svg%3E");
  animation: atmo-static-b 0.56s steps(1, end) infinite;
}

/* 1コマ約60ms（毎秒17コマ）。なめらかに流さず、必ず飛ばす */
@keyframes atmo-static-a {
  0% { transform: translate3d(0, 0, 0); }
  14.3% { transform: translate3d(-37px, 21px, 0); }
  28.6% { transform: translate3d(19px, -44px, 0); }
  42.9% { transform: translate3d(-58px, -13px, 0); }
  57.2% { transform: translate3d(43px, 34px, 0); }
  71.5% { transform: translate3d(-11px, -29px, 0); }
  85.8% { transform: translate3d(31px, 8px, 0); }
}

@keyframes atmo-static-b {
  0% { transform: translate3d(0, 0, 0); }
  16.7% { transform: translate3d(26px, -33px, 0); }
  33.4% { transform: translate3d(-45px, 12px, 0); }
  50.1% { transform: translate3d(9px, 41px, 0); }
  66.8% { transform: translate3d(-22px, -18px, 0); }
  83.5% { transform: translate3d(38px, 27px, 0); }
}

/* 奥の層（site-atmosphere）＝ 本文よりうしろの抽象幾何 */

.site-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--atmo-fade, 1);
  transform: translate3d(0, var(--atmo-shift, 0px), 0);
  /* JSが無い環境でも図形が静かに残るよう、既定は「本文の姿」 */
  --atmo-deep: 1;
}

.atmo-geometry {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 線は拡大縮小しても太さが変わらないようにする */
.atmo-geometry line,
.atmo-geometry path,
.atmo-geometry use {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
}

/* A：点と細線のネットワーク（左上） */
.geo-network {
  opacity: calc(0.12 + var(--atmo-deep, 1) * 0.88);
  transform-origin: 18% 22%;
  animation: geo-network-breathe 15s ease-in-out infinite alternate;
}

.geo-link {
  stroke: rgba(244, 241, 232, 0.075);
  stroke-width: 0.7;
}

.geo-node {
  fill: rgba(244, 241, 232, 0.12);
  stroke: none;
}

/* 息を吸って吐くように、網そのものがゆっくり伸び縮みする */
@keyframes geo-network-breathe {
  0% { transform: translate(-14px, 8px) scale(0.965, 1.02) rotate(-0.8deg); }
  100% { transform: translate(20px, -12px) scale(1.045, 0.97) rotate(1.1deg); }
}

/* B：平行な細線がS字に流れる帯（左下） */
.geo-ribbon {
  opacity: calc(0.4 + var(--atmo-deep, 1) * 0.6);
  transform-origin: 24% 72%;
  animation: geo-ribbon-breathe 11s ease-in-out infinite alternate;
}

/* 内側は別周期。外枠とずれることで、束のうねりが一定に見えない */
.geo-ribbon-inner {
  transform-origin: 24% 72%;
  animation: geo-ribbon-sway 8.5s ease-in-out infinite alternate;
}

.geo-band {
  stroke: rgba(244, 241, 232, 0.055);
  stroke-width: 0.75;
}

/* 束のなかの何本かは、わずかに位相をずらして流す */
.geo-band:nth-of-type(3n) {
  stroke: rgba(145, 160, 195, 0.05);
  animation: geo-band-phase 9.5s ease-in-out infinite alternate;
}

.geo-band:nth-of-type(4n) {
  animation: geo-band-phase 13s ease-in-out infinite alternate-reverse;
}

/* scaleY を動かすと、13pxずつずらした線の間隔そのもの */
@keyframes geo-ribbon-breathe {
  0% { transform: translate(-18px, 10px) scale(1.02, 0.94) rotate(-1.2deg); }
  100% { transform: translate(22px, -14px) scale(0.97, 1.06) rotate(1.4deg); }
}

@keyframes geo-ribbon-sway {
  0% { transform: translate(0, 0) scale(1, 1); }
  100% { transform: translate(-26px, 6px) scale(1.03, 0.98); }
}

@keyframes geo-band-phase {
  0% { transform: translate(0, 0); }
  100% { transform: translate(18px, -5px); }
}

/* C：糸の束がねじれて面になる（中央〜右） */
.geo-organic {
  opacity: calc(0.1 + var(--atmo-deep, 1) * 0.9);
  transform-origin: 68% 48%;
  animation: geo-organic-breathe 13s ease-in-out infinite alternate;
}

.geo-organic-inner {
  transform-origin: 68% 48%;
  animation: geo-organic-twist 9s ease-in-out infinite alternate;
}

.geo-thread {
  stroke: rgba(244, 241, 232, 0.06);
  stroke-width: 0.8;
}

.geo-thread:nth-of-type(3n+1) {
  stroke: rgba(145, 160, 195, 0.045);
  animation: geo-thread-shift 7.5s ease-in-out infinite alternate;
}

.geo-thread:nth-of-type(5n) {
  animation: geo-thread-shift 11.5s ease-in-out infinite alternate-reverse;
}

@keyframes geo-organic-breathe {
  0% { transform: translate(16px, -10px) scale(0.96, 1.05) rotate(1.6deg); }
  100% { transform: translate(-20px, 12px) scale(1.05, 0.95) rotate(-1.8deg); }
}

@keyframes geo-organic-twist {
  0% { transform: skewY(-1.1deg) scale(1.02, 0.98); }
  100% { transform: skewY(1.3deg) scale(0.98, 1.03); }
}

@keyframes geo-thread-shift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-14px, 9px); }
}

/* D：角からひらく扇状の弧（右上） */
.geo-fan {
  opacity: calc(0.45 + var(--atmo-deep, 1) * 0.55);
  transform-origin: 92% 4%;
  animation: geo-fan-breathe 19s ease-in-out infinite alternate;
}

.geo-arc {
  stroke: rgba(244, 241, 232, 0.048);
  stroke-width: 0.7;
}

.geo-arc:nth-of-type(2n) {
  stroke: rgba(145, 160, 195, 0.038);
}

@keyframes geo-fan-breathe {
  0% { transform: rotate(-2.4deg) scale(0.97); }
  100% { transform: rotate(2.2deg) scale(1.05); }
}

/* 製本の罫。新しい線と競り合わないよう、縦2本・横1本まで減らす */
.atmo-rules {
  position: absolute;
  inset: 0;
  opacity: calc(0.34 + var(--atmo-deep, 1) * 0.66);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(rgba(244, 241, 232, 0.035), rgba(244, 241, 232, 0.035)),
    linear-gradient(rgba(215, 201, 155, 0.038), rgba(215, 201, 155, 0.038)),
    linear-gradient(rgba(244, 241, 232, 0.026), rgba(244, 241, 232, 0.026));
  background-size: 1px 100%, 1px 100%, 100% 1px;
  background-position: 13% 0, 86.5% 0, 0 79%;
}

/* 罫の副線。本線から1pxだけずれて刷られている、という見立て */
.atmo-rules::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-image: linear-gradient(rgba(130, 150, 190, 0.022), rgba(130, 150, 190, 0.022));
  background-size: 1px 100%;
  background-position: calc(13% + 1px) 0;
  animation: atmo-misprint 9s steps(1, end) infinite;
}

/* 版のズレ。明るさは変えず、位置だけが一瞬動く */
@keyframes atmo-misprint {
  0%, 88% { transform: translate3d(0, 0, 0); }
  89% { transform: translate3d(1px, 0, 0); }
  90.5% { transform: translate3d(-1px, 1px, 0); }
  92%, 100% { transform: translate3d(0, 0, 0); }
}

/* 粒子の層（site-grain）＝ 本文のうえに掛けるフィルムの粒 */

.site-grain {
  position: fixed;
  inset: 0;
  z-index: 42;
  pointer-events: none;
  overflow: hidden;
}

/* 走査線。濃さは固定で、ゆっくり縦へ流れるだけ */
.atmo-scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.atmo-scan::before {
  content: "";
  position: absolute;
  inset: -8px 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(244, 241, 232, 0) 0px,
    rgba(244, 241, 232, 0) 3px,
    rgba(244, 241, 232, 0.014) 3px,
    rgba(244, 241, 232, 0.014) 4px
  );
  /* 4pxが1周期なので、8px動かすとつなぎ目が出ない */
  animation: atmo-scan-roll 2.4s linear infinite;
}

@keyframes atmo-scan-roll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 8px, 0); }
}

/* スマホ：図形を減らし、線と粒をさらに薄くする */
@media (max-width: 767px) {
  body::before { opacity: 0.042; }
  .atmo-noise { opacity: 0.031; }

  /* 扇はスマホでは出さない（画面が狭く、他の図形と競り合うため） */
  .geo-fan { display: none; }

  .geo-link { stroke: rgba(244, 241, 232, 0.055); }
  .geo-node { fill: rgba(244, 241, 232, 0.09); }
  .geo-band { stroke: rgba(244, 241, 232, 0.042); }
  .geo-band:nth-of-type(3n) { stroke: rgba(145, 160, 195, 0.038); }
  .geo-thread { stroke: rgba(244, 241, 232, 0.045); }
  .geo-thread:nth-of-type(3n+1) { stroke: rgba(145, 160, 195, 0.035); }

}

/* 動きを控える設定では、図形は静かに残したまま全部止める */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .atmo-noise,
  .geo-network,
  .geo-ribbon,
  .geo-ribbon-inner,
  .geo-band,
  .geo-organic,
  .geo-organic-inner,
  .geo-thread,
  .geo-fan,
  .atmo-rules::after,
  .atmo-scan::before {
    animation: none;
  }
  .site-atmosphere {
    transform: none;
  }
}

/* 画面の四隅を落とす薄いビネット */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 43;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 105% at 50% 45%, transparent 62%, rgba(2, 3, 7, 0.5) 100%);
}

::selection {
  background: var(--coloraccent);
  color: var(--colorbg);
}

h1, h2, h3, p, dl, dd, figure, ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--colortext);
  text-decoration: none;
  text-underline-offset: 0.3em;
}

a:hover {
  text-decoration: underline;
  text-decoration-color: var(--coloraccent);
}

:focus-visible {
  outline: 2px solid var(--coloraccent);
  outline-offset: 3px;
  border-radius: 2px;
}

rt {
  font-size: 0.42em;
  letter-spacing: 0.2em;
  color: var(--colortextmuted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.6em 1em;
  background: var(--colorsurface);
  border: 1px solid var(--colorline);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.br-sp {
  display: inline;
}

.external-mark {
  margin-left: 0.35em;
  font-size: 0.8em;
  color: var(--coloraccent);
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}

a:hover .external-mark {
  transform: translate(0.15em, -0.15em);
}

/* 傍点（Safari用のwebkit接頭辞も指定） */
.boten {
  -webkit-text-emphasis: filled sesame var(--coloraccent);
  text-emphasis: filled sesame var(--coloraccent);
}

.tategaki {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* スクロール表示演出（JS有効時のみ） */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 見出し：頁から起き上がるように（3D） */
.js .reveal-mask {
  clip-path: inset(0 0 100% 0);
  transform: perspective(700px) rotateX(38deg) translateY(0.5em);
  transform-origin: bottom center;
  transition: clip-path 1.1s var(--ease-out), transform 1.1s var(--ease-out), opacity 1.1s var(--ease-out);
}

.js .reveal-mask.is-visible {
  clip-path: inset(-0.2em 0 -0.2em 0);
  transform: perspective(700px) rotateX(0deg) translateY(0);
}

/* 序の紙面：本の頁が起きて立つように開く（3D） */
.js .page-sheet {
  transform: perspective(1400px) rotateX(14deg) translateY(34px);
  transform-origin: top center;
}

.js .page-sheet.is-visible {
  transform: perspective(1400px) rotateX(0deg) translateY(0);
}

.js .page-sheet .page-line {
  opacity: 0;
  transform: translateX(14px);
  filter: blur(4px);
  transition:
    opacity 1s var(--ease-out),
    transform 1s var(--ease-out),
    filter 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.35s);
}

.js .page-sheet.is-visible .page-line {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .reveal,
  .js .reveal-mask,
  .js .page-sheet,
  .js .page-sheet .page-line,
  .js .interlude .interlude-line,
  .js .news-list .news-item,
  [data-tilt] {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* HEADER */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-height);
  transition: background-color 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background-color: rgba(5, 7, 13, 0.86);
  border-bottom-color: var(--colorline);
  backdrop-filter: blur(6px);
}

/* JS有効時：常駐するのは右上の「目次」だけ */
.js .site-header,
.js .site-header.is-scrolled {
  background: none;
  border-bottom-color: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.js .header-inner {
  justify-content: flex-end;
}

.js .header-logo,
.js .global-nav {
  display: none;
}

.js .menu-toggle {
  pointer-events: auto;
}

.header-inner {
  max-width: 90rem;
  height: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

.header-logo:hover {
  text-decoration: none;
  color: var(--coloraccent);
}

.header-logo-mark {
  width: 0.55em;
  height: 0.55em;
  border: 1px solid var(--coloraccent);
  border-radius: 50%;
  flex: none;
}

.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--colortext);
  cursor: pointer;
}

/* 一つだけ残る印なので、線と文字を少し引き締めて置く */
.js .menu-toggle {
  gap: 6px;
  width: auto;
  height: auto;
  padding: 0.55rem 0.2rem;
  color: rgba(244, 241, 232, 0.86);
  transition: color 0.4s var(--ease-out);
}

.js .menu-toggle:hover,
.js .menu-toggle:focus-visible {
  color: var(--coloraccent);
}

.menu-toggle-bar {
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s ease;
}

.js .menu-toggle-bar {
  width: 20px;
}

.menu-toggle-label {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}

.js .menu-toggle-label {
  font-family: var(--font-serif);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  /* 字送りぶんだけ右へ寄って見えるのを戻す */
  text-indent: 0.24em;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) {
  transform: translateY(3px) rotate(20deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
  transform: translateY(-3px) rotate(-20deg);
}

/* 控えのナビ。出番はJSが動かないときだけ（下の .no-js を参照） */
.global-nav {
  display: none;
}

.global-nav-list {
  display: grid;
  gap: 0.4rem;
}

.global-nav-list a {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  padding: 0.7em 0.4em;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--colorline);
}

.nav-no {
  font-family: var(--font-serif);
  font-size: 0.8em;
  color: var(--coloraccent);
}

/* JS無効時は、大きな目次が開けないので控えのナビをそのまま出す */
.no-js .menu-toggle {
  display: none;
}

.no-js .global-nav {
  display: block;
}

@media (min-width: 768px) {
  .no-js .global-nav-list {
    display: flex;
    gap: 1.6rem;
  }
  .global-nav-list a {
    padding: 0.4em 0;
    border: 0;
    font-size: 0.85rem;
    gap: 0.5em;
    position: relative;
  }
  .global-nav-list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -0.2em;
    height: 1px;
    background: var(--coloraccent);
    transition: right 0.4s var(--ease-out);
  }
  .global-nav-list a:hover {
    text-decoration: none;
  }
  .global-nav-list a:hover::after {
    right: 0;
  }
}

/* HERO（扉） */

.hero {
  /* 月の直径。ロックアップの枠＝題字の位置基準でもあるの */
  --moon-size: clamp(260px, 58vw, 560px);
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  /* hidden はスクロールコンテナを作り */
  overflow: clip;
}

/* コードで描画する月夜のシーン */

.hero-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* 背景の夜景は固定。マウスに合わせて傾ける演出は行わない */
  transform-style: preserve-3d;
}

.scene-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 72% 30%, rgba(215, 201, 155, 0.06), transparent 60%),
    linear-gradient(to bottom, #03040a 0%, #070b16 55%, #0b1020 72%, #05070d 100%);
}

/* 漂う夜靄 */
.scene-mist {
  position: absolute;
  width: 90vw;
  height: 50vh;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}

.scene-mist1 {
  top: 8%;
  left: -20%;
  background: radial-gradient(ellipse, rgba(17, 24, 42, 0.9), transparent 65%);
  animation: mist-drift1 46s ease-in-out infinite alternate;
}

.scene-mist2 {
  top: 34%;
  right: -25%;
  background: radial-gradient(ellipse, rgba(30, 40, 66, 0.55), transparent 65%);
  animation: mist-drift2 58s ease-in-out infinite alternate;
}

@keyframes mist-drift1 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(7vw, 2vh, 0); }
}

@keyframes mist-drift2 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-6vw, -2vh, 0); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 開幕：シーン全体がゆっくり現れる */
.js .hero-scene {
  animation: fade-in 2.2s ease both;
}

/* 実写キービジュアル使用時のスタイル（コメント解除で有効） */
.hero-visual {
  position: absolute;
  inset: 0;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 42%;
}

/* 月と題字のロックアップ：この枠がそのまま月の大きさ。 */
.hero-moon-lockup {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--moon-size);
  aspect-ratio: 1;
  margin-inline: auto;
  /* 「月＋題字」を最初の主役として立たせ、 楽曲情報はここから十分に離してから見せる */
  margin-block: clamp(1rem, 5svh, 4rem) clamp(3.5rem, 11svh, 9rem);
}

/* 題字（正式ロゴ・月の中心に静かに浮かぶ） */
.hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2; /* 月より必ず前 */
  display: grid;
  place-items: center;
  width: 100%;
  margin: 0;
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 月相が進むと明部が月の左側へ広がり、白いロゴと明部が重なる。 */
.hero-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6% -8%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(5, 7, 13, 0.62) 0%,
    rgba(5, 7, 13, 0.44) 46%,
    rgba(5, 7, 13, 0.16) 68%,
    transparent 82%
  );
  pointer-events: none;
}

.hero-logo {
  /* 月の直径に対する比率。月と一緒に拡縮する。 */
  width: 67%;
  height: auto;
  filter: none;
}

/* 修正2：題字ロゴが月の中に静かに浮かび上がる */
/* 登場のフェードは内側の画像が担当する。 */
.js .hero-logo {
  opacity: 0;
}

.js .hero-logo.is-logo-in {
  animation: logo-emerge 2s var(--ease-out) both;
}

@keyframes logo-emerge {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* 暈も同じ呼吸で現れる（ロゴだけ先に浮くと縁が目立つため） */
.js .hero-title::before {
  opacity: 0;
}

.js .hero-title.is-logo-in::before {
  animation: scrim-emerge 2s var(--ease-out) both;
}

@keyframes scrim-emerge {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero-logo,
  .js .hero-title::before {
    opacity: 1;
    animation: none;
  }
}

/* 扉の隅の一文字 */
.hero-frame-word {
  position: absolute;
  z-index: 1;
  top: calc(var(--header-height) + 1.6rem);
  left: 1.5rem;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  letter-spacing: 0.5em;
  color: var(--colortextmuted);
  writing-mode: vertical-rl;
  border-right: 1px solid var(--colorline);
  padding-right: 0.7em;
}

.js .hero-frame-word {
  animation: fade-in 1.5s ease 1.8s both;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 中央に積む構成：題字 → 楽曲名 → ジャケット → */
.hero-stack {
  position: relative;
  z-index: 2;
  /* 画面幅に固定する。 */
  width: 100%;
  max-width: 100%;
  /* flexアイテムの min-width:auto は最小コンテンツ幅まで膨らむため明示的 */
  min-width: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.6rem, 5svh, 3rem);
  padding: calc(var(--header-height) + 4svh) 1.5rem clamp(4rem, 9svh, 6rem);
  text-align: center;
}

.hero-info {
  /* 幅を親の内容領域に固定する。 */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--colortextmuted);
  text-transform: uppercase;
}

.hero-single {
  margin-top: 0.8rem;
  font-feature-settings: "palt";
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 4vw, 2rem);
  letter-spacing: 0.1em;
  color: var(--coloraccent);
}

.hero-single rt {
  color: var(--coloraccent);
  opacity: 0.75;
}

.hero-cta {
  margin-top: 1.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  max-width: 30rem;
}

.btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  min-height: 3.25rem;
  padding: 0.65em 2.2em;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  border: 1px solid var(--colorline);
  background: rgba(5, 7, 13, 0.4);
  overflow: hidden;
  transition: border-color 0.3s ease, color 0.35s ease;
}

.btn:hover {
  text-decoration: none;
}

/* 金の光が満ちるように塗り上がるホバー */
a.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--coloraccent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
  z-index: 0;
}

a.btn:hover::before,
a.btn:focus-visible::before {
  transform: scaleX(1);
}

a.btn:hover,
a.btn:focus-visible {
  color: var(--colorbg);
  border-color: var(--coloraccent);
}

.btn > * {
  position: relative;
  z-index: 1;
}

.btn-primary {
  border-color: var(--coloraccent);
  color: var(--coloraccent);
}

.btn.is-pending {
  border-color: rgba(215, 201, 155, 0.35);
  color: var(--colortextmuted);
  cursor: default;
}

.btn-note {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
}

.hero-scroll {
  position: absolute;
  right: 1.4rem;
  bottom: 1.6rem;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-serif);
  font-size: 0.68rem;
  color: var(--colortextmuted);
}

.hero-scroll > span:not(.hero-scroll-line) {
  writing-mode: vertical-rl;
  letter-spacing: 0.4em;
}

.js .hero-scroll {
  animation: fade-in 1.5s ease 2.4s both;
}

.hero-scroll:hover {
  color: var(--coloraccent);
  text-decoration: none;
}

.hero-scroll-line {
  position: relative;
  width: 1px;
  height: 3.2rem;
  background: var(--colorline);
  overflow: hidden;
}

/* 罫線を光が伝い落ちる */
.hero-scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 100%;
  height: 40%;
  background: var(--coloraccent);
  animation: line-drop 2.6s ease-in-out infinite;
}

@keyframes line-drop {
  0%   { top: -40%; }
  60%, 100% { top: 105%; }
}

/* スマートフォン最適化 */
@media (max-width: 767px) {
  /* 月を左に置き、右側の題字と向かい合う構図 */
  .scene-moon {
    top: 16%;
    right: auto;
    left: 9%;
    width: clamp(96px, 30vw, 150px);
  }
  .scene-path {
    right: auto;
    left: calc(9% + clamp(48px, 15vw, 75px));
    transform: translateX(-50%);
  }
  .scene-moon-reflect {
    right: auto;
    left: 9%;
    width: clamp(96px, 30vw, 150px);
  }
  @keyframes path-shimmer {
    0%, 100% { opacity: 0.45; transform: translateX(-50%) scaleX(1); }
    50%      { opacity: 1; transform: translateX(-50%) scaleX(1.15); }
  }
  .hero-content {
    padding-bottom: 5.5rem;
  }
  .hero-scroll {
    display: none;
  }
}

/* さらに小さい幅ではCTAを全幅 */
@media (max-width: 479px) {
  .hero-cta {
    max-width: none;
  }
  .hero-cta .btn {
    flex: 1 1 100%;
    letter-spacing: 0.14em;
  }
}

@media (min-width: 1024px) {
  .hero-content {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .hero-frame-word {
    left: 2.4rem;
  }
}

/* 共通セクション・章立て */

.section {
  position: relative;
  padding: var(--space-section) 1.5rem;
}

.section-inner {
  position: relative;
  max-width: var(--width-content);
  margin: 0 auto;
}

.chapter-mark {
  display: flex;
  align-items: flex-start;
  gap: 1.1em;
  margin-bottom: 1.2rem;
}

.chapter-no {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  letter-spacing: 0.4em;
  color: var(--coloraccent);
  writing-mode: vertical-rl;
  border-right: 1px solid var(--colorline);
  padding-right: 0.55em;
  min-height: 3.2em;
}

/* 大字のあとに続く和語（既刊・附録）。柱の中で数字と地続きに
   読めてしまわないよう、一字ぶんの間をあけて置く */
.chapter-no-word {
  margin-inline-start: 0.9em;
}

.chapter-en {
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--colortextmuted);
  padding-top: 0.4em;
}

.section-heading {
  margin-top: 0.6rem;
  font-family: var(--font-serif);
  font-feature-settings: "palt";
  font-weight: 600;
  font-size: clamp(1.6rem, 4.8vw, 2.7rem);
  letter-spacing: 0.1em;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .chapter-mark {
    position: absolute;
    left: -4.5rem;
    top: 0.3rem;
    flex-direction: column;
    gap: 1.4em;
    margin: 0;
  }
  .chapter-en {
    writing-mode: vertical-rl;
    padding: 0;
  }
  .section-inner {
    padding-left: 2rem;
  }
}

/* 幕間（章と章のあいだの一行） */

.interlude {
  padding: clamp(5rem, 12vw, 9rem) 1.5rem;
  display: flex;
  justify-content: center;
}

/* 幕間：掛け軸が下りてくるように振れて現れる（3D） */
.js .interlude:not(.ending-copy) .interlude-line {
  opacity: 0;
  transform: perspective(800px) rotateX(-58deg);
  transform-origin: top center;
  transition: transform 1.5s var(--ease-out), opacity 1.2s ease;
}

.js .interlude:not(.ending-copy).is-visible .interlude-line {
  opacity: 1;
  transform: perspective(800px) rotateX(0deg);
}

.interlude-line {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 3vw, 1.4rem);
  letter-spacing: 0.3em;
  color: var(--colortextmuted);
  padding: 2.6em 0;
}

.interlude-line::before,
.interlude-line::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 1.8em;
  background: var(--colorline);
}

.interlude-line::before { top: 0; }
.interlude-line::after  { bottom: 0; }

/* CONCEPT（序・小説の紙面） */

.concept {
  background:
    linear-gradient(to bottom, var(--colorbg), var(--colorbgsoft) 55%, var(--colorbg));
}

.page-sheet {
  position: relative;
  margin: 2.8rem auto 0;
  max-width: 46rem;
  padding: clamp(2.2rem, 7vw, 3.6rem) clamp(1.4rem, 5vw, 3rem) clamp(2.6rem, 7vw, 3.6rem);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%),
    #efe8d7;
  color: #171b28;
  border: 1px solid rgba(23, 27, 40, 0.2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

/* 版面の内枠 */
.page-sheet::before {
  content: "";
  position: absolute;
  inset: 0.7rem;
  border: 1px solid rgba(23, 27, 40, 0.14);
  pointer-events: none;
}

/* ノンブル（ページ番号） */
.page-nombre {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: rgba(23, 27, 40, 0.55);
}

.page-body {
  display: flex;
  justify-content: center;
  height: clamp(17rem, 56svh, 25rem);
  font-family: var(--font-serif);
  font-size: clamp(0.98rem, 2.5vw, 1.15rem);
  line-height: 2.5;
  letter-spacing: 0.13em;
  margin-top: 1rem;
}

.page-line + .page-line {
  margin-right: 0.4em;
}

.page-chapter {
  font-size: 1.15em;
  letter-spacing: 0.6em;
  color: #8a7645;
}

.page-sheet .boten {
  -webkit-text-emphasis-color: #8a7645;
  text-emphasis-color: #8a7645;
}

/* RELEASE（第一章） */

.release-grid {
  margin-top: 3rem;
  display: grid;
  gap: 2.5rem;
}

.release-jacket {
  max-width: 26rem;
}

.release-jacket img {
  border: 1px solid var(--colorline);
  transition: transform 0.8s var(--ease-out), box-shadow 0.8s var(--ease-out);
}

.release-jacket:hover img {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.release-label {
  font-size: 0.75rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--colortextmuted);
}

.release-title {
  margin-top: 0.5rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  letter-spacing: 0.08em;
}

.release-date {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--colortextmuted);
}

/* 縦書きエンドロール式クレジット（右から読む） */
.release-credit {
  margin-top: 2.4rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: clamp(15rem, 38svh, 18rem);
  font-feature-settings: "palt";
}

.release-credit > div {
  display: block;
  padding: 0 clamp(0.7rem, 2.4vw, 1.2rem);
}

.release-credit > div:not(:last-child) {
  border-left: 1px solid var(--colorline);
}

.release-credit dt {
  display: block;
  margin-block-end: 1em;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  color: var(--coloraccent);
}

.release-credit dd {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  letter-spacing: 0.1em;
  line-height: 1;
}

.release-actions {
  margin-top: 2rem;
}

.release-streaming-note {
  font-size: 0.9rem;
  color: var(--colortextmuted);
}

.release-links {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}

@media (min-width: 768px) {
  .release-grid {
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

/* MUSIC VIDEO（第二章） */

.video-player {
  position: relative;
  margin-top: 3rem;
  aspect-ratio: 16 / 9;
  background: var(--colorbg);
  border: 1px solid var(--colorline);
  overflow: hidden;
}

.video-player .video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transition: transform 6s ease, opacity 0.6s ease;
}

.video-player:hover .video-thumb {
  transform: scale(1.03);
  opacity: 0.7;
}

.video-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.9rem, 2.4vw, 1.1rem);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--colortext);
  background: rgba(5, 7, 13, 0.35);
}

.video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background: rgba(5, 7, 13, 0.3);
  border: 0;
  color: var(--colortext);
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  cursor: pointer;
}

.video-play-circle {
  width: 4.2rem;
  height: 4.2rem;
  border: 1px solid var(--coloraccent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.4s var(--ease-out);
}

.video-play:hover .video-play-circle,
.video-play:focus-visible .video-play-circle {
  background: rgba(215, 201, 155, 0.15);
  transform: scale(1.08);
}

.video-play-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.9rem;
  border-color: transparent transparent transparent var(--coloraccent);
  margin-left: 0.2rem;
}

.video-alt-link {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--colortextmuted);
}

.video-alt-link a {
  color: var(--colortext);
  border-bottom: 1px solid var(--colorline);
}

/* NEWS（第三章・目次風） */

.news-list {
  margin-top: 2.5rem;
  font-feature-settings: "palt";
}

.js .news-list .news-item {
  opacity: 0;
  transform: perspective(700px) rotateX(24deg) translateY(14px);
  transform-origin: top center;
  transition: transform 0.9s var(--ease-out), opacity 0.9s ease;
}

.js .news-list.is-visible .news-item {
  opacity: 1;
  transform: perspective(700px) rotateX(0deg) translateY(0);
}

.js .news-list.is-visible .news-item:nth-child(1) { transition-delay: 0.05s; }
.js .news-list.is-visible .news-item:nth-child(2) { transition-delay: 0.17s; }
.js .news-list.is-visible .news-item:nth-child(3) { transition-delay: 0.29s; }
.js .news-list.is-visible .news-item:nth-child(4) { transition-delay: 0.41s; }
.js .news-list.is-visible .news-item:nth-child(5) { transition-delay: 0.53s; }
.js .news-list.is-visible .news-item:nth-child(n+6) { transition-delay: 0.65s; }

.news-item {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1.15rem 0.2rem;
  transition: transform 0.4s var(--ease-out);
}

.news-item:hover {
  transform: translateX(6px);
}

.news-category {
  flex: none;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coloraccent);
  min-width: 4.6em;
}

.news-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.6;
  font-feature-settings: "palt";
}

.news-leader {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
  transform: translateY(-0.3em);
}

.news-date {
  flex: none;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--colortextmuted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .news-item {
    flex-wrap: wrap;
    row-gap: 0.3rem;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.22);
  }
  .news-leader {
    display: none;
  }
  .news-title {
    width: 100%;
    order: 3;
  }
  .news-date {
    order: 2;
    margin-left: auto;
  }
}

/* PROFILE（第四章） */

.profile-grid {
  margin-top: 3rem;
  display: grid;
  gap: 2.5rem;
}

.profile-visual {
  max-width: 22rem;
}

.profile-visual img {
  border: 1px solid var(--colorline);
}

.profile-name {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  letter-spacing: 0.1em;
  line-height: 1.6;
}

.profile-name-en {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--colortextmuted);
  text-transform: uppercase;
}

.profile-body {
  margin-top: 1.6rem;
  max-width: 34rem;
}

.profile-links {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

.profile-links a {
  font-size: 0.9rem;
  border-bottom: 1px solid var(--colorline);
  padding-bottom: 0.3em;
}

.profile-links a:hover {
  border-bottom-color: var(--coloraccent);
  color: var(--coloraccent);
  text-decoration: none;
}

@media (min-width: 768px) {
  .profile-grid {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

/* OFFICIAL LINKS（附録） */

.links-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  direction: rtl; /* 右の柱から順に読む */
  justify-content: center;
  gap: clamp(0.6rem, 2.4vw, 1.8rem);
  width: 100%;
  max-width: 56rem;
  margin: 3rem auto 0;
  padding-top: 2.2rem;
  border-top: 1px solid var(--colorline);
}

.links-list > li {
  direction: ltr;
  display: block;
  min-width: 0;
}

.links-list a {
  display: block;
  height: clamp(15rem, 40svh, 20.5rem);
  margin: 0 auto;
  padding: 0.9rem 0.35rem 1.1rem;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-serif);
  text-align: start;
  border-right: 1px solid var(--colorline);
  transition: color 0.35s ease, border-color 0.35s ease;
}

.links-list a:hover,
.links-list a:focus-visible {
  text-decoration: none;
  color: var(--coloraccent);
  border-right-color: var(--coloraccent);
}

.links-list a > span:first-of-type {
  font-size: clamp(0.95rem, 2.6vw, 1.12rem);
  letter-spacing: 0.16em;
}

/* 欧文の柱（X / YouTube）は寝かせずに正立で組む */
.links-list a [lang="en"] {
  text-orientation: upright;
  letter-spacing: 0.1em;
}

.links-note {
  display: block;
  margin-block-start: 1.2em;
  font-size: clamp(0.68rem, 2vw, 0.76rem);
  letter-spacing: 0.14em;
  color: var(--colortextmuted);
}

.links-list a .external-mark {
  display: block;
  margin: 1.1em 0 0;
  font-size: 0.72em;
}

/* FOOTER（裏表紙） */

.site-footer {
  border-top: 1px solid var(--colorline);
  padding: 4.5rem 1.5rem 3rem;
  background: var(--colorbg);
}

.footer-inner {
  max-width: var(--width-content);
  margin: 0 auto;
  text-align: center;
}

.back-to-top {
  display: inline-block;
  /* 上にあった名前と文字リンクを外したので、余白は節の padding に任せる */
  margin-top: 0;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--colortextmuted);
  padding: 0.5em 1.2em;
  border: 1px solid var(--colorline);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.back-to-top:hover {
  color: var(--coloraccent);
  border-color: var(--coloraccent);
  text-decoration: none;
}

/* 連絡先。目次の下に置いてあるものと同じ（変えるときは両方） */
.footer-contact {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  margin: clamp(2rem, 5vh, 2.8rem) 0 0;
}

.footer-contact-label {
  font-family: var(--font-sans);
  font-size: 0.56rem;
  letter-spacing: 0.34em;
  color: rgba(215, 201, 155, 0.7);
  text-transform: uppercase;
  /* 字送りぶん右へ寄って見えるのを戻す */
  text-indent: 0.34em;
}

.footer-contact-mail {
  position: relative;
  font-family: var(--font-serif);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: rgba(244, 241, 232, 0.82);
  text-decoration: none;
  word-break: break-all;
  transition: color 0.35s var(--ease-out);
}

.footer-contact-mail::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -0.3em;
  height: 1px;
  background: rgba(215, 201, 155, 0.8);
  transition: left 0.45s var(--ease-out), right 0.45s var(--ease-out);
}

.footer-contact-mail:hover,
.footer-contact-mail:focus-visible {
  color: var(--coloraccent);
  text-decoration: none;
}

.footer-contact-mail:hover::after,
.footer-contact-mail:focus-visible::after {
  left: 0;
  right: 0;
}

.footer-copyright {
  margin-top: 1.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--colortextmuted);
}

@media (prefers-reduced-motion: reduce) {
  .footer-contact-mail,
  .footer-contact-mail::after,
  .book-menu-contact-mail,
  .book-menu-contact-mail::after {
    transition: none;
  }
}

/* 頁数表示（JSで生成・装飾） */

.page-counter {
  position: fixed;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 46;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--colortextmuted);
  writing-mode: vertical-rl;
  pointer-events: none;
  opacity: 0.85;
}

@media (max-width: 767px) {
  .page-counter {
    display: none;
  }
}

/* 最小幅の調整 */

@media (max-width: 374px) {
  .btn {
    width: 100%;
  }
}

/* セクション背景の巨大タイポグラフィ（スクロール連動） */

.bg-word {
  position: absolute;
  top: 0.5em;
  right: -0.06em;
  z-index: 0;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(4.5rem, 15vw, 12rem);
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 241, 232, 0.08);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.section {
  overflow: hidden;
}

.section-inner {
  z-index: 1;
}

/* 帯（流れるタイポグラフィ） */

.ticker {
  transform: perspective(900px) rotateX(6deg);
  overflow: hidden;
  border-top: 1px solid var(--colorline);
  border-bottom: 1px solid var(--colorline);
  padding: 1.1rem 0;
  background: var(--colorbgsoft);
}

.ticker-track {
  display: inline-block;
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: 0.34em;
  color: rgba(215, 201, 155, 0.75);
  animation: marquee 46s linear infinite;
}

/* カーソルの月（PC・ポインタ精度が高い環境のみJSが有効化） */

.cursor-moon {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--coloraccent);
  box-shadow: 0 0 14px rgba(215, 201, 155, 0.55);
  pointer-events: none;
  opacity: 0;
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out),
              background-color 0.35s ease, opacity 0.4s ease;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

.cursor-enabled .cursor-moon {
  opacity: 0.9;
}

.cursor-moon.is-active {
  width: 44px;
  height: 44px;
  background: rgba(215, 201, 155, 0.12);
  box-shadow: inset 0 0 0 1px var(--coloraccent);
}

/* カーソル演出中も標準カーソルは消さない（操作性優先） */

/* 3Dチルト（PCのみJSが有効化）と光の反射 */

[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.6s var(--ease-out);
}

.release-jacket,
.profile-visual {
  position: relative;
  overflow: hidden;
}

.tilt-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 50%),
    rgba(244, 241, 232, 0.16),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  mix-blend-mode: screen;
}

[data-tilt]:hover .tilt-glare {
  opacity: 1;
}

/* 栞（読書の進みに合わせて右端を下りてくる金のリボン） */

.bookmark-ribbon {
  position: fixed;
  top: 0;
  /* ヘッダーの「目次」に掛からないよう、その右隣に垂らす */
  right: 0.4rem;
  z-index: 48;
  width: 9px;
  height: 0;
  background: linear-gradient(to bottom, rgba(215, 201, 155, 0) 0%, rgba(215, 201, 155, 0.65) 12%, rgba(215, 201, 155, 0.85) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
  box-shadow: 0 0 12px rgba(215, 201, 155, 0.25);
  pointer-events: none;
  opacity: 0.9;
}

.bookmark-ribbon::after {
  content: "栞";
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 0.6rem;
  color: rgba(5, 7, 13, 0.85);
  writing-mode: vertical-rl;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.bookmark-ribbon.is-deep::after {
  opacity: 1;
}

@media (max-width: 767px) {
  .bookmark-ribbon {
    width: 6px;
    /* 帯が細いぶん、同じ間隔になるよう内側へ */
    right: 0.55rem;
  }
  .bookmark-ribbon::after {
    display: none;
  }
}

/* 原稿用紙の罫（序と第五章の背景） */

.concept::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to left,
    rgba(244, 241, 232, 0.045) 0 1px,
    transparent 1px 2.6rem
  );
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0, 0, 0, 0.8), transparent 85%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0, 0, 0, 0.8), transparent 85%);
  pointer-events: none;
}

/* 重ねた原稿の紙端（映像プレイヤー・奥付） */

.video-player {
  position: relative;
}

.video-player::before,
.video-player::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(244, 241, 232, 0.07);
  pointer-events: none;
  z-index: -1;
}

.video-player::before {
  transform: translate(7px, 7px);
}

.video-player::after {
  transform: translate(14px, 14px);
  border-color: rgba(244, 241, 232, 0.04);
}

.scene-moon {
}

.scene-mist1 {
}

.scene-mist2 {
}

/* 題字の視差は月本体（.moon-body）と同じ量にする。 */
.hero-title {
}

/* 章の面がページのように傾きながら通過する（JSが角度を供給） */

.js .section-inner {
  will-change: transform;
}

/* 漂う月の欠片（浮遊する球体・奥行き別にマウスへ反応） */

.scene-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #f2ecd8 0%, #c9bd9a 55%, #6f6749 100%);
  box-shadow: 0 0 24px rgba(215, 201, 155, 0.28);
}

.orb1 {
  top: 62%;
  left: 12%;
  width: 52px;
  height: 52px;
  animation: orb-float 11s ease-in-out infinite;
}

.orb2 {
  top: 24%;
  left: 30%;
  width: 20px;
  height: 20px;
  opacity: 0.85;
  animation: orb-float 14s ease-in-out 1.2s infinite;
}

.orb3 {
  top: 44%;
  left: 48%;
  width: 12px;
  height: 12px;
  opacity: 0.7;
  filter: blur(1px);
  animation: orb-float 9s ease-in-out 0.6s infinite;
}

.orb4 {
  top: 12%;
  left: 62%;
  width: 30px;
  height: 30px;
  opacity: 0.55;
  filter: blur(2px);
  animation: orb-float 16s ease-in-out 2s infinite;
}

.orb5 {
  top: 74%;
  left: 74%;
  width: 16px;
  height: 16px;
  opacity: 0.6;
  filter: blur(1px);
  animation: orb-float 12s ease-in-out 0.9s infinite;
}

@keyframes orb-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(6deg); }
}

@media (max-width: 767px) {
  .orb1 { left: 6%; top: 56%; width: 38px; height: 38px; }
  .orb4 { display: none; }
}

/* 見出しの二重打ち（塗りの和文＋輪郭の欧文が背後で重なる） */

.section-heading {
  position: relative;
  z-index: 1;
}

/* 画面に出さず読み上げにだけ残す見出しは、上の position を打ち消す */
.section-heading.visually-hidden {
  position: absolute;
}

.section-heading[data-echo]::before {
  content: attr(data-echo);
  position: absolute;
  top: -0.72em;
  left: -0.1em;
  z-index: -1;
  font-size: 1.7em;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 241, 232, 0.12);
  pointer-events: none;
}

@media (max-width: 767px) {
  .section-heading[data-echo]::before {
    font-size: 1.3em;
    top: -0.6em;
  }
}

/* 結び（はい／いいえ） */

.closing {
  text-align: center;
}

.closing-inner {
  padding-left: 0;
}

.closing-heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 5vw, 2.6rem);
  letter-spacing: 0.12em;
  line-height: 1.9;
}

.closing-choice {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.choice-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  width: clamp(9rem, 30vw, 12rem);
  aspect-ratio: 1;
  border: 1px solid var(--colorline);
  font-family: var(--font-serif);
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  overflow: hidden;
  transition: border-color 0.35s ease, color 0.35s ease, transform 0.5s var(--ease-out);
}

.choice-btn:hover {
  text-decoration: none;
  transform: translateY(-6px);
}

.choice-en {
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  color: var(--colortextmuted);
}

.choice-yes {
  border-color: var(--coloraccent);
  color: var(--coloraccent);
}

.choice-yes::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--coloraccent);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease-out);
  z-index: 0;
}

.choice-yes:hover::before,
.choice-yes:focus-visible::before {
  transform: translateY(0);
}

.choice-yes:hover,
.choice-yes:focus-visible {
  color: var(--colorbg);
}

.choice-yes:hover .choice-en,
.choice-yes:focus-visible .choice-en {
  color: rgba(5, 7, 13, 0.7);
}

.choice-btn > * {
  position: relative;
  z-index: 1;
}

.choice-no:hover {
  border-color: rgba(244, 241, 232, 0.4);
  color: var(--colortextmuted);
}

.closing-note {
  margin-top: 2rem;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--colortextmuted);
}

/* ロールするテキスト（ナビ等のホバーで文字が縦に転がる） */

.roll-box {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.roll-inner {
  display: block;
  transition: transform 0.45s var(--ease-out);
}

.roll-line {
  display: block;
  white-space: nowrap;
}

/* 複製した2行目は箱の真下（枠外）へ逃がす。 */
.roll-line + .roll-line {
  position: absolute;
  top: 100%;
  left: 0;
  color: var(--coloraccent);
}

a:hover .roll-inner,
a:focus-visible .roll-inner {
  transform: translateY(-100%);
}

/* 章番号（一・二…）とラベルの間の余白。 */
.roll-line .nav-no {
  margin-inline-end: 0.5em;
}

/* 通し番号（附録リンク・第五章の導線） */

.links-list {
  counter-reset: linkindex;
}

.links-list > li {
  counter-increment: linkindex;
}

.links-list > li::before {
  content: counter(linkindex, decimal-leading-zero);
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--font-serif);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-align: center;
  color: rgba(215, 201, 155, 0.65);
}

/* 紙の頁（明るいセクション — 夜の頁との反転） */

.section--paper {
  background: #efe8d7;
  color: #14182a;
}

.section--paper a {
  color: #14182a;
}

.section--paper .chapter-no {
  color: #8a7645;
  border-right-color: rgba(20, 24, 42, 0.25);
}

.section--paper .chapter-en {
  color: rgba(20, 24, 42, 0.55);
}

.section--paper .section-heading[data-echo]::before {
  -webkit-text-stroke-color: rgba(20, 24, 42, 0.14);
}

.section--paper .bg-word {
  -webkit-text-stroke-color: rgba(20, 24, 42, 0.09);
}

/* 目次（紙面上のニュース） */
.section--paper .news-category {
  color: #8a7645;
}

.section--paper .news-date {
  color: rgba(20, 24, 42, 0.55);
}

.section--paper .news-leader {
  border-bottom-color: rgba(20, 24, 42, 0.4);
}

@media (max-width: 767px) {
  .section--paper .news-item {
    border-bottom-color: rgba(20, 24, 42, 0.3);
  }
}

.section--paper .external-mark {
  color: #8a7645;
}

.section--paper a:hover {
  text-decoration-color: #8a7645;
}

.section--paper :focus-visible {
  outline-color: #8a7645;
}

/* 縦書きの巨大ゴースト漢字 */

.bg-word--v {
  writing-mode: vertical-rl;
  top: 0.15em;
  right: 3%;
  font-size: clamp(5rem, 16vw, 13rem);
  letter-spacing: 0.18em;
}

/* 長い矢印のボタン（View More型） */

.btn-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  width: 100%;
  max-width: 26rem;
  padding: 0.95em 1.3em;
  border: 1px solid var(--colorline);
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  transition: border-color 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

.btn-line:hover,
.btn-line:focus-visible {
  text-decoration: none;
  border-color: var(--coloraccent);
  color: var(--coloraccent);
  background: rgba(215, 201, 155, 0.05);
}

.arrow {
  position: relative;
  flex: none;
  width: 2.6rem;
  height: 1px;
  background: currentColor;
  transition: width 0.45s var(--ease-out);
}

.arrow::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9px;
  height: 1px;
  background: currentColor;
  transform: rotate(-38deg);
  transform-origin: right bottom;
}

.btn-line:hover .arrow,
.btn-line:focus-visible .arrow {
  width: 4rem;
}

/* タイプライター式の章ラベル（JSが一文字ずつ打つ） */

.chapter-en.is-typing::after,
.chapter-en.is-typed::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.95em;
  margin-left: 3px;
  background: currentColor;
  vertical-align: -0.12em;
  animation: caret-blink 1s steps(1) infinite;
}

@keyframes caret-blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (min-width: 1024px) {
  .chapter-en.is-typing::after,
  .chapter-en.is-typed::after {
    width: 0.95em;
    height: 1px;
    margin: 3px 0 0;
  }
}

/* フッターのゴーストタイポ */

.site-footer {
  position: relative;
  overflow: hidden;
}

.footer-inner {
  position: relative;
  z-index: 1;
}

/* 目次の通し番号（01 / 02 …） */
.news-list {
  counter-reset: newsindex;
}

.news-item {
  counter-increment: newsindex;
}

.news-item::before {
  content: counter(newsindex, decimal-leading-zero) " /";
  flex: none;
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: rgba(215, 201, 155, 0.7);
  min-width: 2.6em;
}

.section--paper .news-item::before {
  color: rgba(138, 118, 69, 0.8);
}

/* 紹介の頁（スクロールで一枚ずつ重なる縦書きスタック） */

.stack {
  margin-top: 3rem;
  display: grid;
  gap: 3.5rem;
}

.stack-card {
  position: sticky;
  max-width: 46rem;
  width: 100%;
  margin: 0 auto;
  min-height: min(66svh, 34rem);
  padding: clamp(1.4rem, 4.5vw, 2.4rem);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--colorline);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.4);
}

.stack-card:nth-child(1) { top: calc(var(--header-height) + 1.2rem); }
.stack-card:nth-child(2) { top: calc(var(--header-height) + 2.1rem); }
.stack-card:nth-child(3) { top: calc(var(--header-height) + 3rem); }
.stack-card:nth-child(4) { top: calc(var(--header-height) + 3.9rem); }

.stack-card--night {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 45%),
    var(--colorsurface);
}

.stack-card--paper {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%),
    #efe8d7;
  color: #171b28;
  border-color: rgba(23, 27, 40, 0.22);
}

/* 紙の頁セクション内では夜の頁の枠線を暗く縁取る */
.section--paper .stack-card--night {
  border-color: rgba(5, 7, 13, 0.7);
}

.stack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--colorline);
}

.stack-card--paper .stack-head {
  border-bottom-color: rgba(23, 27, 40, 0.2);
}

.stack-no {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  color: var(--coloraccent);
}

.stack-card--paper .stack-no {
  color: #8a7645;
}

.stack-tag {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--colortextmuted);
}

.stack-card--paper .stack-tag {
  color: rgba(23, 27, 40, 0.55);
}

.stack-body {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.6rem 0;
  height: clamp(13rem, 38svh, 20rem);
  font-family: var(--font-serif);
  font-size: clamp(0.98rem, 2.6vw, 1.2rem);
  line-height: 2.5;
  letter-spacing: 0.14em;
}

.stack-body p + p {
  margin-right: 0.35em;
}

.stack-card--paper .stack-body .boten {
  -webkit-text-emphasis-color: #8a7645;
  text-emphasis-color: #8a7645;
}

.stack-foot {
  padding-top: 0.9rem;
  border-top: 1px solid rgba(23, 27, 40, 0.2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6em 1.2em;
}

.stack-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
}

.stack-name-en {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: rgba(23, 27, 40, 0.5);
  text-transform: uppercase;
}

/* 四枚目：窓（ビジュアルとリンク） */
.stack-card--window .stack-window {
  flex: 1;
  display: grid;
  gap: 1.6rem;
  align-items: center;
  padding-top: 1.6rem;
}

.stack-card--window .profile-visual {
  max-width: 13rem;
  margin: 0 auto;
}

.stack-window-lead {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  letter-spacing: 0.12em;
}

.stack-window-text .profile-links {
  margin-top: 1.2rem;
}

@media (min-width: 640px) {
  .stack-card--window .stack-window {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  }
  .stack-card--window .profile-visual {
    margin: 0;
  }
}

/* 捲れる頁（フリップブック） */

.flip-section {
  overflow: visible; /* stickyを機能させる */
}

/* 基本（非アクティブ時）：普通の縦並び */
.flipbook-stage {
  display: grid;
  gap: 2rem;
  max-width: 34rem;
  margin: 3rem auto 0;
  padding: 0 1.5rem;
}

.flip-page {
  position: relative;
}

.flip-face {
  border: 1px solid var(--colorline);
  padding: clamp(1.3rem, 4vw, 2rem);
  min-height: 24rem;
  display: flex;
  flex-direction: column;
}

.flip-back {
  display: none;
}

.flip-front--night {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 45%),
    var(--colorsurface);
}

.flip-front--paper {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%),
    #efe8d7;
  color: #171b28;
  border-color: rgba(23, 27, 40, 0.22);
}

.flip-front--paper .stack-head { border-bottom-color: rgba(23, 27, 40, 0.2); }
.flip-front--paper .stack-no { color: #8a7645; }
.flip-front--paper .stack-tag { color: rgba(23, 27, 40, 0.55); }

.flip-body {
  flex: 0 0 auto;
  align-self: center;
  display: block;
  margin: auto 0;
  padding: 1.2rem 0;
  height: clamp(12rem, 34svh, 18rem);
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 2.5vw, 1.12rem);
  line-height: 2.3;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
}

.flip-body p {
  margin: 0;
}

.flip-foot {
  padding-top: 0.9rem;
  border-top: 1px solid var(--colorline);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6em 1.2em;
  font-size: 0.85rem;
}

.flip-front--paper .flip-foot { border-top-color: rgba(23, 27, 40, 0.2); }
.flip-front--paper .stack-name-en { color: rgba(23, 27, 40, 0.5); }

/* メンバー頁 */
.flip-member {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 1.4rem 0;
}

.flip-member-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 7vw, 3rem);
  letter-spacing: 0.12em;
}

.flip-member-sub {
  font-size: 0.45em;
  letter-spacing: 0.14em;
  color: var(--colortextmuted);
}

.flip-front--paper .flip-member-sub { color: rgba(23, 27, 40, 0.55); }

.flip-member-role {
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: var(--coloraccent);
}

.flip-member-line {
  font-family: var(--font-serif);
  color: var(--colortextmuted);
  font-feature-settings: "palt";
}

.flip-body,
.interlude-line {
  text-orientation: mixed;
}

/* 楽曲頁 */
.flip-disco {
  flex: 1;
  display: grid;
  align-content: center;
  gap: 1.4rem;
  padding: 1.4rem 0;
}

.flip-disco li {
  display: grid;
  gap: 0.15rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(23, 27, 40, 0.18);
}

.disco-label {
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8a7645;
}

.disco-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  letter-spacing: 0.08em;
}

.disco-date {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: rgba(23, 27, 40, 0.55);
  font-variant-numeric: tabular-nums;
}

.flip-disco-note a {
  border-bottom: 1px solid rgba(23, 27, 40, 0.4);
}

.flip-count {
  display: none;
}

/* アクティブ時（JSが .is-active を付与）：3Dで捲れる */

.js .flipbook.is-active .flipbook-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-top: var(--header-height); /* 固定ヘッダーと紙面が重ならないよう */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.js .flipbook.is-active .flipbook-stage {
  position: relative;
  width: min(88vw, 30rem);
  height: min(68svh, 32rem);
  margin: 0;
  padding: 0;
  display: block;
  perspective: 1800px;
}

.js .flipbook.is-active .flip-page {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.js .flipbook.is-active .flip-page:nth-child(1) { z-index: 7; }
.js .flipbook.is-active .flip-page:nth-child(2) { z-index: 6; }
.js .flipbook.is-active .flip-page:nth-child(3) { z-index: 5; }
.js .flipbook.is-active .flip-page:nth-child(4) { z-index: 4; }
.js .flipbook.is-active .flip-page:nth-child(5) { z-index: 3; }
.js .flipbook.is-active .flip-page:nth-child(6) { z-index: 2; }
.js .flipbook.is-active .flip-page:nth-child(7) { z-index: 1; }

.js .flipbook.is-active .flip-face {
  position: absolute;
  inset: 0;
  min-height: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* 頁の裏（捲れている最中に見える面） */
.js .flipbook.is-active .flip-back {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(
      to left,
      rgba(23, 27, 40, 0.05) 0 1px,
      transparent 1px 2.2rem
    ),
    #e6dfcd;
  border-color: rgba(23, 27, 40, 0.25);
}

.flip-back-mark {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: rgba(138, 118, 69, 0.5);
}

.js .flipbook.is-active .flip-count {
  display: block;
  margin-top: 1.2rem;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--colortextmuted);
}

/* 捲れる際の紙の影（JSが --shade を供給） */
.js .flipbook.is-active .flip-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 13, var(--shade, 0));
  pointer-events: none;
}

/* リリース章の意匠強化 */

.release-title {
  position: relative;
  z-index: 1;
  font-feature-settings: "palt";
  line-height: 1.4;
}

.release-title[data-echo]::before {
  content: attr(data-echo);
  position: absolute;
  top: -0.62em;
  left: -0.06em;
  z-index: -1;
  font-size: 1.5em;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 241, 232, 0.1);
  pointer-events: none;
}

/* 配信日チップ */
.release-date {
  margin-top: 1.4rem;
}

.date-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.55em 1.2em;
  border: 1px solid var(--colorline);
  font-family: var(--font-serif);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
}

.release-streaming-note {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

/* 矢印ボタンのホバーを金で満たす */
.btn-line {
  position: relative;
  overflow: hidden;
}

.btn-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--coloraccent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}

.btn-line:hover::before,
.btn-line:focus-visible::before {
  transform: scaleX(1);
}

.btn-line:hover,
.btn-line:focus-visible {
  color: var(--colorbg);
  background: transparent;
}

.btn-line > * {
  position: relative;
  z-index: 1;
}

.release-links {
  gap: 0.9rem;
}

/* 序章の紙面フリップ／第五章の扉頁 */

.flip-front--sheet {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%),
    #efe8d7;
  color: #171b28;
  border-color: rgba(23, 27, 40, 0.22);
}

.sheet-frame {
  position: absolute;
  inset: 0.7rem;
  border: 1px solid rgba(23, 27, 40, 0.14);
  pointer-events: none;
}

.flip-front--sheet {
  padding: clamp(3rem, 9vw, 3.6rem) clamp(1.5rem, 5vw, 2.6rem);
}

.flip-front--sheet .boten {
  -webkit-text-emphasis-color: #8a7645;
  text-emphasis-color: #8a7645;
}

.flip-body--center {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(1.05rem, 3vw, 1.3rem) !important;
  letter-spacing: 0.24em;
}

/* 紙セクション内の夜の頁は暗い縁取りで際立たせる */
.section--paper .flip-front--night {
  border-color: rgba(5, 7, 13, 0.7);
}

.section--paper .flip-front--night,
.section--paper .flip-front--night a {
  color: var(--colortext);
}

.section--paper .flip-front--night .stack-tag {
  color: var(--colortextmuted);
}

/* 縦書き内の欧文・数字の扱い */

.tcy {
  -webkit-text-combine: horizontal;
  text-combine-upright: all;
  letter-spacing: 0;
}

/* 縦書き領域では欧文も正立させる（横倒し防止） */
.release-credit,
.flip-body,
.interlude-line,
.stack-body {
  text-orientation: upright;
}

/* 長い欧文（Major Debut Digital Single 等）は縦中横にできないた */
.flip-body [lang="en"] {
  text-orientation: sideways;
}

/* Story本文のダッシュ「――」（U+2015）。上の upright は欧文を正立
   させるための指定だが、Safariはこれを忠実に適用するため、横棒の
   ままの向きで組まれて字面から横へはみ出してしまう。この一文字だけ
   寝かせれば、縦の流れに沿った一本の線として読める。 */
.story-dash {
  text-orientation: sideways;
}

/* メンバー頁：肩書きと本文の整理 */

.flip-member-role {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--coloraccent);
  margin-top: -0.4rem;
}

.flip-front--paper .flip-member-role {
  color: #8a7645;
}

.flip-member {
  gap: 0.9rem;
}

/* 肩書きタグが長い場合の折り返し防止 */
.stack-tag {
  white-space: nowrap;
  font-size: 0.78rem;
}

@media (max-width: 400px) {
  .stack-tag {
    font-size: 0.68rem;
  }
}

/* DISCOGRAPHY（既刊・目録の基本の組み） */

.discography {
  background: var(--colorbgsoft);
}

/* 左：楽曲情報（ライナーノーツのように、箱で囲わず組む） */

.disco-note-date {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  color: var(--colortextmuted);
  font-variant-numeric: tabular-nums;
}

.disco-note-title {
  margin: 0.7rem 0 0;
  font-weight: 400;
}

.disco-note-unit {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: rgba(244, 241, 232, 0.42);
}

.disco-note-no {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--coloraccent);
}

.disco-note-song {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 6vw, 2.9rem);
  line-height: 1.3;
  letter-spacing: 0.06em;
  /* 「」のぶんだけ字面が右へ寄るのを、頭の分だけ戻す */
  text-indent: -0.5em;
}

.disco-note-stream {
  margin: 1.1rem 0 0;
}

.disco-stream-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1em;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--colortext);
  text-decoration: none;
  border-bottom: 1px solid var(--colorline);
  padding-bottom: 0.25em;
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.disco-stream-link:hover,
.disco-stream-link:focus-visible {
  color: var(--coloraccent);
  border-bottom-color: var(--coloraccent);
  text-decoration: none;
}

.disco-stream-mark {
  font-size: 0.8em;
  color: var(--coloraccent);
}

.disco-stream-link .external-mark {
  margin-left: 0.5em;
  font-size: 0.78em;
  color: var(--colortextmuted);
}

/* クレジット。ラベルは小さな欧文、値は本文の色で読ませる */
.disco-credits {
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.42rem;
  /* 細い罫を一本だけ引いて、ここから下が奥付だと分かるようにする */
  border-top: 1px solid var(--colorline);
  padding-top: 1rem;
}

.disco-credit {
  display: grid;
  /* ラベルの欄は、いちばん長い Arrangement が収まる幅で揃える */
  grid-template-columns: minmax(5.7rem, auto) auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0 0.1em;
  font-size: 0.8rem;
  line-height: 1.6;
}

.disco-credit-label {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--coloraccent);
}

.disco-credit-sep {
  color: var(--colortextmuted);
}

.disco-credit-value {
  letter-spacing: 0.04em;
  color: rgba(244, 241, 232, 0.86);
}

/* 右：紙面に挟まれた一枚 */

.disc {
  position: relative;
}

.disc-link {
  position: relative;
  display: block;
  border: 1px solid var(--colorline);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 46%),
    var(--colorsurface);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  transition: border-color 0.4s ease, box-shadow 0.6s var(--ease-out);
}

.disc-link:hover,
.disc-link:focus-visible {
  text-decoration: none;
  border-color: var(--coloraccent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* 帯の左端に小さく振った丁付け（一・二・三） */
.disc-folio {
  font-family: var(--font-serif);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  color: rgba(215, 201, 155, 0.55);
}

.disc-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--colorbg);
}

/* ジャケットは切らずに全体を見せる（3枚とも16:9） */
.disc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.disc-caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  padding: 0.85rem clamp(0.9rem, 2.4vw, 1.3rem);
  border-top: 1px solid var(--colorline);
}

.disc-caption-title {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  letter-spacing: 0.08em;
  color: var(--colortext);
}

.disc-caption-play {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--colortextmuted);
}

.disc-play-mark {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.3rem 0 0.3rem 0.5rem;
  border-color: transparent transparent transparent var(--coloraccent);
  transition: transform 0.4s var(--ease-out);
}

.disc-link:hover .disc-play-mark {
  transform: translateX(4px) scale(1.15);
}

.disc-link:hover .disc-caption-play {
  color: var(--coloraccent);
}

/* フリップブック内の楽曲頁：タイトルをリンク */
.flip-disco .disco-title a {
  border-bottom: 1px solid rgba(23, 27, 40, 0.35);
}

.flip-disco .disco-title a:hover {
  border-bottom-color: #8a7645;
  color: #8a7645;
  text-decoration: none;
}

/* 表紙（本を開く導入） */

.book-cover {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--colorbg);
  perspective: 2200px;
  overflow: hidden;
}

.book-cover[hidden] {
  display: none;
}

.book-cover-inner {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(0.62, 0.02, 0.3, 1), opacity 1.5s ease;
  will-change: transform;
}

.book-cover.is-turning .book-cover-inner {
  transform: rotateY(-118deg);
  opacity: 0;
}

.cover-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  background:
    radial-gradient(ellipse 80% 60% at 62% 34%, rgba(215, 201, 155, 0.07), transparent 62%),
    linear-gradient(150deg, #070b16 0%, #0b1020 55%, #05070d 100%);
  border-right: 2px solid rgba(215, 201, 155, 0.35);
  box-shadow: inset -40px 0 60px rgba(0, 0, 0, 0.6);
}

/* 表紙の罫（背表紙側） */
.cover-rule {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 2.4rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(215, 201, 155, 0.4), transparent);
}

.cover-sub {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--colortextmuted);
}

.cover-skip {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 2;
  padding: 0.8em 1.6em;
  background: none;
  border: 1px solid var(--colorline);
  color: var(--colortextmuted);
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.cover-skip:hover,
.cover-skip:focus-visible {
  color: var(--coloraccent);
  border-color: var(--coloraccent);
}

/* 開幕時は本編のスクロールを止める */
.is-covered {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .book-cover-inner {
    transition: opacity 0.3s ease;
  }
  .book-cover.is-turning .book-cover-inner {
    transform: none;
    opacity: 0;
  }
}

/* 紙の頁：リンク文字が白く飛ぶ問題の修正 */

.flip-front--paper a,
.flip-front--sheet a,
.stack-card--paper a {
  color: #171b28;
}

.flip-front--paper a:hover,
.flip-front--sheet a:hover,
.stack-card--paper a:hover {
  color: #8a7645;
  text-decoration-color: #8a7645;
}

.flip-front--paper .external-mark,
.flip-front--sheet .external-mark {
  color: #8a7645;
}

.flip-front--paper :focus-visible,
.flip-front--sheet :focus-visible {
  outline-color: #8a7645;
}

/* HERO：スマートフォンでは画像と文字を重ねない縦積みレイアウト */

@media (max-width: 767px) {
  .hero {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: start;
    padding-top: calc(var(--header-height) + 2.5svh);
    padding-bottom: 2rem;
    row-gap: 1.2rem;
  }

  .hero-art {
    position: static;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    width: 86vw;
    max-width: 26rem;
    transform: none;
  }

  .hero-art-panel {
    transform: rotateY(8deg) rotateX(2deg);
  }

  .hero-content {
    position: static;
    grid-row: 3;
    padding: 0 1.5rem;
  }

  .hero-frame-word {
    top: calc(var(--header-height) + 1.2rem);
  }

  /* 背景シーンの月は左上へ退避し、題字・画像と重ならないよう */
  .scene-moon {
    top: 8%;
    left: 6%;
    right: auto;
    width: clamp(72px, 20vw, 110px);
  }

  .scene-path,
  .scene-moon-reflect {
    display: none;
  }

  .orb1, .orb2, .orb3, .orb5 {
    display: none;
  }
}

@media (max-width: 400px) {
  .hero-art {
    width: 82vw;
  }
  .hero-opening {
    font-size: 0.82rem;
  }
}

/* 横揺れ防止（スクロール中に幅が変わらないよう固定） */

.bg-word,
.section,
.site-footer,
.hero {
  max-width: 100%;
  overflow-x: clip;
}

/* フリップブック・積層カードを含む章は clip を外す */
.flip-section,
.stack-section {
  overflow-x: visible;
  overflow: visible;
}

.flip-section .bg-word,
.stack-section .bg-word {
  display: none;
}

/* スマートフォンでは視差による横方向の変形を止める */
@media (max-width: 1023px) {
  .section-inner {
    transform: none !important;
  }
  .bg-word {
    transform: none !important;
  }
}

/* 縦読みの可読性を高める（スマートフォン最適化） */

/* 本文の縦組みは、頁の高さいっぱいを使って行数を稼ぐ */
.flip-body {
  height: auto;
  max-height: none;
  align-self: stretch;
  margin: 0;
  padding: 1rem 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* 段落は右から左へ、適切なアキで分かれる */
.flip-body p {
  margin: 0;
}

.flip-body p + p {
  margin-right: 1.2em;
}

@media (max-width: 767px) {
  /* 頁を縦長にとり、一列あたりの文字数を増やす */
  .js .flipbook.is-active .flipbook-stage {
    width: min(90vw, 26rem);
    height: min(78svh, 36rem);
  }

  .flip-face {
    padding: 1.1rem 1.1rem 1.3rem;
  }

  .flip-front--sheet {
    padding: 2.4rem 1.2rem 2.2rem;
  }

  /* 字を小さめ・行間を詰めて、一列に多くの文字を収める */
  .flip-body {
    font-size: 0.9rem;
    line-height: 2.05;
    letter-spacing: 0.06em;
    padding: 0.8rem 0;
  }

  .flip-front--sheet .flip-body {
    font-size: 0.9rem;
    line-height: 2.1;
  }

  .flip-member {
    gap: 0.7rem;
    padding: 0.9rem 0 0;
  }

  .flip-member-name {
    font-size: clamp(1.6rem, 7.5vw, 2.1rem);
  }

  .flip-member-role {
    margin-top: 0;
    font-size: 0.66rem;
  }

  .stack-head {
    padding-bottom: 0.7rem;
  }

  .stack-no {
    font-size: 1.1rem;
    min-height: 2.6em;
  }

  .stack-tag {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
  }

  .page-nombre {
    bottom: 0.7rem;
    font-size: 0.66rem;
  }

  /* リリース章の縦書きクレジット：高さを確保して折返しを防ぐ */
  .release-credit {
    height: clamp(13rem, 34svh, 16rem);
  }

  .release-credit dd {
    font-size: 0.98rem;
  }

  .release-credit dt {
    font-size: 0.6rem;
    letter-spacing: 0.24em;
  }
}

@media (max-width: 380px) {
  .flip-body,
  .flip-front--sheet .flip-body {
    font-size: 0.84rem;
    line-height: 1.95;
  }
}

/* 紙の質感を高める（めくれ際の陰影・紙の反り） */

.js .flipbook.is-active .flip-face {
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.22) 0,
    rgba(0, 0, 0, 0.06) 3%,
    rgba(255, 255, 255, 0.05) 7%,
    transparent 16%
  );
  background-blend-mode: multiply;
}

/* めくれている最中、紙の背に光が差す */
.js .flipbook.is-active .flip-front::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, calc(var(--edge, 0) * 0.5)) 0,
    transparent 22%
  );
  pointer-events: none;
  z-index: 3;
}

/* 頁の綴じ側に落ちる影（本の谷） */
.js .flipbook.is-active .flipbook-stage::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  width: 22px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.55), transparent);
  z-index: 9;
  pointer-events: none;
}

/* 未読の頁が下に重なって見える（本の厚み） */
.js .flipbook.is-active .flipbook-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(6px, 6px);
  border: 1px solid rgba(244, 241, 232, 0.09);
  box-shadow:
    10px 10px 0 -1px rgba(11, 16, 32, 0.9),
    12px 12px 0 0 rgba(244, 241, 232, 0.06),
    20px 20px 0 -1px rgba(11, 16, 32, 0.9),
    22px 22px 0 0 rgba(244, 241, 232, 0.04);
  pointer-events: none;
}

/* 逆三日月（球体テクスチャを3Dで浮遊させる） */

.moon-stage {
  /* ロックアップ（月＋題字）の枠いっぱいに置く。 */
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: 100%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  perspective: 1200px;
  pointer-events: none;
}

.moon-body {
  position: relative;
  width: 100%;
  height: 100%;
  animation: moon-drift 22s ease-in-out infinite;
}

.moon-img {
  width: 100%;
  height: 100%;
  display: block;
  background: none;
}

.moon-body {
  isolation: isolate;
}

@keyframes moon-drift {
  0%, 100% { transform: translateY(0) rotateY(0deg) rotateX(0deg); }
  33%      { transform: translateY(-14px) rotateY(7deg) rotateX(-3deg); }
  66%      { transform: translateY(6px) rotateY(-6deg) rotateX(2deg); }
}

.js .moon-stage {
  animation: moon-enter 2.8s var(--ease-out) both;
}

@keyframes moon-enter {
  from { opacity: 0; transform: translateX(-50%) scale(0.9); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* HERO：楽曲情報とジャケット */

.hero-eyebrow {
  font-size: clamp(0.62rem, 2.2vw, 0.74rem);
  letter-spacing: 0.34em;
  color: var(--colortextmuted);
  text-transform: uppercase;
}

.hero-single {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 5vw, 2.1rem);
  letter-spacing: 0.12em;
  color: var(--coloraccent);
  font-feature-settings: "palt";
}

.hero-single rt {
  color: var(--coloraccent);
  opacity: 0.7;
}

.hero-jacket {
  position: relative;
  margin: 0.6rem 0 0;
  width: clamp(16.5rem, 78vw, 27rem);
  overflow: hidden;
  border: 1px solid rgba(215, 201, 155, 0.28);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(5, 7, 13, 0.6);
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(4deg);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

.hero-jacket:hover {
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.7);
}

.hero-jacket img {
  width: 100%;
  height: auto;
  display: block;
}

/* ジャケット下の反射（水面のような映り込み） */
.hero-jacket::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(to top, rgba(5, 7, 13, 0.55), transparent);
  pointer-events: none;
}

.hero-cta {
  margin-top: 0.6rem;
  display: flex;
  justify-content: center;
}

.hero-cta .btn {
  min-width: 14rem;
}

/* 開幕の段階表示 */
.js .hero-rise {
  animation: rise-in 1.2s var(--ease-out) both;
  animation-delay: var(--d, 0.8s);
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 題字：月本体と同じ視差量（月の中心に貼り付いたまま動く） */
.hero-title {
}

@media (max-width: 767px) {
  .hero {
    --moon-size: clamp(230px, 68vw, 400px);
  }
  .hero-stack {
    gap: 1.4rem;
    padding-top: calc(var(--header-height) + 3svh);
  }
  /* 月（68vw）より明確に小さく見えるところまで落とす。 */
  .hero-jacket {
    width: min(62vw, 17.5rem);
  }
  .hero-cta .btn {
    width: 100%;
    max-width: 20rem;
  }
  .hero-scroll {
    display: none;
  }
  .orb4 {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hero {
    --moon-size: clamp(340px, 42vw, 680px);
  }
  .hero-stack {
    gap: 2.4rem;
  }
}

/* HERO：楽曲誕生背景（Listen Nowの下） */

/* 解説頁の体裁：右に柱（見出し）、その左へ本文の段が流れる。 */
.hero-story {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: stretch;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  width: 100%;
  max-width: clamp(24rem, 72vw, 56rem);
  margin: 3rem auto 0;
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1rem, 3.4vw, 2.6rem);
  border-top: 1px solid var(--colorline);
  border-bottom: 1px solid var(--colorline);
}

/* 柱（縦組みの見出し） */
/* 見出しの末尾で静かに点滅する活字カーソル。 縦組みなので縦線ではなく短い横線で置く */
.hero-story-caret {
  /* 縦組みの流れの中に置くので、文字数によらず必ず最後の文字「景」の直後＝真下に来る。 */
  display: inline-block;
  width: 0.66em;
  height: 1px;
  margin-inline-start: 0.2em;
  background: var(--coloraccent);
  animation: hero-story-caret-blink 0.85s steps(1, end) infinite;
}

@keyframes hero-story-caret-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-story-caret {
    animation: none;
    opacity: 0.55;
  }
}

.hero-story-title {
  flex: none;
  margin: 0;
  padding-left: clamp(0.9rem, 2.2vw, 1.5rem);
  border-left: 1px solid rgba(215, 201, 155, 0.4);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(0.95rem, 2.9vw, 1.15rem);
  letter-spacing: 0.42em;
  line-height: 1;
  color: var(--coloraccent);
  text-align: start; /* 縦組みでは「上端から始める」の意味 */
}

/* 本文：高さ（＝一段の長さ）を決めると、段が右から左へ流れる */
/* 本文：指定の一行が縦組みの一段になる。 */
.hero-story-block {
  flex: 0 1 auto;
  margin: 0;
  /* いちばん長い指定行（32字）が必ず一段に収まる長さ。 */
  height: 34rem;
  max-width: 100%;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-serif);
  font-size: clamp(0.86rem, 2.3vw, 0.98rem);
  line-height: 2.6;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  color: var(--colortext);
  text-align: start;
}

/* 意味のまとまり（3ブロック）の間は、行間より明確に広く */
.hero-story-block + .hero-story-block {
  margin-block-start: 1.5em;
}

.hero-story-line {
  margin: 0;
  padding: 0;
  text-align: start;
}

/* 本文は、節が画面へ入ったら静かにフェードインする。 */
.js .hero-story-block.reveal {
  transform: translateY(10px);
  transition:
    opacity 1.4s var(--ease-out),
    transform 1.4s var(--ease-out);
}

.js .hero-story-block.reveal.is-visible {
  transform: translateY(0);
}

/* 意味のまとまりごとに、ほんの少しだけ遅れて現れる */
.js .hero-story-block.reveal:nth-of-type(2) { transition-delay: 0.18s; }
.js .hero-story-block.reveal:nth-of-type(3) { transition-delay: 0.36s; }

/* 長い欧文は寝かせて読ませる（KADOKAWA等） */
.hero-story-block [lang="en"] {
  text-orientation: sideways;
}

/* 罫線の「 」（U+2500）は、Unicodeの決まりで縦組みで */
.hero-story-dash {
  text-orientation: sideways;
}

@media (max-width: 767px) {
  .hero-story {
    max-width: 100%;
    gap: 0.9rem;
    /* Listen Nowからの距離を詰める（節の中身の余白は変えない） */
    margin-top: 0.8rem;
    padding: 1.7rem 0.2rem;
  }
  .hero-story-block {
    height: 28rem;
    font-size: 0.84rem;
    line-height: 1.5;
    letter-spacing: 0;
  }
  .hero-story-block + .hero-story-block {
    margin-block-start: 0.9em;
  }
  .hero-story-title {
    font-size: 0.8rem;
    letter-spacing: 0.26em;
    padding-left: 0.5rem;
  }
}

/* HERO：Official Lyric Video（クレジットの上） */

.hero-video {
  /* 章の柱を他の章と同じ位置（内容の左脇）へ立てるための基準 */
  position: relative;
  width: 100%;
  max-width: clamp(20rem, 66vw, 46rem);
  margin: 3rem auto 0;
  scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

/* 柱は他章（弐 Story 以降）と同じ版面の左脇に立てる。
   導線の幅は版面より狭いので、そのぶんを版面の幅と柱の出幅から
   引き戻す。座標は書かず、他章と同じ変数から導いている */
@media (min-width: 1024px) {
  #lyricvideo .chapter-mark {
    left: calc((100% - var(--width-content)) / 2 - 4.5rem);
  }
}

/* 幅の狭い画面では、他の章とまったく同じ組み方（横に並ぶ柱）で出す。
   導線だけが版面より狭く中央に置かれているので、そのずれぶんを
   戻して、弐 Story 以降と同じ左端から始める */
@media (max-width: 1023px) {
  #lyricvideo .chapter-mark {
    margin-left: calc(
      (min(clamp(20rem, 66vw, 46rem), 100vw - 3rem) - (100vw - 3rem)) / 2
    );
  }
}

.hero-video-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-serif);
}

/* 見出しそのものが動画へのリンクになった。これまでの縦積みを
   そのまま a に引き継がせ、見え方は変えない */
.hero-video-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
}

.hero-video-link:hover,
.hero-video-link:focus-visible {
  text-decoration: none;
}

.hero-video-link:hover .hero-video-song,
.hero-video-link:focus-visible .hero-video-song,
.hero-video-link:hover .hero-video-en,
.hero-video-link:focus-visible .hero-video-en {
  color: var(--coloraccent);
}

.hero-video-song {
  font-size: clamp(1rem, 3vw, 1.2rem);
  letter-spacing: 0.14em;
  color: var(--coloraccent);
}

.hero-video-en {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--colortextmuted);
}

.hero-video .video-player {
  margin-top: 0;
}

.hero-video .video-alt-link {
  margin-top: 1rem;
  text-align: center;
}

/* HEROのリリース情報（Listen Nowの下） */

.hero-detail {
  width: 100%;
  max-width: 26rem;
  margin-top: 2.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--colorline);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.hero-detail .date-chip {
  margin: 0;
}

/* クレジット：横並びの静かな表組み */
.hero-credit {
  width: 100%;
  margin: 0;
  border-top: 1px solid var(--colorline);
}

.hero-credit > div {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.7em 0.2em;
  border-bottom: 1px solid var(--colorline);
  text-align: left;
}

.hero-credit dt {
  width: 5.4em;
  flex: none;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--coloraccent);
}

.hero-credit dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  letter-spacing: 0.06em;
}

.hero-links {
  width: 100%;
  display: grid;
  gap: 0.8rem;
}

.hero-links .btn-line {
  max-width: none;
}

@media (min-width: 768px) {
  .hero-detail {
    max-width: 30rem;
  }
}

/* メンバー頁：縦読みの行揃えを厳密にする */

/* 縦組みの本文は、上端（右上）で揃えて段を組む */
.flip-body {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin: 0 auto;
  text-align: start;
}

/* 段落は本文ブロックの中で右から左へ順に流れる */
.flip-body p {
  margin: 0;
  padding: 0;
  text-align: start;
}

/* 頁のレイアウト：見出し→本文→余白 の縦積み */
.flip-face {
  display: flex;
  flex-direction: column;
}

.flip-member {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  padding: 1.1rem 0 0;
  min-height: 0;
}

.flip-body {
  flex: 1;
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: none;
  padding: 1rem 0 0;
  overflow: hidden;
}

@media (max-width: 767px) {
  /* 頁を十分に高くし、一列あたりの文字数を確保する */
  .js .flipbook.is-active .flipbook-stage {
    width: min(92vw, 27rem);
    height: min(80svh, 38rem);
  }

  .flip-face {
    padding: 1.1rem 1rem 1.2rem;
  }

  .flip-body {
    font-size: 0.9rem;
    line-height: 2.15;
    letter-spacing: 0.05em;
  }

  .flip-member-name {
    font-size: clamp(1.5rem, 7vw, 2rem);
    line-height: 1.2;
  }

  .flip-member-role {
    font-size: 0.64rem;
    letter-spacing: 0.24em;
    margin: 0;
  }

  .flip-member {
    gap: 0.5rem;
    padding-top: 0.9rem;
  }
}

@media (max-width: 380px) {
  .flip-body {
    font-size: 0.83rem;
    line-height: 2;
  }
}

/* タイポアニメーション（英字見出し・共通） */

[data-typo] {
  position: relative;
  white-space: nowrap;
}

[data-typo] .typo-line {
  display: inline-block;
  min-height: 1.2em;
}

/* 打たれた文字は即座に出る（フェードなし＝デジタルな質感）。 */
[data-typo] .typo-char {
  display: inline-block;
  opacity: 0;
}

[data-typo] .typo-char.is-shown {
  opacity: 1;
}

/* 打鍵カーソル（細い縦線） */
[data-typo] .typo-caret {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 0.36em;
  background: var(--coloraccent);
  vertical-align: -0.12em;
  opacity: 0;
}

/* 打鍵中も打ち終わり後も、カーソルは静かに点滅し続ける */
[data-typo].is-typing .typo-caret,
[data-typo].is-typed .typo-caret {
  animation: caret-flash 0.8s steps(1, end) infinite;
}

/* 見出しが画面外にある間は点滅を止める */
[data-typo].is-away .typo-caret {
  animation: none;
  opacity: 0;
}

@keyframes caret-flash {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-typo] .typo-char {
    opacity: 1;
  }
  [data-typo] .typo-caret,
  [data-typo].is-typing .typo-caret,
  [data-typo].is-typed .typo-caret {
    animation: none;
    opacity: 0;
  }
}

/* HEROのクレジット（縦書き） */

/* 画面へ入るたび、右の「配信日」から左へ列が順に現れる。 */
.js .hero-credit.replay-rise > div {
  opacity: 0;
  /* 縦組みなので、右（＝先頭の列）の側から静かに差し込む */
  transform: translateX(8px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.js .hero-credit.replay-rise.is-risen > div {
  opacity: 1;
  transform: translateX(0);
}

.js .hero-credit.replay-rise > div:nth-child(1) { transition-delay: 0s; }
.js .hero-credit.replay-rise > div:nth-child(2) { transition-delay: 0.1s; }
.js .hero-credit.replay-rise > div:nth-child(3) { transition-delay: 0.2s; }
.js .hero-credit.replay-rise > div:nth-child(4) { transition-delay: 0.3s; }
.js .hero-credit.replay-rise > div:nth-child(5) { transition-delay: 0.4s; }
.js .hero-credit.replay-rise > div:nth-child(6) { transition-delay: 0.5s; }

/* OFFICIAL LINKSのロゴ：入るたび静かに浮かび上がる（TOPの題字とは別系統） */
.js .links-logo.replay-rise img {
  opacity: 0;
  /* 位置は動かさず、わずかな拡大だけ添える */
  transform: scale(0.985);
  transition:
    opacity 1.5s var(--ease-out),
    transform 1.5s var(--ease-out);
}

.js .links-logo.replay-rise.is-risen img {
  opacity: 1;
  transform: scale(1);
}

/* 公式リンクの各行 */
.js .links-list.replay-rise > li {
  opacity: 0;
  transform: translateX(54px);
  transition:
    opacity 0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
}

.js .links-list.replay-rise.is-risen > li {
  opacity: 1;
  transform: translateX(0);
}

.js .links-list.replay-rise.is-risen > li:nth-child(1) { transition-delay: 0.3s; }
.js .links-list.replay-rise.is-risen > li:nth-child(2) { transition-delay: 0.41s; }
.js .links-list.replay-rise.is-risen > li:nth-child(3) { transition-delay: 0.52s; }
.js .links-list.replay-rise.is-risen > li:nth-child(4) { transition-delay: 0.63s; }
.js .links-list.replay-rise.is-risen > li:nth-child(n+5) { transition-delay: 0.74s; }

@media (prefers-reduced-motion: reduce) {
  .js .hero-credit.replay-rise > div,
  .js .links-logo.replay-rise img,
  .js .links-list.replay-rise > li {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

.hero-credit.tategaki {
  width: auto;
  /* 「雪乃イト・加賀（ネギシャワーP）」が一段に収まる長さ */
  height: clamp(17.5rem, 46svh, 22.5rem);
  margin: 0 auto;
  border-top: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-feature-settings: "palt";
  display: block;
}

.hero-credit.tategaki > div {
  display: block;
  padding: 0 clamp(0.7rem, 2.6vw, 1.1rem);
  border-bottom: 0;
  text-align: start;
}

.hero-credit.tategaki > div:not(:last-child) {
  border-left: 1px solid var(--colorline);
}

.hero-credit.tategaki dt {
  display: block;
  width: auto;
  margin: 0 0 1.1em;
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  color: var(--coloraccent);
}

.hero-credit.tategaki dd {
  display: block;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(0.98rem, 2.8vw, 1.15rem);
  letter-spacing: 0.08em;
  line-height: 1;
}

/* あらすじの紙面：一頁の文字量に合わせた組み */

.flip-front--sheet .flip-body p + p {
  margin-right: 1em;
}

.flip-front--sheet ruby rt {
  font-size: 0.4em;
  color: rgba(23, 27, 40, 0.55);
}

/* 紙面の余白を本らしく詰める */

.flip-front--sheet {
  padding: 2.5rem 1.6rem 2.2rem;
}

.flip-front--sheet .flip-body {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
  display: block;
  /* 版面いっぱいに段を組む */
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* 段落間のアキを本文一行分程度に抑える（開きすぎ防止） */
.flip-front--sheet .flip-body p + p {
  margin-right: 0.6em;
}

@media (max-width: 767px) {
  /* 版面を広げ、字を詰めて一段あたりの文字数を増やす */
  .flip-front--sheet {
    padding: 2.2rem 1.1rem 2rem;
  }

  .sheet-frame {
    inset: 0.55rem;
  }

  .flip-front--sheet .flip-body {
    font-size: 0.95rem;
    line-height: 1.85;
    letter-spacing: 0.02em;
  }

  .flip-front--sheet .flip-body p + p {
    margin-right: 0.5em;
  }

  .page-nombre {
    bottom: 0.65rem;
  }

  /* 頁自体も少し縦長にして版面を確保 */
  .js .flipbook.is-active .flipbook-stage {
    width: min(93vw, 27rem);
    height: min(82svh, 40rem);
  }

  .flip-body {
    line-height: 1.9;
    letter-spacing: 0.02em;
  }
}

@media (min-width: 768px) {
  .flip-front--sheet .flip-body {
    font-size: 1rem;
    line-height: 1.95;
    letter-spacing: 0.04em;
  }
}

/* 文庫本の組版密度（決定版） */

/* 段落間のアキを完全にゼロに（本と同じ、字下げのみ） */
.flip-front--sheet .flip-body p + p {
  margin-right: 0;
}

.flip-body p + p {
  margin-right: 0;
}

/* 頁の縦横比：一段の文字数と段数のバランスが最も本らしくなる比率 */
@media (max-width: 767px) {
  .js .flipbook.is-active .flipbook-stage {
    width: min(93vw, 26rem);
    height: min(72svh, 33rem);
  }

  .flip-front--sheet {
    padding: 2rem 1rem 1.8rem;
  }

  .flip-front--sheet .flip-body {
    font-size: 0.95rem;
    line-height: 1.8;
    letter-spacing: 0.01em;
  }

  .page-nombre {
    bottom: 0.55rem;
    font-size: 0.62rem;
  }

  .sheet-frame {
    inset: 0.45rem;
  }
}

@media (min-width: 768px) {
  /* 紙面のプロポーション：横 : 縦 ＝ 0.76 : 1（文庫本に近い縦長） */
  .js .flipbook.is-active .flipbook-stage {
    height: min(78svh, 38rem);
    width: auto;
    max-width: 88vw;
    aspect-ratio: 76 / 100;
  }

  .flip-front--sheet {
    padding: 2.4rem 1.6rem 2.1rem;
  }

  .flip-front--sheet .flip-body {
    font-size: 1rem;
    line-height: 1.85;
    letter-spacing: 0.02em;
  }
}

/* ルビの分だけ段間が不揃いにならないよう、ルビは段間に収める */
.flip-front--sheet .flip-body ruby {
  ruby-align: center;
}

.flip-front--sheet .flip-body rt {
  font-size: 0.38em;
}

/* 紙面の本文を版面の中央に置く */

.flip-front--sheet .flip-body {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

/* 夜の頁の本文も同様に中央 */
.flip-body {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

/* あらすじ下の本編リンク */

.story-links {
  margin: 3rem auto 0;
  max-width: 26rem;
  display: grid;
  gap: 0.9rem;
}

.story-links .btn-line {
  max-width: none;
}

/* 1頁目のタイトル／最終頁の中央置き */

.story-page-title {
  font-weight: 600;
  font-size: 1.16em;
  letter-spacing: 0.06em;
}

.story-page-sub {
  font-size: 0.72em;
  color: rgba(23, 27, 40, 0.55);
  margin-right: 0.4em !important;
}

.story-page-sub + p {
  margin-right: 1.1em !important;
}

/* 最終頁：縦横の中央にドンと。 */
.flip-front--sheet .flip-body--finale {
  flex: 0 1 auto;
  height: auto;
  max-height: 100%;
  margin: auto;
  font-size: clamp(1.05rem, 3.4vw, 1.35rem);
  line-height: 2.3;
  letter-spacing: 0.16em;
  font-weight: 500;
}

/* 本編リンク（本の真下・奥付風） */

.story-links {
  margin-top: 1.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.story-links a {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  color: var(--colortext);
  border-bottom: 1px solid rgba(215, 201, 155, 0.45);
  padding-bottom: 0.25em;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.story-links a:hover {
  text-decoration: none;
  color: var(--coloraccent);
  border-bottom-color: var(--coloraccent);
}

.story-links .external-mark {
  font-size: 0.8em;
  margin-left: 0.4em;
  color: var(--coloraccent);
}

@media (max-width: 380px) {
  .story-links a {
    font-size: 0.8rem;
  }
}

/* ジャケ写のキラーん＋3D浮遊 */

/* 浮遊は内側の picture が担当する。 */
.hero-jacket picture {
  display: block;
  animation: jacket-float 8s ease-in-out infinite;
}

@keyframes jacket-float {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50%      { transform: translateY(-8px) rotateZ(0.45deg); }
}

.jacket-sheen {
  position: absolute;
  inset: -20%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.05) 46%,
    rgba(255, 253, 245, 0.42) 50%,
    rgba(255, 255, 255, 0.05) 54%,
    transparent 60%
  );
  transform: translateX(-120%);
  animation: jacket-shine 6.5s ease-in-out 2.4s infinite;
}

@keyframes jacket-shine {
  0%       { transform: translateX(-120%) skewX(-8deg); }
  18%      { transform: translateX(120%) skewX(-8deg); }
  100%     { transform: translateX(120%) skewX(-8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-jacket picture { animation: none; }
  .jacket-sheen { animation: none; opacity: 0; }
}

/* 配信日の列（クレジットと同じ縦書き・強調） */

.hero-credit .credit-date dt {
  color: var(--coloraccent);
}

.hero-credit .credit-date dd {
  color: var(--coloraccent);
}

.hero-credit .credit-date {
  padding-left: clamp(0.9rem, 3vw, 1.4rem);
}

/* 狭い画面では段間を詰め、クレジット全体を画面幅へ収める。 */
@media (max-width: 767px) {
  .hero-credit.tategaki > div {
    padding: 0 clamp(0.4rem, 1.7vw, 1.1rem);
  }
  .hero-credit .credit-date {
    padding-left: clamp(0.6rem, 2.2vw, 1.4rem);
  }
}

/* 月の3Dアニメーション（位相の移ろい＋漂い） */

.moon-phase {
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 82% 50%,
    rgba(5, 7, 13, 0.9) 0%,
    rgba(5, 7, 13, 0.75) 40%,
    transparent 62%
  );
  mix-blend-mode: multiply;
  animation: phase-drift 24s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes phase-drift {
  from { transform: translateX(5%) scale(1.02); opacity: 0.92; }
  to   { transform: translateX(-6%) scale(1);  opacity: 0.75; }
}

.moon-body {
  animation: moon-drift3d 26s ease-in-out infinite;
}

@keyframes moon-drift3d {
  0%, 100% { transform: translateY(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg); }
  30%      { transform: translateY(-16px) rotateY(9deg) rotateX(-4deg) rotateZ(1.2deg); }
  65%      { transform: translateY(8px) rotateY(-8deg) rotateX(3deg) rotateZ(-1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .moon-body, .moon-phase { animation: none; }
}

/* メンバー頁：写真＋縦読みの整列 */

.member-photo {
  flex: none;
  width: clamp(5.6rem, 24vw, 7.5rem);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(215, 201, 155, 0.4);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  background: var(--colorbg);
}

.flip-front--paper .member-photo {
  border-color: rgba(23, 27, 40, 0.3);
  box-shadow: 0 10px 22px rgba(23, 27, 40, 0.25);
}

.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 結成頁のアートワークだけは、枠の比率がどう転んでも写真を切らない。 */
.member-photo--wide img {
  object-fit: contain;
  object-position: center;
}

/* 結成頁のアートワークは、ユニットの「顔」として最も大きく見せる。 */
.member-photo--wide {
  aspect-ratio: 16 / 9;
  /* 見開きの主役として、紙面いっぱいに近い大きさで見せる。 */
  /* 版面の高さから「本文の一段に要る長さ」と余白ぶんを引いた残り全部を写真に充てる。 */
  height: calc(100% - 18 * clamp(0.8rem, 1.50svh, 0.98rem) - 12.3rem);
  width: auto;
  max-width: 94%;
  margin: clamp(0.7rem, 2.6svh, 2rem) auto 0.35rem;
}

/* 頁のレイアウト：写真 → 名前 → 肩書き → 縦読み本文（右上起点で整列） */
.flip-member {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  padding: 0.9rem 0 0;
  min-height: 0;
}

.flip-member .member-photo {
  margin: 0 auto 0.2rem;
}

.flip-member-name {
  line-height: 1.15;
  text-align: center;
}

.flip-member-role {
  margin: 0;
  text-align: center;
}

@media (max-width: 767px) {
  .flip-member-name {
    font-size: clamp(1.4rem, 6.4vw, 1.8rem);
  }
  .flip-body {
    line-height: 1.8;
    letter-spacing: 0.01em;
  }
}

/* メンバー頁：縦組みを「人物紹介として読める」組みにする */

/* MEMBERSだけ本を一回り大きくして、一段を長くとる。 */
@media (min-width: 768px) {
  .js #profile .flipbook.is-active .flipbook-stage {
    height: min(88svh, 49rem);
  }
}

@media (max-width: 767px) {
  .js #profile .flipbook.is-active .flipbook-stage {
    height: min(84svh, 38rem);
  }
}

/* 人物紹介の「顔」として、写真を主役の大きさにする。 */
.flip-member .member-photo {
  /* 画面が低いときは本文の版面を優先し、写真を控えめにする */
  width: clamp(6.4rem, min(30vw, 17svh), 10.2rem);
  margin: 0 auto 0.35rem;
}

.flip-member {
  gap: 0.3rem;
  padding-top: 0.6rem;
}

.flip-member-name {
  font-size: clamp(1.5rem, 5.6vw, 2.1rem);
}

.flip-member-role {
  margin-top: 0.1rem;
}

/* メンバー頁：YouTube / X のリンク（奥付風の小さな行） */

.member-links {
  flex: none;
  width: 100%;
  max-width: 15rem;
  margin: 0.3rem auto 0;
  padding-top: 0.42rem;
  border-top: 1px solid var(--colorline);
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}

.member-links a {
  display: inline-flex;
  align-items: center;
  padding: 0.45em 0.3em;
  color: var(--colortextmuted);
  transition: color 0.3s ease;
}

.member-links a:hover,
.member-links a:focus-visible {
  color: var(--coloraccent);
  text-decoration: none;
}

.member-links .external-mark {
  margin-left: 0.3em;
  font-size: 0.9em;
}

/* 紙の頁では線と文字を濃く（コントラスト確保） */
.flip-front--paper .member-links {
  border-top-color: rgba(23, 27, 40, 0.28);
}

.flip-front--paper .member-links a {
  color: rgba(23, 27, 40, 0.72);
}

.flip-front--paper .member-links a:hover,
.flip-front--paper .member-links a:focus-visible {
  color: #8a7645;
}

@media (max-width: 767px) {
  /* 版面をさらに稼ぎ、一段あたりの文字数を確保する */
  /* スマホは本の幅が狭いぶん、本文の版面を優先して控えめ */
  .flip-member .member-photo {
    width: clamp(5.4rem, min(24vw, 15svh), 7.6rem);
    margin-bottom: 0.45rem;
  }
  .member-photo--wide {
    /* SPも同じ考え方。本文サイズの下限が違うので係数だけ変える */
    height: calc(100% - 18 * clamp(0.82rem, 1.98svh, 0.94rem) - 11.0rem);
    max-width: 88%;
    margin-top: clamp(0.3rem, 1.1svh, 0.8rem);
  }
  .flip-member {
    gap: 0.25rem;
    padding-top: 0.5rem;
  }
  .flip-member-name {
    font-size: clamp(1.35rem, 5.6vw, 1.7rem);
  }
  .member-links {
    gap: 1.2rem;
    margin-top: 0.3rem;
    padding-top: 0.4rem;
    font-size: 0.66rem;
  }
  .member-links a {
    padding: 0.35em 0.3em;
  }
}

/* 自転する逆三日月 */

.moon-globe {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  /* 球の下地。夜側も真っ黒にせず、わずかな反射光ぶんだけ明度差を持たせる。 */
  background: radial-gradient(
    circle at 36% 38%,
    #12151c 0%,
    #0d1017 46%,
    #090c12 74%,
    #07090e 100%
  );
  isolation: isolate;
  /* 縁の光と落ち影。強い金属光沢にならない範囲に抑える */
  box-shadow:
    inset 6px 0 26px rgba(240, 237, 228, 0.095),
    inset -24px 0 62px rgba(0, 0, 0, 0.78);
  transform: translateZ(0);
}

/* 月面に光の面を重ねるレイヤーは置かない。 */

/* 回転する月面（横シームレスなテクスチャ帯） */
.moon-tex {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  background: url("../icon/moontex.jpg") repeat-x;
  background-size: 50% 100%;
  /* 「月面画像を貼った」感じにならないところまで落とす。 */
  opacity: 0.78;
  animation: moon-rotate 30s linear infinite;
  will-change: transform;
}

@keyframes moon-rotate {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 球面の陰影（縁の減光と、左からの光） */
.moon-sphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* 明部はアイボリー〜薄い銀。真っ白にはしない。 */
  background:
    /* 光の当たる面。ベタ塗りにならないよう、中心から外へ緩やかに散らす */
    radial-gradient(
      circle at 31% 41%,
      rgba(242, 239, 231, 0.46) 0%,
      rgba(233, 230, 222, 0.32) 28%,
      rgba(217, 215, 208, 0.16) 52%,
      transparent 74%
    ),
    /* 周縁減光：外周へ向かって少しずつ落ち、平らな円に見せない */
    radial-gradient(
      circle at 50% 50%,
      transparent 40%,
      rgba(3, 5, 11, 0.04) 60%,
      rgba(3, 5, 11, 0.12) 76%,
      rgba(2, 3, 8, 0.28) 88%,
      rgba(2, 3, 8, 0.52) 96%,
      rgba(2, 3, 8, 0.70) 100%
    );
  pointer-events: none;
  animation: moon-rim 38s ease-in-out infinite;
}

/* 縁の光の強弱（白飛びしない範囲で） */
@keyframes moon-rim {
  0%, 100% { opacity: 1; }
  45%      { opacity: 0.88; }
  84%      { opacity: 1.05; }
}

/* 月相：夜の影が月面をゆっくり横切り、光の面が広がったり細くなったりする。 */
.moon-cres {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  /* 影の中心。位置は固定で、moon-phase アニメーションだけが月を満ち欠けさせる */
  background: radial-gradient(
    circle at 63% 50%,
    rgba(5, 7, 13, 0.96) 0%,
    rgba(5, 7, 13, 0.945) 50%,
    rgba(6, 9, 15, 0.90) 60%,
    rgba(7, 10, 17, 0.74) 66%,
    rgba(9, 12, 21, 0.50) 72%,
    rgba(11, 15, 25, 0.26) 78%,
    rgba(14, 18, 28, 0.09) 84%,
    transparent 90%
  );
  pointer-events: none;
  will-change: transform;
  animation: moon-phase 38s ease-in-out infinite;
}

/* 細い三日月 → 光面が広がる → 半月に近づく → 反対側から細い光 → 戻る */
@keyframes moon-phase {
  0%,
  100% { transform: translateX(3%) scale(1.01); }   /* 左に細い光 */
  22%  { transform: translateX(11%) scale(1); }     /* 光面が広がる */
  45%  { transform: translateX(20%) scale(0.985); } /* 半月に近づく */
  68%  { transform: translateX(2%) scale(1.02); }   /* ふたたび細く */
  84%  { transform: translateX(-9%) scale(1.04); }  /* 反対側に細い光 */
}

@media (prefers-reduced-motion: reduce) {
  .moon-tex { animation: none; }
}

/* 月のアニメーション強化（派手に） */

/* 自転を速く */
.moon-tex {
  animation-duration: 26s;
}

/* 漂いを大きく（後定義で上書き） */
@keyframes moon-drift3d {
  0%, 100% { transform: translateY(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1); }
  28%      { transform: translateY(-22px) rotateY(14deg) rotateX(-6deg) rotateZ(2deg) scale(1.03); }
  62%      { transform: translateY(12px) rotateY(-12deg) rotateX(5deg) rotateZ(-1.6deg) scale(0.99); }
}

/* 月の演出強化：光条・周回する光・強い呼吸 */

/* 呼吸するような、ごく微細な揺らぎだけを残す */
.moon-body {
  animation: moon-drift3d 32s ease-in-out infinite;
}

@keyframes moon-drift3d {
  0%, 100% { transform: translateY(0) rotateZ(0deg) scale(1); }
  30%      { transform: translateY(-5px) rotateZ(1.2deg) scale(1.015); }
  65%      { transform: translateY(3px) rotateZ(-1deg) scale(0.99); }
}

/* 月の周りを回る光の粒（3つ・軌道と奥行き） */
.moon-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -4px 0 0 -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fdf8e8 0%, rgba(215, 201, 155, 0.85) 45%, transparent 72%);
  box-shadow: 0 0 14px 3px rgba(215, 201, 155, 0.5);
  pointer-events: none;
  animation: orbit-a 9s linear infinite;
}

.moon-orbit2 {
  width: 5px;
  height: 5px;
  animation: orbit-b 14s linear infinite;
  animation-delay: -4s;
}

.moon-orbit3 {
  width: 4px;
  height: 4px;
  animation: orbit-a 21s linear infinite reverse;
  animation-delay: -8s;
  opacity: 0.8;
}

/* 楕円軌道：手前（大きく明るく・月の上）と奥（小さく暗く・月の裏）を往復 */
@keyframes orbit-a {
  0%   { left: 92%; top: 42%; transform: scale(1.2);  opacity: 1;    z-index: 3; }
  25%  { left: 50%; top: 88%; transform: scale(1.35); opacity: 1;    z-index: 3; }
  50%  { left: 6%;  top: 42%; transform: scale(0.7);  opacity: 0.5;  z-index: -3; }
  75%  { left: 50%; top: 4%;  transform: scale(0.5);  opacity: 0.35; z-index: -3; }
  100% { left: 92%; top: 42%; transform: scale(1.2);  opacity: 1;    z-index: 3; }
}

@keyframes orbit-b {
  0%   { left: 2%;  top: 64%; transform: scale(1.15); opacity: 1;    z-index: 3; }
  25%  { left: 50%; top: 98%; transform: scale(1.3);  opacity: 1;    z-index: 3; }
  50%  { left: 96%; top: 64%; transform: scale(0.6);  opacity: 0.45; z-index: -3; }
  75%  { left: 50%; top: 12%; transform: scale(0.45); opacity: 0.3;  z-index: -3; }
  100% { left: 2%;  top: 64%; transform: scale(1.15); opacity: 1;    z-index: 3; }
}

/* 軌道の粒の基準座標（月の半径基準） */
.moon-orbit { --r: 1; }

@media (prefers-reduced-motion: reduce) {
  .moon-orbit { display: none; }
  .moon-body,
  .moon-cres,
  .moon-sphere,
  .moon-tex { animation: none; }
}

/* 小説の扉頁（STORYの1枚目） */

.flip-front--cover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 下部の著者表示ぶんを空け、題字はやや上寄りの中央に置く */
  /* 下部は著者表示ぶんを必ず空ける（紙面が小さくても重ならない） */
  padding: clamp(1.7rem, 5vw, 2.4rem) clamp(1.4rem, 5vw, 2.4rem) 10.5rem;
}

.story-cover-title {
  max-height: 100%;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-serif);
  font-weight: 600;
  /* 題字の長さが紙面の高さを超えないよう、画面高さにも連動させる */
  font-size: clamp(0.95rem, 2.4svh, 1.3rem);
  letter-spacing: 0.12em;
  line-height: 1.35;
  color: #171b28;
  text-align: start;
}

/* 著者表示は紙面の下部中央（本の扉の慣例に合わせる） */
.story-cover-meta {
  /* 縦書き要素では論理プロパティが横方向に解決されるため、 位置指定は物理プロパティで行う */
  position: absolute;
  bottom: clamp(2.6rem, 7%, 3.6rem);
  left: 0;
  right: 0;
  width: fit-content;
  height: 8.6em;
  margin: 0 auto;
  padding-right: clamp(0.7rem, 2.4vw, 1.1rem);
  border-right: 1px solid rgba(138, 118, 69, 0.5);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-serif);
  font-size: clamp(0.72rem, 2.4vw, 0.85rem);
  letter-spacing: 0.3em;
  line-height: 1.6;
  color: rgba(23, 27, 40, 0.68);
  text-align: start;
}

.story-cover-chapter {
  display: block;
  margin-block-end: 1.4em;
}

.story-cover-author {
  display: block;
}

@media (max-width: 767px) {
  /* 紙面が小さいので、題字と下部の空きを詰めて一段に収める */
  .flip-front--cover {
    padding-bottom: 7.6rem;
  }
  .story-cover-title {
    font-size: clamp(0.88rem, 2.05svh, 1.15rem);
  }
  .story-cover-meta {
    height: 8em;
    bottom: 2.4rem;
  }
}

/* DISCOGRAPHY：三枚のジャケットが順に降りてきて重なる */

.disco-stack {
  position: relative;
  margin-top: 2.6rem;
}

.disco-list {
  display: grid;
  gap: 3.6rem;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 1.5rem;
  list-style: none;
}

.disco-entry {
  display: grid;
  gap: 1.6rem;
}

.disco-count {
  display: none;
}

@media (min-width: 1024px) {
  .disco-entry {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    align-items: center;
    gap: clamp(1.4rem, 3vw, 3rem);
  }
}

/* ここから下は、JSが .is-active を付けたときだけ */

.js .disco-stack.is-active {
  padding: 0 1.5rem;
  /* カードが舞台の外へ出る量。ここが「切られずに置ける」余地になる */
  --stage-slack: clamp(2.2rem, 4.4vw, 4.2rem);
}

.js .disco-stack.is-active .disco-stack-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.js .disco-stack.is-active .disco-list {
  position: relative;
  display: block;
  width: min(94vw, 78rem);
  height: min(76svh, 42rem);
  max-width: none;
  margin: 0;
  padding: 0;
}

.js .disco-stack.is-active .disco-entry {
  position: absolute;
  inset: 0;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  align-items: center;
  gap: clamp(1.4rem, 3vw, 3rem);
  /* 三項が同じ場所に重なっているため、上に載った項の枠が
     下の項のリンクを覆ってしまう。枠そのものは指を通し、
     押せるところ（いま読める楽曲情報とジャケット）だけが受ける */
  pointer-events: none;
}

/* 後から来た一枚ほど手前。三枚が机の上に積まれた順そのまま */
.js .disco-stack.is-active .disco-entry:nth-child(1) { z-index: 1; }
.js .disco-stack.is-active .disco-entry:nth-child(2) { z-index: 2; }
.js .disco-stack.is-active .disco-entry:nth-child(3) { z-index: 3; }
.js .disco-stack.is-active .disco-entry:nth-child(n+4) { z-index: 4; }

/* 左：いま読める一項だけを灯す（文字の組み直しは decode が担う） */
.js .disco-stack.is-active .disco-note {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.42s var(--ease-out);
}

.js .disco-stack.is-active .disco-entry.is-past .disco-note {
  transform: translateY(-7px);
}

.js .disco-stack.is-active .disco-entry.is-current .disco-note {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* 右：ジャケットの舞台 */
.js .disco-stack.is-active .disc {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--stage-slack) var(--stage-slack);
  overflow: hidden;
  /* 舞台は素通し。押せるのはカードそのものだけ */
  pointer-events: none;
}

.js .disco-stack.is-active .disc-link {
  width: 100%;
  pointer-events: auto;
  /* 置かれる前は見えない。位置と濃さはJSが1フレームずつ書く */
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  /* 着地の瞬間だけ、縁にわずかな月あかりが差す（--land は0〜1） */
  border-color: rgba(215, 201, 155, calc(0.16 + var(--land, 0) * 0.16));
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.42),
    0 34px 68px rgba(0, 0, 0, 0.34);
}

.js .disco-stack.is-active .disc-link:hover,
.js .disco-stack.is-active .disc-link:focus-visible {
  border-color: var(--coloraccent);
}

/* 文字の組み直し（decode） */
/* 器そのものの display は変えない（見出しや段は block のまま）。 */
.disco-decode {
  position: relative;
}

.disco-decode-visual {
  display: inline-block;
  white-space: pre-wrap;
  will-change: clip-path, transform;
}

/* 日本語は字を総取り替えにせず、左から現れる見せ方を主にする */
.disco-decode--jp .disco-decode-visual {
  clip-path: inset(0 calc(var(--veil, 0) * 100%) -0.25em 0);
  transform: translateX(calc(var(--jitter, 0) * 1px));
}

.js .disco-stack.is-active .disco-count {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--colortextmuted);
}

/* 丁付け（何枚目か）は、ジャケットが通らない左の余白へ置く */
@media (min-width: 768px) {
  .js .disco-stack.is-active .disco-count {
    position: absolute;
    z-index: 5;
    left: calc(50% - min(94vw, 78rem) / 2);
    top: calc(50% + min(76svh, 42rem) / 2 - 1.6em);
    margin: 0;
  }
}

/* スマホ：上に楽曲情報、下にジャケットの窓 */
@media (max-width: 767px) {
  /* 左右の余白は節（.section）が持っているので、ここでは足さない。 */
  .js .disco-stack.is-active {
    padding: 0;
    --stage-slack: 1.3rem;
  }

  .js .disco-stack.is-active .disco-list {
    width: 100%;
    height: min(86svh, 40rem);
  }

  /* 上段＝楽曲情報（残り全部）／下段＝ジャケットの窓（中身の高さ）。 */
  .js .disco-stack.is-active .disco-entry {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.9rem;
  }

  .js .disco-stack.is-active .disc {
    height: auto;
    display: block;
    padding: 1.1rem var(--stage-slack) 3.2rem;
  }

  /* 帯は「丁付け／曲名／YouTube」の三つが一行に収まるところまで詰める */
  .js .disco-stack.is-active .disc-caption {
    gap: 0.4rem 0.5rem;
    padding: 0.7rem 0.72rem;
  }

  .js .disco-stack.is-active .disc-caption-title {
    font-size: 0.88rem;
    letter-spacing: 0.04em;
  }

  .js .disco-stack.is-active .disc-caption-play {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }

  .js .disco-stack.is-active .disc-link {
    box-shadow:
      0 10px 20px rgba(0, 0, 0, 0.42),
      0 22px 44px rgba(0, 0, 0, 0.32);
  }

  .js .disco-stack.is-active .disco-note-song {
    font-size: clamp(1.45rem, 6.4vw, 1.9rem);
  }

  .js .disco-stack.is-active .disco-note-stream {
    margin-top: 0.85rem;
  }

  .js .disco-stack.is-active .disco-credits {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    gap: 0.3rem;
  }

  .js .disco-stack.is-active .disco-count {
    margin-top: 0.8rem;
  }
}

/* 縦に低い端末では、余白を詰めて奥付まで収める */
@media (max-width: 767px) and (max-height: 740px) {
  .js .disco-stack.is-active .disco-list {
    height: 90svh;
  }
  .js .disco-stack.is-active .disc {
    padding-bottom: 2.2rem;
  }
  .js .disco-stack.is-active .disco-credits {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
  }
}

/* LYRICS（終章）：散らばった文字を拾い集めて歌詞にする */

.lyrics {
  padding-bottom: clamp(3rem, 8vh, 6rem);
}

.lyrics-scroll {
  position: relative;
  margin-top: 2.4rem;
}

.lyrics-stage {
  display: grid;
  gap: clamp(2.6rem, 7vh, 5rem);
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* 歌詞（読み上げ・検索・JS無効時に読まれるほう） */
.lyrics-accessible {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2.4vw, 1.55rem);
  line-height: 2.1;
  letter-spacing: 0.08em;
  text-align: center;
  color: rgba(244, 241, 232, 0.9);
}

/* 見た目の層。JSが有効なときだけ使う */
.lyrics-visual {
  display: none;
}

/* ここから下は、JSが .is-active を付けたときだけ */

.js .lyrics-scroll.is-active .lyrics-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  /* 散った断片が紙面の外へ出ても、ページの幅を広げない。 */
  overflow: clip;
  /* 上段＝ジャケットと曲名（動かない）／下段＝歌詞。 */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  place-items: center;
  gap: 0;
  padding: clamp(14px, 3.4vh, 40px) 1.5rem 0;
}

/* 場面はすべて同じ場所へ重ね、いま見せる一枚だけを描く */
.js .lyrics-scroll.is-active .lyrics-scene {
  grid-area: 1 / 1;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
}

.js .lyrics-scroll.is-active .lyrics-scene.is-live {
  visibility: visible;
}

/* 歌詞の正しい文字は、演出中は目に見せない（読み上げには残す） */
.js .lyrics-scroll.is-active .lyrics-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.js .lyrics-scroll.is-active .lyrics-visual {
  display: block;
  text-align: center;
  /* 散らす量。ここを変えれば散らばりの大きさが変わる */
  --spread-x: 250px;
  --spread-y: 130px;
  --spread-r: 7deg;
}

/* 完成した歌詞は縦組み。元の1行が縦の1列になり、右から左へ並ぶ。 */
.js .lyrics-scroll.is-active .lyrics-visual {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  width: fit-content;
  /* 下段の高さを超えない。超えるとジャケットへ被る */
  max-height: 100%;
  margin: 0 auto;
  text-align: start;
}

.js .lyrics-scroll.is-active .lyric-line {
  display: block;
  font-family: var(--font-serif);
  /* 中央上部のジャケットと並べて見えるよう、歌詞はさらに少し控える */
  font-size: clamp(18px, 2.1vw, 34px);
  /* 字を小さくしたぶん、列と列のあいだは少し広げる */
  line-height: 2.05;
  letter-spacing: 0.08em;
  color: rgba(244, 241, 232, 0.94);
}

/* 列が5本になる場面でも、字を小さくせず列の間だけを詰める */
/* 列の多い場面（4〜5列）だけ、列と列のあいだをわずかに詰める */
.js .lyrics-scroll.is-active .lyrics-scene[data-scene="3"] .lyric-line {
  line-height: 1.8;
}

/* 断片。外側は「散る／集まる」だけを持つ。 */
.js .lyrics-scroll.is-active .lyric-frag {
  display: inline-block;
  white-space: pre;
  transform:
    translate3d(
      calc(var(--nx) * var(--spread-x) * (1 - var(--p, 0)) + var(--gx) * var(--spread-x) * 0.8 * var(--q, 0)),
      calc(var(--ny) * var(--spread-y) * (1 - var(--p, 0)) + var(--gy) * var(--spread-y) * 0.8 * var(--q, 0)),
      0
    )
    rotate(calc((var(--nr) * (1 - var(--p, 0)) + var(--gr) * var(--q, 0)) * var(--spread-r)));
  opacity: calc(0.24 + 0.76 * var(--p, 0) - 0.62 * var(--q, 0));
}

/* 内側：夜空を漂う。 */
.js .lyrics-scroll.is-active .lyric-float {
  display: inline-block;
}

/* 漂わせるのは、いま出ている場面の断片だけ。 */
.js .lyrics-scroll.is-active .lyrics-scene.is-live .lyric-float {
  animation: lyric-float var(--fd, 9s) ease-in-out var(--fdl, 0s) infinite alternate;
}

@keyframes lyric-float {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  to {
    transform:
      translate3d(
        calc(var(--fx, 0px) * var(--fs, 1)),
        calc(var(--fy, 0px) * var(--fs, 1)),
        0
      )
      rotate(calc(var(--fr, 0deg) * var(--fs, 1)))
      scale(calc(1 + 0.02 * var(--fs, 1)));
  }
}

/* 3つに1つは月あかり寄りの色にして、拾い集めている感じを出す */
.js .lyrics-scroll.is-active .lyric-frag:nth-child(3n) {
  color: rgba(215, 201, 155, 0.9);
}

.js .lyrics-scroll.is-active .lyric-frag:nth-child(5n) {
  color: rgba(178, 192, 218, 0.86);
}

/* 「月を詠んで」で始まる場面だけ、ひと回り大きく詠む */
.js .lyrics-scroll.is-active .lyrics-scene[data-scene="4"] .lyric-line:first-child,
.js .lyrics-scroll.is-active .lyrics-scene[data-scene="9"] .lyric-line:first-child {
  font-size: clamp(20px, 2.4vw, 38px);
}

/* スマホ：散らす量を小さく、字は読める大きさを保つ */
@media (max-width: 767px) {
  .js .lyrics-scroll.is-active .lyrics-visual {
    --spread-x: 108px;
    --spread-y: 96px;
    --spread-r: 5deg;
  }
  .js .lyrics-scroll.is-active .lyric-line {
    font-size: clamp(16px, 4.4vw, 20px);
    line-height: 2.1;
  }
  .js .lyrics-scroll.is-active .lyrics-scene[data-scene="4"] .lyric-line:first-child,
  .js .lyrics-scroll.is-active .lyrics-scene[data-scene="8"] .lyric-line:first-child {
    font-size: clamp(18px, 5.2vw, 23px);
  }
  .js .lyrics-scroll.is-active .lyrics-stage {
    padding: 0 1rem;
  }
}

/* 動きを控える設定では、演出をやめて縦に並んだ歌詞ページにする */
@media (prefers-reduced-motion: reduce) {
  .js .lyrics-scroll.is-active .lyrics-stage {
    position: static;
    height: auto;
    display: grid;
    gap: clamp(2.6rem, 7vh, 5rem);
    place-items: stretch;
  }
  .js .lyrics-scroll.is-active .lyrics-scene {
    grid-area: auto;
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .js .lyrics-scroll.is-active .lyrics-accessible {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .js .lyrics-scroll.is-active .lyrics-visual {
    display: none;
  }
  .js .lyrics-scroll.is-active .lyric-float {
    animation: none;
  }
  /* 柱は静止して出したまま。歌詞の前後に一度だけ置く */
  .js .lyrics-scroll.is-active .lyrics-meta {
    grid-area: auto;
    justify-self: center;
    margin: 0 auto 2.6rem;
    padding-right: 0;
  }
  .js .lyrics-scroll.is-active .lyrics-scene,
}

/* LYRICS：右に立てておく一枚（ジャケット・曲名・作詞） */

.lyrics-meta {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  margin: 0 auto 2.6rem;
  width: clamp(180px, 20vw, 310px);
  text-align: center;
  pointer-events: none;
}

.lyrics-meta-art {
  display: block;
  width: clamp(200px, 18vw, 290px);
  border: 1px solid rgba(244, 241, 232, 0.2);
  /* TOPのジャケットと同じ考え方の深い影。ただし一回り弱く。 */
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(5, 7, 13, 0.5);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

/* マウスで狙える環境だけ、ごく弱く手前へ寄る */
@media (hover: hover) and (pointer: fine) {
  .js .lyrics-meta-art.is-visible:hover {
    transform: perspective(900px) rotateX(1.5deg) scale(1.015);
    box-shadow:
      0 26px 56px rgba(0, 0, 0, 0.62),
      0 0 0 1px rgba(5, 7, 13, 0.5);
  }
}

.lyrics-meta-art-inner {
  display: block;
}

.lyrics-meta-art img {
  display: block;
  width: 100%;
  height: auto;
  /* 正方形の原寸どおり。切り抜かない */
  object-fit: contain;
}

/* 登場：奥から紙が手前へ浮き上がる（TOPのジャケットと同じ考え方）。 */
.js .lyrics-meta-art.reveal {
  transform:
    perspective(900px) rotateX(5deg) rotateZ(1.6deg)
    translateY(32px) scale(0.925);
  transition:
    opacity 1.2s var(--ease-out),
    transform 1.2s var(--ease-out),
    box-shadow 1.2s var(--ease-out);
}

/* 置かれたあとも、ほんのわずかに寝かせたままにして厚みを見せる */
.js .lyrics-meta-art.reveal.is-visible {
  transform: perspective(900px) rotateX(1.5deg);
}

/* 呼吸：置かれたあと、ごくゆっくり上下する */
.js .lyrics-meta-art.is-visible .lyrics-meta-art-inner {
  animation: lyrics-art-breathe 8.5s ease-in-out 1.2s infinite alternate;
}

@keyframes lyrics-art-breathe {
  from { transform: translate3d(0, 0, 0) rotate(-0.32deg) scale(1); }
  to { transform: translate3d(0, -6px, 0) rotate(0.32deg) scale(1.01); }
}

/* 置かれた直後に、紙の反射のような薄い光が一度だけ斜めに通る */
.lyrics-meta-art {
  position: relative;
  overflow: hidden;
}

/* ジャケット下端の映り込み。画像そのものは暗くしすぎない */
.lyrics-meta-art-inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 7, 13, 0.34), transparent);
}

.js .lyrics-meta-art::after {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-46%, 46%, 0);
  background: linear-gradient(
    68deg,
    transparent 38%,
    rgba(244, 241, 232, 0.08) 47%,
    rgba(244, 241, 232, 0.13) 50%,
    rgba(244, 241, 232, 0.08) 53%,
    transparent 62%
  );
}

.js .lyrics-meta-art.is-visible::after {
  animation: lyrics-art-sheen 1.7s var(--ease-out) 0.7s 1 both;
}

@keyframes lyrics-art-sheen {
  from { opacity: 0; transform: translate3d(-46%, 46%, 0); }
  26% { opacity: 1; }
  74% { opacity: 1; }
  to { opacity: 0; transform: translate3d(46%, -46%, 0); }
}

/* 曲名と作詞は横書き。縦書きは歌詞本文の「決め」だけの役にする */
.lyrics-meta-title,
.lyrics-meta-credit {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.8;
}

.lyrics-meta-title {
  font-size: clamp(11px, 1vw, 15px);
  letter-spacing: 0.12em;
  color: rgba(244, 241, 232, 0.82);
}

/* 折り返すときは曲名とユニット名の切れ目で折る（語の途中で切らない）。 */
.lyrics-meta-title span {
  white-space: nowrap;
}

.lyrics-meta-credit {
  font-size: clamp(10px, 0.85vw, 13px);
  letter-spacing: 0.1em;
  color: rgba(244, 241, 232, 0.58);
}

/* 演出中は、画面の中央上部（歌詞の真上）へ置く */
.js .lyrics-scroll.is-active .lyrics-meta {
  grid-area: 1 / 1;
  justify-self: center;
  align-self: start;
  grid-auto-flow: row;
  margin: 0;
  padding: 0;
  z-index: 2;
}

/* 歌詞は下段の中央。固定メタと同じ軸に立つ */
.js .lyrics-scroll.is-active .lyrics-scene {
  grid-area: 2 / 1;
  justify-self: center;
  align-self: center;
  padding: clamp(10px, 2vh, 24px) 0 0;
}

/* 動きを控える設定では、ジャケットも置かれた姿のまま静止させる。 */
@media (prefers-reduced-motion: reduce) {
  .js .lyrics-meta-art.is-visible .lyrics-meta-art-inner,
  .js .lyrics-meta-art.is-visible::after {
    animation: none;
  }
  .js .lyrics-meta-art.reveal,
  .js .lyrics-meta-art.reveal.is-visible {
    transform: none;
    transition: none;
  }
  .js .lyrics-meta-art::after {
    content: none;
  }
}

/* LYRICS：動画への導線 */

.lyrics-cta {
  margin: clamp(2.4rem, 7vh, 5rem) auto 0;
  text-align: center;
}

.lyrics-cta-link {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 0.9em;
  padding: 0.9em 0.2em;
  font-family: var(--font-serif);
  font-size: clamp(0.88rem, 2vw, 1.08rem);
  letter-spacing: 0.16em;
  color: rgba(244, 241, 232, 0.86);
  text-decoration: none;
  border-bottom: 1px solid var(--colorline);
  transition:
    color 0.45s var(--ease-out),
    letter-spacing 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out);
}

.lyrics-cta-link:hover,
.lyrics-cta-link:focus-visible {
  color: var(--coloraccent);
  letter-spacing: 0.21em;
  border-bottom-color: var(--coloraccent);
  text-decoration: none;
}

.lyrics-cta-mark {
  transition: transform 0.45s var(--ease-out);
}

.lyrics-cta-link:hover .lyrics-cta-mark,
.lyrics-cta-link:focus-visible .lyrics-cta-mark {
  transform: translateX(6px);
}

/* スマホ：柱を細くして、縦組みの歌詞と当たらないようにする */
@media (max-width: 767px) {
  .lyrics-meta-art {
    width: clamp(68px, 21vw, 92px);
  }
  .lyrics-meta {
    gap: 0.7rem;
  }
  .lyrics-meta {
    width: clamp(170px, 60vw, 240px);
    gap: 0.5rem;
  }
  .lyrics-meta-art {
    width: clamp(125px, 35vw, 160px);
  }
  .lyrics-meta-title {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .lyrics-meta-credit {
    font-size: 9px;
    letter-spacing: 0.06em;
  }
  /* スマホも中央上部。歌詞はその下で読ませる */
  .js .lyrics-scroll.is-active .lyrics-stage {
    padding: 12px 1rem 0;
  }
  .js .lyrics-scroll.is-active .lyrics-meta {
    padding: 0;
  }
  .js .lyrics-scroll.is-active .lyrics-scene {
    padding: 14px 0 0;
  }
  /* スマホでは呼吸をさらに控える */
  @keyframes lyrics-art-breathe {
    from { transform: translate3d(0, 0, 0) rotate(-0.2deg) scale(1); }
    to { transform: translate3d(0, -3px, 0) rotate(0.2deg) scale(1.006); }
  }
}

/* 最後の歌詞が散ったあとの余白。ここから「表紙へ戻る」が現れる */
.lyrics-close {
  height: clamp(6rem, 18vh, 12rem);
}

/* OFFICIAL LINKS：スマホでは柱を折り返して並べる（横スクロールなし） */
@media (max-width: 767px) {
  .links-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    row-gap: 2rem;
    margin-top: 2.4rem;
    padding-top: 1.8rem;
  }
  .links-list a {
    height: clamp(15rem, 40svh, 18rem);
    padding: 0.7rem 0.25rem 0.9rem;
  }
  .links-list a > span:first-of-type {
    letter-spacing: 0.12em;
  }
  .links-note {
    margin-block-start: 1em;
  }
}

@media (max-width: 400px) {
  .links-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* STORY：頁が正面へ来たら本文が静かに浮かび上がる */

.js #concept .flip-body > p {
  opacity: 0;
  transition: opacity 1.15s var(--ease-out);
}

.js #concept .flip-page.is-revealed .flip-body > p {
  opacity: 1;
}

/* 列ごとにわずかな時間差をつける（読む邪魔にならない範囲で） */
.js #concept .flip-page.is-revealed .flip-body > p:nth-child(1) { transition-delay: 0.1s; }
.js #concept .flip-page.is-revealed .flip-body > p:nth-child(2) { transition-delay: 0.18s; }
.js #concept .flip-page.is-revealed .flip-body > p:nth-child(3) { transition-delay: 0.26s; }
.js #concept .flip-page.is-revealed .flip-body > p:nth-child(4) { transition-delay: 0.34s; }
.js #concept .flip-page.is-revealed .flip-body > p:nth-child(n+5) { transition-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
  .js #concept .flip-body > p {
    opacity: 1;
    transition: none;
  }
}

/* OFFICIAL LINKS：附録のロゴ */

.links-logo {
  margin: 2.6rem auto 0;
  text-align: center;
}

.links-logo img {
  width: clamp(9rem, 22vw, 15rem);
  height: auto;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .links-logo {
    margin-top: 2.2rem;
  }
  .links-logo img {
    width: clamp(8.5rem, 42vw, 11rem);
  }
}

/* メンバー頁：縦に短い画面での写真サイズ */

@media (min-width: 768px) and (max-height: 779px) {
  .flip-member .member-photo {
    width: clamp(5.6rem, min(26vw, 15.2svh), 8.9rem);
  }
}

/* Official Lyric Video の打鍵カーソル */
.hero-video-en .typo-caret {
  height: 0.9em;
  margin-left: 0.3em;
  vertical-align: -0.06em;
}

/* HERO：ひとつの月で見せるスクロールシーン */

.hero-sequence {
  /* JSが有効なときだけ、下の .js ルールで縦に伸ばす */
  --hero-progress: 0;
  --moon-zoom: 1;
  --logo-op: 1;
  --logo-scale: 1;
  --major-op: 1;
  --title-op: 1;
  --cta-op: 1;
  --moon-drift: 1;
}

/* JS有効時：スクロールシーンとして成立させる */
.js .hero-sequence {
  min-height: 300svh;
}

.js .hero-sequence .hero-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  /* 月の層と楽曲情報の層を、同じ1マスへ重ねて中央に置く */
  display: grid;
  grid-template-areas: "stage";
  place-items: center;
}

.js .hero-sequence .hero-stack {
  grid-area: stage;
  min-height: 0;
  /* 舞台のちょうど中央に月が来るよう、上下の余白は持たせない */
  padding-block: 0;
  gap: 0;
  display: grid;
  grid-template-areas: "stage";
  place-items: center;
}

.js .hero-sequence .hero-moon-zoom,
.js .hero-sequence .hero-song {
  grid-area: stage;
}

/* シーン中はロックアップの上下マージンを外す。 */
.js .hero-sequence .hero-moon-lockup {
  margin-block: 0;
}

/* 月のズーム。画面中央へ向かって近づいていくように見せる */
.js .hero-sequence .hero-moon-zoom {
  z-index: 1;
  transform: scale(var(--moon-zoom));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* 題字：スクロールで静かに退場する。 */
.js .hero-sequence .hero-title {
  opacity: var(--logo-op);
  scale: var(--logo-scale);
}

/* 楽曲情報：巨大化した月の手前に浮かぶ */
.js .hero-sequence .hero-song {
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 2.1svh, 1.4rem);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-inline: 1.5rem;
  pointer-events: none; /* 透明なあいだ下の要素を邪魔しない */
}

.js .hero-sequence .hero-song > * {
  pointer-events: auto;
}

.js .hero-sequence .hero-eyebrow {
  opacity: var(--major-op);
}

.js .hero-sequence .hero-single {
  opacity: var(--title-op);
  transform: translateY(calc((1 - var(--title-op)) * 8px));
}

/* ジャケットの登場は専用のラッパーが担当する。 */
/* Listen Now：ジャケットの少しあとに現れ、月の中でシーンを締める。 */
.js .hero-sequence .hero-song-cta {
  opacity: var(--cta-op);
  transform: translateY(calc((1 - var(--cta-op)) * 10px));
  transition:
    opacity 0.9s var(--ease-out) 0.35s,
    transform 0.9s var(--ease-out) 0.35s;
}

/* 月の明部と重なっても枠と文字が沈まないよう、ボタンの背後だけごく薄く落とす */
.js .hero-sequence .hero-song-cta .btn {
  background-color: rgba(5, 7, 13, 0.38);
  backdrop-filter: none;
}

/* ジャケットは「スクロール量にぴたりと追従する板」ではなく */
.js .hero-sequence .hero-jacket-wrap {
  /* 共通の --ease-out は前のめりな曲線で、2.4秒を指定して */
  --ease-emerge: cubic-bezier(0.25, 0.1, 0.35, 1);
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition:
    opacity 2.4s var(--ease-emerge),
    transform 2.4s var(--ease-emerge);
  will-change: transform, opacity;
}

.js .hero-sequence .hero-jacket-wrap.is-jacket-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 月の手前に文字が来るので、明部と重なっても読めるよう */
.js .hero-sequence .hero-eyebrow,
.js .hero-sequence .hero-single {
  text-shadow:
    0 0 14px rgba(5, 7, 13, 0.85),
    0 0 34px rgba(5, 7, 13, 0.6);
}

/* シーン終了後は通常フローへ戻る */
.hero-after {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: clamp(1.5rem, 4svh, 2.75rem) 1.5rem clamp(4rem, 9svh, 6rem);
  text-align: center;
}

/* スマホだけ、HEROの終わりから楽曲誕生背景までの助走を詰める （パソコンは現状のまま） */
@media (max-width: 767px) {
  .hero-after {
    padding-top: clamp(0.4rem, 1svh, 0.8rem);
  }
}

@media (max-width: 767px) {
  /* スマホは同じ流れのまま、スクロール距離と拡大量を控えめ */
  /* Listen Nowが出そろってから節が終わるまでの「余韻」が長く */
  .js .hero-sequence {
    min-height: 240svh;
  }

  /* スマホの最初の一画面：月と題字をもう少し上 */
  .js .hero {
    padding-top: 0;
  }

  .js .hero-sequence .hero-stage {
    /* 中身は (100svh - この余白) の中央＝画面のおよそ45%の高さに来る */
    padding-bottom: 10svh;
  }
}

/* 動きを減らす設定：長いスクロール演出をやめ、静的な並びへ */
@media (prefers-reduced-motion: reduce) {
  .js .hero-sequence {
    min-height: 100svh;
  }
  .js .hero-sequence .hero-stage {
    position: static;
    height: auto;
    display: block;
  }
  .js .hero-sequence .hero-stack {
    display: flex;
    min-height: 100svh;
    gap: clamp(1.6rem, 5svh, 3rem);
    padding: calc(var(--header-height) + 4svh) 1.5rem clamp(4rem, 9svh, 6rem);
  }
  .js .hero-sequence .hero-moon-zoom {
    transform: none;
  }
  .js .hero-sequence .hero-title,
  .js .hero-sequence .hero-eyebrow,
  .js .hero-sequence .hero-single,
  .js .hero-sequence .hero-jacket-wrap {
    opacity: 1;
    transform: none;
    scale: 1;
    translate: none;
  }
}

/* JSが動かない環境では打鍵演出の器（.typo-line）が空のままになるため */
html:not(.js) [data-typo] .visually-hidden {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* MEMBERS：個人プロフィール本文は横組み */

#profile .flip-member .member-bio {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  display: block;
  /* 写真・名前・SNSを引いた残りを使う。中身より高くはならない */
  flex: 0 1 auto;
  align-self: center;
  justify-self: center;
  width: min(100%, 34rem);
  min-height: 0;
  height: auto;
  max-height: 100%;
  /* 上下左右とも auto。名前とSNSのあいだに残った余白が上下へ均等に配られ */
  margin: auto;
  padding: 0;
  overflow: hidden;
  text-align: left;
  font-family: var(--font-serif);
  /* 紙面の高さに連動させつつ、下限で読める大きさを守る */
  font-size: clamp(0.88rem, 1.6svh, 1rem);
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: var(--colortextmuted);
  font-feature-settings: "palt";
}

.flip-front--paper .member-bio {
  color: rgba(23, 27, 40, 0.72);
}

/* 段落は一字下げをやめ、段落間のアキだけで切れ目を見せる */
#profile .flip-member .member-bio .member-bio-p {
  margin: 0;
  padding: 0;
  text-indent: 0;
  text-align: left;
}

#profile .flip-member .member-bio .member-bio-p + .member-bio-p,
#profile .unit-bio .unit-bio-p + .unit-bio-p {
  margin-top: 0.75em;
}

/* 横組みでは縦中横も欧文の回転も要らない。 */
#profile .flip-member .member-bio .tcy {
  -webkit-text-combine: none;
  text-combine-upright: none;
  letter-spacing: inherit;
}

#profile .flip-member .member-bio [lang="en"] {
  text-orientation: mixed;
}

/* 分量の多い頁（40mP）だけ、行間と段落のアキを詰め */
#profile .flip-member .member-bio[data-bio="long"] {
  font-size: clamp(0.62rem, 1.45svh, 0.86rem);
  line-height: 1.66;
}

/* 紙面が高くとれるパソコンでは、その頁ぶんだけ字を戻す */
@media (min-width: 1024px) and (min-height: 860px) {
  #profile .flip-member .member-bio[data-bio="long"] {
    font-size: clamp(0.68rem, 1.55svh, 0.87rem);
  }
}

#profile .flip-member .member-bio[data-bio="long"] .member-bio-p + .member-bio-p {
  margin-top: 0.4em;
}

@media (max-width: 767px) {
  /* スマホでも、写真・名前・肩書き・本文・SNSを紙面の中央軸に揃える。 */
  /* スマホは紙面が小さいので、写真と名前は上の帯にまとめて段の長さを稼ぐ。 */
  /* スマホでも、写真・名前・肩書き・本文・SNSをひとつずつ紙面の中央軸へ揃える */
  .flip-member {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "photo"
      "name"
      "role"
      "bio"
      "links";
    justify-items: center;
    align-items: start;
    row-gap: 0.05rem;
  }

  .flip-member .member-photo {
    grid-area: photo;
    /* 肖像を頁の主役にする。 */
    width: clamp(5.5rem, min(31vw, 14.2svh), 11rem);
    margin: 0 auto 0.3rem;
  }

  /* 紹介文がいちばん長い頁（40mP）だけは本文を優先し */
  .flip-member[data-bio="long"] .member-photo {
    width: clamp(5rem, min(24vw, 14.2svh), 9rem);
  }

  .flip-member .flip-member-name {
    grid-area: name;
    text-align: center;
  }

  .flip-member .flip-member-role {
    grid-area: role;
    margin-top: 0;
    text-align: center;
  }

  /* 本文の箱は紙面の幅から左右16pxずつ内側へ。 */
  #profile .flip-member .member-bio {
    grid-area: bio;
    /* 本文に割り当てた行（minmax(0,1fr)）の中で上下中央。 */
    align-self: center;
    align-self: safe center;
    justify-self: center;
    width: min(100% - 2rem, 34rem);
    height: auto;
    max-height: 100%;
    margin: 0 auto;
    font-size: clamp(0.83rem, 1.62svh, 0.94rem);
    line-height: 1.8;
    letter-spacing: 0.02em;
  }

  #profile .flip-member .member-bio .member-bio-p + .member-bio-p,
  #profile .unit-bio .unit-bio-p + .unit-bio-p {
    margin-top: 0.68em;
  }

  #profile .flip-member .member-bio[data-bio="long"] {
    font-size: clamp(0.55rem, 1.4svh, 0.68rem);
    line-height: 1.66;
  }

  #profile .flip-member .member-bio[data-bio="long"] .member-bio-p + .member-bio-p {
    margin-top: 0.34em;
  }

  /* メンバー頁だけ、版面の余白をわずかに詰めて本文の幅を稼ぐ */
  #profile .flip-front {
    padding-inline: 0.5rem;
  }

  .flip-member .member-links {
    grid-area: links;
    justify-content: center;
  }

  /* 頁の足元（ユニット名＋欧文）は既定が左寄せの横並び。 */
  .flip-foot {
    justify-content: center;
    text-align: center;
  }

  /* 結成頁も、写真・本文・足元の中心をそろえる */
  .flip-front--paper .member-photo--wide {
    margin-inline: auto;
  }

  .flip-member .member-photo,
  .flip-member .flip-member-name,
  .flip-member .flip-member-role,
  .flip-member .member-links {
    justify-self: center;
  }

}

/* 公式SNS（画面左下の小さなアイコン） */

.social-dock {
  display: flex;
  justify-content: center;
  gap: 1.05rem;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
}

.social-dock a {
  display: block;
  padding: 0.35rem;
  color: rgba(245, 245, 240, 0.82);
  opacity: 0.72;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.social-dock svg {
  display: block;
  width: 16px;
  height: 16px;
}

.social-dock a:hover,
.social-dock a:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

@media (min-width: 768px) {
  .social-dock {
    position: fixed;
    left: clamp(18px, 2.2vw, 36px);
    /* 頁カウンタ（左下・高さ最大60px）の上へ逃がして重ねない */
    bottom: clamp(90px, 10svh, 108px);
    z-index: 45;
    margin: 0;
    gap: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-dock a {
    transition: none;
  }
  .social-dock a:hover,
  .social-dock a:focus-visible {
    transform: none;
  }
}

/* MEMBERS：めくられた頁から、本文が段落順に静かに現れる */

.js #profile .flip-page .member-bio-p {
  opacity: 0;
  transform: translateY(9px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}

.js #profile .flip-page.is-revealed .member-bio-p {
  opacity: 1;
  transform: translateY(0);
}

/* 段落どうしは0.09秒差。最後の段落も1.2秒以内には出そろう */
.js #profile .flip-page.is-revealed .member-bio-p:nth-child(1) { transition-delay: 0.06s; }
.js #profile .flip-page.is-revealed .member-bio-p:nth-child(2) { transition-delay: 0.15s; }
.js #profile .flip-page.is-revealed .member-bio-p:nth-child(3) { transition-delay: 0.24s; }
.js #profile .flip-page.is-revealed .member-bio-p:nth-child(4) { transition-delay: 0.33s; }
.js #profile .flip-page.is-revealed .member-bio-p:nth-child(5) { transition-delay: 0.42s; }
.js #profile .flip-page.is-revealed .member-bio-p:nth-child(6) { transition-delay: 0.51s; }
.js #profile .flip-page.is-revealed .member-bio-p:nth-child(n+7) { transition-delay: 0.60s; }

@media (prefers-reduced-motion: reduce) {
  .js #profile .flip-page .member-bio-p {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* MEMBERS：肖像写真が、めくった頁の上に静かに浮かび上がる */

.js #profile .flip-member .member-photo {
  position: relative;
  opacity: 0;
  transform: translateY(12px) scale(0.972);
  transition:
    opacity 1s var(--ease-out),
    transform 1.05s var(--ease-out);
}

.js #profile .flip-page.is-revealed .flip-member .member-photo {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.04s;
}

/* 像が出たあと、紙の反射のような淡い光が左下から右上へ一度だけ通る。 */
.js #profile .flip-member .member-photo::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-46%, 46%, 0);
  background: linear-gradient(
    68deg,
    transparent 38%,
    rgba(248, 245, 236, 0.1) 47%,
    rgba(248, 245, 236, 0.17) 50%,
    rgba(248, 245, 236, 0.1) 53%,
    transparent 62%
  );
}

.js #profile .flip-page.is-revealed .flip-member .member-photo::after {
  animation: photoglint 1.6s var(--ease-out) 0.45s 1 both;
}

@keyframes photoglint {
  from { opacity: 0; transform: translate3d(-46%, 46%, 0); }
  24% { opacity: 1; }
  76% { opacity: 1; }
  to { opacity: 0; transform: translate3d(46%, -46%, 0); }
}

/* 名前と肩書きは、写真とほぼ同時に灯る（位置は動かさない） */
.js #profile .flip-member .flip-member-name,
.js #profile .flip-member .flip-member-role {
  opacity: 0;
  transition: opacity 0.75s var(--ease-out);
}

.js #profile .flip-page.is-revealed .flip-member .flip-member-name {
  opacity: 1;
  transition-delay: 0.08s;
}

.js #profile .flip-page.is-revealed .flip-member .flip-member-role {
  opacity: 1;
  transition-delay: 0.13s;
}

@media (prefers-reduced-motion: reduce) {
  .js #profile .flip-member .member-photo,
  .js #profile .flip-member .flip-member-name,
  .js #profile .flip-member .flip-member-role {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
  .js #profile .flip-member .member-photo::after,
  .js #profile .flip-page.is-revealed .flip-member .member-photo::after {
    content: none;
    animation: none;
  }
}

/* MEMBERS：紙面を粒の層より前へ出して、滑らかな面にする */

#profile .flipbook-sticky {
  z-index: 45;
}

/* メンバー頁は版面の余白をわずかに詰めて、本文の置ける面積を稼ぐ */
@media (min-width: 768px) {
  #profile .flip-front {
    padding-inline: 1.55rem;
    padding-block: 1.5rem;
  }
}

@media (max-width: 767px) {
  #profile .flip-front {
    padding-block: 0.6rem 0.75rem;
  }

  /* 章の柱（一・二…）の帯は、数字1文字ぶんあれば足りる。 */
  #profile .flip-front .stack-no {
    min-height: 1.2em;
  }

  #profile .flip-front .stack-head {
    padding-bottom: 0.35rem;
  }

  /* SNSは紙面の足元のまま。罫線までのアキだけ詰める */
  #profile .flip-member .member-links {
    margin-top: 0.12rem;
  }
}

/* 幕間のコピー（サイトの思想を一行で置く場所） */

.ending-copy {
  display: block;
  /* 縦組みなので、上下の余白は控えめにして段の長さを確保する。 */
  padding: clamp(4.5rem, 13svh, 9rem) 1.5rem clamp(1.2rem, 3svh, 2.4rem);
  text-align: center;
}

/* 縦組み。行（＝列）は右から左へ流れるの */
.ending-line {
  display: block;
  width: fit-content;
  margin: 0 auto;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.75;
  color: var(--colortext);
  font-feature-settings: "palt";
}

.ending-seg {
  display: block;
  /* 一番長い列（14文字）が画面の高さに収まるよう、字の大きさは画面高にも連動させる */
  font-size: min(clamp(2rem, 4vw, 4.2rem), 5.2svh);
  letter-spacing: 0.08em;
}

/* 二節目だけ、締めの一列としてわずかに色を寄せる */
.ending-seg:last-child {
  color: var(--coloraccent);
}

/* 文章全体が、暗闇から静かに浮かび上がる。 */
.js .ending-line {
  /* 共通の --ease-out は前のめりな曲線（0.22,1,0.36,1） */
  --ease-emerge: cubic-bezier(0.3, 0.05, 0.4, 1);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 3.4s var(--ease-emerge) 0.65s,
    transform 3.4s var(--ease-emerge) 0.65s;
  will-change: opacity, transform;
}

.js .ending-copy.is-risen .ending-line {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 767px) {
  .ending-seg {
    font-size: min(clamp(1.5rem, 7vw, 2.5rem), 5svh);
    letter-spacing: 0.06em;
  }

  /* 画面が小さいぶん、浮き上がる距離も控えめにする */
  .js .ending-line {
    transform: translateY(7px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .ending-line {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* 表紙（導入画面）の題字はロゴ画像 */

.cover-title {
  margin: 0;
  display: block;
  text-align: center;
}

.cover-logo {
  display: block;
  width: clamp(220px, 28vw, 430px);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.js .cover-logo {
  animation: cover-logo-in 1.4s var(--ease-out) 0.35s both;
}

@keyframes cover-logo-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 767px) {
  .cover-logo {
    width: clamp(180px, 60vw, 280px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .cover-logo {
    animation: none;
  }
}

/* NEWS：目次のような一覧と、一篇として読ませる記事 */

.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 画像は使わず、日付・分類・見出し・矢印だけの目次組み */
.news-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 clamp(1rem, 2.4vw, 2rem);
  width: 100%;
  padding: clamp(1.3rem, 3vh, 2rem) 0;
  border: 0;
  border-bottom: 1px solid rgba(20, 24, 42, 0.18);
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.news-list li:first-child .news-card {
  border-top: 1px solid rgba(20, 24, 42, 0.18);
}

.news-card-body {
  display: block;
  min-width: 0;
}

.news-card-meta {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.45rem;
}

.news-card-title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(0.98rem, 2vw, 1.22rem);
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.news-card-arrow {
  display: block;
  font-size: 1rem;
  color: rgba(20, 24, 42, 0.5);
  transition: transform 0.4s var(--ease-out), color 0.4s var(--ease-out);
}

.news-card:hover,
.news-card:focus-visible {
  color: #8a6f2f;
  border-bottom-color: rgba(138, 111, 47, 0.5);
}

.news-card:hover .news-card-arrow,
.news-card:focus-visible .news-card-arrow {
  transform: translateX(5px);
  color: #8a6f2f;
}

/* 記事 */

.news-detail {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(0.5rem, 2vh, 1.5rem) 0 clamp(2rem, 5vh, 3.5rem);
}

.js .news-detail {
  animation: news-detail-in 0.6s var(--ease-out) both;
}

@keyframes news-detail-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.news-detail:focus {
  outline: none;
}

.news-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 1.6rem;
  padding: 0.5em 1.1em;
  border: 1px solid var(--colorline);
  background: none;
  color: var(--colortextmuted);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.news-back:last-child {
  margin: 2.4rem 0 0;
}

.news-back:hover,
.news-back:focus-visible {
  color: var(--coloraccent);
  border-color: rgba(215, 201, 155, 0.5);
}

.news-back-arrow {
  transition: transform 0.35s var(--ease-out);
}

.news-back:hover .news-back-arrow {
  transform: translateX(-0.3em);
}

.news-detail-meta {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 0.7rem;
}

.news-detail-title {
  margin: 0 0 1.6rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 3.2vw, 2.1rem);
  line-height: 1.55;
  letter-spacing: 0.05em;
}

.news-detail-figure {
  margin: 0 0 2.2rem;
  /* 記事の版面よりわずかに広く見せる */
  width: min(100%, 940px);
  margin-inline: calc((100% - min(100%, 940px)) / 2);
}

.news-detail-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.news-detail-body p {
  margin: 0 0 1.5em;
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  line-height: 2.0;
  letter-spacing: 0.04em;
  color: var(--colortext);
}

.news-subhead {
  margin: 2.4rem 0 1rem;
  padding-left: 0.8em;
  border-left: 2px solid var(--coloraccent);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  letter-spacing: 0.1em;
}

.news-spec {
  margin: 0 0 2rem;
  border-top: 1px solid var(--colorline);
}

.news-spec > div {
  display: grid;
  grid-template-columns: minmax(6.5em, auto) minmax(0, 1fr);
  gap: 0.4rem 1.4rem;
  padding: 0.85em 0;
  border-bottom: 1px solid var(--colorline);
}

.news-spec dt {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--colortextmuted);
}

.news-spec dd {
  margin: 0;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.8;
}

.news-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  color: var(--coloraccent);
  border-bottom: 1px solid rgba(215, 201, 155, 0.4);
  padding-bottom: 0.1em;
  transition: border-color 0.3s ease;
}

.news-link:hover,
.news-link:focus-visible {
  border-bottom-color: var(--coloraccent);
}

@media (max-width: 767px) {
  .news-card {
    gap: 0 0.9rem;
    padding: 1.2rem 0;
  }
  .news-detail-body p {
    font-size: 0.94rem;
    line-height: 1.95;
  }
  .news-spec > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .news-detail {
    animation: none;
  }
  .news-card-arrow,
  .news-back-arrow {
    transition: none;
  }
}

/* NEWS：紙の上なので、文字は黒を基調にして読みやすくする */

.section--paper .news-card-title,
.section--paper .news-detail-title,
.section--paper .news-detail-body p,
.section--paper .news-spec dd,
.section--paper .news-subhead {
  color: #14182a;
}

.section--paper .news-card-meta .news-date,
.section--paper .news-detail-meta .news-date,
.section--paper .news-spec dt {
  color: rgba(20, 24, 42, 0.62);
}

.section--paper .news-category {
  color: #8a6f2f;
}

.section--paper .news-subhead {
  border-left-color: #8a6f2f;
}

.section--paper .news-spec,
.section--paper .news-spec > div {
  border-color: rgba(20, 24, 42, 0.18);
}

.section--paper .news-link {
  color: #7d6329;
  border-bottom-color: rgba(125, 99, 41, 0.45);
}

.section--paper .news-link:hover,
.section--paper .news-link:focus-visible {
  border-bottom-color: #7d6329;
}

.section--paper .news-back {
  color: rgba(20, 24, 42, 0.7);
  border-color: rgba(20, 24, 42, 0.25);
}

.section--paper .news-back:hover,
.section--paper .news-back:focus-visible {
  color: #8a6f2f;
  border-color: rgba(138, 111, 47, 0.55);
}

/* ページ送り */

/* hidden 属性が効くように、display より先に打ち消しておく */
.news-pager[hidden] {
  display: none;
}

.news-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.4rem;
}

.news-pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.2em;
  border: 1px solid rgba(20, 24, 42, 0.25);
  background: none;
  color: rgba(20, 24, 42, 0.7);
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.news-pager-btn:hover:not(:disabled),
.news-pager-btn:focus-visible:not(:disabled) {
  color: #8a6f2f;
  border-color: rgba(138, 111, 47, 0.55);
}

.news-pager-btn:disabled {
  opacity: 0.32;
  cursor: default;
}

.news-pager-count {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: rgba(20, 24, 42, 0.55);
}

.news-pager-arrow {
  transition: transform 0.35s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .news-pager-arrow,
  .news-card-arrow {
    transition: none;
  }
}

/* 重なりの順番（画面に固定されるもの） */

/* 目次（本を開くフルスクリーンメニュー） */

.book-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  /* iOSはアドレスバーの出入りで見える高さが変わる。vh は
     バーが隠れたときの高さを指すため、実際に見えている高さ（dvh）
     に合わせる。対応しない環境は上の inset:0 のまま働く */
  height: 100vh;
  height: 100dvh;
  padding: calc(var(--header-height) + 1rem) clamp(1rem, 4vw, 3.5rem)
    calc(clamp(2rem, 6vh, 4rem) + env(safe-area-inset-bottom, 0px));
  color: var(--colortext);
}

.book-menu[hidden] {
  display: none;
}

/* 夜の底。上から月あかりがひとすじ差している */
.book-menu-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(215, 201, 155, 0.11) 0%, transparent 58%),
    linear-gradient(180deg, #080b13 0%, #05070d 62%, #05070d 100%);
  opacity: 0;
  transition: opacity 0.32s var(--ease-out);
}

.book-menu.is-open .book-menu-veil {
  opacity: 1;
  transition-duration: 0.5s;
}

.book-menu-book {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.4rem, 4vh, 2.6rem);
  width: min(76rem, 100%);
  max-height: 100%;
}

/* 綴じ目。ここが最初に立ち上がってから紙面が開く */
.book-menu-spine {
  position: absolute;
  top: -0.4rem;
  bottom: -0.4rem;
  left: 1px;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(215, 201, 155, 0.5) 18%,
    rgba(215, 201, 155, 0.5) 82%,
    transparent 100%
  );
  transform: scaleY(0);
  transform-origin: 50% 50%;
  transition: transform 0.28s var(--ease-out);
}

.book-menu.is-open .book-menu-spine {
  transform: scaleY(1);
  transition-duration: 0.55s;
  transition-delay: 0.15s;
}

/* 紙面。中央（綴じ目側）から外へ向かって開く */
.book-menu-leaf {
  position: relative;
  min-width: 0;
  clip-path: inset(0 0 0 0);
}

.book-menu-leaf--left {
  padding-left: clamp(1.2rem, 4vw, 2.2rem);
  color: var(--colortextmuted);
}

.book-menu-leaf--right {
  padding-left: clamp(1.2rem, 4vw, 2.2rem);
}

.book-menu-moon {
  display: block;
  width: clamp(1.5rem, 4vw, 2.1rem);
  aspect-ratio: 1;
  margin-bottom: clamp(0.7rem, 2vh, 1.1rem);
  border-radius: 50%;
  background: radial-gradient(
    circle at 36% 30%,
    rgba(248, 245, 236, 0.92) 0%,
    rgba(232, 224, 198, 0.78) 38%,
    rgba(196, 182, 138, 0.5) 66%,
    rgba(150, 138, 100, 0.22) 86%,
    transparent 100%
  );
  /* 右下から欠ける小さな月。外へはわずかな暈だけを出す */
  box-shadow:
    inset -0.3em -0.24em 0.5em rgba(5, 7, 13, 0.55),
    0 0 1.8em rgba(215, 201, 155, 0.22);
}

.book-menu-brand {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(0.55rem, 1.5vw, 0.68rem);
  letter-spacing: 0.34em;
  color: rgba(215, 201, 155, 0.72);
}

/* リード文（コンセプトの一行）。指定の改行位置で二行に組む。 */
.book-menu-lead {
  margin: clamp(0.7rem, 2vh, 1.2rem) 0 0;
  font-family: var(--font-serif);
  font-size: clamp(0.9rem, 2.4vw, 1.25rem);
  line-height: 2;
  letter-spacing: 0.09em;
  color: rgba(244, 241, 232, 0.62);
}

.book-menu-folio {
  margin: clamp(1rem, 3vh, 2rem) 0 0;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.5em;
  color: rgba(215, 201, 155, 0.5);
}

.book-menu-list {
  display: grid;
  gap: clamp(0.1rem, 0.8vh, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-menu-link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 clamp(0.8rem, 2.4vw, 1.5rem);
  padding: clamp(0.5rem, 1.5vh, 0.95rem) 0;
  color: var(--colortext);
  text-decoration: none;
}

/* 章の数字は大字（壱・弐・参・肆・伍）。本文と同じ明朝で置く */
.book-menu-no {
  font-family: var(--font-serif);
  /* 章の大字は英字より一段小さく。英字を詰めたぶん、上限だけ揃える */
  font-size: clamp(0.85rem, 2.2vw, 0.95rem);
  letter-spacing: 0.1em;
  color: rgba(215, 201, 155, 0.72);
  transition: color 0.4s var(--ease-out);
}

.book-menu-name {
  font-family: var(--font-serif);
  /* 大見出しではなく「本の目次」の大きさで組む。狭い画面は
     下限が効くので、これまでの見え方のまま変わらない */
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: 0.06em;
  /* 触れているあいだ字が入れ替わる（→ scramble-out）。 */
  white-space: nowrap;
  transition: color 0.4s var(--ease-out);
}

.scramble-out {
  /* 入れ替わっているあいだも、行の高さは動かさない */
  display: inline-block;
}

/* 章のあいだの細い罫。触れると月あかりが左から差してくる */
.book-menu-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--colorline);
}

.book-menu-rule::after {
  content: "";
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(90deg, rgba(215, 201, 155, 0.85), rgba(215, 201, 155, 0.15));
  transition: right 0.55s var(--ease-out);
}

.book-menu-link:hover .book-menu-rule::after,
.book-menu-link:focus-visible .book-menu-rule::after {
  right: 0;
}

.book-menu-link:hover .book-menu-name,
.book-menu-link:focus-visible .book-menu-name,
.book-menu-link:hover .book-menu-no,
.book-menu-link:focus-visible .book-menu-no {
  color: var(--coloraccent);
}

/* 章立ての下に、本の外から届く連絡先を小さく置く */
.book-menu-contact {
  display: grid;
  justify-items: start;
  gap: 0.45rem;
  /* 区切りは章立ての最後の罫が受け持つので、ここには線を引かない */
  margin: clamp(1.2rem, 3.4vh, 2.2rem) 0 0;
}

.book-menu-contact-label {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  color: rgba(215, 201, 155, 0.72);
  text-transform: uppercase;
}

.book-menu-contact-mail {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(0.82rem, 2.4vw, 1rem);
  letter-spacing: 0.06em;
  color: rgba(244, 241, 232, 0.8);
  text-decoration: none;
  word-break: break-all;
  transition: color 0.4s var(--ease-out);
}

/* 触れると細い線が左から伸びる（章の罫と同じ振る舞い） */
.book-menu-contact-mail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -0.28em;
  height: 1px;
  background: rgba(215, 201, 155, 0.8);
  transition: right 0.5s var(--ease-out);
}

.book-menu-contact-mail:hover,
.book-menu-contact-mail:focus-visible {
  color: var(--coloraccent);
  text-decoration: none;
}

.book-menu-contact-mail:hover::after,
.book-menu-contact-mail:focus-visible::after {
  right: 0;
}

.book-menu-close {
  position: absolute;
  top: calc(var(--header-height) * 0.34);
  right: clamp(1rem, 4vw, 3.5rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 0.4em;
  background: none;
  border: 0;
  color: var(--colortextmuted);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  cursor: pointer;
  transition: color 0.4s var(--ease-out);
}

.book-menu-close-mark {
  font-size: 1.15em;
}

.book-menu-close:hover,
.book-menu-close:focus-visible {
  color: var(--coloraccent);
}

/* 開く演出 */
.book-menu-leaf {
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  transition: opacity 0.3s var(--ease-out), clip-path 0.3s var(--ease-out);
}

.book-menu.is-open .book-menu-leaf {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition-duration: 0.85s;
  transition-delay: 0.34s;
}

.book-menu-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}

.book-menu.is-open .book-menu-item {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 0.7s;
  transition-delay: calc(0.62s + var(--i, 0) * 0.07s);
}

/* 連絡先は、章が出そろってから一呼吸おいて静かに現れる */
.book-menu-contact {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out);
}

.book-menu.is-open .book-menu-contact {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 0.6s;
  transition-delay: 1.7s;
}

.book-menu-close {
  opacity: 0;
  transition: opacity 0.25s var(--ease-out), color 0.4s var(--ease-out);
}

.book-menu.is-open .book-menu-close {
  opacity: 1;
  transition-duration: 0.5s, 0.4s;
  transition-delay: 0.5s, 0s;
}

/* 開いているあいだは背景を動かさない。 */
html.is-menu-open {
  overflow: hidden;
  padding-right: var(--scrollbar-gap, 0px);
}

@media (min-width: 1024px) {
  /* 見開き。左が扉、右が章立て */
  .book-menu-book {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 0;
    align-items: center;
  }
  .book-menu-spine {
    left: 40%;
  }
  .book-menu-leaf--left {
    padding-right: clamp(2rem, 4vw, 3.5rem);
    padding-left: clamp(1rem, 3vw, 2.5rem);
    text-align: right;
  }
  .book-menu-leaf--left .book-menu-moon {
    margin-left: auto;
  }
  /* 左の紙面は綴じ目側（右端）からめくれる */
  .book-menu-leaf--left {
    clip-path: inset(0 0 0 100%);
  }
  .book-menu-leaf--right {
    padding-left: clamp(2rem, 4vw, 3.5rem);
    clip-path: inset(0 100% 0 0);
  }
  .book-menu.is-open .book-menu-leaf--left,
  .book-menu.is-open .book-menu-leaf--right {
    clip-path: inset(0 0 0 0);
  }
}

@media (max-width: 1023px) {
  /* 縦長の一枚の紙面。綴じ目は左端の細い罫として残す */
  .book-menu-leaf--left {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0 1rem;
  }
  .book-menu-moon {
    grid-column: 1;
  }
  .book-menu-brand {
    grid-column: 1;
  }
  .book-menu-lead {
    grid-column: 1;
  }
  .book-menu-folio {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: end;
    margin: 0;
    writing-mode: vertical-rl;
    letter-spacing: 0.3em;
  }
}

@media (max-width: 767px) {
  .book-menu {
    padding-top: calc(var(--header-height) + 0.5rem);
  }
  /* リード文はスマホでも出す。章の並びとCONTACTを押し出さないよう */
  .book-menu-lead {
    margin-top: 0.3rem;
    line-height: 1.6;
  }
}

/* 画面が低い端末では、このコピーを入れると章の並びとCONTACT
   が入りきらない。章が八つになったぶん、隠す高さの線を上げた */
@media (max-width: 767px) and (max-height: 720px) {
  .book-menu-lead {
    display: none;
  }
}

@media (max-width: 767px) {
  /* 八章とCONTACTを一画面に収める。字を詰めるかわりに、
     押す高さは 44px を下限として必ず確保する */
  .book-menu-name {
    font-size: clamp(1.25rem, 4.4vw, 2.1rem);
  }
  .book-menu-list {
    gap: clamp(0.05rem, 0.3vh, 0.25rem);
  }
  .book-menu-link {
    grid-template-columns: auto minmax(0, 1fr);
    padding: clamp(0.35rem, 1.6vh, 0.95rem) 0;
    min-height: 44px;
    align-content: center;
  }
  .book-menu-contact {
    margin-top: clamp(0.8rem, 2vh, 1.4rem);
  }
}

/* どんな端末・どんなバーの状態でもメールアドレスまで必ず届くように、
   章立てとCONTACTの領域だけを内側でスクロールできるようにする。
   ×Close は外側にあるので、スクロールしても常に押せる */
@media (max-width: 767px) {
  .book-menu-book {
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
  }
  .book-menu-leaf--right {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* 目立つ帯は出さない。動き自体は残す */
    scrollbar-width: none;
  }
  .book-menu-leaf--right::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

/* 背の低い端末（アドレスバーが出た状態のiPhone等）では、
   扉の月と欧文の柱を伏せて、章立てとCONTACTを優先する */
@media (max-width: 767px) and (max-height: 660px) {
  .book-menu-moon,
  .book-menu-brand {
    display: none;
  }
  .book-menu {
    padding-top: calc(var(--header-height) + 0.2rem);
    padding-bottom: 0.7rem;
  }
  .book-menu-book {
    gap: 0.6rem;
  }
  .book-menu-contact {
    gap: 0.2rem;
    margin-top: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 開く動きは見せず、すぐ読める状態にする */
  .book-menu-veil,
  .book-menu-leaf,
  .book-menu-item,
  .book-menu-contact,
  .book-menu-close {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .book-menu-spine {
    transform: scaleY(1);
    transition: none;
  }
  .book-menu.is-open .book-menu-leaf,
  .book-menu.is-open .book-menu-item,
  .book-menu.is-open .book-menu-contact,
  .book-menu.is-open .book-menu-close,
  .book-menu.is-open .book-menu-veil {
    transition: none;
    transition-delay: 0s;
  }
}

/* 最新のお知らせ（TOPの左下を静かに流れる） */

.news-ticker {
  position: fixed;
  z-index: 47;
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 2vw, 1.2rem);
  max-width: min(46vw, 34rem);
  left: clamp(18px, 3vw, 48px);
  bottom: clamp(118px, 13.5vh, 140px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-out), visibility 0s linear 0.6s;
  pointer-events: none;
}

.news-ticker[hidden] {
  display: none;
}

/* TOPの場面にいるあいだだけ現れる */
.news-ticker.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--ease-out), visibility 0s linear 0s;
  pointer-events: auto;
}

.news-ticker-label {
  flex: none;
  margin: 0;
  padding-right: clamp(0.7rem, 2vw, 1.2rem);
  border-right: 1px solid rgba(215, 201, 155, 0.45);
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  line-height: 1.4;
  color: var(--coloraccent);
  text-transform: uppercase;
}

.news-ticker-label-short {
  display: none;
}

.news-ticker-lane {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  /* 両端は夜へ溶ける。文字が枠にぶつかって切れて見えないようにする */
  mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 34px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 34px), transparent 100%);
}

.news-ticker-track {
  display: flex;
  width: max-content;
  animation: news-ticker-run var(--ticker-duration, 32s) linear infinite;
}

.news-ticker-set {
  display: flex;
  flex: none;
}

@keyframes news-ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 読みたい人が止められるようにする。 */
.news-ticker:hover .news-ticker-track,
.news-ticker:focus-within .news-ticker-track,
.news-ticker:not(.is-on) .news-ticker-track {
  animation-play-state: paused;
}

.news-ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75em;
  flex: none;
  padding: 0.45em 0;
  background: none;
  border: 0;
  color: rgba(244, 241, 232, 0.78);
  font-family: var(--font-serif);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.35s var(--ease-out);
}

.news-ticker-date {
  font-family: var(--font-sans);
  font-size: 0.9em;
  letter-spacing: 0.18em;
  color: rgba(215, 201, 155, 0.75);
  transition: color 0.35s var(--ease-out);
}

.news-ticker-sep {
  padding-left: 0.55em;
  color: rgba(255, 255, 255, 0.2);
}

.news-ticker-item:hover,
.news-ticker-item:focus-visible {
  color: var(--coloraccent);
}

.news-ticker-item:hover .news-ticker-date,
.news-ticker-item:focus-visible .news-ticker-date {
  color: var(--coloraccent);
}

@media (max-width: 767px) {
  /* 左下から画面幅いっぱいに近い一本の帯。月とロゴには重ねない */
  .news-ticker {
    left: 16px;
    right: 16px;
    bottom: clamp(16px, 3.5vh, 28px);
    max-width: none;
    gap: 0.7rem;
  }
  .news-ticker-label {
    padding-right: 0.7rem;
    font-size: 0.52rem;
    letter-spacing: 0.24em;
  }
  .news-ticker-label-long {
    display: none;
  }
  .news-ticker-label-short {
    display: inline;
  }
  .news-ticker-item {
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 横流れは止め、いちばん新しい知らせだけを静かに置く */
  .news-ticker-track {
    animation: none;
  }
  .news-ticker-lane {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .news-ticker-item {
    white-space: normal;
  }
  .news-ticker-sep {
    display: none;
  }
}

/* MEMBERS：紙（アイボリー）の頁の文字を、しっかり読める濃さにする */

#profile .flip-front--paper .member-bio,
#profile .flip-front--paper .unit-bio {
  color: rgba(23, 27, 40, 0.9);
}

/* 読み仮名は本文より一段軽く。夜の頁の金と同じ系統は保ったまま */
#profile .flip-front--paper .flip-member-role {
  color: #5f4f2b;
}

#profile .flip-front--paper .member-links a {
  color: rgba(23, 27, 40, 0.78);
}

#profile .flip-front--paper .member-links .external-mark {
  color: #6b5a2e;
}

#profile .flip-front--paper .member-links a:hover,
#profile .flip-front--paper .member-links a:focus-visible {
  color: #6b5a2e;
}

#profile .flip-front--paper .stack-tag {
  color: rgba(23, 27, 40, 0.66);
}

/* MEMBERS 一頁目：ユニット紹介も横組みで組む */

/* 集合写真は頁の主役。ただし本文・ユニット名・足元が必ず収まるよう */
#profile .flip-front--paper .member-photo--wide {
  --unit-photo-h: calc(
    min(88svh, 49rem) - 8.6 * 1.85 * clamp(0.88rem, 1.6svh, 1rem) - 19.2rem
  );
  width: min(100%, 34rem, var(--unit-photo-h) * 16 / 9);
  max-width: 100%;
  height: auto;
  margin: clamp(0.3rem, 1.4svh, 1.1rem) auto clamp(0.4rem, 1.4svh, 0.9rem);
}

#profile .unit-name {
  flex: none;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 3.2vw, 2rem);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-align: center;
}

#profile .unit-bio {
  display: block;
  flex: 0 1 auto;
  width: min(100%, 34rem);
  min-height: 0;
  max-height: 100%;
  /* 個人頁と同じ考え方。 */
  margin: auto;
  padding: 0;
  overflow: hidden;
  text-align: left;
  font-family: var(--font-serif);
  font-size: clamp(0.88rem, 1.6svh, 1rem);
  line-height: 1.85;
  letter-spacing: 0.03em;
  font-feature-settings: "palt";
}

#profile .unit-bio .unit-bio-p {
  margin: 0;
  padding: 0;
  text-indent: 0;
  text-align: left;
}

/* 足元（ユニット名＋欧文）の罫線からのアキ。 */
#profile .flip-front--paper .flip-foot {
  padding-top: 0.6rem;
  justify-content: center;
  text-align: center;
}

@media (max-width: 767px) {
  #profile .unit-bio {
    width: min(100% - 2rem, 34rem);
  }

  #profile .flip-front--paper .member-photo--wide {
    /* 本文はスマホで8行前後。 */
    --unit-photo-h: calc(
      min(84svh, 38rem) - 11.3 * 1.8 * clamp(0.83rem, 1.62svh, 0.94rem) - 12.1rem
    );
    width: min(100% - 2rem, 34rem, var(--unit-photo-h) * 16 / 9);
  }

  #profile .unit-name {
    font-size: clamp(1.15rem, 5.4vw, 1.5rem);
  }

  #profile .unit-bio {
    font-size: clamp(0.83rem, 1.62svh, 0.94rem);
    line-height: 1.8;
    letter-spacing: 0.02em;
  }

}

/* MEMBERS 一頁目：写真 → ユニット名 → 本文3段落の順に灯る */

.js #profile .flip-front--paper .member-photo--wide {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition:
    opacity 1s var(--ease-out),
    transform 1.05s var(--ease-out);
}

.js #profile .flip-page.is-revealed .flip-front--paper .member-photo--wide {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.04s;
}

.js #profile .unit-name {
  opacity: 0;
  transition: opacity 0.75s var(--ease-out);
}

.js #profile .flip-page.is-revealed .unit-name {
  opacity: 1;
  transition-delay: 0.08s;
}

.js #profile .flip-page .unit-bio-p {
  opacity: 0;
  transform: translateY(9px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}

.js #profile .flip-page.is-revealed .unit-bio-p {
  opacity: 1;
  transform: translateY(0);
}

.js #profile .flip-page.is-revealed .unit-bio-p:nth-child(1) { transition-delay: 0.10s; }
.js #profile .flip-page.is-revealed .unit-bio-p:nth-child(2) { transition-delay: 0.20s; }
.js #profile .flip-page.is-revealed .unit-bio-p:nth-child(3) { transition-delay: 0.30s; }
.js #profile .flip-page.is-revealed .unit-bio-p:nth-child(n+4) { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  .js #profile .flip-front--paper .member-photo--wide,
  .js #profile .unit-name,
  .js #profile .flip-page .unit-bio-p {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* いちばん幅の狭い端末では本文が1行ぶん増えるので、写真の取り分を減らす */
@media (max-width: 370px) {
  #profile .flip-front--paper .member-photo--wide {
    --unit-photo-h: calc(
      min(84svh, 38rem) - 11.9 * 1.8 * clamp(0.83rem, 1.62svh, 0.94rem) - 12.1rem
    );
  }
}

/* DISCOGRAPHY：節へ入ってすぐ一枚目が見え始めるようにする */

#discography {
  padding-top: clamp(1.6rem, 3.4vw, 2.8rem);
}

#discography .disco-stack {
  margin-top: clamp(0.4rem, 1.2vw, 0.9rem);
}

/* 章の柱（既刊 / Discography）はそのまま。下のアキだけ詰める */
#discography .chapter-mark {
  margin-bottom: 0.3rem;
}

/* MEMBERS：スマホだけ改行と段落の切れ目を変える */

@media (min-width: 768px) {
  .br-sp {
    display: none;
  }
}

@media (max-width: 767px) {
  .br-pc {
    display: none;
  }

  #profile .flip-member .member-bio .sp-para,
  #profile .unit-bio .sp-para {
    display: block;
    margin-top: 0.68em;
  }

  /* 分量の多い頁（40mP）は段落のアキも本文に合わせて詰める */
  #profile .flip-member .member-bio[data-bio="long"] .sp-para {
    margin-top: 0.34em;
  }
}