/* AQUA COMMUNICATIONS ── 「水の旅」
   色は2つ（深い水の紺＝Primary／水面の光＝Accent）。余白は 8pt、文字は 14/16/21/見出し clamp の4段階。 */
:root {
  --color-primary: #07182B;
  --color-accent: #3FD0E6;
  --color-deep: #0E4C6E; /* 深い水の青（ご相談の流れの線の色の帯） */
  --color-text: #EAF4FA;
  --color-muted: #D2E1EB;
  --color-line: #2B4257;   /* 線は透けない無地（以前は半透明） */
  --color-panel: #0B2034;  /* 箱も透けない無地。すりガラスは使わない */
  --color-error: #FF8A8A;
  --color-success: #3FD0E6;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px;
  --fs-sm: 14px; --fs-base: 16px; --fs-md: 21px;
  /* 大きい字の見出しは、どの画面でも2行まで（2026-10-22 岡沢さんの決まり）。幅に合わせて大きさを変える */
  --fs-hero: clamp(28px, 8vw, 64px);
  --fs-title: clamp(28px, 4.4vw, 44px);
  --fs-statement: clamp(21px, 6vw, 72px); /* 1文だけの場面の見出し */

  --radius: 8px;
  /* 影: 下の影と、上の縁のうすい光（inset）で、箱が少し浮いて見える（2026-10-23 岡沢さん「平面的。3D に見えるように」） */
  --shadow: inset 0 1px 0 rgba(234, 244, 250, .08), 0 12px 32px rgba(0, 8, 20, .45);
  --shadow-lg: inset 0 1px 0 rgba(234, 244, 250, .12), 0 20px 48px rgba(0, 8, 20, .55);
  --color-panel-hi: #11314D; /* 箱の左上の少し明るい色（奥行き） */
  --nav-h: 64px;
  --font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
}

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

/* スマホで横にずれないよう、はみ出しは html・body・各セクションの3段で切る（clip 非対応の古い Safari は hidden） */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; scroll-padding-top: var(--nav-h); }
body {
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, sans-serif;
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--color-text);
  background: var(--color-primary);
  overflow-x: hidden;
  overflow-x: clip;
  word-break: normal;
  word-break: auto-phrase; /* 日本語を文節で折り返す（対応していないブラウザは上の normal） */
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
section { position: relative; overflow: hidden; overflow: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); }

.skip { position: absolute; left: var(--s2); top: -100px; z-index: 300; background: var(--color-accent); color: var(--color-primary); padding: var(--s1) var(--s2); border-radius: var(--s1); }
.skip:focus { top: var(--s2); }

/* 立体の水（後ろに固定）。WebGL が使えないときは .sky-fallback のグラデーション */
#water { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.sky-fallback {
  position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(120% 80% at 50% 110%, #0E4C6E 0%, #07182B 60%);
}
.no-webgl #water { display: none; }

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

/* ナビ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s3);
  background: var(--color-primary);
  border-bottom: 1px solid var(--color-line);
}
.nav-brand { display: flex; align-items: center; gap: var(--s1); color: var(--color-text); text-decoration: none; font-size: var(--fs-sm); letter-spacing: .12em; white-space: nowrap; }
.nav-brand b { color: var(--color-accent); font-weight: 600; }
.nav-menu { display: flex; align-items: center; gap: var(--s3); }
.nav-menu a { color: var(--color-text); text-decoration: none; font-size: var(--fs-sm); letter-spacing: .06em; }
.nav-menu a:hover { color: var(--color-accent); }
.nav-menu .nav-cta { border: 1px solid var(--color-accent); color: var(--color-accent); padding: var(--s1) var(--s2); border-radius: 999px; }
.nav-toggle { display: none; width: 48px; height: 48px; background: none; border: 0; cursor: pointer; position: relative; }
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--color-text); transition: transform .3s; }
.nav-toggle span:first-child { top: 19px; }
.nav-toggle span:last-child { top: 27px; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* 共通の文字 */
.eyebrow { font-size: var(--fs-sm); letter-spacing: .18em; color: var(--color-accent); margin-bottom: var(--s2); }
.panel .eyebrow, .message-body .eyebrow { color: var(--color-accent); }
.eyebrow .num { font-family: var(--font-serif); margin-right: var(--s1); }
.hero-title, .scene-title, .block-title { font-family: var(--font-serif); font-weight: 600; line-height: 1.5; letter-spacing: .04em; text-wrap: balance; }
.hero-title { font-size: var(--fs-hero); margin-bottom: var(--s3); text-shadow: 0 2px 24px rgba(0, 10, 30, .6), 0 0 32px rgba(63, 208, 230, .25); }
.scene-title, .block-title { font-size: var(--fs-title); margin-bottom: var(--s3); }
/* 区切りの見出しは長いもの（13文字）があるので、スマホでは幅に合わせて少し小さくし、2行に収める */
.block-title { font-size: clamp(24px, 6.6vw, 44px); }
/* お問い合わせの見出しは、パソコンでは1行（2026-10-23 岡沢さん「1行の方が綺麗」）。細い欄（680px）に15文字が入る大きさ */
@media (min-width: 768px) { #contact .block-title { font-size: clamp(28px, 4.8vw, 40px); } }
.phrase { display: inline-block; }
/* スマホだけの改行（br.sp）と、パソコンだけの改行（br.pc）。意味のまとまりごとに改行する（2026-10-22 岡沢さん「パソコン版と似たような改行に」） */
br.sp { display: none; }
.lead { font-size: var(--fs-md); color: var(--color-text); margin-bottom: var(--s5); line-height: 1.9; text-shadow: 0 2px 16px rgba(0, 10, 30, .7); }

/* 場面（水の旅） */
.scene { min-height: 88vh; min-height: 88svh; display: flex; align-items: center; padding: calc(var(--nav-h) + var(--s5)) var(--s3) var(--s5); }
.scene-inner { width: 100%; max-width: 1080px; margin: 0 auto; }
.scene-hero { text-align: center; min-height: 100vh; min-height: 100svh; }
.scene-hero .scene-inner { max-width: 880px; position: relative; }
.scene-hero .scene-inner::before {
  content: ''; position: absolute; inset: calc(var(--s5) * -1); z-index: -1;
  background: radial-gradient(closest-side, rgba(7, 24, 43, .72), rgba(7, 24, 43, 0));
}
.panel {
  max-width: min(560px, 44%);
  margin-left: max(var(--s3), calc((100% - 1080px) / 2));
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--s5) var(--s4);
}
.scene:nth-of-type(even) .panel { margin-left: auto; margin-right: max(var(--s3), calc((100% - 1080px) / 2)); }
.panel p { color: var(--color-muted); }
.panel .scene-title { font-size: clamp(21px, 6vw, 36px); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }
.tags li { font-size: var(--fs-sm); border: 1px solid var(--color-line); border-radius: 999px; padding: 0 var(--s2); line-height: 32px; color: var(--color-text); }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.btn {
  display: inline-block; min-height: 48px; padding: var(--s1) var(--s4);
  border-radius: 999px; border: 1px solid var(--color-accent);
  color: var(--color-accent); background: var(--color-primary);
  font-size: var(--fs-base); font-weight: 600; line-height: 30px; letter-spacing: .06em;
  text-decoration: none; cursor: pointer;
  transition: transform .25s, box-shadow .25s;
  font-family: inherit;
}
.btn:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.btn-primary { background: var(--color-accent); color: var(--color-primary); }

.scroll-cue { position: absolute; left: 50%; bottom: var(--s4); width: 24px; height: 40px; margin-left: -12px; border: 1px solid var(--color-muted); border-radius: 12px; }
.scroll-cue span { position: absolute; left: 50%; top: var(--s1); width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--color-accent); animation: fadeUp 2s ease-in-out infinite reverse; }

/* 4つの仕事の一覧 */
.block-glass { background: var(--color-primary); }
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--s3); }
.service {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s3) var(--s3);
  border: 1px solid var(--color-line); border-radius: var(--radius);
  background: var(--color-panel);
  color: var(--color-text); text-decoration: none; transition: transform .25s, box-shadow .25s;
}
.service:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-num {
  position: absolute; top: var(--s1); right: var(--s2);
  font-family: var(--font-serif); font-size: var(--fs-title); line-height: 1;
  /* 本番と同じ、中が抜けた縁取りの大きな番号 */
  color: transparent; -webkit-text-stroke: 1px rgba(63, 208, 230, .45);
}
.service-icon { width: 48px; height: 48px; padding: var(--s1); border-radius: 50%; background: rgba(63, 208, 230, .12); fill: none; stroke: var(--color-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service h3 { font-size: var(--fs-md); font-weight: 600; line-height: 1.5; }
.service p { font-size: var(--fs-base); color: var(--color-muted); flex: 1; }
.service-more { font-size: var(--fs-sm); color: var(--color-accent); }
.service-more::after { content: ' →'; }

/* AQUAに込めた意味 */
/* 見出しと導入: パソコンは左に見出し・右に短い段。大事な1文だけ大きく */
.aqua-intro { display: grid; gap: var(--s2); }
.block-lead.stagger p + p { margin-top: var(--s2); }
.aqua-key { font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 600; line-height: 1.6; color: var(--color-text); }
@media (min-width: 1024px) {
  /* 2026-10-24 岡沢さん「バランスが悪い」→ 左右を同じ幅に。下の4つの「水は、〜」も右の欄の左端にそろえる */
  .aqua-intro { grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
  /* 左の欄でも見出しが2行に収まる大きさ（「あなたの理想への架け橋に。」13文字） */
  .aqua-intro .block-title { font-size: clamp(24px, 3.3vw, 36px); }
}
/* 4つの意味は縦に1項目1行（2026-10-21 岡沢さんの案）。横並びだと文の長さで高さがそろわない */
.values { list-style: none; display: grid; gap: 0; --value-title: clamp(24px, 2.2vw, 28px); } /* 4つの見出しは 28px まで（2026-10-24「大きすぎる」） */
/* 2026-10-22 岡沢さん「単調で温度感が下がる」→ 水のかたちの絵・番号・大きな見出し・水にたとえた1文で引き込み、説明はそのあと */
.values li { position: relative; display: grid; grid-template-columns: 48px 1fr; align-items: end; gap: var(--s2) var(--s2); padding: var(--s4) 0; }
.value-icon { width: 48px; height: 48px; fill: none; stroke: var(--color-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.values li .value-catch, .values li > span { grid-column: 1 / -1; }
.value-catch { font-style: normal; font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 600; line-height: 1.6; color: var(--color-text); }
.values li:nth-child(1) b::before { content: "01"; }
.values li:nth-child(2) b::before { content: "02"; }
.values li:nth-child(3) b::before { content: "03"; }
.values li:nth-child(4) b::before { content: "04"; }
.values b::before { display: block; font-size: var(--fs-sm); letter-spacing: .2em; color: var(--color-accent); line-height: 1.6; }
@media (min-width: 768px) {
  .values li { grid-template-columns: 64px calc(6.6 * var(--value-title)) 1fr; grid-template-rows: auto 1fr; align-items: start; gap: var(--s1) var(--s4); padding: var(--s5) 0; }
  .value-icon { grid-row: 1 / 3; width: 64px; height: 64px; }
  .values b { grid-row: 1 / 3; }
  .values li .value-catch, .values li > span { grid-column: 3; }
}
/* 上の線は、画面に入ったときに左から伸びる */
.values li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--color-muted); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(300ms + var(--j, 0) * 120ms); }
.reveal.is-visible .values li::before { transform: none; }
.values b { font-family: var(--font-serif); font-size: var(--value-title); font-weight: 600; line-height: 1.3; letter-spacing: .04em; white-space: nowrap; }
.values span { font-size: var(--fs-base); color: var(--color-muted); }

/* 仕事のくわしい説明 */
.sub { font-size: var(--fs-sm); color: var(--color-accent); letter-spacing: .1em; margin: var(--s3) 0 var(--s1); font-weight: 600; }
.checks { list-style: none; display: grid; gap: var(--s1); }
.checks li { position: relative; padding-left: var(--s3); color: var(--color-text); }
.checks li::before { content: ''; position: absolute; left: 0; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.water-note { font-size: var(--fs-base); color: var(--color-muted); margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--color-line); }
.text-link { display: inline-block; margin-top: var(--s2); font-weight: 600; min-height: 48px; line-height: 48px; }
.text-link::after { content: ' →'; }

/* ご相談の流れ */
/* 2026-10-22 岡沢さん「単調・飽きにくい工夫を」→ 1→2→3→4 の道すじ。番号が順に出て、つなぐ線が伸びる。
   2026-10-23 岡沢さん「もっとゆっくり。模様ではなく流れを感じる動きに（今は電光掲示板のよう）。水の流れで 1 から 4 まで」
   → 1 の円の中心から 4 の円の中心まで 1 本の線（円の後ろを通る）。画面に入ると 1 から 4 へ伸び、
     濃淡の帯（::before）がゆっくり、細いきらめき（::after）が少し速く、同じ向きに流れ続ける。
   スマホは縦（線は左）、パソコンは横（線は番号の高さ）。縦の線の終わりは app.js が最後の項目の高さ（--flow-last）を入れる */
.flow { --flow-gap: var(--s4); --line: 3px; --wave: 320px; --glint: 220px; position: relative; list-style: none; display: grid; gap: var(--flow-gap); }
.flow li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--s1) var(--s2); align-content: start; }
.flow-num { grid-row: 1 / 3; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--color-accent); border-radius: 50%; background: var(--color-primary); font-style: normal; font-family: var(--font-serif); font-size: var(--fs-md); color: var(--color-accent); }
.flow b { color: var(--color-accent); font-size: var(--fs-md); line-height: 1.5; padding-top: var(--s1); }
.flow span { grid-column: 2; font-size: var(--fs-base); color: var(--color-muted); }
.flow::before, .flow::after {
  content: ''; position: absolute; pointer-events: none;
  left: calc(24px - var(--line) / 2); top: 24px; width: var(--line); height: calc(100% - var(--flow-last, 48px));
  border-radius: var(--line); transform: scaleY(0); transform-origin: top;
  transition: transform 1.4s cubic-bezier(.3, .6, .3, 1) .4s;
}
/* 濃淡の帯: 深い青 → 水色 → 深い青 の波が、くり返しながら流れる */
.flow::before { background: repeating-linear-gradient(to bottom, var(--color-deep) 0, var(--color-accent) calc(var(--wave) / 2), var(--color-deep) var(--wave)); }
/* きらめき: 帯の上を、細い光がときどき通る */
.flow::after { background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--glint) - 48px), color-mix(in srgb, var(--color-text) 70%, transparent) calc(var(--glint) - 24px), transparent var(--glint)); }
.reveal.is-visible .flow::before, .reveal.is-visible .flow::after { transform: none; }
.reveal.is-visible .flow::before { animation: stream-y 5.33s linear infinite; } /* 2026-10-24「1.5倍に」8s→5.33s */
.reveal.is-visible .flow::after { animation: shine-y 2.93s linear infinite; } /* 4.4s→2.93s */
@keyframes stream-y { from { background-position: 0 0; } to { background-position: 0 var(--wave); } }
@keyframes shine-y { from { background-position: 0 0; } to { background-position: 0 var(--glint); } }
@keyframes stream-x { from { background-position: 0 0; } to { background-position: var(--wave) 0; } }
@keyframes shine-x { from { background-position: 0 0; } to { background-position: var(--glint) 0; } }
@media (min-width: 1024px) {
  .flow { --flow-gap: var(--s3); grid-template-columns: repeat(4, 1fr); }
  .flow li { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .flow-num { grid-row: auto; }
  .flow span { grid-column: auto; }
  /* 1 列目の真ん中から 4 列目の真ん中まで（列の幅 =（全体 − すき間 3 つ）÷ 4） */
  .flow::before, .flow::after { left: calc((100% - 3 * var(--flow-gap)) / 8); top: calc(24px - var(--line) / 2); width: calc(100% - (100% - 3 * var(--flow-gap)) / 4); height: var(--line); transform: scaleX(0); transform-origin: left; }
  .flow::before { background-image: repeating-linear-gradient(to right, var(--color-deep) 0, var(--color-accent) calc(var(--wave) / 2), var(--color-deep) var(--wave)); }
  .flow::after { background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--glint) - 48px), color-mix(in srgb, var(--color-text) 70%, transparent) calc(var(--glint) - 24px), transparent var(--glint)); }
  .reveal.is-visible .flow::before { animation-name: stream-x; }
  .reveal.is-visible .flow::after { animation-name: shine-x; }
}
.motion-off .flow::before, .motion-off .flow::after { transform: none; }

/* 動きを止めるボタン */
.motion-toggle { background: none; border: 1px solid var(--color-line); color: var(--color-muted); font: inherit; font-size: var(--fs-sm); border-radius: 999px; padding: 0 var(--s2); min-height: 32px; cursor: pointer; }
.motion-toggle[aria-pressed="true"] { color: var(--color-accent); border-color: var(--color-accent); }
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; }
.motion-off .reveal > *, .motion-off .reveal .stagger > *, .motion-off .values li::before { opacity: 1; transform: none; }

/* 循環 */
.scene-cycle { text-align: center; }
/* 2026-10-22 岡沢さん「前の方が背景が良かった・雨からのつながりが良かった」→ 場面全体の幕はやめて水を見せる。
   読みやすさは、上の小さな札・輪の内側の丸・文の箱だけを透けない面にして守る */
.scene-cycle .scene-inner { max-width: 720px; }
/* 最初の画面の小さな会社名も同じ札にのせる（2026-10-26 の点検: 明るい水の光の上で読みにくかった） */
.scene-cycle .eyebrow, .scene-hero .eyebrow { display: inline-block; background: var(--color-primary); border: 1px solid var(--color-line); border-radius: 999px; padding: 0 var(--s3); line-height: 40px; }
.cycle { position: relative; width: min(400px, 100%); aspect-ratio: 1; margin: var(--s4) auto; container-type: inline-size; }
.cycle-ring { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0, 8, 20, .5)); }
/* 2026-10-22 岡沢さん（見本の写真）: 水の上に細い紺の1本線。明るい水の上でくっきり、暗い水では静かに溶ける */
.cycle-ring circle { fill: none; stroke: var(--color-primary); stroke-width: 2; }
.cycle-ring .cycle-flow { stroke: var(--color-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 120 822; transform-origin: 200px 200px; animation: flow 5.3s linear infinite; }
@keyframes flow { to { transform: rotate(360deg); } }
.cycle-steps { list-style: none; position: absolute; inset: 0; }
.cycle-steps li {
  position: absolute; left: 50%; top: 50%;
  width: 112px; margin: -40px 0 0 -56px;
  transform: rotate(calc(var(--i) * 90deg - 90deg)) translate(min(150px, 37.5cqw)) rotate(calc(var(--i) * -90deg + 90deg));
  background: var(--color-primary); border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: var(--s1); line-height: 1.5;
}
.cycle-steps b { display: block; font-size: var(--fs-sm); }
.cycle-steps span { font-size: var(--fs-sm); color: var(--color-muted); }
/* 「循環」は主張しない飾りの字（2026-10-22 岡沢さん「そこまで主張がなくてもいい」）。札はのせず、うっすら影だけ */
.cycle-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-shadow: 0 2px 12px rgba(0, 10, 30, .6); font-family: var(--font-serif); font-size: var(--fs-md); letter-spacing: .3em; font-weight: 400; color: var(--color-text); }
/* 2026-10-22 岡沢さん「見え方が悪い」→ 2つの段に分け、締めの1文を大きく。行の長さは text-wrap でそろえる */
.cycle-text { color: var(--color-muted); max-width: 640px; margin: 0 auto; display: grid; gap: var(--s2); background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--s4) var(--s3); }
.cycle-text p { text-wrap: balance; }
.cycle-key { font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 600; line-height: 1.7; color: var(--color-text); }
.scene-cycle .scene-title { position: relative; isolation: isolate; text-shadow: 0 2px 16px rgba(0, 10, 30, .8); }
.scene-cycle .scene-title::before { content: ''; position: absolute; inset: calc(var(--s3) * -1) calc(var(--s5) * -1); z-index: -1; background: radial-gradient(closest-side, var(--color-panel) 40%, transparent); }

/* 下の情報のブロック（水底のように落ち着いた面） */
.block { padding: var(--s5) var(--s3); background: var(--color-primary); }
.block + .block { border-top: 1px solid var(--color-line); }
.container { max-width: 1080px; margin: 0 auto; padding: var(--s5) 0; }
.container.narrow { max-width: 680px; }
.block-lead { color: var(--color-muted); margin-bottom: var(--s4); }

.works { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--s3); }
.work { border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--s3); background: var(--color-panel); transition: transform .25s, box-shadow .25s; }
.work:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.work-kind { font-size: var(--fs-sm); color: var(--color-accent); }
.work h3 { font-size: var(--fs-md); font-weight: 600; margin: var(--s1) 0; line-height: 1.5; }
.work p { font-size: var(--fs-base); color: var(--color-muted); }

.message { display: grid; grid-template-columns: 320px 1fr; gap: var(--s5); align-items: start; }
.message-photo img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.message-sign { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--color-muted); line-height: 1.7; }
.message-sign b { font-family: var(--font-serif); font-size: var(--fs-md); color: var(--color-text); letter-spacing: .2em; }
.message-body p { color: var(--color-muted); margin-bottom: var(--s3); }
/* 1行が長いと目で追いにくい（最大59字だった）→ 1行はおよそ34字まで */
.message-body { max-width: 34em; }
/* 代表メッセージは文だけが流れ、写真と名前は残る（2026-10-24 岡沢さん「メッセージしか見えないのは想いが伝わりづらい」）。
   2026-10-28 タブレット・小さめのノートPC（768〜1023px）も同じ形に（縦に並べると、飛んだときに写真だけが見えていた） */
@media (min-width: 768px) {
  .message-photo { position: sticky; top: calc(var(--nav-h) + var(--s4)); }
  /* 低い画面でも、写真と名前が帯の下に収まる高さまで */
  .message-photo img { max-height: calc(100vh - var(--nav-h) - 160px); max-height: calc(100svh - var(--nav-h) - 160px); width: 100%; }
}
.message-mini { display: none; }
@media (max-width: 767px) {
  /* 場所を取らない帯（下の余白を打ち消す）。大きな写真が見えている間は消しておく */
  .message-mini { display: flex; align-items: center; gap: var(--s2); position: sticky; top: var(--nav-h); z-index: 2; height: 56px; margin: 0 calc(var(--s2) * -1) -56px; padding: 0 var(--s2);
    background: var(--color-primary); border-bottom: 1px solid var(--color-line); pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
  .message.is-photo-away .message-mini { opacity: 1; visibility: visible; transition: opacity .3s ease; }
  .message-mini img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; }
  .message-mini span { font-size: var(--fs-sm); color: var(--color-muted); }
  .message-mini b { margin-left: var(--s1); font-family: var(--font-serif); font-size: var(--fs-base); color: var(--color-text); letter-spacing: .12em; }
}

.company { border-top: 1px solid var(--color-line); }
.company div { display: grid; grid-template-columns: 160px 1fr; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--color-line); }
.company dt { font-size: var(--fs-sm); color: var(--color-accent); letter-spacing: .1em; }
/* 理念は1つずつ（2026-10-24 岡沢さん「1画面で見れる内容は一つに」）。
   台（.mvv-sticky）は帯の下に貼りつき、3つを同じ場所に重ねる。今の1つ（.is-current）だけ見せ、前が消えてから次が出る。
   app.js が .is-staged を付けたときだけこの形。付かないとき（台より箱が高い画面など）は、縦に1つずつ並ぶ */
.mvv-sticky { display: grid; gap: var(--s3); }
/* 2026-10-24 岡沢さん「上すぎる」「1回のスワイプで Value まで行きすぎる」→
   台の高さは中身ぶん（--mvv-stage-h は app.js が 道すじ＋すき間＋いちばん高い箱 で入れる）にし、画面の上下の真ん中で止まる。
   1つ分のスクロールは画面1枚分。Value が出たあとは画面 0.4 枚分で台が離れ、そのまま代表メッセージへ流れる（2.4 = 2 + 0.4。app.js の STAY と同じ）。
   2026-10-25 岡沢さん「Value だけ、下へ行くときに止まらずに動いてしまう」→ Value もほかの2つと同じ画面1枚分止まる（3 = 2 + 1）。
   2026-10-24 岡沢さん「止まったりで違和感」「上に戻ったり下に戻ったりする」→ 吸いつき（scroll-snap）も、止まってから合わせる仕組みも使わない。スクロールは指の動きのとおり */
.mvv.is-staged { position: relative; height: calc(var(--mvv-stage-h, 0px) + 3 * 100vh); height: calc(var(--mvv-stage-h, 0px) + 3 * 100svh); }
.mvv.is-staged .mvv-sticky { position: sticky; top: max(var(--nav-h), calc(var(--nav-h) + (100vh - var(--nav-h) - var(--mvv-stage-h, 0px)) / 2)); top: max(var(--nav-h), calc(var(--nav-h) + (100svh - var(--nav-h) - var(--mvv-stage-h, 0px)) / 2));
  height: var(--mvv-stage-h, auto); align-items: start; justify-items: stretch; }
/* 2026-10-24 岡沢さん「中央から右下にずれている」→ 箱は見出しと左端・右端をそろえ、台の上側に置く */
/* 2026-10-24 岡沢さん「一個一個が独立しすぎ。切り替わる時に流れるようにつながりを」→ 前は上へ流れて消え、次は下から流れてくる。
   次は前が消えきる前（0.2 秒後）に出はじめ、入れかわりの一瞬だけ重なってひと続きに見える。止まっている間は1つだけ */
.mvv.is-staged .mvv-sticky { grid-template-rows: auto auto 1fr; row-gap: var(--s3); }
/* 見出し（台の1段目）: 切り替わる間も見え続ける */
.mvv-head .block-title { margin-bottom: 0; }
.mvv.is-staged .mvv-head { grid-row: 1; grid-column: 1; }
.mvv.is-staged .mvv-item { grid-row: 3; grid-column: 1; width: 100%; opacity: 0; visibility: hidden; transform: translateY(48px);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .6s; }
.mvv.is-staged .mvv-item.is-past { transform: translateY(-48px); }
.mvv.is-staged .mvv-item.is-current { opacity: 1; visibility: visible; transform: none;
  transition: opacity .45s ease .2s, transform .6s cubic-bezier(.2, .7, .2, 1) .2s, visibility 0s linear 0s; }
/* 道すじ（台の上）: 3つの点を結ぶ線。今の1つが切り替わったときだけ、水色の線が次の点まで伸びる・前の点まで縮む（--mvv-p は app.js が 0・0.5・1 で入れる）。
   2026-10-25 岡沢さん「上へ戻るときも止まらずに動く」→ スクロールに合わせて伸び縮みさせると、出ている間もずっと線が動いて止まって見えないため */
.mvv-rail { display: none; }
.mvv.is-staged .mvv-rail { display: block; position: relative; grid-row: 2; grid-column: 1; }
/* スマホ: 見出しと道すじが台に入るぶん、Value の5つの上下の余白を少しつめて1画面に収める */
@media (max-width: 767px) { .mvv.is-staged .mvv-values li { padding: var(--s1) 0; } }
.mvv-rail::before, .mvv-rail-fill { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; }
.mvv-rail::before { background: var(--color-line); }
.mvv-rail-fill { background: linear-gradient(90deg, var(--color-deep), var(--color-accent)); box-shadow: 0 0 8px rgba(63, 208, 230, .6); transform-origin: left; transform: scaleX(var(--mvv-p, 0)); transition: transform .6s ease; }
.mvv-rail ol { position: relative; list-style: none; display: flex; justify-content: space-between; }
.mvv-rail li { display: flex; align-items: center; gap: var(--s1); padding-right: var(--s1); background: var(--color-primary); font-family: var(--font-serif); font-size: var(--fs-sm); letter-spacing: .12em; color: var(--color-muted); transition: color .4s; }
.mvv-rail li:not(:first-child) { padding-left: var(--s1); }
.mvv-rail li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--color-accent); background: var(--color-primary); transition: background-color .4s; }
.mvv-rail li.is-past::before, .mvv-rail li.is-current::before { background: var(--color-accent); }
.mvv-rail li.is-current { color: var(--color-accent); }
/* 出るときの動き（2026-10-24 岡沢さん「表示される時に動きがあるように」）。最初に出たとき（.is-shown が付いたとき）の1回だけ。
   前の場面が消える 0.3 秒を待ってから: 箱が 24px 下から浮き上がり → 青い線が左から伸び → 見出し・1文・説明（Value は 01〜05）が順に出る。
   backwards: 動く前だけ始めの形にし、終わったら元の見え方に戻す（消える切り替えを邪魔しない） */
.mvv.is-staged .mvv-item.is-shown::after { transform-origin: left; animation: barGrow .7s cubic-bezier(.2, .7, .2, 1) .5s backwards; }
.mvv.is-staged .mvv-item.is-shown :is(.mvv-label, .mvv-statement, .mvv-text, .mvv-values li) { --rise: 16px; animation: fadeUp .6s cubic-bezier(.2, .7, .2, 1) .45s backwards; }
.mvv.is-staged .mvv-item.is-shown p.mvv-statement { animation-delay: .55s; }
.mvv.is-staged .mvv-item.is-shown p.mvv-text { animation-delay: .65s; }
.mvv.is-staged .mvv-item.is-shown .mvv-values li { animation-delay: calc(.45s + var(--n) * .1s); }
.mvv-values li:nth-child(1) { --n: 1; } .mvv-values li:nth-child(2) { --n: 2; } .mvv-values li:nth-child(3) { --n: 3; } .mvv-values li:nth-child(4) { --n: 4; } .mvv-values li:nth-child(5) { --n: 5; }
.mvv-item { padding: var(--s4); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-panel); }
.mvv-label { font-family: var(--font-serif); font-size: var(--fs-md); color: var(--color-accent); letter-spacing: .12em; margin-bottom: var(--s2); }
.mvv-label span { margin-left: var(--s2); font-family: inherit; font-size: var(--fs-sm); color: var(--color-muted); letter-spacing: .1em; }
/* スマホは内側の余白を詰め、「コミュニケーションによって」を1行に収める */
@media (max-width: 767px) { .mvv-item { padding: var(--s3); } }
.mvv-statement { font-family: var(--font-serif); font-weight: 600; font-size: clamp(21px, 2.6vw, 32px); line-height: 1.6; margin-bottom: var(--s2); }
.mvv-text { color: var(--color-muted); }
.mvv-values { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: var(--s2) var(--s3); }
.mvv-values li { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--color-line); font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.6; }
.mvv-num { flex-shrink: 0; font-size: var(--fs-sm); color: var(--color-accent); }

.form { display: grid; gap: var(--s3); background-color: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--s4) var(--s3); }
.form label { display: grid; gap: var(--s1); font-size: var(--fs-sm); color: var(--color-muted); }
.form .label-text { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.form .req { color: var(--color-accent); font-size: var(--fs-sm); }
.form .hint { font-size: var(--fs-sm); color: var(--color-muted); }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; font-size: var(--fs-base); color: var(--color-text);
  background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--s1);
  padding: var(--s1) var(--s2); min-height: 48px;
}
.form select { -webkit-appearance: none; appearance: none; padding-right: var(--s5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%233FD0E6' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s2) center; }
.form select option { background: var(--color-primary); }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.form .agree { display: flex; align-items: center; gap: var(--s1); min-height: 48px; }
.form .agree a { padding: var(--s1) 0; }
/* 2026-10-26 空で送ったとき: 欄ごとに赤い枠と理由を出す（まとめのお知らせは送信ボタンの上） */
.form [aria-invalid="true"] { border-color: var(--color-error); }
.form .field-error { font-size: var(--fs-sm); color: var(--color-error); }
.form .agree input { width: 24px; min-height: 24px; height: 24px; }
.hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-status { font-size: var(--fs-sm); min-height: 24px; }
.form-status.is-success { color: var(--color-success); }
.form-status.is-error { color: var(--color-error); }

.footer { text-align: center; padding: var(--s5) var(--s3); background: var(--color-primary); border-top: 1px solid var(--color-line); font-size: var(--fs-sm); color: var(--color-muted); }
.footer img { margin: 0 auto var(--s1); }
.footer b { color: var(--color-accent); }
.footer-links { margin: var(--s1) 0; }

/* 1文だけの場面: 無地の背景・大きな1文・広い余白。文字は 0.6 秒・20px の浮き上がり、線は伸びて出る（1回だけ） */
.statement { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--s5) * 2) var(--s3); background: var(--color-primary); }
.statement-inner { width: 100%; max-width: 1080px; margin: 0 auto; }
.statement-label { font-size: var(--fs-sm); letter-spacing: .18em; color: var(--color-muted); margin-bottom: var(--s4); }
.statement-text {
  font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-statement); line-height: 1.4; letter-spacing: .02em;
  opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease;
}
.statement-line { display: block; width: min(240px, 40%); height: 2px; margin-top: var(--s5); background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .6s ease .3s; }
.statement.is-visible .statement-text, .motion-off .statement-text { opacity: 1; transform: none; }
.statement.is-visible .statement-line, .motion-off .statement-line { transform: none; }

/* 表示のアニメーション（区切りに入った1回だけ）: 2026-10-26 岡沢さんが見本から B を選択。
   小見出し → 見出し → 見出しの下の線 → 本文の段落、の順に、8px 下から 0.5 秒でふわっと出る（全部で約1秒）。
   読み始めるころには止まっている。待ち時間（--d）は app.js が中身の種類で決める */
.reveal > * { opacity: 0; transform: translateY(8px); transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.reveal.is-visible > * { opacity: 1; transform: none; }
.reveal .stagger > * { opacity: 0; transform: translateY(8px); transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0ms) + min(var(--j, 0), 5) * 100ms); }
.reveal.is-visible .stagger > * { opacity: 1; transform: none; }
/* 見出しの下の線（barGrow と同じ伸び方）。見出しの下の余白の中に置くので、見出しの高さは変わらない */
.reveal .block-title, .reveal .scene-title { position: relative; }
.reveal .block-title::after, .reveal .scene-title::after {
  content: ''; position: absolute; left: 0; bottom: calc(var(--s2) * -1 + 4px); width: var(--s5); height: 2px; background: var(--color-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0ms) + 120ms);
}
.reveal.is-visible .block-title::after, .reveal.is-visible .scene-title::after, .motion-off .reveal .block-title::after, .motion-off .reveal .scene-title::after { transform: none; }
.reveal .mvv-head .block-title::after { content: none; }
/* 動きは2種類だけ: fadeUp（下から浮き上がる。高さは --rise・ふだん 8px）と barGrow（左から伸びる） */
@keyframes fadeUp { from { opacity: 0; transform: translateY(var(--rise, 8px)); } to { opacity: 1; transform: none; } }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: none; } }

/* タブレット */
@media (max-width: 1023px) {
  .message { grid-template-columns: 240px 1fr; gap: var(--s4); }
  /* 写真の横の細い欄でも、見出しは2行まで */
  #message .block-title { font-size: clamp(24px, 3.4vw, 34px); }
  .panel { max-width: min(560px, 72%); }
}
@media (max-width: 767px) {
  .message { grid-template-columns: 1fr; gap: var(--s5); }
  .message-photo { max-width: 320px; }
}
/* 低い画面（小さめのノートPC・横向きのタブレット）: 説明の箱が上の帯の下に収まるよう、内側の余白とすき間を少しつめ、
   768〜1023px は箱を少し広げて行の数を減らす（2026-10-26 の点検: 1000x640 で箱の下が切れていた） */
@media (min-width: 768px) and (max-height: 760px) {
  .panel { padding: var(--s4); }
  .panel .sub { margin-top: var(--s2); }
  .panel .water-note { margin-top: var(--s2); padding-top: var(--s1); }
}
@media (min-width: 768px) and (max-width: 1023px) and (max-height: 760px) {
  .panel { max-width: min(640px, 72%); }
}

/* 2026-10-26 小さめのノートPC（1120px 以下）でメニューが2行に折れ、会社名に重なっていた → 1200px 未満はまとめたボタンにする。
   開いている間は後ろのページを動かさない（html.menu-open）。メニューが画面より長いときは、メニューの中だけ動く */
@media (max-width: 1199px) {
  .nav-toggle { display: block; }
  .nav-menu {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - var(--nav-h)); max-height: calc(100svh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--color-primary); border-bottom: 1px solid var(--color-line);
    padding: var(--s1) var(--s3) var(--s3);
    visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s;
  }
  .nav-menu.is-open { visibility: visible; opacity: 1; }
  .nav-menu a { font-size: var(--fs-base); padding: var(--s2) 0; border-bottom: 1px solid var(--color-line); }
  .nav-menu .motion-toggle { margin-top: var(--s2); min-height: 48px; }
  .nav-menu .nav-cta { margin-top: var(--s2); text-align: center; border-bottom: 1px solid var(--color-accent); }
  html.menu-open { overflow: hidden; }
}
/* タブレット・小さめのノートPC: 横いっぱいに広げず、右側の細い板にする */
@media (min-width: 768px) and (max-width: 1199px) { .nav-menu { left: auto; width: 360px; border-left: 1px solid var(--color-line); border-bottom-left-radius: var(--radius); } }

/* スマホ */
@media (max-width: 767px) {
  :root { --nav-h: 56px; }
  .nav { padding: 0 var(--s2); }
  .scene { padding: calc(var(--nav-h) + var(--s4)) var(--s2) var(--s4); align-items: flex-end; }
  .scene-hero { align-items: center; }
  .panel, .scene:nth-of-type(even) .panel { margin: 0; padding: var(--s4) var(--s3); max-width: none; }
  .lead { font-size: var(--fs-base); }
  /* パソコン用の改行（br.pc）だけ隠す。代表メッセージの1文ごとの改行は、スマホでもそのまま（2026-10-23） */
  .lead br.pc, .panel p br:not(.sp), .cycle-text br:not(.sp) { display: none; }
  br.sp { display: inline; }
  /* 4つの仕事のカード: 左右の余白を少しつめ、説明の1行（意味のまとまり）が収まる幅にする */
  .service { padding-left: var(--s2); padding-right: var(--s2); }
  /* 行の長さをそろえる指定（balance）は、スマホでは三角形の形になるので使わない */
  .cycle-text p { text-wrap: wrap; }
  /* ご相談の流れ: 番号と説明の間をつめて、説明の横幅を広げる（右があきすぎない） */
  .flow li { column-gap: var(--s1); }
  .actions .btn { width: 100%; max-width: 320px; }
  .block { padding: var(--s4) var(--s2); }
  .container { padding: var(--s4) 0; }
  .company div { grid-template-columns: 1fr; gap: 0; }
  .cycle-steps li { width: 112px; margin: -36px 0 0 -56px; transform: rotate(calc(var(--i) * 90deg - 90deg)) translate(33cqw) rotate(calc(var(--i) * -90deg + 90deg)); }
  .cycle-steps b { white-space: nowrap; letter-spacing: 0; }
}

/* 場面のつなぎ目の一言（しずくの道） */
.bridge { position: relative; z-index: 2; display: flex; justify-content: center; margin: calc(var(--s3) * -1) 0; pointer-events: none; }
.bridge span { font-size: var(--fs-sm); letter-spacing: .2em; color: var(--color-text); background: var(--color-primary); border: 1px solid var(--color-line); border-radius: 999px; padding: 0 var(--s3); line-height: 40px; }

/* 雲の場面だけ明るい空。箱も白くして、暗い海からのメリハリをつくる */
.scene-light .panel { background: #FFFFFF; border-color: #D5DEE6; }
.scene-light .panel .eyebrow, .scene-light .sub, .scene-light .text-link { color: #044652; }
.scene-light .scene-title, .scene-light .checks li { color: #0B2238; }
.scene-light .panel p, .scene-light .water-note { color: #1F3A52; }
.scene-light .water-note { border-color: #D5DEE6; }

/* 循環の目印（仕事の場面にいる間だけ、横に出る） */
.float-cta {
  position: fixed; right: var(--s2); bottom: var(--s2); bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px)); z-index: 90;
  min-height: 48px; padding: 0 var(--s3); border-radius: 999px; line-height: 48px;
  background: var(--color-accent); color: var(--color-primary); font-size: var(--fs-base); font-weight: 600; letter-spacing: .06em; text-decoration: none;
  box-shadow: var(--shadow-lg);
  visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s, visibility .3s;
}
.float-cta.is-shown { visibility: visible; opacity: 1; transform: none; }
.float-cta.is-shown.is-hidden-menu { visibility: hidden; opacity: 0; }
@media (min-width: 1200px) { .float-cta, .float-cta.is-shown { display: none; visibility: hidden; } }
.water-ring { position: fixed; right: var(--s3); top: 50%; z-index: 50; width: 160px; height: 160px; margin-top: -80px; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; pointer-events: none; }
.water-ring.is-on { opacity: 1; visibility: visible; }
.water-ring svg { width: 100%; height: 100%; overflow: visible; }
.water-ring .ring-bg { fill: var(--color-primary); }
.water-ring .ring-track { fill: none; stroke: var(--color-line); stroke-width: 2; }
.water-ring .dot { fill: var(--color-primary); stroke: var(--color-accent); stroke-width: 2; }
.water-ring .dot.on { fill: var(--color-accent); }
.water-ring text { font-size: var(--fs-sm); fill: var(--color-text); paint-order: stroke; stroke: rgba(7, 24, 43, .85); stroke-width: 4px; }
.water-ring text.on { fill: var(--color-accent); font-weight: 700; }
@media (min-width: 1024px) {
  .scene:not(.scene-hero) { padding-left: calc(160px + var(--s5)); padding-right: calc(160px + var(--s5)); }
  .panel { max-width: 520px; }
}
/* 水のかたちの大きな名前（スマホで、場面の入り口の景色に重ねて見せる） */
.scene-mark { display: none; }
@media (max-width: 767px) {
  /* スマホは縦に長い箱と重なるので出さない（場面のつなぎ目の一言で巡りを伝える） */
  .water-ring { display: none; }

  /* 場面の入り口に「景色の窓」をあけ、文字の箱はその下から上がってくる */
  .scene:not(.scene-hero) { flex-direction: column; align-items: stretch; justify-content: flex-start; padding-top: 0; }
  .scene-mark {
    display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s1);
    min-height: 62svh; padding: calc(var(--nav-h) + var(--s3)) var(--s1) var(--s4);
    text-shadow: 0 2px 16px rgba(0, 10, 30, .7);
  }
  .scene-mark-num { font-family: var(--font-serif); font-size: var(--fs-sm); letter-spacing: .3em; color: var(--color-accent); }
  .scene-mark-name { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-hero); line-height: 1.2; letter-spacing: .12em; color: var(--color-text); }
  .scene-mark-sub { font-size: var(--fs-sm); letter-spacing: .18em; color: var(--color-text); }
  /* どの場面も、水のかたちより仕事の名前（雨の場面は「そして、また湧き水へ」）を大きく見せる（2026-10-22 岡沢さん「雨の主張が強い」） */
  .scene-mark-name { font-size: var(--fs-md); letter-spacing: .18em; }
  .scene-mark-sub { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-title); line-height: 1.3; letter-spacing: .04em; white-space: nowrap; }
  .scene-light .scene-mark-name, .scene-light .scene-mark-sub { color: #0B2238; text-shadow: 0 2px 16px rgba(255, 255, 255, .8); }
  .scene-light .scene-mark-num { color: #044652; }

  /* 番号と仕事の名前は、上の大きな名前と重なるので箱の中では出さない */
  .panel > .eyebrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal > *, .reveal .stagger > *, .values li::before, .statement-text, .statement-line, .reveal .block-title::after, .reveal .scene-title::after { opacity: 1; transform: none; }
  .float-cta { transform: none; }
  .flow::before, .flow::after { transform: none; }
}

/* ── 箱の奥行きと青い線（2026-10-23 岡沢さん「単調で平面的。本番の4つの仕事のカードの青いラインを。3D に見えるように」）──
   色は透けないまま（読みやすさ・コントラスト 7 以上は守る）。左上を少し明るくし、下に影、上の縁に青く光る線 */
.service, .panel, .cycle-text, .mvv-item, .work, .cycle-steps li, .form {
  background-image: linear-gradient(160deg, var(--color-panel-hi), transparent 60%);
  box-shadow: var(--shadow);
}
.panel, .cycle-text, .mvv-item, .work, .form { position: relative; }
.service::after, .panel::after, .cycle-text::after, .mvv-item::after, .work::after, .cycle-steps li::after, .form::after {
  content: ''; position: absolute; top: 0; left: var(--s2); right: var(--s2); height: 3px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--color-accent) 10%, var(--color-accent) 90%, transparent);
  box-shadow: 0 0 12px rgba(63, 208, 230, .6);
}
.cycle-steps li::after { left: var(--s2); right: var(--s2); }
/* 2026-10-26 岡沢さん「循環の文の箱にもアニメーションを」→ 箱が画面に入ったとき（app.js が .cycle-anim と .is-visible を付ける）:
   上の青い線が真ん中から広がり（barGrow と同じ伸び方）→ 1文目 → 大事な1文を文節ごとに（--k）。8px・0.5 秒、全部で約1.2秒。1回だけ */
/* 隠れた形へは一瞬で（開いたときに見えている文字が消えていく動きを見せない）。動きは出るときだけ */
.cycle-text.cycle-anim::after { transform: scaleX(0); transform-origin: center; }
.cycle-text.cycle-anim > p:first-child, .cycle-text.cycle-anim .cycle-key .phrase { opacity: 0; transform: translateY(8px); }
.cycle-text.cycle-anim.is-visible::after { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.cycle-text.cycle-anim.is-visible > p:first-child, .cycle-text.cycle-anim.is-visible .cycle-key .phrase { transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1); }
.cycle-text.cycle-anim.is-visible > p:first-child { transition-delay: .25s; }
.cycle-text.cycle-anim.is-visible .cycle-key .phrase { transition-delay: calc(.55s + var(--k, 0) * .15s); }
.cycle-text.cycle-anim.is-visible::after, .motion-off .cycle-text.cycle-anim::after { transform: none; }
.cycle-text.cycle-anim.is-visible > p:first-child, .cycle-text.cycle-anim.is-visible .cycle-key .phrase,
.motion-off .cycle-text.cycle-anim > p:first-child, .motion-off .cycle-text.cycle-anim .cycle-key .phrase { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cycle-text.cycle-anim::after, .cycle-text.cycle-anim > p:first-child, .cycle-text.cycle-anim .cycle-key .phrase { opacity: 1; transform: none; }
}
/* パソコン: マウスを乗せると 4px 浮き、マウスの位置に合わせて少し傾く（傾きは app.js が --rx・--ry に入れる） */
.service:hover, .work:hover { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); box-shadow: var(--shadow-lg); }
.motion-off .service:hover, .motion-off .work:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .service:hover, .work:hover { transform: translateY(-4px); } }
@media (min-width: 1024px) {
  .values li { grid-template-columns: 64px calc(50% + var(--s5) / 2 - 64px - 2 * var(--s4)) 1fr; }
}

/* 4つの仕事のカードは1枚ずつ（2026-10-24 岡沢さん「1個1個表示されるようにした方が、1つ1つの事業に目を通してもらえる」）。
   画面に入ると 01 → 04 の順に 0.2 秒ずつ: カードが浮き上がり（fadeUp）、そのあと上の青い線が左から伸びる（barGrow）。
   JavaScript が動かないとき（.reveal が付かない）・動きを減らす設定・「動きを止める」では、最初から見える */
.services .service:nth-child(1) { --n: 0; } .services .service:nth-child(2) { --n: 1; } .services .service:nth-child(3) { --n: 2; } .services .service:nth-child(4) { --n: 3; }
.reveal:not(.is-visible) .services .service { opacity: 0; }
.reveal.is-visible .services .service { --rise: 32px; animation: fadeUp .6s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(.3s + var(--n) * .2s); }
.reveal.is-visible .services .service::after { transform-origin: left; animation: barGrow .6s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(.6s + var(--n) * .2s); }
.motion-off .reveal .services .service { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .reveal:not(.is-visible) .services .service, .reveal .services .service { opacity: 1; } }