/* ================================================================
   CHAT JAPAN — HOME PAGE
   Design: Direction Board（株式会社ChatJapan様_ご提案資料_20260617.pdf）
   Typography: Cambria / Georgia, serif (Display)
               Calibri / Segoe UI, sans-serif (Body / Label)
   Palette: Ink #0a0801（意図的採用。詳細は _docs/2026-08-03_claude.md 参照） · Forest #1C2B1E · Moss #3A4A35
            Gold #B8965A · Cream #F2EDE4 · Pine #2D6A4F (CTA/price only)
   Responsive: 1440 / 1024 / 820 / 768 / 430px
   ================================================================ */


/* ----------------------------------------------------------------
   DESIGN TOKENS
   ---------------------------------------------------------------- */
:root {
  /* Brand colors */
  --color-ink:    #0a0801; /* Direction Board指定の#0F1117から、Cream/Inkの配色バランスを踏まえて意図的に採用 */
  --color-ink-rgb: 10, 8, 1; /* --color-inkのRGB成分。半透明色が必要な箇所で rgba(var(--color-ink-rgb), alpha) として使用。--color-ink変更時はこちらも必ず同期させること */
  --color-text-body: rgba(15, 17, 23, 0.68); /* 本文テキスト専用トーン。--color-ink（背景・ブランド用の#0a0801）とは別軸で、
    Home側で既に慣用的に使われていたrgba(15,17,23, x)系の値を正式に変数化したもの。.subpageクラスを持つページ（Services/About/Contact等）で使用 */
  --color-forest: #1C2B1E;
  --color-moss:       #3A4A35;
  --color-pine-light: #ADBFB0; /* Pine 35% + Cream 65% — label/tag用途のみ */
  --color-gold:   #B8965A;
  --color-cream:  #F2EDE4;
  --color-cream-rgb: 242, 237, 228; /* --color-creamのRGB成分。半透明色が必要な箇所で rgba(var(--color-cream-rgb), alpha) として使用。--color-cream変更時はこちらも必ず同期させること */
  --color-pine:   #2D6A4F;   /* CTA & price only — per direction board */
  --color-wood:   #E4BE8C;   /* 2026-08-17に先方指定でBook your callボタンの塗りつぶし色として採用したが、
    2026-08-26に先方指示でCTAがゴーストボタン方式へ変更されたため現在未使用。将来の別用途のため定義のみ残置。 */

  /* Photo placeholder colors (単色ブロック — 写真到着後に差し替え) */
  --ph-fig02:     #C8B89A;   /* FIG.02 縁側・朝の光 — warm morning haze */
  --ph-fig03:     #2A1A10;   /* FIG.03 夕暮れの路地 — deep dusk */
  --ph-fig04:     #7A6248;   /* FIG.04 鍵の引き渡し — warm wood / metal */
  --ph-fig04-alt: #6B5440;   /* FIG.04 別カット or 湯のみ */
  --ph-fig05:     #DDD8CE;   /* FIG.05 障子の光 — paper white */
  --ph-fig06:     #181B22;   /* FIG.06 東京タワー — dark city dusk */
  --ph-portrait:  #B8A898;   /* Gen代表 顔写真 — neutral warm */
  --ph-client:    #C4B8A8;   /* testimonial client photos */

  /* Typography */
  --font-display: Cambria, Georgia, serif;
  --font-body:    Calibri, "Segoe UI", Arial, sans-serif;

  /* Spacing scale */
  --space-xs:    8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   48px;
  --space-xl:   80px;
  --space-2xl: 120px;
  --space-3xl: 400px;
  --space-4xl: 472px;

  /* Layout */
  --container-max: 1280px;
  --container-pad:  80px;

  /* Easing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Radius — 実写真の角を控えめに丸める用（2026-08-17）。プレースホルダー
     イラスト（.s-illust系）・testimonial円形写真（border-radius:50%）には
     適用しない */
  --radius-image: 6px;

  /* UI要素全般の角丸（2026-08-17、先方確定：直角のまま残っている
     要素すべてを丸める）。ボタン・フォーム・バッジなど小さい要素は
     --radius-imageより一段階小さい値にする */
  --radius-ui: 4px;
}


/* ----------------------------------------------------------------
   RESET & BASE
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-cream); /* #page-bg のフォールバック */
}

body {
  background-color: transparent; /* #page-bg が制御 */
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
}

/* Home以外のサブページ（Services/About/Contact等）共通の本文テキスト色。
   継承で効かせているため、個別に color 指定のある要素（.s-service__audience,
   .s-pricing-table__note 等）はそちらが優先され上書きされない。 */
.subpage {
  color: var(--color-text-body);
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

address {
  font-style: normal;
}

em {
  font-style: italic;
}

ul {
  list-style: none;
}

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}


/* ----------------------------------------------------------------
   LAYOUT UTILITY
   ---------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}


/* ----------------------------------------------------------------
   TYPOGRAPHY
   ---------------------------------------------------------------- */
h1,
h2 {
  font-family: var(--font-display);
  font-weight: normal;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Calibri Bold label — used for service names */
.label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.83em;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Text link — used for secondary navigation ("See all services →") */
.text-link {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-moss);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s var(--ease-out);
}
.text-link:hover {
  color: var(--color-pine);
}


/* ----------------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 15px 34px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-ui);
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out),
              color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out),
              transform 0.2s var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
}

/* ================================================================
   CTAボタン（Book your call等）— ゴーストボタン方式（2026-08-26、先方指示）。
   塗りつぶし（Wood）から変更。暗い背景（写真・Ink）では白ゴースト
   （.btn--cta がデフォルト）、明るい背景（Cream）ではInkゴースト
   （.btn--cta--on-light 修飾クラスを追加）に切り替える。
   ヘッダーCTAのみ例外的にHTML側のクラスを変えず、
   .site-header.is-scrolled の有無で自動的に配色を切り替える
   （ナビリンクの文字色切り替えと同じ仕組み）。
   ================================================================ */

/* デフォルト：白ゴースト（Hero / About-Closing / Why-Closing / Free Guide送信ボタン等、
   写真またはInk背景のセクション用） */
.btn--cta {
  background-color: transparent;
  color: var(--color-cream);
  border-color: var(--color-cream);
}
.btn--cta:hover {
  background-color: rgba(var(--color-cream-rgb), 0.14);
}
.btn--cta:active {
  background-color: rgba(var(--color-cream-rgb), 0.24);
  transform: scale(0.97);
}
.btn--cta:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}
.btn--cta:disabled,
.btn--cta[aria-disabled="true"] {
  color: rgba(var(--color-cream-rgb), 0.35);
  border-color: rgba(var(--color-cream-rgb), 0.35);
  cursor: not-allowed;
  pointer-events: none;
}

/* Cream背景セクション用：Inkゴースト（Offer / Services-Closing / フォーム送信 /
   フッターCTA等、page-bgがCREAM zoneまたはCream固定のセクションでHTML側に付与） */
.btn--cta--on-light {
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn--cta--on-light:hover {
  background-color: rgba(var(--color-ink-rgb), 0.08);
}
.btn--cta--on-light:active {
  background-color: rgba(var(--color-ink-rgb), 0.16);
}
.btn--cta--on-light:disabled,
.btn--cta--on-light[aria-disabled="true"] {
  color: rgba(var(--color-ink-rgb), 0.35);
  border-color: rgba(var(--color-ink-rgb), 0.35);
}

/* ヘッダーCTA：スクロール後（is-scrolled、すりガラス越しにCream寄りに見える状態。
   下層ページはHTML側に最初から付与済み）はInkゴーストに切り替え */
.site-header.is-scrolled .header-cta {
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.site-header.is-scrolled .header-cta:hover {
  background-color: rgba(var(--color-ink-rgb), 0.08);
}
.site-header.is-scrolled .header-cta:active {
  background-color: rgba(var(--color-ink-rgb), 0.16);
}


/* ----------------------------------------------------------------
   PLACEHOLDER BLOCKS
   写真素材は先方から未着（2026-07-15時点）。
   単色ブロックで仮置き。写真到着後に差し替えること。
   ---------------------------------------------------------------- */
.placeholder-fig02     { background-color: var(--ph-fig02); }
.placeholder-fig03     { background-color: var(--ph-fig03); }
.placeholder-fig04     { background-color: var(--ph-fig04); }
.placeholder-fig04-alt { background-color: var(--ph-fig04-alt); }
.placeholder-fig05     { background-color: var(--ph-fig05); }
.placeholder-fig06     { background-color: var(--ph-fig06); }
.placeholder-portrait  { background-color: var(--ph-portrait); }
.placeholder-client    { background-color: var(--ph-client); }


/* ================================================================
   GLOBAL HEADER
   ================================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  transition: background-color 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out);
}

.header-inner {
  display: flex;
  align-items: center;
  height: 72px;
  gap: 0;
}

.wordmark {
  flex-shrink: 0;
  margin-right: var(--space-xl);
  display: flex;
  align-items: center;
}

.wordmark__logo {
  display: block;
  height: 32px;
  width: auto;
  transition: opacity 0.35s var(--ease-out);
}

/* スクロール前: white ロゴを表示、normal は非表示 */
.wordmark__logo--normal { display: none; }

/* スクロール後: white を隠し normal を表示 */
.site-header.is-scrolled .wordmark__logo--white { display: none; }
.site-header.is-scrolled .wordmark__logo--normal { display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex: 1;
}

.site-nav a {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-cream);
  opacity: 0.65;
  transition: opacity 0.2s, color 0.35s var(--ease-out);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  opacity: 1;
}

.header-cta {
  margin-left: auto;
  flex-shrink: 0;
  padding: 11px 26px;
  font-size: 12px;
}

/* Scrolled: ニュートラルなすりガラス — 白ベース 0.18 + blur でコンテンツが透けて見える */
.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(15, 17, 23, 0.08);
}

/* スクロール後はナビテキストを Ink に切り替え（Cream 背景セクション上での視認性） */
.site-header.is-scrolled .site-nav a {
  color: var(--color-ink);
}

/* モバイルドロワーは Ink 背景なので Cream テキストを維持 */
.site-header.is-scrolled .site-nav.is-open a {
  color: var(--color-cream);
}

/* Mobile hamburger — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-left: var(--space-md);
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--color-cream);
  transition: transform 0.25s var(--ease-out), opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.25px) rotate(-45deg);
}


/* ================================================================
   SECTION 1 · HERO
   ================================================================ */
/* sticky スクロールコンテナ: この高さぶんスクロールする間、.s-hero が吸着する */
.s-hero-wrap {
  height: 170vh;
}

/* 吸着ヒーロー: viewport 上端に固定されたまま写真が暗転していく */
.s-hero {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* 角丸は解除（2026-08-17）: フルブリードでビューポート端に接するため直角に戻した */
  /* 境界レンダリングのフォールバック: overlay の隙間/アンチエイリアスを吸収 */
  background-color: var(--color-ink);
}

.s-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 150% の高さで上下に余白を持ち、JS が translateY でゆっくり上へ動かす */
.s-hero__bg img {
  width: 100%;
  height: 150%;
  object-fit: cover;
  object-position: right bottom;
  will-change: transform;
}

/* 常時スクリム: テキスト可読性のための固定暗転（スクロール位置に関係なく常に存在）*/
.s-hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 1, 0.27);
  pointer-events: none;
}

/* Hero overlay: グラデーションの「形」は固定、「強さ」だけを JS が 0→1 制御する。
   - スクロール 0: overlay opacity=0 → __scrim の 27% のみ（見出し可読）
   - スクロール進行: overlay opacity が増加し、スクリムに加えてグラデーションが重なる
   - sticky 境界到達時: overlay opacity=1 → 下端 82〜100% は完全 Ink = Services と色が一致 */
.s-hero__overlay {
  position: absolute;
  inset: 0;
  opacity: 0; /* JS driven: scroll-based 0→1 */
  background: linear-gradient(
    to bottom,
    rgba(10, 8, 1, 0.00)  0%,
    rgba(10, 8, 1, 0.55) 55%,
    rgba(10, 8, 1, 1.00) 82%,  /* 82% 時点で完全 Ink に到達 */
    rgba(10, 8, 1, 1.00) 100%  /* 下端 18% は固体 Ink をキープ */
  );
}

.s-hero__content {
  position: relative;
  z-index: 1;
  max-width: 920px;
  padding-top: 72px; /* offset for fixed header */
}

.s-hero__headline {
  font-size: clamp(40px, 5.5vw, 78px);
  color: var(--color-cream);
  margin-bottom: var(--space-md);
}

.s-hero__subline {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 19px);
  color: rgba(242, 237, 228, 0.78);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  max-width: 500px;
}


/* ================================================================
   SECTION 2 · WHAT WE HANDLE
   ================================================================ */
.s-services {
  background-color: transparent; /* page-bg が ink を透過して見せる */
  padding: var(--space-3xl) 0;
}

.s-services__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* FIG.04 — 横長写真(1.13:1)を縦長コンテナ(3:4)に cover で収める。
   左右がトリミングされ被写体（鍵・湯のみ）がコンテナいっぱいに表示される */
.s-services__image {
  aspect-ratio: 3 / 4;
  width: 100%;
  position: sticky;
  top: calc(72px + var(--space-lg));
  overflow: hidden;
  border-radius: var(--radius-image);
}

.s-services__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.s-services__content {
  padding-top: var(--space-sm);
}

.section-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-pine-light);
  margin-bottom: var(--space-sm);
}

.s-services__headline {
  font-size: clamp(26px, 2.8vw, 42px);
  color: var(--color-cream);
  margin-bottom: var(--space-xl);
}

.s-services__list {
  border-top: 1px solid rgba(242, 237, 228, 0.12);
}

.s-services__list li {
  padding: var(--space-md) 0;
  border-bottom: 1px solid rgba(242, 237, 228, 0.10);
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-cream);
}

/* サービス名スパン（.label）はリストアイテムの色を継承 */
.s-services__list .label {
  color: var(--color-cream);
}

.s-services__desc {
  color: rgba(242, 237, 228, 0.55);
}

.s-services__list + .text-link {
  display: inline-block;
  margin-top: var(--space-lg);
}

/* Dark背景上のtext-link: pine-light → cream hover */
.s-services .text-link {
  color: var(--color-pine-light);
  border-bottom-color: currentColor;
}
.s-services .text-link:hover {
  color: var(--color-cream);
}


/* ================================================================
   SECTION 3 · THE PROBLEM
   FIG.03（宿場町・夕景）は左半分のみ。右はCream + Inkテキスト。
   ================================================================ */
.s-problem {
  background-color: transparent;
}

.s-problem__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(680px, auto);
}

/* FIG.03 left half — セルの全高を埋める */
.s-problem__image {
  overflow: hidden;
  min-width: 0;
  min-height: 680px; /* 元は img の min-height で確保していた高さ。
    プレースホルダー化（img→.s-illust）に伴いコンテナ側に移設 */
  /* 角丸は解除（2026-08-17）: 上下左右3辺がビューポート端に接する
     フルブリード配置のため直角に戻した */
}

.s-problem__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 680px;
  object-fit: cover;
  object-position: center;
}

.s-problem__content {
  padding: var(--space-2xl) var(--space-xl) var(--space-2xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  justify-content: center;
}

.s-problem__qa {
  /* individual Q&A block */
}

.s-problem__q {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--color-forest);
  line-height: 1.35;
  margin-bottom: var(--space-sm);
}

.s-problem__a {
  font-size: 16px;
  color: rgba(15, 17, 23, 0.68);
  line-height: 1.75;
}

.s-problem__a em {
  color: var(--color-ink);
  font-style: italic;
}


/* ================================================================
   SECTION 4 · AND THERE'S MORE
   Hero→Services と同じ sticky wrapper パターンを適用。
   写真なし・余白重視の設計意図に従い、背景はデフォルトで
   page-bg（cream）を透過。JS-driven overlay が0→1に変化し、
   スクロールとともに cream → INK へと暗転する緩衝地帯となる。
   ================================================================ */

/* sticky スクロールコンテナ */
.s-more-wrap {
  height: 170vh;
}

/* 吸着セクション: viewport 上端に固定 */
.s-more {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  background-color: transparent; /* page-bg（cream）を透過して見せる */
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Overlay: cream→INK の暗転を担う。JS が sticky 進行に合わせて 0→1 制御。
   opacity=0: Problem 終端到達時（cream 背景、見出し不可視）
   opacity=1: sticky ゾーンの80%地点（INK 背景、見出し視認可能） */
.s-more__overlay {
  position: absolute;
  inset: 0;
  opacity: 0; /* JS-driven: scroll-based 0→1 */
  background: var(--color-ink);
  pointer-events: none;
}

.s-more__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.s-more__headline {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.8vw, 56px);
  color: var(--color-cream);
  line-height: 1.15;
  margin-bottom: var(--space-md);
  font-weight: normal;
}

.s-more__sub {
  font-size: 18px;
  color: rgba(242, 237, 228, 0.55);
  letter-spacing: 0.01em;
}


/* ================================================================
   SECTION 5 · WHO WE ARE
   ================================================================ */
.s-about {
  background-color: transparent;
  padding: var(--space-3xl) 0;
  border-top: 1px solid rgba(15, 17, 23, 0.08);
}

.s-about__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-2xl);
  align-items: start;
}

/* Gen portrait — 4:5 aspect ratio (close portrait crop) */
.s-about__image {
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-image);
}

.s-about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.s-about__content {
  padding-top: var(--space-sm);
}

.s-about__headline {
  font-size: clamp(26px, 2.8vw, 42px);
  color: var(--color-ink);
  margin-bottom: var(--space-lg);
}

.s-about__body {
  font-size: 18px;
  line-height: 1.78;
  color: rgba(15, 17, 23, 0.80);
  margin-bottom: var(--space-lg);
}


/* ================================================================
   SECTION 6 · THE OFFER (Tripwire)
   Cream背景 + 2カラム（テキスト左 / FIG.04右）。
   FIG04は極めて明るい静物写真なのでダーク背景は不要。
   タイポグラフィの大きさと余白でコンバージョン重量を出す。
   ================================================================ */
.s-offer {
  background-color: transparent;
  padding: var(--space-3xl) 0;
  border-top: 1px solid rgba(15, 17, 23, 0.08);
}

.s-offer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.s-offer__content {
  /* テキストカラム */
}

/* FIG.04 右カラム。横長写真(1.13:1)を4:3コンテナに cover で収める */
.s-offer__image {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-image); /* 実イラスト差し替え済み（2026-08-17） */
}

.s-offer__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.s-offer__teaser {
  font-size: 17px;
  color: rgba(15, 17, 23, 0.50);
  line-height: 1.85;
  margin-bottom: var(--space-lg);
}

/* Main pitch — Cambria display、大きく見せる */
.s-offer__pitch {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 46px);
  color: var(--color-ink);
  line-height: 1.2;
  margin-bottom: var(--space-lg);
}

.s-offer__detail {
  font-size: 17px;
  color: rgba(15, 17, 23, 0.62);
  line-height: 1.72;
  margin-bottom: var(--space-xl);
}


/* ================================================================
   SECTION 7 · PROOF (Testimonials)
   Cream背景。写真の明るいトーンに合わせてライトモードのカード。
   ================================================================ */
.s-proof {
  background-color: transparent;
  padding: var(--space-3xl) 0;
  border-top: 1px solid rgba(15, 17, 23, 0.08);
}

.s-proof__headline {
  font-size: clamp(26px, 2.8vw, 42px);
  color: var(--color-ink);
  margin-bottom: var(--space-xl);
}

.s-proof__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.testimonial-card {
  background-color: #fff;
  border: 1px solid rgba(15, 17, 23, 0.08);
  border-radius: var(--radius-image);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
}

/* Client photo — circle, 56×56 */
.testimonial-card__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-bottom: var(--space-md);
  object-fit: cover;
  display: block;
}

.testimonial-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.testimonial-card__quote {
  font-size: 15px;
  line-height: 1.78;
  color: rgba(15, 17, 23, 0.65);
  font-style: normal;
  flex: 1;
  margin-bottom: var(--space-lg);
}

.testimonial-card__footer {
  border-top: 1px solid rgba(15, 17, 23, 0.08);
  padding-top: var(--space-md);
}

.testimonial-card__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.testimonial-card__origin {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-moss);     /* Gold はCream背景でコントラスト不足のためMoss使用 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ================================================================
   SECTION 8 · SOFT CAPTURE
   FIG.05: Home 9セクションに明示指定なし。設計判断で使用（opacity低め）。
   ================================================================ */
.s-capture {
  position: relative;
  background-color: var(--color-cream);
  padding: var(--space-3xl) 0;
  overflow: hidden;
}

/* FIG.05 as faint atmosphere — opacity低めで「気配」程度に留める */
.s-capture__bg {
  position: absolute;
  inset: 0;
  opacity: 0.10;
  overflow: hidden;
}

.s-capture__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.s-capture__content {
  position: relative;
  z-index: 1;
  max-width: 540px;
}

.s-capture__headline {
  font-size: clamp(26px, 2.8vw, 42px);
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}

.s-capture__body {
  font-size: 17px;
  color: rgba(15, 17, 23, 0.65);
  line-height: 1.70;
  margin-bottom: var(--space-xl);
}

.s-capture__form {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.s-capture__input {
  flex: 1;
  min-width: 240px;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 17, 23, 0.20);
  border-radius: var(--radius-ui);
  color: var(--color-ink);
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.s-capture__input::placeholder {
  color: rgba(15, 17, 23, 0.30);
}
.s-capture__input:focus {
  border-color: var(--color-pine);
  background: #fff;
}


/* ================================================================
   SECTION 9 · CLOSING
   ================================================================ */
/* ページ内唯一のダークセクション（Ink）。FIG06は右パネルに縦長のまま配置 */
.s-closing {
  background-color: transparent; /* page-bg（CREAM zone）を透過して見せる */
  padding: var(--space-2xl) 0;
}

.s-closing__inner {
  display: grid;
  grid-template-columns: 1fr 1fr; /* .s-problem__inner と同比率の 50/50 */
  gap: var(--space-xl);
  min-height: 600px;
}

.s-closing__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* FIG.06。
   .s-problem__image と同プロポーションになるよう 50/50 グリッドに変更。
   height:110% で .has-parallax > img の 130% を上書き：
     - 縦 overflow 25px を確保 → object-position center 80% が有効
     - scale(1.0) + ±8% translateY でギャップなし（113% 未満の上限を満たす）
   JS 側で parallax shift を ±8% に縮小して適用。 */
.s-closing__image {
  overflow: hidden;
  border-radius: var(--radius-image);
}

.s-closing__image img {
  width: 100%;
  height: 110% !important;
  object-fit: cover;
  object-position: center 80%;
}

.s-closing__text {
  margin-bottom: var(--space-xl);
}

.s-closing__line {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 44px);
  color: var(--color-ink);
  line-height: 1.3;
  font-weight: normal;
}


/* ================================================================
   GLOBAL FOOTER
   Cream基調。ダーク背景はClosingセクションのみに絞るため。
   ================================================================ */
.site-footer {
  background-color: var(--color-cream);
  padding: var(--space-xl) 0;
  border-top: 1px solid rgba(15, 17, 23, 0.10);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr auto;
  gap: var(--space-xl);
  align-items: start;
}

.site-footer__tagline {
  font-family: var(--font-display);
  font-size: 17px;
  color: rgba(15, 17, 23, 0.52);
  margin-bottom: var(--space-sm);
  font-style: italic;
}

.site-footer__wordmark {
  margin-right: 0;
}

.site-footer__wordmark .wordmark__logo {
  height: 28px;
  opacity: 0.85;
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: 2px;
}

.site-footer__nav a {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(15, 17, 23, 0.50);
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.site-footer__nav a:hover {
  color: var(--color-ink);
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Forest on Cream: 12.5:1 — Gold はCream背景でコントラスト不足のため使用しない */
.site-footer__email {
  font-size: 14px;
  color: var(--color-forest);
  transition: opacity 0.2s;
}
.site-footer__email:hover {
  opacity: 0.70;
}

.site-footer__address {
  font-size: 13px;
  color: rgba(15, 17, 23, 0.45);
  line-height: 1.65;
  margin-top: var(--space-xs);
}

.site-footer__trust {
  font-size: 12px;
  color: rgba(15, 17, 23, 0.32);
  letter-spacing: 0.05em;
  margin-top: var(--space-xs);
}

.site-footer__cta {
  padding-top: 2px;
}


/* ================================================================
   RETIRED 2026-08-10 — SERVICES PAGE 旧KV（フルブリード写真＋固定背景
   パララックス＋縮小/ラグ演出）
   先方確定のイラスト方針（テキスト左・イラスト右）へ移行するため撤去。
   元に戻す可能性があるため削除せずコメントアウトで保持
   （feature/illustration-exploration）。新KVは.s-kv（下記）。

   経緯（すべて解除済み）:
   - 2026-08-05: スリムバナー(56vh)からフルスクリーン(100vh)化
   - 2026-08-05（3回目）: background-attachment: fixedによる固定背景
     パララックスを追加（JS不使用の枯れた実装、過去のhas-parallax起因
     黒帯バグ_docs/2026-07-24_claude.md とは異なる経路）
   - 2026-08-06: KV縮小+見出しラグをJSで実装。animation-timeline: view()
     を先に試みたが、.s-page-heroのoverflow: hiddenがCSS仕様上
     「スクロールコンテナ」とみなされ機能しなかったため、
     .has-parallaxと同じgetBoundingClientRect()方式のJSに切り替え済み
     （services.htmlの「5. KV COLLAPSE」ブロックも同様にコメントアウト
     で保持）
   詳細は_docs/2026-08-05_claude_2.md・_docs/2026-08-06_claude.md参照。

.s-page-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-ink);
  background-image: url('../images/FIG02_hero_engawa.png');
  background-size: cover;
  background-position: right bottom;
  background-attachment: fixed;
}

.s-page-hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(var(--color-ink-rgb), 0.27);
}

.s-page-hero__content {
  position: relative;
  z-index: 1;
  padding: 96px 0 var(--space-lg);
}

.s-page-hero .section-label {
  color: rgba(242, 237, 228, 0.75);
}

.s-page-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.15;
  color: var(--color-cream);
  max-width: 780px;
  margin-top: var(--space-sm);
}
   ================================================================ */

/* ================================================================
   SERVICES / WHY US PAGE — 新KV（.s-kv）2026-08-10
   先方確定のイラスト方針: 下層ページのKVはテキスト左・イラスト右の
   2カラム。写真を使わないため、#page-bg（Cream固定）を素通しする
   通常のCreamセクションとして自己完結する（Ink暗転や固定背景の
   複雑さが一切ない、最もシンプルな構成）。
   写真がなくなったことで、ヘッダーの「transparent→frosted」の
   スクロール連動も不要になったため、このKVを使うページのヘッダーは
   HTML側でis-scrolledを最初から付与する（Why Usで先行導入済みの
   パターンをServicesにも適用）。
   ================================================================ */
.s-kv {
  padding: 160px 0 var(--space-2xl);
}

.s-kv .section-label {
  color: var(--color-moss);
}

.s-kv__grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--space-2xl);
  align-items: center;
}

.s-kv__headline {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.18;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}

.s-kv__body p {
  font-size: 18px;
  line-height: 1.78;
  color: var(--color-text-body);
  margin-bottom: var(--space-md);
}

.s-kv__note {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--color-moss);
}

/* イラスト差し替え用の汎用プレースホルダー（2026-08-10、A案：単色ブロック）。
   KVに限らずサイト全体の「写真→イラスト」検討箇所で共通利用する。
   実写真プレースホルダー（.placeholder-fig0X、枠線なし）と見た目で
   区別できるよう、ゴールドの点線ボーダーを付ける。背景色は既存の
   --ph-fig系トークンを.placeholder-fig0Xクラスと組み合わせて指定する
   （例: class="s-illust placeholder-fig04"）。コンテナ自身のサイズ・
   aspect-ratioは呼び出し側（.s-problem__image等）の指定を維持する。 */
.s-illust {
  border: 1px dashed var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0; /* 2026-08-17: 角丸は実写真のみが対象のため、
    プレースホルダーは共有クラス由来の--radius-imageを明示的に打ち消す */
}

.s-illust__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.8;
  color: rgba(var(--color-ink-rgb), 0.40);
}

/* KV専用のサイズ指定（コンテナ自身にaspect-ratio定義がないため） */
.s-kv__illustration {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-image); /* 実イラスト差し替え済み（2026-08-17） */
}

.s-kv__illustration img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ================================================================
   SERVICES PAGE — 各サービス「章」（01〜06）
   構造見直し（2026-08-05）: 情報カードの並列ではなく「章」として扱う。
   さらに再構造化（2026-08-05・2回目）: 6章すべてを同じ型のサイズ違いに
   せず、Homeページの構造多様性（Hero/List/Quiet/Story/Q&A/証言カードで
   型自体が変わる）を踏襲し、4つの型を割り当てる。
     A. Hero型   （.s-hero参考）  — フルブリード写真＋キッカー＋一行＋詳細ボックス（01・04）
     B. Story型  （.s-about参考） — 写真を左右に寄せ、テキストを大きく（02・05）
     C. List型   （.s-services参考）— 写真＋リストをInk自己完結パネルで（03）
     D. Quiet型  （.s-breather参考）— 写真なし、一行コピー＋余白のみ（06）
   詳細ボックスの強さも型・章ごとに変える（What it is/Includes/Next等の
   情報自体は削除しない）。
   ================================================================ */
.s-service {
  padding-bottom: var(--space-2xl);
}

.s-service--last {
  padding-bottom: var(--space-2xl); /* .s-services-closing自身のtop paddingと合計240px。他ブロック間隔と揃える */
}

/* 章の1画面目: フルブリード写真＋スクリム＋キッカー＋一行コピー。
   高さは quiet / 標準 / tall の3段階を各ブレークポイントで均等な
   段差（Desktop基準で±20vh）に固定し、緩急が「意図的な差」だと
   一目でわかるようにする（Homeのセクション間の緩急を参考）。 */
.s-service__photo {
  position: relative;
  height: 65vh;
  min-height: 460px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  /* 角丸は解除（2026-08-17）: フルブリードでビューポート端に接するため直角に戻した */
}

.s-service__photo--tall {
  height: 85vh;
  min-height: 560px;
}

.s-service__photo--quiet {
  height: 45vh;
  min-height: 380px;
}

.s-service__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-service__photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--color-ink-rgb), 0.05) 0%, rgba(var(--color-ink-rgb), 0.10) 45%, rgba(var(--color-ink-rgb), 0.55) 100%);
}

.s-service__photo-content {
  position: relative;
  z-index: 1;
  padding-bottom: var(--space-xl);
}

/* デフォルトはCream地（Story/Quiet型）向けにmoss。写真上（Hero型）では
   photo-content配下で上書きしてcream系に切り替える。 */
.s-service__kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-moss);
  margin-bottom: var(--space-sm);
}

.s-service__photo-content .s-service__kicker {
  color: rgba(242, 237, 228, 0.70);
}

.s-service__line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: normal;
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.25;
  color: var(--color-cream);
  max-width: 720px;
}

/* 詳細情報の格下げボックス。写真下に配置し、.s-service__processで
   使っていたトーン（薄い背景＋ゴールドの左ボーダー）を全章共通で継承。
   情報自体は削除せず、視覚的な優先度だけを下げる。 */
.s-service__detail {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background-color: rgba(var(--color-ink-rgb), 0.03);
  border-left: 2px solid var(--color-gold);
  border-radius: var(--radius-image);
  font-size: 15px;
}

/* 枠なしの軽い扱い（04）。写真との間隔だけ.s-service__detailから引き継ぐ。 */
.s-service__detail--plain {
  margin-top: var(--space-xl);
}

.s-service__audience {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: rgba(var(--color-ink-rgb), 0.55);
  margin-bottom: var(--space-md);
}

.s-service__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-md);
}

.s-service__col .label {
  display: block;
  color: var(--color-moss);
  margin-bottom: var(--space-xs);
}

.s-service__next {
  font-size: 15px;
}

.s-service__next .label {
  color: var(--color-moss);
}

/* Purchase Support — FIND / BUY / SETTLE ステップ（詳細ボックス内） */
.s-service__steps {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

.s-service__steps > .label {
  display: block;
  color: var(--color-moss);
  margin-bottom: var(--space-sm);
}

.s-service__steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.s-service__step-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-moss);
  margin-bottom: var(--space-xs);
}

.s-service__note {
  margin-top: var(--space-lg);
  font-size: 14px;
  font-style: italic;
  color: var(--color-moss);
}

/* Home Care（B型内）— Basic Plan / Add-on services */
.s-service__plans {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

.s-service__plans > .label {
  color: var(--color-moss);
}

.s-service__plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-lg);
  margin-top: var(--space-sm);
}

.s-service__plan-grid li {
  font-size: 14px;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

/* ================================================================
   SERVICES PAGE — B型: Story（写真+大きなテキスト、Homeの.s-about参考）
   写真を左右どちらかに寄せ、地の文でテキストを大きく扱う。詳細ボックス
   の枠は使わず、What it is/Includesは1文に統合して弱めに見せる。
   ================================================================ */
.s-service--story {
  padding-top: var(--space-2xl);
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

.s-service__story {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-2xl);
  align-items: center;
}

.s-service__story-image {
  aspect-ratio: 3 / 4;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-image); /* 02/05はプレースホルダーのため.s-illustで打ち消し */
}

.s-service__story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s-service__story-headline {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.2;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}

.s-service__story-body {
  font-size: 17px;
  color: rgba(var(--color-ink-rgb), 0.72);
  margin-bottom: var(--space-md);
}

.s-service__story-next {
  font-size: 15px;
}

.s-service__story-next .label {
  color: var(--color-moss);
}

/* Home Care用バリエーション: 02/05（縦長3:4・中央寄せ）に対し、
   テキスト列を広く・画像は横長4:3・上揃えにして反復感を避ける。
   Basic Plan/Add-on一覧で縦に伸びるテキスト側に合わせるための調整。
   DOM順はテキスト→画像（画像は右側＝02の左側と左右反転）。 */
.s-service__story--list {
  grid-template-columns: 8fr 4fr;
  align-items: start;
}

/* 03はBasic Plan/Add-on一覧でテキスト列が縦に長くなるため、画像を
   sticky化してその場に留める。祖先（.container/.s-service--story/
   .s-service__story等）にoverflow/transformを持つものがないことを
   確認済み（mainのposition:relativeはstickyに影響しない）。
   グリッドの行高はalign-items:startでも列内で最も高い要素（テキスト列）
   に揃うため、画像のsticky領域として十分な高さが確保される。 */
.s-service__story--list .s-service__story-image {
  aspect-ratio: 4 / 3;
  position: sticky;
  top: var(--space-2xl);
}

/* ================================================================
   SERVICES PAGE — D型: Quiet（Homeの.s-more／.s-breather参考）
   一行の宣言コピー＋余白のみを主としつつ、Homeの.s-capture__bgと同じ
   「気配程度の写真」パターン（opacity: 0.10のフルブリード背景）を
   踏襲し、写真を完全にはなくさない。06はFIG.03を極薄く使用
   （04と同じ画像だが主張を抑えているため許容）。
   詳細情報は削除せず、小さな一文に凝縮。
   ================================================================ */
.s-service--quiet-chapter {
  position: relative;
  padding-top: var(--space-2xl);
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.08);
  overflow: hidden;
  text-align: center;
}

.s-service__quiet-bg {
  position: absolute;
  inset: 0;
  opacity: 0.10;
  overflow: hidden;
  /* 角丸は解除（2026-08-17）: フルブリードでビューポート端に接するため直角に戻した */
}

.s-service__quiet-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.s-service__quiet {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.s-service__quiet .s-service__kicker {
  display: block;
}

.s-service__quiet-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: normal;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.4;
  color: var(--color-moss);
  margin-bottom: var(--space-md);
}

.s-service__quiet-detail {
  font-size: 15px;
  color: rgba(var(--color-ink-rgb), 0.60);
}

.s-service__quiet-detail .label {
  color: var(--color-moss);
}

/* ================================================================
   SERVICES PAGE — 価格比較（独立セクション）
   構造見直し（2026-08-05）: Home Care章の内側から切り出し、6章とは
   別の独立したセクションに。数字で見せるPRECISEなビートとして、
   6章の後・末尾CTAの前に配置（Homeの Proof→Closing の緩急を参考）。
   Pine色ハイライト等の見せ方は維持。
   ================================================================ */
.s-pricing {
  padding: var(--space-2xl) 0;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

.s-pricing .section-label {
  color: var(--color-moss); /* page-bgがCREAM固定のため、Ink基調のサブページ用に上書き */
}

.s-pricing__headline {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(24px, 2.6vw, 36px);
  color: var(--color-ink);
  max-width: 640px;
  margin-bottom: var(--space-lg);
}

.s-pricing-table-scroll {
  overflow-x: auto;
  margin-top: var(--space-sm);
  border-radius: var(--radius-image); /* 表全体の外枠のみ角丸（2026-08-17）。
    border-collapseやセル内部の罫線・背景色は変更しない */
}

.s-pricing-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

.s-pricing-table th,
.s-pricing-table td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-size: 15px;
}

/* ヘッダー行はやや強めの罫線で表全体を締め、通常行は細く上品な罫線に */
.s-pricing-table thead th {
  border-bottom: 1.5px solid var(--color-ink);
}

.s-pricing-table tbody td {
  border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

.s-pricing-table th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(var(--color-ink-rgb), 0.55);
}

/* 意思決定を後押しする最終行。--color-pine-light（既存のPine系薄色、
   これまでlabel/tag用途のみだったが背景色としても再利用）で軽く強調し、
   罫線は入れずに縦の余白だけ広げて「選ばれたプラン」を静かに際立たせる。 */
.s-pricing-table__highlight td {
  background-color: var(--color-pine-light);
  color: var(--color-pine);
  font-weight: 700;
  border-bottom: none;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

.s-pricing-table__note {
  margin-top: var(--space-sm);
  font-size: 14px;
  color: rgba(var(--color-ink-rgb), 0.60);
}


/* ================================================================
   SERVICES PAGE — 静けさの一行コピーセクション（レビュー対応）
   写真なし・大きな余白・一行コピーのみ。01〜06の同一フォーマット
   反復に緩急をつけるための挟み込みセクション（03と04の間）。
   ================================================================ */
.s-breather {
  padding: var(--space-2xl) 0;
  text-align: center;
}

.s-breather__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.55;
  color: var(--color-moss);
  max-width: 560px;
  margin: 0 auto;
}


/* ================================================================
   SERVICES PAGE — 末尾CTA帯（確定コピー: Home page prompt.pdf）
   ================================================================ */
.s-services-closing {
  background-color: var(--color-cream);
  padding: var(--space-2xl) 0;
}

.s-services-closing__inner {
  text-align: center;
}

.s-services-closing__headline {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(24px, 3vw, 36px);
  color: var(--color-ink);
  margin-bottom: var(--space-lg);
}


/* ================================================================
   WHY US PAGE（2026-08-06 新規）
   Servicesページで整備した共有基盤（.subpage／page-bg--cream固定／
   既存CSS変数）をそのまま踏襲。新しい色は追加せず、既存の
   --color-ink/--color-cream/--color-pine/--color-moss/--color-gold
   のみ使用。パララックス等の演出は今回は追加しない（静止画のみ）。
   ================================================================ */

/* SECTION 1 · Hero（写真なし・ワイヤーフレーム準拠） */
.s-why-hero {
  padding: 160px 0 var(--space-2xl); /* 上: 固定ヘッダー逃げ＋余白 */
}

/* 2026-08-10: イラスト方針対応。テキスト列は元のmax-width制約を
   保持したまま、右カラムにイラスト枠（.s-kv__illustration）を追加。 */
.s-why-hero__grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--space-2xl);
  align-items: center;
}

.s-why-hero .section-label {
  color: var(--color-moss); /* page-bgがCREAM固定のため上書き（.s-pricingと同じ考え方） */
}

.s-why-hero__headline {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.15;
  color: var(--color-ink);
  max-width: 780px;
  margin-bottom: var(--space-lg);
}

.s-why-hero__body {
  max-width: 640px;
}

.s-why-hero__body p {
  font-size: 18px;
  line-height: 1.78;
  color: var(--color-text-body);
  margin-bottom: var(--space-md);
}

.s-why-hero__note {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--color-moss);
  max-width: 640px;
}

/* SECTION 2 · The Comparison（3列比較表） */
.s-comparison {
  padding: var(--space-2xl) 0;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

.s-comparison .section-label {
  color: var(--color-moss);
}

.s-comparison-table-scroll {
  overflow-x: auto;
  margin-top: var(--space-lg);
  border-radius: var(--radius-image); /* 表全体の外枠のみ角丸（2026-08-17）。
    border-collapseやセル内部の罫線・背景色は変更しない */
}

.s-comparison-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.s-comparison-table th,
.s-comparison-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-md);
  font-size: 15px;
  border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

.s-comparison-table thead th {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--color-ink);
}

.s-comparison-table thead th:first-child {
  color: rgba(var(--color-ink-rgb), 0.55);
}

/* 「With Chat Japan」列: Pine色でハイライトし、自社の立ち位置を明確に */
.s-comparison-table thead th:nth-child(2) {
  background-color: var(--color-pine);
  color: var(--color-cream);
  border-bottom-color: var(--color-pine);
}

/* 「Other companies」列: ニュートラルな薄いtintで一段控えめに */
.s-comparison-table thead th:nth-child(3) {
  background-color: rgba(var(--color-ink-rgb), 0.04);
  color: rgba(var(--color-ink-rgb), 0.50);
}

.s-comparison-table tbody td:first-child {
  color: rgba(var(--color-ink-rgb), 0.55);
}

.s-comparison-table tbody td:nth-child(2) {
  color: var(--color-ink);
  font-weight: 700;
}

.s-comparison-table tbody td:nth-child(3) {
  color: rgba(var(--color-ink-rgb), 0.50);
  font-style: italic;
}

/* SECTION 3 · Founder Quote（Homeの.s-aboutと同じ骨格） */
.s-why-founder {
  padding: var(--space-2xl) 0;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

.s-why-founder .section-label {
  color: var(--color-moss);
  margin-bottom: var(--space-sm);
}

.s-why-founder__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-2xl);
  align-items: center;
}

.s-why-founder__image {
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-image);
}

.s-why-founder__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.s-why-founder__quote {
  font-family: var(--font-display);
  font-weight: normal;
  font-style: italic;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.35;
  color: var(--color-ink);
  margin-bottom: var(--space-lg);
}

/* SECTION 4 · Case Studies（プレースホルダーカード） */
.s-case-studies {
  padding: var(--space-2xl) 0;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

.s-case-studies .section-label {
  color: var(--color-moss);
}

.s-case-studies__headline {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(26px, 2.8vw, 42px);
  color: var(--color-ink);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.s-case-studies__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

/* 点線ボーダー＝仮コンテンツだと一目でわかるように（写真プレースホルダーの
   低コントラストラベルと同じ考え方） */
.s-case-study {
  border: 1px dashed rgba(var(--color-ink-rgb), 0.22);
  border-radius: var(--radius-image);
  padding: var(--space-lg);
}

.s-case-study__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-ui);
  padding: 4px 10px;
  margin-bottom: var(--space-md);
}

.s-case-study__text {
  font-size: 15px;
  font-style: italic;
  color: rgba(var(--color-ink-rgb), 0.55);
}

/* SECTION 5 · Closing Offer（FIG.06フルブリード。静止画のみ、JS不使用） */
.s-why-closing {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 角丸は解除（2026-08-17）: フルブリードでビューポート端に接するため直角に戻した */
  background-color: var(--color-ink);
}

.s-why-closing__bg {
  position: absolute;
  inset: 0;
}

.s-why-closing__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.s-why-closing__scrim {
  position: absolute;
  inset: 0;
  background: rgba(var(--color-ink-rgb), 0.55);
}

.s-why-closing__content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.s-why-closing__line {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.25;
  color: var(--color-cream);
  max-width: 720px;
  margin: 0 auto var(--space-lg);
}


/* ================================================================
   ABOUT PAGE（2026-08-18 新規）
   KVはServices/Why Usと共通の.s-kvを使用。Founder Story/What We
   Believe/Closingはページ専用クラスとして新規追加。新しい色は
   追加せず既存のCSS変数のみ使用。

   2026-08-26追記：KV（The bridge I wished existed）のタイトル-画像間の
   余白が広すぎるとの指摘のため、Contactページと同じ考え方で調整。
   .s-kv共通クラスは変更せず#about-hero限定でグリッド比率とgapのみ
   調整（詳細はCONTACT PAGEセクションのコメント参照）。 */
@media (min-width: 1025px) {
  #about-hero .s-kv__grid {
    grid-template-columns: 3fr 7fr;
    gap: var(--space-lg);
  }
}

/* SECTION 1 · Founder Story */
.s-about-founder {
  padding: var(--space-2xl) 0;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

.s-about-founder .section-label {
  color: var(--color-moss);
  margin-bottom: var(--space-sm);
}

/* align-items: center が肝。展開後にテキスト列が伸びると、行の高さが
   増えた分だけ中央揃えの画像が自動的に下へ押し出される（JS不使用）。
   展開前後のスクリーンショット比較で確認済み。
   2026-08-26: タイトル/本文と画像の余白が広すぎるとの指摘のため、
   gapを--space-2xl(120px)→--space-lg(48px)に縮小し、画像列の比率を
   5fr→7fr（テキスト列は7fr→5fr）に拡大。結果、画像の表示幅は
   元の約1.5倍（1440px幅時 417px→625px）になる。 */
.s-about-founder__inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-lg);
  align-items: center;
}

.s-about-founder__image {
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-image);
}

.s-about-founder__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.s-about-founder__body {
  font-size: 18px;
  line-height: 1.78;
  color: var(--color-text-body);
  margin-bottom: var(--space-lg);
}

/* トグルボタン。Book your call（.btn--cta、ゴーストボタン）とは役割が
   異なる（CTAではなく開閉操作）ため、既存の枠線ボタンのトーンを踏襲
   した控えめな見た目にする。 */
.s-about-founder__toggle {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-moss);
  background-color: transparent;
  border: 1.5px solid var(--color-moss);
  border-radius: var(--radius-ui);
  padding: 12px 24px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.s-about-founder__toggle:hover {
  background-color: var(--color-moss);
  color: var(--color-cream);
}

/* 展開部分。hidden属性の切り替えのみ（高さ計算・アニメーションなし）。 */
.s-about-founder__extra {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

.s-about-founder__extra p {
  font-size: 18px;
  line-height: 1.78;
  color: var(--color-text-body);
  margin-bottom: var(--space-md);
}

.s-about-founder__mission-label {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}

/* SECTION 2 · What We Believe */
.s-about-believe {
  padding: var(--space-2xl) 0;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

.s-about-believe__headline {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.35;
  color: var(--color-ink);
  max-width: 780px;
  margin-bottom: var(--space-xl);
}

.s-about-believe__list {
  max-width: 640px;
}

.s-about-believe__item {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

.s-about-believe__item:first-child {
  padding-top: 0;
}

.s-about-believe__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 2vw, 22px);
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}

.s-about-believe__item p:not(.s-about-believe__name) {
  font-size: 16px;
  color: var(--color-text-body);
}

/* SECTION 3 · Closing（FIG.02フルブリード。Why Us Closingと同一パターン。
   フルブリードのため角丸は適用しない） */
.s-about-closing {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-ink);
}

.s-about-closing__bg {
  position: absolute;
  inset: 0;
}

.s-about-closing__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.s-about-closing__scrim {
  position: absolute;
  inset: 0;
  background: rgba(var(--color-ink-rgb), 0.55);
}

.s-about-closing__content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.s-about-closing__line {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.25;
  color: var(--color-cream);
  max-width: 720px;
  margin: 0 auto var(--space-lg);
}



/* ================================================================
   CONTACT PAGE（2026-08-18新規／2026-08-19構成変更）
   HeroはServices/Why Us/Aboutと共通の.s-kvに変更（先方確定）。
   Bookingカードは撤去し、Reassuranceを単独セクション化、新たに
   仮のFormセクションを追加。新しい色は追加せず既存のCSS変数のみ使用。

   2026-08-26追記：KV（Let's chat!）のタイトル-イラスト間の余白が
   広すぎるとの指摘のため、.s-kv共通クラスは変更せず#contact-hero
   限定でグリッド比率とgapのみ調整。イラスト列を6fr→7fr相当（3fr:7fr）
   に広げ、gapを--space-2xl(120px)→--space-lg(48px)に縮小。
   結果としてイラスト表示幅が元の約1.5倍（500px→約750px、1440px幅時）
   になる。fr比率のまま維持しているため1024pxブレークポイントまで
   比率を保って縮小し、途中の幅で破綻しない。
   min-width:1025pxで囲むのは、IDセレクタ（詳細度優先）のままだと
   @media (max-width: 1024px) 側の.s-kv__grid（1カラム化）を
   意図せず上書きしてしまうため。 */
@media (min-width: 1025px) {
  #contact-hero .s-kv__grid {
    grid-template-columns: 3fr 7fr;
    gap: var(--space-lg);
  }
}

.s-contact-reassurance-section {
  padding: var(--space-2xl) 0;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.08);
  text-align: center;
}

.s-contact-reassurance-section .section-label {
  color: var(--color-moss);
  margin-bottom: var(--space-sm);
}

.s-contact-reassurance {
  max-width: 560px;
  margin: 0 auto;
}

.s-contact-reassurance p {
  font-size: 18px;
  line-height: 1.78;
  color: var(--color-text-body);
  margin-bottom: var(--space-md);
}

/* Form（仮の構成、2026-08-19）。入力欄はHomeの.s-capture__inputを
   流用し、送信ボタンは.btn--cta（Book your callと同じ配色）を流用。 */
.s-contact-form-section {
  padding: var(--space-2xl) 0;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.08);
  text-align: center;
}

.s-contact-form-section .section-label {
  color: var(--color-moss);
}

.s-contact-form-section__headline {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: clamp(26px, 2.8vw, 40px);
  color: var(--color-ink);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.s-contact-form {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: left; /* 入力欄内のテキストは通常通り左揃え */
}

.s-contact-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
}

.s-contact-form__label {
  color: var(--color-moss);
}

.s-contact-form__optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: rgba(var(--color-ink-rgb), 0.45);
}

.s-contact-form__textarea {
  resize: vertical;
  font-family: var(--font-body);
  line-height: 1.6;
}

.s-contact-form .btn {
  align-self: center;
}

/* 同意チェックボックス（2026-08-26新規）。チェックが入るまで送信ボタンは
   disabled（JS側でトグル。見た目は.btn--cta系の:disabledスタイルを流用）。 */
.s-contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-body);
}
.s-contact-form__consent input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-ink);
  cursor: pointer;
}
.s-contact-form__consent a {
  color: var(--color-moss);
  border-bottom: 1px solid currentColor;
}
.s-contact-form__consent a:hover {
  color: var(--color-pine);
}


/* ================================================================
   PRIVACY POLICY PAGE（2026-08-26 新規）
   ヘッダーは他サブページと共通の.s-kvを使用（イラストなし版）。
   ================================================================ */
.s-legal {
  padding-bottom: var(--space-3xl);
}

.s-legal__inner {
  max-width: 720px;
}

.s-legal__updated {
  font-size: 13px;
  color: var(--color-text-body);
  margin-bottom: var(--space-lg);
}

.s-legal h2 {
  font-family: var(--font-display);
  font-weight: normal;
  font-size: 22px;
  color: var(--color-ink);
  margin: var(--space-xl) 0 var(--space-sm);
}
.s-legal h2:first-of-type {
  margin-top: 0;
}

.s-legal p {
  font-size: 16px;
  line-height: 1.78;
  color: var(--color-text-body);
  margin-bottom: var(--space-md);
}

.s-legal ul {
  margin: 0 0 var(--space-md);
  padding-left: 22px;
}
.s-legal li {
  font-size: 16px;
  line-height: 1.78;
  color: var(--color-text-body);
  margin-bottom: 6px;
}

.s-legal a {
  color: var(--color-moss);
  border-bottom: 1px solid currentColor;
}
.s-legal a:hover {
  color: var(--color-pine);
}


/* ================================================================
   RESPONSIVE — 1024px
   ================================================================ */
@media (max-width: 1024px) {
  :root {
    --container-pad: 48px;
    --space-2xl:    96px;
    --space-3xl:   368px;
  }

  .s-services__inner,
  .s-about__inner,
  .s-why-founder__inner,
  .s-about-founder__inner {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--space-xl);
  }

  .s-problem__content {
    padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-lg);
    gap: var(--space-lg);
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
  .site-footer__cta {
    grid-column: 1 / -1;
  }

  /* Services page — 章の写真をやや低めに */
  .s-service__photo         { height: 56vh; min-height: 420px; }
  .s-service__photo--tall   { height: 74vh; min-height: 500px; }
  .s-service__photo--quiet  { height: 40vh; min-height: 340px; }
}


/* ================================================================
   RESPONSIVE — 820px
   ================================================================ */
@media (max-width: 820px) {
  :root {
    --container-pad: 40px;
    --space-xl:    60px;
    --space-2xl:   80px;
    --space-3xl:  336px;
  }

  /* Header — show hamburger, keep CTA */
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--color-ink);
    padding: var(--space-lg) var(--container-pad);
    gap: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
    z-index: 199;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    font-size: 16px;
    opacity: 0.85;
  }

  /* Services — stack vertically */
  .s-services__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .s-services__image {
    aspect-ratio: 16 / 9;
    position: static;
  }

  /* Problem — 820px でも2カラム維持。余白縮小で可読性を確保 */
  .s-problem__content {
    padding: var(--space-xl) var(--space-md) var(--space-xl) var(--space-md);
    gap: var(--space-lg);
  }

  /* About — stack vertically */
  .s-about__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .s-about__image {
    aspect-ratio: 4 / 3;
  }

  /* Services / Why Us — KV（.s-kv）を1カラムに積み上げ、イラストをテキストの下に */
  .s-kv {
    padding-top: 132px;
  }
  .s-kv__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .s-kv__illustration {
    aspect-ratio: 16 / 9;
  }

  /* Why Us — stack vertically, comparison table少し詰める */
  .s-why-hero {
    padding-top: 132px;
  }
  .s-why-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .s-why-founder__inner,
  .s-about-founder__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .s-why-founder__image,
  .s-about-founder__image {
    aspect-ratio: 4 / 3;
  }
  .s-case-studies__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .s-comparison-table th,
  .s-comparison-table td {
    padding: var(--space-sm);
    font-size: 14px;
  }

  /* Offer — stack vertically (image below text) */
  .s-offer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .s-offer__image {
    aspect-ratio: 16 / 9;
  }

  /* Proof — single column */
  .s-proof__cards {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* Footer — 2-col */
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
  .site-footer__cta {
    grid-column: 1 / -1;
  }

  /* Services page — stack What it is / Includes, and steps */
  .s-service__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .s-service__steps-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .s-service__photo         { height: 50vh; min-height: 360px; }
  .s-service__photo--tall   { height: 64vh; min-height: 440px; }
  .s-service__photo--quiet  { height: 36vh; min-height: 300px; }
  .s-service__story {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .s-service__story-image {
    aspect-ratio: 16 / 9;
  }
  /* 1カラムに積み上がるため、03のsticky画像は解除 */
  .s-service__story--list .s-service__story-image {
    position: static;
  }
}


/* ================================================================
   RESPONSIVE — 768px
   ================================================================ */
@media (max-width: 768px) {
  :root {
    --container-pad: 32px;
  }

  .s-hero__headline {
    font-size: clamp(34px, 9vw, 52px);
  }

  .s-hero__subline br {
    display: none;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .site-footer__cta {
    grid-column: auto;
  }
}


/* ================================================================
   RESPONSIVE — 430px (Mobile)
   ================================================================ */
@media (max-width: 430px) {
  :root {
    --container-pad: 20px;
    --space-lg:      36px;
    --space-xl:      52px;
    --space-2xl:     72px;
    --space-3xl:    320px;
  }

  body { font-size: 16px; }

  /* Header */
  .header-inner { height: 60px; }
  .site-nav { top: 60px; }
  .wordmark { margin-right: var(--space-md); }
  .wordmark__logo { height: 26px; }
  .header-cta { padding: 10px 18px; font-size: 11px; }

  /* Hero */
  .s-hero {
    padding-bottom: var(--space-xl);
    align-items: flex-end;
  }
  .s-hero__content { padding-top: 0; }

  /* Services */
  .s-services__list li { font-size: 15px; }

  /* Problem — 430px では縦積みに切り替え */
  .s-problem__inner { grid-template-columns: 1fr; }
  .s-problem__image { min-height: 240px; }
  .s-problem__image img { min-height: 240px; }
  .s-problem__content {
    padding: var(--space-lg) var(--container-pad);
    gap: var(--space-md);
  }
  .s-problem__q { font-size: 16px; }
  .s-problem__a { font-size: 14px; }

  /* Offer */
  .s-offer__pitch { font-size: clamp(24px, 7vw, 34px); }

  /* Testimonials */
  .testimonial-card { padding: var(--space-md); }
  .testimonial-card__quote { font-size: 14px; }

  /* Soft capture form — stack on mobile */
  .s-capture__form { flex-direction: column; }
  .s-capture__input { min-width: 0; width: 100%; }
  .s-capture__form .btn { width: 100%; text-align: center; }

  /* Closing — 縦積み、写真は横長比率で表示 */
  .s-closing__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .s-closing__image {
    aspect-ratio: 4 / 3;
    align-self: auto;
  }
  .s-closing__line { font-size: clamp(22px, 7vw, 32px); }

  /* Services page */
  /* RETIRED 2026-08-10: .s-page-hero { min-height: 420px; } — 新KV(.s-kv)に移行 */
  .s-kv { padding-top: 108px; }
  .s-service { padding-bottom: var(--space-xl); }
  .s-service__photo         { height: 42vh; min-height: 300px; }
  .s-service__photo--tall   { height: 52vh; min-height: 360px; }
  .s-service__photo--quiet  { height: 32vh; min-height: 260px; }
  .s-service__line { font-size: clamp(22px, 7vw, 30px); }
  .s-service__story-headline { font-size: clamp(24px, 7vw, 32px); }
  .s-service__quiet-line { font-size: clamp(22px, 6.5vw, 28px); }
  .s-service__plan-grid { grid-template-columns: 1fr; }
  .s-pricing-table th,
  .s-pricing-table td { font-size: 13px; padding: var(--space-xs) var(--space-sm); }
  .s-services-closing { padding: var(--space-xl) 0; }

  /* Why Us page */
  .s-why-hero { padding-top: 108px; }
  .s-why-hero__note { font-size: 16px; }
  .s-comparison-table th,
  .s-comparison-table td { font-size: 13px; padding: var(--space-xs) var(--space-sm); }
  .s-why-founder__quote { font-size: clamp(22px, 7vw, 28px); }
  .s-case-studies__headline { font-size: clamp(24px, 7vw, 32px); }
  .s-why-closing { min-height: 50vh; }
  .s-why-closing__line { font-size: clamp(24px, 7vw, 32px); }

  /* About page（KVの.s-kvは既にServices page側の430pxルールで対応済み） */
  .s-about-believe__headline { font-size: clamp(22px, 7vw, 28px); }
  .s-about-closing { min-height: 50vh; }
  .s-about-closing__line { font-size: clamp(24px, 7vw, 32px); }

  /* Contact page（KVの.s-kvは既にServices page側の430pxルールで対応済み） */
  .s-contact-form-section__headline { font-size: clamp(24px, 7vw, 32px); }
}


/* ================================================================
   ANIMATION LAYER — page-bg / intro / ripple / reveal / parallax
   ================================================================ */

/* --------------------------------------------------
   VIEW TRANSITIONS — ページ遷移時のぼかしフェード（2026-08-05〜06）
   同一オリジンのページ遷移（index.html⇔services.html等、サイト内
   リンク全般）に適用。CSSのみ・JS不使用。@view-transitionはChrome/
   Edge系のみ対応で、Safari/Firefoxは自動的に通常のページ遷移に
   フォールバックする（ユーザー確認済み・許容）。
   秒数は当初1sで実装したが体感が短く感じられたため3sで再検証し、
   3sを正式採用（ユーザー確認済み）。
   -------------------------------------------------- */
@view-transition {
  navigation: auto;
}

/* prefers-reduced-motion時は、ぼかしアニメーションを定義せず
   ブラウザ標準のシンプルなクロスフェードにフォールバックさせる
   （[data-reveal]・.has-parallaxと同じ配慮）。 */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: view-transition-blur-out 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  ::view-transition-new(root) {
    animation: view-transition-blur-in 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  @keyframes view-transition-blur-out {
    from { opacity: 1; filter: blur(0); }
    to   { opacity: 0; filter: blur(14px); }
  }

  @keyframes view-transition-blur-in {
    from { opacity: 0; filter: blur(14px); }
    to   { opacity: 1; filter: blur(0); }
  }
}

/* --------------------------------------------------
   #page-bg — JS-driven cream↔ink background layer
   body は transparent。各セクションの bg も transparent にして
   この固定レイヤーを透過して見せる。
   -------------------------------------------------- */
#page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--color-ink); /* ページ最上部は INK zone — JS上書き前のチラつき防止 */
  pointer-events: none;
  /* transition なし — JSが直接補間するためCSSトランジション不要 */
}

/* Servicesページ用 — Ink領域（.s-page-hero）は写真+背景色で自己完結して
   不透明なため、#page-bg の色に依存しない。透明セクション（.s-service等）
   の背後は常にCreamでよいため、スクロール連動させず固定色にする。 */
/* #page-bg（IDセレクタ、詳細度1,0,0）の background-color: var(--color-ink) より
   確実に優先させるため、#page-bg.page-bg--cream の複合セレクタ（詳細度1,1,0）にする。
   .page-bg--cream 単体（詳細度0,1,0）だとIDセレクタに負けて反映されないので注意。 */
#page-bg.page-bg--cream {
  background-color: var(--color-cream);
}

/* すべてのコンテンツを page-bg より前面に
   .site-header は既存の position: fixed; z-index: 200 を保持するため除外 */
main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------
   #intro-overlay — opening animation
   -------------------------------------------------- */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #0a0801;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  transition: opacity 0.9s var(--ease-out);
}

#intro-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.intro-overlay__logo {
  height: 40px;
  width: auto;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

.intro-overlay__logo.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #intro-overlay { display: none; }
}

/* --------------------------------------------------
   #ripple-canvas — cursor ripple effect
   -------------------------------------------------- */
#ripple-canvas {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}

/* --------------------------------------------------
   [data-reveal] — scroll-triggered fade-in
   -------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
  }

  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  [data-reveal][data-delay="1"] { transition-delay: 0.15s; }
  [data-reveal][data-delay="2"] { transition-delay: 0.30s; }
  [data-reveal][data-delay="3"] { transition-delay: 0.45s; }
}

/* --------------------------------------------------
   .has-parallax — image parallax container
   -------------------------------------------------- */
.has-parallax {
  overflow: hidden;
}

.has-parallax > img {
  height: 130%;
  width: 100%;
  object-fit: cover;
  will-change: transform;
}

/* --------------------------------------------------
   .s-logo-mark — brand logo section
   -------------------------------------------------- */
.s-logo-mark {
  background-color: transparent; /* page-bg（INK zone）を透過して見せる */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-logo-mark__logo-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4xl) var(--container-pad) 60px;
}

.s-logo-mark__logo {
  height: 80px;
  width: auto;
  display: block;
  margin: 0 auto;
  opacity: 0.9;
}

/* Free Guide — dark（INK）背景上のテキスト・フォーム */
.s-logo-mark__guide {
  width: 100%;
  padding: 60px 0 var(--space-4xl);
}

.s-logo-mark__guide .section-label {
  color: rgba(242, 237, 228, 0.55);
}

.s-logo-mark__guide .s-capture__headline {
  color: var(--color-cream);
}

.s-logo-mark__guide .s-capture__body {
  color: rgba(242, 237, 228, 0.60);
}

@media (max-width: 430px) {
  .s-logo-mark__logo { height: 56px; }
  .s-logo-mark__logo-wrap { padding: var(--space-3xl) var(--container-pad); }
}