@charset "UTF-8";
/* ==========================================================================
   SEO・AIO・LLMO・GEO総合支援（service/geo/）専用スタイル

   assets/service.css → assets/service-pages.css の後に読み込みます。
   すべて .hvl-sv--geo 配下へ限定しているため、他ページへは影響しません。

   画像（assets/lp-ai-search/20261028/）の配置は
   docs/lp-ai-search/CLI_INSTRUCTIONS.md 第8節に従う。
     - 切り抜かない（object-fit: contain、縦横比維持）
     - 画像の上に文字・価格・ボタンを重ねない
     - C03・C04 は 767px 以下で出さず、HTML のカード・縦の流れで見せる
   画像はすべて白背景のため、淡灰の面に置くときは白いパネルの中に入れる。
   ========================================================================== */

/* --- ヒーロー -------------------------------------------------------------
   画像の白い背景が縦グリッド線を途中で切って見えるため、このページでは線を出さない。 */
.hvl-sv--geo .hvl-sv-hero { background-image: none; }

.hvl-sv--geo .hvl-geo-hero-name {
  display: block;
  margin-bottom: 14px;
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--sv-cyan-d);
}

.hvl-sv--geo .hvl-geo-hero-art { --sv-art-w: 560px; }

/* 料金枠（HTML。画像には入れない） */
.hvl-sv--geo .hvl-geo-price {
  max-width: 30em;
  margin: 28px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--sv-border);
  border-left: 3px solid var(--sv-cyan);
  border-radius: 3px;
  background: #FFFFFF;
}

.hvl-sv--geo .hvl-geo-price p { margin: 0; }

.hvl-sv--geo .hvl-geo-price-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--sv-sub);
}

.hvl-sv--geo .hvl-geo-price .hvl-geo-price-main {
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sv-ink);
}

.hvl-sv--geo .hvl-geo-price-main strong {
  margin: 0 2px;
  font-family: 'Archivo', 'Noto Sans JP', sans-serif;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  font-weight: 900;
  letter-spacing: .01em;
}

.hvl-sv--geo .hvl-geo-price .hvl-geo-price-note {
  margin-top: 6px;
  font-size: .8rem;
  line-height: 1.8;
  color: var(--sv-sub);
}

/* サービス概要（提供会社・支援領域・料金・期間） */
.hvl-sv--geo .hvl-geo-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(40px, 5vw, 64px) 0 0;
  border-top: 1px solid var(--sv-border);
  border-bottom: 1px solid var(--sv-border);
}

.hvl-sv--geo .hvl-geo-summary > div {
  padding: 18px 20px 18px 0;
}

.hvl-sv--geo .hvl-geo-summary > div + div {
  padding-left: 20px;
  border-left: 1px solid var(--sv-border);
}

.hvl-sv--geo .hvl-geo-summary dt {
  margin: 0 0 6px;
  font-family: 'IBM Plex Mono', 'Noto Sans JP', monospace;
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--sv-cyan-d);
}

.hvl-sv--geo .hvl-geo-summary dd {
  margin: 0;
  font-size: .86rem;
  line-height: 1.8;
  color: var(--sv-ink);
}

/* PC（1024px以上）：左に見出し・リード・料金・CTA、右に画像。列比 約52:48、間隔32px */
@media (min-width: 1024px) {
  .hvl-sv--geo .hvl-sv-hero-grid {
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    gap: 32px;
  }
}

/* タブレット・SP：見出し→リード→料金→CTA→画像。CTAと画像の間は24px */
@media (max-width: 1023px) {
  .hvl-sv--geo .hvl-sv-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hvl-sv--geo .hvl-sv-hero-figure { order: 2; }
  .hvl-sv--geo .hvl-geo-hero-art { --sv-art-w: 480px; }
  .hvl-sv--geo .hvl-geo-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hvl-sv--geo .hvl-geo-summary > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hvl-sv--geo .hvl-geo-summary > div:nth-child(n+3) { border-top: 1px solid var(--sv-border); }
}

/* --- 罫線レイアウト（悩み・支援領域・比較サイト施策）
   箱を並べると単調になるため、料金・事例・CTA以外は枠を付けず、
   上の罫線と番号だけで区切る。 */
.hvl-sv--geo .hvl-geo-flat {
  display: grid;
  gap: clamp(24px, 3.5vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hvl-sv--geo .hvl-geo-flat--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hvl-sv--geo .hvl-geo-flat--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px); }

.hvl-sv--geo .hvl-geo-flat-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--sv-ink);
}

.hvl-sv--geo .hvl-geo-flat-item::before {
  position: absolute;
  top: -2px;
  left: 0;
  width: 36px;
  height: 3px;
  content: "";
  background: var(--sv-cyan);
}

.hvl-sv--geo .hvl-geo-flat-item h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--sv-ink);
}

.hvl-sv--geo .hvl-geo-flat-item p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.95;
  color: var(--sv-sub);
}

/* 比較サイト施策は3段の流れ：段の間に矢印 */
.hvl-sv--geo .hvl-geo-flat--steps .hvl-geo-flat-item:not(:last-child)::after {
  position: absolute;
  top: -15px;
  right: calc(clamp(24px, 3.5vw, 48px) / -2 - .5em);
  content: "\2192";
  font-family: 'Archivo', sans-serif;
  font-size: 1.1rem;
  color: var(--sv-cyan-d);
}

/* 「HVLの対応」「確認する点」 */
.hvl-sv--geo .hvl-geo-flat-item p.hvl-geo-answer {
  margin-top: auto;
  padding: 12px 14px;
  background: var(--sv-subtle);
  color: var(--sv-ink);
}

.hvl-sv--geo .hvl-sv-sec--surface .hvl-geo-flat-item p.hvl-geo-answer { background: #FFFFFF; }

.hvl-sv--geo .hvl-geo-answer b {
  display: block;
  margin-bottom: 4px;
  font-size: .76rem;
  color: var(--sv-cyan-d);
}

/* --- 表（用語の整理・KPI・進め方） ---------------------------------------- */
.hvl-sv--geo .hvl-geo-table-wrap { margin: 0; }

.hvl-sv--geo .hvl-geo-table {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
  font-size: .88rem;
  line-height: 1.8;
}

.hvl-sv--geo .hvl-geo-table caption {
  margin: 0 0 14px;
  font-size: .86rem;
  font-weight: 700;
  text-align: left;
  color: var(--sv-sub);
}

.hvl-sv--geo .hvl-geo-table th,
.hvl-sv--geo .hvl-geo-table td {
  padding: 14px 16px;
  border: 1px solid var(--sv-border);
  text-align: left;
  vertical-align: top;
}

.hvl-sv--geo .hvl-geo-table thead th {
  background: var(--sv-subtle);
  font-size: .78rem;
  font-weight: 700;
  color: var(--sv-sub);
}

.hvl-sv--geo .hvl-geo-table tbody th {
  width: 12em;
  font-weight: 700;
  color: var(--sv-ink);
  white-space: nowrap;
}

.hvl-sv--geo .hvl-geo-table td { color: var(--sv-sub); }

/* --- ブランディング（C02：左に画像、右に3項目。列間40px） ---------------- */
.hvl-sv--geo .hvl-geo-brand {
  display: grid;
  grid-template-columns: minmax(0, 580px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.hvl-sv--geo .hvl-geo-brand-art { --sv-art-w: 580px; }

.hvl-sv--geo .hvl-geo-brand-items article {
  padding: 18px 0 18px 20px;
  border-left: 3px solid var(--sv-cyan);
}

.hvl-sv--geo .hvl-geo-brand-items article + article { margin-top: 14px; }

.hvl-sv--geo .hvl-geo-brand-items h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sv-ink);
}

.hvl-sv--geo .hvl-geo-brand-items p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.9;
  color: var(--sv-sub);
}

.hvl-sv--geo .hvl-geo-brand-items .hvl-geo-brand-note {
  margin-top: 22px;
  font-size: .84rem;
}

/* --- 5つの支援領域（C03 + HTMLカード） ------------------------------------ */
.hvl-sv--geo .hvl-geo-panel {
  max-width: 960px;
  margin: 0 auto clamp(32px, 4vw, 48px);
  padding: clamp(12px, 2vw, 24px);
  box-sizing: border-box;
  border: 1px solid var(--sv-border);
  border-radius: 3px;
  background: #FFFFFF;
}

.hvl-sv--geo .hvl-geo-impact {
  display: grid;
  gap: 4px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--sv-border);
}

.hvl-sv--geo .hvl-geo-impact > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .8rem;
  line-height: 1.7;
}

.hvl-sv--geo .hvl-geo-impact dt { color: var(--sv-sub); }

.hvl-sv--geo .hvl-geo-impact dd {
  margin: 0;
  color: var(--sv-cyan-d);
}

/* --- 計測と事業成果（C04 + KPI表） ---------------------------------------- */
.hvl-sv--geo .hvl-geo-route {
  max-width: 1040px;
  margin: 0 auto;
}

.hvl-sv--geo .hvl-geo-route-note {
  max-width: 1040px;
  margin: 12px auto clamp(32px, 4vw, 48px);
  font-size: .8rem;
  line-height: 1.9;
  color: var(--sv-sub);
}

/* SP用の縦4段（PCでは画像） */
.hvl-sv--geo .hvl-geo-flow {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hvl-sv--geo .hvl-geo-flow li {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--sv-border);
  border-radius: 3px;
  background: var(--sv-subtle);
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  color: var(--sv-ink);
}

.hvl-sv--geo .hvl-geo-flow li + li { margin-top: 30px; }

.hvl-sv--geo .hvl-geo-flow li + li::before {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  content: "\2193";
  font-family: 'Archivo', sans-serif;
  color: var(--sv-cyan-d);
}

/* --- 選ばれる理由：箱ではなく、大きな番号と見出しの横並びの行 ------------- */
.hvl-sv--geo .hvl-geo-reasons { border-top: 1px solid var(--sv-border); }

.hvl-sv--geo .hvl-geo-reason {
  display: grid;
  grid-template-columns: clamp(64px, 9vw, 120px) minmax(0, 22em) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: baseline;
  padding: clamp(24px, 3.2vw, 40px) 0;
  border-bottom: 1px solid var(--sv-border);
}

/* 見出しと本文を2列に並べるため、包んでいる div を展開する */
.hvl-sv--geo .hvl-geo-reason > div { display: contents; }

.hvl-sv--geo .hvl-geo-reason-num {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--sv-cyan-d);
}

.hvl-sv--geo .hvl-geo-reason h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--sv-ink);
}

.hvl-sv--geo .hvl-geo-reason p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.95;
  color: var(--sv-sub);
}

.hvl-sv--geo .hvl-geo-reason-more {
  margin: clamp(22px, 3vw, 32px) 0 0;
  font-size: .86rem;
  line-height: 1.9;
  color: var(--sv-sub);
}

/* --- 違いの比較表：HVLの列を強調する ------------------------------------- */
.hvl-sv--geo .hvl-geo-table--compare th.hvl-geo-col-hvl,
.hvl-sv--geo .hvl-geo-table--compare td.hvl-geo-col-hvl {
  background: var(--sv-pale);
  color: var(--sv-ink);
}

.hvl-sv--geo .hvl-geo-table--compare thead th.hvl-geo-col-hvl {
  border-top: 3px solid var(--sv-cyan);
  color: var(--sv-cyan-d);
}

/* --- 事例（お客さまの声）：箱ではなく、罫線で区切った読み物 ----------------
   左に業種・ひとこと・結果の数字、右に「ご状況・対応・よかった点・結果」。 */
.hvl-sv--geo .hvl-geo-stories { border-top: 1px solid var(--sv-ink); }

.hvl-sv--geo .hvl-geo-story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4.5vw, 72px);
  padding: clamp(36px, 5vw, 64px) 0;
  border-bottom: 1px solid var(--sv-border);
}

.hvl-sv--geo .hvl-geo-story-head h3 {
  margin: 10px 0 0;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 900;
  line-height: 1.4;
  color: var(--sv-ink);
}

.hvl-sv--geo .hvl-geo-story-head h3 small {
  display: block;
  margin-top: 4px;
  font-size: .55em;
  font-weight: 700;
  color: var(--sv-sub);
}

.hvl-sv--geo .hvl-geo-story-catch {
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--sv-cyan);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--sv-ink);
}

.hvl-sv--geo .hvl-geo-story-results {
  display: grid;
  gap: 16px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.hvl-sv--geo .hvl-geo-story-results b {
  display: block;
  font-family: 'Archivo', 'Noto Sans JP', sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 900;
  line-height: 1.2;
  color: var(--sv-cyan-d);
}

.hvl-sv--geo .hvl-geo-story-results span {
  font-size: .8rem;
  line-height: 1.7;
  color: var(--sv-sub);
}

.hvl-sv--geo .hvl-geo-story-body { margin: 0; }

.hvl-sv--geo .hvl-geo-story-body > div {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--sv-border);
}

.hvl-sv--geo .hvl-geo-story-body > div:first-child { border-top: 0; padding-top: 0; }

.hvl-sv--geo .hvl-geo-story-body dt {
  font-size: .78rem;
  font-weight: 700;
  line-height: 2;
  color: var(--sv-cyan-d);
}

.hvl-sv--geo .hvl-geo-story-body dd {
  margin: 0;
  font-size: .9rem;
  line-height: 2;
  color: var(--sv-ink);
}

.hvl-sv--geo .hvl-geo-story-link {
  grid-column: 2;
  margin: -8px 0 0;
  font-size: .82rem;
  color: var(--sv-sub);
}

.hvl-sv--geo .hvl-geo-subhead {
  margin: clamp(40px, 5vw, 64px) 0 20px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--sv-sub);
}

/* --- 事例の後の中間CTA ---------------------------------------------------- */
.hvl-sv--geo .hvl-geo-midcta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(28px, 3.5vw, 44px);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--sv-cyan);
  border-radius: 3px;
  background: #FFFFFF;
}

.hvl-sv--geo .hvl-geo-midcta p {
  max-width: 40em;
  margin: 0;
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--sv-ink);
}

.hvl-sv--geo .hvl-geo-midcta .hvl-service-button { flex: none; }

/* --- プランと費用 --------------------------------------------------------- */
.hvl-sv--geo .hvl-geo-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 30px);
  align-items: stretch;
}

.hvl-sv--geo .hvl-geo-plan {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--sv-border);
  border-radius: 3px;
  background: #FFFFFF;
}

.hvl-sv--geo .hvl-geo-plan--recommended {
  border: 2px solid var(--sv-cyan);
  box-shadow: 0 10px 30px -22px rgba(0, 194, 255, .8);
}

.hvl-sv--geo .hvl-geo-plan h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sv-ink);
}

.hvl-sv--geo .hvl-geo-plan-badge {
  padding: 3px 9px;
  border-radius: 2px;
  background: var(--sv-cyan);
  font-size: .72rem;
  font-weight: 700;
  color: #04222E;
}

.hvl-sv--geo .hvl-geo-plan dl { margin: 0; }

.hvl-sv--geo .hvl-geo-plan dl > div {
  display: grid;
  grid-template-columns: 3.5em minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--sv-border);
}

.hvl-sv--geo .hvl-geo-plan dt {
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.9;
  color: var(--sv-sub);
}

.hvl-sv--geo .hvl-geo-plan dd {
  margin: 0;
  font-size: .9rem;
  line-height: 1.8;
  color: var(--sv-ink);
}

.hvl-sv--geo .hvl-geo-plan dd.hvl-geo-plan-price {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.4;
}

.hvl-sv--geo .hvl-geo-plan-price small {
  font-size: .62em;
  font-weight: 500;
}

.hvl-sv--geo .hvl-geo-start {
  margin-top: clamp(28px, 3.5vw, 44px);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--sv-border);
  border-radius: 3px;
  background: #FFFFFF;
}

.hvl-sv--geo .hvl-geo-start h3 {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 700;
}

.hvl-sv--geo .hvl-geo-start ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hvl-sv--geo .hvl-geo-start li {
  font-size: .9rem;
  line-height: 1.9;
  color: var(--sv-ink);
}

.hvl-sv--geo .hvl-geo-start b {
  margin-right: 10px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--sv-cyan-d);
}

.hvl-sv--geo .hvl-geo-start span {
  display: block;
  margin-top: 2px;
  padding-left: 2.4em;
  color: var(--sv-sub);
}

.hvl-sv--geo .hvl-geo-plans-cta { margin-top: clamp(28px, 3.5vw, 40px); }

/* --- ファーストビューの実績（掲載済みの事例A・Bの数値のみ） --------------- */
.hvl-sv--geo .hvl-geo-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.hvl-sv--geo .hvl-geo-proof li {
  padding-left: 14px;
  border-left: 2px solid var(--sv-cyan);
  line-height: 1.5;
}

.hvl-sv--geo .hvl-geo-proof b {
  display: block;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 900;
  color: var(--sv-ink);
}

.hvl-sv--geo .hvl-geo-proof span {
  font-size: .76rem;
  color: var(--sv-sub);
}

.hvl-sv--geo .hvl-geo-proof-note {
  margin: 10px 0 0;
  font-size: .72rem;
  line-height: 1.8;
  color: var(--sv-sub);
}

/* --- 関連：カードではなく、罫線で区切ったリンクの一覧 --------------------- */
.hvl-sv--geo .hvl-geo-links {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--sv-border);
}

.hvl-sv--geo .hvl-geo-links a {
  display: grid;
  grid-template-columns: 12em 16em minmax(0, 1fr) auto;
  gap: 8px 24px;
  align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px solid var(--sv-border);
  color: var(--sv-ink);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}

.hvl-sv--geo .hvl-geo-links a:hover,
.hvl-sv--geo .hvl-geo-links a:focus-visible {
  background: #FFFFFF;
  color: var(--sv-cyan-d);
}

.hvl-sv--geo .hvl-geo-links-en {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--sv-cyan-d);
}

.hvl-sv--geo .hvl-geo-links-title { font-size: 1rem; font-weight: 700; }

.hvl-sv--geo .hvl-geo-links-desc {
  font-size: .86rem;
  line-height: 1.8;
  color: var(--sv-sub);
}

.hvl-sv--geo .hvl-geo-links-arrow {
  font-family: 'Archivo', sans-serif;
  color: var(--sv-cyan-d);
}

/* --- 画面幅ごとの出し分け ------------------------------------------------- */
.hvl-sv--geo .hvl-geo-sp-only { display: none; }

@media (max-width: 1180px) {
  .hvl-sv--geo .hvl-geo-flat--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
}

@media (max-width: 1080px) {
  .hvl-sv--geo .hvl-geo-brand { grid-template-columns: 1fr; }
  .hvl-sv--geo .hvl-geo-brand-art { margin-inline: auto; }
  .hvl-sv--geo .hvl-geo-reason { grid-template-columns: clamp(64px, 9vw, 120px) minmax(0, 1fr); }
  .hvl-sv--geo .hvl-geo-reason p { grid-column: 2; }
  .hvl-sv--geo .hvl-geo-links a { grid-template-columns: minmax(0, 1fr) auto; }
  .hvl-sv--geo .hvl-geo-links-en,
  .hvl-sv--geo .hvl-geo-links-title,
  .hvl-sv--geo .hvl-geo-links-desc { grid-column: 1; }
  .hvl-sv--geo .hvl-geo-links-arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .hvl-sv--geo .hvl-geo-story { grid-template-columns: 1fr; }
  .hvl-sv--geo .hvl-geo-story-link { grid-column: 1; margin-top: 0; }
  .hvl-sv--geo .hvl-geo-story-results { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

@media (max-width: 640px) {
  .hvl-sv--geo .hvl-geo-story-body > div { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 880px) {
  .hvl-sv--geo .hvl-geo-flat--3 { grid-template-columns: 1fr; row-gap: 32px; }
  .hvl-sv--geo .hvl-geo-flat--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hvl-sv--geo .hvl-geo-flat--steps .hvl-geo-flat-item:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -26px;
    left: 0;
    content: "\2193";
  }
  .hvl-sv--geo .hvl-geo-plans { grid-template-columns: 1fr; }
  .hvl-sv--geo .hvl-geo-midcta { flex-direction: column; align-items: stretch; }
}

/* SP（767px以下）：C03・C04 は出さず、HTMLの縦並び・縦4段で見せる */
@media (max-width: 767px) {
  .hvl-sv--geo .hvl-geo-pc-only { display: none; }
  .hvl-sv--geo .hvl-geo-sp-only { display: block; }
  .hvl-sv--geo .hvl-geo-route-note { margin-top: 18px; }
  .hvl-sv--geo .hvl-geo-flat--5 { grid-template-columns: 1fr; row-gap: 32px; }
  .hvl-sv--geo .hvl-geo-reason { grid-template-columns: 1fr; gap: 10px; }
  .hvl-sv--geo .hvl-geo-reason p { grid-column: 1; }
  .hvl-sv--geo .hvl-geo-reason-num { font-size: 2.2rem; }

  /* 表は行ごとのカードに組み替える（横スクロールさせない） */
  .hvl-sv--geo .hvl-geo-table,
  .hvl-sv--geo .hvl-geo-table tbody,
  .hvl-sv--geo .hvl-geo-table tr,
  .hvl-sv--geo .hvl-geo-table th,
  .hvl-sv--geo .hvl-geo-table td { display: block; width: auto; }

  .hvl-sv--geo .hvl-geo-table { background: transparent; }
  .hvl-sv--geo .hvl-geo-table caption { display: block; }
  .hvl-sv--geo .hvl-geo-table thead { display: none; }

  .hvl-sv--geo .hvl-geo-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--sv-border);
    border-radius: 3px;
    background: #FFFFFF;
  }

  .hvl-sv--geo .hvl-geo-table th,
  .hvl-sv--geo .hvl-geo-table td { border: 0; padding: 10px 16px; }

  .hvl-sv--geo .hvl-geo-table tbody th {
    width: auto;
    border-bottom: 1px solid var(--sv-border);
    background: var(--sv-subtle);
    white-space: normal;
  }

  .hvl-sv--geo .hvl-geo-table td[data-label]::before {
    display: block;
    content: attr(data-label);
    font-size: .72rem;
    font-weight: 700;
    color: var(--sv-cyan-d);
  }
}

@media (max-width: 640px) {
  .hvl-sv--geo .hvl-geo-summary { grid-template-columns: 1fr; }
  .hvl-sv--geo .hvl-geo-summary > div,
  .hvl-sv--geo .hvl-geo-summary > div + div { padding: 14px 0; border-left: 0; }
  .hvl-sv--geo .hvl-geo-summary > div + div { border-top: 1px solid var(--sv-border); }
  .hvl-sv--geo .hvl-geo-price { padding: 16px 18px; }
}

/* ==========================================================================
   2026-10-28 追加素材（docs/lp-ai-search/CLAUDE_NEXT_INSTRUCTIONS.md）
   C05：理由03に工程図、C06：違いセクションの比較表の前に全体図。
   ほかの指定より後ろに置き、各ブレイクポイントで上書きする。
   ========================================================================== */

/* --- C05：理由03（番号｜本文｜画像。画像は最大600px、本文は最低320px） ---- */
.hvl-sv--geo .hvl-geo-reason--media {
  grid-template-columns: clamp(64px, 9vw, 120px) minmax(320px, 1fr) minmax(0, 600px);
  grid-template-areas:
    "num head fig"
    "num body fig"
    "num steps fig";
  row-gap: 14px;
  align-items: start;
}

.hvl-sv--geo .hvl-geo-reason--media .hvl-geo-reason-num { grid-area: num; }
.hvl-sv--geo .hvl-geo-reason--media h3 { grid-area: head; }
.hvl-sv--geo .hvl-geo-reason--media p { grid-area: body; }
.hvl-sv--geo .hvl-geo-reason--media .hvl-geo-process { grid-area: steps; }

.hvl-sv--geo .hvl-geo-reason-art {
  grid-area: fig;
  align-self: center;
  justify-self: center;
  max-width: 600px;
}

/* 画像のラベルだけに頼らず、4工程を本文にも置く */
.hvl-sv--geo .hvl-geo-process {
  display: grid;
  gap: 10px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: hvl-geo-process;
}

.hvl-sv--geo .hvl-geo-process li {
  position: relative;
  padding-left: 2.6em;
  font-size: .86rem;
  line-height: 1.8;
  color: var(--sv-sub);
  counter-increment: hvl-geo-process;
}

.hvl-sv--geo .hvl-geo-process li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: counter(hvl-geo-process, decimal-leading-zero);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .76rem;
  line-height: 2.1;
  color: var(--sv-cyan-d);
}

.hvl-sv--geo .hvl-geo-process b {
  display: block;
  font-size: .92rem;
  color: var(--sv-ink);
}

/* --- C06：違いセクション（見出しとの間 28px、比較表との間 32px） ---------- */
.hvl-sv--geo .hvl-sv-head:has(+ .hvl-geo-integrated) { margin-bottom: 28px; }

.hvl-sv--geo .hvl-geo-integrated { margin: 0 0 32px; }

.hvl-sv--geo .hvl-geo-integrated-title {
  margin: 0 0 20px;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  color: var(--sv-ink);
}

/* 淡灰の面に置くため白いパネルに入れる（画像は白背景） */
.hvl-sv--geo .hvl-geo-integrated-art {
  max-width: 900px;
  margin: 0 auto;
}

.hvl-sv--geo .hvl-geo-integrated-list {
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hvl-sv--geo .hvl-geo-integrated-list li {
  padding: 14px 14px 12px;
  border: 1px solid var(--sv-border);
  border-top: 2px solid var(--sv-cyan);
  border-radius: 3px;
  background: #FFFFFF;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--sv-sub);
}

.hvl-sv--geo .hvl-geo-integrated-list b {
  display: block;
  margin-bottom: 4px;
  font-size: .92rem;
  color: var(--sv-ink);
}

/* --- 料金：伴走型プランに「総合支援」を添える ----------------------------- */
.hvl-sv--geo .hvl-geo-plan-sub {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 700;
  color: var(--sv-sub);
}

/* --- ブレイクポイント ----------------------------------------------------- */
/* 768〜1023px：番号の右に、見出し→画像→本文→工程の順で縦に並べる */
@media (max-width: 1023px) {
  .hvl-sv--geo .hvl-geo-reason--media {
    grid-template-columns: clamp(64px, 9vw, 120px) minmax(0, 1fr);
    grid-template-areas:
      "num head"
      ".   fig"
      ".   body"
      ".   steps";
  }
  .hvl-sv--geo .hvl-geo-reason--media p { grid-column: auto; grid-area: body; }
  .hvl-sv--geo .hvl-geo-reason-art { width: 100%; margin: 6px auto; }
}

/* 767px以下：1列。C06 は画像を出さず、6領域を2列のカードで見せる */
@media (max-width: 767px) {
  .hvl-sv--geo .hvl-geo-reason--media {
    grid-template-columns: 1fr;
    grid-template-areas: "num" "head" "fig" "body" "steps";
  }
  .hvl-sv--geo .hvl-geo-reason--media p { grid-column: auto; grid-area: body; }
  .hvl-sv--geo .hvl-geo-integrated-title { text-align: left; }
  .hvl-sv--geo .hvl-geo-integrated-list.hvl-geo-sp-only {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* さらに狭い端末では1列 */
@media (max-width: 359px) {
  .hvl-sv--geo .hvl-geo-integrated-list.hvl-geo-sp-only { grid-template-columns: 1fr; }
}

/* --- サービス紹介（service/geo/）：事例の数字を横に4つ並べる -------------- */
.hvl-sv--geo .hvl-geo-proof--wide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 28px;
  margin-top: 0;
}

@media (max-width: 880px) {
  .hvl-sv--geo .hvl-geo-proof--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .hvl-sv--geo .hvl-geo-proof--wide { grid-template-columns: 1fr; }
}