/* ============================================================
   SpotRight LP — style.css (v2)
   ビジュアル全面刷新（03_design-direction_v2.md 準拠）。
   コピーは一切変更なし。デザイントークン・タイポ・アイコン・
   セクション別レイアウト・モーションを総入れ替え。
   ============================================================ */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
table { border-collapse: collapse; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- 2. デザイントークン v2（§3） ---------- */
:root{
  /* 無彩色基調（暖かい墨。純黒禁止） */
  --ink:#1D1C1B;
  --ink-soft:#615E58;
  --ink-faint:#8B877F;
  --bg:#FFFFFF;
  --bg-warm:#F7F5F1;
  --line:#E9E6E0;
  --line-strong:#D6D2CA;
  --white:#FFFFFF; /* 白そのもの（ボタン文字色・カード面など意味用途で--bgと分離。値は同一） */

  /* ブランド緑（CTAと強調のみ。使用面積5%未満厳守） */
  --green-500:#06C755;
  --green-600:#049B45;
  --green-700:#047A38;
  --green-050:#EAF7EF;

  /* 夜（ブックエンド専用） */
  --night:#14171A;
  --night-2:#1C2024;
  --night-text:#F5F2EA;
  --night-text-soft:color-mix(in srgb, var(--night-text) 75%, transparent);
  --night-line:color-mix(in srgb, var(--night-text) 16%, transparent);
  --spot:#F5E9C8;

  /* 記号色（テキストは *-700 のみ。面は 050 のみ） */
  --warn-700:#C74A2C;  --warn-050:#FBEDE8;
  --amber-700:#8C5A17; --amber-500:#E9A93D; --amber-050:#FAF3E6;

  /* 実GoogleマップUI再現用の固有色（ヒーロー口コミモック限定。ブランドトークンとは別枠） */
  --gmap-saved-bg:#CFE8E6;
  --gmap-saved-ink:#17494D;
  --avatar-default:#7E57C2;

  /* 書体 */
  --font-serif:"Noto Serif JP", serif;
  --font-sans:"Noto Sans JP", sans-serif;
  --font-num:"Outfit", sans-serif;

  /* 形状・影（3階層） */
  --radius-s:10px; --radius-m:16px; --radius-pill:999px;
  --shadow-soft:0 6px 24px color-mix(in srgb, var(--ink) 7%, transparent);
  --shadow-hero:0 24px 64px rgba(0,0,0,.35);
  --shadow-cta:inset 0 1px 0 color-mix(in srgb, var(--white) 25%, transparent), 0 1px 2px rgba(4,122,56,.4), 0 8px 20px color-mix(in srgb, var(--green-600) 28%, transparent);

  --container-w:1120px;
  --section-pad-y:clamp(56px, 9vw, 120px);
  --section-pad-x:24px;
}
@media (min-width:768px){
  :root{ --section-pad-x:40px; }
}

/* ---------- 3. ベースタイポグラフィ（§4） ---------- */
body{
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.9;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3{
  font-family: var(--font-sans);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .02em;
  font-feature-settings: "palt";
}
h2{ font-size: clamp(26px, 4vw, 40px); }
h3{ font-size: clamp(20px, 3vw, 26px); font-weight: 700; letter-spacing: .01em; }
p{ font-size: clamp(16px, 1.6vw, 18px); }

.section-inner{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--section-pad-x);
}
.section-sub{ color: var(--ink-soft); margin-top: 12px; max-width: 38em; }
.s2-diagnosis .section-sub,
.s3-shift .section-sub,
.s4-data .section-sub,
.s5-industries .section-sub{ margin-left: auto; margin-right: auto; }

/* セクションeyebrow（緑の小面積使用先） */
.eyebrow{
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--green-700);
  margin-bottom: 10px;
}
.s2-diagnosis .eyebrow, .s3-shift .eyebrow, .s4-data .eyebrow, .s5-industries .eyebrow{ display:block; }
/* eyebrowの整列はセクション見出しに追従（S2/S3/S5=中央、S4=左） */
.s2-diagnosis .eyebrow, .s3-shift .eyebrow, .s5-industries .eyebrow{ text-align: center; }
.s4-data .eyebrow{ text-align: left; }

/* ---------- 4. アイコンシステム（§5） ---------- */
.icon{
  width: 20px; height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-fill{ fill: currentColor; stroke: none; }
.icon-star{ fill: var(--amber-500); stroke: none; }

/* ---------- 5. ボタン ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  max-width: 100%;
  padding: 18px 32px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 19px; /* コントラスト規律: green-600地の白文字は19px以上必須 */
  line-height: 1.2;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:focus-visible{ outline: 3px solid var(--green-700); outline-offset: 3px; }

.btn-primary{
  background: var(--green-600);
  color: var(--white);
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-cta), 0 14px 28px color-mix(in srgb, var(--green-600) 22%, transparent); }
.btn-primary-inverse{
  background: var(--white);
  color: var(--green-700);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 14%, transparent);
}
.btn-primary-inverse:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--ink) 18%, transparent); }
.btn-primary-large{
  padding: 22px 44px;
  font-size: 22px;
}
.btn-eyebrow{
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  background: color-mix(in srgb, var(--white) 22%, transparent);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.btn-line-icon{
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  background: color-mix(in srgb, var(--white) 25%, transparent);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: .03em;
}
.btn-primary-inverse .btn-line-icon{ background: var(--green-050); color: var(--green-700); }
.btn-arrow{ transition: transform .25s cubic-bezier(.4,0,.2,1); }
.btn-arrow-anim:hover .btn-arrow{ transform: translateX(6px); }

/* 小型UIボタン（19px未満）はコントラスト規律により green-700 地 */
.header-cta,
.mobile-cta-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-700);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  transition: opacity .2s ease, transform .2s ease;
}
.header-cta:hover, .mobile-cta-btn:hover{ transform: translateY(-1px); }

/* ---------- 6. 信頼バッジ共通 ---------- */
.trust-badges{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  font-size: 13px;
  color: var(--ink-soft);
}
.trust-badges li{ display: inline-flex; align-items: center; gap: 5px; }
.cta-band-dark .trust-badges{ color: var(--ink-soft); }
.s8-closing .trust-badges{ color: var(--night-text-soft); }

/* ============================================================
   S0. ヘッダー
   ============================================================ */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  padding: 20px var(--section-pad-x);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, padding .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{
  background: var(--bg);
  border-bottom-color: var(--line);
  box-shadow: 0 2px 16px color-mix(in srgb, var(--ink) 6%, transparent);
  padding-top: 14px;
  padding-bottom: 14px;
}
.header-inner{
  max-width: var(--container-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo{
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .01em;
  transition: color .3s ease;
}
.logo-spot{ color: var(--night-text); }
.logo-right{ color: var(--green-500); }
.site-header.is-scrolled .logo-spot{ color: var(--ink); }
.site-header.is-scrolled .logo-right{ color: var(--green-700); }

.header-cta{
  opacity: 0;
  pointer-events: none;
}
.header-cta.is-visible{ opacity: 1; pointer-events: auto; }

.mobile-cta-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--night);
  border-top: 1px solid var(--night-line);
  transform: translateY(100%);
  transition: transform .3s ease;
}
.mobile-cta-bar.is-visible{ transform: translateY(0); }
.mobile-cta-bar .mobile-cta-btn{
  display: flex;
  justify-content: center;
  width: 100%;
  font-size: 15px;
  padding: 14px;
}
@media (min-width: 768px){
  .mobile-cta-bar{ display: none; }
}

/* ============================================================
   共通: ダークセクション（S1/S8・§1 夜のブックエンド）
   ============================================================ */
.s1-hero, .s8-closing{
  position: relative;
  background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  color: var(--night-text);
  overflow: hidden;
}
.hero-spotlight, .closing-spotlight{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-spotlight{
  background: radial-gradient(60% 55% at 18% 8%, var(--spot) 0%, transparent 70%);
  opacity: .1;
}
.closing-spotlight{
  background: radial-gradient(50% 60% at 50% 10%, var(--spot) 0%, transparent 72%);
  opacity: .09;
}

/* 写真スロット: background-image の多重指定で「無くても壊れないフォールバック」を実現。
   1層目=スクリム（常時） 2層目=実写真(無ければ透過して下が見える) 3層目/4層目=光条 5層目=ノイズ 6層目=土台グラデ。
   ノイズはfeTurbulenceのdata URI（KB規律によりHANDOFFに記録。色そのものは持たずopacityのみ） */
.hero-bg, .closing-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  background-position: center, center, center, center, center, center;
  background-size: cover, cover, cover, cover, 220px 220px, cover;
}
.hero-bg{
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--night) 50%, transparent) 0%, color-mix(in srgb, var(--night) 42%, transparent) 45%, color-mix(in srgb, var(--night) 88%, transparent) 100%),
    url("../assets/img/hero-night.webp"),
    linear-gradient(100deg, transparent 28%, color-mix(in srgb, var(--spot) 6%, transparent) 29%, color-mix(in srgb, var(--spot) 6%, transparent) 31%, transparent 32%),
    linear-gradient(100deg, transparent 52%, color-mix(in srgb, var(--spot) 4%, transparent) 53%, color-mix(in srgb, var(--spot) 4%, transparent) 54.4%, transparent 55.4%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/></svg>"),
    linear-gradient(180deg, color-mix(in srgb, var(--night) 10%, transparent) 0%, var(--night) 85%);
}
.closing-bg{
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--night) 55%, transparent) 0%, color-mix(in srgb, var(--night) 50%, transparent) 40%, color-mix(in srgb, var(--night) 90%, transparent) 100%),
    url("../assets/img/closing-night.webp"),
    linear-gradient(80deg, transparent 30%, color-mix(in srgb, var(--spot) 5%, transparent) 31%, color-mix(in srgb, var(--spot) 5%, transparent) 33%, transparent 34%),
    linear-gradient(80deg, transparent 60%, color-mix(in srgb, var(--spot) 4%, transparent) 61%, color-mix(in srgb, var(--spot) 4%, transparent) 62.4%, transparent 63.4%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/></svg>"),
    linear-gradient(180deg, var(--night-2) 0%, var(--night) 100%);
}

/* セクション接続装飾: S1下端=なだらかな一山ウェーブ / S8上端=斜めカット */
.section-wave{
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 1;
  line-height: 0;
  pointer-events: none;
}
.section-wave svg{ width: 100%; height: clamp(36px, 6vw, 84px); display: block; }
.section-wave path{ fill: var(--bg); }

.s8-closing{
  clip-path: polygon(0 clamp(24px,3.4vw,56px), 100% 0, 100% 100%, 0 100%);
  margin-top: -1px;
  padding-top: clamp(24px,3.4vw,56px);
}

/* ============================================================
   S1. ヒーロー
   ============================================================ */
/* ファーストビューは1画面に収める: min-height:100svh+中央寄せ、中身は折り目で切らない */
.s1-hero{
  padding-top: 84px; /* 固定ヘッダー分 */
  display: flex;
  align-items: center;
}
@media (min-width: 1080px){
  .s1-hero{ min-height: 100svh; }
}
.hero-inner{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 40px var(--section-pad-x) 88px; /* 下は波形divider分の逃げ */
  display: grid;
  gap: 48px;
  text-align: left;
}
@media (min-width: 1080px){
  .hero-inner{
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    padding-top: 24px;
  }
}
.hero-copy, .hero-visual{ min-width: 0; }

.hero-copy .badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--night-text-soft);
  background: color-mix(in srgb, var(--white) 6%, transparent);
  border: 1px solid var(--night-line);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.badge-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-500) 20%, transparent);
}

.hero-h1{
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(44px, 6.2vw, 74px); /* 1画面に収めるためのサイズ再調整（旧8vw/88px上限は折り目超えの主因） */
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--night-text);
  margin-bottom: 16px;
}

.hero-sub{
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 500;
  color: var(--night-text);
  margin-bottom: 16px;
}
.hero-lead{
  font-size: 14px;
  line-height: 1.85;
  color: var(--night-text-soft);
  max-width: 46em;
  margin-bottom: 24px;
}
.hero-copy .btn{ margin-bottom: 14px; }
.hero-addendum{
  font-size: 14px;
  color: var(--night-text-soft);
}

/* --- ヒーロービジュアル（Googleマップ風カード + 口コミ） --- */
.hero-visual{ position: relative; z-index: 2; }
.gmap-card{
  background: var(--white);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-hero);
  padding: 18px;
  color: var(--ink);
  max-width: min(380px, 100%);
}
.gmap-search{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-warm);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 14px;
  margin-bottom: 14px;
  color: var(--ink-soft);
}
.gmap-search-icon{ display: inline-flex; }
.gmap-search-icon .icon{ width: 16px; height: 16px; }
.gmap-search-text{ flex: 1; color: var(--ink); font-weight: 500; }
.gmap-search-close{ color: var(--ink-soft); }
.gmap-result{ display: flex; gap: 12px; }
.gmap-result-thumb{
  width: 72px; height: 72px; border-radius: 14px; flex-shrink: 0;
  background-color: var(--bg-warm);
  background-image: url("../assets/img/maruya-thumb.webp");
  background-size: cover;
  background-position: center;
}
.gmap-result-name{ font-weight: 700; font-size: 15px; }
.gmap-result-rating{ font-size: 13px; color: var(--ink-soft); margin: 2px 0; }
.gmap-result-rating .stars{ color: var(--amber-500); }
.gmap-result-meta{ font-size: 12px; color: var(--ink-soft); }
.gmap-result-note{ font-size: 12px; color: var(--green-700); margin-top: 4px; }

.review-cards{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: -20px;
  margin-left: 16px;
}
.review-card{
  background: var(--white);
  border-radius: 16px;
  padding: 14px 18px;
  max-width: min(300px, 100%);
  color: var(--ink);
}
.review-card .stars{ color: var(--amber-500); font-size: 13px; margin-bottom: 4px; }
.review-card p{ font-size: 13px; line-height: 1.6; margin: 0; }

@media (max-width: 767px){
  .review-cards{ margin-left: 0; margin-top: 12px; }
  .review-card:nth-child(n+2){ display: none; }
}

/* ============================================================
   共通: CTAバンド（full-bleed対応）
   ============================================================ */
.cta-band{
  border-radius: var(--radius-m);
  padding: 40px var(--section-pad-x);
  text-align: center;
  margin-top: 56px;
}
/* full-bleed: コンテナ幅の制約を外し画面幅いっぱいに帯を敷く。
   100vw はクラシックスクロールバー環境で layout 幅より数px広くなるが、
   body{overflow-x:hidden} がビューポートに伝播して横スクロールは発生しない（QAの既知false positive） */
.cta-band-green,
.conclusion-band{
  border-radius: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}
/* S2のオファーバンド: 旧「黒帯」は情報商材バナーの定番構図で不信感の主因だったため、
   診断レポートカードと同じ視覚言語（白カード+上辺緑バー）の「オファーカード」に刷新。
   夜トーンはS1/S8ブックエンドだけの約束にも復帰（クラス名は互換のためdarkのまま） */
.cta-band-dark{
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 4px solid var(--green-600);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 44px var(--section-pad-x) 36px;
}
.cta-band-dark .cta-band-headline{ color: var(--ink); }
.cta-band-dark .cta-band-time{ color: var(--ink-soft); opacity: 1; }
.cta-band-green{
  background: var(--green-700);
  color: var(--white);
}
.cta-band-eyebrow{
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.cta-band-headline{
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  margin-bottom: 24px;
}
.cta-band-time{
  font-size: 13px;
  margin-top: 14px;
  opacity: .8;
}
.cta-band .trust-badges{ margin-top: 24px; }

/* ============================================================
   S2. AI診断セクション
   ============================================================ */
.s2-diagnosis{ position: relative; background: var(--bg); }
.s2-diagnosis h2, .s2-diagnosis .section-sub{ text-align: center; }
.s2-diagnosis .section-inner{ position: relative; }

.ai-report{
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 48px auto 0;
  background: var(--white);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft), 0 1px 0 color-mix(in srgb, var(--ink) 3%, transparent);
  padding: clamp(24px, 4vw, 44px);
  border-top: 4px solid var(--green-500);
}
.ai-report-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
  margin-bottom: 24px;
}
.ai-report-title{ font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.ai-report-shop{ font-size: 20px; font-weight: 700; font-family: var(--font-serif); margin-top: 2px; }
.ai-report-score{ text-align: right; }
.ai-report-score-label{ font-size: 12px; color: var(--ink-soft); }
.ai-report-score-value{
  font-family: var(--font-num);
  font-size: 34px;
  font-weight: 700;
  color: var(--green-700);
}
.ai-report-score-value span{ font-size: 16px; color: var(--ink-soft); font-weight: 500; }

.ai-report-gauges{ display: grid; gap: 16px; margin-bottom: 24px; }
.gauge{ display: grid; grid-template-columns: 130px 1fr 48px; align-items: center; gap: 12px; }
.gauge-label{ font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gauge-bar-track{ height: 10px; background: var(--bg-warm); border-radius: var(--radius-pill); overflow: hidden; }
.gauge-bar-fill{
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--green-500), var(--green-600));
}
.gauge-value{ display: flex; align-items: center; justify-content: flex-end; gap: 5px; font-family: var(--font-num); font-size: 14px; font-weight: 700; text-align: right; }
.gauge-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber-500);
  flex-shrink: 0;
}
@media (max-width: 480px){
  /* 狭幅ではラベル列が最長ラベル(平日ランチ集客力)を収めきれずellipsis欠落するため、
     ラベルを上段に単独配置しバー+値を下段にする2段グリッドへ切替（中途改行なし・欠落なしを両立） */
  .gauge{
    grid-template-columns: 1fr auto;
    grid-template-areas: "label label" "bar value";
    row-gap: 6px;
  }
  .gauge-label{
    grid-area: label;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .gauge-bar-track{ grid-area: bar; }
  .gauge-value{ grid-area: value; }
}

.ai-report-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip{ display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-pill); }
.chip .icon{ width: 14px; height: 14px; }
.chip-ok{ background: var(--green-050); color: var(--green-700); }
.chip-warn{ background: var(--amber-050); color: var(--amber-700); }

.ai-report-improve-title{ font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.ai-report-cards{ display: grid; gap: 14px; margin-bottom: 20px; }
@media (min-width: 768px){
  .ai-report-cards{ grid-template-columns: repeat(3, 1fr); }
}
.improve-card{
  background: var(--bg-warm);
  border-radius: 14px;
  padding: 18px;
}
.improve-icon{ display: inline-flex; color: var(--green-700); margin-bottom: 10px; }
.improve-icon .icon{ width: 22px; height: 22px; }
.improve-title{ font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.improve-card ul{ margin-bottom: 10px; }
.improve-card li{ font-size: 12.5px; color: var(--ink-soft); margin-bottom: 4px; }
.improve-expect{ font-size: 12px; font-weight: 700; color: var(--green-700); }

.ai-report-footnote{ font-size: 12px; color: var(--ink-soft); text-align: center; }

/* ============================================================
   S3. 探し方の変化
   ============================================================ */
.s3-shift{ background: var(--bg-warm); }
.s3-shift h2, .s3-shift .section-sub{ text-align: center; }

/* 昔/今の比較: 両カードを完全同型にし、差分（AIステップの挿入）だけを視覚でハイライトする。
   ステップは縦積み（横flowの折返し崩れの根治+上から下へ自然に読める） */
.flow-diagrams{
  display: grid;
  gap: 24px;
  margin: 48px 0 72px;
  align-items: stretch;
}
@media (min-width: 900px){
  .flow-diagrams{ grid-template-columns: 1fr auto 1fr; gap: 20px; }
}
.flow-diagram{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  padding: 26px 24px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* グリッド子のmin-width:auto対策。am-chips(nowrap行)のmin-contentがカードを押し広げる（overflow:hiddenはmin-content伝播を止めない） */
}
.flow-change{
  display: none;
}
@media (min-width: 900px){
  .flow-change{
    display: grid;
    place-items: center;
    color: var(--green-600);
  }
  .flow-change .icon{ width: 30px; height: 30px; }
}
.flow-label{
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.flow-label-past{ background: var(--bg-warm); color: var(--ink-soft); }
.flow-label-now{ background: var(--green-700); color: var(--white); }
.flow-steps{
  display: flex;
  flex-direction: column;
  font-size: 14px;
  /* flex:1はR11の高さ揃え用だったが、モック導入後はol内に死に余白を溜めるためR15で撤去
     （揃えは .flow-caption の margin-top:auto が担当） */
}
.flow-steps li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 2px;
}
.flow-step-ai{
  background: var(--green-050);
  border: 1px solid color-mix(in srgb, var(--green-500) 35%, transparent);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  margin: 4px 0;
}
.flow-step-ai .flow-step-text{ font-weight: 700; color: var(--green-700); }
.flow-icon{ display: inline-flex; color: var(--green-700); margin-top: 2px; }
.flow-icon .icon{ width: 17px; height: 17px; }
.flow-step-text small{ display: block; font-size: 12px; color: var(--ink-faint); margin-top: 2px; font-weight: 400; }
.flow-caption{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.ai-selects{ margin: 72px 0; text-align: center; }
.ai-selects h3{ margin-bottom: 24px; }
.ai-selects-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 16px;
}
@media (min-width: 768px){
  .ai-selects-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px){
  .ai-selects-grid{ grid-template-columns: repeat(6, 1fr); }
}
.ai-selects-icon{
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--green-050);
  color: var(--green-700);
  margin: 0 auto 12px;
}
.ai-selects-label{ font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.ai-selects-desc{ font-size: 12px; color: var(--ink-soft); }

.honest-note{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  padding: 16px 20px;
}
.honest-note .icon{ width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-faint); }

.conclusion-band{
  background: var(--green-700);
  color: var(--white);
  text-align: center;
  padding: 32px var(--section-pad-x);
}
.conclusion-band p{ font-weight: 700; font-size: clamp(16px, 2.2vw, 20px); }
.conclusion-band p + p{ margin-top: 8px; opacity: .92; }

/* ============================================================
   S4. データセクション ※最大の構図刷新（左揃え+bento）
   ============================================================ */
.s4-data{ background: var(--bg); }
.s4-data h2, .s4-data .section-sub{ text-align: left; }
/* S4は左揃えセクション: subのブロック自体もautoセンタリングを解除して左に寄せる */
.s4-data .section-sub{ margin-left: 0; margin-right: 0; }

.stat-tiles{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 48px 0;
}
@media (min-width: 900px){
  .stat-tiles{ grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); column-gap: 48px; row-gap: 0; }
  .stat-tile:nth-child(1){
    grid-column: 1; grid-row: 1 / 4;
    border-right: 1px solid var(--line); padding-right: 40px;
    /* 右カラム3段分の高さに引き伸ばされるため、上詰めだと下半分が空白=未完成に見える → 縦中央寄せ */
    display: flex; flex-direction: column; justify-content: center;
  }
  .stat-tile:nth-child(2){ grid-column: 2; grid-row: 1; }
  .stat-tile:nth-child(3){ grid-column: 2; grid-row: 2; }
  .stat-tile:nth-child(4){ grid-column: 2; grid-row: 3; }
  .stat-tile:not(:first-child){ border-top: 1px solid var(--line); padding-top: 20px; padding-bottom: 20px; }
}
.stat-tile{ background: none; padding: 0; }
.stat-value{
  font-family: var(--font-num);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--green-700);
  margin-bottom: 10px;
}
.stat-tiles .stat-tile:nth-child(1) .stat-value{
  font-size: clamp(56px, 8vw, 96px);
}
.stat-value .unit{ font-size: .42em; font-weight: 700; vertical-align: baseline; margin-left: 4px; } /* topだと実機で単位が浮いてズレて見える（R20実機指摘） */
.stat-tile figcaption p{ font-size: 13px; margin-bottom: 8px; max-width: 32em; }
.stat-tile cite{ font-size: 11px; color: var(--ink-soft); font-style: normal; line-height: 1.6; }
.stat-tile cite a{ color: var(--green-700); text-decoration: underline; }

.timeline{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 56px 0;
  border-left: 2px solid var(--line);
  padding-left: 24px;
}
.timeline-item{ position: relative; padding-bottom: 28px; }
.timeline-item::before{
  content: "";
  position: absolute;
  left: -30px; top: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
}
.timeline-item-highlight::before{ background: var(--green-500); box-shadow: 0 0 0 4px var(--green-050); }
.timeline-date{ font-family: var(--font-num); font-weight: 700; font-size: 13px; color: var(--ink-soft); }
.timeline-text{ font-size: 14px; margin-top: 4px; }
.timeline-item-highlight .timeline-text{ font-size: 15px; }
.timeline-cite{ display: block; font-size: 11px; color: var(--ink-soft); font-style: normal; margin-top: 6px; }

.data-supplement{
  text-align: left;
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 0 32px;
}
.data-closing{
  text-align: left;
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 21px);
}

/* ============================================================
   S5. 業種別セクション
   ============================================================ */
.s5-industries{ background: var(--bg-warm); }
.s5-industries h2, .s5-industries .section-sub{ text-align: center; }

.industry-tabs{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 40px 0 32px;
}
@media (max-width: 767px){
  .industry-tabs{
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    margin-left: calc(-1 * var(--section-pad-x));
    margin-right: calc(-1 * var(--section-pad-x));
    padding-left: var(--section-pad-x);
    padding-right: var(--section-pad-x);
  }
  .industry-tab{ flex: 0 0 auto; scroll-snap-align: start; }
}
.industry-tab{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 14px 18px;
  border-radius: 16px;
  border: 2px solid transparent;
  background: var(--white);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.industry-tab .icon{ width: 22px; height: 22px; }
.industry-tab.is-active{
  border-color: var(--ink);
  background: var(--ink);
  color: var(--night-text);
}

.industry-panel-inner{
  background: var(--white);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 4vw, 40px);
}
.industry-panel-inner h3{ margin-bottom: 24px; display: flex; align-items: center; gap: 10px; }
.industry-panel-inner h3 .icon{ width: 24px; height: 24px; color: var(--green-700); }
.industry-pain{ color: var(--warn-700); }

.industry-cols{
  display: grid;
  gap: 24px;
}
@media (min-width: 900px){
  .industry-cols{ grid-template-columns: 1fr 1fr 1fr; }
}
.industry-col-label{ font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 12px; }
.industry-col-before li, .industry-col-after li{ display: flex; align-items: flex-start; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.industry-col-before li{ color: var(--ink-soft); }
.industry-col-before .icon{ color: var(--warn-700); width: 15px; height: 15px; margin-top: 3px; }
.industry-col-after li{ color: var(--ink); }
@media (min-width: 900px){
  /* 3カラム時、右列（写真+チャット）より短いリスト2列は縦に均等展開して高さを釣り合わせる（R15 QA: 下に165px超の死に余白） */
  .industry-col-before, .industry-col-after{ display: flex; flex-direction: column; }
  .industry-col-before ul, .industry-col-after ul{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
}
.industry-col-after .icon{ color: var(--green-700); width: 15px; height: 15px; margin-top: 3px; }
.industry-col-after strong{ color: var(--green-700); }

/* mini-gmap系はR15のオーバーレイ全廃で完全に未使用となったため削除（R15 QA検出） */
.industry-col-result p{ font-size: 13px; font-weight: 700; color: var(--green-700); }

.ai-points-band{ text-align: center; margin: 48px 0 32px; }
.ai-points-title{ font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; }
.ai-points-icons{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 13px;
  color: var(--ink-soft);
}
.ai-points-icons span{ display: inline-flex; align-items: center; gap: 6px; }
.ai-points-icons .icon{ width: 16px; height: 16px; color: var(--green-700); }

/* ============================================================
   S6. 比較表セクション
   ============================================================ */
.s6-compare{ background: var(--bg); }
.s6-compare h2{ text-align: center; }
.compare-badge{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--amber-700);
  margin-bottom: 12px;
}
.compare-badge .icon{ width: 16px; height: 16px; color: var(--amber-700); }

.compare-table-wrap{
  position: relative;
  overflow-x: auto;
  margin: 40px 0 12px;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  -webkit-overflow-scrolling: touch;
}
.compare-table{
  width: 100%;
  min-width: 760px;
  font-size: 13px;
}
.compare-table th, .compare-table td{
  padding: 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.compare-table thead th{
  background: var(--night);
  color: var(--night-text);
  font-size: 13px;
  font-weight: 700;
}
.compare-table thead th small{ display: block; font-weight: 500; opacity: .75; font-size: 11px; }
.compare-axis-col{ min-width: 200px; }
.compare-table tbody th{
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--bg-warm);
}
.compare-table tbody th small{ display: block; color: var(--ink-soft); font-weight: 500; }

/* 致命バグ修正: thead側は唯一の緑面ヘッダー(主役)、tbody側は白地+緑ボーダーの上品な強調に分離 */
.compare-table thead th.compare-spotright-col{
  background: var(--green-700);
  color: var(--white);
}
.compare-table tbody td.compare-spotright-col{
  background: var(--white);
  border-left: 2px solid var(--green-500);
  border-right: 2px solid var(--green-500);
  font-weight: 600;
}
.compare-price-row .compare-spotright-col{ font-size: 16px; color: var(--green-700); }

/* 横スクロール対応: 先頭列(比較軸)を sticky 固定 */
.compare-table thead th:first-child,
.compare-table tbody th[scope="row"]{
  position: sticky;
  left: 0;
  z-index: 2;
}
.compare-table thead th:first-child{ background: var(--night); }
.compare-table tbody th[scope="row"]{ background: var(--bg-warm); }

.mark{ font-weight: 700; margin-right: 4px; }
.mark-good{ color: var(--green-700); }
.mark-bad{ color: var(--warn-700); }
.mark-mid{ color: var(--amber-700); }

.compare-footnote{ font-size: 11px; color: var(--ink-soft); text-align: center; }

.compare-scroll-hint{
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-faint);
  margin: 4px 0 12px;
}
.compare-scroll-hint .icon{ width: 14px; height: 14px; }
@media (max-width: 900px){
  .compare-scroll-hint{ display: flex; }
  .compare-table-wrap::after{
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--white) 90%, transparent));
    pointer-events: none;
  }
}

/* ============================================================
   S7. FAQ（カード全廃→編集的リスト）
   ============================================================ */
.s7-faq{ background: var(--bg); }
.s7-faq h2{ text-align: center; }
.faq-badge{
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--green-700);
  margin-bottom: 10px;
}

.faq-list{
  max-width: 720px;
  margin: 40px auto 0;
}
.faq-item{
  border-bottom: 1px solid var(--line);
}
.faq-item:first-child{ border-top: 1px solid var(--line); }
.faq-item summary{
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 700;
  font-size: 17px;
  padding: 22px 4px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-icon{ display: inline-flex; color: var(--green-700); transition: transform .25s ease; flex-shrink: 0; }
.faq-icon .icon{ width: 18px; height: 18px; }
.faq-item[open] .faq-icon{ transform: rotate(45deg); }
.faq-item p{ font-size: 14.5px; line-height: 2; color: var(--ink-soft); padding: 2px 4px 24px; max-width: 40em; }

/* ============================================================
   S8. クロージング
   ============================================================ */
.s8-closing{ text-align: center; }
.s8-closing .section-inner{ position: relative; z-index: 2; max-width: 760px; } /* 720pxだとh2の2行目「始めているかもしれません。」(約676px)が入り切らず3行化する */
.s8-closing h2{
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--night-text);
  margin-bottom: 28px;
}
.closing-body{
  color: var(--night-text-soft);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2;
  margin-bottom: 28px;
}
.closing-price{
  font-weight: 700;
  color: var(--night-text);
  font-size: clamp(17px, 2vw, 20px);
  margin-bottom: 32px;
}
.s8-closing .btn-primary-large{ margin-bottom: 14px; }
.closing-cta-sub{
  font-size: 13px;
  color: var(--night-text-soft);
  margin-bottom: 28px;
}
.s8-closing .trust-badges{ margin-bottom: 24px; }
.closing-smallprint{
  font-size: 11px;
  color: color-mix(in srgb, var(--night-text) 50%, transparent);
}

/* ============================================================
   S9. フッター
   ============================================================ */
.site-footer{
  background: var(--night-2);
  color: var(--night-text-soft);
  font-size: 13px;
}
.site-footer .section-inner{ padding-top: 48px; padding-bottom: 48px; text-align: center; }
.footer-org a{ color: var(--night-text); text-decoration: underline; }
.footer-org{ margin-bottom: 16px; }
.footer-links{
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 20px;
}
.footer-links a:hover{ color: var(--night-text); }
.footer-service-desc{ max-width: 480px; margin: 0 auto 20px; font-size: 12px; }
.footer-copyright{ font-size: 11px; opacity: .6; }

/* ============================================================
   §7. モーション仕様 v2
   ============================================================ */

/* ---------- reveal 共通基盤: opacity+translateY+blur ---------- */
.reveal{
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), filter .7s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.flow-diagram-now{ --reveal-delay: .15s; }
.stat-tiles .stat-tile:nth-child(1){ --reveal-delay: 0s; }
.stat-tiles .stat-tile:nth-child(2){ --reveal-delay: .08s; }
.stat-tiles .stat-tile:nth-child(3){ --reveal-delay: .16s; }
.stat-tiles .stat-tile:nth-child(4){ --reveal-delay: .24s; }

/* ---------- S1/S8 スポットライト（アンビエントループ・opacity振幅を控えめに） ---------- */
@keyframes spotlight-pulse{
  0%, 100%{ opacity: .08; }
  50%{ opacity: .12; }
}
.hero-spotlight{ animation: spotlight-pulse 8s ease-in-out infinite; }
.closing-spotlight{ animation: spotlight-pulse 9s ease-in-out infinite 1s; }

/* ---------- S1 H1 文字送り ---------- */
.hero-h1-line{ display: block; }
.hero-h1 .ch{
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i, 0) * 45ms);
}
.hero-h1.is-visible .ch{ opacity: 1; transform: translateY(0); }

/* ---------- S1 検索カード+口コミ（3枚に微回転+影の濃淡差） ---------- */
.hero-visual .gmap-card{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.hero-visual.is-visible .gmap-card{ opacity: 1; transform: translateY(0); transition-delay: .1s; }

.hero-visual .review-card{
  opacity: 0;
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.hero-visual .review-cards .review-card:nth-child(1){ transform: translateY(20px) rotate(-2deg); box-shadow: var(--shadow-soft); }
.hero-visual .review-cards .review-card:nth-child(2){ transform: translateY(20px) rotate(1.2deg); box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 12%, transparent); }
.hero-visual .review-cards .review-card:nth-child(3){ transform: translateY(20px) rotate(-.8deg); box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 16%, transparent); }
.hero-visual.is-visible .review-cards .review-card:nth-child(1){ opacity: 1; transform: translateY(0) rotate(-2deg); transition-delay: .3s; }
.hero-visual.is-visible .review-cards .review-card:nth-child(2){ opacity: 1; transform: translateY(0) rotate(1.2deg); transition-delay: .42s; }
.hero-visual.is-visible .review-cards .review-card:nth-child(3){ opacity: 1; transform: translateY(0) rotate(-.8deg); transition-delay: .54s; }

/* ---------- S2 レポートカード: ホバーで浮く ---------- */
.ai-report{
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.ai-report:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft), 0 30px 60px -20px color-mix(in srgb, var(--green-600) 22%, transparent);
}

/* ---------- S2 ゲージ5本: バー伸長 ---------- */
.gauge-bar-fill{ width: 0; transition: width 1.1s cubic-bezier(.16,1,.3,1); }
.ai-report.is-visible .gauge-bar-fill{ width: var(--gauge-pct); }
.ai-report.is-visible .gauge:nth-child(1) .gauge-bar-fill{ transition-delay: .1s; }
.ai-report.is-visible .gauge:nth-child(2) .gauge-bar-fill{ transition-delay: .2s; }
.ai-report.is-visible .gauge:nth-child(3) .gauge-bar-fill{ transition-delay: .3s; }
.ai-report.is-visible .gauge:nth-child(4) .gauge-bar-fill{ transition-delay: .4s; }
.ai-report.is-visible .gauge:nth-child(5) .gauge-bar-fill{ transition-delay: .5s; }

.ai-report-score-value .score-max{ font-size: 16px; color: var(--ink-soft); font-weight: 500; }

/* ---------- S5 タブ切替 ---------- */
.industry-panel{
  transition: opacity .35s ease, transform .35s ease;
}
.industry-panel.panel-enter{
  opacity: 0;
  transform: translateY(8px);
}

/* ---------- reduced-motion: 全ループ・トランジションを停止し即座に最終状態へ ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal, .hero-h1 .ch, .hero-visual .gmap-card, .hero-visual .review-card,
  .gauge-bar-fill, .industry-panel, .ai-report,
  .hero-spotlight, .closing-spotlight{
    transition: none !important;
    animation: none !important;
  }
  .reveal{ opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero-h1 .ch{ opacity: 1 !important; transform: none !important; }
  .hero-visual .gmap-card{ opacity: 1 !important; transform: none !important; }
  .hero-visual .review-cards .review-card:nth-child(1){ opacity: 1 !important; transform: rotate(-2deg) !important; }
  .hero-visual .review-cards .review-card:nth-child(2){ opacity: 1 !important; transform: rotate(1.2deg) !important; }
  .hero-visual .review-cards .review-card:nth-child(3){ opacity: 1 !important; transform: rotate(-.8deg) !important; }
  .gauge-bar-fill{ width: var(--gauge-pct) !important; }
}

/* ============================================================
   S-SV. サービス内容セクション（04_content-expansion.md §1/§2）
   ============================================================ */
.s-services{ background: var(--bg); }
.s-services h2, .s-services .section-sub{ text-align: center; }
.s-services .section-sub{ margin-left: auto; margin-right: auto; }
.s-services .eyebrow{ display: block; text-align: center; }

.service-cards{
  display: grid;
  grid-template-columns: 1fr; /* モバイルは1カラム（2カラムだと1行7文字の窮屈な折返しになる） */
  gap: 16px;
  margin: 48px 0 20px;
}
@media (min-width: 640px){
  .service-cards{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px){
  /* 4カラム化は1024px〜。900px帯だとカード幅約190pxでモック内ラベルが「登録」「95%」等の孤児行になる（R13 QA検出） */
  .service-cards{ grid-template-columns: repeat(4, 1fr); }
}
.service-card{
  background: var(--bg-warm);
  border-radius: var(--radius-m);
  padding: 26px 22px;
}
.service-card .service-icon{
  width: 28px; height: 28px;
  color: var(--green-700);
  margin-bottom: 14px;
}
.service-card h3{
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 8px;
}
.service-card p{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }

.service-included{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 0 auto 64px;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-700);
  background: var(--green-050);
  padding: 8px 20px;
  border-radius: var(--radius-pill);
}
.service-included .icon{ width: 16px; height: 16px; }

/* --- Before/After（GBP風モック） --- */
.before-after{ margin-bottom: 72px; }
.before-after-title{ text-align: center; margin-bottom: 32px; }
.before-after-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
}
@media (min-width: 768px){
  .before-after-grid{ grid-template-columns: 1fr auto 1fr; }
}
.ba-mock{ margin: 0; }
.ba-label{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
.ba-label-after{
  color: var(--white);
  background: var(--green-700);
  border-color: var(--green-700);
}
.ba-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 18px;
}
.ba-before .ba-card{ opacity: .78; }
.ba-after .ba-card{ border-color: var(--green-600); box-shadow: var(--shadow-soft); }
.ba-photo-row{ display: flex; gap: 6px; margin-bottom: 12px; }
.ba-photo{
  width: 44px; height: 44px;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--bg-warm), var(--line));
}
.ba-photo-empty{
  display: grid;
  place-items: center;
  background: var(--bg-warm);
  color: var(--ink-faint);
}
.ba-photo-empty .icon{ width: 18px; height: 18px; }
.ba-name{ font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.ba-en-badge{
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 700;
  color: var(--green-700);
  background: var(--green-050);
  padding: 2px 7px;
  border-radius: 5px;
  vertical-align: 2px;
}
.ba-line{ font-size: 12.5px; line-height: 2; }
.ba-weak{ color: var(--ink-faint); }
.ba-good{ color: var(--ink); }
.ba-arrow{
  display: grid;
  place-items: center;
  color: var(--green-600);
}
.ba-arrow .icon{ width: 28px; height: 28px; transform: rotate(90deg); }
@media (min-width: 768px){
  .ba-arrow .icon{ transform: none; }
}
.ba-caption{
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 20px;
}

/* --- オプション（見出し・リンク・注記。カード本体は Round 13 の .option-cards） --- */
.service-options h3{ text-align: center; margin-bottom: 28px; }
.option-link{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.option-link .icon{ width: 15px; height: 15px; }
.option-note{
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 24px;
}

/* ============================================================
   cases.html / demo-maruya.html 共有スタイル
   ============================================================ */
.subpage-main{ padding-top: 96px; }
.subpage-header-back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--night-text);
  transition: color .3s ease;
}
.site-header.is-scrolled .subpage-header-back,
.site-header.subpage-light .subpage-header-back{ color: var(--ink-soft); }
.subpage-header-back .icon{ width: 15px; height: 15px; transform: rotate(180deg); }

.cases-hero{ background: var(--bg); }
.cases-hero .section-inner{ padding-bottom: 24px; }
.cases-hero h1{
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: .02em;
}
.cases-lead{ color: var(--ink-soft); margin-top: 14px; max-width: 38em; }

.case-list{ display: grid; gap: 32px; padding-bottom: var(--section-pad-y); }
.case-card{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
}
@media (min-width: 900px){
  .case-card{ grid-template-columns: 1.1fr .9fr; }
}
.case-shot{
  background: var(--bg-warm);
  min-height: 240px;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
}
.case-shot img{ width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case-shot .icon{ width: 40px; height: 40px; }
.case-body{ padding: clamp(24px, 3.5vw, 40px); }
.case-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.case-tag{
  font-size: 11.5px;
  font-weight: 700;
  color: var(--green-700);
  background: var(--green-050);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
}
.case-tag-neutral{ color: var(--ink-soft); background: var(--bg-warm); }
.case-body h2{ font-size: clamp(20px, 2.6vw, 26px); margin-bottom: 12px; }
.case-body p{ font-size: 14.5px; color: var(--ink-soft); line-height: 1.9; }
.case-points{ margin: 16px 0; display: grid; gap: 10px; }
.case-points li{
  display: flex;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink);
}
.case-points .icon{ width: 17px; height: 17px; color: var(--green-700); margin-top: 3px; }
.case-link{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.case-link .icon{ width: 15px; height: 15px; }
.case-note{ font-size: 11.5px; color: var(--ink-faint); margin-top: 12px; }
.case-pending .case-body{ display: grid; place-items: center; text-align: center; min-height: 180px; }
.case-pending-label{ font-weight: 700; color: var(--ink-faint); font-size: 15px; }
.case-pending p{ font-size: 13px; margin-top: 6px; }

/* サブページヘッダー右側（戻るリンク+LINEピル） */
.subpage-header-right{ display: flex; align-items: center; gap: 18px; }
@media (max-width: 480px){
  .subpage-header-right .subpage-header-back span{ display: none; }
}

/* ============================================================
   明るい写真帯（photo-band）— 昼パートの呼吸。写真未着時は
   暖色グラデ+柔らかい図形のフォールバックで「意図された面」に見せる
   ============================================================ */
.photo-band{
  margin: 0;
  height: clamp(200px, 30vw, 360px);
  overflow: hidden;
  position: relative;
  /* フォールバック層（imgが読めた場合は上に被さって見えなくなる） */
  background:
    radial-gradient(60% 120% at 15% 100%, color-mix(in srgb, var(--green-500) 14%, transparent) 0%, transparent 60%),
    radial-gradient(50% 100% at 85% 0%, color-mix(in srgb, var(--amber-500) 16%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, var(--bg-warm) 0%, var(--white) 55%, var(--bg-warm) 100%);
}
.photo-band img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* 帯ごとの図形の向きを変えて単調さを回避 */
.photo-band-2{
  background:
    radial-gradient(60% 120% at 85% 100%, color-mix(in srgb, var(--amber-500) 14%, transparent) 0%, transparent 60%),
    radial-gradient(50% 100% at 12% 0%, color-mix(in srgb, var(--green-500) 12%, transparent) 0%, transparent 55%),
    linear-gradient(200deg, var(--bg-warm) 0%, var(--white) 55%, var(--bg-warm) 100%);
}

/* ============================================================
   ヒーロー口コミのリアル化（実際のGoogleマップ口コミUIの解剖に基づく）
   構造: アバター+名前+「ローカルガイド・クチコミN件」+⋯ / 星+時期 /
   「ランチ｜¥1,000〜2,000」メタ / 本文 / 写真グリッド
   ============================================================ */

/* --- 場所カード強化（保存・共有アクション+営業中の色） --- */
.gmap-result{ position: relative; }
.gmap-actions{
  position: absolute;
  top: 0; right: 0;
  display: flex;
  gap: 8px;
}
.gmap-action{
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-warm);
  color: var(--ink-soft);
}
.gmap-action .icon{ width: 15px; height: 15px; }
.gmap-action-saved{
  background: var(--gmap-saved-bg);
  color: var(--gmap-saved-ink);
}
.gmap-action-saved .icon{ fill: currentColor; }
.gmap-open{ color: var(--green-700); font-weight: 700; }
/* アクション円と重なるのは上2行だけなので、行単位で回避（noteの折返しを防ぐ） */
.gmap-result-name, .gmap-result-rating{ padding-right: 76px; }

/* --- 口コミカード本体 --- */
.review-card{
  padding: 16px 18px 18px;
  max-width: min(340px, 100%);
}
.review-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.review-avatar{
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--av, var(--avatar-default));
  color: var(--white); /* アバターは実UI再現の固有色面（HTML側インラインの--avで個別指定）。緑面の白文字規律とは別枠の装飾 */
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.review-lg-badge{
  position: absolute;
  right: -3px; bottom: -3px;
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 25%, transparent);
}
.review-lg-badge .icon{ width: 10px; height: 10px; }
.review-who{
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.35;
}
.review-name{ font-size: 13.5px; font-weight: 700; color: var(--ink); }
.review-sub{
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-menu{
  margin-left: auto;
  align-self: flex-start;
  color: var(--ink-faint);
  font-size: 16px;
  letter-spacing: .08em;
  line-height: 1;
}
.review-stars{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.review-card .review-stars .stars{ margin-bottom: 0; font-size: 13px; letter-spacing: .06em; }
.review-when{ font-size: 12px; color: var(--ink-soft); }
.review-meta{
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.review-text{ font-size: 13px; line-height: 1.75; margin: 0; }
.review-photos{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}
.review-photos img{
  width: 100%;
  aspect-ratio: 16 / 10; /* 1画面に収めるため3/2から浅く */
  object-fit: cover;
  border-radius: 10px;
}

/* --- プロっぽいコラージュ配置（デスクトップ）: 左右に振って重ね、奥行きを付ける --- */
@media (min-width: 1080px){
  .hero-visual .gmap-card{ margin-left: auto; margin-right: 8px; position: relative; z-index: 1; }
  .review-cards{
    margin-top: -12px; /* 場所カードのnote行を隠さない程度の重なり */
    margin-left: 0;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .review-cards .review-card:nth-child(1){ align-self: flex-start; margin-left: -6%; }
  .review-cards .review-card:nth-child(2){ align-self: flex-end; margin-right: -3%; z-index: 3; }
  .review-cards .review-card:nth-child(3){ align-self: flex-start; margin-left: 4%; margin-top: -6px; }
}

/* ノートPC級の高さでは右カラムを間引いて1画面に収める（装飾なので減らしてよい） */
@media (min-width: 1080px) and (max-height: 1020px){
  .review-cards .review-card:nth-child(3){ display: none; }
}
@media (min-width: 1080px) and (max-height: 860px){
  .review-photos{ display: none; }
  .hero-h1{ font-size: clamp(40px, 5.6vw, 64px); }
  .hero-inner{ gap: 32px; }
}

/* ============================================================
   QAスイープ修正（Round 10）: CJK中折れ・ヘッダー/フッター折返し・事例画像クロップ
   ============================================================ */

/* 文節単位の折返し（対応ブラウザのみ有効・非対応は無視される安全な漸進強化）
   + overflow-wrap:break-word を安全弁に: auto-phraseが長い複合語を一塊扱いして
   狭いカードからはみ出す回帰（例:「Googleビジネスプロフィール最適化」@375px）を防ぐ */
body{ word-break: auto-phrase; overflow-wrap: anywhere; }
/* break-wordはグリッド/フレックスの内在幅(min-content)計算に反映されず、
   2カラムグリッドが長い複合語幅でブローアウトするため anywhere を採用（内在幅にも効く）。
   グリッドアイテム側にも縮小許可を明示 */
.service-card{ min-width: 0; }

/* 熟語の中折れを保証的に防ぐユーティリティ */
.nw{ white-space: nowrap; }
.nw-block{ display: inline-block; }

/* ヘッダーCTA・戻るリンクは絶対に中折れさせない（casesモバイルでヘッダー高が倍化していた） */
.header-cta{ white-space: nowrap; }
.subpage-header-back{ white-space: nowrap; }

/* フッターリンク: flex収縮で全リンクが中折れしていた → 折返しは行単位で */
.footer-links{ flex-wrap: wrap; row-gap: 10px; }
.footer-links a{ white-space: nowrap; }

/* 事例カード画像: 中央クロップで左端のロゴが欠けていた → 左上起点に */
.case-shot img{ object-position: 0 0; }

/* flexアンチパターン修正: テキスト+smallを1ブロックに（交互折返しの根治） */
.flow-steps li{ align-items: flex-start; }
.flow-step-text{ display: block; min-width: 0; }
.flow-step-text small{ display: block; }
.industry-panel-inner h3{ align-items: flex-start; }
.industry-title{ display: block; min-width: 0; }

/* モバイル: 追従CTAバーの高さ分だけフッター末尾に逃げを確保（著作権行が恒久的に隠れていた） */
@media (max-width: 767px){
  .site-footer .section-inner{ padding-bottom: calc(48px + 92px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   Round 12: 実写の追加配置（業種パネル/オファーカード/サービス冒頭）
   ============================================================ */

/* 業種パネル: 写真は被せ物なしのクリーン表示（R15でオーバーレイ全廃、AIチャット行は写真の下に独立配置） */
.industry-visual{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-warm);
  aspect-ratio: 16 / 9;
  margin-bottom: 10px;
}
@media (min-width: 900px){
  /* 3カラム時は右カラムの合計高を左のリスト列と釣り合わせる（余白バランス） */
  .industry-visual{ aspect-ratio: 2 / 1; }
}
.industry-visual img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* オファーカード: コピー左+スマホ手元写真右（モバイルは縦積み） */
.cta-band-dark{ max-width: 920px; }
.offer-grid{
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 768px){
  .offer-grid{ grid-template-columns: 1.15fr .85fr; gap: 36px; }
  .offer-copy{ text-align: left; }
  .offer-copy .trust-badges{ justify-content: flex-start; }
}
.offer-copy{ min-width: 0; }
.offer-photo{
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-warm);
}
.offer-photo img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* サービス冒頭のチーム作業写真（編集的な横長バンド） */
.team-photo{
  max-width: 880px;
  margin: 40px auto 8px;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--bg-warm);
  aspect-ratio: 16 / 7; /* ラッパー側に持たせる: img が onerror で消えても面が残る（photo-bandと同じ規約） */
}
.team-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* ============================================================
   Round 13: サービスセクションのリッチ化
   A) サービスカード内の納品物ミニモック（.sv-mock）
   C) ご契約後1ヶ月タイムライン（.sv-timeline）
   B) オプションの作品カード化（.option-cards）
   ============================================================ */

/* --- A) 納品物ミニモック --- */
.service-card{ display: flex; flex-direction: column; }
.service-card p{ margin: 0 0 16px; }
.sv-mock{
  margin-top: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  min-width: 0;
}

/* GBPプロフィール */
.svm-gbp-name{ font-weight: 700; font-size: 13px; margin-bottom: 7px; }
.svm-checks{ list-style: none; margin: 0 0 10px; padding: 0; }
.svm-checks li{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.9;
}
.svm-checks .icon{ width: 12px; height: 12px; color: var(--green-700); flex-shrink: 0; }
.svm-score-track{
  display: block;
  height: 6px;
  background: var(--bg-warm);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 5px;
}
.svm-score-fill{
  display: block;
  width: 95%;
  height: 100%;
  background: var(--green-600);
  border-radius: var(--radius-pill);
}
.svm-score-num{ font-size: 10.5px; font-weight: 700; color: var(--green-700); }

/* 写真の並べ替えグリッド */
.svm-photo-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.svm-photo{
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(140deg, var(--bg-warm), var(--line)); /* 画像未着時のフォールバック面 */
  aspect-ratio: 4 / 3;
}
.svm-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svm-order{
  position: absolute;
  left: 5px; top: 5px;
  display: grid;
  place-items: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-num);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 30%, transparent);
}
.svm-ai{
  position: absolute;
  left: 5px; top: 5px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--green-700);
  background: var(--green-050);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 20%, transparent);
}

/* 口コミ+オーナー返信 */
.svm-review{ display: flex; gap: 8px; margin-bottom: 10px; }
.svm-avatar{
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--av, var(--avatar-default));
  color: var(--white); /* 実UI再現の固有色面（.review-avatarと同じ扱い）。
     --av に新色を足す時は白文字とのコントラスト4.5:1以上を必ず確認（承認済: #C2185B 5.9:1 / #7E57C2 / 既存reviewアバター色） */
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.svm-review-body{ min-width: 0; }
.svm-stars{
  display: block;
  color: var(--amber-700);
  font-size: 11px;
  letter-spacing: .08em;
  margin-bottom: 2px;
}
.svm-review-body p, .svm-reply p{ font-size: 11.5px; line-height: 1.7; margin: 0; }
.svm-reply{
  border-left: 2px solid var(--line-strong);
  padding-left: 10px;
  margin-left: 13px;
}
.svm-reply-label{
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft); /* ink-faintだと10px級で3.58:1しかなくAA不適合（R13 QA検出） */
  margin-bottom: 2px;
}
.svm-reply p{ color: var(--ink-soft); }

/* 和英併記メニュー */
.svm-menu-row{
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 2px;
  padding: 7px 0;
}
.svm-menu-row + .svm-menu-row{ border-top: 1px dashed var(--line); }
.svm-menu-jp{ font-size: 12.5px; font-weight: 700; }
.svm-menu-price{ font-family: var(--font-num); font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.svm-menu-en{ grid-column: 1 / -1; font-family: var(--font-num); font-size: 10.5px; color: var(--ink-soft); }

.svm-caption{
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin: 14px 0 64px;
}

/* --- C) ご契約後1ヶ月タイムライン --- */
.sv-timeline{ max-width: 1000px; margin: 0 auto 56px; }
.sv-timeline-title{ text-align: center; margin-bottom: 10px; }
.sv-timeline-sub{
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 36px;
}
.sv-timeline-track{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}
.svtl-step{
  position: relative;
  padding: 0 0 26px 32px;
  min-width: 0;
}
.svtl-step:last-child{ padding-bottom: 0; }
.svtl-step::before{
  content: "";
  position: absolute;
  left: 6px; top: 16px; bottom: 2px;
  width: 2px;
  background: var(--line-strong);
}
.svtl-step:last-child::before{ display: none; }
.svtl-dot{
  position: absolute;
  left: 0; top: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--green-600);
  box-sizing: border-box;
}
.svtl-when{
  display: inline-block;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 700;
  color: var(--green-700);
  margin-bottom: 6px;
}
.svtl-step-ongoing .svtl-dot{ background: var(--green-600); }
.svtl-step-ongoing .svtl-when{
  color: var(--white); /* 12pxの白字はgreen-700面のみ可（コントラスト規律） */
  background: var(--green-700);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
}
.svtl-body{ min-width: 0; }
.svtl-body strong{
  display: block;
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 4px;
}
.svtl-body span{
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.75;
}
.svtl-caption{
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 28px;
}
@media (min-width: 900px){
  .sv-timeline-track{ grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .svtl-step{ padding: 32px 0 0; }
  .svtl-step::before{
    left: 24px; right: -28px; top: 9px; bottom: auto; /* 始点はラベル白面の下に隠す（露出させると「-1週目」に見える） */
    width: auto;
    height: 2px;
  }
  .svtl-when{
    position: absolute;
    top: 0; left: 20px;
    margin: 0;
    line-height: 20px;
    background: var(--white); /* 背後の接続線をマスク */
    padding: 0 10px 0 6px;
  }
  .svtl-step-ongoing .svtl-when{ line-height: 1; padding: 4px 12px; }
}

/* --- B) オプションの作品カード --- */
.option-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 768px){
  .option-cards{ grid-template-columns: 1fr 1fr; gap: 22px; }
}
.option-card{
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  min-width: 0;
}
.option-visual{
  display: grid;
  place-items: center;
  background: var(--bg-warm);
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
  min-height: 168px;
}
@media (min-width: 768px){
  /* 2カラム時はビジュアル面を固定高にして、本文(h4)の開始位置を全カードで揃える
     （flex伸縮方式だと本文量の差でh4が最大61pxズレる — R13 QA検出） */
  .option-visual{ height: 300px; }
}
.option-body{ padding: 18px 22px 22px; }
.option-body h4{ margin: 0 0 6px; font-size: 15.5px; font-weight: 700; }
.option-body p{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }

/* LP制作: ミニブラウザ */
.ov-browser{
  width: min(300px, 100%);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.ov-browser-bar{
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--line);
}
.ov-browser-bar span{ width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.ov-browser img{
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top;
}
.ov-noimg{ min-height: 130px; } /* スクショ未着時もブラウザ枠だけで成立させる */
.ov-noimg img{ display: none; } /* 壊れ画像アイコンを確実に隠す（R13 QA検出） */

/* 多言語メニュー */
.ov-menu{
  width: min(300px, 100%);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 14px 6px;
  box-shadow: var(--shadow-soft);
}
.ov-langtabs{ display: flex; gap: 4px; margin-bottom: 6px; }
.ov-langtabs span{
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--bg-warm);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.ov-langtabs .on{
  color: var(--white); /* 小サイズ白字はgreen-700面のみ可 */
  background: var(--green-700);
}
.ov-menu-row{
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 1px;
  padding: 8px 0;
}
.ov-menu-row + .ov-menu-row{ border-top: 1px dashed var(--line); }
.ov-menu-jp{ font-size: 12.5px; font-weight: 700; }
.ov-menu-price{ grid-row: 1; grid-column: 2; font-family: var(--font-num); font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.ov-menu-tr{ grid-column: 1 / -1; font-size: 11px; color: var(--ink-soft); }

/* プロ撮影: フィルムストリップ */
.ov-filmstrip{
  display: flex;
  gap: 8px;
  width: min(340px, 100%);
  background: var(--night);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--shadow-soft);
}
.ov-frame{
  flex: 1;
  min-width: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--night-2); /* 画像未着時のフォールバック面 */
  aspect-ratio: 1;
}
.ov-frame img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SNS: 投稿カード */
.ov-post{
  width: min(220px, 100%);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.ov-post-head{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
}
.ov-post-avatar{
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--green-700);
  color: var(--white);
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 700;
}
.ov-post-name{ font-family: var(--font-num); font-size: 11px; font-weight: 700; }
.ov-post-photo{
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, var(--bg-warm), var(--line)); /* ラッパー側: img が onerror で消えても面が残る */
}
.ov-post-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ov-post-foot{ padding: 8px 10px 10px; }
.ov-post-likes{
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  margin-bottom: 2px;
}
.ov-post-likes .icon{ width: 12px; height: 12px; }
.ov-post-cap{ display: block; font-size: 11px; color: var(--ink-soft); }

/* ============================================================
   Round 14: 説明の図を「実画面」に置き換える
   S3昔/今の検索・チャットモック / AI解剖図 / 年表Geminiモック
   6%→45%大型統計 / 締めの引用格上げ / 業種AI推薦バブル
   ============================================================ */

/* --- チャットバブル（R15以降はS4年表モック .tl-mock 専用。S3今カードは .ac-frame に移行済み） --- */
.fm-bubble{
  display: block;
  margin: 0 0 8px;
  padding: 9px 13px;
  font-size: 12.5px;
  line-height: 1.65;
  border-radius: 14px;
}
.fm-user{
  width: fit-content;
  max-width: 88%;
  margin-left: auto;
  background: var(--green-050);
  color: var(--ink);
  border-bottom-right-radius: 4px;
  font-weight: 700;
}
.fm-ai{
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 92%;
  background: var(--white);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  color: var(--ink);
}
.fm-ai .icon{ width: 15px; height: 15px; color: var(--green-700); flex-shrink: 0; margin-top: 3px; }
.fm-ai span{ min-width: 0; }

/* --- S3: フロー図内の実画面モック（中身のアプリ枠は R15 の .app-frame） --- */
.flow-mock{
  margin: 14px 0 18px;
  display: flex;
  flex-direction: column;
  flex: 1; /* カード内の余剰高はモックが引き受け… */
}
.flow-mock .app-frame{ flex: 1; display: flex; flex-direction: column; }
.flow-mock .ac-body{ flex: 1; } /* …チャットはメッセージ領域が伸びて入力欄が下に付く（実アプリの挙動）。空白帯を1箇所に溜めない（R15 QA HIGH） */
/* モック追加で左右カードの高さ差が出るため、キャプションは下端に揃える */
.flow-caption{ margin-top: auto; }

/* --- S3: AI解剖図（スキャン枠付きGBPカード） --- */
.ai-anatomy{ margin: 8px auto 44px; max-width: 980px; text-align: left; }
.anatomy-duo{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 900px){
  /* PC: 左=GBP実物 / 右=AIの読み取り結果 の対面 */
  .anatomy-duo{ grid-template-columns: 1fr auto 1.15fr; gap: 18px; align-items: center; }
}
.anatomy-gbp{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  padding: 16px 18px 18px;
  min-width: 0;
}
.ag-photos{ display: flex; gap: 6px; }
.ag-photo{
  flex: 1;
  min-width: 0;
  max-width: 96px;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(140deg, var(--bg-warm), var(--line)); /* 画像未着時のフォールバック面 */
}
.ag-photo img{ width: 100%; height: 100%; object-fit: cover; }
.ag-photo-more{
  display: grid;
  place-items: center;
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--bg-warm);
}
.ag-name{ font-size: 15px; font-weight: 700; margin-top: 12px; }
.anatomy-cat{ font-size: 11.5px; font-weight: 400; color: var(--ink-soft); margin-left: 6px; }
.ag-rating{ display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; }
.ag-rating b{ font-family: var(--font-num); font-size: 14px; }
.ag-stars{ color: var(--amber-500); font-size: 11px; letter-spacing: .1em; } /* 装飾グリフ（GBP UI再現） */
.ag-count{ font-family: var(--font-num); font-size: 11px; color: var(--ink-faint); }
.ag-line{
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.8;
  min-width: 0;
}
.ag-line .icon{ width: 13px; height: 13px; color: var(--green-700); flex-shrink: 0; margin-top: 4px; }
.ag-line span{ min-width: 0; }
.ag-open{ font-style: normal; color: var(--green-700); font-weight: 700; }
.anatomy-arrow{ display: grid; place-items: center; color: var(--green-600); }
.anatomy-arrow .icon{ width: 26px; height: 26px; transform: rotate(90deg); }
@media (min-width: 900px){
  .anatomy-arrow .icon{ transform: none; }
}
.anatomy-read{
  background: var(--white);
  border: 1.5px solid var(--green-600);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px 16px;
  min-width: 0;
}
.ar-head{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-700);
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.ar-head .icon{ width: 16px; height: 16px; }
.ar-rows{ list-style: none; margin: 0; padding: 0; }
.ar-rows li{
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink);
  min-width: 0;
}
.ar-rows li + li{ border-top: 1px dashed var(--line); }
.ar-tag{
  display: inline-grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--white); /* 小サイズ白字はgreen-700面のみ可 */
  background: var(--green-700);
  border-radius: var(--radius-pill);
  padding: 3px 4px;
  text-align: center;
  margin-top: 2px;
}
.anatomy-caption{ text-align: center; font-size: 11.5px; color: var(--ink-faint); margin-top: 12px; }

/* --- S4: 年表のGemini回答モック --- */
.tl-mock{
  max-width: 420px;
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-warm);
  border-radius: var(--radius-s);
}
.tl-mock .fm-bubble:last-child{ margin-bottom: 0; }

/* --- S4: 6%→45% 大型統計 --- */
.stat-jump{ margin: 0 0 40px; }
.sj-bars{
  display: flex;
  align-items: flex-end;
  gap: 22px;
  margin-bottom: 16px;
}
.sj-col{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sj-num{ font-family: var(--font-num); font-weight: 700; line-height: 1; }
.sj-num-before{ font-size: 18px; color: var(--ink-soft); }
.sj-num-after{ font-size: 36px; color: var(--green-700); letter-spacing: -.02em; }
.sj-bar{ width: 64px; border-radius: 8px 8px 4px 4px; }
.sj-bar-before{ height: 22px; background: var(--line-strong); }
.sj-bar-after{ height: 132px; background: var(--green-600); }
.sj-year{ font-size: 11.5px; color: var(--ink-faint); font-weight: 700; }
.sj-arrow{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-bottom: 58px; /* 矢印と倍率をバーの中腹に浮かせる */
  color: var(--green-600);
}
.sj-arrow .icon{ width: 22px; height: 22px; }
.sj-badge{
  font-size: 11px;
  font-weight: 700;
  color: var(--green-700);
  background: var(--green-050);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.stat-jump .data-supplement{ margin: 0; }

/* --- S4: 締めの一文を引用格上げ（マーカー強調） --- */
.data-closing{
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.8;
  margin-top: 8px;
}
.dc-em{
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--green-500) 26%, transparent) 60%);
}

/* --- S5: 業種パネルの注記（AIチャット行本体は R15 の .industry-chat） --- */
.industry-note{
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin: 14px 0 44px;
}
/* S3/S4モックのサンプル開示（R14 QA検出: 開示なしだった） */
.mock-note{
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin: 14px 0 0;
}
.tlm-note{
  display: block;
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-top: 8px;
}

/* ============================================================
   Round 15: 実アプリUIの再現度アップ + 余白バランス
   S3=Googleマップ/AIチャット風フレーム / BA=GBPパネル豪華化(After大)
   業種=オーバーレイ廃止→写真下チャット行 / 6%→45%=2カラム化
   ============================================================ */

/* --- 共通: アプリ画面フレーム --- */
.app-frame{
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* --- Googleマップ風（昔カード） --- */
.am-searchbar{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 10px 8px;
  background: var(--bg-warm);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
}
.am-searchbar .icon{ width: 14px; height: 14px; color: var(--ink-faint); flex-shrink: 0; }
.am-searchbar span{ min-width: 0; }
.am-mic{ margin-left: auto; }
.am-chips{
  display: flex;
  gap: 6px;
  margin: 0 10px 10px;
  overflow: hidden; /* 狭幅では実UIらしく右端で見切れさせる */
}
.am-chips span{
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--bg-warm);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.am-chips .on{ color: var(--green-700); background: var(--green-050); }
.am-results{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.am-results li{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-width: 0;
}
.am-results li + li{ border-top: 1px solid var(--line); }
.am-info{ display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.am-name{ font-size: 13px; font-weight: 700; }
.am-rate{ display: flex; align-items: center; gap: 5px; }
.am-rate b{ font-family: var(--font-num); font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.am-stars{ color: var(--amber-500); font-size: 10px; letter-spacing: .1em; } /* 装飾グリフ（GoogleマップUI再現） */
.am-count{ font-size: 10.5px; color: var(--ink-faint); font-family: var(--font-num); }
.am-meta{ font-size: 11px; color: var(--ink-soft); }
.am-open{ font-style: normal; color: var(--green-700); font-weight: 700; }
.am-thumb{
  width: 52px; height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(140deg, var(--bg-warm), var(--line)); /* 画像未着時のフォールバック面 */
  flex-shrink: 0;
}
.am-thumb img{ width: 100%; height: 100%; object-fit: cover; }

/* --- AIチャット風（今カード） --- */
.ac-frame{ display: flex; flex-direction: column; }
.ac-head{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.ac-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); }
.ac-body{ padding: 14px 14px 2px; }
.ac-user{
  width: fit-content;
  max-width: 85%;
  margin: 0 0 12px auto;
  background: var(--bg-warm);
  border-radius: 16px 16px 4px 16px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.65;
}
.ac-ai{ display: flex; gap: 9px; align-items: flex-start; margin-bottom: 12px; }
.ac-avatar{
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--green-050);
  flex-shrink: 0;
}
.ac-avatar .icon{ width: 14px; height: 14px; color: var(--green-700); }
.ac-text{ font-size: 12.5px; line-height: 1.75; min-width: 0; }
.ac-src{
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--bg-warm);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.ac-src .icon{ width: 11px; height: 11px; flex-shrink: 0; }
.ac-input{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 12px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 7px 7px 7px 14px;
  font-size: 12px;
  color: var(--ink-faint);
}
.ac-send{
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--green-700);
  color: var(--white);
  flex-shrink: 0;
}
.ac-send .icon{ width: 14px; height: 14px; }

/* --- S4: 6%→45% 2カラム化（左に大きめの棒、右に出典文で余白を使い切る） --- */
.stat-jump{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  margin: 0 0 44px;
  background: var(--bg-warm); /* カード面にしてセクション全幅を使う（max-width:860pxの左寄せは右に最大220pxの死に帯を作っていた — R15 QA） */
  border-radius: var(--radius-m);
  padding: 24px 22px;
}
@media (min-width: 640px){
  .stat-jump{ grid-template-columns: auto 1fr; gap: 48px; padding: 28px 40px; }
}
.stat-jump .sj-bar-before{ background: var(--line-strong); }
.stat-jump .sj-badge{ background: var(--white); }
.stat-jump .sj-bars{ margin-bottom: 0; }
.stat-jump .data-supplement{ max-width: 32em; font-size: 14px; line-height: 2; }
.sj-bar{ width: 84px; }
.sj-bar-after{ height: 168px; }
.sj-num-after{ font-size: 44px; }
.sj-num-before{ font-size: 20px; }
.sj-arrow{ padding-bottom: 72px; }

/* --- BA: GBPパネル豪華化（Afterを大きく・リッチに） --- */
@media (min-width: 768px){
  .before-after-grid{
    grid-template-columns: 1fr auto 1.35fr;
    max-width: 960px;
    align-items: start; /* After豪華化で高さ差1.7倍。centerだと施策前/施策後ラベルが最大138pxズレて壊れて見える（R15 QA CRITICAL） */
  }
  .before-after-grid .ba-arrow{ align-self: center; }
  .ba-before .ba-card{ margin-top: 14px; } /* 施策前カードはラベル揃えの上で少し下げ、素朴さを演出 */
}
.ba-card-rich{ padding: 20px; }
.ba-after .ba-card-rich{ border-width: 1.5px; }
.ba-hero-photos{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}
.ba-hp{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(140deg, var(--bg-warm), var(--line)); /* 画像未着時のフォールバック面 */
  min-height: 0;
}
.ba-hp img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-hp-main{ grid-row: 1 / 3; aspect-ratio: 5 / 4; }
.ba-hp-more{
  position: absolute;
  right: 6px; bottom: 6px;
  font-style: normal;
  font-family: var(--font-num);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--white); /* 写真上バッジの承認済み例外: ink 74%スクリムで下地の明るさに依らずAA相当を確保（R15 QAで要判定→濃度引き上げ） */
  background: color-mix(in srgb, var(--ink) 74%, transparent);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.ba-rating{ display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; }
.ba-rating b{ font-family: var(--font-num); font-size: 15px; }
.ba-stars-row{ color: var(--amber-500); font-size: 12px; letter-spacing: .1em; } /* 装飾グリフ（GBP UI再現） */
.ba-count{ font-family: var(--font-num); font-size: 11.5px; color: var(--ink-faint); }
.ba-open{ font-style: normal; color: var(--green-700); font-weight: 700; }
.ba-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ba-act{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--green-700);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  white-space: nowrap;
}
.ba-act .icon{ width: 13px; height: 13px; }
.ba-act-primary{
  color: var(--white); /* 12pxの白字はgreen-700面のみ可 */
  background: var(--green-700);
  border-color: var(--green-700);
}
.ba-quotes{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ba-quotes span{
  font-size: 11.5px;
  color: var(--ink-soft);
  background: var(--bg-warm);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

/* --- S5: 写真下のAIチャット行（オーバーレイ廃止の置き換え） --- */
.industry-chat{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.ic-avatar{
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--green-050);
  flex-shrink: 0;
}
.ic-avatar .icon{ width: 15px; height: 15px; color: var(--green-700); }
.ic-body{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ic-quote{ font-size: 12.5px; font-weight: 700; line-height: 1.6; }
.ic-sub{
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}
.ic-sub .icon{ width: 12px; height: 12px; }

/* ============================================================
   Round 16: お問い合わせセクション（LINE / フォームの2窓口）
   ============================================================ */
.s9-contact{ background: var(--bg-warm); }
.s9-contact h2, .s9-contact .section-sub{ text-align: center; }
.contact-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 980px;
  margin: 40px auto 0;
  align-items: start;
}
@media (min-width: 900px){
  .contact-grid{ grid-template-columns: 1fr 1.15fr; gap: 24px; }
}
.contact-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  padding: 26px 24px 28px;
  min-width: 0;
}
.contact-card-line{ border-top: 4px solid var(--green-600); } /* 診断レポート/オファーカードと同じ視覚言語 */
.contact-card-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.contact-icon{
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--green-050);
  flex-shrink: 0;
}
.contact-icon .icon{ width: 20px; height: 20px; color: var(--green-700); }
.contact-card-head h3{ font-size: 17px; font-weight: 700; line-height: 1.4; }
.contact-card-head small{ display: block; font-size: 11.5px; color: var(--green-700); font-weight: 700; margin-top: 2px; }
.contact-card > p{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.9; margin-bottom: 18px; }
.contact-form{ display: flex; flex-direction: column; gap: 14px; }
.cf-field{
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.cf-req{
  font-size: 10px;
  color: var(--white); /* 小サイズ白字はgreen-700面のみ可 */
  background: var(--green-700);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: 1px;
}
.cf-field input, .cf-field textarea{
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
}
.cf-field textarea{ resize: vertical; min-height: 96px; }
.cf-field input::placeholder, .cf-field textarea::placeholder{ color: var(--ink-faint); }
.cf-field input:focus, .cf-field textarea:focus{
  outline: 2px solid var(--green-600);
  outline-offset: 1px;
  border-color: var(--green-600);
}
.contact-card .btn{ width: 100%; justify-content: center; } /* カード内CTAは全幅・中央（狭幅で矢印だけ2行目に折れるのを防ぐ） */
@media (max-width: 480px){ .contact-card .btn{ font-size: 15.5px; } }
.cf-submit{ margin-top: 4px; }
.cf-submit:disabled{ opacity: .6; pointer-events: none; }
.cf-status{
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  margin: 0;
}
.cf-status.ok{ color: var(--green-700); background: var(--green-050); }
.cf-status.ng{ color: var(--warn-700); background: var(--warn-050); }
.form-note{ font-size: 11.5px; color: var(--ink-faint); margin: 0; }

/* ============================================================
   Round 18: S1b かんたん安心（FV直後のハードル下げ）
   ============================================================ */
.s1b-ease{ background: var(--white); }
.s1b-ease h2, .s1b-ease .section-sub{ text-align: center; }
.s1b-ease .section-sub{ line-height: 2.1; }
.pc-br{ display: none; }
@media (min-width: 768px){
  .pc-br{ display: inline; }
}
.ease-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 980px;
  margin: 36px auto 0;
}
@media (min-width: 768px){
  .ease-grid{ grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.ease-card{
  background: var(--bg-warm);
  border-radius: var(--radius-m);
  padding: 26px 22px;
  min-width: 0;
  text-align: center;
}
.ease-icon{
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--green-050);
  margin: 0 auto 14px;
}
.ease-icon .icon{ width: 24px; height: 24px; color: var(--green-700); }
.ease-card h3{ font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
.ease-card p{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.9; text-align: left; }

/* ============================================================
   Round 20: 実機モバイル指摘対応
   1) CTAボタンのスリム化 2) 比較表のカード化 3) 統計の可読性
   4) 昔/今スワイプスライダー（Motion-Finder「cur-swipe」採用）
   ============================================================ */

/* --- 1) モバイルCTAボタン: 太っちょ解消 --- */
@media (max-width: 480px){
  .btn{
    font-size: 16px; /* green-700面に切替えるため19px未満でも規律適合 */
    padding: 14px 22px;
    gap: 6px 8px;
    flex-wrap: nowrap;
  }
  .btn-primary, .btn-primary-large, .btn-primary:hover{ background: var(--green-700); }
  .btn .btn-arrow{ display: none; } /* 折返しで「矢印だけの行」ができる主因 */
  .btn .btn-label{ min-width: 0; white-space: normal; }
  .btn .btn-line-icon{ flex-shrink: 0; white-space: nowrap; } /* nowrap化でバッジが「LIN/E」に縦割れするのを防ぐ */
  .btn-primary-large{ font-size: 16.5px; padding: 15px 26px; }
}

/* --- 2) 比較表: モバイルは横スクロールをやめて行ごとのカードに --- */
@media (max-width: 767px){
  .compare-table-wrap{ overflow: visible; }
  .compare-scroll-hint{ display: none; }
  .compare-table{ width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; }
  .compare-table thead{ display: none; }
  .compare-table, .compare-table tbody{ display: block; }
  .compare-table tbody tr{
    display: block;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    padding: 14px 14px 8px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-soft);
  }
  .compare-table tbody th[scope="row"]{
    display: block;
    position: static;
    background: none;
    min-width: 0;
    padding: 0 0 10px;
    margin-bottom: 4px;
    font-size: 14.5px;
    border-bottom: 1px solid var(--line);
  }
  .compare-table tbody td{
    display: block; /* gridだとmark+テキストが匿名アイテム化して1語1行に砕ける（flex/grid直下テキストの既知アンチパターン） */
    min-width: 0;
    padding: 9px 0;
    border: 0;
    font-size: 12.5px;
    line-height: 1.7;
  }
  .compare-table tbody td + td{ border-top: 1px dashed var(--line); }
  .compare-table tbody td::before{
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink-soft);
    margin-bottom: 2px;
  }
  .compare-table tbody td:nth-of-type(1)::before{ content: "SpotRight"; color: var(--green-700); }
  .compare-table tbody td:nth-of-type(2)::before{ content: "MEO対策会社"; }
  .compare-table tbody td:nth-of-type(3)::before{ content: "広告代理店"; }
  .compare-table tbody td:nth-of-type(4)::before{ content: "コンサル会社"; }
  .compare-table tbody td.compare-spotright-col{
    background: var(--green-050);
    border-radius: 10px;
    padding: 10px;
    margin: 2px 0 6px;
  }
}

/* --- 3) 統計タイル: モバイルの文字量を軽く --- */
@media (max-width: 480px){
  .stat-tiles figcaption p{ font-size: 13px; line-height: 1.8; }
  .stat-tiles cite{ font-size: 10px; line-height: 1.7; }
}

/* --- 4) 昔/今 スワイプスライダー（モバイル） --- */
@media (max-width: 767px){
  .flow-swipe-hint{ display: flex; }
  .flow-dots, .deck-dots{ display: flex; }
}
.flow-swipe-hint{
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  transition: opacity .5s ease;
}
.flow-swipe-hint.is-done{ opacity: 0; }
.fsh-lane{ display: flex; gap: 5px; animation: fsh-lane 1.7s ease-in-out infinite; }
.fsh-ch{
  width: 9px; height: 9px;
  border-top: 2.5px solid var(--green-600);
  border-right: 2.5px solid var(--green-600);
  border-radius: 2px;
  transform: rotate(45deg);
  opacity: .18;
  animation: fsh-ch 1.7s ease-in-out infinite;
}
.fsh-ch.c2{ animation-delay: .22s; }
.fsh-ch.c3{ animation-delay: .44s; }
.fsh-label{ font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
@keyframes fsh-ch{
  0%, 100%{ opacity: .18; transform: rotate(45deg) scale(.88); }
  30%{ opacity: 1; transform: rotate(45deg) scale(1.1); }
  62%{ opacity: .18; transform: rotate(45deg) scale(.88); }
}
@keyframes fsh-lane{
  0%, 100%{ transform: translateX(-2px); }
  50%{ transform: translateX(3px); }
}
.flow-dots{
  display: none;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}
.fd{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background .2s ease, transform .2s ease;
}
.fd.is-on{ background: var(--green-600); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce){
  .fsh-lane, .fsh-ch{ animation: none; }
}

/* ============================================================
   Round 21: モバイルのカードデッキ化 + 業種パネル圧縮
   演出はユーザー指定のMotion-Finder「trans-curtain」「trans-fadeslide」を
   1回再生（one-shot）に改変して採用
   ============================================================ */

/* --- デッキ共通（JSが767px以下で .is-deck を付与） --- */
@media (max-width: 767px){
  .is-deck{ position: relative; display: block; overflow: hidden; border-radius: var(--radius-m); }
  .flow-diagrams.is-deck .flow-diagram,
  .service-cards.is-deck .service-card,
  .option-cards.is-deck .option-card{ display: none; }
  .flow-diagrams.is-deck .flow-diagram.is-active,
  .service-cards.is-deck .service-card.is-active,
  .option-cards.is-deck .option-card.is-active{ display: flex; } /* 非表示ルール(3クラス)より高い詳細度が必要 */
  .service-cards.is-deck{ margin-top: 32px; }
}
.deck-dots{
  display: none;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}

/* フェードスライド遷移（trans-fadeslide改変: 新旧が同時に滑る） */
.flow-diagrams.is-deck .flow-diagram.deck-out-l, .flow-diagrams.is-deck .flow-diagram.deck-out-r,
.service-cards.is-deck .service-card.deck-out-l, .service-cards.is-deck .service-card.deck-out-r,
.option-cards.is-deck .option-card.deck-out-l, .option-cards.is-deck .option-card.deck-out-r{
  display: flex;
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  z-index: 1;
}
.deck-out-l{ animation: deck-out-l .42s cubic-bezier(.22,.61,.36,1) both; }
.deck-out-r{ animation: deck-out-r .42s cubic-bezier(.22,.61,.36,1) both; }
.deck-in-r{ animation: deck-in-r .42s cubic-bezier(.22,.61,.36,1) both; }
.deck-in-l{ animation: deck-in-l .42s cubic-bezier(.22,.61,.36,1) both; }
@keyframes deck-out-l{ from{ transform: translateX(0); opacity: 1; } to{ transform: translateX(-56%); opacity: 0; } }
@keyframes deck-out-r{ from{ transform: translateX(0); opacity: 1; } to{ transform: translateX(56%); opacity: 0; } }
@keyframes deck-in-r{ from{ transform: translateX(56%); opacity: 0; } to{ transform: translateX(0); opacity: 1; } }
@keyframes deck-in-l{ from{ transform: translateX(-56%); opacity: 0; } to{ transform: translateX(0); opacity: 1; } }

/* カーテンワイプ（trans-curtain改変: 昔→今の時代切替演出） */
.deck-curtain{
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(90deg, var(--amber-500), #F6C567);
  border-radius: var(--radius-m);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.deck-curtain.is-in{ animation: deck-curtain-in .3s ease-in both; }
.deck-curtain.is-out{ transform-origin: right; animation: deck-curtain-out .3s ease-out both; }
@keyframes deck-curtain-in{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
@keyframes deck-curtain-out{ from{ transform: scaleX(1); } to{ transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce){
  .deck-out-l, .deck-out-r, .deck-in-r, .deck-in-l, .deck-curtain.is-in, .deck-curtain.is-out{ animation: none; }
  .is-deck .deck-out-l, .is-deck .deck-out-r{ display: none; }
}

/* --- 業種パネル: スマホ1画面で読み切れる圧縮レイアウト --- */
@media (max-width: 767px){
  .industry-panel-inner h3{ font-size: 17px; }
  .industry-cols{
    display: grid;
    grid-template-columns: 1fr 1fr; /* ✕列と✓列を左右対比に（縦積みだと2画面分になる） */
    gap: 4px 14px;
  }
  .industry-col-result{ grid-column: 1 / -1; margin-top: 10px; }
  .industry-col-label{ font-size: 11.5px; margin-bottom: 4px; }
  .industry-col-before li, .industry-col-after li{
    font-size: 11.5px;
    line-height: 1.55;
    padding: 4px 0;
  }
  .industry-col-before .icon, .industry-col-after .icon{ width: 12px; height: 12px; margin-top: 2px; }
  .industry-visual{ aspect-ratio: 21 / 9; margin-bottom: 8px; }
  .industry-chat{ padding: 8px 10px; margin-bottom: 8px; }
  .ic-quote{ font-size: 12px; }
  .ic-sub{ font-size: 10.5px; }
  .industry-col-result p{ font-size: 12px; line-height: 1.7; }
}

/* ============================================================
   Round 22: Motion-Finder追加採用（公式感を保つ実用モーションのみ）
   card-lift / btn-shine / btn-press / nav-scrolltop / load-dots / form-error
   （text-glitch・cur-magnet・particles等の装飾過多系は不採用）
   ============================================================ */

/* card-lift: カードのPCホバー浮上（タッチ端末は無効） */
@media (hover: hover){
  .service-card, .option-card, .ease-card, .contact-card{
    transition: transform .28s ease, box-shadow .28s ease;
  }
  .service-card:hover, .option-card:hover, .ease-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--ink) 20%, transparent);
  }
  .contact-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--ink) 18%, transparent);
  }
}

/* btn-shine: 主要CTAホバーの光沢スイープ */
.btn-primary{ position: relative; overflow: hidden; }
.btn-primary::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -45%;
  width: 36%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover){
  .btn-primary:hover::after{ animation: btn-shine .7s ease; }
}
@keyframes btn-shine{ from{ left: -45%; } to{ left: 120%; } }

/* btn-press: タップの沈み込み */
.btn:active{ transform: translateY(1px) scale(.99); }

/* nav-scrolltop: 進捗リング付きトップへ戻るFAB */
.scrolltop{
  position: fixed;
  right: 18px;
  bottom: 24px;
  z-index: 60;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.scrolltop.is-show{ opacity: 1; visibility: visible; transform: none; }
.scrolltop > .icon{ width: 16px; height: 16px; transform: rotate(-90deg); color: var(--green-700); }
.st-ring{ position: absolute; inset: 3px; width: auto; height: auto; }
.st-track{ fill: none; stroke: var(--line); stroke-width: 2.5; }
.st-bar{
  fill: none;
  stroke: var(--green-600);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100.53;
  stroke-dashoffset: 100.53;
  transform: rotate(-90deg);
  transform-origin: center;
}
@media (max-width: 767px){
  /* 固定CTAバーの上に退避 */
  .scrolltop{ right: 14px; bottom: calc(92px + env(safe-area-inset-bottom) + 14px); width: 42px; height: 42px; }
}

/* load-dots: 送信中の3点バウンス */
.cf-dots{ display: inline-flex; gap: 5px; }
.cf-dots i{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--white);
  animation: cf-dot 1s ease-in-out infinite;
}
.cf-dots i:nth-child(2){ animation-delay: .15s; }
.cf-dots i:nth-child(3){ animation-delay: .3s; }
@keyframes cf-dot{ 0%, 100%{ transform: translateY(0); opacity: .55; } 40%{ transform: translateY(-5px); opacity: 1; } }

/* form-error: 未入力送信の震え */
.contact-form.is-error{ animation: form-shake .4s ease; }
@keyframes form-shake{
  0%, 100%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce){
  .btn-primary:hover::after, .contact-form.is-error, .cf-dots i{ animation: none; }
  .service-card:hover, .option-card:hover, .ease-card:hover, .contact-card:hover{ transform: none; }
}

/* ============================================================
   Round 23: モバイル見切れ対策
   昔/今デッキカードの圧縮（777px→安全域585px内）+ 全デッキ共通スワイプガイド
   ============================================================ */
@media (max-width: 767px){
  /* 昔/今カードを1画面に収める: 実画面モック・ステップ・余白を圧縮 */
  .flow-diagrams.is-deck .flow-diagram{ padding: 18px 16px; }
  .flow-diagrams.is-deck .flow-steps{ font-size: 13px; }
  .flow-diagrams.is-deck .flow-steps li{ padding: 5px 2px; }
  .flow-diagrams.is-deck .flow-step-ai{ padding: 7px 10px; margin: 2px 0; }
  .flow-diagrams.is-deck .flow-step-text small{ font-size: 11px; margin-top: 1px; }
  .flow-diagrams.is-deck .flow-mock{ margin: 10px 0 12px; }
  .flow-diagrams.is-deck .flow-caption{ margin-top: 8px; padding-top: 10px; font-size: 12px; }
  /* 検索モック圧縮 */
  .flow-diagrams.is-deck .am-searchbar{ margin: 8px 8px 6px; padding: 7px 12px; font-size: 12px; }
  .flow-diagrams.is-deck .am-chips{ margin: 0 8px 8px; }
  .flow-diagrams.is-deck .am-results li{ padding: 7px 10px; gap: 8px; }
  .flow-diagrams.is-deck .am-thumb{ width: 42px; height: 42px; }
  .flow-diagrams.is-deck .am-name{ font-size: 12px; }
  .flow-diagrams.is-deck .am-meta{ font-size: 10.5px; }
  /* チャットモック圧縮 */
  .flow-diagrams.is-deck .ac-body{ padding: 10px 12px 2px; }
  .flow-diagrams.is-deck .ac-user, .flow-diagrams.is-deck .ac-text{ font-size: 12px; }
  .flow-diagrams.is-deck .ac-input{ margin: 4px 10px 10px; padding: 6px 6px 6px 12px; }
}
/* 注入したスワイプガイドの上マージン（サービス/オプション用） */
.deck-hint{ margin-top: 12px; }

/* ============================================================
   Round 23-fix: スマホ見切れ監査(3端末並列)の指摘対応
   ============================================================ */

/* [CRITICAL] スワイプガイド/ドットが常時display:noneだったバグの根治。
   有効化ルールをファイル末尾(=最後勝ち)に再宣言。3デッキ全て救済 */
@media (max-width: 767px){
  .flow-swipe-hint, .flow-dots, .deck-dots{ display: flex; }
}

/* [HIGH] 昔/今カードの追加圧縮(検索リスト行をさらに詰めて1画面に近づける) */
@media (max-width: 767px){
  .flow-diagrams.is-deck .am-results li{ padding: 5px 10px; }
  .flow-diagrams.is-deck .am-thumb{ width: 38px; height: 38px; }
  .flow-diagrams.is-deck .am-rate{ gap: 4px; }
  .flow-diagrams.is-deck .am-stars{ font-size: 9px; }
  .flow-diagrams.is-deck .flow-mock{ margin: 8px 0 10px; }
  .flow-diagrams.is-deck .flow-steps li{ padding: 4px 2px; }
}

/* [MEDIUM] 検索モックのフィルターチップ: 右端ハードカット→フェードで「続きがある」表現に */
.am-chips{
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
  mask-image: linear-gradient(90deg, #000 86%, transparent);
}

/* [MEDIUM/LOW] 埋め込みCTAが固定CTAバー裏に食い込む: モバイルで下余白を確保 */
@media (max-width: 767px){
  .s5-industries .cta-band-green{ margin-bottom: 40px; }
  .s8-closing .closing-cta-sub{ margin-bottom: 40px; }
}