/* ==========================================================================
   KANADE ONE — site.css
   参考にした設計の値をもとに、
   ブランド（色・書体・文言）だけ KANADE に置き換えたもの。ID・クラスは KANADE 命名（SPEC §6-2）。
   値の出どころ：設計書（原文）／設計書（訂正）。差し色 --color-primary は CSS では使わない（WebGL 側だけ）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 書体（OFL・自前ホスト・サブセット。_qa/subset_fonts.py が作る）
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/ZenKakuGothicNew-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/ZenKakuGothicNew-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/ZenKakuGothicNew-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/ZenKakuGothicNew-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. トークン（PC＝1440 基準。設計書 §1-1）
   -------------------------------------------------------------------------- */
:root {
  --vh: 1vh;                 /* JS が resize 毎に innerHeight*0.01+"px" で上書き */
  --header-height: 0px;      /* JS が #site-header の実高さ(px)で上書き */
  --display-font: "Instrument Sans";
  --text-font: "Zen Kaku Gothic New";
  --font-stack: var(--display-font), var(--text-font), system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;

  --site-outer-padding-x: calc(32 * 100vw / 1440);
  --site-padding-x: calc(202 * 100vw / 1440);
  --site-padding-y: calc(16 * 100vw / 1440);

  --grid-columns: 24;
  --grid-rows: 1;
  --grid-gap-scale: calc(20 / 24);
  --grid-gap-width: calc((100vw - var(--site-padding-x) * 2) / ((var(--grid-columns) / var(--grid-gap-scale)) + var(--grid-columns) - 1));
  --grid-column-width: calc(var(--grid-gap-width) / var(--grid-gap-scale));
  --grid-span-width: calc(var(--grid-gap-width) + var(--grid-column-width));
  --grid-span-1: var(--grid-column-width);
  --grid-span-2: calc(var(--grid-span-width) * 1 + var(--grid-column-width));
  --grid-span-3: calc(var(--grid-span-width) * 2 + var(--grid-column-width));
  --grid-span-4: calc(var(--grid-span-width) * 3 + var(--grid-column-width));
  --grid-span-5: calc(var(--grid-span-width) * 4 + var(--grid-column-width));
  --grid-span-6: calc(var(--grid-span-width) * 5 + var(--grid-column-width));
  --grid-span-7: calc(var(--grid-span-width) * 6 + var(--grid-column-width));
  --grid-span-8: calc(var(--grid-span-width) * 7 + var(--grid-column-width));
  --grid-span-9: calc(var(--grid-span-width) * 8 + var(--grid-column-width));
  --grid-span-10: calc(var(--grid-span-width) * 9 + var(--grid-column-width));
  --grid-span-11: calc(var(--grid-span-width) * 10 + var(--grid-column-width));
  --grid-span-12: calc(var(--grid-span-width) * 11 + var(--grid-column-width));
  --grid-span-13: calc(var(--grid-span-width) * 12 + var(--grid-column-width));
  --grid-span-14: calc(var(--grid-span-width) * 13 + var(--grid-column-width));
  --grid-span-15: calc(var(--grid-span-width) * 14 + var(--grid-column-width));
  --grid-span-16: calc(var(--grid-span-width) * 15 + var(--grid-column-width));
  --grid-span-17: calc(var(--grid-span-width) * 16 + var(--grid-column-width));
  --grid-span-18: calc(var(--grid-span-width) * 17 + var(--grid-column-width));
  --grid-span-19: calc(var(--grid-span-width) * 18 + var(--grid-column-width));
  --grid-span-20: calc(var(--grid-span-width) * 19 + var(--grid-column-width));
  --grid-span-21: calc(var(--grid-span-width) * 20 + var(--grid-column-width));
  --grid-span-22: calc(var(--grid-span-width) * 21 + var(--grid-column-width));
  --grid-span-23: calc(var(--grid-span-width) * 22 + var(--grid-column-width));
  --grid-span-24: calc(var(--grid-span-width) * 23 + var(--grid-column-width));

  /* 色（SPEC §1-3。差し色だけ KANADE の朱） */
  --color-white: #eee8e8;
  --color-warm-white: #fffde0;
  --color-black: #181818;
  --color-dark-black: #121211;
  --color-grey: #c0c0c0;
  --color-dark-grey: #292929;
  --color-dark-grey-2: #212121;
  --color-thesis-grey: #999999;
  --color-spec-grey: #bbbbbb;
  --color-primary: #ef5a3a;          /* WebGL の INNOVATE ハイライト専用。CSS では参照しない */

  --inner-width: calc(100vw - var(--site-padding-x) * 2);
  --screen-unit: 100vw / 1440;       /* 裸のまま。使う側が calc(N * var(--screen-unit)) で包む */
  --height-unit: calc(var(--vh) * .1219512195);   /* 820px 基準の高さユニット（=100/820） */

  --hero-title: calc(64 * var(--screen-unit));
  --h1: calc(184 * var(--screen-unit));
  --h2: calc(150 * var(--screen-unit));
  --h3: calc(116 * var(--screen-unit));
  --h4: max(16px, calc(76 * var(--screen-unit)));
  --h5: calc(30 * var(--screen-unit));
  --h6: max(16px, calc(17 * var(--screen-unit)));
  --p1: max(18px, calc(24 * var(--screen-unit)));
  --p2: max(18px, calc(18 * var(--screen-unit)));
  --p3: max(18px, calc(16 * var(--screen-unit)));
  --p4: max(18px, calc(14 * var(--screen-unit)));
  --caption1: max(16px, calc(14 * var(--screen-unit)));
  --caption2: max(16px, calc(24 * var(--screen-unit)));
  --nav-link: max(16px, calc(12 * var(--screen-unit)));
  --default: max(18px, calc(16 * var(--screen-unit)));

  --space-3xs: calc(2 * 2 * var(--screen-unit));
  --space-2xs: calc(2 * 4 * var(--screen-unit));
  --space-xs: calc(2 * 8 * var(--screen-unit));
  --space-sm: calc(2 * 12 * var(--screen-unit));
  --space-md: calc(2 * 16 * var(--screen-unit));
  --space-lg: calc(2 * 24 * var(--screen-unit));
  --space-xl: calc(2 * 32 * var(--screen-unit));
  --space-2xl: calc(2 * 48 * var(--screen-unit));
  --space-3xl: calc(2 * 64 * var(--screen-unit));
  --space-4xl: calc(2 * 96 * var(--screen-unit));
  --space-5xl: calc(2 * 128 * var(--screen-unit));
}

/* 明るい区間（ヒーロー〜ケース）は JS が html に付ける */
html.use-warm-white { --color-white: var(--color-warm-white); }

/* SP 再定義（設計書 §1-2） */
@media (max-width: 767.98px) {
  :root {
    --site-padding-x: calc(11 * 100vw / 375);
    --site-padding-y: calc(47 * 100vw / 375);
    --site-outer-padding-x: calc(11 * 100vw / 375);
    --grid-columns: 12;
    --grid-rows: 1;
    --grid-gap-scale: calc(4 / 12);
    --screen-unit: 100vw / 375;
    --hero-title: calc(38 * var(--screen-unit));
    --h1: calc(96 * var(--screen-unit));
    --h2: calc(38 * var(--screen-unit));
    --h3: calc(26 * var(--screen-unit));
    --h4: max(16px, calc(16 * var(--screen-unit)));
    --caption1: max(16px, calc(16 * var(--screen-unit)));
    --caption2: max(16px, calc(18 * var(--screen-unit)));
    --nav-link: max(16px, calc(12 * var(--screen-unit)));
    --default: max(18px, calc(12 * var(--screen-unit)));
    --p1: max(18px, calc(16 * var(--screen-unit)));
    --p2: max(18px, calc(12 * var(--screen-unit)));
    --p3: max(18px, calc(8 * var(--screen-unit)));
    --p4: max(18px, calc(6 * var(--screen-unit)));
  }
}

/* タブレット幅（768〜1199）は参照にも専用値が無く、unit が縮んで小さい字が潰れる。
   下限だけ守る（参照の弱点を直す判断＝設計書 §8） */
@media (min-width: 768px) and (max-width: 1199.98px) {
  :root {
    --nav-link: max(16px, calc(12 * var(--screen-unit)));
    --caption1: max(16px, calc(14 * var(--screen-unit)));
    --default: max(18px, calc(16 * var(--screen-unit)));
    --p2: max(18px, calc(18 * var(--screen-unit)));
    --p3: max(18px, calc(16 * var(--screen-unit)));
    --p4: max(18px, calc(14 * var(--screen-unit)));
    --h6: max(16px, calc(17 * var(--screen-unit)));
  }
}

/* --------------------------------------------------------------------------
   2. 基底
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-stack);
  font-size: var(--default);
  font-weight: 400;                 /* 参照の 300（Book）は Instrument Sans に無い。400＋色で細さを作る */
  line-height: 1.2;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto !important;
  scrollbar-width: none;            /* ネイティブスクロールバーは出さない（#scroll-indicator が代替） */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: inherit;
  font-size: var(--default);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-white);
  overscroll-behavior: none;
  /* touch-action:none は ui/scroll.js が本当にタッチを引き受けたときに JS で付ける（CSS では付けない） */
}
.no-js body { touch-action: auto; }

a { color: inherit; }
img, svg, video, canvas, picture { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }

::selection { background-color: var(--color-white); color: var(--color-black); }

/* --------------------------------------------------------------------------
   3. グリッド（設計書 §2）
   -------------------------------------------------------------------------- */
.o-container {
  width: 100%;
  padding-left: var(--site-padding-x);
  padding-right: var(--site-padding-x);
}
.o-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-template-rows: repeat(var(--rows, 1), 1fr);
  grid-column-gap: var(--grid-gap-width);
  column-gap: var(--grid-gap-width);
  grid-row-gap: 0px;
  row-gap: 0px;
  height: 100%;
}
.o-grid > * {
  grid-column: auto / span var(--grid-column-span, var(--grid-columns));
  grid-column-start: var(--grid-column-start, auto);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   4. タイポ階層（設計書 §3-2。字間の px 固定はそのまま）
   -------------------------------------------------------------------------- */
.hero-title, h1.hero-title, h2.hero-title {
  font-size: var(--hero-title);
  font-weight: 500;
  line-height: .906;
  letter-spacing: -1.92px;
}
h1.hero-title { text-transform: uppercase; }
h1 { font-size: var(--h1); font-weight: 400; line-height: .891; letter-spacing: -5.52px; }
h2 { font-size: var(--h2); font-weight: 500; line-height: .88; letter-spacing: -4.5px; }
h3 { font-size: var(--h3); font-weight: 400; line-height: .886; letter-spacing: -3.48px; }
h4 { font-size: var(--h4); font-weight: 500; line-height: .894; letter-spacing: -2.28px; text-transform: uppercase; }
h5 { font-size: var(--h5); line-height: 1.13; letter-spacing: -.9px; }
h6 { font-size: var(--h6); font-weight: 500; line-height: 1.2; letter-spacing: -.51px; }
p, .p1 { font-size: var(--p1); font-weight: 500; line-height: 1.1667; letter-spacing: -.72px; }
.p2 { font-size: var(--p2); font-weight: 400; line-height: 1.444; letter-spacing: -.54px; }
.p3 { font-size: var(--p3); font-weight: 400; line-height: 1.25; letter-spacing: -.48px; }
.p4 { font-size: var(--p4); font-weight: 400; line-height: 1; letter-spacing: -.42px; }
.caption1 { font-size: var(--caption1); font-weight: 500; line-height: 1.1667; text-transform: uppercase; }
.caption2 { font-size: var(--caption2); font-weight: 500; line-height: .833; letter-spacing: -.72px; text-transform: uppercase; }
.default { font-size: var(--default); font-weight: 400; line-height: 1.2; }

.nav-link {
  font-size: var(--nav-link);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.36px;
  text-transform: uppercase;
  border: 1px solid var(--color-white);    /* 1px 枠・角丸なし */
  display: flex;
}
.nav-link > a {
  display: block;
  padding: .6em;
  color: var(--color-white);
  text-decoration: none;
}

@media (max-width: 767.98px) {
  h4 { line-height: .916; letter-spacing: -1.44px; }
  h5 { line-height: 1.13333; }
  .p1 { line-height: 1.25; letter-spacing: -.48px; }
  .p2 { line-height: 1.25; letter-spacing: -.48px; }
  .p3 { line-height: normal; letter-spacing: -.42px; }
  .caption2 { line-height: .889; letter-spacing: -.54px; }
}

/* --------------------------------------------------------------------------
   5. 絵の層と重なり（設計書 §8）
   -------------------------------------------------------------------------- */
#hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: -6;
}
/* WebGL がテクスチャとして取り込んだら隠す（main.js が html.has-gl を付ける）。JS 無しでは見える */
.has-gl #hero-video { visibility: hidden; }

#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -5;
}
.no-gl #gl { display: none; }

#content { position: relative; width: 100%; overflow-x: clip; }
#home.page { position: relative; z-index: 1; }     /* .squares-decorator の z-index:-1 をページ内に閉じ込める */

/* プリローダが終わる（html.is-ready）まで本編とヘッダーは伏せておく。JS はさらに inline で fade を書いてよい */
html.has-js:not(.is-ready) .home #home.page { opacity: 0; }
html.has-js:not(.is-ready) .home #site-header { visibility: hidden; }

/* --------------------------------------------------------------------------
   6. ヘッダー（設計書 §4-1）
   -------------------------------------------------------------------------- */
#site-header {
  position: fixed;
  left: var(--site-outer-padding-x);
  right: var(--site-outer-padding-x);
  top: var(--site-padding-y);
  height: auto;
  z-index: 10;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
}
#site-header > * { pointer-events: auto; }

#site-nav {
  display: flex;
  flex-direction: column;
  gap: 1em;
  justify-content: space-between;
  z-index: 11;
}
#site-nav .nav-links {
  display: flex;
  gap: .4em;
  overflow: hidden;
}
#site-nav a { color: var(--color-white); text-decoration: none; }
#site-nav li { transition: opacity .2s ease; }

#site-logo {
  display: block;
  height: calc(32 * var(--screen-unit));
  color: var(--color-white);
}
#site-logo svg { height: 100%; width: auto; fill: currentColor; }

#site-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
#site-cta__subtitle { color: var(--color-white); }
#site-cta__button {
  background-color: var(--color-white);
  height: calc(26 * var(--screen-unit));
  display: flex;
  align-items: center;
  justify-content: center;
}
#site-cta__button a {
  height: calc(26 * var(--screen-unit));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  text-decoration: none;
  padding-top: 0;
  padding-bottom: 0;
}
/* イントロで nav と CTA を結ぶ 1px の線。位置と opacity は ui/header.js が毎フレーム書く（既定は見せない） */
#site-cta__separator {
  background-color: var(--color-white);
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 300px;
  right: 300px;
  opacity: 0;
}

#menu-button {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(4 * var(--screen-unit));
  width: calc(26 * var(--screen-unit));
  height: calc(26 * var(--screen-unit));
  padding: 0;
  border: none;
  background-color: var(--color-white);
  cursor: pointer;
  position: relative;
}
#menu-button span {
  display: block;
  width: calc(14 * var(--screen-unit));
  height: 1px;
  background-color: var(--color-black);
  transition: transform .25s ease;
}
/* 開いたら × に（参照には無い。閉じる手掛かりのため足す） */
#menu-button.is-open span:nth-child(1) { transform: translateY(calc(2.5 * var(--screen-unit))) rotate(45deg); }
#menu-button.is-open span:nth-child(2) { transform: translateY(calc(-2.5 * var(--screen-unit))) rotate(-45deg); }

@media (max-width: 767.98px) {
  #site-header { align-items: center; }
  #site-nav .nav-links { display: none; }
  #site-cta__subtitle { display: none; }
  #site-cta { flex-direction: row; align-items: center; gap: calc(8 * var(--screen-unit)); }
  #menu-button { display: flex; }
}

/* --------------------------------------------------------------------------
   7. モバイルメニュー（設計書 §4-2）
   -------------------------------------------------------------------------- */
#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9;
  background-color: var(--color-black);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}
#mobile-menu a { pointer-events: none; }
#mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
#mobile-menu.is-open a { pointer-events: auto; }
@media (min-width: 768px) { #mobile-menu { display: none !important; } }

.mobile-menu__inner { height: 100%; padding-top: var(--header-height); }
.mobile-menu__grid {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  margin: 0 calc(-1 * var(--site-padding-x));
  padding: 0 var(--site-padding-x);
}
#mobile-menu__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: calc(40 * var(--screen-unit)) 0;
}
#mobile-menu__nav ul { text-align: right; width: 100%; height: auto; }
#mobile-menu__nav li + li { margin-top: calc(22 * var(--screen-unit)); }
#mobile-menu__nav li { --grid-column-span: 11; --grid-column-start: 1; }
#mobile-menu__nav a {
  color: var(--color-white);
  text-decoration: none;
  font-size: calc(48 * var(--screen-unit));
  font-weight: 400;
  line-height: .916;
  letter-spacing: calc(-1.44 * var(--screen-unit));
}
#mobile-menu__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(16 * var(--screen-unit));
  padding: calc(20 * var(--screen-unit)) var(--grid-column-width) calc(28 * var(--screen-unit));
  text-transform: uppercase;
  border: none;
}
.mobile-menu__social-label { color: #cccbbd80; flex-shrink: 0; }
.mobile-menu__social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(12 * var(--screen-unit)) calc(16 * var(--screen-unit));
}
.mobile-menu__social-links a { color: var(--color-white); text-decoration: none; }

/* --------------------------------------------------------------------------
   8. 格子（Canvas2D）と物差し（設計書 §6・設計書 §2）
   -------------------------------------------------------------------------- */
#grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 2;
}
#grid-ref {
  position: fixed;
  top: 0;
  left: 0;
  height: calc(var(--vh) * 100);
  width: 100%;
  pointer-events: none;
  visibility: hidden;
}
#grid-ref .o-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
#grid-ref .o-grid { width: 100%; height: auto; }
#grid-ref__center {
  --grid-column-span: 18;
  --grid-column-start: 4;
  height: 4lh;
  font-size: var(--hero-title);
  line-height: .906;
  width: calc(var(--grid-span-width) * 18 + .5 * var(--grid-column-width));
}
@media (max-width: 767.98px) {
  #grid-ref__center { --grid-column-span: 10; --grid-column-start: 2; width: calc(var(--grid-span-width) * 10 + .5 * var(--grid-column-width)); }
}

/* --------------------------------------------------------------------------
   9. セクション共通（設計書 §5-0）
   -------------------------------------------------------------------------- */
.section { position: relative; width: 100%; }
.section__inner {
  position: sticky;
  top: 0;
  height: calc(var(--vh) * 100);
  padding-top: var(--site-padding-y);
  padding-bottom: var(--site-padding-y);
}

/* --------------------------------------------------------------------------
   10. ヒーロー（設計書 §5-1）
   -------------------------------------------------------------------------- */
#hero { position: relative; height: calc(var(--vh) * 200); }
#hero .section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  width: 100%;
}
#hero__content .o-container { width: 100%; }
#hero__content .o-grid { width: 100%; }
#hero .hero-title {
  --grid-column-span: 18;
  --grid-column-start: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  font-weight: 500;
  text-transform: uppercase;
  height: 4lh;
  width: 100%;
}
#hero .hero-title > span { white-space: nowrap; }
#hero .hero-title > span:nth-child(2) { flex-grow: 1; }          /* 2 行目が伸びて 3 行目を押し下げる */
#hero .hero-title > span:nth-child(3) { align-self: flex-end; }  /* 3 行目だけ右寄せ */

.hero-copy {
  position: absolute;
  top: 100%;
  height: auto;
  margin: 0;
  padding-top: 2em;
  --grid-column-span: 8;
  --grid-column-start: 13;
}
.hero-copy > span:nth-child(1) .line:last-child > div:last-child { padding-right: .4ex; }

#hero__scroll-cta {
  position: fixed;
  bottom: var(--site-padding-y);
  left: 0;
  right: 0;
}
#hero__scroll-cta .o-grid { height: auto; }
#hero__scroll-cta .o-grid span {
  --grid-column-span: 18;
  --grid-column-start: 4;
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  #hero .hero-title { --grid-column-span: 10; --grid-column-start: 2; }
  .hero-copy { --grid-column-span: 7; --grid-column-start: 3; }
  #hero__scroll-cta { display: none; }   /* 参照の sp_00（scroll 0）に出ていない＝SP は非表示（.desktop-only 相当） */
}

/* --------------------------------------------------------------------------
   11. イントロ（山。inner は sticky でなく fixed。設計書 §5-2）
   -------------------------------------------------------------------------- */
#intro {
  --color-white: var(--color-warm-white);
  position: relative;
  height: calc(var(--vh) * 200);
  color: var(--color-white);
}
#intro .section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
}
#intro__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#intro__copy h2 { text-transform: uppercase; }
#intro__copy .char { will-change: filter, opacity; }

/* --------------------------------------------------------------------------
   12. ケース＋両耳（ドローン相当。設計書 §5-3）
   -------------------------------------------------------------------------- */
#product {
  --color-white: var(--color-warm-white);
  position: relative;
  height: calc(var(--vh) * 200);
  color: var(--color-white);
}
#product__title {
  --grid-column-span: 12;
  --grid-column-start: 7;
  margin-top: calc(80 * var(--screen-unit));
  text-transform: uppercase;
}
#product__title .char-mask { overflow-clip-margin: .05em; }
#product__title h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
#product__desc {
  --grid-column-span: 12;
  --grid-column-start: 7;
  margin-bottom: calc(80 * var(--screen-unit));
  align-self: end;
}
#product__desc p { margin: 0; }

@media (max-width: 767.98px) {
  #product .section__inner { display: flex; flex-direction: column; justify-content: flex-end; }
  #product .o-grid { height: auto; }
  #product__title { --grid-column-span: 11; --grid-column-start: 2; margin-top: 0; }
  #product__title h2 { text-align: left; align-items: flex-start; }
  #product__desc { --grid-column-span: 8; --grid-column-start: 2; margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   13. Process（400vh sticky・4 語切替。設計書 §5-4）
   -------------------------------------------------------------------------- */
#process { position: relative; height: calc(var(--vh) * 400); }
#process .section__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#process__head { margin-top: calc(92 * var(--screen-unit)); height: auto; }

/* 番号 00→01〜04 ＋ ドット */
#process__nav {
  --grid-column-start: 1;
  --grid-column-span: 3;
  display: flex;
  flex-direction: column;
  font-size: calc(34 * var(--screen-unit));
  letter-spacing: calc(-1.015 * var(--screen-unit));
  font-weight: 400;
}
#process__nav .process__number {
  position: relative;
  display: inline-block;
  width: fit-content;
  transform: translate(-.1ch);
}
#process__nav .process__number > span:first-child { visibility: hidden; }   /* 幅取りのダミー 00 */
#process__numbers { position: absolute; left: 0; top: 0; }
#process__numbers span {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(100%);
  transition: transform .5s, opacity .5s;
  opacity: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
#process__numbers span.is-active { opacity: 1; transform: translate(0); }
#process__numbers span.is-next { transform: translate(-100%); }   /* 通過済みは左へ抜ける（参照と同じクラス名） */

#process__dots { display: flex; gap: .5em; }
#process__dots li {
  position: relative;
  width: 4px;
  height: 4px;
  margin-top: .5em;
  transition: transform .25s;
  cursor: pointer;
}
#process__dots li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--color-white);
  transition: background-color .25s;
}
#process__dots li.is-active::before { background-color: var(--color-white); }

/* 「—    Our / Process」 */
#process__label {
  --grid-column-start: 4;
  --grid-column-span: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: calc(32 * var(--screen-unit));
  line-height: calc(27 * var(--screen-unit));
  letter-spacing: calc(-.96 * var(--screen-unit));
  font-weight: 400;
  white-space: pre;
}

/* 「HI-RES AUDIO / WIRELESS」 */
#process__tag {
  --grid-column-start: 15;
  --grid-column-span: 4;
  text-transform: uppercase;
  font-size: max(16px, calc(13 * var(--screen-unit)));
  letter-spacing: calc(-.39 * var(--screen-unit));
  font-weight: 500;
}

/* 右端の 4 本線。現在ステップの線だけ 2 倍に伸びる（.is-active は ui/sections.js が付ける） */
#process__lines {
  --grid-column-start: 24;
  --grid-column-span: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
#process__lines span {
  width: 100%;
  height: 1px;
  background-color: var(--color-white);
  transform-origin: right center;
  transition: transform .5s;
}
#process__lines span.is-active { transform: scaleX(2); }

/* 説明文（1 本目だけ CSS で表示。2〜4 は JS が行単位で出し入れ） */
#process-desc {
  position: absolute;
  left: 0;
  right: 0;
  height: auto;
  top: calc(490 * var(--height-unit));
}
#process-desc p {
  font-size: max(18px, calc(14 * var(--screen-unit)));
  font-weight: 400;
  letter-spacing: calc(-.42 * var(--screen-unit));
  display: none;
  --grid-column-start: 1;
  --grid-column-span: 4;
}
#process-desc p:first-child { display: block; }

/* 線画の止め絵（WebGL 不可のときだけ） */
#process__fallback { display: none; }
.no-gl #process__fallback, .reduced #process__fallback {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#process__fallback img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 70%;
  width: auto;
  display: none;
}
#process__fallback img.is-active { display: block; }

/* 大見出し：見えないダミーで高さを取り、absolute のリストを重ねる */
#process__title { height: auto; }
#process__title > span:first-child {
  --grid-column-start: 1;
  --grid-column-span: 3;
  position: relative;
  width: 100%;
  margin: 1em 0;
}
#process__title > span:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: var(--color-white);
  opacity: 0;
  transition: opacity .5s;
  top: clamp(0px, (var(--vh) * 100 - 820px) * -1, 100%);
}
#process__title > span:first-child.is-active::before { opacity: 1; }
#process__title h2 {
  position: relative;
  --grid-column-start: 4;
  --grid-column-span: 21;
  --line-height: .89832;
  --letter-spacing: -4.317;
  --font-size: 144;
  text-align: right;
  text-transform: uppercase;
}
#process__title h2 > span:first-child {
  display: block;
  font-size: calc(var(--font-size) * var(--screen-unit));
  letter-spacing: calc(var(--letter-spacing) * var(--screen-unit));
  line-height: var(--line-height);
  visibility: hidden;
}
#process__title-list {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
}
#process__title-list > span {
  position: absolute;
  left: unset;
  right: 0;
  top: 0;
  font-size: calc(var(--font-size) * var(--screen-unit));
  letter-spacing: calc(var(--letter-spacing) * var(--screen-unit));
  line-height: var(--line-height);
  transform: translate(100%);
  opacity: 0;
  transition: transform .5s, opacity .5s;
  white-space: nowrap;
}
#process__title-list > span.is-active { opacity: 1; transform: translate(0); }
#process__title-list > span.is-next { transform: translate(-100%); }

@media (max-width: 767.98px) {
  #process__head { margin-top: calc(98 * var(--screen-unit)); }
  #process__dots { display: none; }
  #process__label { display: none; }
  #process__tag { --grid-column-start: 8; --grid-column-span: 5; text-align: right; }
  #process__lines { display: none; }
  #process-desc { top: calc(240 * var(--height-unit)); }
  #process-desc p { --grid-column-start: 1; --grid-column-span: 7; text-align: left; }
  #process__title > span:first-child { display: none; }
  #process__title h2 {
    --grid-column-start: 1;
    --grid-column-span: 12;
    --font-size: 50;
    --line-height: 1.29128;
    --letter-spacing: -1.44;
    text-align: right;
  }
}

/* --------------------------------------------------------------------------
   14. Thesis（通常フロー・2 カラム。設計書 §5-5）
   -------------------------------------------------------------------------- */
#thesis { position: relative; min-height: calc(var(--vh) * 100); }
#thesis .section__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 0;
  padding-top: calc(var(--header-height) + 2 * var(--site-padding-y));
  height: auto;
}
#thesis__content { flex: 1; display: flex; }
#thesis__image {
  position: relative;
  width: calc(var(--site-padding-x) + var(--grid-span-17));   /* 202 + 728 = 930px@1440 */
  flex-shrink: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;                                        /* 実測 929×526（推定 16:9） */
}
#thesis__image img, #thesis__image picture { object-fit: cover; height: 100%; width: 100%; }
#thesis__copy {
  flex: 1;
  padding-left: var(--grid-span-2);
  padding-right: var(--site-padding-x);
  font-weight: 400;
}
#thesis__copy p {
  font-size: var(--default);
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  font-weight: 400;
  margin-top: 3em;
}
#thesis__copy a {
  width: 20ch;
  margin-top: 2em;
  padding: .5em .6em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-white);
  background: #c0c0c01a;
  border: none;
}
#thesis__copy a > span:last-child { transform: translateY(-.1em); }

@media (max-width: 767.98px) {
  #thesis__content { flex-direction: column; }
  #thesis__image { width: 100%; aspect-ratio: 389 / 304; }
  #thesis__copy {
    padding-left: calc(var(--site-padding-x) + var(--grid-column-width));
    padding-right: calc(var(--grid-span-width) * 3 + var(--grid-column-width));
    padding-bottom: calc(40 * var(--screen-unit));
  }
}

/* --------------------------------------------------------------------------
   15. Gallery（主画像は WebGL 平面。設計書 §5-6）
   -------------------------------------------------------------------------- */
#gallery { position: relative; }
#gallery .section__inner {
  display: flex;
  height: unset;
  flex-direction: column;
  gap: calc(102 * var(--screen-unit));
  padding-top: calc(200 * var(--screen-unit));
  padding-bottom: 0;
  color: var(--color-grey);
}
#gallery__images {
  display: flex;
  flex-direction: column;
  gap: calc(36 * var(--screen-unit));
  align-items: flex-end;
}
.main-images-container {
  position: relative;
  height: auto;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  flex: 0 0 auto;
  aspect-ratio: 1036 / 629;
}
.main-images-wrapper { width: 100%; height: 100%; position: relative; overflow: hidden; }
.main-images-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.has-gl .main-images-wrapper img { visibility: hidden; }     /* WebGL が描くあいだは縮退用 img を隠す */
.thumbnails-container { flex: 0 0 auto; display: flex; gap: calc(13 * var(--screen-unit)); }
.thumbnail-button {
  padding: 0;
  border: none;
  cursor: pointer;
  width: calc(67 * var(--screen-unit));
  height: calc(48 * var(--screen-unit));
  opacity: .25;
  transition: opacity .2s ease-in-out;
  background: transparent;
}
.thumbnail-button.is-active { opacity: 1; }
.thumbnail-button img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767.98px) {
  #gallery .section__inner { gap: calc(52 * var(--screen-unit)); }
  #gallery__images { gap: calc(22 * var(--screen-unit)); }
  .thumbnails-container { gap: calc(7 * var(--screen-unit)); }
  .thumbnail-button { width: calc(40 * var(--screen-unit)); height: calc(29 * var(--screen-unit)); }
}

/* --------------------------------------------------------------------------
   16. Specs（頭部・見出し・カード 3。設計書 §5-7）
   -------------------------------------------------------------------------- */
#specs { position: relative; min-height: calc(var(--vh) * 100); }
#specs .section__inner {
  position: relative;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#specs__hero { position: relative; margin-top: calc(200 * var(--screen-unit)); }
#specs-title.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: calc(-1.92 * var(--screen-unit));
  gap: .5em;
  padding-top: calc(380 * var(--screen-unit));
  padding-bottom: calc(100 * var(--screen-unit));
}
#specs-title > span:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.25em;
  padding-left: 1.1em;
}
#specs-title > span:nth-child(1) > span:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}
#specs-title svg { fill: var(--color-white); height: 1lh; width: auto; }
#specs__image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  width: calc(var(--site-padding-x) + var(--grid-span-24));
  aspect-ratio: 1832 / 1234;
  opacity: .5;
  z-index: -1;
  -webkit-mask-image: linear-gradient(black 0%, transparent 80%);
  mask-image: linear-gradient(black 0%, transparent 80%);
}
/* WebGL 不可のときは外殻の画像を当て箱に敷く */
.no-gl #specs__image { background: url("../img/sound-module-fallback-r1.webp") center / contain no-repeat; }

#specs__list { padding-bottom: calc(140 * var(--screen-unit)); }
#specs__list > ul { height: auto; }
#specs__list > ul > li {
  --grid-column-span: 7;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(52 * var(--screen-unit)) calc(44 * var(--screen-unit)) calc(20 * var(--screen-unit));
  min-height: calc(350 * var(--screen-unit));
}
#specs__list > ul > li:nth-child(1) { --grid-column-start: 1; }
#specs__list > ul > li:nth-child(2) { --grid-column-start: 10; transform: translate(calc(-1 * var(--grid-column-width)), 4em); }
#specs__list > ul > li:nth-child(3) { --grid-column-start: 18; }
#specs__list > ul > li > div:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#specs__list li h6 { text-transform: uppercase; margin: 0; }
#specs__list li p { font-size: max(18px, var(--caption1)); text-transform: unset; font-weight: 400; margin-top: 3em; }
#specs__list .caption1 { color: var(--color-spec-grey); }
#specs__list .char { will-change: opacity, filter; }

/* 枠＋小四角 6 個 */
.squares-decorator {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  background: #10100f4d;
  z-index: -1;
}
.squares-decorator span {
  position: absolute;
  width: calc(var(--screen-unit) * 6);
  height: calc(var(--screen-unit) * 6);
  background: var(--color-white);
}
.squares-decorator span:nth-child(1) { top: 0; left: 0; transform: translate(-50%, -50%); }
.squares-decorator span:nth-child(2) { top: 0; right: 0; transform: translate(50%, -50%); }
.squares-decorator span:nth-child(3) { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.squares-decorator span:nth-child(4) { bottom: 0; right: 0; transform: translate(50%, 50%); }
.squares-decorator span:nth-child(5) { top: 25%; right: 0; transform: translate(50%, 25%); }
.squares-decorator span:nth-child(6) { top: 25%; left: 0; transform: translate(-50%, 25%); }

@media (max-width: 767.98px) {
  #specs__hero { width: 100%; margin-top: calc(170 * var(--screen-unit)); padding: 0 var(--site-padding-x); }
  #specs-title.hero-title { width: 100%; }
  #specs-title > span:nth-child(1) { justify-content: space-between; width: 100%; gap: 0; padding-left: 0; }
  #specs-title svg { height: 1.2lh; margin-left: .75em; }
  #specs__list > ul { padding: 0 var(--grid-column-width); display: flex; flex-direction: column; gap: 2em; }
  #specs__list > ul > li:nth-child(n) { transform: none; }
}

/* --------------------------------------------------------------------------
   17. Build to fit（全面の油絵＋黒ボタン。設計書 §5-8）
   -------------------------------------------------------------------------- */
#build { position: relative; overflow: hidden; }
#build .section__inner {
  position: relative;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: calc(250 * var(--screen-unit));
  padding-bottom: calc(150 * var(--screen-unit));
}
#build__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
#build__bg img, #build__bg picture { width: 100%; height: 100%; object-fit: cover; }
#build-title {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;                 /* .o-grid の grid を flex で上書き（参照と同じ後勝ち） */
  flex-direction: column;
  letter-spacing: calc(-4.5 * var(--screen-unit));
  line-height: 1.1;
  text-align: center;
}
#build-title > span { --grid-column-start: 1; }
/* 参照は SplitText が作る行 div に負のマージン。うちは素の span にも同じ値を当てて、分割前後で高さを揃える（section 高 891） */
#build-title > :nth-child(1) { margin-top: -.1em; }
#build-title > :nth-child(2) { margin-top: -.2em; }
#build-title .char-mask { overflow-clip-margin: .05em; }

#build__button { position: relative; z-index: 1; margin-top: calc(120 * var(--screen-unit)); }
#build__button > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6em;
}
#build__button > div > a {
  position: relative;
  background: var(--color-dark-black);
  text-decoration: none;
  color: var(--color-white);
  padding: 31px 44px 31px 52px;
  font-size: var(--caption1);
  display: flex;
  align-items: center;
  gap: 1em;
  border: none;
  width: fit-content;
}
/* 左端の帯。参照は差し色だが KANADE の朱は WebGL 専用なので白で */
#build__button > div > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2ex;
  height: 100%;
  background: var(--color-white);
  transform-origin: left;
  transition: transform .2s ease-in-out;
  transform: scaleX(0);
}
#build__button > div > a > span:last-child svg { height: 100%; width: 1.5em; color: var(--color-white); }
#build__button .is-flipper > span { position: relative; }
#build__button .is-flipper > span:first-child { transition: transform .2s ease-in-out 35ms; }
#build__button .is-flipper > span:last-child { transition: transform .2s ease-in-out .07s; }

@media (max-width: 767.98px) {
  #build .section__inner { padding-top: calc(106 * var(--screen-unit)); }
  #build-title { font-size: calc(54 * var(--screen-unit)); line-height: calc(49 * var(--screen-unit)); letter-spacing: -1.62px; }
  #build-title > div { margin-top: 0; }
  #build__button { padding-top: calc(36 * var(--screen-unit)); margin-top: 0; }
  #build__button > div { gap: 2em; }
  #build__button > div > a { font-size: 16px; padding: 17px 24px 18px 17px; }
}

/* --------------------------------------------------------------------------
   18. フッター（上下 2 重線。設計書 §5-9）
   -------------------------------------------------------------------------- */
#site-footer {
  position: relative;
  background-color: var(--color-black);
  z-index: 2;
  padding-top: calc(80 * var(--screen-unit));
  padding-bottom: calc(48 * var(--screen-unit));
}
#site-footer a { text-decoration: none; }
#site-footer::before, #site-footer::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 8px;
  border-top: 1px solid var(--color-warm-white);
  border-bottom: 1px solid var(--color-warm-white);
  opacity: .1;
}
#site-footer::before { top: 8px; }
#site-footer::after { bottom: 8px; }

#site-footer__top, #site-footer__bottom, #site-footer__top a, #site-footer__bottom a { color: #cccbbd80; }
#site-footer__top { height: auto; }
#site-footer__logo { --grid-column-start: 1; --grid-column-span: 7; color: #cccbbd80; }
#site-footer__logo svg { fill: #cccbbd80; height: calc(62 * var(--screen-unit)); width: auto; }
#site-footer__links { --grid-column-start: 10; --grid-column-span: 3; }
#site-footer__social { --grid-column-start: 15; --grid-column-span: 3; }
#site-footer__emails { --grid-column-start: 19; --grid-column-span: 6; }
#site-footer__emails > a { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
#site-footer__links, #site-footer__emails, #site-footer__social {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--screen-unit));
  padding-bottom: 2em;
  text-transform: uppercase;
}
#site-footer__links > div, #site-footer__emails > div, #site-footer__social > div { color: #cccbbd80; }
#site-footer__links a, #site-footer__emails a, #site-footer__social a { color: var(--color-white); }

#site-footer__mobile-logo { display: none; padding-top: calc(48 * var(--screen-unit)); padding-bottom: calc(52 * var(--screen-unit)); height: auto; }
#site-footer__mobile-logo svg { --grid-column-start: 2; --grid-column-span: 10; fill: #cccbbd80; color: #cccbbd80; height: calc(62 * var(--screen-unit)); width: 100%; }

/* 架空の明示（SPEC §1-1）。下段の上に 1 行 */
#site-footer__note {
  color: var(--color-thesis-grey);
  text-transform: none;
  padding-top: calc(96 * var(--screen-unit));
}

#site-footer__bottom { padding-top: calc(48 * var(--screen-unit)); height: auto; }
#site-footer__bottom > :nth-child(1) { --grid-column-start: 1; --grid-column-span: 9; }
#site-footer__bottom > :nth-child(2) { --grid-column-start: 10; --grid-column-span: 5; }
#site-footer__bottom > :nth-child(3) { --grid-column-start: 15; --grid-column-span: 4; }
#site-footer__bottom > :nth-child(4) { --grid-column-start: 19; --grid-column-span: 6; text-align: right; }

@media (max-width: 767.98px) {
  #site-footer { padding-top: calc(38 * var(--screen-unit)); padding-bottom: calc(18 * var(--screen-unit)); }
  #site-footer__top, #site-footer__bottom { font-size: max(16px, calc(11 * var(--screen-unit))); letter-spacing: calc(-.33 * var(--screen-unit)); }
  #site-footer__logo { display: none; }
  #site-footer__links, #site-footer__emails, #site-footer__social {
    --grid-column-start: 1;
    --grid-column-span: 12;
    text-align: center;
    padding-bottom: calc(48 * var(--screen-unit));
  }
  #site-footer__emails { padding-bottom: 0; }
  #site-footer__emails > *:nth-child(3) { padding-top: calc(20 * var(--screen-unit)); }
  #site-footer__mobile-logo { display: grid; }
  #site-footer__note { text-align: center; padding-top: calc(24 * var(--screen-unit)); }
  #site-footer__bottom {
    padding-top: calc(48 * var(--screen-unit));
    padding-bottom: calc(48 * var(--screen-unit));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5em;
  }
  #site-footer__bottom > :nth-child(3) { display: none; }   /* SP の下段は 3 項目 */
  #site-footer__bottom > :nth-child(4) { text-align: center; }
}
@media (min-width: 768px) { #site-footer__mobile-logo { display: none; } }

/* --------------------------------------------------------------------------
   19. 演出系の器（設計書 §6。中身の transform は JS が毎フレーム書く）
   -------------------------------------------------------------------------- */
.line { display: block; position: relative; }
.char, .word { display: inline-block; position: relative; }
.char-mask { display: inline-block; overflow: clip; overflow-clip-margin: .05em; }
.t-animation .char-mask { overflow-clip-margin: .05em; }
.p-animation { will-change: opacity; }
.prevent-select { user-select: none; -webkit-user-select: none; }

/* 参照は width:0 の柱だが、隠れた thumb（translate 100%）が横はみ出し検査に引っかかるので
   柱を thumb と同じ幅にして overflow:clip で切る。見え方は同じ */
#scroll-indicator {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  height: calc(var(--vh) * 100);
  z-index: 20;
  overflow: clip;
  pointer-events: none;
}
#scroll-indicator__bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 200px;
  background-color: var(--color-white);
  pointer-events: auto;
  transform: translate3d(100%, 0, 0);
  cursor: grab;
}
@media (max-width: 767.98px) {
  #scroll-indicator { width: 4px; }
  #scroll-indicator__bar { width: 4px; height: 100px; }
}

/* プリローダ（DOM＋CSS transition） */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-black);
}
.is-ready #preloader { background-color: transparent; }
#preloader.is-hidden { display: none; }
.no-js #preloader { display: none; }
#preloader .o-container { height: auto; }
#preloader-content {
  --grid-column-span: 10;
  --grid-column-start: 8;
  position: relative;
  overflow: hidden;
}
#preloader-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5em;
  margin-top: calc(81 * var(--screen-unit));
  margin-bottom: calc(87 * var(--screen-unit));
  color: var(--color-white);
}
#preloader-logo > span:nth-child(1) { height: 4em; }
#preloader-logo > span:nth-child(2) { height: 2em; }
#preloader-logo svg { fill: var(--color-white); height: 100%; width: auto; }
#preloader-left, #preloader-right {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25em;
  font-size: var(--nav-link);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.36px;
  text-transform: none;             /* SPEC §2 #0：sound / works は小文字 */
}
#preloader-left { top: 0; left: 0; align-items: flex-start; }
#preloader-right { bottom: 0; right: 0; align-items: flex-end; }
#preloader-left span:nth-child(1) { display: block; width: 5ch; height: 1lh; background-color: var(--color-white); }
#preloader-right span:last-child { display: block; width: 4ch; height: 1lh; background-color: var(--color-white); }
@media (max-width: 767.98px) {
  #preloader-content { --grid-column-span: 10; --grid-column-start: 2; }
}

/* --------------------------------------------------------------------------
   20. 下層（terms / privacy）の器（設計書 §5）
   -------------------------------------------------------------------------- */
.legal-page { min-height: calc(var(--vh) * 100); color: var(--color-grey); }
.legal-page__inner { padding-bottom: calc(120 * var(--screen-unit)); }
.legal-page__header {
  min-height: calc(var(--vh) * 100);
  align-items: center;
  padding: var(--site-padding-y) 0;
  height: auto;
}
.legal-page__title {
  --grid-column-span: 19;
  --grid-column-start: 4;
  /* 参照は clamp(96px,160u,160px)。Instrument Sans の「CONDITIONS」は 6.04em 幅で 19 列（56.67vw）を超えるので、
     9.2vw（=19 列 ÷ 6.1）を上限に足して列内に収める（1440 → 132px、768 → 71px） */
  font-size: clamp(48px, min(calc(160 * var(--screen-unit)), 9.2vw), 160px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: calc(-4.5 * var(--screen-unit));
  color: var(--color-white);
  text-transform: uppercase;
}
.legal-page__title > span { display: block; }
.legal-page__document { height: auto; }
.legal-page__body { --grid-column-span: 14; --grid-column-start: 6; }
.legal-page__effective-date { margin-bottom: calc(32 * var(--screen-unit)) !important; color: var(--color-thesis-grey); }
.legal-page__body h2 {
  font-size: clamp(22px, var(--h5), 30px);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -.9px;
  color: var(--color-white);
  margin: 2.5em 0 1em;
  text-transform: none;
}
.legal-page__body p {
  font-size: var(--default);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  margin: 0 0 1.2em;
}
.legal-page__body ul { margin: 0 0 1.2em; }
.legal-page__body li { position: relative; padding-left: 1.2em; line-height: 1.7; }
.legal-page__body li::before { content: "-"; position: absolute; left: 0; }
.legal-page__body a { color: var(--color-white); text-decoration: underline; text-underline-offset: .15em; }
.legal .no-js #site-header, .no-js .legal #site-header { position: absolute; }
/* 下層 5 ページ（html.sub）の地は #131313（参照 thesis/contact/order の実測 RGB 19。等高線は gl/terrain.js が同じ色の上に描く）。
   body に置くと fixed の #gl（z:-5）を覆うので html 側に置く */
html.sub { background-color: #131313; }
/* 下層の #gl は opacity を 1 未満にする（見た目は不変）。不透明な positioned 要素（#site-footer：relative＋z-index＋地色）が
   fixed の WebGL キャンバスに重なると、Chrome（ソフトウェア合成／swiftshader）がキャンバスの「隠れた分」を上下逆に
   間引き、フッターの見えている高さと同じ黒帯が画面上端に出る（thesis scroll 2700 で上 315px。readPixels では描けている）。
   キャンバスを半透明扱いにすると間引きが起きない。_qa/subpages_check.py の no_black_band で検査 */
html.sub #gl { opacity: .999; }

@media (max-width: 767.98px) {
  .legal-page__inner { padding-bottom: calc(80 * var(--screen-unit)); }
  .legal-page__header { min-height: calc(var(--vh) * 70); }
  .legal-page__title { --grid-column-span: 12; --grid-column-start: 1; font-size: clamp(36px, calc(54 * var(--screen-unit)), 96px); letter-spacing: -1.62px; }
  .legal-page__body { --grid-column-span: 12; --grid-column-start: 1; }
  .legal-page__body p, .legal-page__body li { font-size: max(14px, var(--default)); }   /* SP の 12u は和文の本文には小さい */
}

/* --------------------------------------------------------------------------
   21. 和文の組版（SPEC §1-4・§3-11）
   .jp＝和文の段落。英字の階層値（負の字間・詰めた行送り）は和文に合わないので、ここで上書きする
   -------------------------------------------------------------------------- */
.jp {
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.7;
  font-feature-settings: normal;
  text-transform: none;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
}
.w { display: inline-block; }                                  /* 文節。行頭に句読点・助詞だけを作らない */
.hero-copy.jp, #product__desc p.jp { line-height: 1.5; letter-spacing: 0; font-weight: 400; }
#process-desc p.jp { letter-spacing: 0; line-height: 1.7; }
#thesis__copy p.jp { letter-spacing: 0; line-height: 1.7; font-weight: 400; }
#specs__list li p.jp { letter-spacing: 0; line-height: 1.7; }
#site-footer__note.jp { line-height: 1.7; }
.jp-tight { font-feature-settings: "palt"; }                   /* 見出し寄りの和文だけ */

/* --------------------------------------------------------------------------
   22. hover はポインタのある端末だけ（タッチで貼り付かないように）
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  #site-nav .nav-links:hover li { opacity: .5; }
  #site-nav li.is-active, #site-nav li:hover { opacity: 1; }
  #process__dots li:hover { transform: scale(1.05); }
  .thumbnail-button:hover { opacity: 1; }
  #build__button:hover > div > a::before { transform: scaleX(1); }
  #build__button:hover .is-flipper > span { transform: translate(1ex); }
}

/* --------------------------------------------------------------------------
   23. 縮退（動きを減らす・WebGL 無し・縦の短い画面・向き）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}
.reduced *, .reduced *::before, .reduced *::after {
  transition-duration: .001ms !important;
  transition-delay: 0s !important;
  animation-duration: .001ms !important;
}
/* 動きを減らす：fixed で画面に貼り付く 2 要素を、各セクションの中の静的配置へ戻す（B2 追記 2026-09-04） */
.reduced #intro .section__inner { position: sticky; top: 0; height: calc(var(--vh) * 100); pointer-events: auto; }
.reduced #hero__scroll-cta { position: absolute; top: calc(var(--vh) * 100 - var(--site-padding-y)); bottom: auto; transform: translateY(-100%); }
/* WebGL 無し：油絵は CSS 背景 1 枚で、明るい区間の地を作る */
.no-gl #intro, .no-gl #product {
  background: url("../img/hero/soundscape-bg-r1.webp") center / cover no-repeat;
}

/* 縦の短い画面（PC のノート・横向きスマホ）。Process の頭と説明文を詰める */
@media (min-width: 768px) and (max-height: 650px) {
  #process__head { margin-top: calc(56 * var(--screen-unit)); }
  #process-desc { top: calc(440 * var(--height-unit)); }
  #hero .hero-title { height: 3.6lh; }
}
@media (max-width: 767.98px) and (orientation: landscape) {
  #hero .hero-title { --grid-column-span: 10; --grid-column-start: 2; }
  #process-desc { top: calc(200 * var(--height-unit)); }
}
/* 中間幅（768〜991）：カラム 24 のまま、カード 3 枚を 2 段に落とす */
@media (min-width: 768px) and (max-width: 991.98px) {
  #specs__list > ul > li { --grid-column-span: 11; padding: calc(40 * var(--screen-unit)) calc(32 * var(--screen-unit)) calc(20 * var(--screen-unit)); }
  #specs__list > ul > li:nth-child(1) { --grid-column-start: 1; }
  #specs__list > ul > li:nth-child(2) { --grid-column-start: 14; transform: none; }
  #specs__list > ul > li:nth-child(3) { --grid-column-start: 7; margin-top: 2em; }
  #process-desc p { --grid-column-span: 6; }
  /* フッター：768 では 1 列が 60〜130px しかなく、CONTACT US／INSTAGRAM／メールアドレス（12px で 70〜178px）が列を超える。
     列を広げて配る（logo 1-5 / links 7-10 / social 11-14 / emails 16-24。下段も同じ割り） */
  #site-footer__logo { --grid-column-span: 5; }
  #site-footer__logo svg { height: calc(40 * var(--screen-unit)); }
  #site-footer__links { --grid-column-start: 7; --grid-column-span: 4; }
  #site-footer__social { --grid-column-start: 11; --grid-column-span: 4; }
  #site-footer__emails { --grid-column-start: 16; --grid-column-span: 9; }
  #site-footer__bottom > :nth-child(1) { --grid-column-start: 1; --grid-column-span: 7; }
  #site-footer__bottom > :nth-child(2) { --grid-column-start: 8; --grid-column-span: 6; }
  #site-footer__bottom > :nth-child(3) { --grid-column-start: 14; --grid-column-span: 4; }
  #site-footer__bottom > :nth-child(4) { --grid-column-start: 18; --grid-column-span: 7; }
}

/* ── 日本語見出しの字詰め（2026-09-04 内田指示「日本語中心に」。英字用の負の字間を和文向けに緩める） ── */
#hero-title, #product-title { letter-spacing: -0.02em; line-height: 1.04; }
#process__title, #process__title > span, #process__title-list, #process__title-list span { letter-spacing: -0.03em; }
#process__label span, #process__tag span { letter-spacing: 0; }
#build-title, #build-title span { letter-spacing: -0.02em; line-height: 1.02; }
#specs-title, #specs-title span { letter-spacing: -0.02em; }
.caption2 { letter-spacing: 0; line-height: 1.15; }
h6 { letter-spacing: 0; }
.nav-link, .nav-link a, #site-cta__subtitle, #hero__scroll-cta, #site-footer__top, #site-footer__bottom { letter-spacing: 0; }
.legal-page__title, #thesis-hero__title, #contact-hero__title { letter-spacing: -0.02em; line-height: 1.02; }
#preloader-left span, #preloader-right span { letter-spacing: 0; }
/* 見出しをもっと太く（2026-09-04 内田指示）。和文の大見出しは Zen Kaku Black 900 */
#hero-title, #hero-title span,
#product-title, #product-title span,
#build-title, #build-title span,
#process__title, #process__title span, #process__title-list, #process__title-list span,
#specs-title, #specs-title span,
#intro__copy, #intro__copy span,
.legal-page__title, .legal-page__title span,
#thesis-hero__title, #thesis-hero__title span,
#contact-hero__title, #contact-hero__title span { font-weight: 900; }
#process__numbers, #process__numbers span { font-weight: 700; }
h6, #specs__list h6 { font-weight: 700; }
/* 和文の大見出しは em 箱いっぱいに字が乗るので行間を空け、下層の見出しは 1 行に収める（2026-09-04） */
#build-title { font-size: calc(128 * var(--screen-unit)); line-height: 1.12; }
#build-title span { line-height: 1.12; }
.legal-page__title, #thesis-hero__title, #contact-hero__title { font-size: clamp(40px, calc(112 * var(--screen-unit)), 132px); line-height: 1.08; }
.legal-page__title span, #thesis-hero__title span, #contact-hero__title span { display: block; white-space: nowrap; }
@media (max-width: 767.98px) {
  #build-title { font-size: calc(46 * var(--screen-unit)); line-height: 1.12; }
  .legal-page__title, #thesis-hero__title, #contact-hero__title { font-size: clamp(34px, calc(46 * var(--screen-unit)), 60px); }
}

/* ── 絵の上に載る文字は影で地から浮かせる（2026-09-05 内田指示「見出しがまだ見づらい。影をつけて」） ──
   暗い面（つくり方の章）は地が黒なので掛けない。色は背景の暖色に合わせた焦げ茶で、黒い縁取りにしない。 */
#hero-title, #hero-title span,
#product-title, #product-title span,
#build-title, #build-title span,
#intro__copy, #intro__copy span {
  text-shadow:
    0 calc(3 * var(--screen-unit)) calc(24 * var(--screen-unit)) rgba(28, 18, 12, .55),
    0 calc(1 * var(--screen-unit)) calc(6 * var(--screen-unit)) rgba(28, 18, 12, .42);
}
.hero-copy, .hero-copy span,
#product__desc p, #product__desc span,
#hero__scroll-cta, #hero__scroll-cta span {
  text-shadow:
    0 calc(2 * var(--screen-unit)) calc(16 * var(--screen-unit)) rgba(28, 18, 12, .58),
    0 calc(1 * var(--screen-unit)) calc(4 * var(--screen-unit)) rgba(28, 18, 12, .40);
}
#build .nav-link, #build .nav-link span { text-shadow: 0 calc(1 * var(--screen-unit)) calc(8 * var(--screen-unit)) rgba(28, 18, 12, .35); }

/* ── スマホの読みやすさ（2026-09-05 内田指示「スマホ調整」） ──
   1) 固定ヘッダーの下を本文が通ると、ロゴと文字が重なって読めない（sp_02・sp_12・sp_14 で実測）。
      ヘッダーの背後にごく薄い暗幕を敷いて、下を通る文字と分ける。絵の上でも成立する暖色の暗さ。
   2) つくり方の章は、本文が白い線画の上を通る。地が黒なので**黒い光背**で文字を浮かせる
      （絵の上の見出しに使った暖色の影とは別物。ここは地が黒だから黒で締めるのが正しい）。 */
#header-scrim {
  position: fixed; inset: 0 0 auto 0; height: calc(148 * var(--screen-unit));
  background: linear-gradient(to bottom, rgba(20, 14, 10, .62), rgba(20, 14, 10, .30) 55%, rgba(20, 14, 10, 0));
  pointer-events: none; z-index: 8; opacity: 0; transition: opacity .3s ease;
}
.is-ready #header-scrim { opacity: 1; }
@media (min-width: 768px) { #header-scrim { display: none; } }

#process-desc p,
#process-desc .w {
  text-shadow: 0 0 calc(14 * var(--screen-unit)) rgba(12, 12, 12, .95),
               0 0 calc(5 * var(--screen-unit)) rgba(12, 12, 12, .9);
}
@media (max-width: 767.98px) {
  /* 本文の列を線画の手前に出す（線画は背景の canvas。z だけ上げれば重なっても読める） */
  #process-desc { position: relative; z-index: 3; }
}

/* Keep process labels clear of the fixed navigation on short desktop windows. */
@media (min-width: 768px) {
  #process__head { margin-top: max(116px, calc(92 * var(--screen-unit))); }
}