/* =========================================================
   0. Reset & Design Tokens（V3：白×グリーンのエディトリアル）
   「白い空間の中で、緑が意味を持っている」
   グリーンは面ではなく、線・番号・キーワードなど
   意味のある場所に限定して使用する
========================================================= */
:root {
  --color-bg: #fbfbf9;
  --color-bg-soft: #f2f4f1;
  --color-bg-value: #16302a;

  --color-primary: #2f5d46;
  --color-primary-soft: #6f9a82;
  --color-secondary: #cfe0d3;

  --color-text: #24272a;
  --color-text-dim: #74787a;
  --color-text-invert: #f5f7f4;
  --color-text-invert-dim: #b9c7bf;

  --color-line: #dde3de;

  --font-jp: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-serif: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "Noto Serif JP", serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --content-max: 1180px;
  --section-pad-x: 8vw;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: auto;
  background: var(--color-bg);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-jp);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.section {
  position: relative;
  width: 100%;
}

.eyebrow {
  display: inline-block;
  font-size: 1.5rem;
  letter-spacing: 0.28em;
  color: var(--color-primary);
  font-weight: 600;
}

/* =========================================================
   1. Reveal（IntersectionObserverによる軽いフェードイン）
   JS未実行・reduced-motion時は常に可視状態
========================================================= */
[data-reveal] {
  opacity: 1;
  transform: none;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* CONNECTION→VALUEのpin/GSAP演出そのものは、script.js側で
     document.documentElement に .climax-static を付与することで無効化し、
     すべての意味（SCENE1〜7）を通常の縦スクロールで欠落なく読ませる。
     具体的なスタイルは「.climax-static」ルール（本ファイル内の
     CONNECTION→VALUEセクション）にまとめている */

  /* 章番号は、reduced-motion環境でもアウトラインのまま止まらず、
     最初から濃いTSR Greenで確定表示する */
  .voice-num,
  .future-chapter-num {
    color: var(--color-primary) !important;
    -webkit-text-stroke-color: var(--color-primary) !important;
  }

  .hero-strata,
  .ending-strata {
    opacity: 0.5 !important;
    animation: none !important;
  }
}

/* =========================================================
   2. HERO（★★★☆☆）
========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* 「積層」モチーフを、ページの入口としてごく淡く画面下に差し込む。
   写真ではなく、地層を思わせる抽象的な帯（fill主体、線描画ではない） */
.hero-strata {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  animation: hero-strata-in 1.6s var(--ease) 0.3s forwards;
}

.hero-strata-band {
  fill: var(--color-primary-soft);
}

.hero-strata-band--1 {
  fill: var(--color-secondary);
  opacity: 0.55;
}

.hero-strata-band--2 {
  opacity: 0.4;
}

@keyframes hero-strata-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 0.5; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-strata {
    opacity: 0.5;
    animation: none;
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding: 4rem 6vw;
}

.hero .eyebrow {
  margin: 0 0 1.5rem;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.8vw, 4.2rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-text);
  margin: 0;
}

.hero-line {
  width: 1px;
  height: 0;
  background: var(--color-primary);
  margin: 2.4rem auto 0;
  animation: hero-line-grow 1.3s var(--ease) 0.5s forwards;
}

@keyframes hero-line-grow {
  to { height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-line {
    height: 64px;
    animation: none;
  }
}

.scroll-cue {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.scroll-cue-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--color-primary-soft));
  animation: cue-flow 2.4s ease-in-out infinite;
}

.scroll-cue-text {
  font-size: 1.0rem;
  letter-spacing: 0.3em;
  color: var(--color-text-dim);
}

@keyframes cue-flow {
  0% { opacity: 0.15; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
  100% { opacity: 0.15; transform: scaleY(0.6); transform-origin: top; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue-line { animation: none; }
}

/* =========================================================
   3. INTRODUCTION（★☆☆☆☆）
   数秒で趣旨を理解できる通常コンテンツ
========================================================= */
.introduction {
  padding: 16vh var(--section-pad-x);
}

.intro-grid {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 11fr 9fr;
  gap: 6vw;
  align-items: start;
}

.intro-copy {
  max-width: 620px;
}

/* 中央の縦線＝「左右を分断する線」ではなく「物語と情報を
   静かに分ける線」。非常に薄いTSR Greenでopacityを抑える */
.intro-stats {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  border-left: 1px solid rgba(47, 93, 70, 0.35);
  padding-left: 1.8rem;
}

.intro-block {
  display: flex;
  flex-direction: column;
}

/* 「今回、ご協力いただいた方々」「お聞きしたテーマ」＝右側
   （企画概要）の小見出し。左側のメイン見出し（.intro-lead）より
   確実に小さく、左側の説明文よりは明確に強い読める見出しサイズに
   する。左の縦線は情報ブロックの起点を示す視覚アンカー（装飾では
   ない） */
.intro-block-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-primary);
}

.intro-block-label-bar {
  flex-shrink: 0;
  width: 2px;
  height: 1.7em;
  background: var(--color-primary);
}

/* 「30年以上お付き合いのある設計会社3社に〜」＝主役は数字では
   なく意味。通常の本文よりもゆったり読める落ち着いたサイズ・
   太さに抑え、単語の一部だけを巨大化しない */
.intro-block-desc {
  margin: 0;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.95;
}

/* AとBの間の、情報を整理するための静かな区切り。存在感を
   出しすぎないようopacityを抑える */
.intro-block-divider {
  width: 80%;
  height: 1px;
  background: var(--color-line);
  opacity: 0.7;
}

.js .intro-block[data-reveal] {
  transition-delay: 0s;
}

.js .intro-block--second[data-reveal] {
  transition-delay: 0.12s;
}

/* 左側＝このセクションの主役となる見出し。巨大なヒーロー
   テキストにはせず、Editorialな静けさを保ったまま少し存在感を
   強める（旧: clamp(1.4rem,2.4vw,1.9rem) weight600） */
.intro-lead {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  line-height: 1.65;
  margin: 0 0 2rem;
}

.intro-question {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0 0 2.4rem;
}

.intro-body {
  font-size: 1.2rem;
  color: var(--color-text-dim);
  margin: 0 0 2.4rem;
}

/* 「そこには〜」の直前に置く短いアクセントライン。INTROから
   VOICEへつなぐ「余韻」の合図で、カラム幅いっぱいには引かない */
.intro-closing-accent {
  width: 48px;
  height: 1px;
  margin: 0 0 1.6rem;
  background: var(--color-primary);
  opacity: 0.5;
}

.intro-closing {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
}

/* =========================================================
   4. VOICE（★☆☆☆☆）
   誌面のようなエディトリアルレイアウト。カードUIにしない
========================================================= */
.voice-section {
  padding: 4vh 0;
}

.voice-page {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 14vh var(--section-pad-x);
  overflow: hidden;
}

.voice-page + .voice-page {
  border-top: 1px solid var(--color-line);
}

.voice-page-inner {
  position: relative;
  z-index: 1;
  max-width: 660px;
}

.voice-page--alt .voice-page-inner {
  margin-left: auto;
  margin-right: 6%;
}

/* 番号＝Quoteと並ぶ視覚的な主役。背景装飾ではなく、
   本文の読み順に含まれる大きな章番号として扱う。
   一瞬アウトラインで現れ、すぐ濃いTSR Greenで塗りつぶされる */
.voice-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(4.5rem, 9vw, 7rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-primary);
  margin: 0 0 1.6rem;
  user-select: none;
}

.voice-page--alt .voice-num {
  text-align: right;
}

.js .voice-num {
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease),
    color 0.4s var(--ease) 0.25s, -webkit-text-stroke-color 0.4s var(--ease);
}

.js .voice-num.is-visible {
  color: var(--color-primary);
  -webkit-text-stroke-color: var(--color-primary);
}

.voice-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 2.2rem;
}

.voice-meta-label {
  font-size: 1.0rem;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  font-weight: 600;
}

.voice-meta-sub {
  font-size: 0.85rem;
  color: var(--color-text-dim);
}

.voice-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 2rem;
}

.voice-subhead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0 0 1.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--color-line);
}

.voice-body {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin: 0 0 2.4rem;
}

.voice-body p {
  font-size: 1.1rem;
  color: var(--color-text-dim);
  line-height: 1.95;
  margin: 0;
}

.voice-lead-in {
  font-size: 1.1rem;
  color: var(--color-text-dim);
  margin: 0 0 0.6rem;
}

.voice-quote-recall {
  margin: 0 0 1.6rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--color-primary-soft);
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 600;
  line-height: 1.6;
  font-style: normal;
}

.voice-closing {
  font-size: 1.1rem;
  color: var(--color-text-dim);
  line-height: 1.95;
  margin: 0 0 0.6rem;
}

.voice-closing:last-of-type {
  margin-bottom: 2.6rem;
}

.voice-symbol {
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--color-line);
  text-align: right;
}

.voice-symbol-lead {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--color-text-dim);
}

.voice-symbol-word {
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

/* VOICE01専用：「左＝文章、右＝人物」の誌面レイアウト。
   主役はあくまで01／Quote／本文で、イラストはその右側で
   静かに存在感を添える構成。VOICE01のみ通常の.voice-pageより
   広い誌面幅を持たせ、文章列（左）とイラスト（右）が
   ひとつの見開きとして中央に収まるようにする。
   VOICE02/03の.voice-page（max-width: var(--content-max)）には
   影響しない */
.voice-page[data-voice="1"] {
  overflow: visible;
  /* 誌面幅・文章列幅・隙間を連動するカスタムプロパティにまとめ、
     イラスト幅は「実際に残っている余白ぶんだけ」をcalcで直接算出する
     （= 文章列と重なることが構造上あり得ない）。1920pxを起点に人物の
     存在感を大きく取りつつ、1440/1366pxのような狭いPC幅でも
     自動的に縮み、外側マージンが0に潰れないようにする */
  --voice01-page-w: min(1780px, 94vw);
  --voice01-text-w: clamp(480px, 42vw, 680px);
  --voice01-gap: clamp(3rem, 4vw, 5rem);
  --voice01-avail: calc(var(--voice01-page-w) - 2 * var(--section-pad-x));
  --voice01-illo-w: min(
    760px,
    calc(var(--voice01-avail) - var(--voice01-text-w) - var(--voice01-gap) - 20px)
  );
  max-width: var(--voice01-page-w);
}

.voice-page[data-voice="1"] .voice-page-inner {
  max-width: var(--voice01-text-w);
}

.voice-illustration {
  position: absolute;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}

.voice-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* voice01.png（1536x1024に統一後）は、VOICE02/03と同じ「cover＋
   クロップ用aspect-ratio＋object-position＋mask」の考え方に統一。
   人物（顔・頭部）は画像中央よりやや右（x方向55〜75%付近）、
   左手・右手・図面を含む内容物全体はx方向10〜80%程度に広がる構図。
   figureの縦横比をVOICE03と同じ1100:1024に絞り、object-positionで
   内容物のbounding boxがクロップ窓に収まる位置（32% top）を指定。
   mask-imageの中心も顔クラスタの位置に合わせて70%/35%付近へ。
   以前の1672:941（旧画像比率）＋object-fit:contain＋transform:scale
   は、画像サイズがVOICE02/03と揃ったことで不要になったため削除 */
.voice-illustration--01 {
  top: 22%;
  left: calc(var(--section-pad-x) + var(--voice01-text-w) + var(--voice01-gap));
  width: var(--voice01-illo-w);
  aspect-ratio: 1150 / 1024;
  overflow: hidden;
}

.voice-illustration--01 img {
  object-position: 31% top;
  mask-image: radial-gradient(ellipse 92% 94% at 72% 30%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 92% 94% at 72% 30%, #000 60%, transparent 100%);
}

.js .voice-illustration {
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
  transition-delay: 0.15s;
  transform: translateY(18px);
}

.js .voice-illustration.is-visible {
  opacity: 0.85;
}

/* VOICE02専用：VOICE01と対になる「人物＝左、文章＝右」の誌面。
   VOICE01（[data-voice="1"]）の考え方をそのまま鏡合わせにしたもので、
   誌面幅・文章列幅・隙間の値はVOICE01と揃えている。VOICE01自体の
   CSSは一切変更していない。VOICE03の.voice-page（max-width:
   var(--content-max)）にも影響しない */
.voice-page[data-voice="2"] {
  overflow: visible;
  --voice02-page-w: min(1780px, 94vw);
  --voice02-text-w: clamp(480px, 42vw, 680px);
  --voice02-gap: clamp(3rem, 4vw, 5rem);
  --voice02-avail: calc(var(--voice02-page-w) - 2 * var(--section-pad-x));
  --voice02-illo-w: min(
    760px,
    calc(var(--voice02-avail) - var(--voice02-text-w) - var(--voice02-gap) - 20px)
  );
  max-width: var(--voice02-page-w);
}

/* 文章列は右側。既存の.voice-page--alt（margin-right:6%）は
   通常幅の.voice-pageを前提にした値なので、拡張した誌面幅の中では
   0にリセットし、右端の余白は.voice-pageのpadding-rightに委ねる */
.voice-page[data-voice="2"] .voice-page-inner {
  max-width: var(--voice02-text-w);
  margin-right: 0;
}

/* voice02.png は横1536x1024pxで、人物・机・図面は画像左側
   （おおよそ0〜1050px）に集中し、右側は白い余白。VOICE01と同じ
   考え方で、figureの縦横比を「人物が写っている範囲」（1050:1024）
   に絞ってcropし、overflow:hiddenで箱いっぱいに大きく見せる。
   voice02.pngはvoice01.pngと異なりアルファ抜きのない不透明画像
   （背景は不透明の白）だが、mask-imageで輪郭を淡く溶かすことで
   同様に「白背景へ自然に消えていく」見え方にしている */
.voice-illustration--02 {
  top: 22%;
  right: calc(var(--section-pad-x) + var(--voice02-text-w) + var(--voice02-gap));
  width: var(--voice02-illo-w);
  aspect-ratio: 1050 / 1024;
  overflow: hidden;
}

.voice-illustration--02 img {
  object-position: left top;
  mask-image: radial-gradient(ellipse 92% 94% at 42% 42%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 92% 94% at 42% 42%, #000 60%, transparent 100%);
}

/* VOICE03専用：VOICE01と同系統の「文章＝左、人物＝右」の誌面。
   VOICE01（[data-voice="1"]）の考え方をそのまま流用したもので、
   誌面幅・文章列幅・隙間の値はVOICE01/02と揃えている。VOICE01/02
   自体のCSSは一切変更していない */
.voice-page[data-voice="3"] {
  overflow: visible;
  --voice03-page-w: min(1780px, 94vw);
  --voice03-text-w: clamp(480px, 42vw, 680px);
  --voice03-gap: clamp(3rem, 4vw, 5rem);
  --voice03-avail: calc(var(--voice03-page-w) - 2 * var(--section-pad-x));
  --voice03-illo-w: min(
    760px,
    calc(var(--voice03-avail) - var(--voice03-text-w) - var(--voice03-gap) - 20px)
  );
  max-width: var(--voice03-page-w);
}

.voice-page[data-voice="3"] .voice-page-inner {
  max-width: var(--voice03-text-w);
}

/* voice03.png は横1536x1024pxで、VOICE01/02とは構図が逆になっており、
   人物はキャンバスの中央〜やや右（顔はおおよそx:800〜1050）、
   左側にノートPCと書類が置かれている。figureの縦横比はVOICE01/02と
   近い比率（約1100:1024）に絞ってcropしつつ、object-positionの
   横方向を右寄り（80%）にすることで、人物の顔・手元の資料・
   奥の観葉植物を含む範囲を切り出し、ノートPCの左端だけを
   トリミングする。値を人物が写っている範囲そのものから逆算して
   決めている点はVOICE01/02と同じ考え方 */
.voice-illustration--03 {
  top: 22%;
  left: calc(var(--section-pad-x) + var(--voice03-text-w) + var(--voice03-gap));
  width: var(--voice03-illo-w);
  aspect-ratio: 1100 / 1024;
  overflow: hidden;
}

.voice-illustration--03 img {
  object-position: 80% top;
  /* 人物の構図が中央寄りのため、マスクの中心もVOICE01/02より
     中央寄りにして顔・資料・手元を淡く包み込むように調整 */
  mask-image: radial-gradient(ellipse 92% 94% at 50% 38%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 92% 94% at 50% 38%, #000 60%, transparent 100%);
}

/* =========================================================
   5/6. CONNECTION → VALUE → 技術パートナー。
   「構造を図解する」のではなく、文章を読み進めることで
   読者自身がTSRの姿にたどり着く、文章型のクライマックス
   （GSAP + ScrollTrigger 1個・1 pin）

   SCENE1 問い（東京ソイルリサーチは、皆さんにとってどんな存在か）
   SCENE2 3人の声全体から見えた3つの人間的な言葉（1つずつ主役交代）
   SCENE3 共通点への気づき
   SCENE4 結論｜「ただ、答えを届けるのではなく、ともに考え、その先の
   判断を支えていく、技術パートナー。」を一つの文章・一つの画面として
   表示する（「技術パートナー。」だけを別SCENEにしない）★★★★★
   SCENE5 静かな答え合わせ（それが〜姿でした。）※SCENE4と同じ完成画の中 ★★☆☆☆
   SCENE6 余韻・裏付け｜技術や知識だけではなかった、というつながりの
   振り返り。結論を導く説明ではなく、結論を読んだあとの余韻
   （技術や知識だけでは★★☆☆☆／困ったときに頼れること★★★☆☆／
   そんなつながりが★★☆☆☆）
   （pinの外）Deep Green→白への短い余韻を経て、次章「これからに
   期待すること」へ接続。文章は持たない
========================================================= */
.climax-section {
  padding: 0;
}

/* --- ひとつの連続した舞台。SCENE1〜7のすべてのレイヤーが
     この中に絶対配置で重なり、GSAPの1本のタイムラインで
     制御される。線・矢印・ノード・カードは一切使用しない --- */
.climax-pin {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg);
}

.climax-scene-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.climax-landscape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 240%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.1;
}

/* 地層＝長い時間・60年の積み重なり・お客様とのつながりの象徴。
   3価値との1対1対応は持たせない。文字ラベルも付けない。
   SCENE1-3は不在／SCENE3終盤からごく淡く気配が出始め、
   SCENE4-6で徐々に明確な存在になり、SCENE7で背景の質感として定着する */
.climax-strata {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.climax-band {
  transform-origin: bottom center;
  opacity: 0;
}

.climax-band:nth-of-type(1) {
  fill: var(--color-secondary);
}

.climax-band:nth-of-type(2) {
  fill: var(--color-primary-soft);
}

.climax-band:nth-of-type(3) {
  fill: var(--color-primary);
}

/* --- 「技術パートナー。」を静かに補強する背景モチーフ（信頼・協働・
     ともに考える関係・長い付き合いの象徴）。主役はあくまで結論の
     文章で、握手はSCENE4で気づく程度のごく薄い背景として扱う。
     地層(z-index:1)の上、focus-layer(z-index:8)の下に配置し、
     不透明度はGSAP側で0→0.1〜0.2程度に制御する（JSここでは
     アニメーションを起こさない。派手なzoom/回転/パララックスは
     一切使用しない） --- */
.climax-handshake {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.climax-handshake img {
  width: min(1400px, 82vw);
  height: auto;
  opacity: 0;
  transform: scale(1.02);
  /* 写真的な肌色・スーツの色味を消し、背景のDeep Greenの濃淡として
     溶け込ませる（カラー写真感・広告写真感を避ける） */
  mix-blend-mode: luminosity;
  filter: saturate(0.22) brightness(0.92);
  /* 上下端をさらに淡く溶かし、地層・背景へ自然につながるようにする
     （左右は画像自体がすでに透明にフェードしているため強くかけない） */
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 22%,
    #000 78%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 22%,
    #000 78%,
    transparent 100%
  );
}

/* --- 各SCENEの文章レイヤーに共通する基本形。中央寄せ・fade＋ごく
     小さなY移動のみで構成し、派手なzoom・回転は使用しない --- */
.climax-question,
.climax-common,
.climax-bond {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  margin: 0;
  padding: 0 var(--section-pad-x);
  text-align: center;
  pointer-events: none;
}

.climax-question { z-index: 2; }
.climax-voices { z-index: 3; }
.climax-common { z-index: 4; }
.climax-bond { z-index: 11; }

/* --- SCENE1｜問い。VOICE01〜03から後半へ切り替わる起点。
     白背景・地層なしで、静かに問いだけが立ち上がる --- */
.climax-question-line {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.7;
  color: var(--color-text);
}

.js .climax-question-line {
  opacity: 0;
  transform: translateY(14px);
}

/* --- SCENE2｜3人の声全体から見えた3つの人間的な言葉。
     一覧にせず、左→右→中央という視線移動で1つずつ主役にする。
     装飾（面・図形）は使わず、文字と余白・位置・動きだけで成立させる --- */
.climax-voices {
  position: absolute;
  inset: 10vh var(--section-pad-x);
  pointer-events: none;
}

.climax-voice {
  position: absolute;
  width: max-content;
  max-width: none;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-text);
  white-space: nowrap;
}

.js .climax-voice {
  opacity: 0;
  transform: translateY(-26px);
}

.climax-voice--1 {
  top: 42%;
  left: 6%;
  text-align: left;
}

.climax-voice--2 {
  top: 30%;
  right: 6%;
  text-align: right;
}

.climax-voice--3 {
  top: 50%;
  left: 50%;
  text-align: center;
}

/* --- SCENE3｜共通点への気づき。3文が積み重なるように現れ、
     最後の一文だけ明確に大きくする --- */
.climax-common-line {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-text);
}

.js .climax-common-line {
  opacity: 0;
  transform: translateY(14px);
}

.climax-common-line--emph {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
}

/* --- SCENE6｜余韻・裏付け。技術や知識だけではなかった、という
     つながりの振り返り。結論を導く説明ではなく、結論を読んだあとの
     静かな余韻。2文目だけ前後より少し強いタイポグラフィにする
     （それでも大見出し・クライマックスには見せない） --- */
.climax-bond-line {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 500;
  line-height: 1.9;
  /* このSCENEは常にDeep Green背景の上に現れるため、白系で固定する。
     視覚的な強弱はcolorではなくGSAP側のopacityで作る */
  color: var(--color-text-invert);
}

.js .climax-bond-line {
  opacity: 0;
  transform: translateY(14px);
}

/* 結論（★★★★★）ほど強くしない。前後の文よりは少し強いが、
   大見出し・ブランドコピーには見せない階層に収める */
.climax-bond-line--strong {
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  font-weight: 700;
}

/* --- 専用オーバーレイ：地層・背景を一段奥へ沈ませる面。
     単色の幕ではなく、景色自体の延長として淡いミント→深緑の
     グラデーションを持たせ、質感を完全には消さない --- */
.climax-focus-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: linear-gradient(
    180deg,
    rgba(207, 224, 211, 0.12) 0%,
    rgba(22, 48, 42, 0.92) 100%
  );
  opacity: 0;
  pointer-events: none;
}

/* --- SCENE4｜結論。「ただ、答えを届けるのではなく、ともに考え、
     その先の判断を支えていく、技術パートナー。」を、文法上・視覚上
     ひとつの文章として表示する。「技術パートナー。」だけを別SCENEに
     しないため、上2行とlabelを同じコンテナに収め、行間も詰めて
     「一文の続き」として読ませる。視線階層：
     1位 技術パートナー。／2位 上2行（前置き）／3位 答え合わせの
     一文／4位 背景の地層。
     「技術パートナー。」を必ず横幅いっぱいの一行で見せるため、
     640pxの上限は撤廃し、section-padding分だけを左右に残す --- */
.climax-conclusion {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 var(--section-pad-x);
  text-align: center;
  pointer-events: none;
}

/* 「ただ、答えを届けるのではなく、」「ともに考え、その先の判断を
   支えていく、」＝結論の前置きとなる2行。技術パートナー。より
   明確に小さく、PCでは必ず一行で表示する。2行の間隔は詰め、
   「同じ文章の続き」に見えるようにする */
.climax-conclusion-line {
  width: 100%;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 600;
  color: var(--color-text-invert);
  line-height: 1.6;
  white-space: nowrap;
  margin: 0 0 0.5rem;
  opacity: 0;
}

.climax-conclusion-line:last-of-type {
  margin-bottom: 1.2rem;
}

.climax-label {
  width: 100%;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-invert);
  white-space: nowrap;
  margin: 0;
  opacity: 0;
  transform: scale(0.96);
}

/* --- SCENE5｜答え合わせ。「技術パートナー。」と同時には出さず、
     結論が完成したあと少しホールドしてから静かに現れる。
     結論の説明ではなく、3人の声との接続を確認する一文。
     白系・高opacityで、Deep Green背景でも確実に読める強さにする --- */
.climax-echo {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 var(--section-pad-x) 14vh;
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 500;
  line-height: 1.9;
  color: var(--color-text-invert);
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

/* --- pinの外＝通常スクロール。文章は持たない、Deep Green→白への
     短い余韻だけの帯。CSSのグラデーションのみで戻し、新たな
     ScrollTrigger／JSアニメーションは追加しない --- */
.climax-outro {
  background: linear-gradient(180deg, var(--color-bg-value) 0%, var(--color-bg) 70%);
  padding: 10vh 0 6vh;
}

/* --- .climax-static｜prefers-reduced-motion、またはGSAP/ScrollTrigger
     読み込み失敗時のフォールバック。script.js側で<html>に付与される。
     pin・絶対配置レイヤーをすべて解除し、SCENE1〜6の意味（問い／
     3つの人間的な言葉／共通点への気づき／結論／答え合わせ／
     余韻・裏付け）をDOM順＝通常の縦スクロールで欠落なく・
     重ならずに読ませる --- */
.climax-static .climax-pin {
  position: static;
  height: auto;
  overflow: visible;
  padding: 14vh var(--section-pad-x) 16vh;
  background: var(--color-bg-value);
}

.climax-static .climax-scene-bg,
.climax-static .climax-strata,
.climax-static .climax-focus-layer,
.climax-static .climax-handshake {
  display: none;
}

.climax-static .climax-question,
.climax-static .climax-voices,
.climax-static .climax-common,
.climax-static .climax-bond,
.climax-static .climax-conclusion {
  position: static;
  inset: auto;
  z-index: auto;
  gap: 0.5em;
  max-width: 680px;
  margin: 0 auto 8vh;
  padding: 0;
}

.climax-static .climax-question-line,
.climax-static .climax-common-line,
.climax-static .climax-bond-line {
  opacity: 1 !important;
  transform: none !important;
  color: var(--color-text-invert);
}

.climax-static .climax-voice {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  max-width: 680px;
  margin: 0 0 3vh;
  text-align: center !important;
  color: var(--color-text-invert);
}

.climax-static .climax-conclusion-line,
.climax-static .climax-label,
.climax-static .climax-echo {
  opacity: 1 !important;
  transform: none !important;
  position: static;
}

.climax-static .climax-conclusion-line,
.climax-static .climax-label {
  white-space: normal;
}

.climax-static .climax-echo {
  display: block;
  max-width: 680px;
  margin: 0 auto 8vh;
  padding: 0;
}

/* =========================================================
   7. OUR RESPONSE（★☆☆☆☆）
   導入部分（response-intro-grid）は「EXPECTATIONS編の章扉」。
   直前のCONNECTION→VALUE（Deep Greenのクライマックス）から
   白背景へ戻る呼吸を作るため、上余白を広めに取り、地層の
   余韻をセクション上端だけにごく淡く引き継ぐ
========================================================= */
.response-section {
  position: relative;
  overflow: hidden;
  /* climax-outro（10vh+6vh）との余白の二重化を軽減するため、
     26vh→19vhへ調整（監査結果に基づく）。bottom paddingは
     THANK YOU→ENDINGの余韻として今回は変更しない */
  padding: 19vh var(--section-pad-x) 22vh;
}

/* 直前セクションの「地層・時間・積み重なり」という抽象的な
   世界観だけを引き継ぐ余韻。緑の帯や境界線に見せないよう、
   opacityをかなり低く抑え、下端に向けてさらに透明へ溶ける
   マスクを重ねる。握手・人物イラストはここでは使用しない */
.response-strata {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: min(38vh, 340px);
  opacity: 0.07;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  pointer-events: none;
}

.response-strata-band {
  fill: var(--color-primary-soft);
}

.response-strata-band--1 {
  fill: var(--color-secondary);
}

/* 導入＝章扉。左＝EXPECTATIONS（案内役の小さな英字ラベル）＋
   章タイトル本体、右＝この章で何を聞いたかのリード・本文。
   中央寄せの説明文ではなく、左右で「視点の切り替わり」を
   感じさせる。カードUI・囲み枠・背景色付きボックス・大きな
   数字は使用しない */
.response-intro-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(200px, 34%) 1fr;
  align-items: start;
  gap: 5vw;
  max-width: var(--content-max);
  margin: 0 auto 7vh;
}

.response-intro-preface {
  border-right: 1px solid var(--color-line);
  padding-right: 2rem;
}

/* 章タイトル本体。英語ラベルは使用せず、日本語タイトルのみで
   章の入口として成立させる。VOICEのQuoteほどは大きくせず、
   それでも明確に「章タイトル」と分かるサイズに留める */
.response-heading {
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.5;
}

.response-intro {
  max-width: 620px;
  text-align: left;
}

.response-intro-lead {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.9;
  margin: 0 0 1.4rem;
}

.response-intro-body {
  font-size: 0.98rem;
  color: var(--color-text-dim);
  line-height: 1.95;
  margin: 0;
}

/* 「これからに期待すること」の3項目は一覧表示せず、
   ひとつずつ縦スクロールで体験させる。カードUIは使用しない */
.future-chapters {
  margin-bottom: 14vh;
}

.future-chapter-outer {
  position: relative;
}

/* セクションが切り替わるたびに、ごくわずかにトーンが変わる
   （動きではなく、静止した「層」の切り替えとして） */
.future-chapter-outer--alt {
  background: var(--color-bg-soft);
}

/* 文章（番号＋タイトル＋本文をひとまとめにした.future-chapter-text）
   とイラストの2カラム。VOICE01/02/03と同じ「誌面幅を広げてから
   左右に振る」考え方だが、幅・余白の数値はfuture-chapters専用に
   調整している（VOICEの完全コピーにはしない）。01/03＝文章左・
   イラスト右、02＝イラスト左・文章右で、左右交互のリズムを作る。
   DOM順は3項目とも文章→イラストで統一し、02のみCSSのorderで
   見た目だけを反転する */
.future-chapter {
  display: grid;
  grid-template-columns: minmax(300px, 440px) 1fr;
  align-items: center;
  gap: clamp(2.5rem, 4vw, 5rem);
  min-height: 76vh;
  max-width: min(1780px, 94vw);
  margin: 0 auto;
  padding: 6vh var(--section-pad-x);
}

.future-chapter--alt {
  grid-template-columns: 1fr minmax(300px, 440px);
}

.future-chapter--alt .future-chapter-text {
  order: 2;
}

.future-chapter--alt .future-chapter-illustration {
  order: 1;
}

/* 未来へ進む章番号。VOICEの.voice-numと同じ「アウトライン→TSR
   Green塗りつぶし」の言語だが、イラストが視覚的な主役を担うため、
   独立した大きな列には置かず、タイトルの直前に添える控えめな
   目印として扱う（サイズはVOICEの章番号のおよそ75%） */
.future-chapter-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(3.4rem, 6.5vw, 6.2rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-primary);
  margin: 0 0 1.2rem;
  user-select: none;
}

.js .future-chapter-num {
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease),
    color 0.4s var(--ease) 0.25s, -webkit-text-stroke-color 0.4s var(--ease);
}

.js .future-chapter-num.is-visible {
  color: var(--color-primary);
  -webkit-text-stroke-color: var(--color-primary);
}

.future-chapter-title {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 1.6rem;
}

.future-chapter-desc {
  font-size: 1.3rem;
  color: var(--color-text-dim);
  line-height: 1.95;
  margin: 0;
}

/* イラスト＝「未来の情景」が主役。VOICEのような人物クロップは
   行わず、縦横比そのまま（1536:1024）で試験室・現場・人々の
   関係性が広く見えるようにする。カードUI・枠線・角丸・影は
   使用せず、mask-imageの楕円グラデーションで四辺を白背景へ
   自然に溶かす */
.future-chapter-illustration {
  width: 100%;
  max-width: 740px;
  aspect-ratio: 1536 / 1024;
  margin: 0;
  justify-self: center;
}

.future-chapter-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mask-image: radial-gradient(ellipse 90% 88% at 50% 50%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 88% at 50% 50%, #000 60%, transparent 100%);
}

.js .future-chapter-illustration {
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
  transform: translateY(18px);
}

/* 締めの誌面。見出しは中央、本文ブロックも中央に置くが、
   本文そのものは左揃えの「読む文章」として扱う（一般的なWebの
   本文欄ではなく、周年誌の最終ページのような静かな誌面感） */
.response-statement {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

/* 「ここは締め・感謝の章である」ことを静かに示す案内役。
   EXPECTATIONSの.response-intro-eyebrowと同じ言語（IBM Plex
   Mono・letter-spacing広め・Primary Soft）だが、見出しより
   確実に控えめに留める */
.response-statement-eyebrow {
  margin: 0 0 1.4rem;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--color-primary-soft);
}

.response-headline {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  margin: 0 0 4.5rem;
}

.response-statement-body {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.response-body {
  font-size: 1rem;
  color: var(--color-text-dim);
  line-height: 2;
  margin: 0 0 2.4rem;
}

.response-body:last-child {
  margin-bottom: 0;
}

/* 感謝の一文＝このセクションで最も重要な文章。太字化・装飾では
   なく、文字色・サイズ・行間のわずかな差だけで一段強く見せる。
   直後に区切り線が続くため、margin-bottomは通常の段落よりやや
   控えめにし、線の余白と足し合わせて丁度よい間隔にする */
.response-body--thanks {
  font-size: 1.1rem;
  color: var(--color-text);
  line-height: 2.05;
  margin-bottom: 1.8rem;
}

/* 「感謝」から「振り返り」への、装飾ではなく静かな区切り。
   全幅ではなく短い線に留め、罫線というより「間（ま）」として
   機能させる */
.response-divider {
  width: 48px;
  height: 1px;
  margin: 0 auto 2.4rem;
  background: var(--color-line);
}

/* 「これから」＝感謝・振り返りのあとに続く余韻の段落。
   ひと呼吸置いてから現れるよう、通常の段落間よりさらに
   余白を足す */
.response-body--closing {
  margin-top: 1rem;
}

.js .response-statement-body .response-body:nth-of-type(2) {
  transition-delay: 0.12s;
}

.js .response-statement-body .response-body:nth-of-type(3) {
  transition-delay: 0.24s;
}

/* 締めの下部だけに、地層の余韻をもう一度ごく淡く回収する。
   主役にはせず、「よく見ると地層がある」程度に留める。
   ENDINGの地層（.ending-strata）と同じ考え方で呼応させつつ、
   opacityはさらに低く抑えて役割の違いを保つ */
.response-closing-strata {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: min(30vh, 260px);
  opacity: 0.08;
  mask-image: linear-gradient(to top, #000 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 90%);
  pointer-events: none;
}

.response-closing-strata-band {
  fill: var(--color-primary-soft);
}

.response-closing-strata-band--2 {
  fill: var(--color-secondary);
}

/* =========================================================
   8. ENDING（★☆☆☆☆：静止・余白のみ）
========================================================= */
.ending-section {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* HEROの地層モチーフに、控えめに呼応させる。
   ENDINGでは「画面の外へ続いていく」層として、下端を画面の外まで伸ばす */
.ending-strata {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.4;
}

.ending-strata-band {
  fill: var(--color-secondary);
}

.ending-inner {
  position: relative;
  z-index: 1;
}

/* 会社としての主張ではなく、静かな署名。HEROのeyebrowと
   呼応する小さな周年表記のみを残す */
.ending-year {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 2rem;
}

.ending-brand {
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  color: var(--color-text);
  margin: 0;
}

.ending-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, var(--color-primary-soft), transparent);
  margin: 3rem auto 0;
}

/* =========================================================
   9. 通常サイトへの導線
========================================================= */
.site-return-nav {
  display: flex;
  justify-content: center;
  gap: 3rem;
  padding: 6vh var(--section-pad-x) 8vh;
  border-top: 1px solid var(--color-line);
}

.site-return-link {
  color: var(--color-text-dim);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  transition: color 0.3s var(--ease);
}

.site-return-link:hover,
.site-return-link:focus-visible {
  color: var(--color-primary);
}

/* =========================================================
   10. Responsive（簡易。スマホ版は別途最適化予定）
========================================================= */
@media (max-width: 900px) {
  /* レスポンシブ フェーズ1.5｜日本語の改行改善＋overflow修正
     文章そのものは変更せず、モバイル限定でfont-size/letter-spacing/
     white-spaceのみ調整する。優先順位は「1.幅→2.letter-spacing→
     3.font-sizeの軽微な調整→4.改行制御」だが、.climax-conclusion-line/
     .climax-label は元々white-space:nowrapで「必ず一行」という
     PC版の設計上のハードルが高いため、overflow修正（最優先）を
     確実に成立させることを優先する */
  .hero-title {
    font-size: clamp(1.85rem, 8.5vw, 2.35rem);
    letter-spacing: 0.02em;
  }

  .voice-quote {
    font-size: clamp(1.5rem, 6.6vw, 1.9rem);
    letter-spacing: -0.01em;
  }

  /* SCENE3｜共通点への気づき。3文とも white-space:normal のまま、
     わずかな縮小で「1文字だけ次の行に送られる」不自然な改行を解消する。
     emphの文（一番長い）は、2行折返しでは綺麗な区切りが作れないため
     （句読点を含まない一続きの文）、1行に収まる大きさまで縮小して
     折返し自体を避ける方針にした */
  .climax-common-line {
    font-size: clamp(1.2rem, 5vw, 1.3rem);
    letter-spacing: -0.005em;
  }

  .climax-common-line--emph {
    font-size: clamp(1.05rem, 4.7vw, 1.3rem);
  }

  /* SCENE4｜結論。.climax-conclusion-line はPC版のwhite-space:nowrap
     のままだと狭い画面で右側がviewportからはみ出すため、モバイル限定で
     折返しを許可する（保険）。ただし前置きの2行も句読点を含まない
     一続きの文のため、折返すと区切りが不自然になりやすい。font-sizeを
     1行に収まる大きさまで下げることで、折返し自体を避ける（視線階層は
     「技術パートナー。」より下のため、この程度の縮小は許容範囲）。
     .climax-label（技術パートナー。）は「必ず一行」という設計意図を
     尊重してwhite-space:nowrapを維持し、実測でoverflowしない上限まで
     font-sizeを保ち、クライマックスとしての強さをできるだけ残す */
  .climax-conclusion-line {
    font-size: clamp(0.9rem, 4.1vw, 1.5rem);
    letter-spacing: -0.005em;
    white-space: normal;
  }

  .climax-label {
    font-size: clamp(2.4rem, 10.8vw, 2.9rem);
    letter-spacing: 0.02em;
  }

  /* レスポンシブ フェーズ2｜ページ全体の日本語組版監査で見つかった
     残りの不自然な改行を修正する。文章・DOM・PC版は無変更。
     各font-size/letter-spacingは実測（1px刻みで「1行に収まる／
     収まらない」境界を検証）に基づく。「すべて1行に収める」ことが
     目的ではなく、単語・助詞の途中で折れる不自然な改行を避けることが
     目的のため、意味のまとまりで折り返る箇所はそのまま残している */

  /* SCENE2｜.climax-voice--3は絶対配置（left:50%のみ・right未指定）の
     shrink-to-fit幅計算が「コンテナ幅の半分」に縮小されてしまう
     構造的な問題があり、最大5行に分裂していた。width:max-contentで
     本来のコンテンツ幅に戻す（他のvoice1/2は同じ問題が出ないため
     変更していない） */
  .climax-voice--3 {
    width: max-content;
  }

  .climax-voice {
    font-size: clamp(1.75rem, 4.2vw, 3.4rem);
  }

  .climax-bond-line {
    font-size: clamp(0.85rem, 1.8vw, 1.4rem);
  }

  .climax-bond-line--strong {
    font-size: clamp(1.1rem, 2.3vw, 1.75rem);
  }

  .intro-question {
    font-size: clamp(0.85rem, 3.9vw, 1.2rem);
    letter-spacing: -0.015em;
  }

  .voice-subhead {
    font-size: clamp(0.75rem, 3.3vw, 1.05rem);
    letter-spacing: -0.01em;
  }

  .voice-quote-recall {
    font-size: clamp(0.78rem, 3.4vw, 1.15rem);
    letter-spacing: -0.015em;
  }

  .response-intro-lead {
    font-size: clamp(0.65rem, 2.8vw, 1.1rem);
    letter-spacing: -0.015em;
  }

  .response-body {
    font-size: clamp(0.7rem, 3.6vw, 1rem);
    letter-spacing: -0.01em;
  }

  .response-body--thanks {
    font-size: clamp(0.65rem, 3vw, 1.1rem);
    letter-spacing: -0.01em;
  }

  .response-body--closing {
    font-size: clamp(0.6rem, 2.8vw, 1rem);
    letter-spacing: -0.01em;
  }

  .future-chapter-desc {
    font-size: clamp(0.72rem, 3.4vw, 1rem);
    letter-spacing: -0.005em;
  }

  .intro-grid {
    grid-template-columns: 1fr;
    gap: 4vh;
  }

  .intro-stats {
    flex-direction: column;
    gap: 2rem;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--color-line);
    padding-top: 1.6rem;
  }

  .intro-block-divider {
    align-self: flex-start;
  }

  .voice-page--alt .voice-page-inner {
    margin-right: 0;
  }

  /* VOICE01〜03共通の簡易fallback：左右2カラムは無理に維持せず、
     本文と同じ1カラムの流れに戻す。読む順序は下記
     「レスポンシブ フェーズ1｜モバイル読み順」で並べ替える */
  .voice-page[data-voice="1"] .voice-page-inner,
  .voice-page[data-voice="2"] .voice-page-inner,
  .voice-page[data-voice="3"] .voice-page-inner {
    max-width: none;
  }

  .voice-illustration--01,
  .voice-illustration--02,
  .voice-illustration--03 {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    margin: 0 0 2.4rem;
  }

  /* VOICE01のfallback比率もPC版と同じくクロップ用比率（1100:1024）
     に統一（voice01.pngが1536x1024に統一され、VOICE03と同じ
     cover＋クロップの考え方に揃えたため）。
     VOICE02（1050:1024）・VOICE03（1100:1024）は据え置き */
  .voice-illustration--01 {
    aspect-ratio: 1150 / 1024;
  }

  .voice-illustration--02 {
    aspect-ratio: 1050 / 1024;
  }

  .voice-illustration--03 {
    aspect-ratio: 1100 / 1024;
  }

  /* ---------------------------------------------------
     レスポンシブ フェーズ1｜モバイル読み順
     PC版のDOM順（figure→voice-page-inner）は変更せず、
     .voice-pageをflex化・.voice-page-innerをdisplay:contentsに
     することで、内部の子要素とfigureを同じflexコンテナ内の
     並列アイテムとして扱い、orderだけで視覚順を並べ替える。
     このページの主役は「声」なので、番号→メタ→大きな引用を
     先に読ませ、イラストはその後（引用の余韻を補う位置）に置く。
     --------------------------------------------------- */
  .voice-page {
    display: flex;
    flex-direction: column;
  }

  .voice-page-inner {
    display: contents;
  }

  .voice-num {
    order: 1;
  }

  .voice-meta {
    order: 2;
  }

  .voice-quote {
    order: 3;
    margin-bottom: 2.6rem;
  }

  .voice-illustration {
    order: 4;
  }

  .voice-subhead {
    order: 5;
  }

  .voice-body {
    order: 6;
  }

  .voice-lead-in {
    order: 7;
  }

  .voice-quote-recall {
    order: 8;
  }

  .voice-closing {
    order: 9;
  }

  /* future-chapters：左右2カラムを維持せず1カラムへ。02のorder
     反転も解除し、3項目とも「番号→タイトル→本文→イラスト」で
     統一する（02だけイラストが先に出ないようにする） */
  .future-chapter {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 8vh var(--section-pad-x);
    gap: 2.4rem;
  }

  .future-chapter--alt .future-chapter-text,
  .future-chapter--alt .future-chapter-illustration {
    order: initial;
  }

  .future-chapter-num {
    font-size: clamp(2.8rem, 18vw, 4rem);
  }

  .future-chapter-illustration {
    max-width: 100%;
  }

  /* OUR RESPONSE導入：左右2カラムを維持せず1カラムへ。DOM順
     （EXPECTATIONS → 章タイトル → リード → 本文）のまま自然に
     縦積みになる */
  .response-intro-grid {
    grid-template-columns: 1fr;
    gap: 3vh;
  }

  .response-intro-preface {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 2rem;
  }

  .response-heading {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }

  .response-intro {
    max-width: none;
  }

  /* 地層の余韻は、狭幅では文字の可読性を優先してさらに淡くする */
  .response-strata {
    opacity: 0.04;
    height: min(26vh, 220px);
  }

  .response-closing-strata {
    opacity: 0.05;
    height: min(20vh, 180px);
  }

  /* レスポンシブ フェーズ1｜CONNECTION→VALUEのpin高さ。PC版の
     height:100vhは変更せず、モバイルのみ100svhを追加宣言する
     （非対応ブラウザは100vhのままフォールバックする）。
     100dvhではなく100svhを選ぶのは、iOS Safariのアドレスバー
     出し入れでpin中に高さが動的に変わり続けるのを避けるため */
  .climax-pin {
    height: 100vh;
    height: 100svh;
  }

  /* レスポンシブ仕上げ｜HEROもモバイル限定でsvhフォールバックを追加。
     iOS Safariの初期アドレスバー表示時、100vhはアドレスバーが隠れた
     最大表示状態を基準に計算されるため、実際に見えている高さより
     大きくなり、scroll-cueが画面外に隠れる可能性がある。
     dvhは採用しない（スクロール中に動的へ変化し、HEROの高さ自体が
     揺れ動くのを避けるため）。PC版のmin-height:100vhは変更しない */
  .hero {
    min-height: 100vh;
    min-height: 100svh;
  }
}

/* レスポンシブ フェーズ1｜VOICEイラストのモバイル最大幅。
   260px固定をやめ、画面幅に応じて2段階で大きくする。
   スマートフォンとタブレットで同じ比率ルールを使い、
   EXPECTATIONS（情景中心・max-width:100%）と違い、
   VOICEは人物中心のまま「小さな挿絵」に見えない範囲で拡大する */
@media (max-width: 600px) {
  .voice-illustration--01,
  .voice-illustration--02,
  .voice-illustration--03 {
    width: min(88vw, 380px);
  }

  /* レスポンシブ仕上げ｜footerの3リンクは固定gap:3rem（48px）のため、
     600px以下では自然幅の合計が入りきらず2〜3行に折り返されていた。
     無理に横並びを維持せず縦並びに切り替える。カード化・背景色・
     アイコン等は追加せず、静かなfooterの見た目はそのまま */
  .site-return-nav {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }

  .site-return-link {
    padding: 0.6rem 0;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .voice-illustration--01,
  .voice-illustration--02,
  .voice-illustration--03 {
    width: min(70vw, 480px);
  }
}

.site-copyright {
  margin: 0;
  padding: 0 1.5rem 2.5rem;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--color-text-dim);
}
/* =========================
   Scroll Guide
   ========================= */

.scroll-guide {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 100;

  display: flex;
  flex-direction: column;
  align-items: center;

  pointer-events: none;

  /* 通常は表示 */
  opacity: 1;

  /* ページ最下部で自然にフェードアウト */
  transition: opacity 0.5s ease;
}

/* 「SCROLL」という文字列ごと90度回転 */
.scroll-guide-text {
  display: block;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: #24272a;
  white-space: nowrap;

  transform: rotate(90deg);

  /* 回転した文字と線の間隔 */
  margin-bottom: 36px;
}

/* 一本の長い線 */
.scroll-guide-line {
  display: block;
  width: 1px;
  height: 70px;
  background: #24272a;

  animation: scrollGuideLine 1.8s ease-in-out infinite;
}

/* 線が上から下へ流れる */
@keyframes scrollGuideLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* =========================
   Deep Green背景で白に切り替え
   ========================= */

.scroll-guide-text,
.scroll-guide-line {
  transition:
    color 0.35s ease,
    background-color 0.35s ease;
}

.scroll-guide.is-light .scroll-guide-text {
  color: #f5f7f4;
}

.scroll-guide.is-light .scroll-guide-line {
  background-color: #f5f7f4;
}

/* =========================
   ページ終盤で非表示
   ========================= */

.scroll-guide.is-hidden {
  opacity: 0;
}

/* =========================
   スマホ
   ========================= */

@media screen and (max-width: 768px) {
  .scroll-guide {
    right: 16px;
    bottom: 24px;
  }

  .scroll-guide-text {
    font-size: 9px;
    margin-bottom: 32px;
  }

  .scroll-guide-line {
    height: 55px;
  }
}