/* ==========================================================
   DARUN LLC — Official Site / styles.css
   PHASE 2A 再設計版（2026-08-04）

   方針
   ・黒基調 × 落ち着いたオレンジ。新色は追加しない
   ・本文16pxを基準にタイポグラフィを一段拡大
   ・カードを減らし、罫線と余白で構造をつくる
   ・1画面1メッセージ。セクション余白は最大200px
   ・サービス詳細ページ（services.css）が参照する変数・
     共通クラス名は互換のまま維持する
   ========================================================== */

:root {
  /* ---- Color ---- */
  --bg: #050505;
  --bg-panel: #0A0A0A;
  --bg-input: #101010;
  --text-main: #F2EFEA;
  --text-sub: #A9A59D;
  --text-muted: #7D7A74;
  --line: rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.06);

  --accent: #C9822F;
  --accent-bright: #E09A45;
  --accent-line: rgba(201, 130, 47, 0.55);
  --accent-line-soft: rgba(201, 130, 47, 0.30);

  /* ---- Font family ---- */
  --font-serif: "Noto Serif JP", serif;
  --font-sans: "Noto Sans JP", sans-serif;
  --font-en-serif: "Cormorant Garamond", "Noto Serif JP", serif;
  --font-en: "Inter", sans-serif;

  /* ---- Font size scale ---- */
  --fs-body: 16px;
  --fs-lead: clamp(16px, 1.4vw, 18px);
  --fs-small: 13px;
  --fs-label: 13px;
  --fs-hero: clamp(32px, 3.6vw, 52px);
  --fs-creed: clamp(17px, 1.6vw, 22px);
  --fs-h2: clamp(24px, 2.4vw, 34px);
  --fs-h3: clamp(18px, 1.6vw, 21px);
  --fs-num: 18px;
  --fs-price: clamp(32px, 3.4vw, 46px);
  --fs-cta: 15px;

  /* ---- Layout ---- */
  --container: 1320px;
  --container-wide: 1400px;
  --container-text: 720px;
  --gutter: clamp(24px, 5vw, 80px);
  --header-h: 80px;

  /* ---- Space scale ---- */
  --space-hero: clamp(140px, 13vw, 220px);
  --section-space-large: clamp(120px, 11vw, 200px);
  --section-space-medium: clamp(96px, 8vw, 152px);
  --section-space-small: clamp(72px, 6vw, 112px);
  --heading-gap: clamp(20px, 1.8vw, 26px);
  --content-gap: clamp(32px, 3vw, 48px);
}

/* ==========================================================
   PHASE 2E：メインページ（サービス詳細ページを除く）の
   余白を約10%縮小する上書き。
   ・:root の値はサービス3ページ（services.css）も参照しているため、
     ここでは body:not(.service-page) にスコープし、
     トップページのみへ適用する（サービスページは無変更）。
   ・clamp() の最小値・可変値・最大値をすべて同率で縮小し、
     レスポンシブな比率そのものは変更しない。

   PHASE 3（2026-08-06）：余白・文字密度・視覚重心の再調整。
   現在公開中のDARUN公式HP（darun.co.jp）のような「余白が広く、
   情報を詰め込んで見せない」密度感へ近づけるため、上記PHASE 2Eの
   余白トークンに加えて、見出し・ラベル・本文・番号・価格・ボタン文字の
   フォントサイズトークンもここで約6〜12%縮小する。
   ・PROBLEMセクションは既に最終確定済みのため、このブロックの影響を
     受ける4箇所（.section-problem／.section-problem .en-label／
     .section-problem .section-title／.problem-title／.problem-num）は、
     このブロックの新しい値ではなく「変更前の値」をリテラルで
     個別に固定している（本ファイル内の該当セレクタを参照）。
   ========================================================== */
body:not(.service-page) {
  --gutter: clamp(22px, 4.5vw, 72px);
  --header-h: 72px;
  --space-hero: clamp(112px, 10.4vw, 176px);
  --section-space-large: clamp(98px, 9vw, 164px);
  --section-space-medium: clamp(78px, 6.6vw, 124px);
  --section-space-small: clamp(59px, 4.9vw, 92px);
  --heading-gap: clamp(16px, 1.45vw, 21px);
  --content-gap: clamp(26px, 2.4vw, 39px);

  /* Typography（PHASE 3で新規追加。:root既定値からの上書き） */
  --fs-body: 15px;
  --fs-lead: clamp(15px, 1.3vw, 17px);
  --fs-label: 12px;
  /* 2026-08-09：REFERENCE比較により、メインコピーがまだ左側の視覚重量を
     強めていたため、約7〜8%縮小（43px→40px）。改行構成・思想コピー・
     本文・CTAは変更しない。 */
  --fs-hero: clamp(28px, 2.8vw, 40px);
  --fs-creed: clamp(15px, 1.35vw, 19px);
  --fs-h2: clamp(22px, 2.2vw, 31px);
  /* 2026-08-07：現在の唯一の参照元は.approach-title。APPROACHのステップ
     タイトルの視認性をわずかに上げるため、上限を20px→21pxへ最終微調整 */
  --fs-h3: clamp(18px, 1.6vw, 21px);
  --fs-num: 16.5px;
  --fs-price: clamp(29px, 3.1vw, 42px);
  --fs-cta: 14px;
}

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

html {
  scroll-behavior: smooth;
}

main section[id],
main [id] {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

html, body {
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  letter-spacing: 0.08em;
  line-height: 2.0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

ul, ol { list-style: none; }

:focus-visible {
  outline: 1px solid var(--accent-line);
  outline-offset: 3px;
}

/* ==========================================================
   Common
   ========================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
}

.section-panel {
  background: var(--bg-panel);
}

.en-label {
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--heading-gap);
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  letter-spacing: 0.12em;
  line-height: 1.7;
  color: var(--text-main);
}

.section-lead {
  margin-top: 25px;
  max-width: 41em;
  font-size: var(--fs-lead);
  letter-spacing: 0.1em;
  color: var(--text-sub);
  line-height: 2.0;
}

.section-head {
  text-align: center;
}

.section-head.is-left {
  text-align: left;
}

.section-head .section-lead {
  margin-inline: auto;
}

.body-text {
  margin-top: 28px;
  max-width: var(--container-text);
  font-size: var(--fs-body);
  letter-spacing: 0.09em;
  color: var(--text-sub);
  line-height: 2.05;
}

/* PHASE 3（2026-08-06）：トップページのみ、本文ブロック幅をやや狭める
   （サービス3ページの--container-textは無変更） */
body:not(.service-page) .body-text {
  max-width: 660px;
}

/* スマートフォン専用の改行 */
.sp-only { display: none; }

/* ==========================================================
   日本語の改行制御

   ・見出し・短いラベルは語中で分割させない（word-break: keep-all）
     → 実測で各画面幅に収まることを確認済みの要素にのみ適用する
   ・本文は日本語の通常折り返しを維持しつつ、小書き仮名・長音記号の
     行頭禁則を厳格化する（line-break: strict）
   ・語中で切りたくない短い語句のみ .nb で保護する
   ========================================================== */

/* 語中で分割させない（見出し・ラベル） */
.hero-title,
.hero-creed,
.section-title,
.problem-title,
.approach-title,
.service-title,
.plan-role,
.plan-name,
.plan-term,
.plan-flag,
.message-sub,
.pull-quote,
.future-title,
.future-name,
.about-en-title,
.about-row dt,
.contact-title {
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
}

/* 本文：通常の折り返しは維持し、禁則のみ厳格化 */
.hero-desc,
.section-lead,
.body-text,
.problem-text,
.approach-text,
.service-text,
.plan-text,
.plan-note,
.future-text,
.about-lead,
.about-row dd,
.contact-note,
.form-status,
.check,
.mobile-menu a {
  overflow-wrap: normal;
  line-break: strict;
}

/* 行長の均等化（対応ブラウザのみ・非対応でも表示は崩れない） */
.section-title,
.problem-title,
.approach-title,
.service-title,
.plan-role,
.contact-title,
.message-sub,
.pull-quote {
  text-wrap: balance;
}

/* 途中で切りたくない短い語句（全セクション共通） */
.nb {
  white-space: nowrap;
}

/* Hero内の.nbのみ、背景写真の黒い矩形状の見え方の原因調査のため
   文字以外の視覚効果（背景・影・フィルター・合成モード等）を明示的にゼロ指定。
   Hero以外のセクションの.nbには影響しない。 */
.hero .nb {
  display: inline;
  background: transparent;
  background-image: none;
  box-shadow: none;
  filter: none;
  backdrop-filter: none;
  border: 0;
  isolation: auto;
}

/* ==========================================================
   Buttons / CTA
   ========================================================== */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 56px;
  padding: 17px 44px;
  background: rgba(201, 130, 47, 0.04);
  color: var(--accent);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-cta);
  letter-spacing: 0.2em;
  line-height: 1.4;
  border: 1px solid var(--accent-line);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.35s ease, border-color 0.35s ease,
              color 0.35s ease, box-shadow 0.35s ease;
}

/* PHASE 3（2026-08-06）：トップページのみ、CTAがHero内で強くなりすぎない
   よう控えめに（タップ領域は44px以上を維持。サービス3ページは無変更） */
body:not(.service-page) .btn-outline {
  min-height: 50px;
  padding: 15px 38px;
}

.btn-outline .arrow {
  transition: transform 0.3s ease;
}

.btn-outline:hover {
  background: rgba(201, 130, 47, 0.11);
  border-color: var(--accent);
  color: var(--accent-bright);
  box-shadow: 0 0 22px rgba(201, 130, 47, 0.14);
}

.btn-outline:hover .arrow {
  transform: translateX(6px);
}

.btn-outline:active {
  transform: translateY(1px);
}

.btn-header {
  min-height: 44px;
  padding: 11px 26px;
  font-size: 13px;
  letter-spacing: 0.16em;
}

body:not(.service-page) .btn-header {
  padding: 10px 22px;
  font-size: 12px;
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px; /* タップ領域を確保 */
  font-size: var(--fs-cta);
  letter-spacing: 0.18em;
  color: var(--text-main);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 12px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.btn-text .arrow {
  transition: transform 0.3s ease;
}

.btn-text:hover {
  color: var(--accent-bright);
  border-color: var(--accent-line);
}

.btn-text:hover .arrow {
  transform: translateX(5px);
}

.arrow {
  font-family: var(--font-en);
  font-weight: 300;
  letter-spacing: 0;
}

/* ==========================================================
   Logo
   ========================================================== */
.site-logo {
  display: block;
  width: 128px;
  height: auto;
  object-fit: contain;
}

/* PHASE 3（2026-08-06）：トップページのみ、ロゴが主張しすぎないよう
   約12.5%縮小する（サービス3ページは無変更） */
body:not(.service-page) .site-logo {
  width: 112px;
}

/* ==========================================================
   Header
   ========================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(5, 5, 5, 0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.site-header.is-scrolled {
  background: rgba(5, 5, 5, 0.92);
  border-bottom-color: var(--line-soft);
}

.header-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 56px);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.6vw, 44px);
  margin-left: auto;
}

/* PHASE 3（2026-08-06）：トップページのみ、ナビをより繊細に
   （サービス3ページは無変更）
   2026-08-09：元デザイン基準（参考画像）の実測により、ナビ項目間の
   余白が詰まりすぎていたため、参考画像の間隔（1470px幅で約48px）に
   合わせて再調整。フォントサイズ・字間は元々一致していたため変更なし。 */
body:not(.service-page) .header-nav {
  gap: clamp(22px, 3.3vw, 48px);
}

.header-nav a {
  position: relative;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-sub);
  transition: color 0.35s ease;
  padding-bottom: 5px;
}

body:not(.service-page) .header-nav a {
  font-size: 12px;
  letter-spacing: 0.18em;
}

.header-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent-line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}

.header-nav a:hover { color: var(--text-main); }
.header-nav a:hover::after { transform: scaleX(1); }

.header-nav a.is-current { color: var(--text-main); }
.header-nav a.is-current::after {
  transform: scaleX(1);
  opacity: 0.45;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 1px;
  background: var(--text-main);
  margin: 0 auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: rgba(5, 5, 5, 0.97);
  padding: 44px 28px 56px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.is-open { display: block; }

body.menu-open { overflow: hidden; }

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 480px;
  margin-inline: auto;
}

.mobile-menu a {
  font-family: var(--font-en);
  font-size: 17px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-sub);
  padding: 18px 4px;
  border-bottom: 1px solid var(--line-soft);
  transition: color 0.3s ease;
}

.mobile-menu a:active { color: var(--text-main); }

.mobile-menu .mobile-cta {
  margin-top: 24px;
  align-self: stretch;
  font-family: var(--font-sans);
  text-transform: none;
  border-bottom: 1px solid var(--accent-line);
  padding: 18px 32px;
}

/* ==========================================================
   Hero
   ========================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--header-h);
  min-height: 100vh;
  min-height: 100svh;
}

.hero-visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  overflow: hidden;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  animation: heroDrift 26s ease-out forwards;
}

@keyframes heroDrift {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      var(--bg) 0%,
      rgba(5, 5, 5, 0.90) 14%,
      rgba(5, 5, 5, 0.30) 46%,
      rgba(5, 5, 5, 0) 72%),
    linear-gradient(to bottom,
      rgba(5, 5, 5, 0.55) 0%,
      rgba(5, 5, 5, 0) 28%,
      rgba(5, 5, 5, 0) 66%,
      rgba(5, 5, 5, 0.66) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-hero) var(--gutter) clamp(96px, 9vw, 140px);
}

.hero-text {
  max-width: 760px;
  animation: heroRise 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-label {
  margin-bottom: 22px;
}

/* 主コピー：顧客が得る価値
   2026-08-09：本文が3ブロックへ増えたことでHero全体の縦の重量感が増したため、
   文言・文字サイズは変えず、見出しのline-heightのみ詰めて視覚的な軽さを
   取り戻す（1.58→1.4。43pxフォントでも行間が窮屈にならない範囲）。 */
.hero-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-hero);
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--text-main);
}

/* 320〜450px幅の折り返し制御用。PC（861px以上）ではbr要素を隠し、
   従来どおり「数字では測れない価値を、」でひとつながりに表示する
   （860px以下の各幅別の表示切り替えは@media側で上書きする）。 */
.hero-title .ht-br-a { display: none; }

/* 思想コピー：DARUNの役割（主コピーの約1/2.4・色も一段落とす） */
.hero-creed {
  position: relative;
  margin-top: 24px;
  padding-left: 22px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-creed);
  letter-spacing: 0.16em;
  line-height: 1.7;
  color: #C3BFB8;
}

.hero-creed::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1px;
  height: 1.4em;
  background: var(--accent);
}

/* 2026-08-09：本文が2段落→3段落へ増えたことに伴い、line-height・段落間隔を
   詰めて全体の縦の重量感を抑える（文言・文字サイズは変更しない）。
   line-height 1.95→1.72、段落前余白 40px→32px。 */
.hero-desc {
  margin-top: 32px;
  max-width: 38em;
  font-size: var(--fs-body);
  letter-spacing: 0.09em;
  line-height: 1.72;
  /* 説明文のみ、基準の--text-sub（#A9A59D）よりHLS明度を約6%引き上げ、
     黒背景での可読性を高める。見出し（--text-main: #F2EFEA）よりは
     明確に控えめな明るさを維持し、静かなトーンを崩さない。 */
  color: #B2AFA7;
}

/* 段落間の余白（従来36px→28pxへ詰め、3段落構成でも間延びしないようにする） */
.hero-desc + .hero-desc {
  margin-top: 28px;
}

/* 2026-08-09：本文増量分をline-height・段落間隔で吸収した上で、CTAまでの
   距離も詰め、CTAがファーストビュー下端寄りに沈まないようにする。 */
.hero-cta {
  margin-top: clamp(32px, 3vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 2.1vw, 32px);
}

/* PC限定：Hero主情報ブロックの縦位置の中央揃え補正
   （背景画像・セクション全体高・文言・文字サイズ・CTAデザイン・モバイル表示は変更しない）
   .hero-inner自体の上下パディングが非対称（space-hero > clampの下余白）なため、
   従来はHero内で主情報ブロックが可視領域の中心よりも下に表示されていた。
   ここではhero-inner自身をHeroの縦幅いっぱいに広げ、内部でmain情報ブロックを
   改めて中央（かつ中心よりわずかに上）に配置し直す。左右のガター・水平位置は不変。
   2026-08-07 PHASE 3密度調整に伴う再計測で、可視領域（ヘッダー除外）に対する
   テキストブロック中心が約44%（中央より約50px上）となっていたため、
   padding-bottomの係数を0.03→-0.03へ調整し、視覚重心を約47%（中央近傍）へ
   補正した。header-h（実測72〜73px）が常にこの負のvh項を上回るため、
   計算結果（padding-bottom）はどのビューポート高でも非負を維持する。 */
@media (min-width: 861px) {
  .hero-inner {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: calc(-0.03 * 100vh + var(--header-h));
  }

  /* 2026-08-09：参考画像の実測により、Hero本文の開始位置がヘッダーの
     ロゴ位置とほぼ揃ってしまっており、元デザイン基準（本文がロゴより
     大きく右へインセットされた、余白の大きい構図）よりも詰まっていた
     ため、Hero本文（.hero-text）にのみ追加の左インセットを加える。
     他セクションの共通ガター（--gutter）は変更しないため、
     PROBLEM/APPROACH等の中央配置・余白には影響しない。 */
  .hero-text {
    margin-left: clamp(36px, 4.5vw, 66px);
  }
}

/* ==========================================================
   Problem
   ========================================================== */
/* 2026-08-07 再調整：全体の視覚重心・密度バランスの見直しに伴い、
   2026-08-06に確定した値から「上部余白を減らし、見出しと4カラムを
   縦方向に近づけ、問題提起としての密度を上げる」方向で更新した
   （ご指示：優先度1）。左右対称性（.problem-item関連セレクタ）は
   一切変更していない。フォントサイズトークン（--fs-label/--fs-h2等）の
   PHASE 3縮小の影響を受けないよう、引き続きリテラル値で固定している。 */
.section-problem {
  background: var(--bg);
  padding: clamp(88px, 8vw, 148px) 0 clamp(96px, 8.8vw, 160px);
  border-top: 1px solid var(--line-soft);
}

.section-problem .en-label {
  font-size: 13px;
  margin-bottom: clamp(18px, 1.6vw, 23px);
}

.section-problem .section-title {
  font-size: clamp(24px, 2.4vw, 34px);
}

/* 見出しブロックと4カラム群を縦方向に近づける（56〜88px→42〜66px→38〜58px。
   見出しと4カラムが「別々の要素」ではなく「1つの塊」として静かに収束して
   見えるよう、2026-08-07再調整でさらにわずかに詰めた） */
.section-problem .section-head {
  margin-bottom: clamp(38px, 3.4vw, 58px);
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

/* 2026-08-07 視覚センター再調整：外枠・カラム幅・見出しは数値上完全対称
   （回帰テスト0px）だったが、列内パディングがclamp(20,2.2vw,36)のときは
   本文が「2,3,3,2行」という非対称な行数パターンで折り返され、4カラムの
   下端が凸凹（02・03列だけ1行分下に伸びる）になっていた。これが数値では
   捉えられない「文章量差による視覚的な非対称」の実体だったため、列内
   左右パディングをclamp(14,1.6vw,26)へ詰めて本文の折返し幅を広げ、
   1440pxで4カラム全ての本文を2行に統一した（1024px以下は別ブレイク
   ポイントの規則を使用しており、この変更の影響を受けない）。 */
.problem-item {
  min-width: 0;
  padding: 4px clamp(14px, 1.6vw, 26px);
  border-left: 1px solid var(--line-soft);
}

/* 2026-08-07 第4ラウンド：1列目が完全フラット（左paddingゼロ）だと、
   番号（01〜04）の間隔が「1-2間だけ広い（約322px）／2-3・3-4間は約298px」と
   わずかに不揃いになり、01が外側へ、02・03が内側に寄って見えていた。
   1列目にごく小さな左paddingを加えて番号の間隔リズムを揃え、
   「01と04だけ外に逃げて見える」印象を和らげた（本文の折返し行数
   （2行×4）には影響しない範囲の値） */
.problem-item:first-child {
  border-left: none;
  padding-left: 12px;
}

/* 4列時：右端カラムも左端カラムと同じく、内側の罫線側にだけ余白を持たせ、
   コンテナの外側エッジには均等にフラットで揃える（左端が0インセットなのに
   右端だけpaddingで内側へ寄っていた非対称を解消し、視覚的な中央を揃える）。
   2026-08-07 第4ラウンド：1列目と同じ理由で、右端にも同量の小さな
   paddingを加え、番号の間隔リズムを左右対称に揃えた */
.problem-item:last-child {
  padding-right: 12px;
}

/* 2026-08-07：番号の存在感を少し上げる（18px→19px）。--fs-numトークンは
   .plan-stepとも共有のため、ここではリテラル値のみ変更し、Pricingには影響しない */
.problem-num {
  font-family: var(--font-en);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-bottom: 20px;
  line-height: 1;
}

/* 2026-08-07：カードタイトルの存在感を少し上げる（21px→22px上限） */
.problem-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 22px);
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: var(--text-main);
  margin-bottom: 16px;
}

/* 2026-08-07 第4ラウンド：APPROACH/SERVICESと同じトーンで、本文の視認性を
   ごくわずかに上げた（var(--text-sub) #A9A59D → 単独リテラル #AFABA3。
   文字サイズ・行間・letter-spacingは変更していない） */
.problem-text {
  font-size: 15px;
  letter-spacing: 0.08em;
  color: #AFABA3;
  line-height: 2.0;
}

/* ==========================================================
   Split（Philosophy / Message 共通）
   ========================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  align-items: stretch;
}

.split-text {
  padding-top: var(--section-space-large);
  padding-bottom: var(--section-space-large);
  padding-right: var(--gutter);
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  align-self: center;
}

.split-image {
  position: relative;
  min-height: 100%;
}

.split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.split-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--bg) 0%, rgba(5, 5, 5, 0) 26%),
    linear-gradient(to bottom, rgba(5, 5, 5, 0.4) 0%, rgba(5, 5, 5, 0) 30%, rgba(5, 5, 5, 0) 72%, rgba(5, 5, 5, 0.5) 100%);
}

.section-philosophy {
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
}

/* 旧VALUEを吸収した結びの一文 */
.pull-quote {
  position: relative;
  margin-top: clamp(36px, 3.6vw, 50px);
  padding-left: 24px;
  max-width: 30em;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 19px);
  letter-spacing: 0.12em;
  line-height: 1.95;
  color: #C3BFB8;
}

.pull-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.35em;
  width: 1px;
  background: var(--accent-line-soft);
}

/* ==========================================================
   Approach（旧 WHY DARUN）
   ========================================================== */
/* 2026-08-07 再調整（優先度2）：3工程が「静かなメモ」ではなく「設計構造」に
   見えるよう、上部余白と見出し-ステップ間の距離を詰めた。--section-space-large
   トークンは他セクション（Services/Pricing/Future）とも共有のため、Approach単独の
   影響に留めるためリテラル値で上書きしている（トークン自体は変更していない）。 */
.section-approach {
  background: var(--bg-panel);
  border-top: 1px solid var(--line-soft);
  padding: clamp(84px, 7.6vw, 140px) 0;
}

/* 2026-08-07 最終微調整：見出しと3ステップの距離をさらにわずかに詰める
   （clamp(48,4.4vw,74)→clamp(44,4vw,68)→clamp(40,3.6vw,62)。見出しと
   3ステップが「説明」ではなく「1つの設計構造」として収束して見えるように） */
.section-approach .section-head {
  margin-bottom: clamp(40px, 3.6vw, 62px);
}

/* 3カラムが横に広がって見えないよう、列間を少し詰めて構造体としての
   まとまりを強めた（clamp(28,3vw,56)→clamp(24,2.6vw,48)） */
.approach-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 48px);
  max-width: 1160px;
  margin-inline: auto;
}

/* 2026-08-07 第4ラウンド：線・起点と番号群の距離をわずかに詰め、
   「線から続く1つの流れ」としての結束感を少しだけ高めた（31px→28px） */
.approach-step {
  position: relative;
  min-width: 0;
  padding-top: 28px;
}

/* 3工程を貫く細い線と起点 */
.approach-step::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: calc(clamp(24px, 2.6vw, 48px) * -1);
  height: 1px;
  background: var(--line);
}

.approach-step:last-child::before { right: 0; }

/* 2026-08-07：ドットをわずかに大きくし、線・ドット・ステップの関係を
   少し効かせる（9px→10px。色・線幅・世界観は変更していない） */
.approach-step::after {
  content: "";
  position: absolute;
  top: 0.5px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--accent-line);
}

/* 2026-08-07：番号・アイコンとタイトルの間隔をわずかに詰め、
   「番号→アイコン→タイトル→本文」が1つの塊として収束して見えるようにした */
.approach-head {
  display: flex;
  align-items: center;
  gap: 27px;
  min-height: 50px;
  margin-bottom: 24px;
}

/* 2026-08-07：番号の存在感を少し上げる。--fs-numトークンは.plan-stepとも
   共有のため、ここではリテラル値のみ変更し、Pricingには影響しない */
.approach-num {
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: var(--accent);
}

/* 09〜11・04〜08のアイコン素材には薄い枠が焼き込まれているため、
   CSSクリップで枠の内側だけを表示する（素材自体は無加工） */
.approach-icon,
.service-icon {
  clip-path: inset(28% 23%);
  transform: scale(1.9);
}

/* 2026-08-07：アイコンを少し見やすくする（42px→45px） */
.approach-icon {
  width: 45px;
  height: 45px;
  object-fit: contain;
}

.approach-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  letter-spacing: 0.1em;
  line-height: 1.75;
  color: var(--text-main);
  margin-bottom: 14px;
}

/* 2026-08-07 最終微調整：文字サイズはフォントサイズ下限維持のため変更せず、
   行間をわずかに詰め、色をほんの少し明るくして「細く弱い」印象を和らげた
   （var(--text-sub) #A9A59D → 単独リテラル #AFABA3。他要素には影響しない）
   2026-08-07 第3ラウンド：タイトルとの距離をわずかに詰め（16px→14px）、
   行間をさらにわずかに詰めて（1.95→1.9）本文の密度感を少しだけ上げた
   （文字サイズ・色相自体は変更していない） */
.approach-text {
  font-size: 15px;
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: #AFABA3;
}

/* ==========================================================
   Services（5領域）
   ========================================================== */
/* 2026-08-07 再調整（優先度3）：5領域を「情報一覧」ではなく構造体として
   見せるため、上部余白・見出し間隔・カラム間隔を詰め、アイコンとタイトルの
   存在感を上げた。--section-space-largeは他セクションとも共有のため、
   Services単独の影響に留めるためリテラル値で上書きしている。 */
.section-services {
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  padding: clamp(88px, 8vw, 148px) 0;
}

/* 2026-08-07 第3ラウンド：見出しと5領域の距離をわずかに詰め、
   5カラムが「横に散った一覧」ではなく1つの領域群として収束して見えるように */
.section-services .section-head {
  margin-bottom: clamp(46px, 4.1vw, 70px);
}

/* 2026-08-07 第4ラウンド：コンテナ幅いっぱいに5列が edge-to-edge で
   広がっていたのを、APPROACHの3カラム（max-width:1160px）と同じ発想で
   少しだけ内側へ絞り、静かな余白のフレームを持たせた。5領域が「横に
   散った一覧」ではなく「中央にまとまった構造」に見えるようにするため
   （カラム幅は均等のまま、外側マージンのみわずかに増やす方向） */
.services-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  max-width: 1160px;
  margin-inline: auto;
}

/* カラム間隔を少し詰める（clamp(13,1.45vw,23)→clamp(11,1.25vw,20)） */
.service-col {
  min-width: 0;
  text-align: center;
  padding: 6px clamp(11px, 1.25vw, 20px);
  border-left: 1px solid var(--line-soft);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-col:first-child {
  border-left: none;
}

.service-col:hover {
  transform: translateY(-4px);
}

/* アイコンをほんの少し大きく（54px→58px）。2026-08-07第3ラウンド：
   アイコンとタイトルの距離を詰め、塊感を少し強めた（27px→22px） */
.service-icon {
  width: 58px;
  height: 58px;
  object-fit: contain;
  margin: 0 auto 22px;
}

/* タイトルの存在感を少し上げる（clamp(14,1.15vw,16)→clamp(15,1.25vw,17)。
   2026-08-07 最終微調整：上限のみさらにわずかに（17px→18px）。
   第3ラウンド：本文との距離を詰め、タイトル-本文の結びつきを強めた（15px→12px） */
.service-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(15px, 1.28vw, 18px);
  letter-spacing: 0.05em;
  line-height: 1.75;
  color: var(--text-main);
  margin-bottom: 12px;
}

/* 2026-08-07 最終微調整：文字サイズ・行間は可読性のため維持し、
   色をほんの少し明るくして本文の濃度を整えた（APPROACHと統一トーン）。
   第3ラウンド：視認性をさらにごくわずかに上げた（#AFABA3→#B4B0A8。
   文字サイズ・行間・letter-spacingは変更していない） */
.service-text {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #B4B0A8;
  line-height: 1.9;
}

/* ==========================================================
   Pricing — DARUN SALES 3プログラムの導線
   ========================================================== */
.section-pricing {
  background: var(--bg-panel);
  border-top: 1px solid var(--line-soft);
  padding: var(--section-space-large) 0;
}

/* 2026-08-07 微調整（優先度6）：見出し群と価格カード群の距離のみ詰める。
   カードの高さ・価格の見え方・中央プランの強調は変更していない */
.section-pricing .section-head {
  margin-bottom: clamp(52px, 4.8vw, 80px);
}

.plan-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 40px clamp(18px, 2.2vw, 40px) 0;
  border-left: 1px solid var(--line-soft);
}

.plan:first-child {
  border-left: none;
  padding-left: 0;
}

/* 3プログラムを貫く1本のオレンジ線 */
.plan::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent-line-soft);
}

.plan::after {
  content: "";
  position: absolute;
  top: 2px;
  left: clamp(18px, 2.2vw, 40px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.plan:first-child::after { left: 0; }

.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 30px;
  margin-bottom: 18px;
}

.plan-step {
  font-family: var(--font-en);
  font-size: var(--fs-num);
  letter-spacing: 0.28em;
  color: var(--accent);
  line-height: 1;
}

.plan-role {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(16px, 1.35vw, 18px);
  letter-spacing: 0.14em;
  line-height: 1.7;
  color: var(--text-main);
  margin-bottom: 23px;
}

.plan-flag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-family: var(--font-en);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
  border: 1px solid var(--accent-line-soft);
  border-radius: 999px;
}

.plan-name {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.18em;
  line-height: 1.6;
  color: var(--text-main);
  margin-bottom: 15px;
}

.plan-text {
  font-size: 15px;
  letter-spacing: 0.08em;
  line-height: 2.0;
  color: var(--text-sub);
  margin-bottom: 32px;
  min-height: 4em;
}

.plan-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}

.plan-price-pre {
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--text-sub);
  margin-right: 6px;
}

.plan-price {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: var(--fs-price);
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--text-main);
}

.plan-unit {
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--text-sub);
}

.plan-term {
  margin-top: 12px;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--text-sub);
}

.plan-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px; /* タップ領域を確保 */
  margin-top: 26px;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  padding-bottom: 10px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.plan-link .arrow { transition: transform 0.3s ease; }

.plan-link:hover {
  color: var(--accent-bright);
  border-bottom-color: var(--accent-line);
}

.plan-link:hover .arrow { transform: translateX(5px); }

/* 主力：SALES DESIGN 90 */
.plan.is-lead {
  background: linear-gradient(to bottom, rgba(201, 130, 47, 0.062), rgba(201, 130, 47, 0) 70%);
}

.plan.is-lead::after {
  top: 0;
  width: 13px;
  height: 13px;
  box-shadow: 0 0 14px rgba(201, 130, 47, 0.5);
}

.plan.is-lead .plan-name {
  font-size: clamp(14px, 1.2vw, 16px);
}

.plan.is-lead .plan-price {
  font-size: clamp(33px, 3.55vw, 48px);
}

.plan-note {
  margin-top: clamp(48px, 4.5vw, 72px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line-soft);
  max-width: 46em;
  font-size: 14px;
  letter-spacing: 0.09em;
  line-height: 2.0;
  color: var(--text-muted);
}

.plan-cta {
  margin-top: clamp(36px, 3.5vw, 52px);
}

/* ==========================================================
   Message
   ========================================================== */
.section-message {
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
}

.section-message .section-title {
  font-size: clamp(19px, 1.8vw, 26px);
  letter-spacing: 0.1em;
}

.message-sub {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.12em;
  line-height: 1.9;
  color: #C3BFB8;
}

.section-message .split-image::after {
  background:
    linear-gradient(to right, var(--bg) 0%, rgba(5, 5, 5, 0) 26%),
    linear-gradient(to bottom, rgba(5, 5, 5, 0.5) 0%, rgba(5, 5, 5, 0.08) 34%, rgba(5, 5, 5, 0.08) 70%, rgba(5, 5, 5, 0.6) 100%);
}

.message-mail {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.mail-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.mail-link {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--accent);
  transition: color 0.3s ease;
}

.mail-link:hover { color: var(--accent-bright); }

/* ==========================================================
   Future
   ========================================================== */
.section-future {
  background: var(--bg-panel);
  border-top: 1px solid var(--line-soft);
  padding: var(--section-space-large) 0;
}

.section-future .section-head {
  margin-bottom: clamp(56px, 5vw, 88px);
}

.future-title {
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: clamp(31px, 3.8vw, 54px);
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: var(--text-main);
}

.future-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.future-cell {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 8px clamp(16px, 1.8vw, 31px);
  border-left: 1px solid var(--line-soft);
}

.future-cell:first-child {
  border-left: none;
  padding-left: 0;
}

.future-icon {
  flex: none;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.future-name {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--text-main);
  margin-bottom: 12px;
}

.future-text {
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.95;
  color: var(--text-sub);
}

/* ==========================================================
   About
   ========================================================== */
.section-about {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  padding: var(--section-space-large) 0 var(--section-space-medium);
}

/* 既存画像 about-light-corridor-bg.png を無加工のまま使用し、
   配置・暗幕・グラデーションのみCSSで調整する。
   画像は縦長（1122×1402）。cover指定で横幅いっぱいに収まるため、
   写真本来の「左＝暗い壁／右＝差し込む光」の構図がそのまま右側に立ち上がる。 */
.about-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("public/assets/about-light-corridor-bg.png");
  background-repeat: no-repeat;
  background-position: 100% 46%;
  background-size: cover;
  pointer-events: none;
}

/* 暗幕：左（本文側）は黒で覆い、右へ向かって直線的な境界なく開いていく。
   2026-08-07：右側の写真がやや明るく主張していたため、60〜100%の暗幕を
   少し強め、左テキストとの主従関係を明確にした（画像ファイル自体・
   構図・object-positionは無変更。オーバーレイの不透明度のみ調整） */
/* 2026-08-07 第3ラウンド：右写真が「主役」に見えすぎないよう、
   72〜88%地点の暗幕をもう一段わずかに強め、左テキストの主役感を
   さらに守った（画像ファイル・構図・object-positionは無変更） */
/* 2026-08-07 第4ラウンド：画像最遠部（88〜100%）をもう一段だけ静かに
   引かせた（0.38→0.42。ここが最終調整で、これ以上は暗くしすぎない） */
.about-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      var(--bg) 0%,
      var(--bg) 38%,
      rgba(5, 5, 5, 0.95) 50%,
      rgba(5, 5, 5, 0.78) 60%,
      rgba(5, 5, 5, 0.55) 72%,
      rgba(5, 5, 5, 0.42) 88%,
      rgba(5, 5, 5, 0.42) 100%),
    linear-gradient(to bottom,
      var(--bg) 0%,
      rgba(5, 5, 5, 0.42) 12%,
      rgba(5, 5, 5, 0.18) 34%,
      rgba(5, 5, 5, 0.18) 68%,
      rgba(5, 5, 5, 0.52) 88%,
      var(--bg) 100%);
}

.section-about .container {
  position: relative;
  z-index: 1;
}

/* 本文は左側に寄せ、右側の約45〜55%を写真の領域として空ける */
.about-inner {
  max-width: 630px;
}

.about-en-title {
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: clamp(27px, 3.05vw, 43px);
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: var(--text-main);
}

/* 2026-08-07 第3ラウンド：行間をごくわずかに詰め（2.05→2.0）、
   説明文としての「説明臭さ」をわずかに和らげた（文字サイズ・幅は変更なし） */
/* 2026-08-10：ABOUT本文の視覚重量をさらに一段静かにするため、共通変数
   var(--fs-lead)（他セクションのsection-leadと共有）は変更せず、ABOUT
   専用の値として約6%だけ縮小（clamp(15px,1.3vw,17px)→clamp(14px,1.22vw,16px)）。
   行間・幅・余白は無変更。 */
.about-lead {
  margin-top: 25px;
  max-width: 38em;
  font-size: clamp(14px, 1.22vw, 16px);
  letter-spacing: 0.09em;
  line-height: 2.0;
  color: var(--text-sub);
}

/* 2026-08-07 最終微調整：本文と会社概要ブロックの間のリズムをわずかに詰める
   （clamp(48,4.5vw,72) 0 clamp(32,3vw,44) → clamp(40,3.8vw,60) 0 clamp(26,2.4vw,36)） */
.about-divider {
  margin: clamp(40px, 3.8vw, 60px) 0 clamp(26px, 2.4vw, 36px);
  border: none;
  border-top: 1px solid var(--line-soft);
}

.about-sub-label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}

.about-info {
  display: grid;
  gap: 0;
}

/* 2026-08-07 最終微調整：会社概要テーブルの密度感を少しだけ軽くする（20px→18px） */
.about-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}

.about-row:first-child { border-top: 1px solid var(--line-soft); }

/* 2026-08-10：会社概要ラベルをさらに控えめに（14px→13px、約7%縮小）。
   colorは既存のvar(--text-muted)（#7D7A74）が既に狙いのトーン範囲内の
   ため変更なし（新色は追加しない）。
   2026-08-10（第3ラウンド）：会社概要全体をもう一段静かにするため、
   PC 13px→12pxへ再縮小。 */
.about-row dt {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

/* 2026-08-10：会社概要の「値」の白を抑え、DARUN全体の落ち着いたトーンへ
   統一。font-sizeは15px→14px（約7%縮小）。
   2026-08-10（第3ラウンド）：値の色がABOUT本文（.about-lead）よりまだ
   前へ出て見えるとのご指摘のため、独自色（#C2BDB4）をやめ、.about-lead
   の実computed colorと完全に同一のvar(--text-sub)（#A9A59D）へ変更。
   font-sizeもPC 14px→13pxへ再縮小（メールアドレスは.about-mailが
   個別にvar(--accent)を指定しているため影響を受けない＝オレンジは維持）。
   2026-08-10（第4ラウンド）：本文よりさらに控えめな印象にするため、
   13px→12pxへ再縮小（PC/Mobile共通、colorは変更なし＝.about-leadと
   完全一致のまま）。
   2026-08-10（第5ラウンド）：computed colorは.about-leadと数値上
   完全一致（#A9A59D）していたが、実ブラウザの見た目では会社概要側が
   font-sizeが小さい分（12px）、細く薄いストロークとアンチエイリアスの
   影響で本文よりわずかに明るく＝白く浮いて見えるとのご指摘のため、
   視覚補正としてalpha 0.82を明示的に指定（#A9A59D→rgba(169,165,157,0.82)）。
   font-sizeは12pxのまま変更なし。.about-mailは要素自身に個別の
   color:var(--accent)指定を持つため、この変更の影響を受けない
   （オレンジは維持される）。
   2026-08-10（第6ラウンド）：alpha 0.82では左側ラベル（var(--text-muted)）
   との視覚差が縮まりすぎたとのご指摘のため、alpha 0.90へ調整。
   「ラベルより明るく、ABOUT本文より少しだけ控えめ」という情報階層を
   狙う。font-sizeは12pxのまま変更なし。 */
.about-row dd {
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.95;
  color: rgba(169, 165, 157, 0.90);
}

.about-mail {
  color: var(--accent);
  transition: color 0.3s ease;
}

.about-mail:hover { color: var(--accent-bright); }

/* 2026-08-09：ABOUTをPC 1440pxで固定ヘッダーを除いた1画面内に収める
   ための調整。背景写真・構図・暗幕・配色・文字サイズの最小値は変更せず、
   セクション上下の余白・見出し-本文間・本文行間・段落間・区切り線の
   余白・会社概要の行間隔のみを詰める。860px以下（モバイル、写真が
   本文下の帯として分離されるレイアウト）には影響させない。 */
@media (min-width: 861px) {
  .section-about {
    padding: clamp(52px, 4.6vw, 80px) 0 clamp(36px, 3.2vw, 52px);
  }

  .about-lead {
    margin-top: 14px;
    line-height: 1.72;
  }

  .about-lead + .about-lead {
    margin-top: 10px;
  }

  .about-divider {
    margin: clamp(22px, 2vw, 30px) 0 clamp(15px, 1.3vw, 20px);
  }

  .about-sub-label {
    margin-bottom: 12px;
  }

  .about-row {
    padding: 10px 0;
  }

  .about-row dd {
    line-height: 1.55;
  }
}

/* ==========================================================
   Contact
   ========================================================== */
.section-contact {
  background: var(--bg-panel);
  border-top: 1px solid var(--line-soft);
  /* 下余白は送信ボタンからフッターまでが空きすぎないよう約38%縮小 */
  padding: var(--section-space-large) 0 calc(var(--section-space-large) * 0.62);
}

/* 2026-08-07 再調整（優先度4）：左コピーが右フォームに対して弱く見えないよう
   列比率を44/56→46/54へ。汎用フォーム感を減らすため、フォーム側の入力欄の
   高さ・余白・送信ボタンの重さを下げ、フォーム構造・項目・検証ロジックは
   一切変更していない（値の入力・送信動作は無変更） */
/* 2026-08-07 最終微調整：左コピー（短い）と右フォーム（長い）の縦バランスを
   center寄せにして整える（列比率・ガター・グリッド構造自体は変更していない） */
/* 2026-08-07 第4ラウンド：左右の間隔をわずかに詰め、「別々の2ブロック」
   ではなく「1つの相談導線」として少し近づけた（clamp(48,5vw,96)→
   clamp(44,4.6vw,88)。列比率・center揃えは変更していない） */
.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  gap: clamp(44px, 4.6vw, 88px);
  align-items: center;
}

/* 左コピーの存在感を少し上げる（clamp(21,2.1vw,30)→clamp(22,2.2vw,32)） */
.contact-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: 0.1em;
  line-height: 1.8;
  color: var(--text-main);
}

/* 2026-08-07 第4ラウンド：見出しとの距離をわずかに詰め、左ブロック内の
   結束感を少し高めた（32px→28px） */
.contact-note {
  margin-top: 28px;
  font-size: 15px;
  letter-spacing: 0.09em;
  line-height: 2.05;
  color: var(--text-sub);
}

/* 入力欄同士の余白を整理する（18px→14px→12px） */
.contact-form {
  display: grid;
  gap: 12px;
}

.form-row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* 2026-08-07：入力欄の高さを少し下げる（60px→54px）。文字サイズ16pxは
   iOS Safariの自動ズーム防止のため維持している（可読性の観点からも変更不可）。
   2026-08-07 最終微調整：枠線を少し弱め（rgba .10→.07）、高さ・paddingを
   必要最小限だけさらに整えた（54px→52px、15px 20px→14px 18px）。
   第3ラウンド：枠線をさらにわずかに弱め・角をわずかに丸め、「フォームの
   箱感」を少し和らげた（rgba .07→.05、border-radius 2px→3px、高さ52→50px） */
.contact-form input,
.contact-form textarea,
.select-toggle {
  width: 100%;
  min-height: 50px;
  padding: 13px 18px;
  background: var(--bg-input);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-weight: 400;
  /* 16px：入力文字の可読性確保と、iOS Safariの自動ズーム防止 */
  font-size: 16px;
  letter-spacing: 0.08em;
  line-height: 1.8;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 2026-08-07 最終微調整：テキストエリアの高さをわずかに見直す（132px→124px） */
.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* プレースホルダー：本文より一段落とすが、暗くしすぎない（背景比 約5.9:1） */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #948F88;
  opacity: 1;
}

/* focus：細いオレンジ枠＋控えめな発光 */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.select-toggle:focus-visible {
  outline: none;
  border-color: var(--accent-line);
  background: #141414;
  box-shadow: 0 0 0 1px var(--accent-line-soft),
              0 0 18px rgba(201, 130, 47, 0.10);
}

/* 入力エラーの対象欄 */
.contact-form [aria-invalid="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-line-soft);
}

/* 複数選択ドロップダウン */
.select-wrap {
  position: relative;
}

.select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  color: #948F88;
  cursor: pointer;
}

.select-toggle.has-value { color: var(--text-main); }

.select-toggle .chevron {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex: none;
  transition: transform 0.3s ease;
}

.select-wrap.is-open .select-toggle .chevron { transform: rotate(180deg); }

.select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 10px;
  background: #0E0E0E;
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  max-height: 340px;
  overflow-y: auto;
}

.check {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 8px 12px;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.check:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
}

.check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 17px;
  height: 17px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 1px;
  background: transparent;
  position: relative;
  cursor: pointer;
}

.check input:checked { border-color: var(--accent); }

.check input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--accent);
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}

.btn-submit {
  margin-top: 10px;
  width: 100%;
}

/* 2026-08-07：送信ボタンの高さ・重さを少し軽くする（タップ領域44px以上は維持）。
   第3ラウンド：存在感は保ちつつ、重さだけをもう一段わずかに整えた（46px→45px） */
body:not(.service-page) .section-contact .btn-submit {
  min-height: 45px;
  padding: 13px 34px;
}

/* 送信状態の表示（エラー／進行中／完了で色の強さを分ける） */
.form-status {
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: var(--text-sub);
  min-height: 1.6em;
  transition: color 0.3s ease;
}

.form-status.is-error {
  color: var(--accent-bright);
}

.form-status.is-pending,
.form-status.is-done {
  color: var(--text-sub);
}

.form-status.is-fallback {
  color: var(--accent);
}

/* ==========================================================
   Footer
   ========================================================== */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
}

.footer-services {
  border-bottom: 1px solid var(--line-soft);
}

.footer-services-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 26px clamp(24px, 4vw, 56px);
  display: flex;
  align-items: center;
  gap: 20px 48px;
  flex-wrap: wrap;
}

.footer-services-label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.footer-services-nav {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}

.footer-services-nav a {
  font-family: var(--font-en);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-sub);
  padding-block: 6px;
  transition: color 0.3s ease;
}

.footer-services-nav a:hover { color: var(--text-main); }

.footer-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 44px clamp(24px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px 48px;
  flex-wrap: wrap;
}

.footer-nav {
  display: flex;
  gap: clamp(22px, 2.4vw, 40px);
  flex-wrap: wrap;
}

.footer-nav a {
  font-family: var(--font-en);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-sub);
  padding-block: 4px;
  transition: color 0.3s ease;
}

.footer-nav a:hover { color: var(--text-main); }

.footer-copy {
  font-family: var(--font-en);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ==========================================================
   Animation
   ========================================================== */
.fade-up {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-up.delay-1 { transition-delay: 0.12s; }

.fade-group > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fade-group > *:nth-child(2) { transition-delay: 0.10s; }
.fade-group > *:nth-child(3) { transition-delay: 0.20s; }
.fade-group > *:nth-child(4) { transition-delay: 0.30s; }
.fade-group > *:nth-child(5) { transition-delay: 0.40s; }
.fade-group > *:nth-child(6) { transition-delay: 0.50s; }

.fade-group.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .service-icon,
  .approach-icon,
  .future-icon {
    transition: filter 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .service-col:hover .service-icon,
  .future-cell:hover .future-icon {
    filter: brightness(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up,
  .fade-group > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-visual img,
  .hero-text {
    animation: none;
    opacity: 1;
    transform: none;
  }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1280px) {
  .header-inner { gap: 24px; }
  .header-nav { gap: 22px; }
  .about-row { grid-template-columns: 160px minmax(0, 1fr); }
}

/* 4列のままでも見出しが2行に収まるよう、列内の左右余白を詰める */
@media (max-width: 1200px) {
  .problem-item { padding-inline: clamp(12px, 1.6vw, 26px); }
  .service-col { padding-inline: clamp(10px, 1.2vw, 20px); }
}

/* ナビが収まらない帯からハンバーガーへ */
@media (max-width: 1080px) {
  .header-nav { display: none; }
  .btn-header { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 1180px) {
  .about-inner { max-width: 580px; }
  /* 2026-08-07：デスクトップ版と同様に、右側の明るさをわずかに抑えた */
  .about-visual::after {
    background:
      linear-gradient(to right,
        var(--bg) 0%,
        var(--bg) 34%,
        rgba(5, 5, 5, 0.95) 47%,
        rgba(5, 5, 5, 0.76) 58%,
        rgba(5, 5, 5, 0.47) 72%,
        rgba(5, 5, 5, 0.32) 88%,
        rgba(5, 5, 5, 0.32) 100%),
      linear-gradient(to bottom,
        var(--bg) 0%,
        rgba(5, 5, 5, 0.42) 12%,
        rgba(5, 5, 5, 0.20) 34%,
        rgba(5, 5, 5, 0.20) 68%,
        rgba(5, 5, 5, 0.52) 88%,
        var(--bg) 100%);
  }
}

@media (max-width: 1024px) {
  .about-inner { max-width: 520px; }
  .about-visual { background-position: 100% 44%; }

  .problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 56px;
  }
  .problem-item { padding-inline: clamp(16px, 2.4vw, 32px); }
  .problem-item:first-child {
    padding-left: clamp(16px, 2.4vw, 32px);
    border-left: 1px solid var(--line-soft);
  }
  .problem-item:nth-child(2n + 1) { border-left: none; padding-left: 0; }
  /* 右列（各行の2列目）もコンテナの右端エッジにフラットで揃える
     （左列が0インセットなのに右列だけpaddingで内側へ寄っていた非対称を解消） */
  .problem-item:nth-child(2n) { padding-right: 0; }

  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 56px;
  }
  .service-col:first-child { border-left: 1px solid var(--line-soft); }
  .service-col:nth-child(3n + 1) { border-left: none; }

  .approach-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  /* 2026-08-07 Mobile最終調整：01→02→03間の縦リズムのみを約9%圧縮
     （上下padding各34px→31px。左インデント・アイコン・文字サイズ・
     横位置は無変更） */
  .approach-step { padding: 31px 0 31px 34px; }
  .approach-step::before {
    top: 0;
    bottom: 0;
    left: 4px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .approach-step:first-child::before { top: 40px; }
  .approach-step:last-child::before { bottom: auto; height: 40px; }
  .approach-step::after { top: 36px; left: 0; }

  .plan-list { grid-template-columns: minmax(0, 1fr); }
  .plan,
  .plan:first-child {
    padding: 40px 0 44px 34px;
    border-left: 1px solid var(--line-soft);
  }
  .plan::before {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 1px;
    height: auto;
    background: var(--accent-line-soft);
  }
  .plan:first-child::before { top: 44px; }
  .plan:last-child::before { bottom: auto; height: 44px; }
  .plan::after,
  .plan:first-child::after { top: 40px; left: -5px; }
  .plan.is-lead::after { top: 38px; left: -7px; }
  .plan-text { min-height: 0; }
  .plan.is-lead {
    background: linear-gradient(to right, rgba(201, 130, 47, 0.05), rgba(201, 130, 47, 0));
  }

  .future-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 44px;
  }
  .future-cell:first-child {
    border-left: 1px solid var(--line-soft);
    padding-left: clamp(18px, 2vw, 34px);
  }
  .future-cell:nth-child(2n + 1) { border-left: none; padding-left: 0; }

  .contact-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
}

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-text {
    order: 2;
    padding: clamp(56px, 8vw, 88px) var(--gutter) clamp(72px, 9vw, 104px);
  }
  .split-image {
    order: 1;
    min-height: clamp(280px, 52vw, 420px);
  }
  .split-image img { position: relative; }
  .split-image::after {
    background: linear-gradient(to bottom, rgba(5, 5, 5, 0.5) 0%, rgba(5, 5, 5, 0) 34%, rgba(5, 5, 5, 0.15) 70%, var(--bg) 100%);
  }
}

@media (max-width: 860px) {
  :root {
    --header-h: 68px;
    --fs-body: 15.5px;
  }

  .sp-only { display: inline; }

  .site-logo { width: 112px; }

  /* Hero：背景全面。主情報ブロックは縦中央/下寄せにせず、固定ヘッダー直下から
     一定の余白（.hero-innerのpadding-top）で開始する。以前はalign-items: flex-end
     で下揃えにしていたため、見出しの行数（幅により2〜3行）でブロック全体の高さが
     変わるたびに開始位置が上下に動いてしまっていた（430px付近で顕著）。
     flex-startに変更し、開始位置を幅・行数によらず一定にする。 */
  .hero {
    align-items: flex-start;
    padding-top: 0;
  }
  .hero-visual {
    position: absolute;
    inset: 0;
    width: 100%;
  }
  .hero-visual img { object-position: 66% center; }
  .hero-visual::after {
    /* モバイルのみ：横方向（左→右）の暗部を追加し、テキスト側（左）の可読性を
       高める。背景写真自体に写っている建築の開口部（陰影）と壁面の明るい部分の
       コントラストが、テキスト帯の中では目立たなくなるよう、本文の実測右端
       （約92%幅）まで不透明度0.8前後の強めの暗さをなだらかに維持し、そこから
       右側の人物・階段・光線が写真として見える濃度まで滑らかにフェードアウトする。
       縦方向グラデーションと重ね合わせる。 */
    background:
      linear-gradient(to right,
        rgba(5, 5, 5, 0.91) 0%,
        rgba(5, 5, 5, 0.90) 55%,
        rgba(5, 5, 5, 0.86) 70%,
        rgba(5, 5, 5, 0.64) 82%,
        rgba(5, 5, 5, 0.30) 92%,
        rgba(5, 5, 5, 0) 100%),
      linear-gradient(to bottom,
        rgba(5, 5, 5, 0.66) 0%,
        rgba(5, 5, 5, 0.60) 28%,
        rgba(5, 5, 5, 0.62) 54%,
        rgba(5, 5, 5, 0.93) 80%,
        var(--bg) 100%);
  }
  .hero-inner {
    /* ヘッダー下端から英語ラベル上端までを約40px（36〜52pxの目安内）に統一。
       flex-start配置のため、この値が幅・行数によらずラベル開始位置を決める。 */
    padding: calc(var(--header-h) + 40px) var(--gutter) 48px;
  }
  .hero-text { max-width: 560px; }
  .hero-label {
    /* 英語ラベルを390px以上で必ず1行に収める（文言・大文字表記は不変） */
    font-size: 10.5px;
    letter-spacing: 0.22em;
    white-space: nowrap;
    margin-bottom: 30px;
  }
  .hero-title {
    /* 見出しが320〜430px幅で画面外にはみ出さないよう、モバイルのみごくわずかに
       縮小（32px→31px、letter-spacing 0.07em→0.06em）。折り返し位置は
       .ht-br-a／.ht-br-bの表示切り替えで幅ごとに制御する（下記メディアクエリ）。
       2026-08-09：REFERENCE比較により、PCと同様の意図でさらに約10%縮小
       （31px→28px）。折り返し・行数（3行以内）は変更していないことを
       320〜450px幅で確認済み。 */
    font-size: 28px;
    letter-spacing: 0.06em;
    line-height: 1.62;
  }
  .hero-creed { margin-top: 34px; }
  .hero-desc {
    margin-top: 46px;
    /* 390px幅で「DARUNは...融合し、」「数字の奥にある...掘り起こし、」の
       2行が折り返さず収まるよう、モバイルのみ本文をわずかに縮小。
       他セクションの本文（--fs-body）には影響しない。 */
    font-size: 15px;
    letter-spacing: 0.07em;
  }
  .hero-desc + .hero-desc { margin-top: 32px; }
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    max-width: 420px;
  }
  .hero-cta .btn-outline { width: 100%; min-height: 54px; }
  .hero-cta .btn-text { align-self: flex-start; }
}

/* Hero見出し：320〜414px＝3行「数字では測れない／価値を、／売れる理由へ。」
   （句読点・単語の途中では改行しない。実測で320px幅でも左右22px以上の
   余白を保って収まることを確認済み） */
@media (max-width: 414px) {
  .hero-title .ht-br-a { display: inline; }
}

/* Hero見出し：415〜450px＝2行「数字では測れない／価値を、売れる理由へ。」
   （451px以上はデフォルトの2行「数字では測れない価値を、／売れる理由へ。」で
   左右22px以上の余白を確保できるため、430pxのご指定より少し広い450pxまでを
   このパターンとし、隙間なく安全に引き継げるようにしている） */
@media (min-width: 415px) and (max-width: 450px) {
  .hero-title .ht-br-a { display: inline; }
  .hero-title .ht-br-b { display: none; }
}

@media (max-width: 860px) {
  .section-problem,
  .section-approach,
  .section-services,
  .section-pricing,
  .section-future,
  .section-about,
  .section-contact {
    padding-block: clamp(72px, 12vw, 104px);
  }

  .problem-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  /* 2026-08-07 Mobile最終調整：01→02→03→04間の縦間隔のみを約9%圧縮
     （上下padding各32px→29px。区切り線・左揃え・文字サイズ・情報階層は
     すべて無変更） */
  .problem-item,
  .problem-item:first-child,
  .problem-item:nth-child(2n + 1) {
    border-left: none;
    border-top: 1px solid var(--line-soft);
    padding: 29px 0;
  }
  .problem-grid > .problem-item:first-child {
    border-top: none;
    padding-top: 0;
  }
  .problem-num { margin-bottom: 18px; }

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 48px;
  }
  .service-col,
  .service-col:first-child,
  .service-col:nth-child(3n + 1) {
    border-left: none;
    padding-inline: 8px;
  }

  .future-strip { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .future-cell,
  .future-cell:first-child,
  .future-cell:nth-child(2n + 1) {
    border-left: none;
    border-top: 1px solid var(--line-soft);
    padding: 28px 0;
  }
  .future-strip > .future-cell:first-child { border-top: none; padding-top: 0; }

  .about-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 22px 0;
  }

  /* ABOUT：左右分割をやめ、本文の下に写真の帯を置く */
  .section-about {
    padding-bottom: 0;
  }
  .about-inner {
    max-width: 100%;
  }
  .about-visual {
    position: relative;
    inset: auto;
    height: clamp(320px, 84vw, 380px);
    margin-top: clamp(48px, 8vw, 72px);
    /* 帯が横長になるため寄せるが、寄せすぎると光の壁だけになる。
       150%／94% 62% で「左の暗い壁 → コーナー → 右の明るい壁 → 床の反射」が
       1枚に収まり、空間の奥行きが読み取れる */
    background-size: 150% auto;
    background-position: 94% 62%;
  }
  /* 2026-08-07 Mobile最終調整：写真の主張を弱め、「奥行きの気配」程度に
     留めた。単純な不透明度アップではなく、左側を黒グラデーションで
     広く覆い、右側だけにごくわずかな陰影を残す2方向グラデーションの
     組み合わせに変更（不透明度のピークを0.18→0.46へ、左側の暗幕も追加）。
     画像ファイル・位置・トリミングは無変更 */
  .about-visual::after {
    background:
      linear-gradient(to right,
        var(--bg) 0%,
        rgba(5, 5, 5, 0.88) 30%,
        rgba(5, 5, 5, 0.55) 62%,
        rgba(5, 5, 5, 0.40) 100%),
      linear-gradient(to bottom,
        var(--bg) 0%,
        rgba(5, 5, 5, 0.72) 20%,
        rgba(5, 5, 5, 0.46) 50%,
        rgba(5, 5, 5, 0.50) 78%,
        rgba(5, 5, 5, 0.80) 100%);
  }

  .form-row-2 { grid-template-columns: minmax(0, 1fr); }

  .section-contact {
    padding-block: clamp(72px, 12vw, 104px) clamp(48px, 8vw, 68px);
  }

  .plan-cta .btn-outline { width: 100%; }

  .footer-inner {
    padding: 36px 24px;
    justify-content: flex-start;
    gap: 26px;
  }
  .footer-nav { gap: 18px 26px; }
  .footer-copy { white-space: normal; }
}

@media (max-width: 560px) {
  .services-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .service-col {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: start;
    gap: 8px 4px;
    text-align: left;
    border-top: 1px solid var(--line-soft);
    padding: 28px 0;
  }
  .services-grid > .service-col:first-child { border-top: none; padding-top: 0; }
  .service-col:hover { transform: none; }
  .service-icon { margin: 0; grid-row: span 2; }
  .service-title { margin-bottom: 10px; }

  .plan,
  .plan:first-child { padding-left: 28px; }
  .plan-text { margin-bottom: 26px; }
}

@media (max-width: 400px) {
  :root { --gutter: 20px; }
  .plan-flag { font-size: 10px; letter-spacing: 0.2em; }
  .btn-outline { padding-inline: 22px; letter-spacing: 0.14em; }
  /* 2026-08-10（第3ラウンド）：base側の.about-row dtを13px→12pxへ
     再縮小したため、この極小幅専用の上書きも12pxへ合わせて更新
     （base値と同一・矛盾が生じないようにするため） */
  .about-row dt { font-size: 12px; }
}