/* 5 つの部屋（about / concept / team / projects / contact）で共通の器 — 土台（背景・書体）、
   天井の看板（.head）、©（.copyright）、窓を変えている間の動きの停止。
   ここを直せば 3 ページに同時に効く（以前は同じ CSS の写しが 3 ファイルにあり、
   片方だけ直すとページごとに看板がずれていた。2026-08-10 に集約）。

   読み込み順の約束: 各ページは <link> でこのファイルを読み、そのあとの <style> で
   ページ固有の指定を重ねる。同じ強さなら後勝ちなので、ページ側が上書きできる
   （projects の見比べ用 ?v= / ?h= はこの仕組みで共存する）。

   単位の約束:
     --k  台の 1 単位の実寸。デスクトップはここの :root で定義するが、
          projects は表示方式ごとにページ側で定義し直す
     --kn 看板専用の単位。--k が 1px を下回っても 1px で止める
          （狭い窓で PROJECTS が 19px まで落ちて読みにくかったため。2026-08-10 承認）
     --u  モバイルの単位（300 分の 1 幅、514.3px で育ち止まる。下の節を参照）

   窓の境目は 1024px。1024 以下が縦積み、1025 以上が横並び。
   もとは 820px だったが、iPad Pro 12.9 の縦（1024x1366）が横並び側に入り、
   --k = min(幅/1600, 高さ/900) が幅基準になって本文が 17px まで落ちていた
   （2026-08-12 実測。同じ横並びの MacBook Air 13 は 21px）。
   横並び側は 16:9 の窓を前提にした作りなので、縦長のタブレットを
   縦積み側へ移した */

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

body {
  background: #000;
  color: #f2f2f2;
  font-family: "futura-pt", system-ui, sans-serif;
  font-weight: 300;
}

/* ---- 天井の案内看板。枠の位置を先に固定し、枠の中で大きさと色だけを変える。
       ページを移っても中心は動かない。全ページが今いる部屋を 3 番目の枠に置く
       （2026-08-11 の 5 部屋化。隠れる枠が常に (1)(2)(4)(5) に揃い、
       下の top の値を全ページで共有できる） ---- */
.head { display: flex; justify-content: center; position: relative; }
.nav-slot { display: flex; align-items: center; justify-content: center; }

/* 押すと入口へ戻る G。絶対配置なので、3 つの枠の中心は動かない */
.brand { position: absolute; display: block; pointer-events: auto; }
.brand img { display: block; width: auto; }

/* 円の中に 2 本線。三分割（head-split）でだけ出す */
.menu-mark { display: none; }

.nav-item {
  font-family: "futura-pt", sans-serif; font-weight: 300;
  letter-spacing: 0.42em;
  text-indent: 0.42em;                   /* 最後の字の右に残る字間の分を戻す。
                                            入れないと中央揃えが左へずれて見える */
  text-transform: uppercase;
  color: #fff;                           /* 半透明にしない。従属は大きさで示す */
  text-decoration: none;
  white-space: nowrap;
  display: inline-block; position: relative;
  cursor: pointer;                       /* 押せることを伝える最初の手がかり */
}
.nav-item.is-here { cursor: default; }   /* 今いる部屋には行き先がない */

/* 当てた語だけが灯る（2026-08-09 決定）。各ページの JS が body に h-glow を付ける。
   素の :hover に掛けないのは、projects の見比べ用 ?h= と衝突させないため */
body.h-glow .nav-item:not(.is-here),
body.h-both .nav-item:not(.is-here) { transition: text-shadow 0.35s ease; }
body.h-glow .nav-item:not(.is-here):hover,
body.h-glow .nav-item:not(.is-here):focus-visible,
body.h-both .nav-item:not(.is-here):hover,
body.h-both .nav-item:not(.is-here):focus-visible {
  text-shadow: 0 0 0.5em rgba(255, 255, 255, 0.75),
               0 0 1.4em rgba(255, 237, 136, 0.45);
}

/* ---- 三分割（head-split）の形・色・開閉。デスクトップとモバイルで共有し、
       寸法（--kn / --u）だけを下の各レイアウトの節で決める ---- */
body.head-split .nav-item {
  background: linear-gradient(100deg, #C26B08 0%, #FFED88 50%, #C26B08 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 紙面の最後の行き先には金のグラデーションを掛けない（2026-08-20 ユーザー指示）。
   上端のナビゲーションと同じ .nav-item を使い回しているので、詳細度を 1 つ上げて
   打ち消す。色は © と同じ薄い金（2026-08-20 ユーザー選択）。行き先と © が同じ色で
   揃い、読み終わりの領域が 1 つのまとまりに見える。大きさも各レイアウトの節で
   © に揃える。黒地でコントラスト比 5.09:1（0.6 では 4.44:1 で小さい文字の基準に届かない） */
body.head-split .foot .nav-item {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: rgba(231, 186, 86, 0.65);
}
/* 枠は使わない。中央は今いる部屋の名だけ */
body.head-split .nav-slot { width: auto; height: auto; position: absolute; }
/* 中央に大きく出るのは今いるページの名前（h1）。2026-08-21 に、枠ごと中央へ
   置く形（.nav-slot:has(.is-here)）から h1 そのものを置く形に変えた。
   メニューを全ページ共通の 6 つにしたので、今いるページも枠の 1 つとして
   落ちてくる。中央の名前は枠の外に独立して置く（ユーザー指示
   「メニューはすべて共通ではないのか」） */
body.head-split .nav-item.is-here {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
/* 行き先は O の真下に縦に落とす。右端を O に揃える。
   横に伸ばすと開いたときに右側だけ重くなり、左右の釣り合いが崩れる */
body.head-split .nav-slot {
  right: 0; justify-content: flex-end;
  opacity: 0; pointer-events: none;
  /* 閉じているあいだは移動順からも外す。opacity 0 だけだと見えない行き先へ
     キーボードで移動でき、焦点が当たっても何も見えない（2026-08-19 実測） */
  visibility: hidden;
  transform: translateY(-0.4em);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.4, 0, .2, 1),
              visibility 0s linear 0.3s;
}
body.head-split.menu-open .nav-slot {
  opacity: 1; pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.4, 0, .2, 1),
              visibility 0s linear 0s;
}
/* 下に落ちる順は上から。ずらして出す。
   2026-08-21 に、枠の位置（nth-of-type）から段の番号（data-step）へ変えた
   （ユーザー指示「メニューはフッターと同じで全部同じ順で良いのでは？」）。
   それまでは「3 番目の枠が今いるページ」を前提に 1・2・4・5 番目へ段を
   割り当てていたため、5 ページの並び順を揃えると今いるページの枠が
   1〜5 のどこにでも来て、段の割り当てが崩れる。HTML 側が各枠に
   data-step="1".."4"（今いるページを飛ばした通し番号）を持つ */
body.head-split.menu-open .nav-slot[data-step="2"] { transition-delay: 0.06s; }
body.head-split.menu-open .nav-slot[data-step="3"] { transition-delay: 0.12s; }
body.head-split.menu-open .nav-slot[data-step="4"] { transition-delay: 0.18s; }
body.head-split.menu-open .nav-slot[data-step="5"] { transition-delay: 0.24s; }
body.head-split.menu-open .nav-slot[data-step="6"] { transition-delay: 0.30s; }
body.head-split .brand {
  left: 0; right: auto; top: 50%;
  transform: translateY(-50%); margin-right: 0;
}
body.head-split .menu-mark {
  display: block;
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  border: 0; background: none; padding: 0; cursor: pointer;
  pointer-events: auto;
}
body.head-split .menu-mark svg {
  display: block; overflow: visible;
  transition: filter 0.3s ease;
}
/* 押すと 2 本が中央で交差して X になる */
body.head-split .bar {
  transform-origin: 232.5px 232.5px;
  transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
}
body.head-split.menu-open .bar-a { transform: rotate(45deg) translateY(48px); }
body.head-split.menu-open .bar-b { transform: rotate(-45deg) translateY(-48px); }

/* 読み終わりであることを示す署名。文書の最後に流し、画面には固定しない
   （2026-08-20 ユーザー指示）。ページを最後まで送ったときに初めて現れる。
   色はブランドの署名として金（G の実測グラデーションの中間色）を薄めて使う。
   白 0.3 は黒地に沈んで読めなかった。大きさと余白は各レイアウトの単位で決める。

   2026-08-19 に入れた画面下端への固定（position: fixed と、後ろに敷く黒い帯
   .copyright::before）は、この指示で全て取り消した。固定していた間は、
   about のモバイルで本文の最終行に、team のモバイルで顔写真に © が重なり、
   帯を濃くする対処を重ねていた（2026-08-20 の画面写真）。固定をやめたことで
   重なる相手そのものが無くなり、帯も要らなくなった */
.copyright {
  position: static; display: block; text-align: center;
  font-family: "futura-pt", sans-serif; font-weight: 300;
  letter-spacing: 0.3em; text-indent: 0.3em;
  color: rgba(231, 186, 86, 0.65);       /* 黒地でコントラスト比 5.09:1。
                                            0.6 では 4.44:1 で小さい文字の基準 4.5 に届かない */
  white-space: nowrap; pointer-events: none;
}

/* 看板の下を通り抜ける文字を消す幕。看板は画面の上端に貼り付いているので、
   スクロールした本文がその上を通ると字が重なって読めなくなる。看板の後ろに
   黒の帯を敷き、上へ流れた文字がその中へ入って消えるようにする。
   幕は看板（z-index 5）より下、内容より上（2026-08-12 ユーザー指示）。

   2026-08-19 にここへ集約した。それまでは about・concept・team・projects の
   4 ファイルに同じ 10 行が写されていて、片方だけ直すとページごとに帯がずれた
   （2026-08-10 に看板で同じ事故が起きている）。各ページに残る写しは読み込み順で
   こちらより後にあるため今も写しが勝つ。値は同じなので描画は変わらない。
   写しの削除は各ページの工程で行う。
   concept は図の区画でだけ高さを 96kn に下げる指定を自分の側に持つ（そのまま） */
.veil {
  position: fixed; left: 0; right: 0; top: 0;
  height: calc(200 * var(--k));
  background: linear-gradient(180deg,
    #000 0%, #000 34%,
    rgba(0, 0, 0, 0.94) 52%,
    rgba(0, 0, 0, 0.72) 70%,
    rgba(0, 0, 0, 0.34) 86%,
    rgba(0, 0, 0, 0) 100%);
  z-index: 4; pointer-events: none;
}

/* 落ちてきた行き先は画面に重なるので、開いているあいだだけ全体に黒い幕を敷く。
   看板（z-index 5）より下、内容より上に置く。

   2026-08-18 にモバイルの節からここへ移し、デスクトップにも効かせた。
   それまではモバイルだけで、projects のデスクトップでは行き先 4 語が右上の
   作品画像に重なって読めなかった（ユーザー指摘）。about で読めていたのは
   背景が黒いからで、看板の作りが揃っていたからではない。
   実測（1600x900・幕 200k のとき）: 行き先の Contact は 221.7〜243.7px にあり、
   看板の後ろの帯（200px）の外に出ていた。背景が何であっても読めるようにするには
   この暗転が要る */
body::after {
  content: ""; position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0; pointer-events: none; z-index: 4;
  transition: opacity 0.3s ease;
}
body.head-split.menu-open::after { opacity: 1; }

/* ================= モバイル（〜820px） ================= */
@media (max-width: 1024px) {
  :root {
    /* 514.3 = 300 × 24/14。幅 514px で単位が育ち止まり、タブレット（〜820px）でも
       G が 24px を超えない。821px からのデスクトップ（--kn 下限 1px で G 24px）と
       大きさが繋がる */
    --u: calc(min(100vw, 514.3px) / 300);
    --pad: calc(var(--u) * 14);          /* 左右の余白と列間。同じ値で揃える */
  }

  /* ナビゲーションを画面に貼る（2026-08-19 ユーザー指示）。それまでは relative で
     本文と一緒に流れ、読み終えた位置では about 1866 / concept 5938 / team 2304 /
     projects 804 px 上に去っていて、画面に押せる要素が 1 つも無かった（実測）。
     メニューを開いたまま指を動かすと全体の暗転だけが残って真っ黒になる不具合も、
     ナビゲーションが流れなくなることで消える */
  .head {
    /* © と同じ理由で transform を使わない。上の帯（.head::before）が
       ナビゲーションの幅（375px の画面で実測 340px）しか広がらず、
       左右 17.5px ずつ本文が透けていた */
    position: fixed; z-index: 5;
    left: var(--pad); right: var(--pad); top: calc(var(--u) * 12);
    height: calc(var(--u) * 30);
    margin: 0;
  }
  /* ナビゲーションが流れから抜けた分を body で埋め、中身の位置を動かさない
     （12 + 30 + 16 = 58u。従来の margin と高さの合計） */
  body { padding-top: calc(var(--u) * 58); }
  /* ナビゲーションを画面に固定した分、本文がその下を通る。帯が無いと字が重なる
     （2026-08-19 のユーザー指摘・about の引用と ABOUT が重なった画面写真）。
     .veil は about・concept・team・projects にしか要素が無く、しかも各ページが
     モバイルで display: none にしているため使えない。ナビゲーション自身に
     帯を持たせて、index と contact を含む 6 ページすべてで効くようにする。
     高さはナビゲーションの下端（12 + 30 = 42u）に消え際の余裕 16u を足した 58u */
  .head::before {
    content: ""; position: fixed; left: 0; right: 0; top: 0;
    height: calc(var(--u) * 58);
    background: linear-gradient(180deg,
      #000 0%, #000 62%,
      rgba(0, 0, 0, 0.72) 78%,
      rgba(0, 0, 0, 0.34) 90%,
      rgba(0, 0, 0, 0) 100%);
    z-index: -1; pointer-events: none;
  }
  /* .veil は非表示のまま。ナビゲーションが流れなくなったので役目が
     .head::before に移った。各ページに残る写しはそのページの工程で消す */
  .veil { display: none; }

  /* © の大きさと余白。9px は下限で、幅 385px 以下では 7u がこれを下回る。
     2026-08-19 にここへ集約した。それまでは about・concept・team・projects・
     contact の 5 ファイルに同じ値が写されていた。指定を落とすと body の 16px を
     継いでほぼ倍の大きさになる。各ページに残る写しは今も勝つが、値は同じ。
     上下の余白 44u / 24u も、about・concept・team・projects の 4 ファイルが
     同じ値を写している（2026-08-19 に揃えたもの）。写しの削除は各ページの工程で行う */
  .copyright {
    font-size: max(9px, calc(var(--u) * 7));
    margin: calc(var(--u) * 44) 0 calc(var(--u) * 24);
  }

  /* 紙面の最後に置く行き先（2026-08-19 ユーザー指示）。ナビゲーションは画面に
     貼ってあるが、読み終えた位置にも行き先を置く。TOP は index を指す。
     下の余白 50u は © を画面に貼っていた頃の名残。© が文書の最後へ戻った今は
     行き先と © の間隔になる（2026-08-20）。

     3 列 2 行に固定する（2026-08-20 ユーザー選択）。flex の折り返し任せだと
     TOP ABOUT CONCEPT TEAM / PROJECTS CONTACT の 4 + 2 に割れ、上下の行の
     長さが揃わなかった。列の幅を語に合わせる（auto）ので、字間はそのまま */
  .foot {
    display: grid; grid-template-columns: repeat(3, auto);
    justify-content: center; justify-items: center;
    gap: calc(var(--u) * 8) calc(var(--u) * 18);
    margin: calc(var(--u) * 56) 0 calc(var(--u) * 50);
  }
  /* 大きさは © と同じ（2026-08-20 ユーザー指示「最小のサイズで」）。ページの中で
     いちばん小さい文字が © なので、それに揃える。9px は © と同じ下限で、
     幅 385px 以下では 7u がこれを下回る。詳細度は body.head-split .nav-item に
     勝つ必要がある（そちらが 19kn / 9u を指定しているため） */
  body.head-split .foot .nav-item,
  .foot .nav-item {
    font-size: max(9px, calc(var(--u) * 7));
    padding: calc(var(--u) * 6) 0;
  }

  .nav-item { font-size: calc(var(--u) * 9); }
  /* G(14) に対する名の字の大きさはデスクトップ（G 24・名 30）と同じ比 */
  body.head-split .nav-item.is-here { font-size: calc(var(--u) * 17.5); }
  /* G と O は指で押せるよう、見た目 14 のまま当たりを 34（約 44px）に広げる */
  .brand { padding: calc(var(--u) * 10); left: calc(var(--u) * -10); }
  .brand img { height: calc(var(--u) * 14); }
  body.head-split .menu-mark {
    width: calc(var(--u) * 34); height: calc(var(--u) * 34);
    right: calc(var(--u) * -10);
    display: flex; align-items: center; justify-content: center;
  }
  body.head-split .menu-mark svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
  /* 等間隔はデスクトップと同じ比（O の径 14 に対し間隔 17.5）。
     字（9）のインクはボックス上端から 1.6 下・高さ 6.3。行き先には指の当たり分の
     余白（上下 8・左 12）を足すため、その分をボックス上端から引いてある */
  body.head-split .nav-slot:not(:has(.is-here)) .nav-item {
    padding: calc(var(--u) * 8) 0 calc(var(--u) * 8) calc(var(--u) * 12);
  }
  /* 段差 23.8 = 字のインク 6.3 + 間隔 17.5。1 段目の -0.4 は上の実測に合わせた基準 */
  body.head-split .nav-slot[data-step="1"] { top: calc(100% - 0.4 * var(--u)); }   /* 1 段目 */
  body.head-split .nav-slot[data-step="2"] { top: calc(100% + 23.4 * var(--u)); }  /* 2 段目 */
  body.head-split .nav-slot[data-step="3"] { top: calc(100% + 47.2 * var(--u)); }  /* 3 段目 */
  body.head-split .nav-slot[data-step="4"] { top: calc(100% + 71.0 * var(--u)); }  /* 4 段目 */
  /* 5 段目は Top が加わった分（2026-08-21 ユーザー指示）。段差 23.8 は上と同じ */
  body.head-split .nav-slot[data-step="5"] { top: calc(100% + 94.8 * var(--u)); }  /* 5 段目 */
  body.head-split .nav-slot[data-step="6"] { top: calc(100% + 118.6 * var(--u)); }  /* 6 段目 */

}

/* ================= デスクトップ（821px〜） ================= */
@media (min-width: 1025px) {
  :root {
    --k: min(100vw / 1600, 100vh / 900);
    --kn: max(1px, min(100vw / 1600, 100vh / 900));
  }
  /* 看板は窓の上端に固定。projects は表示方式（?v=）ごとにページ側で置き直す */
  .head {
    position: fixed;
    left: 50%; top: calc(24 * var(--kn));
    transform: translateX(-50%);
    width: calc(100vw - 140 * var(--k));   /* 窓の端から 70 ずつ。16:9 では 1460。
                                              1460 固定だと横長の窓で看板だけ中央に縮こまる */
    z-index: 5; pointer-events: none;      /* 画像に乗せる操作を邪魔しない */
  }
  .nav-item { pointer-events: auto; }
  /* 三分割では 3 つの枠がすべて absolute になり .head の高さが 0 に潰れる。
     G・O・名の縦中央や「100% = 下端」の基準が消えるので、高さを明示する。
     中の要素と同じ --kn（下限つき）で測る。横幅だけは --k のまま
     （下限を掛けると狭い窓で G と O が画面の外へ出る） */
  body.head-split .head { height: calc(60 * var(--kn)); }
  /* G・今いる部屋の名・O は字の高さを揃える。
     futura-pt の大文字は 0.675em、G と O は枠の 98.5%（実測） */
  body.head-split .brand img { height: calc(24 * var(--kn)); }
  body.head-split .menu-mark { width: calc(24 * var(--kn)); height: calc(24 * var(--kn)); }
  body.head-split .menu-mark svg { width: 100%; height: 100%; }
  /* 押せることを伝える。看板の語の hover（h-glow）と同じ「灯る」言語で、
     金の暈だけを足す。以前の 拡大 1.12＋明度 1.25＋暈 の 3 つ同時は、
     拡大が projects の画像の hover の言語（近づく）と重なるためやめた。
     O は唯一のボタンなので cursor と暈で足りる（過剰な誘導はしない） */
  body.head-split .menu-mark:hover svg,
  body.head-split .menu-mark:focus-visible svg {
    filter: drop-shadow(0 0 calc(6 * var(--kn)) rgba(255, 237, 136, 0.55))
            drop-shadow(0 0 calc(16 * var(--kn)) rgba(255, 237, 136, 0.3));
  }
  body.head-split .nav-item.is-here { font-size: calc(30 * var(--kn)); }
  body.head-split .nav-item { font-size: calc(19 * var(--kn)); }
  /* O の下端から About、About から Contact までを字面（インク）で等間隔 30 にする。
     実測: O の円の実描画下端は看板中央から 11.8（svg 24 の中の外径 458/465）。
     字はボックス上端から 3.4 下に大文字上端が来て、大文字の高さは 13.3
     （futura-pt 19 の実測。cap 0.70em・行box 1.107em・ascent 0.90em）。
     字面で測り直して合わせた最終値（1440×900 で O→About 29.96・About→Contact 30.00） */
  /* 段差 43.3 = 大文字 13.3 + 字面間隔 30（上の実測から導出）。1 段目の 7.8 は
     O の下端から字面 30 になる実測値。4 値とも実画面で字面間隔を確認する */
  body.head-split .nav-slot[data-step="1"] { top: calc(100% + 7.8 * var(--kn)); }    /* 1 段目 */
  body.head-split .nav-slot[data-step="2"] { top: calc(100% + 51.1 * var(--kn)); }   /* 2 段目 */
  body.head-split .nav-slot[data-step="3"] { top: calc(100% + 94.4 * var(--kn)); }   /* 3 段目 */
  body.head-split .nav-slot[data-step="4"] { top: calc(100% + 137.7 * var(--kn)); }  /* 4 段目 */
  /* 5 段目は Top が加わった分（2026-08-21 ユーザー指示）。段差 43.3 は上と同じ */
  body.head-split .nav-slot[data-step="5"] { top: calc(100% + 181.0 * var(--kn)); }  /* 5 段目 */
  body.head-split .nav-slot[data-step="6"] { top: calc(100% + 224.3 * var(--kn)); }  /* 6 段目 */

  /* 9px は © の下限。1024 幅では 13k が 8.3px になり、字間 0.3em では読めなくなる。
     上下の余白はモバイルの 44u / 24u と同じ数でデスクトップの単位に置き換える。
     © は文書の最後に流れるので、最後まで送ったときだけ画面に入る（2026-08-20） */
  .copyright {
    font-size: max(9px, calc(13 * var(--k)));
    margin: calc(44 * var(--k)) 0 calc(24 * var(--k));
  }

  /* デスクトップの紙面の最後の行き先。ナビゲーションは上端に固定で残るが、
     読み終わりでも目を戻さずに次へ行けるようにする。
     6 つが 1 行に収まるのでモバイルのような 3 列の固定はしない */
  .foot {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: calc(48 * var(--k));
    margin: calc(90 * var(--k)) 0 calc(80 * var(--k));
  }
  /* 大きさは © と同じ（2026-08-20 ユーザー指示「最小のサイズで」）。
     body.head-split .nav-item の 19kn に勝つよう詳細度を上げる */
  body.head-split .foot .nav-item,
  .foot .nav-item { font-size: max(9px, calc(13 * var(--k))); }
}

/* 窓の大きさを変えている間は、いっさい動きを付けない（各ページの JS が付け外しする） */
body.resizing *,
body.resizing *::before,
body.resizing *::after { transition: none !important; }