/* ==========================================================
   DARUN LLC — services.css
   サービス詳細ページ専用スタイル（PHASE 2B 再設計版 / 2026-08-05）

   ・styles.css の読み込み後に読み込む
   ・カラー・フォント・余白トークンは styles.css の :root をそのまま使用し、
     新色・新フォントは追加しない
   ・本文16px基準・見出し24〜34px・CTA高さ56pxのデザインシステムに統一
   ・カードを減らし、罫線と余白で構造をつくる
   ・名前空間：.service-* / .sv-*

   2026-08-10 追記（サービス3ページ 視覚設計 最終調整）：
   styles.css には2026-08-06のPHASE 3（タイポグラフィ・余白の一括縮小）が
   入っているが、body:not(.service-page) にスコープされているため、この
   サービスページ側には一度も適用されていなかった。そのため見出し・番号・
   価格・リード文が一回り大きいままだった。styles.css 自体・:root の
   共有トークンは一切変更せず、下記の body.service-page スコープのみで
   TOPと同じ密度感へ揃える（TOPのFINAL FIXおよび他ページには影響しない）。
   なお --content-gap は「見出し→本文の余白を増やす」という逆方向の
   要望があるため、TOPの値を流用せず個別のブロック（4A）で新設している。 */
body.service-page {
  --fs-h2: clamp(22px, 2.2vw, 31px);       /* 34px→31px（TOPと同一値） */
  --fs-num: 16.5px;                         /* 18px→16.5px（TOPと同一値） */
  --fs-price: clamp(29px, 3.1vw, 42px);     /* 46px→42px（TOPと同一値） */
  --fs-lead: clamp(15px, 1.3vw, 17px);      /* 18px→17px（TOPと同一値） */
  --fs-body: 15px;                          /* 16px→15px（TOPと同一値） */
  --fs-label: 12px;                         /* 13px→12px（TOPと同一値） */
  --section-space-medium: clamp(78px, 6.6vw, 124px); /* 115px→95px相当（TOPと同一値。
    このトークンはheader/footerでは使用されておらず、body.service-pageの
    DOM配下にのみ継承されるため、TOP側の値には一切影響しない） */
  --section-space-large: clamp(98px, 9vw, 164px);    /* 158px→130px相当（TOPと同一値） */
  --gutter: clamp(22px, 4.5vw, 72px);    /* 72px→65px相当（TOPと同一値。header-innerは
    独自のclamp値を使っており--gutterを参照していないため影響しない） */
}

/* ==========================================================
   0. 共通コンテナ・見出し
   ========================================================== */
.sv-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.service-section {
  position: relative;
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  padding: var(--section-space-medium) 0;
}

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

.service-section.is-large {
  padding: var(--section-space-large) 0;
}

/* 2026-08-10：SALES GROWTH PARTNERのみ、最初のコンテンツセクション
   （#why）が他2ページの最初のセクション（is-large指定なし＝通常padding）
   と異なりis-large指定のため、3ページの第一印象の密度差が大きかった。
   HTML構造（is-largeクラス）は変更せず、GROWTHページに限定したCSSの
   scopeでpaddingのみ通常セクションと同じ値へ揃える
   （body.service-growth配下・#why限定のため、TOP・SCAN・DESIGNには
   一切影響しない）。 */
body.service-growth #why.service-section.is-large {
  padding: var(--section-space-medium) 0;
}

/* 2026-08-10（FINAL POLISH）：PC 1440px基準で、中盤セクション（01〜07等）
   の上下paddingがまだ大きく、「巨大な空白の中にテキストがある」印象に
   見えていた。section-space-medium/largeのvw係数・上限のみを約18〜20%
   圧縮し、「情報ブロックの周囲に計算された余白がある」密度へ調整する。
   1025px以上（PC）限定のscope内でのみ上書きするため、Mobile（860px以下
   は既存の固定clamp、861〜1024pxは従来どおり）には一切影響しない。
   sv-head（見出し→本文の余白）・リスト間隔・HERO/思想セクションは
   前ラウンドまでの値を維持し、今回は変更しない。 */
@media (min-width: 1025px) {
  body.service-page {
    --section-space-medium: clamp(64px, 5.4vw, 100px);
    --section-space-large: clamp(78px, 7.2vw, 131px);
  }
}

/* 見出し（01 こんな企業に） */
.sv-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(16px, 1.8vw, 26px);
  /* 2026-08-10：見出し→本文（リード文・リスト等）の呼吸余白を約16〜18%
     拡大。共有トークン var(--content-gap) は他要素と共用のため変更せず、
     このセクションだけの専用値を新設（PC 43px→50px、Mobile 32px→37px） */
  margin-bottom: clamp(37px, 3.5vw, 50px);
}

.sv-num {
  flex: none;
  font-family: var(--font-en);
  font-size: var(--fs-num);
  font-weight: 400;
  letter-spacing: 0.28em;
  color: var(--accent);
  line-height: 1.5;
}

.sv-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);
}

.sv-head-icon {
  flex: none;
  align-self: center;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.sv-lead {
  /* 2026-08-10：リード文→リスト・本文の余白を約15%拡大 */
  margin-bottom: clamp(32px, 3.4vw, 46px);
  max-width: 44em;
  font-size: var(--fs-lead);
  letter-spacing: 0.1em;
  line-height: 2.0;
  color: var(--text-sub);
}

.sv-note {
  margin-top: 24px;
  max-width: 46em;
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.95;
  color: var(--text-muted);
}

.sv-subhead {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.sv-block + .sv-block { margin-top: clamp(32px, 3.2vw, 48px); }
.sv-mt { margin-top: clamp(36px, 4vw, 56px); }
.sv-mb { margin-bottom: 24px; }
.sv-head.is-flush { margin-bottom: 0; }

/* 日本語の改行制御（トップページと同一の方針） */
.sv-title,
.sv-tl-title,
.sv-creed-text,
.service-hero-title,
.service-cta-title,
.sv-deliverable-name,
.sv-choice-title,
.sv-compare-label,
.sv-meta-strong,
.sv-price-unit,
.sv-price-pre {
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
}

.sv-lead,
.sv-note,
.sv-col-sub,
.sv-check-list li,
.sv-dot-list li,
.sv-num-list li,
.sv-step-text,
.sv-tl-lead,
.sv-faq-q,
.sv-faq-a,
.sv-related-text,
.service-hero-desc {
  overflow-wrap: normal;
  line-break: strict;
}

.sv-title,
.sv-tl-title,
.sv-creed-text,
.service-cta-title { text-wrap: balance; }

.nb { white-space: nowrap; }

/* 360px未満の極小幅では、横スクロールを防ぐため語句保護を解除する */
@media (max-width: 360px) {
  .service-page .nb { white-space: normal; }
  .service-page .sv-title,
  .service-page .sv-tl-title,
  .service-page .sv-creed-text,
  .service-page .service-hero-title,
  .service-page .service-cta-title { word-break: normal; }
}

/* ==========================================================
   1. パンくず
   ========================================================== */
.sv-breadcrumb {
  background: var(--bg);
  padding: 22px 0 0;
}

.sv-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: var(--font-en);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sv-breadcrumb li + li::before {
  content: "/";
  margin-right: 12px;
  color: var(--line);
}

.sv-breadcrumb a {
  color: var(--text-sub);
  padding-block: 6px;
  transition: color 0.3s ease;
}

.sv-breadcrumb a:hover { color: var(--accent-bright); }
.sv-breadcrumb [aria-current="page"] { color: var(--text-main); }

/* ==========================================================
   2. Hero
   ========================================================== */
.service-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--header-h);
  /* 2026-08-10：PC 1440pxでHERO全体（ラベル〜CTA）が固定header除く
     viewport内でより自然に中央へ収まるよう、最小高さを軽く詰めた
     （820px→未満のビューポートでは実際にはコンテンツ高さが優先される
     ため、この値自体はセンタリングの基準線を整えるための調整。本文が
     長いSALES DESIGN 90はこの値でCTA被りが解消するため基準値として維持。
     本文が短いSCAN/GROWTHは下記の個別scopeで元の値へ復元する） */
  min-height: clamp(560px, 78vh, 800px);
}

/* 2026-08-10：SALES SCAN / SALES GROWTH PARTNERは本文が短く、上記の
   縮小したmin-heightのままだとHERO自体がviewportより大きく余ってしまい、
   結果としてvisual centerが不自然に上寄りになっていた（オフセット約-43px）。
   本文が短い2ページのみ、PC版（1025px以上。Mobileは max-width:1024px の
   別ルールで min-height:0 に上書きされるため無関係）はmin-heightを元の
   基準値へ戻し、visual centerを中央付近（オフセット±10px程度）へ戻す。
   SALES DESIGN 90・TOP・Mobileには一切影響しない。 */
body.service-scan .service-hero,
body.service-growth .service-hero {
  min-height: clamp(620px, 84vh, 880px);
}

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

.service-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.service-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      var(--bg) 0%,
      rgba(5, 5, 5, 0.92) 14%,
      rgba(5, 5, 5, 0.32) 46%,
      rgba(5, 5, 5, 0) 74%),
    linear-gradient(to bottom,
      rgba(5, 5, 5, 0.5) 0%,
      rgba(5, 5, 5, 0) 26%,
      rgba(5, 5, 5, 0) 66%,
      rgba(5, 5, 5, 0.66) 100%);
}

/* 2026-08-10（FINAL POLISH）：SALES GROWTH PARTNERのみ、HERO写真（夜景）が
   SCAN／DESIGNの建築的で静かなトーンに比べ、暖色の街灯りが目立ち一般的な
   高級LP寄りに見えていた。画像素材自体は差し替えず、CSSのみで調整する。
   ・object-position：クロップ位置を下げ、上部の平坦な夜空を減らし
     光の帯（橋・水面）に寄せる
   ・filter：彩度・明るさを落とし、暖色の街灯りを少し静める
   ・::afterのグラデーション：黒の量を増やし、写真より黒・光・余白の
     中にコピーがある状態へ寄せる
   body.service-growthのみへスコープしているため、SCAN・DESIGN・TOPの
   画像・overlayには一切影響しない。 */
body.service-growth .service-hero-visual img {
  object-position: center 66%;
  filter: grayscale(0.5) saturate(0.8) brightness(0.85) contrast(1.08);
}

body.service-growth .service-hero-visual::after {
  background:
    linear-gradient(to right,
      var(--bg) 0%,
      rgba(5, 5, 5, 0.94) 16%,
      rgba(5, 5, 5, 0.52) 46%,
      rgba(5, 5, 5, 0.16) 74%),
    linear-gradient(to bottom,
      rgba(5, 5, 5, 0.62) 0%,
      rgba(5, 5, 5, 0.12) 26%,
      rgba(5, 5, 5, 0.08) 66%,
      rgba(5, 5, 5, 0.76) 100%);
}

.service-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  /* 2026-08-10：HERO全体の縦圧を軽く抜き、visual centerが自然に見える
     余白へ調整（PC上限のみ縮小。下限・vw比率は維持） */
  padding: clamp(80px, 7.6vw, 128px) var(--gutter) clamp(64px, 6.4vw, 104px);
}

/* 2026-08-10（第2ラウンド）：SALES SCAN / SALES GROWTH PARTNERは本文が
   短く、HERO全体の高さがコンテンツ量で決まる（min-heightが効かない）
   ため、実際にはHEROの下に空白が多く残り、結果として文章ブロックの
   視覚的重心が中央よりかなり上寄りになっていた（オフセット実測約-43px）。
   本文の量やmin-heightではなくpadding-topを個別に増やし、文章ブロック
   自体を少し下げることでviewport中央へ近づける。PC（1025px以上）限定。
   Mobile（max-width:1024pxのpadding-top:clamp(16px,2.6vw,40px)）や
   SALES DESIGN 90・TOPには一切影響しない。文字サイズ・行間・左右余白・
   コピー内容は不変。 */
@media (min-width: 1025px) {
  body.service-scan .service-hero-inner,
  body.service-growth .service-hero-inner {
    padding-top: clamp(124px, 10.7vw, 172px);
  }
}

.service-hero-text {
  max-width: 760px;
}

.service-hero .en-label { margin-bottom: 24px; }

.service-hero-title {
  font-family: var(--font-serif);
  font-weight: 400;
  /* 2026-08-10（第4ラウンド）：HEROメインコピーが「大きいから強い」印象に
     見えていたため、さらに約10%縮小し「静かに強い」ブランドコピーへ
     （PC: 43px→39px、Mobile: 27px→24px）。line-heightをわずかに開いて
     （1.6→1.65）文字が小さくなった分の余白バランスを整える。改行位置
     （HTML側の<br>）・letter-spacing・色は変更しない */
  font-size: clamp(24px, 2.7vw, 39px);
  letter-spacing: 0.1em;
  line-height: 1.65;
  color: var(--text-main);
}

/* 2026-08-10（FINAL POLISH）：SALES SCANのみ、HEROコピーをさらに約
   4〜5%静かに（PC: 39px→37px、Mobile: 24px→23px）。line-height（1.65）・
   2行構成（HTML側の<br>）・letter-spacingは変更しない。SALES DESIGN 90は
   今回FIX、SALES GROWTH PARTNERは今回の対象外のため、body.service-scan
   のみへスコープし他ページ・TOPには影響しない。 */
body.service-scan .service-hero-title {
  font-size: clamp(23px, 2.6vw, 37px);
}

.service-hero-desc {
  /* 2026-08-10：HERO内の情報ブロック間の縦圧を軽く抜く（visual center調整
     ＋Mobile圧縮の両方に寄与。文字サイズ・行間・左右幅は変更しない） */
  margin-top: clamp(20px, 2.2vw, 30px);
  max-width: 38em;
  font-size: var(--fs-body);
  letter-spacing: 0.09em;
  line-height: 2.05;
  color: var(--text-sub);
}

/* 料金・期間 */
.sv-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(28px, 3.2vw, 56px);
  margin-top: clamp(26px, 2.8vw, 38px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.sv-meta-item {
  padding-left: clamp(24px, 2.6vw, 40px);
  border-left: 1px solid var(--line-soft);
}

.sv-meta-item:first-child {
  padding-left: 0;
  border-left: none;
}

.sv-meta dt {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.sv-meta dd {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
}

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

.sv-price-num.is-sm { font-size: clamp(22px, 2vw, 26px); }

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

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

.sv-meta-strong {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(19px, 1.9vw, 24px);
  letter-spacing: 0.08em;
  color: var(--text-main);
  line-height: 1.5;
}

.sv-meta.is-flush {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* CTA行 */
.sv-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
  /* 2026-08-10：HERO内CTAまでの距離を軽く詰め、visual center調整＋
     Mobile圧縮に寄与（ボタン自体の高さ・デザインは変更しない） */
  margin-top: clamp(24px, 2.6vw, 36px);
}

/* ==========================================================
   3. 思想セクション
   ========================================================== */
.service-creed {
  position: relative;
  background: var(--bg-panel);
  border-top: 1px solid var(--line-soft);
  /* 2026-08-10：約18%縮小（190px→156px上限）。文字サイズ・引用文の
     デザインは変更しない */
  padding: clamp(96px, 9.4vw, 156px) 0;
  overflow: hidden;
}

.sv-creed-inner {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin-inline: auto;
  text-align: center;
}

.sv-creed-label {
  margin-bottom: clamp(26px, 2.6vw, 38px);
}

.sv-creed-text {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 40px);
  letter-spacing: 0.13em;
  line-height: 1.85;
  color: var(--text-main);
}

.sv-creed-rule {
  width: 1px;
  height: clamp(40px, 4vw, 64px);
  margin: clamp(30px, 3vw, 46px) auto 0;
  background: linear-gradient(to bottom, var(--accent), rgba(201, 130, 47, 0));
}

/* ==========================================================
   4. 列組み
   ========================================================== */
.sv-cols {
  display: grid;
  gap: clamp(36px, 3.6vw, 56px) 0;
}

.sv-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sv-col {
  min-width: 0;
  padding: 2px clamp(24px, 2.6vw, 44px);
  border-left: 1px solid var(--line-soft);
  /* 2026-08-10（第4ラウンド）：列全体にごく弱いhoverを追加し、
     「見出し＋テキスト」の羅列に見えないよう塊としての反応を持たせる */
  transition: border-color 0.35s ease, background-color 0.35s ease;
}

.sv-col:hover {
  border-color: var(--accent-line-soft);
  background: rgba(255, 255, 255, 0.008);
}

.sv-cols-3 > .sv-col:nth-child(3n + 1),
.sv-cols-2 > .sv-col:nth-child(2n + 1) {
  border-left: none;
  padding-left: 0;
}

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

.sv-col-sub {
  font-size: 14px;
  letter-spacing: 0.09em;
  line-height: 2.0;
  color: var(--text-sub);
}

/* 2026-08-11：公開前FINAL BRUSH UPで追加した汎用の控えめ表現。
   .sv-col-sub 単体の色（--text-sub）よりわずかに沈めるだけの
   軽量な修飾子。特定ページ・特定idへのスコープは不要（どのページで
   使っても既存デザイン言語の範囲内） */
.sv-col-sub.is-muted { color: var(--text-muted); }

/* ==========================================================
   5. リスト
   ========================================================== */
/* 2026-08-10：リスト項目間の余白を約17%拡大（18px→21px） */
.sv-check-list { display: grid; gap: 21px; }

.sv-check-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1.95;
  color: var(--text-sub);
  /* 2026-08-10（第4ラウンド）：テキストを置いただけに見えないよう、
     項目ごとに細い下罫線＋余白で「情報の塊」として区切る。カードUIには
     せず、線と余白のみで構造を作る */
  padding: 10px 10px 10px 0;
  margin: -10px -10px -10px 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 2px;
  transition: color 0.35s ease, border-color 0.35s ease,
              background-color 0.35s ease, transform 0.35s ease;
}

.sv-check-list li:last-child { border-bottom: none; }

.sv-check-list li:hover {
  color: var(--text-main);
  border-color: var(--accent-line-soft);
  background: rgba(255, 255, 255, 0.014);
  transform: translateX(4px);
}

.sv-check-list .sv-check-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  margin-top: 3px;
  transition: transform 0.35s ease;
}

.sv-check-list li:hover .sv-check-icon { transform: scale(1.08); }

/* 2026-08-10：リスト項目間の余白を約19%拡大（16px→19px） */
.sv-dot-list { display: grid; gap: 19px; }

.sv-dot-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1.95;
  color: var(--text-sub);
}

/* 2026-08-10（第4ラウンド）：check-listと同じ「細い下罫線で区切る」
   構造を適用（is-inline＝インライン表記の変種は対象外） */
.sv-dot-list:not(.is-inline) li {
  padding: 10px 10px 10px 20px;
  margin: -10px -10px -10px 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 2px;
  transition: color 0.35s ease, border-color 0.35s ease,
              background-color 0.35s ease, transform 0.35s ease;
}

.sv-dot-list:not(.is-inline) li:last-child { border-bottom: none; }

.sv-dot-list:not(.is-inline):not(.is-muted) li:hover {
  color: var(--text-main);
  border-color: var(--accent-line-soft);
  background: rgba(255, 255, 255, 0.014);
  transform: translateX(4px);
}

/* is-muted（「含まれないもの」等の除外項目）は静的な区切りのみとし、
   強調のhoverは付けない（除外項目を目立たせないための意図的な差） */
.sv-dot-list.is-muted li:hover {
  border-color: var(--line-soft);
  background: rgba(255, 255, 255, 0.006);
}

.sv-dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-line);
  transition: background-color 0.35s ease, transform 0.35s ease;
}

.sv-dot-list:not(.is-inline):not(.is-muted) li:hover::before {
  background: var(--accent-bright);
  transform: scale(1.3);
}

.sv-dot-list.is-muted li::before { background: rgba(255, 255, 255, 0.24); }

/* 2026-08-10：リスト項目間の余白を約19%拡大（16px→19px） */
.sv-num-list { display: grid; gap: 19px; counter-reset: svnum; }

.sv-num-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1.95;
  color: var(--text-sub);
  counter-increment: svnum;
  padding: 10px 10px 10px 0;
  margin: -10px -10px -10px 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 2px;
  transition: color 0.35s ease, border-color 0.35s ease,
              background-color 0.35s ease, transform 0.35s ease;
}

.sv-num-list li:last-child { border-bottom: none; }

.sv-num-list li:hover {
  color: var(--text-main);
  border-color: var(--accent-line-soft);
  background: rgba(255, 255, 255, 0.014);
  transform: translateX(4px);
}

.sv-num-list li::before {
  content: counter(svnum);
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--accent);
  line-height: 1.95;
  transition: color 0.35s ease;
}

.sv-num-list li:hover::before { color: var(--accent-bright); }

.sv-check-list.is-2col,
.sv-dot-list.is-2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 3.2vw, 64px);
}

.sv-dot-list.is-inline {
  display: block;
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 2.1;
  color: var(--text-sub);
}

.sv-dot-list.is-inline li {
  display: inline;
  padding: 0;
}

.sv-dot-list.is-inline li::before { display: none; }

.sv-dot-list.is-inline li:not(:last-child)::after {
  content: "／";
  color: var(--line);
  padding-inline: 6px;
}

/* ==========================================================
   6. STEP（グループ化した縦フロー）
   ========================================================== */
.sv-flow { display: grid; gap: clamp(34px, 3.4vw, 52px); }

.sv-flow-group {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 56px);
  padding: 26px clamp(16px, 1.6vw, 28px) clamp(28px, 2.8vw, 40px);
  margin: 0 clamp(-16px, -1.6vw, -28px);
  border-top: 1px solid var(--line-soft);
  border-radius: 3px;
  /* 2026-08-10（第4ラウンド）：STEPグループを「テキスト一覧」ではなく
     「まとまり」として認識できるよう、hover時にグループ全体がわずかに
     浮き上がる演出を追加（派手な移動・シャドウは付けない） */
  transition: transform 0.35s ease, border-color 0.35s ease,
              background-color 0.35s ease;
}

.sv-flow-group:hover {
  transform: translateY(-3px);
  border-color: var(--accent-line-soft);
  background: rgba(255, 255, 255, 0.01);
}

/* 2026-08-10（第4ラウンド）：左のSTEPラベル列に細い縦アクセントを添え、
   右の内容列との階層（ラベル＝案内、本文＝内容）を強める */
.sv-flow-group > div:first-child {
  position: relative;
  padding-left: 16px;
}

.sv-flow-group > div:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: var(--accent-line);
}

.sv-flow-label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.sv-flow-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: var(--text-main);
}

/* 2026-08-11（公開前FINAL BRUSH UP）：内部の細かい処理ステップを列挙
   する代わりに、顧客から見て理解しやすい大きな段階を主役にするための
   1行説明。.sv-flow-groupの右列に.sv-stepsの代わりとして使用する
   （.sv-flow-groupの2カラム構成自体は変更しない） */
.sv-flow-desc {
  align-self: center;
  max-width: 40em;
  font-size: 14.5px;
  letter-spacing: 0.08em;
  line-height: 2.0;
  color: var(--text-sub);
}

/* 情報量を減らした段階（.sv-flow-desc使用時）は、内容に対して余白が
   相対的に大きくなりすぎないよう、グループ間・グループ内paddingのみ
   軽く詰める（グリッド構成・hover挙動は変更しない） */
.sv-flow:has(.sv-flow-desc) { gap: clamp(18px, 1.8vw, 28px); }
.sv-flow-group:has(.sv-flow-desc) { padding-top: 18px; padding-bottom: 20px; }

/* 2026-08-10：STEP項目間の余白を約18%拡大（22px→26px） */
.sv-steps { display: grid; gap: 26px; }

.sv-step {
  display: grid;
  grid-template-columns: minmax(0, 62px) minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  /* 2026-08-10（第4ラウンド）：STEP単体にも軽いhoverを追加し、
     グループ内でも個々のSTEPを追いやすくする */
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: 2px;
  transition: background-color 0.35s ease, transform 0.35s ease;
}

.sv-step:hover {
  background: rgba(255, 255, 255, 0.014);
  transform: translateX(4px);
}

.sv-step-label {
  font-family: var(--font-en);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  transition: color 0.35s ease;
}

.sv-step:hover .sv-step-label { color: var(--accent); }

.sv-step-text {
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1.95;
  color: var(--text-sub);
  transition: color 0.35s ease;
}

.sv-step:hover .sv-step-text { color: var(--text-main); }

/* ==========================================================
   7. 成果物
   ========================================================== */
.sv-deliverable {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: clamp(36px, 4.4vw, 80px);
  align-items: start;
}

.sv-deliverable-visual {
  display: grid;
  gap: 22px;
  padding-right: clamp(0px, 2vw, 32px);
  /* 2026-08-10（第4ラウンド）：成果物ブロック全体にごく控えめなhoverを
     追加し、アイコン＋名称が単なる画像＋テキストに見えないようにする */
  transition: opacity 0.35s ease;
}

.sv-deliverable:hover .sv-deliverable-visual { opacity: 0.86; }

.sv-deliverable-icon {
  width: clamp(72px, 6.4vw, 92px);
  height: clamp(72px, 6.4vw, 92px);
  object-fit: contain;
  transition: transform 0.35s ease;
}

.sv-deliverable:hover .sv-deliverable-icon { transform: scale(1.04); }

.sv-deliverable-name {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(19px, 1.9vw, 25px);
  letter-spacing: 0.16em;
  color: var(--text-main);
  line-height: 1.5;
}

.sv-deliverable-spec {
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1.95;
  color: var(--text-muted);
}

/* ==========================================================
   8. 導入前／導入後
   ========================================================== */
.sv-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.8vw, 44px);
}

.sv-compare-col {
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.012);
  transition: border-color 0.35s ease, transform 0.35s ease;
}

.sv-compare-col:hover { transform: translateY(-2px); }

.sv-compare-col.is-after {
  border-color: var(--accent-line-soft);
  background: linear-gradient(to bottom, rgba(201, 130, 47, 0.05), rgba(201, 130, 47, 0) 72%);
}

.sv-compare-col:not(.is-after):hover { border-color: rgba(255, 255, 255, 0.22); }
.sv-compare-col.is-after:hover { border-color: var(--accent-line); }

.sv-compare-label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.sv-compare-col.is-after .sv-compare-label { color: var(--accent); }

/* ==========================================================
   9. 縦型エディトリアル・タイムライン（90日の5フェーズ）
   ========================================================== */
.sv-timeline { display: grid; }

.sv-tl-item {
  display: grid;
  grid-template-columns: minmax(0, 220px) 1px minmax(0, 1fr);
  gap: 0 clamp(28px, 3.2vw, 56px);
  padding: clamp(34px, 3.4vw, 48px) clamp(12px, 1.2vw, 20px);
  margin-inline: clamp(-12px, -1.2vw, -20px);
  border-top: 1px solid var(--line-soft);
  border-radius: 3px;
  transition: background-color 0.35s ease;
}

.sv-tl-item:first-child { border-top: none; padding-top: 6px; }

.sv-tl-item:hover { background: rgba(255, 255, 255, 0.012); }

.sv-tl-label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.26em;
  color: var(--accent);
  margin-bottom: 14px;
}

.sv-tl-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(21px, 2.1vw, 28px);
  letter-spacing: 0.14em;
  line-height: 1.6;
  color: var(--text-main);
}

/* 5フェーズを貫く1本の細いオレンジ線 */
.sv-tl-rail {
  position: relative;
  width: 1px;
  background: var(--accent-line-soft);
}

.sv-tl-rail::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent-line);
}

.sv-tl-item:first-child .sv-tl-rail {
  background: linear-gradient(to bottom, rgba(201, 130, 47, 0) 0, var(--accent-line-soft) 10px);
}

.sv-tl-item:last-child .sv-tl-rail {
  background: linear-gradient(to bottom, var(--accent-line-soft) 0, var(--accent-line-soft) 62%, rgba(201, 130, 47, 0) 100%);
}

.sv-tl-lead {
  font-size: var(--fs-lead);
  letter-spacing: 0.09em;
  line-height: 1.95;
  color: #C3BFB8;
  margin-bottom: 26px;
  max-width: 34em;
}

/* ==========================================================
   10. ROI / 数式
   ========================================================== */
.sv-formula {
  display: grid;
  gap: clamp(24px, 2.6vw, 36px);
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.012);
}

.sv-formula-row dt {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 12px;
}

.sv-formula-row dd {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 2.1;
  color: var(--text-main);
}

.sv-formula-row dd .sv-op {
  color: var(--accent);
  padding-inline: 6px;
  font-family: var(--font-en);
}

/* ==========================================================
   11. アイコン行・タグ
   ========================================================== */
.sv-icon-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.sv-icon {
  flex: none;
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.sv-icon-lg {
  width: clamp(60px, 5vw, 76px);
  height: clamp(60px, 5vw, 76px);
  object-fit: contain;
}

.sv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sv-tags li {
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  line-height: 1.6;
  transition: border-color 0.35s ease, color 0.35s ease, background-color 0.35s ease;
}

.sv-tags li:hover {
  border-color: var(--accent-line-soft);
  color: var(--text-main);
  background: rgba(201, 130, 47, 0.03);
}

/* ==========================================================
   12. 2つの運用方法（公平比較）
   ========================================================== */
.sv-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.8vw, 44px);
}

.sv-choice-col {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.012);
  transition: border-color 0.35s ease, transform 0.35s ease;
}

.sv-choice-col:hover {
  border-color: var(--accent-line-soft);
  transform: translateY(-2px);
}

.sv-choice-sub {
  font-family: var(--font-en);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.sv-choice-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(19px, 1.9vw, 24px);
  letter-spacing: 0.12em;
  color: var(--text-main);
  margin-bottom: 20px;
}

.sv-choice-foot {
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--text-sub);
}

/* ==========================================================
   13. FAQ
   ========================================================== */
.service-faq {
  position: relative;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-panel);
  overflow: hidden;
}

/* 2026-08-10（第4ラウンド）：FAQと最終CTAが同一写真を背景に使っており、
   2セクションの印象が似すぎて見づらいという指摘への対応。最終CTA側を
   「写真の主役」として残すため、FAQ側の背景写真は非表示にし、既存の
   is-panel系セクション同様「黒背景＋薄い面＋罫線＋余白」の構成へ寄せる。
   HTML（<img>タグ）自体は変更せず、表示のみをCSSで消している */
.service-faq-visual { display: none; }

.service-faq-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 80px);
  padding-block: var(--section-space-medium);
}

/* 写真がなくなった分、見出し列とFAQ列の間に細い罫線を入れて
   構造を保つ（新しい色は使わず既存の--line-softのみ） */
.service-faq-inner > .sv-head {
  align-self: start;
  padding-right: clamp(24px, 2.6vw, 44px);
  border-right: 1px solid var(--line-soft);
}

.sv-faq-list { border-top: 1px solid var(--line-soft); }

.sv-faq-item {
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.sv-faq-item:hover {
  background: rgba(255, 255, 255, 0.012);
  border-color: var(--accent-line-soft);
}

.sv-faq-q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 22px 2px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1.8;
  transition: color 0.3s ease;
}

/* 2026-08-10（FINAL POLISH）：Mobileで質問文が2行に折り返る際、末尾に
   短い断片（例：「か？」）だけが残る不自然な改行が発生していたため、
   質問テキスト側（Q.マーク・アイコンを除く中央列）にtext-wrap:balanceを
   適用し、2行の文字量ができるだけ均等になる位置で折り返すようにする。
   font-size・列幅の設計（auto/1fr/auto）は変更しない */
.sv-faq-q > span:not(.sv-faq-qmark) { text-wrap: balance; }

.sv-faq-q:hover { color: var(--accent-bright); }

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

.sv-faq-qmark {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.sv-faq-mark {
  width: 16px;
  height: 16px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.sv-faq-q[aria-expanded="true"] .sv-faq-mark { transform: rotate(45deg); }

.sv-faq-a {
  padding: 0 2px 26px 30px;
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 2.05;
  color: var(--text-sub);
  max-width: 44em;
}

/* ==========================================================
   13B. 詳細アコーディオン（公開前FINAL BRUSH UP・2026-08-11）
   目的：メイン表示では「相談判断に必要な情報」までに絞り、契約前に
   確認が必要な数量条件・対象外項目・詳細仕様などは、この静かな
   accordionへ収める。FAQ（.sv-faq-q）とは見た目を分け、より控えめな
   トーンにする（「Q.」マークなし、font-sizeを一段小さく、色を
   text-mutedへ）。開閉ロジックはFAQと同じ仕組みをservices.jsで共用
   （aria-controls属性を持つボタンを一括で処理）し、新規JSロジックは
   追加していない。全ページ共通の名前空間のため、3ページどこでも
   追加で使用できる。
   ========================================================== */
.sv-accordion { border-top: 1px solid var(--line-soft); }
.sv-accordion:last-child { border-bottom: 1px solid var(--line-soft); }

.sv-accordion-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 2px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.sv-accordion-toggle:hover { color: var(--text-sub); }

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

.sv-accordion-toggle .sv-faq-mark {
  width: 13px;
  height: 13px;
  object-fit: contain;
  opacity: 0.55;
  transition: transform 0.3s ease;
}

.sv-accordion-toggle[aria-expanded="true"] .sv-faq-mark { transform: rotate(45deg); }

.sv-accordion-panel {
  padding: 0 2px 26px;
}

.sv-accordion-panel .sv-dot-list,
.sv-accordion-panel .sv-note { margin-top: 0; }

.sv-accordion-panel .sv-note:first-child { margin-top: 4px; }

/* ==========================================================
   14. 最終CTA
   ========================================================== */
.service-cta {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
}

.service-cta-visual { position: absolute; inset: 0; }

.service-cta-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

.service-cta-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(5, 5, 5, 0.88) 0%,
    rgba(5, 5, 5, 0.64) 44%,
    rgba(5, 5, 5, 0.86) 100%);
}

.service-cta-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-block: clamp(104px, 10vw, 168px);
}

.service-cta-title {
  font-family: var(--font-serif);
  font-weight: 400;
  /* 2026-08-10：約10%縮小（38px→34px） */
  font-size: clamp(21px, 2.4vw, 34px);
  letter-spacing: 0.12em;
  line-height: 1.78;
  color: var(--text-main);
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55);
}

.service-cta-meta {
  margin-top: clamp(24px, 2.4vw, 34px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 10px 24px;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: #C3BFB8;
}

.service-cta .sv-cta-row { justify-content: center; }

/* ==========================================================
   15. 関連導線
   ========================================================== */
.sv-related {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.sv-related-card {
  display: block;
  padding: clamp(26px, 2.8vw, 36px);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  transition: border-color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.sv-related-card:hover {
  border-color: var(--accent-line-soft);
  background: rgba(201, 130, 47, 0.03);
  transform: translateY(-2px);
}

.sv-related-name {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--text-main);
  margin-bottom: 16px;
}

.sv-related-text {
  font-size: 14.5px;
  letter-spacing: 0.08em;
  line-height: 1.95;
  color: var(--text-sub);
  margin-bottom: 18px;
}

.sv-related-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.sv-related-card:hover .sv-related-more { color: var(--accent-bright); }

/* ==========================================================
   16. レスポンシブ
   ========================================================== */
@media (max-width: 1100px) {
  .sv-tl-item { grid-template-columns: minmax(0, 180px) 1px minmax(0, 1fr); }
  .sv-deliverable { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .service-hero {
    min-height: 0;
    display: block;
    padding-top: 0;
  }
  /* 2026-08-10（第3ラウンド）：第2ラウンド後も圧縮率が目標30〜45%に
     未達（実測約21〜26%）だったため、画像帯の高さをさらに圧縮
     （300px→140px下限、元比で約53%縮小）。写真自体・トリミングは
     無変更、表示高さのみの調整。文字サイズ・行間・左右余白は不変 */
  .service-hero-visual {
    position: relative;
    width: 100%;
    height: clamp(140px, 30vw, 340px);
    margin-top: var(--header-h);
  }
  .service-hero-visual::after {
    background: linear-gradient(to bottom,
      rgba(5, 5, 5, 0.5) 0%,
      rgba(5, 5, 5, 0.05) 32%,
      rgba(5, 5, 5, 0.55) 76%,
      var(--bg) 100%);
  }
  /* 2026-08-10（第3ラウンド）：画像帯直下の余白をさらに圧縮
     （32px→10px下限） */
  .service-hero-inner { padding-top: clamp(10px, 2vw, 40px); }
  /* 2026-08-10（第3ラウンド）：HERO下部paddingがMobileでも未圧縮の
     ままだった（64px固定）ため、他ブロックと同水準まで圧縮する。
     PC（1025px以上）は変更しない */
  .service-hero-inner { padding-bottom: 24px; }
  .service-hero-text { max-width: 100%; }
  /* 2026-08-10（第3ラウンド）：Mobileのみ、英字ラベル→タイトルの余白を
     さらに圧縮（24px→8px）。PC（1025px以上）は変更しない */
  .service-hero .en-label { margin-bottom: 8px; }
  /* 2026-08-10（第3ラウンド）：Mobileのみ、HERO説明文の上余白を圧縮
     （font-size・line-height・左右幅は不変） */
  .service-hero-desc { margin-top: 8px; }
  /* 2026-08-10（第3ラウンド）：Mobileのみ、料金・期間ブロックの
     上余白・内部paddingを圧縮（文字サイズ・行間は不変） */
  .sv-meta {
    margin-top: 10px;
    padding-top: 8px;
    gap: 20px;
  }
  /* 2026-08-10（第3ラウンド）：MobileのみHERO内CTAまでの余白・
     CTA同士の内部gapを圧縮（ボタン自体の高さ・タップ領域は不変） */
  .service-hero .sv-cta-row {
    margin-top: 8px;
    gap: 10px;
  }

  .sv-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-cols-3 > .sv-col:nth-child(3n + 1) {
    border-left: 1px solid var(--line-soft);
    padding-left: clamp(24px, 2.6vw, 44px);
  }
  .sv-cols-3 > .sv-col:nth-child(2n + 1) {
    border-left: none;
    padding-left: 0;
  }

  .sv-deliverable { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sv-deliverable-visual { padding-right: 0; }

  .service-faq-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  /* 2026-08-10（第4ラウンド）：Mobileは1列に積むレイアウトのため、
     PC用の縦罫線（border-right）を見出し下の横罫線に切り替える */
  .service-faq-inner > .sv-head {
    padding-right: 0;
    padding-bottom: clamp(24px, 5vw, 32px);
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
  }

  .sv-flow-group { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .service-section,
  .service-section.is-large { padding-block: clamp(72px, 12vw, 104px); }

  .service-creed { padding-block: clamp(84px, 15vw, 128px); }

  .sv-head { gap: 14px; row-gap: 12px; }
  /* 狭幅では見出しを独立した行に落とし、日本語の見出しが切れないようにする */
  .sv-head > .sv-title { flex: 1 1 100%; min-width: 0; }

  .sv-cols-3,
  .sv-cols-2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .sv-col,
  .sv-cols-3 > .sv-col:nth-child(3n + 1),
  .sv-cols-3 > .sv-col:nth-child(2n + 1),
  .sv-cols-2 > .sv-col:nth-child(2n + 1) {
    border-left: none;
    border-top: 1px solid var(--line-soft);
    padding: 34px 0 0;
  }
  .sv-cols > .sv-col:first-child {
    border-top: none;
    padding-top: 0;
  }

  .sv-check-list.is-2col,
  .sv-dot-list.is-2col { grid-template-columns: minmax(0, 1fr); }

  .sv-compare,
  .sv-choice { grid-template-columns: minmax(0, 1fr); }

  /* タイムラインは1列へ。レールは左端に残す */
  .sv-tl-item {
    grid-template-columns: 1px minmax(0, 1fr);
    gap: 0 26px;
    padding: 32px 0;
  }
  .sv-tl-rail { grid-row: 1 / span 2; }
  .sv-tl-left { grid-column: 2; margin-bottom: 22px; }
  .sv-tl-body { grid-column: 2; }
  .sv-tl-item:first-child { padding-top: 4px; }

  .sv-flow-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .sv-related { grid-template-columns: minmax(0, 1fr); }

  .sv-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    max-width: 420px;
  }
  .service-cta .sv-cta-row { margin-inline: auto; }
  .sv-cta-row .btn-outline { width: 100%; min-height: 60px; }
  /* 2026-08-10（第2ラウンド）：狭幅でCTAボタンの文言が2行に折り返り、
     ボタン自体の高さが不必要に大きくなっていたため（実測78px）、
     TOPページのMobile版CTA（styles.css 2489行目付近）と同じ手法で
     左右paddingとletter-spacingのみを詰めて1行に収める。文言・リンク・
     ボタンのデザイン自体（背景・枠線・色）は変更しない */
  .sv-cta-row .btn-outline {
    padding-inline: 22px;
    letter-spacing: 0.13em;
  }
  .sv-cta-row .btn-text { align-self: flex-start; }
  .service-cta .sv-cta-row .btn-text { align-self: center; }

  .sv-meta { gap: 24px; }
  .sv-meta-item { padding-left: 24px; }

  .sv-faq-a { padding-left: 0; }
}

@media (max-width: 480px) {
  .service-hero-title { letter-spacing: 0.06em; }
  .sv-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .sv-meta-item { padding-left: 0; border-left: none; }
  .sv-compare-col,
  .sv-choice-col,
  .sv-formula { padding: 24px 20px; }
  .sv-tags li { font-size: 13px; padding: 10px 16px; }
  .sv-step { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* 2026-08-10（第3ラウンド）：SALES DESIGN 90はHERO内CTA文言が他ページより
   長く（「まずはSALES SCANから相談する」）、360px幅では第2ラウンドの
   調整（padding-inline:22px / letter-spacing:0.13em）でもなお2行に
   折り返っていた（実測78px）。360px以下限定でさらに詰め、1行に収める。
   文言・リンク・ボタンのデザイン自体は変更しない */
@media (max-width: 400px) {
  .sv-cta-row .btn-outline {
    padding-inline: 10px;
    letter-spacing: 0.03em;
  }
}

/* ==========================================================
   17. モーション低減
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .sv-faq-mark,
  .sv-related-card { transition: none; }
}

/* ==========================================================
   18. SALES DESIGN 90：05〜08 最終調整（2026-08-11）
   対象は #scope（05標準対応範囲／06標準範囲外）と #kpi（07検証する成果／
   08投資回収の考え方）のみ。すべて body.service-design 配下・当該id配下
   に厳密スコープしており、他ページ（SALES SCAN／SALES GROWTH PARTNER）・
   本ページの01〜04・09〜11・HERO・FAQ・最終CTA・header/footer・TOPには
   一切影響しない。HTML側は is-inline→is-2col への置換（既存の共通
   クラスの流用のみ、新規クラス・新規hoverロジックは追加していない）と、
   短い語句への既存 .nb クラス追加（不自然な改行防止）のみ。
   ========================================================== */

/* 05/06・07/08 共通：section全体の縦paddingを直接指定し、01〜04・09〜11・
   他ページには影響しない形で約12〜15%圧縮する（共有トークン
   var(--section-space-medium) 自体は変更しない） */
body.service-design #scope.service-section,
body.service-design #kpi.service-section {
  padding: clamp(56px, 4.8vw, 84px) 0;
}

body.service-design #scope .sv-head,
body.service-design #kpi .sv-head {
  margin-bottom: clamp(28px, 2.8vw, 40px);
}

body.service-design #scope .sv-block + .sv-block,
body.service-design #kpi .sv-block + .sv-block {
  margin-top: clamp(24px, 2.4vw, 36px);
}

/* 05/06：静かなパネル構造。強いカードUIにはせず、細い枠線＋ごく薄い
   背景＋十分な内側余白のみで「1つの情報パネル」として認識できるように
   する。角丸は極小、shadowなし、黒基調維持 */
body.service-design #scope .sv-cols-2 {
  align-items: start;
  gap: clamp(20px, 2.4vw, 32px) clamp(28px, 2.8vw, 44px);
}

body.service-design #scope .sv-col {
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  padding: clamp(28px, 2.8vw, 44px) clamp(24px, 2.6vw, 40px);
  background: rgba(255, 255, 255, 0.008);
  transition: border-color 0.35s ease, background-color 0.35s ease;
}

body.service-design #scope .sv-col:hover {
  border-color: var(--accent-line-soft);
  background: rgba(255, 255, 255, 0.014);
}

/* 05を主・06を副にする。文字を極端に暗くはせず、06のリスト部分のみ
   ごくわずかに控えめにする（見出し・番号の強さは変えない） */
body.service-design #scope .sv-col:last-child {
  background: rgba(255, 255, 255, 0.004);
}

body.service-design #scope .sv-col:last-child .sv-dot-list {
  opacity: 0.86;
}

body.service-design #scope .sv-col .sv-dot-list.is-2col {
  column-gap: clamp(20px, 2.2vw, 32px);
}

/* 07/08：05/06と同じパネル表現を繰り返さない。#kpiは元々is-panel
   （背景差）＋.sv-colの細いborder-leftのみで構造化し、05/06とは異なる
   見え方を維持する。07内は「定量KPI候補」を主・「定性データ」を副に */
body.service-design #kpi .sv-col:first-child .sv-block + .sv-block {
  opacity: 0.86;
}

/* 08：ROI SIMULATIONボックスのみ、05〜07よりわずかに存在感を持たせる。
   発光・強いshadow・オレンジ面積の増加はせず、背景の濃さと余白、
   ラベルのコントラストのみで調整する */
body.service-design #kpi .sv-formula {
  background: rgba(255, 255, 255, 0.02);
  padding: clamp(30px, 3.2vw, 46px);
}

body.service-design #kpi .sv-icon-row .sv-col-sub {
  color: var(--text-main);
  letter-spacing: 0.12em;
}

/* Mobile（860px以下）：05/06はPCの細い2カラムをそのまま縮小せず、
   05→06→07→08の順で縦積みにした上で、各パネルを独立した「静かな枠」
   として維持する。他セクション・他ページのMobile挙動には影響しない */
@media (max-width: 860px) {
  body.service-design #scope .sv-cols-2 {
    gap: 20px;
  }

  body.service-design #scope .sv-col,
  body.service-design #scope .sv-cols-2 > .sv-col:nth-child(2n + 1) {
    border: 1px solid var(--line-soft);
    border-radius: 2px;
    padding: clamp(24px, 6vw, 32px) clamp(20px, 5vw, 28px);
  }
}