/* ============================================================
   銀河成形原型 — ダークテーマ
   石墨底 + エレクトリックブルー + 暖灰テキスト
   ============================================================ */

:root {
  --blue: #2e62ff;
  --blue-soft: #7fa0ff;
  --bg: #101116;
  --text: #ece9e4;
  --text-dim: rgba(236, 233, 228, 0.6);
  --header-h: 72px;
  --ease-osmo: cubic-bezier(0.625, 0.05, 0, 1);
  /* 精密幾何サンセリフ(英) + 衬线斜体(強調) + 中性ゴシック(和) */
  --font-en: "Space Grotesk", sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-jp: "Noto Sans JP", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-jp);
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--blue-soft);
  letter-spacing: 0.01em;
}

/* ---- 持続銀河レイヤー ---- */
#galaxy-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- ローディング ---- */
#loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.9s var(--ease-osmo);
}
#loader.done { opacity: 0; pointer-events: none; }
.loader-logo {
  width: clamp(78px, 7vw, 112px);
  height: auto;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ---- HUD ---- */
#hud {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 90;
  padding: 8px 14px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  background: rgba(20, 20, 24, 0.72);
  color: #cfe0ff;
  border-radius: 6px;
  backdrop-filter: blur(6px);
}

/* ---- ヘッダー ---- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}
.logo {
  display: inline-flex;
  align-items: center;
  width: 56px;
  min-width: 56px;
  text-decoration: none;
}
.brand-logo {
  display: block;
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 1px 14px rgba(10, 11, 15, 0.65));
}
.logo .brand-logo { width: 100%; }
.header-nav { display: flex; gap: 28px; }
.header-nav a {
  color: inherit;
  text-decoration: none;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.header-nav a:hover { opacity: 1; }

/* ---- チャプターナビ ---- */
#chapters-nav {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: 150px;
  height: 250px;
  filter: drop-shadow(0 0 16px rgba(46, 98, 255, 0.22));
}
#chapters-nav::before,
#chapters-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 118px 222px;
}
#chapters-nav::before {
  opacity: 0.42;
  background-image: url("data:image/svg+xml,%3Csvg width='118' height='222' viewBox='0 0 118 222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='72,9 34,51 34,89 66,132 52,177 86,214' fill='none' stroke='%23ece9e4' stroke-opacity='0.58' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='1 7'/%3E%3C/svg%3E");
}
#chapters-nav::after {
  opacity: 0.74;
  filter: blur(5px);
  background-image: url("data:image/svg+xml,%3Csvg width='118' height='222' viewBox='0 0 118 222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='72,9 34,51 34,89 66,132 52,177 86,214' fill='none' stroke='%237fa0ff' stroke-opacity='0.75' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='1 10'/%3E%3C/svg%3E");
}
#chapters-nav button {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(236, 233, 228, 0.66);
  padding: 8px;
  transform: translate(-8px, -8px);
}
#chapters-nav button:nth-child(1) { left: 72px; top: 9px; }
#chapters-nav button:nth-child(2) { left: 34px; top: 51px; }
#chapters-nav button:nth-child(3) { left: 34px; top: 89px; }
#chapters-nav button:nth-child(4) { left: 66px; top: 132px; }
#chapters-nav button:nth-child(5) { left: 52px; top: 177px; }
#chapters-nav button:nth-child(6) { left: 86px; top: 214px; }
#chapters-nav button::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(127, 160, 255, 0.35);
  filter: blur(9px);
  opacity: 0.55;
  transition: all 0.4s var(--ease-osmo);
}
#chapters-nav .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: rgba(10, 11, 15, 0.38);
  box-shadow: 0 0 0 1px rgba(10, 11, 15, 0.48), 0 0 10px rgba(236, 233, 228, 0.18);
  opacity: 0.82;
  transition: all 0.4s var(--ease-osmo);
}
#chapters-nav .label {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(6px);
  transition: all 0.4s var(--ease-osmo);
  white-space: nowrap;
  color: var(--text);
  text-shadow: 0 0 14px rgba(236, 233, 228, 0.42), 0 1px 12px rgba(0, 0, 0, 0.9);
}
#chapters-nav button:hover {
  color: rgba(236, 233, 228, 0.94);
}
#chapters-nav button:hover .label { opacity: 0.78; transform: none; }
#chapters-nav button:hover::before {
  opacity: 0.86;
  transform: scale(1.3);
}
#chapters-nav button.active .dot {
  background: var(--blue);
  border-color: var(--blue);
  opacity: 1;
  transform: scale(1.48);
  box-shadow: 0 0 0 7px rgba(46, 98, 255, 0.18), 0 0 18px rgba(46, 98, 255, 0.92), 0 0 46px rgba(127, 160, 255, 0.56);
}
#chapters-nav button.active::before {
  background: rgba(46, 98, 255, 0.92);
  opacity: 1;
  transform: scale(2.2);
}
#chapters-nav button.active .label {
  opacity: 1;
  transform: none;
  color: var(--text);
}

/* ---- チャプター ---- */
#content { position: relative; z-index: 10; }

.chapter {
  /* sticky 滞留 + ピン解除後 100vh がトランジション帯 */
  min-height: 260vh;
  position: relative;
}
.chapter-hero { min-height: 200vh; }

.chapter .inner {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--header-h) 8vw 60px;
  max-width: 860px;
}

/* 文字スクリム（銀河の上でも本文が読めるように） */
.chapter .inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(16, 17, 22, 0.88) 0%,
    rgba(16, 17, 22, 0.72) 34%,
    rgba(16, 17, 22, 0.30) 62%,
    rgba(16, 17, 22, 0) 82%);
  pointer-events: none;
}

/* 銀河の輝部に重なっても読めるよう、文字に暗いハロを付与 */
.chapter .inner {
  text-shadow: 0 1px 26px rgba(10, 11, 15, 0.8), 0 1px 5px rgba(10, 11, 15, 0.7);
}

.chapter-index {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 22px;
}

.chapter h2 {
  font-family: var(--font-jp);
  font-size: clamp(29px, 4.2vw, 52px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0.01em;
  margin-bottom: 28px;
}

.chapter-body {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 15px;
  line-height: 2.15;
  max-width: 32em;
  color: rgba(236, 233, 228, 0.82);
  margin-bottom: 36px;
}

.link-more {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--blue);
  width: fit-content;
  transition: color 0.3s;
}
.link-more:hover { color: var(--blue); }

/* ---- Hero（中央揃え） ---- */
.chapter-hero .inner {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  padding-top: var(--header-h);
  max-width: 1100px;
}
/* 中央寄せの見出しに合わせ、スクリムを中心の径向暗晕に差し替え */
.chapter-hero .inner::before {
  background: radial-gradient(ellipse 78% 62% at 50% 50%,
    rgba(16, 17, 22, 0.78) 0%,
    rgba(16, 17, 22, 0.55) 42%,
    rgba(16, 17, 22, 0.12) 74%,
    rgba(16, 17, 22, 0) 100%);
}
.hero-eyebrow {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--blue);
  opacity: 0.7;
}
.hero-title {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(38px, 7.2vw, 106px);
  line-height: 1.08;
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1180px, calc(100vw - 56px));
  /* 描边文字は自前の shadow で暗底を作るため継承 shadow は切る */
  text-shadow: none;
}
/* 実体の見出し（銀河の輝部でも読めるよう暗いにじみを付与） */
.hero-title span {
  display: block;
  color: var(--text);
  text-shadow: 0 2px 26px rgba(10, 11, 15, 0.85), 0 1px 5px rgba(10, 11, 15, 0.7);
}
/* 強調語だけは実体の斜体でコントラストを付ける */
.hero-title .serif-italic {
  font-size: 1.08em;
  letter-spacing: 0;
  color: var(--blue-soft);
  -webkit-text-stroke: 0;
  text-stroke: 0;
}
.hero-dot {
  font-style: normal;
  color: var(--blue);
  -webkit-text-stroke: 0;
  text-stroke: 0;
}

.hero-lead {
  font-family: var(--font-jp);
  font-weight: 300;
  margin-top: 40px;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: var(--text);
}

/* 底部の水平インフォメーションバー（構図の基線） */
.hero-baseline {
  position: absolute;
  left: 8vw;
  right: 8vw;
  bottom: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid rgba(236, 233, 228, 0.16);
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.scroll-hint::after {
  content: "↓";
  font-size: 13px;
  color: var(--blue-soft);
  animation: hint 2.4s ease-in-out infinite;
}
.hero-status { color: var(--blue-soft); }
@keyframes hint {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(5px); opacity: 0.4; }
}

/* ---- Brands ---- */
.brand-list { list-style: none; }
.brand-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(236, 233, 228, 0.22);
}
.brand-name {
  font-family: var(--font-en);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 300;
  letter-spacing: 0.08em;
}
.brand-desc { font-size: 13px; opacity: 0.7; white-space: nowrap; }

/* ---- News ---- */
.news-list { list-style: none; margin-bottom: 34px; }
.news-list li {
  display: flex;
  gap: 26px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(236, 233, 228, 0.22);
  font-size: 14px;
}
.news-list time {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.1em;
  opacity: 0.6;
  flex-shrink: 0;
}

/* ---- Contact ---- */
.contact-title {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 108px);
  line-height: 1.05;
}
.copyright { margin-top: 70px; font-size: 11px; letter-spacing: 0.1em; opacity: 0.5; }

/* ---- 入場アニメーション ---- */
.chapter .inner > * {
  opacity: 0;
  transform: translateY(36px);
}
.chapter.in-view .inner > * {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease-osmo), transform 1.1s var(--ease-osmo);
}
.chapter.in-view .inner > *:nth-child(2) { transition-delay: 0.08s; }
.chapter.in-view .inner > *:nth-child(3) { transition-delay: 0.16s; }
.chapter.in-view .inner > *:nth-child(4) { transition-delay: 0.24s; }

/* Hero の scroll-hint は absolute 配置を維持（入場アニメ対象から外す） */
.chapter-hero .scroll-hint { opacity: 0.55; transform: none; }

/* ---- モバイル ---- */
@media (max-width: 768px) {
  .site-header { padding: 0 20px; }
  .logo { width: 48px; min-width: 48px; }
  .header-nav { display: none; }
  #chapters-nav {
    right: 2px;
    width: 118px;
    height: 222px;
    transform: translateY(-50%) scale(0.78);
    transform-origin: right center;
  }
  #chapters-nav .label { display: none; }
  #chapters-nav .dot { width: 8px; height: 8px; }
  .chapter .inner { padding: var(--header-h) 7vw 50px; }
  .brand-list li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero-baseline { justify-content: center; }
  .hero-status { display: none; }
}