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

/* ──────────────────────────────────────────
   Madoromi — 夜のエディトリアル
   箱を作らず、タイポと余白と間で語る。
   Cormorant=英字ディスプレイ / Shippori Mincho=和文セリフ / Space Grotesk=UI
   accent(=キツネの毛色)は「押せるもの・今ここ」専用
   ────────────────────────────────────────── */
:root {
  --bg:         #07060a;
  --ink:        #ece5d3;
  --ink-dim:    rgba(236, 229, 211, 0.58);
  --ink-faint:  rgba(236, 229, 211, 0.32);
  --ink-ghost:  rgba(236, 229, 211, 0.14);
  --accent:     #e07a2b;
  --accent-dim: rgba(224, 122, 43, 0.5);
  --hairline:   rgba(236, 229, 211, 0.13);

  --ff-serif: 'Cormorant Garamond', Georgia, serif;
  --ff-jp:    'Shippori Mincho', 'Cormorant Garamond', serif;
  --ff-sans:  'Space Grotesk', system-ui, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);

  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-6: 3rem; --s-8: 4rem;
}

html {
  font-family: var(--ff-sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* スクロール総量＝旅程の1周ぶん。PCはがーっと送られがちなので長めに取り、
   1フリックで各ビートを飛び越えにくくする（p→scrollは線形なので全ビートに均等に効く） */
/* 2026-07-29：Flowのホールド（背景が消えるまでの間）を伸ばしたぶん、旅全体のスクロール量も増やして
   森歩き〜キツネの実距離を保っている（SP 1800→2000 / PC 2600→3000vh） */
body { min-height: 2000vh; overflow-x: hidden; }
@media (min-width: 821px) { body { min-height: 3000vh; } }
/* カスタムカーソルは一旦ナシ＝標準カーソルを出す（Ryota指示 2026-07-29）。
   戻すとき → @media (pointer: fine) { body { cursor: none; } } を復活＋index.htmlの.cursorを戻す */

/* シーンのグレーディング */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 10; pointer-events: none;
  background:
    radial-gradient(circle at 18% 64%, rgba(4,7,9,.66) 0%, rgba(4,7,9,.32) 27%, rgba(4,7,9,0) 58%),
    radial-gradient(circle at 82% 50%, rgba(5,7,10,.52) 0%, rgba(5,7,10,.2) 31%, rgba(5,7,10,0) 64%),
    linear-gradient(0deg, rgba(5,4,6,.8), rgba(5,4,6,.06) 46%, rgba(5,4,6,.12));
}
/* かすかなフィルムグレイン */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 11; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#foxCanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; }

/* ══════════════════════════════════════════
   OPENING / PRELOADER
   ══════════════════════════════════════════ */
#intro {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  opacity: 1; transition: opacity 1.2s var(--ease);   /* 終わりは全面ふわっとフェード */
}
.intro-veil {
  position: absolute; inset: 0; background: #050409;
}
#intro.is-out { opacity: 0; }   /* カーテン(スライド)ではなく透明度で全面が消える */
#intro.is-gone { pointer-events: none; }

.intro-stage {
  position: relative; z-index: 2; text-align: center;
  transition: opacity .8s ease, transform 1.1s var(--ease);
}
#intro.is-out .intro-stage { opacity: 0; transform: translateY(-14px); }

.intro-mark {
  display: block; font-size: 1rem; color: var(--accent);
  margin-bottom: var(--s-4); opacity: 0;
  animation: introMark 1s var(--ease) .15s forwards;
}
.intro-word {
  overflow: hidden; line-height: 1;
}
.intro-word .iw-en {
  display: inline-block; font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(3rem, 9vw, 8rem); letter-spacing: .01em;
  transform: translateY(115%); opacity: 0;
  animation: introRise 1.15s var(--ease) .28s forwards;
}
.intro-sub {
  overflow: hidden; margin-top: var(--s-3);
}
.intro-sub span {
  display: inline-block; font-family: var(--ff-jp); font-size: .82rem;
  letter-spacing: .32em; color: var(--ink-dim); text-indent: .32em;
  transform: translateY(120%); opacity: 0;
  animation: introRise 1.1s var(--ease) .5s forwards;
}
.intro-foot {
  position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 4vw, 3rem);
  z-index: 2; display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  font-family: var(--ff-sans); font-size: .68rem; letter-spacing: .28em;
  text-transform: none; color: var(--ink-faint);   /* monaka design. をそのまま小文字表示 */
  opacity: 0; animation: introFade 1s ease .6s forwards;
}
.intro-meter { font-variant-numeric: tabular-nums; }
.intro-count { font-family: var(--ff-serif); font-size: 1.4rem; letter-spacing: 0; color: var(--ink); }
.intro-pct { margin-left: .25rem; }
.intro-progress {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; z-index: 2;
  background: var(--ink-ghost);
}
.intro-progress i { display: block; height: 100%; width: 0%; background: var(--accent); }

@keyframes introMark { to { opacity: 1; } }
@keyframes introRise { to { transform: translateY(0); opacity: 1; } }
@keyframes introFade { to { opacity: 1; } }

/* スタートゲート（ローディング完了後に中央へ・許可を選んで入場） */
.intro-enter {
  position: absolute; left: 0; right: 0; top: calc(40% + 80px); z-index: 3;   /* ロゴ(画面40%中央)の直下・約40px下へ */
  display: flex; flex-direction: column; align-items: center; gap: 1.15rem;
  text-align: center; padding: 0 1.5rem;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
#intro.enter-ready .intro-enter { opacity: 1; transform: none; pointer-events: auto; }
#intro.is-out .intro-enter { opacity: 0; transition: opacity .4s ease; }
.ie-opts { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; }
.ie-opt {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--hairline); background: rgba(10,12,18,.3);
  color: var(--ink-dim); font-family: var(--ff-sans); font-size: .72rem; letter-spacing: .1em;
  cursor: pointer; transition: color .25s, border-color .25s, background-color .25s;
}
.ie-opt svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ie-opt:hover { color: var(--ink); border-color: var(--ink-faint); }
.ie-opt[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-dim); background: rgba(224,122,43,.1); }
.ie-enter {
  margin-top: .2rem; padding: .7rem 2.6rem;
  border: 1px solid var(--accent-dim); border-radius: 999px; background: transparent;
  color: var(--ink); font-family: var(--ff-serif); font-size: 1.2rem; letter-spacing: .05em;
  cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.ie-enter:hover { background: var(--accent); color: #0a0a0a; border-color: var(--accent); }
.ie-note { font-family: var(--ff-sans); font-size: .58rem; letter-spacing: .08em; color: var(--ink-faint); max-width: 26rem; line-height: 1.7; }
@media (max-width: 620px) { .intro-enter { top: 56%; } .ie-opt { font-size: .66rem; } }

/* ══════════════════════════════════════════
   HEADER / FOOTER
   ══════════════════════════════════════════ */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: center; align-items: center;
  padding: clamp(1.2rem, 2.4vw, 2rem) clamp(1.2rem, 4vw, 3rem);
  transition: opacity .55s ease, transform .55s var(--ease);
}
/* スクロールダウンでヘッダー(ロゴ)を隠す／スクロールアップで戻す */
body.logo-hide .site-head { opacity: 0; transform: translateY(-18px); pointer-events: none; }
.brand {
  text-decoration: none; display: inline-flex; align-items: center;
  opacity: 0;   /* JSがオープニングで中央に置いてから表示（初期フラッシュ防止） */
}
.brand-logo { display: block; width: auto; height: clamp(30px, 3.2vw, 40px); }
.head-meta {
  font-family: var(--ff-sans); font-size: .64rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-faint);
}

.site-foot {
  position: fixed; left: 0; bottom: 0; z-index: 55;
  display: flex; align-items: center; gap: var(--s-3);
  padding: clamp(1.2rem, 2.4vw, 2rem) clamp(1.2rem, 4vw, 3rem);
  font-family: var(--ff-sans); font-size: .62rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ink-faint);
  opacity: 0; transition: opacity 1s ease .2s;
}
body.intro-complete .site-foot { opacity: 1; }
.foot-scroll { position: relative; padding-left: 1.4rem; color: var(--ink-dim); }
.foot-scroll::before {
  content: ""; position: absolute; left: 0; top: 50%; width: .9rem; height: 1px;
  background: var(--accent); transform-origin: left; animation: footPulse 2.6s var(--ease) infinite;
}
@keyframes footPulse { 0%,100% { transform: scaleX(.3); opacity: .4; } 50% { transform: scaleX(1); opacity: 1; } }

/* ══════════════════════════════════════════
   SECTION INDEX
   ══════════════════════════════════════════ */
#sectionNav {
  position: fixed; right: clamp(1.2rem, 3vw, 2.6rem); top: 50%; transform: translateY(-50%);
  z-index: 55; display: flex; flex-direction: column; gap: 1.15rem;
  opacity: 0; transition: opacity 1s ease .3s;
}
body.intro-complete #sectionNav { opacity: 1; }
/* 縦レール：全項目を貫くヘアライン。点はこの上に整列する（右端3px＝点の中心に一致） */
.snav-rail {
  position: absolute; right: 3px; top: -.2rem; bottom: -.2rem; width: 1px;
  background: var(--hairline); overflow: hidden;
}
/* 旅の進捗フィル（script.jsが scaleY を毎フレーム設定） */
#snavFill {
  position: absolute; inset: 0; background: var(--accent);
  opacity: .55; transform: scaleY(0); transform-origin: top center;
}
/* 各項目は点だけをフローに残し右端に固定＝点が完全な縦一列になる。番号/ラベルは絶対配置で左へ逃がす */
.snav-item {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  height: 18px;   /* 固定＝アクティブで点がバーに伸びても行が動かない（下の項目がリフローしない） */
}
.snav-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0;
  position: relative; z-index: 1;
  transition: background .45s ease, height .5s var(--ease), border-radius .5s var(--ease);
}
.snav-num, .snav-label {
  position: absolute; top: 50%; white-space: nowrap; pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .45s ease, transform .45s var(--ease), color .45s ease;
}
.snav-num {
  right: calc(100% + .85rem);
  font-family: var(--ff-serif); font-style: italic; font-size: .82rem;
  color: var(--ink-faint); opacity: .5;
}
.snav-label {
  right: calc(100% + .85rem);
  font-family: var(--ff-sans); font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink); opacity: 0; transform: translateY(-50%) translateX(8px);
}
/* ホバー：番号が引いてラベルが差し込む */
.snav-item:hover .snav-num { opacity: 0; transform: translateY(-50%) translateX(-8px); }
.snav-item:hover .snav-label { opacity: 1; transform: translateY(-50%); }
.snav-item:hover .snav-dot { background: var(--ink-dim); }
/* アクティブ：点が縦バーに伸びて「現在地」を示す＋番号がアクセント */
.snav-item.active .snav-dot { background: var(--accent); height: 18px; border-radius: 3px; }
.snav-item.active .snav-num { color: var(--accent); opacity: 1; }
.snav-item.active:hover .snav-num { opacity: 0; }

/* ══════════════════════════════════════════
   OVERLAYS / SECTIONS
   ══════════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
  display: flex; align-items: center;
}
.overlay.visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .9s ease; }
.overlay-inner {
  width: 100%; height: 100%; display: flex; align-items: center;
  padding: clamp(1.5rem, 5vw, 6rem);
}

/* ラベル（オーバーライン） */
.label-tag {
  font-family: var(--ff-sans); font-size: .68rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-dim);
  margin-bottom: var(--s-3); display: flex; align-items: baseline; gap: var(--s-2);
}
.lt-idx { color: var(--accent); letter-spacing: .1em; font-family: var(--ff-serif); font-size: 1.1em; }

/* ── Hero ── */
.hero-inner { align-items: center; justify-content: center; }
.hero-content { max-width: 820px; text-align: center; display: grid; place-items: center; }
/* 見出しと3行は同じ中央セルに重ねる＝「一文が消えて同じ場所に3行が出る」 */
.hero-headline, .hero-para { grid-area: 1 / 1; }
.hero-headline {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: 24px; line-height: 1.1; letter-spacing: -.01em;
  white-space: nowrap;
}
.hl-line { display: inline-block; vertical-align: baseline; overflow: hidden; padding-bottom: .04em; }
.hl-line > span, .hl-line > em > span { display: block; transform: translateY(112%); transition: transform 1.15s var(--ease); }
.hl-line em { font-style: italic; color: inherit; }
/* 少しスクロールして出る3行テキスト（見出しと同じマスクリビール・中央） */
.hero-para {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.9; letter-spacing: .01em;
  color: var(--ink-dim);
}
.hp-line { display: block; overflow: hidden; padding-bottom: .04em; }
.hp-line > span { display: block; transform: translateY(120%); opacity: 0; transition: transform 1.1s var(--ease), opacity 1.1s ease; }
/* 3行は見出しが消えたあと（0.42s遅らせて）同じ場所に出す */
#overlay-hero.para-in .hp-line > span { transform: none; opacity: 1; transition-delay: .42s; }
#overlay-hero.para-in .hp-line:nth-child(2) > span { transition-delay: .54s; }
#overlay-hero.para-in .hp-line:nth-child(3) > span { transition-delay: .66s; }
.hero-sub {
  font-family: var(--ff-jp); font-size: 1rem; letter-spacing: .08em;
  line-height: 2; color: var(--ink-dim); margin-bottom: var(--s-8);
}
.reveal-line { overflow: hidden; }
.reveal-line > span { display: inline-block; transform: translateY(130%); opacity: 0; transition: transform 1s var(--ease), opacity 1s ease; }

/* Hero reveal はオープニング完了後 */
body.intro-complete #overlay-hero.visible .hl-line > span,
body.intro-complete #overlay-hero.visible .hl-line > em > span { transform: translateY(0); }
/* 3行表示中(para-in)は見出しを上へ退避したまま維持する（.visible非依存）。
   heroフェードアウト時に見出しが既定位置(下)へ戻る途中で0地点を一瞬通過＝1行目が再表示されるのを防ぐ */
body.intro-complete #overlay-hero.para-in .hl-line > span,
body.intro-complete #overlay-hero.para-in .hl-line > em > span { transform: translateY(-130%); }
body.intro-complete #overlay-hero.visible .hl-line:nth-child(2) > em > span { transition-delay: .12s; }
body.intro-complete #overlay-hero.visible .reveal-line > span { transform: none; opacity: 1; }
body.intro-complete #overlay-hero.visible .label-tag.reveal-line > span { transition-delay: .05s; }
body.intro-complete #overlay-hero.visible .hero-sub.reveal-line > span { transition-delay: .34s; }
body.intro-complete #overlay-hero.visible .scroll-cue.reveal-line > span { transition-delay: .46s; }

.scroll-cue { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.scroll-cue > span { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.scroll-line {
  display: block; width: 1px; height: 46px;
  background: linear-gradient(to bottom, var(--ink-dim), transparent);
  animation: dropLine 2.4s ease-in-out infinite;
}
.scroll-text { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-faint); }

/* パネル配置 */
.overlay-right .overlay-inner { justify-content: flex-end; }
.overlay-left  .overlay-inner { justify-content: flex-start; }
.overlay-center .overlay-inner { justify-content: flex-end; padding-right: max(5rem, 8vw); }

.panel-card {
  position: relative; padding: var(--s-4) 0; max-width: min(600px, 46vw); width: 100%;
  max-height: 86vh; overflow-y: auto; color: var(--ink);
  opacity: 0; transform: translate3d(0, 30px, 0);
  transition: opacity 1.1s ease, transform 1.1s var(--ease);
}
.overlay.visible .panel-card { opacity: 1; transform: none; }
.panel-card::-webkit-scrollbar { width: 2px; }
.panel-card::-webkit-scrollbar-thumb { background: var(--hairline); }

.panel-headline {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -.015em;
  margin-bottom: var(--s-6);
}

/* 行アイテムのステガード */
.work-row, .sv-row, .f-row {
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity .8s ease, transform .8s var(--ease);
}
.overlay.visible .work-row, .overlay.visible .sv-row, .overlay.visible .f-row { opacity: 1; transform: none; }
.overlay.visible .work-row:nth-child(1), .overlay.visible .sv-row:nth-child(1), .overlay.visible .f-row:nth-child(1) { transition-delay: .1s; }
.overlay.visible .work-row:nth-child(2), .overlay.visible .sv-row:nth-child(2), .overlay.visible .f-row:nth-child(2) { transition-delay: .18s; }
.overlay.visible .work-row:nth-child(3), .overlay.visible .sv-row:nth-child(3), .overlay.visible .f-row:nth-child(3) { transition-delay: .26s; }
.overlay.visible .work-row:nth-child(4), .overlay.visible .sv-row:nth-child(4) { transition-delay: .34s; }
.overlay.visible .work-row:nth-child(5) { transition-delay: .42s; }

/* ── Works ── */
.work-list { display: flex; flex-direction: column; }
.work-row {
  position: relative; display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) 0; border-top: 1px solid var(--hairline); cursor: pointer;
}
.work-row:last-child { border-bottom: 1px solid var(--hairline); }
.work-row::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--accent); transition: width .5s var(--ease);
}
.work-row:hover::after { width: 100%; }
.w-idx { font-family: var(--ff-serif); font-style: italic; font-size: .95rem; color: var(--ink-faint); min-width: 2rem; flex-shrink: 0; transition: color .4s ease; }
.work-row:hover .w-idx { color: var(--accent); }
.w-body { flex: 1; min-width: 0; transition: transform .5s var(--ease); }
.work-row:hover .w-body { transform: translateX(10px); }
.w-meta { display: flex; gap: var(--s-2); font-size: .68rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .35rem; }
.w-title { font-family: var(--ff-serif); font-size: clamp(1.3rem, 1.7vw, 1.7rem); font-weight: 400; line-height: 1.3; margin-bottom: .25rem; }
.w-sub { font-family: var(--ff-jp); font-size: .82rem; color: var(--ink-dim); letter-spacing: .04em; }

/* ── About ── */
.about-name { font-family: var(--ff-serif); font-size: 2.4rem; font-weight: 400; line-height: 1.15; margin-bottom: var(--s-1); }
.about-role { font-size: .74rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--s-4); }
.about-quote { border: 0; font-family: var(--ff-serif); font-style: italic; font-size: 1.3rem; line-height: 1.7; color: var(--ink); margin-bottom: var(--s-4); }
.about-bio { font-family: var(--ff-jp); font-size: .95rem; line-height: 2.05; letter-spacing: .04em; color: var(--ink-dim); margin-bottom: var(--s-4); }
.about-disciplines { font-size: .72rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); border-top: 1px solid var(--hairline); padding-top: var(--s-3); }

/* ── Services ── */
.sv-list { display: flex; flex-direction: column; }
.sv-row { padding: var(--s-3) 0; border-top: 1px solid var(--hairline); }
.sv-row:last-child { border-bottom: 1px solid var(--hairline); }
.sv-name { font-family: var(--ff-serif); font-size: 1.4rem; font-weight: 400; line-height: 1.3; margin-bottom: .3rem; }
.sv-detail { font-family: var(--ff-jp); font-size: .84rem; color: var(--ink-dim); letter-spacing: .04em; }
.sv-note { font-family: var(--ff-jp); font-size: .82rem; color: var(--ink-faint); letter-spacing: .05em; margin-top: var(--s-3); }

/* ── Contact ── */
.contact-card { max-width: min(520px, 42vw); }
.contact-sub { font-family: var(--ff-jp); font-size: .9rem; color: var(--ink-dim); letter-spacing: .05em; margin-bottom: var(--s-4); }
.contact-form { display: flex; flex-direction: column; gap: var(--s-3); }
.f-row { display: flex; flex-direction: column; gap: var(--s-1); }
.f-row label { font-size: .7rem; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-dim); }
.f-row input, .f-row textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--hairline); color: var(--ink);
  padding: .75rem 0; font-family: var(--ff-sans); font-weight: 300; font-size: 1rem; outline: none; resize: vertical;
  transition: border-color .4s ease;
}
.f-row input:focus, .f-row textarea:focus { border-color: var(--accent); }
.f-row input::placeholder, .f-row textarea::placeholder { color: var(--ink-faint); font-family: var(--ff-jp); }

/* Netlify Forms の罠フィールド（人には見せない）と、送信結果のひとこと */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note {
  font-family: var(--ff-jp); font-size: .78rem; line-height: 1.9;
  color: var(--ink-dim); letter-spacing: .04em; margin-top: 1rem; min-height: 1.5em;
  opacity: 0; transition: opacity .5s ease;
}
.form-note.is-shown { opacity: 1; }
.form-note.is-error { color: var(--accent); }
.contact-form.is-sending .submit-btn { opacity: .45; pointer-events: none; }
.submit-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: .8ch;
  background: transparent; color: var(--ink); border: 1px solid var(--accent-dim);
  padding: .95rem 2.4rem; font-family: var(--ff-sans); font-weight: 400; font-size: .85rem; letter-spacing: .1em;
  cursor: pointer; align-self: flex-start; margin-top: var(--s-1);
  transition: color .4s ease, border-color .4s ease;
}
.submit-btn em { font-style: normal; transition: transform .4s var(--ease); }
.submit-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.submit-btn:hover { color: #120a04; border-color: var(--accent); }
.submit-btn:hover::before { transform: translateY(0); }
.submit-btn:hover em { transform: translateX(5px); }

/* ══════════════════════════════════════════
   CUSTOM CURSOR
   ══════════════════════════════════════════ */
.cursor { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; mix-blend-mode: difference; }
.cursor-dot, .cursor-ring { position: absolute; top: 0; left: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor-dot { width: 5px; height: 5px; background: #fff; transition: opacity .25s ease; }
.cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.55); background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: width .3s var(--ease), height .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), opacity .3s ease; }
.cursor.is-hover .cursor-ring { width: 58px; height: 58px; border-color: rgba(255,255,255,.9); }
/* リング内の矢印（Worksホバーで右上を指す）。通常は非表示 */
.cursor-arrow { width: 42px; height: 42px; opacity: 0; transform: scale(.55) rotate(-8deg);
  transition: opacity .25s var(--ease), transform .35s var(--ease); }
.cursor-arrow path { stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
/* Works平面ホバー：外部リンクの合図＝120pxのアクセント線の円の中に右上向き矢印 */
.cursor.is-work { mix-blend-mode: normal; }
.cursor.is-work .cursor-ring { width: 120px; height: 120px; background: transparent; border-color: var(--accent); border-width: 1.5px; }
.cursor.is-work .cursor-dot { opacity: 0; }
.cursor.is-work .cursor-arrow { opacity: 1; transform: scale(1) rotate(0deg); }
.cursor.is-hidden { opacity: 0; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ══════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════ */
@keyframes dropLine {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  25% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  75% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 820px) {
  body { cursor: auto; }
  .cursor { display: none; }
  #sectionNav { display: none; }
  .head-meta { display: none; }
  .site-foot { display: none; }
  .overlay-inner { padding: 1rem; }
  .hero-inner { padding: 1rem; }
  .hero-headline { font-size: clamp(18px, 5.6vw, 24px); }
  .hero-sub { font-size: .9rem; margin-bottom: var(--s-6); }
  .panel-card, .contact-card { max-width: 100%; padding: var(--s-3) 0; }
  .overlay-right .overlay-inner, .overlay-left .overlay-inner, .overlay-center .overlay-inner { justify-content: center; padding: 4.5rem 1rem 1rem; }
  .about-name { font-size: 2rem; }

  /* ── SP Contact：CSS3Dに載せず通常の固定オーバーレイに（キーボードで崩れないように）──
     不透明度/表示は script.js が旅程(p≈0.95)に同期して駆動する */
  #overlay-contact.sp-contact {
    position: fixed; left: 0; top: 0; right: 0; height: 100%;
    z-index: 46; display: block; overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .5s ease;
    background: linear-gradient(to bottom, rgba(6,5,10,0) 0%, rgba(6,5,10,.34) 34%, rgba(6,5,10,.74) 100%);
  }
  #overlay-contact.sp-contact .overlay-inner {
    /* safe center：内容が画面より高いときも上端が切れずスクロールで全体に届く */
    min-height: 100%; display: flex; align-items: safe center; justify-content: center;
    padding: 4rem 1rem calc(1.6rem + env(safe-area-inset-bottom));
  }
  #overlay-contact.sp-contact .contact-card {
    width: 100%; max-width: none; max-height: none; overflow: visible;
    opacity: 1; transform: none; padding: 1.9rem 1.5rem;
    background: linear-gradient(158deg, rgba(11,13,21,.85), rgba(6,8,14,.7));
    border: 1px solid var(--hairline);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    box-shadow: 0 30px 90px -34px rgba(0,0,0,.85);
  }
  /* キーボード表示中だけ下に逃げ場を作り、フォーカス中の項目を上へスクロールできるようにする */
  #overlay-contact.sp-contact.kb-open .overlay-inner { align-items: flex-start; padding-bottom: 58vh; }
  /* iOSはfont-size<16pxのフォーカスでページを自動ズームし、それがフォーム崩れの主因になる → 16pxで固定 */
  #overlay-contact.sp-contact input,
  #overlay-contact.sp-contact textarea { font-size: 16px; }
}

/* ══════════════════════════════════════════
   WEB SECTION — 森から一度“サイト”のレイヤーへ
   （About → Services。ゴーストタイポ／ポートレート／本文が
     それぞれ違う速度で流れるレイヤード・エディトリアル）
   opacity / track の transform は script.js が毎フレーム制御
   ══════════════════════════════════════════ */
#webSection {
  position: fixed; inset: 0; z-index: 30;
  background: #06050a;
  opacity: 0; visibility: hidden; pointer-events: none;
  overflow: hidden;
}
/* 夜のビネット＋フィルムグレイン（グローバルのgrainはz11で下に隠れるため内包する） */
#webSection::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(24,38,58,.14) 0%, rgba(6,5,10,0) 52%),
    radial-gradient(circle at 50% 120%, rgba(5,4,6,.7) 0%, rgba(5,4,6,0) 55%);
}
#webSection::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* エディトリアルの細枠 */
.ws-frame {
  position: absolute; inset: 8px; z-index: 2;   /* 画面の上下左右8pxで統一＝枠を大きく */
  border: 1px solid var(--hairline); pointer-events: none;
}

.ws-track { height: 400vh; will-change: transform; }
.ws-screen { position: relative; height: 100vh; overflow: hidden; display: grid; place-items: center; }

/* 最背面：巨大なアウトラインのゴーストタイポ（遅い層） */
.ws-ghost {
  position: absolute; z-index: 0; pointer-events: none;
  font-family: var(--ff-serif); font-weight: 300; font-style: italic;
  font-size: clamp(8rem, 24vw, 24rem); line-height: .9; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(236, 229, 211, 0.09);
  will-change: transform;
}
/* ゴーストタイポの定位置。Services / Flow は「セクションの入り口」＝画面上部へ（Ryota指示 2026-07-29） */
.ws-about    .ws-ghost { top: 7vh; left: 3vw; }
.ws-services .ws-ghost { top: 4vh; right: 3vw; }
.ws-process  .ws-ghost { top: 4vh; right: 3vw; }

.ws-grid { position: relative; z-index: 1; width: min(1160px, 86vw); padding-top: 4vh; }
.ws-label {
  font-family: var(--ff-sans); font-size: .66rem; letter-spacing: .16em;
  text-transform: none; color: var(--ink-dim);   /* 先頭のみ大文字（HTML側で表記）＝uppercase解除 */
  margin-bottom: clamp(1.4rem, 3vh, 2.6rem);
}
.ws-label .lt-idx { color: var(--accent); margin-right: .9em; letter-spacing: .1em; }

/* ── About ── */
.ws-headline {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(4.2rem, 10.5vw, 9.8rem); line-height: .96; letter-spacing: -.02em;
  color: var(--ink); margin-bottom: clamp(1.8rem, 4vh, 3.2rem);
}
.ws-headline em { font-style: italic; color: var(--accent); }

.ws-about .ws-grid { display: grid; grid-template-columns: 1.15fr .85fr; column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ws-about .ws-headline { grid-column: 1; }
.ws-about .ws-headline { position: relative; z-index: 1; }   /* 名前を写真より前面に */
.ws-col { grid-column: 2; position: relative; z-index: 2; padding-top: clamp(1rem, 6vh, 4rem); }

/* ポートレートの気配（速い層＝手前）。写真はあとで差し替え可 */
/* ポートレート：「Ryota / Shito」の名前の背後に置く（文字が手前・写真が背景） */
.ws-portrait {
  position: absolute; z-index: 0; left: calc(clamp(-1rem, 1.5vw, 2.5rem) + 80px); top: 30%;
  width: clamp(220px, 25vw, 330px); aspect-ratio: 3 / 4;
  /* 白い枠線は削除（Ryota指示 2026-07-29）＝写真が夜に溶ける */
  background:
    linear-gradient(160deg, rgba(16, 22, 34, .3), rgba(9, 8, 14, .58) 82%),
    url("assets/ryota-portrait.jpg") center 22%/cover no-repeat;
  will-change: transform;
}
.ws-portrait span { display: none; }

.ws-role {
  font-family: var(--ff-sans); font-size: .68rem; letter-spacing: .26em;
  text-transform: lowercase; color: var(--ink-dim);   /* 全て小文字（Ryota指示 2026-07-29） */
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--hairline); margin-bottom: 1.4rem;
}
.ws-quote {
  font-family: var(--ff-serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.5; color: var(--ink);
  margin-bottom: 1.6rem;
}
.ws-bio { font-family: var(--ff-jp); font-size: .88rem; line-height: 2.05; letter-spacing: .01em; color: var(--ink-dim); margin-bottom: 0; }
/* 和文の下に添える小さな英訳（Ryota指示 2026-07-29）。声を張らないよう Cormorant のイタリック・淡色で */
.ws-en {
  font-family: var(--ff-serif); font-style: italic; font-weight: 300;
  font-size: clamp(.68rem, .92vw, .82rem); line-height: 1.75; letter-spacing: .01em;
  color: var(--ink-faint); margin-top: .6rem;
}
.ws-about .ws-en { margin-bottom: 1.7rem; }
.ws-philosophy .ws-en { margin-bottom: clamp(2.2rem, 7vh, 4.5rem); }
/* 領域：全て小文字＋丸い枠のチップ（Ryota指示 2026-07-29／罫線は枠に置き換え） */
.ws-disc {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-top: 1.1rem;
}
.ws-disc span {
  font-family: var(--ff-sans); font-size: .62rem; letter-spacing: .2em;
  text-transform: lowercase; color: var(--ink-faint);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: .52em 1.15em .48em; line-height: 1;
}
/* チップのホバー演出は無し（Ryota指示 2026-07-29） */

/* ── Philosophy ──（背景の巨大な「間」はDOMごと削除済み・Ryota指示 2026-07-29） */
.ws-pull {
  font-family: var(--ff-jp); font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: 1.7; letter-spacing: .08em;
  color: var(--ink); margin-bottom: 1.6rem;
}
/* 全文字を同じ白（アクセント色の1文字強調は廃止・Ryota指示 2026-07-29） */
.ws-pull-sub {
  font-family: var(--ff-jp); font-size: .92rem; line-height: 2.2;
  color: var(--ink-dim); letter-spacing: .03em;
  margin-bottom: 0; max-width: 42em;
}
.ws-stats { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.ws-stats li { border-top: 1px solid var(--hairline); padding-top: 1.2rem; }
.ws-stat-num {
  display: block; font-family: var(--ff-serif); font-weight: 300; font-style: italic;
  font-size: clamp(3rem, 6vw, 5.4rem); line-height: 1; color: var(--ink); margin-bottom: .7rem;
}
.ws-stat-cap { font-family: var(--ff-jp); font-size: .74rem; line-height: 1.95; color: var(--ink-faint); letter-spacing: .04em; }

/* ── Process（How We Walk）＝3つの円を等間隔に並べ、情報は全て円の中。円と円は線で繋ぐ ──
   （Ryota指示 2026-07-29／それ以前の「行リスト＋右端のマーク」からの作り直し）
   アニメは .is-live で「円が描かれる → 線が伸びる → 次の円」の順に連鎖する */
.ws-flow {
  list-style: none; position: relative;
  --flow-gap: clamp(1rem, 3vw, 2.6rem);        /* 円と円の間隔＝繋ぐ線の長さ */
  display: flex; align-items: center; justify-content: center;
  gap: var(--flow-gap);
}
.ws-flow li {
  position: relative; flex: 0 0 auto;
  width: clamp(180px, 24vw, 296px); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border-top: none;
}

/* 円と円をつなぐ線（最後の円のあとには出さない） */
.ws-flow li:not(:last-child)::after {
  content: ""; position: absolute; left: 100%; top: 50%; z-index: 0;
  width: var(--flow-gap); height: 1px; background: var(--hairline);
  transform: scaleX(0); transform-origin: left;
  transition: transform .38s var(--ws-ease);
}
.ws-screen.is-live .ws-flow li:not(:last-child)::after { transform: scaleX(1); }

/* 円そのもの。CSSのborderではなくSVGにしてあるのは「描かれていく」動きを出すため */
.fc-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fc-ring circle {
  fill: none; stroke: rgba(236, 229, 211, .32);
  /* ★vector-effect:non-scaling-stroke は使わない：pathLength と併用すると破線長が
     デバイス座標で計算され、円が閉じずに隙間が出る（2026-07-29に踏んだ罠）。
     stroke-width はユーザー単位＝100基準（描画180〜296pxで約0.6〜1.0px） */
  stroke-width: .34;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transform: rotate(-90deg); transform-origin: 50% 50%;   /* 12時から描き始める */
  transition: stroke-dashoffset .7s var(--ws-ease);
}
.ws-screen.is-live .fc-ring circle { stroke-dashoffset: 0; }

/* 円の中身（番号・英題・説明）。内接する正方形に収まる幅にしてある */
.fc-body {
  position: relative; z-index: 1; width: 70%; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity .7s ease, transform .8s var(--ws-ease);
}
.ws-screen.is-live .fc-body { opacity: 1; transform: none; }
.ws-flow .ws-num { font-size: .58rem; letter-spacing: .24em; margin-bottom: .7rem; }
.ws-flow h3 {
  font-family: var(--ff-serif); font-weight: 400;
  font-size: clamp(1.15rem, 2.1vw, 1.9rem); line-height: 1.06; letter-spacing: -.01em;
  color: var(--ink); margin-bottom: .6rem;
}
.ws-flow p {
  font-family: var(--ff-jp); font-size: clamp(.6rem, .82vw, .76rem);
  line-height: 1.9; color: var(--ink-dim); letter-spacing: .02em;
}

/* 連鎖の間合い：円→線→円→線→円（全体で約2.3秒） */
.ws-screen.is-live .ws-flow li:nth-child(1) .fc-ring circle { transition-delay: .06s; }
.ws-screen.is-live .ws-flow li:nth-child(1)::after           { transition-delay: .62s; }
.ws-screen.is-live .ws-flow li:nth-child(2) .fc-ring circle { transition-delay: .82s; }
.ws-screen.is-live .ws-flow li:nth-child(2)::after           { transition-delay: 1.38s; }
.ws-screen.is-live .ws-flow li:nth-child(3) .fc-ring circle { transition-delay: 1.58s; }
.ws-screen.is-live .ws-flow li:nth-child(1) .fc-body { transition-delay: .40s; }
.ws-screen.is-live .ws-flow li:nth-child(2) .fc-body { transition-delay: 1.16s; }
.ws-screen.is-live .ws-flow li:nth-child(3) .fc-body { transition-delay: 1.92s; }

/* SP：横並びだと円が小さすぎて中の文字が読めない → 縦に積み、線も縦にする */
@media (max-width: 820px) {
  .ws-flow { flex-direction: column; --flow-gap: 1.1rem; }
  .ws-flow li { width: clamp(140px, 42vw, 176px); }
  .ws-flow li:not(:last-child)::after {
    left: 50%; top: 100%; width: 1px; height: var(--flow-gap);
    transform: scaleY(0); transform-origin: top;
  }
  .ws-screen.is-live .ws-flow li:not(:last-child)::after { transform: scaleY(1); }
  .fc-ring circle { stroke-width: .6; }
  .fc-body { width: 76%; }
  .ws-flow .ws-num { margin-bottom: .4rem; }
  .ws-flow h3 { font-size: 1.05rem; margin-bottom: .35rem; }
  .ws-flow p { font-size: .56rem; line-height: 1.75; }
}

/* ── Services ── */
/* 文字は必ず写真より前面（Ryota指示 2026-07-29）＝リストを一段上げ、サムネイルはz0に置く */
.ws-svc { list-style: none; position: relative; z-index: 1; }
/* 3項目（Maintenanceは削除・Ryota指示 2026-07-29）。1行の縦幅を大きく取り、
   ホバーで背景写真が出る「面」としての当たり判定も広げる */
.ws-svc li {
  display: grid; grid-template-columns: clamp(3rem, 6vw, 5rem) 1fr;
  align-items: baseline; padding: clamp(2.9rem, 7.6vh, 5rem) 0;
  border-top: 1px solid var(--hairline);
}
.ws-svc li:last-child { border-bottom: 1px solid var(--hairline); }
.ws-num {
  font-family: var(--ff-sans); font-size: .66rem; letter-spacing: .2em;
  color: var(--ink-faint); transition: color .45s ease;
}
.ws-svc h3 {
  font-family: var(--ff-serif); font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.06; letter-spacing: -.01em;
  color: var(--ink); transition: transform .55s var(--ease);
  margin-bottom: .3rem;
}
.ws-svc p { font-family: var(--ff-jp); font-size: .84rem; color: var(--ink-dim); letter-spacing: .05em; }

/* ── Services：行をホバーすると、その行の右端に小さい写真がぬるっと出る（Ryota指示 2026-07-29）──
   全面backgroundではなくサムネイル。行(li)の中に絶対配置するので、出る位置＝ホバーした行に必ず揃う。
   差し替えは assets/services/serviceN.jpg を置換するだけ（上から01→02→03） */
/* 枠は画面にひとつだけ。**マウスに追従して動き**、行をまたぐと中の写真だけがパッと入れ替わる
   （Ryota指示 2026-07-29／枠が行から行へ滑る方式は「時差がある」ため廃止）。
   位置は ui.js が毎フレーム transform で更新するので、ここに transition は置かない */
.svc-thumb {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  /* 見出しの背面に回るので大きめ。420→360に微調整（Ryota指示 2026-07-30） */
  width: clamp(260px, 25vw, 360px); aspect-ratio: 16 / 10;
  overflow: hidden;
  will-change: transform;
}
.svc-thumb i {
  position: absolute; inset: 0; display: block;
  background-position: center center; background-size: cover; background-repeat: no-repeat;
  /* 白い枠線は付けない（Ryota指示 2026-07-29）＝夜に溶ける */
  /* 文字の背面に入るので、写真は必ず暗く落として可読性を守る。
     ★明るさは画像ごとに index.html の data-thumb-b で指定（素材の明暗差が大きいため）。
       目安＝「素材の平均輝度 × この値 ≒ 60」。例：平均248の白い画像なら .24 */
  filter: grayscale(.12) brightness(var(--b, .5)) contrast(1.04);
  transform: translateY(101%);                 /* 待機＝枠の下に隠れている */
  transition: transform .68s var(--ws-ease);   /* 入れ替わりの速さ（Ryota調整 2026-07-29）*/
  will-change: transform;
}
.svc-thumb i.no-anim { transition: none; }     /* 待機位置への瞬間リセット用 */
/* ホバー中の行だけ番号を灯す（写真が出ている行の目印） */
.ws-svc li:hover .ws-num { color: var(--ink-dim); }
/* ホバーできない端末（スマホ・タブレット）では出さない */
@media (hover: none), (max-width: 820px) {
  .svc-thumb { display: none; }
}
/* 省モーション：ui.jsが動かさない＝サムネイルは出ない（動きが主役の演出のため） */
.ws-note {
  margin-top: clamp(1.6rem, 4vh, 2.8rem);
  font-family: var(--ff-jp); font-size: .85rem; color: var(--ink-dim); letter-spacing: .05em;
}
.ws-note em { font-style: normal; color: var(--accent); }
/* Process → Contact への実リンク（クリックで森の奥へスクロール） */
.ws-goto {
  position: relative; color: var(--accent); cursor: pointer; text-decoration: none;
  padding-bottom: 2px;
}
.ws-goto::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(.35); transform-origin: left; opacity: .5;
  transition: transform .5s var(--ease), opacity .5s ease;
}
.ws-goto:hover::after { transform: scaleX(1); opacity: 1; }

/* ── 旅の進捗ライン（最下部・現在地） ── */
#journeyProgress {
  position: fixed; left: 0; right: 0; bottom: 0; height: 1px; z-index: 56;
  background: linear-gradient(90deg, var(--accent), rgba(224, 122, 43, 0.35));
  transform: scaleX(0); transform-origin: left;
  opacity: 0; transition: opacity 1s ease .4s;
  pointer-events: none;
}
body.intro-complete #journeyProgress { opacity: .8; }

/* ══════════════════════════════════════════
   WEB SECTION の演出（アニメデモのシグネチャを反映）
   ・マスク行リビール（translateY 110% → 0）
   ・charステッガー（blur → シャープ、1文字ずつ）
   ・letter-spacing トラッキングイン
   ・ヘアラインのライン・ドロー（scaleX 0 → 1）
   ・clip-path リビール＋scaleセトル
   画面が視界に入ると .is-live（script.js）で発火。戻ると解除＝再演出
   ══════════════════════════════════════════ */
:root { --ws-ease: cubic-bezier(.77, 0, .18, 1); }

/* マスク行リビール（見出し） */
.ws-line { display: block; overflow: hidden; }
.ws-line-in { display: block; transform: translateY(112%); transition: transform 1.05s var(--ws-ease); }
.ws-screen.is-live .ws-line:nth-child(1) .ws-line-in { transition-delay: .08s; }
.ws-screen.is-live .ws-line:nth-child(2) .ws-line-in { transition-delay: .18s; }
.ws-screen.is-live .ws-line-in { transform: none; }

/* charステッガー（Philosophy引用） */
.ws-ch {
  display: inline-block;
  transform: translateY(1.1em); opacity: 0; filter: blur(7px);
  transition: transform .8s var(--ws-ease), opacity .5s ease, filter .7s ease;
  transition-delay: calc(var(--i) * 50ms);
}
.ws-screen.is-live .ws-ch { transform: none; opacity: 1; filter: none; }

/* ラベル：トラッキングイン */
.ws-label {
  opacity: 0; letter-spacing: .55em;
  transition: opacity .8s ease, letter-spacing 1.1s var(--ws-ease);
}
.ws-screen.is-live .ws-label { opacity: 1; letter-spacing: .3em; }

/* ゴーストタイポ：ゆっくり浮かび上がる（transformはパララックスJSが持つためopacityのみ） */
.ws-ghost { opacity: 0; transition: opacity 1.6s ease .15s; }
.ws-screen.is-live .ws-ghost { opacity: 1; }

/* グリッド全体：scaleセトル（1.03 → 1） */
.ws-grid { transform: scale(1.03); transition: transform 1.3s var(--ws-ease); }
.ws-screen.is-live .ws-grid { transform: scale(1); }

/* ポートレート：clip-pathリビール（transformはJSのためclipとopacityで） */
.ws-portrait {
  clip-path: inset(100% 0 0 0); opacity: 0;
  transition: clip-path 1.15s var(--ws-ease) .3s, opacity .6s ease .3s;
}
.ws-screen.is-live .ws-portrait { clip-path: inset(0 0 0 0); opacity: 1; }

/* 数字ブロック：マスクrise */
.ws-stat-num { overflow: hidden; }
.ws-num-in { display: block; transform: translateY(110%); transition: transform .95s var(--ws-ease); }
.ws-screen.is-live .ws-stats li:nth-child(1) .ws-num-in { transform: none; transition-delay: .15s; }
.ws-screen.is-live .ws-stats li:nth-child(2) .ws-num-in { transform: none; transition-delay: .27s; }
.ws-screen.is-live .ws-stats li:nth-child(3) .ws-num-in { transform: none; transition-delay: .39s; }

/* 行アイテム：フェードライズ＋ライン・ドロー */
/* ※.ws-flow は円レイアウトへ作り直したため、この共通の行演出からは外している（2026-07-29）*/
.ws-svc li, .ws-stats li {
  border-top: none; border-bottom: none; position: relative;
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease, transform .85s var(--ws-ease);
}
.ws-svc li::before, .ws-stats li::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--hairline); transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ws-ease) .15s;
}
.ws-svc li:last-child::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--hairline); transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ws-ease) .5s;
}
.ws-screen.is-live :is(.ws-svc, .ws-stats) li { opacity: 1; transform: none; }
.ws-screen.is-live :is(.ws-svc, .ws-stats) li::before,
.ws-screen.is-live .ws-svc li:last-child::after { transform: scaleX(1); }
.ws-screen.is-live :is(.ws-svc, .ws-stats) li:nth-child(1) { transition-delay: .08s; }
.ws-screen.is-live :is(.ws-svc, .ws-stats) li:nth-child(2) { transition-delay: .17s; }
.ws-screen.is-live :is(.ws-svc, .ws-stats) li:nth-child(3) { transition-delay: .26s; }

/* テキスト列（About右カラム・サブ・締め）：順にフェードライズ */
.ws-role, .ws-quote, .ws-bio, .ws-en, .ws-disc, .ws-pull-sub, .ws-note {
  opacity: 0; transform: translateY(18px);
  transition: opacity .75s ease, transform .85s var(--ws-ease);
}
.ws-screen.is-live :is(.ws-role, .ws-quote, .ws-bio, .ws-en, .ws-disc, .ws-pull-sub, .ws-note) { opacity: 1; transform: none; }
.ws-screen.is-live .ws-en { transition-delay: .56s; }
.ws-screen.is-live .ws-role { transition-delay: .25s; }
.ws-screen.is-live .ws-quote { transition-delay: .35s; }
.ws-screen.is-live .ws-bio { transition-delay: .45s; }
.ws-screen.is-live .ws-disc { transition-delay: .55s; }
.ws-screen.is-live .ws-pull-sub { transition-delay: .5s; }
.ws-screen.is-live .ws-note { transition-delay: .45s; }

/* SP：1カラムに畳む */
@media (max-width: 760px) {
  .ws-about .ws-grid { grid-template-columns: 1fr; }
  .ws-col { grid-column: 1; padding-top: 1.2rem; }
  .ws-portrait { display: none; }
  .ws-ghost { font-size: 34vw; }
  .ws-headline { font-size: clamp(3.2rem, 16vw, 5rem); }
  /* 縦積みだと100vhを溢れて3つ目が切れる → 数字＋キャプションを1行に圧縮。
     667px級の小型端末でも3行目まで収まるよう本文下マージンも詰める */
  .ws-philosophy .ws-en { margin-bottom: 1.6rem; }
  .ws-en { font-size: .62rem; line-height: 1.65; }
  .ws-stats { grid-template-columns: 1fr; gap: .4rem; }
  .ws-stats li { display: grid; grid-template-columns: 5rem 1fr; align-items: baseline; column-gap: 1.1rem; padding-top: .55rem; }
  .ws-stat-num { font-size: 2.4rem; margin-bottom: 0; }
  .ws-stat-cap { font-size: .7rem; line-height: 1.65; }
  .ws-pull { font-size: 1.6rem; }
}

/* スクリーンリーダーには読ませ、視覚からは完全に隠す（.overlayのfixed/opacityより優先） */
.sr-only {
  position: absolute !important; inset: auto !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; pointer-events: none !important;
}

/* Capture mode（?capture・スクショ用） */
.capture-mode #intro { display: none; }
.capture-mode *, .capture-mode *::before, .capture-mode *::after {
  transition-duration: 0s !important; animation: none !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ── DOM panels living inside the 3D forest（CSS3DRenderer）──────────────────
   Works / About / Services / Contact は森の旅程上の場所に実体化する。
   位置・回転・スケールは CSS3DRenderer が inline transform(matrix3d) で制御するため、
   ここでは transform を一切指定しない。opacity/filter は script.js が毎フレーム更新。 */
/* #css3d は素通し、.card3d だけ受け取る（pointer-events は継承するので子要素へ波及） */
#css3d { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.overlay.is-3d { display: none !important; }  /* card を抜いた空の元オーバーレイを無効化 */

.card3d {
  width: 480px; max-width: 480px; max-height: none; overflow: visible;
  padding: 2.4rem 2.7rem; pointer-events: auto;
  background: linear-gradient(158deg, rgba(11, 13, 21, 0.74), rgba(6, 8, 14, 0.56));
  border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 30px 90px -34px rgba(0, 0, 0, 0.85);
  transition: none;
}
.card3d .panel-headline { font-size: clamp(2.2rem, 3vw, 3.2rem); margin-bottom: var(--s-4); }
/* 元は .overlay.visible が付ける出現状態。3D では祖先が変わるので直接表示に固定 */
.card3d .work-row, .card3d .sv-row, .card3d .f-row { opacity: 1; transform: none; }

/* ── Works HUD：空間内のWebGL平面（像）に対する文字レイヤー ─────────────────
   画像＝シーン内メッシュ／文字＝HUD、の分離（Awwwards 3D勢の定石）。
   opacity/transform は script.js が毎フレーム駆動する */
#workHud {
  position: fixed; z-index: 40; pointer-events: none;
  left: clamp(2rem, 4.5vw, 4.5rem); bottom: clamp(4.2rem, 10vh, 7rem);
  opacity: 0; max-width: min(34rem, 44vw);
}
/* 通し番号(.wh-count)と、その下の罫線(.wh-titleのborder-top)は削除（Ryota指示 2026-07-29） */
.wh-title {
  font-family: var(--ff-serif); font-weight: 400;
  font-size: clamp(1.7rem, 2.4vw, 2.4rem); line-height: 1.14; letter-spacing: -.01em;
  color: var(--ink); margin-bottom: .5rem;
}
.wh-jp { font-family: var(--ff-jp); font-size: .84rem; color: var(--ink-dim); letter-spacing: .06em; margin-bottom: .55rem; }
.wh-meta {
  font-family: var(--ff-sans); font-size: .6rem; letter-spacing: .26em;
  text-transform: lowercase; color: var(--ink-faint);   /* 先頭のみ大文字・他は小文字 */
}
.wh-meta::first-letter { text-transform: uppercase; }
.wh-award { color: var(--accent); }
@media (max-width: 820px) {
  #workHud { left: 1rem; right: 1rem; bottom: 3.4rem; max-width: none; }
  .wh-title { font-size: 1.3rem; }
  .wh-jp { font-size: .76rem; margin-bottom: .35rem; }
}

/* ══════════════════════════════════════════
   没入コントロール（環境音／Webカメラ視点）＋まばたきオーバーレイ
   ══════════════════════════════════════════ */
.immersion-ctl {
  position: fixed; top: 0; right: 0; z-index: 62;
  display: flex; align-items: center; gap: .4rem;
  padding: clamp(1.2rem, 2.4vw, 2rem) clamp(1.2rem, 4vw, 3rem);
  opacity: 0; transition: opacity .8s ease;
}
body.intro-complete .immersion-ctl { opacity: 1; }   /* 入場後だけ表示（開幕はスタートゲートが担う） */
.im-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--hairline); background: rgba(10,12,18,.35);
  color: var(--ink-dim); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
  backdrop-filter: blur(4px);
}
.im-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.im-btn svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.im-btn .im-spk { fill: currentColor; stroke: none; }
.im-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-dim); }
.im-btn#soundToggle .im-wave { opacity: 0; transition: opacity .3s ease; }
.im-btn#soundToggle[aria-pressed="true"] .im-wave { opacity: 1; }
.im-hint {
  font-family: var(--ff-sans); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint); max-width: 12rem; line-height: 1.5;
}
@media (max-width: 820px) { .im-hint { display: none; } }

/* まばたき（上下から瞼が弧を描いて閉じて開く：A曲線＋B非対称＋Cソフトエッジ） */
.blink-overlay { position: fixed; inset: 0; z-index: 250; pointer-events: none; }
.blink-overlay span {
  position: absolute; left: -6%; width: 112%; height: 60%;
  transform: scaleY(0); will-change: transform;
  filter: blur(3px);   /* C：合わせ目をやわらかく（硬い直線感を消す） */
}
/* A：閉じる縁を弧に。合わせ目付近だけ僅かに薄く＝ソフト */
.blink-top {
  top: 0; transform-origin: top;
  background: linear-gradient(to top, rgba(4,4,10,.72), #04040a 34%);
  border-radius: 0 0 50% 50% / 0 0 42% 42%;   /* 縦半径を下げて弧を浅く（自然な瞼） */
}
.blink-bot {
  bottom: 0; transform-origin: bottom;
  background: linear-gradient(to bottom, rgba(4,4,10,.72), #04040a 34%);
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
}
/* B：閉じ速い→わずかにタメ→開きゆっくり（非対称） */
.blink-overlay.blink .blink-top, .blink-overlay.blink .blink-bot { animation: eyelid .36s cubic-bezier(.38,0,.24,1); }
@keyframes eyelid {
  0%   { transform: scaleY(0); }
  32%  { transform: scaleY(1.15); }   /* 素早く閉じる（≈115ms） */
  40%  { transform: scaleY(1.15); }   /* 全閉を一瞬タメる */
  100% { transform: scaleY(0); }       /* ゆっくり開く（≈220ms） */
}