@charset "UTF-8";
/* ============================================================
   エアコンのガス漏れ・修理 LP
   カラー・タイポグラフィ・レイアウトは docs/design.md に準拠
============================================================ */

:root {
  /* Primary */
  --red: #e23b50; /* Alert Red: 緊急性・行動喚起 */
  --navy: #1e3c8c; /* Trust Navy: 見出し・基調色 */
  --blue: #1d50a5; /* Vivid Blue: アイコン・補助色 */
  /* Secondary */
  --pink: #e8386d; /* CTA Pink: コンバージョン専用 */
  --yellow: #ffe438; /* Highlight Yellow: マーカー・視線誘導 */
  --gold: #b9962c; /* Laurel Gold: 実績訴求 */
  /* Semantic */
  --error: #d7263d;
  --text: #333333;
  --gray: #767676; /* 白背景でWCAG AA（4.5:1）を満たすグレー */
  --bg-blue: #eaf2fa;
  --white: #ffffff;
  --border-blue: #d8e4f0;
  --shadow: 0 2px 12px rgba(30, 60, 140, 0.08);
  /* Spacing scale (8px基準) */
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 40px;
  --sp-xl: 64px;
}

/* ---------- リセット・ベース ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* 動きの低減設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
    animation: none !important;
  }
}

/* スクリーンリーダー向けの非表示見出し */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body {
  font-family:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: var(--text);
  background: var(--white);
  /* 追従CTAバー（申込み件数の通知を含む）の高さ分の余白 */
  padding-bottom: 185px;
}

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

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
}

.inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

section {
  padding: 40px 0;
}

/* SP専用の改行（768px以上では無効化される） */
.br-sp {
  display: inline;
}

/* 線画アイコン共通 */
.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 見出し ---------- */
.section-title {
  font-size: clamp(25px, 3.4vw, 52px);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--navy);
  text-align: center;
  margin-bottom: var(--sp-md);
  /* 見出しは1行で見せる（収まるサイズは下のメディアクエリで担保する） */
  white-space: nowrap;
}

/* 400px未満では最長の見出し「まずはお気軽にご相談ください！」(15文字)が
   25pxのままだと1行に収まらないため、画面幅に追従させて縮める */
@media (max-width: 399px) {
  .section-title {
    font-size: 6.2vw;
  }

  /* 追従CTAバーの文言が折り返してバーが高くなるぶん、下余白を増やす */
  body {
    padding-bottom: 212px;
  }
}

/* 見出し内の強調（赤文字＋イエローのアンダーライン。少し大きめに出す） */
.section-title-em {
  color: var(--red);
  font-size: 1.12em;
  background: linear-gradient(transparent 74%, var(--yellow) 74%);
}

/* 見出し下のイエローバーでアイキャッチを強化（全セクション共通） */
.section-title::after {
  content: "";
  display: block;
  width: 140px;
  height: 6px;
  background: var(--yellow);
  border-radius: 3px;
  margin: 10px auto 0;
}

/* ---------- ボタン ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--pink);
  color: var(--white);
  font-family: inherit;
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 700;
  border: none;
  border-radius: 40px;
  padding: 16px 40px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    filter 0.2s;
}

.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(232, 56, 109, 0.35);
}

.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  color: var(--pink);
  font-size: 14px;
  flex-shrink: 0;
}

.btn-small {
  font-size: 15px;
  padding: 10px 20px;
  gap: 8px;
}

/* ============================================================
   ヘッダー
============================================================ */
.site-header {
  /* 初期表示では画面外に隠し、ヒーローを読み進めたらJSで.is-visibleが付いて上からせり下がる。
     fixedのためフローに高さを持たず、ヒーローがページ最上部から始まる */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(30, 60, 140, 0.12);
  padding: 10px 16px;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

/* ヘッダー1行目（サイト名＋CTA）。2行目はグローバルメニュー */
.site-header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* ハンバーガーぶんの幅を確保するため、狭い画面では間隔を詰める */
  gap: clamp(10px, 2vw, 16px);
}

.site-header.is-visible {
  transform: translateY(0);
}

/* 下層ページ（privacy.html等）はJSの表示制御がないため、従来どおり常時表示する */
.policy-body .site-header {
  position: sticky;
  transform: none;
}

.site-header-title {
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.45;
}

/* 語句の途中で折り返さないよう、意味のまとまりごとにinline-blockで区切る */
.site-header-title-sub,
.site-header-title-main,
.site-header-title-tail {
  display: inline-block;
}

/* 「エアコンの」は控えめに、「ガス漏れ・修理」はイエローマーカーで主役に */
.site-header-title-sub {
  font-size: 0.85em;
}

.site-header-title-main {
  background: linear-gradient(transparent 68%, var(--yellow) 68%);
}

/* 1024px未満はCTA・ハンバーガーに幅を譲るため、末尾の一節は出さない
   （同じ文言はヒーローの見出しとメニュー内に出ている） */
@media (max-width: 1023px) {
  .site-header-title-tail {
    display: none;
  }
}

/* サイト名を置く幅が取れない画面ではヘッダーから省く（メニュー内には表示される） */
@media (max-width: 359px) {
  .site-header-title {
    display: none;
  }
}

.site-header-cta {
  display: flex;
  align-items: stretch;
  gap: var(--sp-sm);
  flex-shrink: 0;
  /* ハンバーガーが出る幅ではグローバルメニューが非表示になり、
     space-between の余白がサイト名との間に均等配分されて電話ボタンが中途半端な位置に浮く。
     auto marginで余白を左側に寄せ、ハンバーガーの隣に並べる
     （メニューが並ぶ1440px以上では下のメディアクエリで解除する） */
  margin-left: auto;
}

/* グローバルメニュー（参考: design/menu-design-pc.png）
   縦の区切り線で仕切った横並び。1行に収まらない画面幅ではハンバーガーに切り替えるため、
   既定は非表示にしておき、収まる幅（1440px以上）でのみ表示する */
.global-nav {
  display: none;
}

.global-nav-list {
  display: flex;
  align-items: stretch;
}

.global-nav-list li {
  display: flex;
  border-left: 1px solid var(--border-blue);
}

.global-nav-list li:last-child {
  border-right: 1px solid var(--border-blue);
}

.global-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 14px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.global-nav a:hover {
  color: var(--blue);
}

/* ハンバーガーボタン（メニューが収まらない画面幅で表示） */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  /* 指で押せる大きさを確保する */
  width: 44px;
  height: 44px;
  padding: 0 9px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--navy);
}

/* 固定ヘッダー（約64〜76px）に隠れないよう、アンカーの着地位置を下げる */
main section[id] {
  scroll-margin-top: 80px;
}

@media (min-width: 768px) {
  main section[id] {
    scroll-margin-top: 96px;
  }
}

/* ハンバーガー展開時の全画面メニュー（参考: design/menu-design-sp.png） */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  overflow-y: auto;
  /* 閉じている間はフォーカスも当たらないよう visibility で隠す。
     閉じるときはフェードし終えてから隠す */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0s linear 0.25s;
}

/* 開くときはすぐ表示状態にする（閉じるボタンへフォーカスを移せるようにするため） */
.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.25s ease,
    visibility 0s;
}

/* メニューを開いている間は背面をスクロールさせない */
body.is-drawer-open {
  overflow: hidden;
}

.drawer-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 12px 20px 64px;
}

.drawer-close {
  display: block;
  margin-left: auto;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.drawer-title {
  text-align: center;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.5;
  margin: var(--sp-xs) 0 var(--sp-lg);
}

.drawer-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: var(--sp-xl);
}

.drawer-cta-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 200px;
  gap: 2px;
  border-radius: 10px;
  padding: 10px 16px;
  background: var(--red);
  color: var(--white);
  text-decoration: none;
  line-height: 1.2;
}

.drawer-cta-label {
  font-size: 12px;
  font-weight: 700;
}

.drawer-cta-number {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 21px;
  font-weight: 900;
  white-space: nowrap;
}

.drawer-cta-number .icon {
  width: 20px;
  height: 20px;
}

/* メニュー項目は2列。各項目の下に細い区切り線を引く */
.drawer-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg) var(--sp-md);
}

.drawer-list a {
  display: block;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

/* 電話（CTAセクションと同じ2行構成：番号＋受付時間。赤の角丸ブロック） */
.header-phone {
  display: none; /* SPでは非表示（追従バーに電話ボタンがあるため） */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  border-radius: 10px;
  padding: 7px 18px;
  text-decoration: none;
  line-height: 1.2;
  box-shadow: var(--shadow);
  transition:
    transform 0.2s,
    filter 0.2s;
}

.header-phone:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.header-phone-number {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 900;
  white-space: nowrap;
}

.header-phone .icon {
  width: 20px;
  height: 20px;
}

.header-phone-hours {
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
  white-space: nowrap;
}

/* ============================================================
   1. ファーストビュー（ヒーロー）
============================================================ */
.hero {
  padding: 0; /* セクション共通の上下paddingはヒーローには適用しない */
  position: relative;
  /* 人物写真をセクション全体の背景に表示。
     白グラデーションは全端末幅で共通に表示し、テキストの可読性を確保する */
  /* 参照は軽量化したJPEG版（原本: design/originals/hero-woman.png） */
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.72) 35%,
      rgba(255, 255, 255, 0.42) 65%,
      rgba(255, 255, 255, 0.08) 100%
    ),
    url("../images/hero/hero-woman.jpg") right center / cover no-repeat;
  overflow: hidden;
}

/* SP: coverで画像の左側が大きくトリミングされ、人物の顔が左端でテキストに被るため、
   画像を右へずらして顔をテキストの少ない右側に寄せる（768px以上は既定のright centerのまま） */
@media (max-width: 767px) {
  .hero {
    background-position:
      center,
      right -280px center;
  }

  /* SPは縦に長くなりすぎるため「2027年問題とは？」は非表示にする。
     飛び先が無くなるため、メニュー・サイトマップのリンクも合わせて隠す */
  .problem-2027,
  .nav-item-2027 {
    display: none;
  }

  /* SPは見出し周りが窮屈になるため、手書き風アクセントは出さない */
  .hero-note {
    display: none;
  }
}

/* 背景画像は.heroで全幅表示する。
   コンテンツ幅はヒーローのみ他セクション（1200px）より広めの1320pxにして、
   価格カード・実績バッジを大きく置けるようにする */
.hero-inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  /* 上余白はリボン帯の傾きで持ち上がる右端が画面上端で切れない量を確保する */
  padding: 44px 16px 32px;
}

/* 「茨城県全域対応」バッジ（ヒーロー右上）。
   狭い幅でリボン帯の右端とかすった場合はリボン側が手前に来る（DOM順で先に描画） */
/* SPでは表示スペースが確保できないため非表示。768px以上でヒーロー右上に絶対配置 */
.hero-area-badge {
  display: none;
}

/* リボン2本のグループ（参考: design/hero-design-20260728-01.jpg）
   右肩上がりを強めて勢いを出す */
.ribbon-group {
  /* 帯2枚の基準幅（紺帯の表示幅）。320px幅でもはみ出さない可変サイズ */
  --ribbon-width: min(88vw, 400px);
  width: fit-content;
  transform: rotate(-5deg);
  transform-origin: left center;
  margin-bottom: var(--sp-sm);
}

/* 「茨城県限定！」の帯（SVG画像）。
   紺帯と同じ縮尺で並ぶよう、SVG原寸の比率（588 / 870）で幅を決める */
.ribbon-limited {
  position: relative;
  /* 紺帯より前面に出して重なり部分で上に見せる */
  z-index: 1;
  display: block;
  width: calc(var(--ribbon-width) * 588 / 870);
  height: auto;
  /* 紺帯の左端より少し内側から始める */
  margin-left: 10px;
}

/* 「2027年問題に備えましょう！」の帯（SVG画像） */
.ribbon {
  display: block;
  width: var(--ribbon-width);
  height: auto;
  /* 上の白帯と縦方向に少し重ねる（画像幅に追従） */
  margin-top: calc(var(--ribbon-width) * -0.03);
}

/* メインコピーと同じく右肩上がりに傾ける（左端を軸にして左揃えを崩さない） */
.hero-subcopy {
  width: fit-content;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: var(--sp-sm);
  transform: rotate(-3deg);
  transform-origin: left center;
}

.hero-subcopy strong {
  color: var(--navy);
  font-size: 1.2em;
  /* イエローマーカーで強調 */
  background: linear-gradient(transparent 68%, var(--yellow) 68%);
  padding: 0 2px;
}

/* メインコピー＋手書き風アクセントのまとまり。
   アクセントを見出しの右上に絶対配置するための基準にする */
.hero-title-block {
  position: relative;
  /* 「エアコンの」の幅。手書き風アクセントの左位置の基準にも使う */
  --line1-width: clamp(160px, 52vw, 210px);
}

/* メインコピー */
.hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 各行を傾けたぶん、行同士が右端で近づきすぎないよう余白を広げる */
  gap: 14px;
  margin-bottom: var(--sp-md);
  line-height: 1.3;
}

/* 「エアコンの」は吹き出し型のSVG画像（images/hero/hero-title-aircon.svg）で表示する */
.hero-title-line1 {
  /* 右上のアクセントと並ぶため、狭い画面では画面幅に応じて縮める */
  width: var(--line1-width);
  height: auto;
  filter: drop-shadow(4px 4px 8px rgba(30, 60, 140, 0.2));
  /* 下2行と揃えて右肩上がりに傾ける */
  transform: rotate(-3deg);
  transform-origin: left center;
}

/* 「ガス漏れ・修理」をゆっくり拡大・縮小させて視線を集める。
   既存の傾き rotate(-3deg) は打ち消されないよう keyframes 側にも書いている */
@keyframes copy-pulse {
  0%,
  100% {
    transform: rotate(-3deg) scale(1);
  }
  50% {
    transform: rotate(-3deg) scale(1.06);
  }
}

/* 「お任せください！」用。傾きが -4deg のため keyframes を分けている */
@keyframes copy-pulse-line3 {
  0%,
  100% {
    transform: rotate(-4deg) scale(1);
  }
  50% {
    transform: rotate(-4deg) scale(1.06);
  }
}

/* メインコピーの大文字2行（参考: design/lp-design-20260731-01.jpg）
   背景色は敷かず、白フチ（縁取り）＋イエローのアンダーラインで見せる。
   paint-order: stroke fill でフチを文字の下に描き、字形が痩せないようにする */
.hero-title-line2,
.hero-title-line3 {
  position: relative;
  font-weight: 900;
  -webkit-text-stroke: 0.11em var(--white);
  paint-order: stroke fill;
  /* アンダーラインを置くための下余白 */
  padding-bottom: 0.1em;
}

/* イエローのアンダーライン。文字の下端に少し重ねる。
   z-index:-1 で文字より奥に敷く（親は transform で重ね合わせ文脈を作るため、
   ヒーロー背景まで抜けることはない） */
.hero-title-line2::after,
.hero-title-line3::after {
  content: "";
  position: absolute;
  left: 0;
  right: -0.06em;
  bottom: 0.14em;
  height: 0.18em;
  background: var(--yellow);
  border-radius: 0.09em;
  z-index: -1;
}

.hero-title-line2 {
  font-size: 36px;
  color: var(--blue);
  text-shadow: 0 4px 10px rgba(30, 60, 140, 0.25);
  transform: rotate(-3deg);
  /* 左端を固定して右へ伸ばす（左揃えのレイアウトを崩さないため） */
  transform-origin: left center;
  /* 開始を1.6s遅らせ、GSAPの登場アニメーション（〜約1.1s）と競合させない */
  animation: copy-pulse 2.6s ease-in-out 1.6s infinite;
}

.hero-title-line3 {
  font-size: 34px;
  color: var(--red);
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transform: rotate(-4deg);
  transform-origin: left center;
  /* 2行目より半周期（1.3s）遅らせ、1行目と交互に拡大・縮小させる */
  animation: copy-pulse-line3 2.6s ease-in-out 2.9s infinite;
}

/* 手書き風アクセント（ゆっくり上下に浮遊させて目を引く） */
@keyframes gentle-float {
  0%,
  100% {
    transform: rotate(-4deg) translateY(0);
  }
  50% {
    transform: rotate(-4deg) translateY(-5px);
  }
}

/* 見出しの右上に重ねる。フローから外すことで下のコンテンツが上に詰まる。
   画面右端ではなく「エアコンの」の右隣（＝見出し基準）に置く */
.hero-note {
  position: absolute;
  top: 0;
  left: calc(var(--line1-width) + clamp(8px, 2vw, 32px));
  /* 見出しより横に長くなっても折り返さない */
  width: max-content;
  font-family: "Yusei Magic", cursive;
  /* 320px幅でも「エアコンの」に被らないよう画面幅に追従させる */
  font-size: clamp(10px, 3.2vw, 13px);
  line-height: 1.6;
  color: var(--blue);
  background: var(--white);
  padding: 5px 10px;
  transform: rotate(-4deg);
  box-shadow: var(--shadow);
  animation: gentle-float 3s ease-in-out infinite;
}

/* 価格行（実績バッジ＋価格カード）
   デフォルトはバッジを価格カードの上に横並び、1200px以上でカードの右に横並び */
.price-row {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--sp-sm);
}

.hero-badges-row {
  display: flex;
  justify-content: center;
  gap: var(--sp-xs);
}

/* 背景写真に重なっても読めるよう半透明の白円を敷く */
.hero-badges-row li {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  padding: 4px;
}

.hero-badges-row img {
  display: block;
  width: clamp(84px, 25vw, 140px);
  height: auto;
}

/* 価格訴求カード */
/* 常に横一列で表示する。clamp()による可変サイズで、どの画面幅でも折り返さずに収める。
   モバイル（〜767px）は全幅カードを活かす急な拡大係数、768px以上は緩やかな係数（768pxブロックで上書き） */
.price-card {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1.8vw, 14px);
  width: 100%; /* モバイルは横幅いっぱい（768px以上でfit-content） */
  background: var(--white);
  border: 3px solid var(--yellow); /* イエローの縁取りで価格を目立たせる */
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(30, 60, 140, 0.18);
  padding: clamp(10px, 2.6vw, 20px) clamp(10px, 3vw, 24px);
}

.price-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 13vw, 96px);
  height: clamp(44px, 13vw, 96px);
  border-radius: 50%;
  background: var(--pink);
  color: var(--white);
  font-size: clamp(9px, 2.6vw, 15px);
  font-weight: 900;
  text-align: center;
  line-height: 1.4;
}

.price-before {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 700;
  white-space: nowrap;
}

.price-before-label {
  font-size: clamp(9px, 2.7vw, 15px);
}

.price-before-value {
  font-size: clamp(12px, 3.7vw, 24px);
}

.price-before-value del {
  color: var(--gray);
}

.price-arrow {
  color: var(--pink);
  font-size: clamp(11px, 3.2vw, 20px);
  line-height: 1;
}

.price-arrow::before {
  content: "▶";
}

.price-after {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

.price-after-value {
  font-size: clamp(20px, 7.4vw, 54px);
  font-weight: 900;
  color: var(--pink);
  line-height: 1.1;
  /* イエローのアンダーライン */
  background: linear-gradient(transparent 72%, var(--yellow) 72%);
  padding: 0 4px;
}

.price-unit {
  font-size: clamp(11px, 3.6vw, 27px);
}

.price-tax {
  font-size: clamp(9px, 2.6vw, 15px);
  font-weight: 700;
}

/* ============================================================
   1-1. 当社の強み（4ポイント）
============================================================ */
.strengths {
  position: relative;
  background: var(--white);
}

/* 症状チェックリストからこの見出しへ視線をつなぐ下向きの三角
   （参考: design/lp-design-20260801-01.jpg） */
.strengths::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: clamp(30px, 7.5vw, 62px) solid transparent;
  border-right: clamp(30px, 7.5vw, 62px) solid transparent;
  border-top: clamp(20px, 4.4vw, 36px) solid var(--navy);
}

/* このセクションは見出し内の強調にイエローの下線があるため、
   見出し下の共通バーは出さない */
.strengths .section-title::after {
  display: none;
}

.strengths-lead {
  font-size: clamp(14px, 1.4vw, 22px);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--sp-md);
  /* 文節で折り返し（対応ブラウザのみ）＋行長を揃える */
  word-break: auto-phrase;
  text-wrap: balance;
}

.strength-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* モバイルは2列 */
  gap: var(--sp-sm);
}

.strength-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--white);
  /* セクション背景が白のため、症状カードと同じ紺の枠線で輪郭を出す */
  border: 2px solid var(--navy);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: var(--sp-md) var(--sp-sm);
  text-align: center;
}

.strength-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
}

.strength-icon .icon {
  width: 28px;
  height: 28px;
}

.strength-title {
  /* 最長の「地域密着のプロが対応」(10文字)が2列カード内で折り返さないサイズに追従させる */
  font-size: clamp(12px, 3.4vw, 17px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.4;
}

.strength-sub {
  font-size: clamp(13px, 1.15vw, 18px);
  font-weight: 500;
  line-height: 1.6;
}

/* 赤文字の強調行：大きめサイズ＋イエローマーカーで目立たせる
   （1.5emだと768px前後で「追加料金なし！」等7文字が折り返すため1.4em） */
.strength-sub strong {
  display: inline-block;
  color: var(--red);
  font-size: 1.4em;
  font-weight: 900;
  line-height: 1.4;
  background: linear-gradient(transparent 68%, var(--yellow) 68%);
  padding: 0 2px;
  margin-bottom: 2px;
}

/* ============================================================
   2. 症状チェックリスト
============================================================ */
/* 「こんな症状はガス漏れのサインかも!?」は18文字と他の見出しより長いため、
   1行に収まる専用の可変サイズにする */
.symptoms-section .section-title {
  font-size: clamp(15px, 4.6vw, 52px);
}

/* 症状ごとのカード（参考: design/lp-design-20260801-01.jpg） */
.symptoms-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-sm);
}

/* カードが5枚で2列だと最後の1枚が余るため、横幅いっぱいに広げる */
.symptom-card:last-child {
  grid-column: 1 / -1;
}

.symptom-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 10px;
  overflow: hidden;
}

/* カード上部の紺帯。イエローの丸チェックを頭に置く */
.symptom-name {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--navy);
  color: var(--white);
  font-size: clamp(13px, 3.4vw, 17px);
  font-weight: 900;
  line-height: 1.35;
  padding: 8px 10px;
  /* 症状名が1行でも2行でも帯の高さを揃え、イラストの位置を横並びで一致させる */
  min-height: calc(2.7em + 16px);
}

.symptom-name::before {
  content: "✔";
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: 12px;
  line-height: 1;
}

.symptom-illust {
  padding: 12px 12px 0;
}

.symptom-illust svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 2列表示のとき、横幅いっぱいになる5枚目だけイラストが巨大にならないよう、
   他のカードと同程度の大きさに抑える */
@media (max-width: 767px) {
  .symptom-card:last-child .symptom-illust svg {
    max-width: 45%;
    margin: 0 auto;
  }
}

.symptom-desc {
  font-size: clamp(12px, 3vw, 15px);
  line-height: 1.6;
  text-align: center;
  padding: 10px 10px 14px;
  /* 説明文の行数が違ってもカード下端に揃える */
  margin-top: auto;
}

/* ============================================================
   2-2. 2027年問題とは？
============================================================ */
.problem-2027 {
  background: var(--bg-blue);
}

.problem-lead {
  max-width: 800px;
  margin: 0 auto var(--sp-md);
}

.problem-lead strong {
  color: var(--red);
}

.problem-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-sm);
}

.problem-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: var(--sp-md);
  text-align: center;
}

.problem-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
}

.problem-icon .icon {
  width: 28px;
  height: 28px;
}

.problem-title {
  font-size: clamp(19px, 1.7vw, 27px);
  font-weight: 700;
  color: var(--navy);
}

.problem-desc {
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.7;
  text-align: left;
}

.problem-note {
  font-size: 12px;
  color: var(--gray);
  text-align: center;
  margin-top: var(--sp-sm);
}

/* ============================================================
   3. 当社が選ばれる理由
============================================================ */
.reasons-section {
  /* 前後（紺CTA・薄青の流れ）とのコントラストを保つため白背景 */
  background: var(--white);
}

.reason-list {
  display: grid;
  grid-template-columns: 1fr; /* モバイルは1カラム */
  gap: var(--sp-md);
  counter-reset: reason;
}

.reason-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border-blue);
  border-radius: 12px;
  overflow: hidden;
  padding: 0 0 var(--sp-md);
  text-align: center;
  counter-increment: reason;
}

/* カード左上の連番（01〜04）でリズムを付ける */
.reason-card::before {
  content: "0" counter(reason);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: var(--navy);
  color: var(--white);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  padding: 10px 16px;
  border-radius: 0 0 12px 0;
}

.reason-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.reason-card:hover .reason-photo {
  transform: scale(1.06);
}

.reason-text {
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
  padding: 4px 20px 0;
}

.reason-desc {
  font-size: clamp(15px, 1.3vw, 20px);
  color: var(--gray);
  line-height: 1.7;
  text-align: left;
  padding: 0 20px;
}

/* ============================================================
   4. CTA（電話）
============================================================ */
.phone-cta {
  /* 紺2トーンの斜めストライプで勢いを出す */
  background: repeating-linear-gradient(
    -45deg,
    var(--navy) 0 16px,
    #234494 16px 32px
  );
}

.phone-cta .section-title {
  color: var(--white);
  margin-bottom: var(--sp-xs);
  /* SPでも「お困りの際は今すぐご相談ください！」(17文字)が1行に収まるサイズ */
  font-size: clamp(15px, 4.9vw, 25px);
}

.phone-cta-lead {
  color: var(--white);
  text-align: center;
  /* SPでも「ご相談・お見積りは無料。最短20分で〜」(約27文字)が1行に収まるサイズ */
  font-size: clamp(11px, 3.05vw, 15px);
  margin-bottom: var(--sp-md);
}

.phone-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
}

/* 電話ボタンの横幅を揃える */
.phone-cta-actions > * {
  width: min(100%, 440px);
}

/* 電話ボックス（紺背景に白で浮かせる） */
.phone-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--white);
  color: var(--red);
  border-radius: 12px;
  padding: 16px 32px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.phone-label {
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 700;
  color: var(--navy);
}

.phone-box .icon {
  width: 26px;
  height: 26px;
  margin-right: 8px;
}

.phone-number {
  display: inline-flex;
  align-items: center;
  white-space: nowrap; /* 番号の途中で折り返さない */
  font-size: clamp(34px, 3.2vw, 46px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.phone-hours {
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 500;
  color: var(--text);
}

/* CTAボタンを目立たせるパルス（波紋）アニメーション */
@keyframes cta-pulse {
  0% {
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.2),
      0 0 0 0 rgba(255, 255, 255, 0.55);
  }
  70% {
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.2),
      0 0 0 18px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.2),
      0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.phone-box {
  animation: cta-pulse 2s ease-out infinite;
}

/* ============================================================
   6. ご依頼の流れ
============================================================ */
.flow {
  background: var(--bg-blue);
}

.step-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: var(--sp-lg) var(--sp-md);
  text-align: center;
}

.step-number {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 18px;
  font-weight: 900;
}

.step-icon {
  color: var(--blue);
}

.step-icon .icon {
  width: 56px;
  height: 56px;
}

.step-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--navy);
}

.step-desc {
  font-size: 16px;
  line-height: 1.7;
  /* 文節で折り返し（対応ブラウザのみ）＋行長を揃えて語中折りの違和感を減らす */
  word-break: auto-phrase;
  text-wrap: balance;
}

/* ステップ間の矢印（SPでは下向き） */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 12px 10px 0 10px;
  border-color: var(--blue) transparent transparent transparent;
  z-index: 1;
}

/* ============================================================
   5-2. 対応エリア（茨城県全域）
============================================================ */
.area-section {
  background: var(--bg-blue);
}

/* セクション全体を紺の枠線で囲む（モバイルでも画面端に16pxの余白を確保） */
.area-section .inner {
  width: calc(100% - 32px);
  border: 2px solid var(--navy);
  border-radius: 16px;
  background: var(--white);
  padding: var(--sp-md) 16px;
}

/* 地図とコピーは常に横並び（左=地図 / 右=コピー） */
.area-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}

.area-map {
  width: min(28%, 280px);
  flex-shrink: 0;
  height: auto;
}

.area-copy {
  text-align: left;
}

.area-catch {
  font-size: clamp(22px, 4vw + 4px, 44px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.3;
}

.area-catch-em {
  color: var(--red);
}

.area-lead {
  font-size: clamp(17px, 2vw + 2px, 32px);
  font-weight: 700;
  margin-top: 4px;
}

/* 折り返しは語句の区切り（span単位）でのみ発生させる */
.area-lead span {
  display: inline-block;
}

.area-lead strong {
  color: var(--red);
  font-size: 1.3em;
  background: linear-gradient(transparent 68%, var(--yellow) 68%);
  padding: 0 2px;
}

.area-note {
  font-size: 12px;
  color: var(--gray);
  margin-top: 6px;
}

/* 市の写真は4枚を常に横一列に並べる */
.area-cities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 2vw, 20px);
}

.area-city {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* 写真は正円に切り抜く */
.area-city img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--shadow);
}

/* 市名は円の下に置く */
.area-city-name {
  color: var(--navy);
  font-size: clamp(12px, 3.2vw, 22px);
  font-weight: 900;
  text-align: center;
  line-height: 1.4;
}

.area-cities-note {
  text-align: center;
  font-size: clamp(18px, 1.7vw, 26px);
  font-weight: 700;
  margin-top: var(--sp-sm);
}

.area-cities-note strong {
  color: var(--navy);
  font-size: 1.2em;
}

/* ============================================================
   7. 会社概要
============================================================ */
.company-columns {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.company-row {
  display: flex;
  border-bottom: 1px solid var(--border-blue);
  padding: 12px 0;
}

.company-row dt {
  flex-shrink: 0;
  width: 110px;
  font-weight: 700;
  color: var(--navy);
}

/* 公式サイトへの外部リンク。長いURLでも狭い画面で折り返す */
.company-row dd a {
  color: var(--blue);
  font-weight: 700;
  word-break: break-all;
}

.company-map iframe {
  width: 100%;
  height: 240px;
  border: none;
  border-radius: 12px;
  display: block;
}

.btn-map {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  padding: 10px 24px;
  margin-top: var(--sp-sm);
}

.btn-map:hover {
  filter: brightness(1.15);
}

.copyright {
  font-size: 13px;
  color: var(--gray);
  text-align: center;
  margin-top: var(--sp-lg);
}

/* 会社名から公式サイトへ遷移できることが分かるよう下線を引く */
.copyright a {
  text-decoration: underline;
}

.copyright a:hover {
  color: var(--blue);
}

/* ============================================================
   8. フッター（サイトマップ）
============================================================ */
.site-footer {
  background: var(--bg-blue);
  border-top: 1px solid var(--border-blue);
  padding: var(--sp-lg) 0 var(--sp-md);
}


.sitemap-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px var(--sp-md);
}

.sitemap-list a {
  display: inline-block;
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  padding: 4px 0;
}

.sitemap-list a:hover {
  color: var(--blue);
  text-decoration: underline;
}

/* ============================================================
   9. 追従CTAバー
   design/button-design.jpg 準拠：受付中テキスト＋赤グラデーションの大型電話ボタン
============================================================ */
.cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 -4px 16px rgba(30, 60, 140, 0.18);
  padding: 8px 16px 12px;
  text-align: center;
}

/* 問い合わせ状況の通知（参考: design/count-design.png）。
   ダークグレーの帯＋右端に閉じるボタン */
.cta-bar-count {
  /* 白いバーの外（バーの上）に浮かせて置く */
  position: absolute;
  bottom: 100%;
  left: 16px;
  right: 16px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: calc(100% - 32px);
  padding: 8px 10px 8px 16px;
  border-radius: 8px;
  background: rgba(51, 51, 51, 0.92);
  color: var(--white);
  transition: opacity 0.8s ease;
}

/* スクロール中はフェードアウトさせて読み進めの邪魔をしない。
   スクロールが止まるとJSがこのクラスを外し、フェードインで戻る */
.cta-bar-count.is-scrolling {
  opacity: 0;
  pointer-events: none;
}

.cta-bar-count[hidden] {
  display: none;
}

.cta-bar-count-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}

.cta-bar-count-number {
  font-size: 1.25em;
  font-weight: 900;
  margin: 0 3px;
}

.cta-bar-count-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.cta-bar-note {
  color: var(--red);
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 6px;
}

/* 追従ボタンの点滅。明滅の幅は抑えめにして、視認性と不快感のバランスを取る
   （prefers-reduced-motion 指定時は先頭の共通ルールでanimationごと無効になる） */
@keyframes cta-bar-blink {
  0%,
  100% {
    opacity: 1;
    box-shadow:
      0 5px 0 #a81f30,
      0 0 0 rgba(226, 59, 80, 0);
  }
  50% {
    opacity: 0.72;
    box-shadow:
      0 5px 0 #a81f30,
      0 0 18px rgba(226, 59, 80, 0.85);
  }
}

.cta-bar-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 560px);
  margin: 0 auto;
  /* 上が明るく下が深い赤の立体グラデーション */
  background: linear-gradient(180deg, #ef5b64 0%, var(--red) 55%, #c52a3d 100%);
  border-radius: 14px;
  box-shadow: 0 5px 0 #a81f30;
  padding: 6px 18px 10px;
  text-decoration: none;
  animation: cta-bar-blink 1.4s ease-in-out infinite;
}

.cta-bar-catch {
  color: var(--yellow);
  font-size: clamp(13px, 3.3vw, 18px);
  font-weight: 900;
  line-height: 1.4;
}

.cta-bar-number {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: clamp(24px, 6.9vw, 40px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.cta-bar-number .icon {
  width: 0.7em;
  height: 0.7em;
  stroke-width: 2;
}

/* タップを促す指カーソル */
.cta-bar-hand {
  position: absolute;
  right: 10px;
  bottom: -8px;
  width: clamp(28px, 7.8vw, 42px);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

/* 支払い方法の注記（ご依頼の流れの下。クレジットカード対応を明示する）
   テキスト行＋カードロゴ行の2段を1つの枠に収める */
.flow-payment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: var(--sp-md) auto 0;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 24px;
  padding: 16px 24px;
}

.flow-payment-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: clamp(14px, 1.2vw, 19px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.6;
  text-align: center;
}

.flow-payment .icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--blue);
}

.flow-payment strong {
  font-weight: 900;
  background: linear-gradient(transparent 68%, var(--yellow) 68%);
  padding: 0 2px;
}

/* 対応カードブランドのロゴ列 */
.payment-brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 22px);
}

.payment-brands img {
  /* 縦横比が異なるロゴを高さ基準で揃える。横長ロゴはmax-widthで抑える */
  height: clamp(26px, 2.6vw, 34px);
  width: auto;
  max-width: clamp(96px, 10vw, 128px);
  object-fit: contain;
}

/* ============================================================
   5-1. 取り扱いメーカー
============================================================ */
.makers {
  /* 前後が薄青（流れ・お客様の声）のため白背景で挟む */
  background: var(--white);
}

.makers-lead {
  font-size: clamp(15px, 1.3vw, 20px);
  text-align: center;
  margin-bottom: var(--sp-md);
}

.maker-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* モバイルは2列（768px以上で5列） */
  gap: var(--sp-xs);
}

.maker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--border-blue);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: var(--sp-sm) 6px;
  text-align: center;
}

.maker-logo {
  /* 縦横比が異なるロゴを同じ高さの枠に収めて揃える */
  width: min(80%, 170px);
  height: clamp(32px, 3.4vw, 46px);
  object-fit: contain;
}

.maker-name {
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 900;
  color: var(--navy);
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.maker-name-ja {
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 500;
  color: var(--gray);
  line-height: 1.5;
}

.makers-note {
  font-size: clamp(12px, 1vw, 15px);
  color: var(--gray);
  line-height: 1.8;
  text-align: center;
  margin-top: var(--sp-md);
}

/* ============================================================
   5-2. お客様の声
============================================================ */
.voices {
  background: var(--bg-blue);
}

.voices-lead {
  font-size: clamp(15px, 1.3vw, 20px);
  text-align: center;
  margin-bottom: var(--sp-md);
  /* 文節で折り返し（対応ブラウザのみ）＋行長を揃えて語中折りの違和感を減らす */
  word-break: auto-phrase;
  text-wrap: balance;
}

/* Swiperのナビゲーション・ページネーションを置くための余白 */
.voice-slider {
  padding: 0 0 var(--sp-lg);
}

/* 常に横並び。スライド間の余白はSwiperのspaceBetweenが付ける */
.voice-list {
  display: flex;
  align-items: stretch;
}

/* Swiperを読み込めなかったときは横スクロールできる素のリストにする */
.voice-slider--fallback .voice-list {
  overflow-x: auto;
  gap: var(--sp-md);
}

.voice-slider--fallback .voice-card {
  flex: 0 0 min(80%, 340px);
}

.voice-card {
  position: relative;
  /* カードの高さはスライド内容に合わせる（Swiperの既定は等高） */
  height: auto;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: var(--sp-md);
  overflow: hidden;
}

/* ナビゲーション矢印・ページネーションの配色をLPに合わせる */
.voice-slider .swiper-button-prev,
.voice-slider .swiper-button-next {
  top: auto;
  bottom: 0;
  width: 32px;
  height: 32px;
  margin: 0;
  color: var(--navy);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.voice-slider .swiper-button-prev::after,
.voice-slider .swiper-button-next::after {
  font-size: 22px;
  font-weight: 900;
}

.voice-slider .swiper-button-prev {
  left: calc(50% - 90px);
}

.voice-slider .swiper-button-next {
  right: calc(50% - 90px);
}

.voice-slider .swiper-pagination {
  bottom: 6px;
}

.voice-slider .swiper-pagination-bullet {
  background: var(--navy);
  opacity: 0.3;
}

.voice-slider .swiper-pagination-bullet-active {
  opacity: 1;
}

/* 右上の引用符（薄い装飾。本文の可読性を妨げないよう背景色と同系にする） */
.voice-card::before {
  content: "”";
  position: absolute;
  top: 10px;
  right: 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 84px;
  line-height: 1;
  color: var(--bg-blue);
}

/* 症状タグ */
.voice-symptom {
  display: inline-block;
  position: relative; /* 引用符の上に出す */
  background: var(--navy);
  color: var(--white);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
  line-height: 1.6;
  border-radius: 999px;
  padding: 2px 14px;
  margin-bottom: 10px;
}

.voice-title {
  position: relative;
  font-size: clamp(18px, 1.6vw, 25px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.5;
  margin-bottom: 8px;
}

.voice-body {
  position: relative;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.9;
}

.voice-person {
  position: relative;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-blue);
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 700;
  color: var(--gray);
  text-align: right;
}

/* ============================================================
   5-3. よくあるご質問
============================================================ */
.faq {
  background: var(--white);
}

.faq-list {
  display: grid;
  gap: var(--sp-sm);
  max-width: 900px;
  margin: 0 auto;
}

/* details/summary で開閉。JSを使わずキーボード操作にも対応できる */
.faq-item {
  background: var(--white);
  border: 1px solid var(--border-blue);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.faq-q {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  list-style: none; /* 既定の三角マーカーを消す */
  padding: 14px 46px 14px 14px;
  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.6;
}

/* Safari の既定マーカーを消す */
.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q:hover {
  background: var(--bg-blue);
}

.faq-q:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: -3px;
}

/* 質問の「Q」アイコン */
.faq-q::before {
  content: "Q";
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

/* 右端の開閉インジケーター（閉=＋ / 開=−） */
.faq-q::after {
  content: "＋";
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--blue);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.faq-item[open] .faq-q::after {
  content: "−";
}

.faq-a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-blue);
  border-top: 1px dashed var(--border-blue);
  padding: 14px;
}

/* 回答の「A」アイコン */
.faq-a::before {
  content: "A";
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.faq-a p {
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.9;
}

/* 回答内の強調（黄マーカー＋紺太字） */
.faq-a strong {
  font-weight: 900;
  color: var(--navy);
  background: linear-gradient(transparent 68%, var(--yellow) 68%);
  padding: 0 2px;
}

/* ============================================================
   レスポンシブ（Tablet: 768px〜 / PC: 1024px〜）
============================================================ */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding-bottom: 214px;
  }

  /* SP専用改行を無効化 */
  .br-sp {
    display: none;
  }

  section {
    padding: 64px 0;
  }

  .section-title {
    margin-bottom: var(--sp-lg);
  }

  /* ヘッダー：左右paddingを画面幅に応じて広げ、テキストとボタンを両端から少し内側（中央寄り）に置く */
  .site-header {
    padding: 12px clamp(24px, 4vw, 56px);
  }

  .site-header-title {
    font-size: 16px;
  }

  .header-phone {
    display: flex;
  }

  .hero-inner {
    /* 右側は背景写真の人物にテキストが重ならないための余白（タブレットは狭め）。
       下paddingとmin-heightは控えめにしてファーストビューの高さを抑える。
       上はリボン帯の傾きで持ち上がる右端が切れない量を確保する */
    padding: 60px 280px 40px 16px;
    min-height: 540px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* バッジの配置基準を.hero（画面全幅）にするため、ここでは基準にしない */
    position: static;
  }

  .hero-area-badge {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    width: clamp(320px, 32vw, 480px);
    height: auto;
  }

  /* ヒーローテキスト：768px以上は画面幅に応じて拡大
     （ヒーローの高さを抑えるため、拡大係数・上限はやや控えめにしている） */
  .ribbon-group {
    --ribbon-width: clamp(400px, 37vw, 600px);
  }

  .hero-subcopy {
    font-size: clamp(19px, 2.2vw, 31px);
  }

  .hero-title-block {
    --line1-width: clamp(240px, 26vw, 460px);
  }
  .hero-title-line2 {
    font-size: clamp(42px, 6.8vw, 100px);
  }
  .hero-title-line3 {
    font-size: clamp(38px, 5.6vw, 82px);
  }

  .hero-note {
    font-size: clamp(18px, 1.8vw, 27px);
  }

  /* 価格カード */
  /* 価格カード：768px以上は右余白があるため緩やかな拡大係数に切り替え */
  .price-row {
    margin-top: var(--sp-sm);
  }

  .hero-badges-row img {
    /* 768pxで従来と同等 → 画面幅に応じてゆるやかに拡大 */
    width: clamp(120px, 16vw, 150px);
  }

  .price-card {
    width: fit-content;
    gap: clamp(8px, 1.4vw, 20px);
    padding: clamp(14px, 2vw, 24px) clamp(16px, 2.5vw, 32px);
  }

  .price-badge {
    width: clamp(54px, 7vw, 100px);
    height: clamp(54px, 7vw, 100px);
    font-size: clamp(11px, 1.5vw, 16px);
  }

  .price-before-label {
    font-size: clamp(11px, 1.6vw, 16px);
  }

  .price-before-value {
    font-size: clamp(14px, 2.2vw, 26px);
  }

  .price-arrow {
    font-size: clamp(12px, 2vw, 22px);
  }

  .price-after-value {
    font-size: clamp(24px, 5vw, 72px);
  }

  .price-unit {
    font-size: clamp(13px, 2.4vw, 34px);
  }

  .price-tax {
    font-size: clamp(10px, 1.5vw, 17px);
  }

  /* 当社の強み：4列横並び */
  .strength-list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-md);
  }

  .strength-card {
    padding: var(--sp-lg) var(--sp-sm);
  }

  .strength-icon {
    width: 64px;
    height: 64px;
  }

  /* 4列時も最長タイトル(10文字)が1行に収まるサイズ（inner上限1200pxではキャップ値で収まる） */
  .strength-title {
    font-size: clamp(13px, 1.7vw, 23px);
  }

  /* 症状チェックリスト：6分割グリッドに2列ぶんずつ置いて実質3列にする
     （1024px以上で参考デザインどおり5列） */
  .symptoms-list {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sp-md);
  }

  .symptom-card,
  .symptom-card:last-child {
    grid-column: span 2;
  }

  /* 2行目は2枚しかないため、開始位置を1列ぶんずらして中央に寄せる */
  .symptom-card:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .symptom-name {
    font-size: clamp(15px, 1.6vw, 19px);
    padding: 10px 12px;
    min-height: calc(2.7em + 20px);
  }

  .symptom-desc {
    font-size: clamp(13px, 1.2vw, 16px);
  }

  /* 2027年問題：3カード横並び */
  .problem-lead {
    text-align: center;
  }

  .problem-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-md);
  }

  .problem-card {
    padding: var(--sp-lg) var(--sp-md);
  }

  .problem-icon {
    width: 64px;
    height: 64px;
  }

  /* 選ばれる理由：タブレット幅は2カラム（1024px以上で4カラムに上書き） */
  .reason-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-lg);
  }

  .reason-photo {
    height: 280px;
  }

  .reason-text {
    padding: 8px 24px 0;
  }

  .reason-desc {
    padding: 0 24px;
  }

  /* CTA（電話） */
  .phone-cta .section-title {
    font-size: clamp(25px, 3.4vw, 52px);
  }

  .phone-cta-lead {
    font-size: clamp(15px, 1.6vw, 24px);
    margin-bottom: var(--sp-lg);
  }

  .phone-cta-actions {
    flex-direction: row;
    flex-wrap: wrap; /* タブレット幅で収まらない場合は折り返す */
    justify-content: center;
    align-items: stretch;
    gap: var(--sp-md);
  }

  .phone-box {
    padding: 18px 48px;
  }

  /* 流れ（タブレットは縦積みのまま幅を絞って中央寄せ。5列表示は1024px〜） */
  .step-list {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 取り扱いメーカー：5列×2段 */
  .maker-list {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-sm);
  }

  .maker-card {
    padding: var(--sp-md) 10px;
  }

  /* よくあるご質問：文字が大きくなるぶん余白も広げる */
  .faq-q {
    padding: 18px 56px 18px 20px;
  }

  .faq-a {
    padding: 18px 20px;
  }

  /* 対応エリア：2カラム構成（左=地図＋コピー / 右=市の写真4枚） */
  .area-section .inner {
    display: grid;
    /* 左=地図＋コピー / 右=市の写真4枚。地図を横並びにしたぶん左右を同幅にする */
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(24px, 4vw, 64px);
    align-items: center;
    padding: var(--sp-lg);
  }

  .area-section .section-title {
    grid-column: 1 / -1;
  }

  .area-main {
    grid-column: 1;
    grid-row: 2 / 4;
    margin-bottom: 0;
  }

  .area-map {
    width: min(30%, 170px);
  }

  .area-cities {
    grid-column: 2;
    grid-row: 2;
  }

  .area-cities-note {
    grid-column: 2;
    grid-row: 3;
    margin-top: var(--sp-sm);
  }

  /* 会社概要 */
  .company-columns {
    flex-direction: row;
    gap: var(--sp-lg);
  }

  .company-table {
    flex: 1;
  }

  .company-map {
    flex: 0 0 360px;
    text-align: center;
  }

  .company-map iframe {
    height: 280px;
  }

  /* 追従CTAバー */
  .cta-bar-count {
    padding: 10px 12px 10px 20px;
  }

  .cta-bar-count-text {
    font-size: clamp(14px, 1.2vw, 18px);
  }

  .cta-bar-count-close {
    width: 32px;
    height: 32px;
    font-size: 17px;
  }

  .cta-bar-note {
    font-size: clamp(17px, 1.5vw, 24px);
  }

  .cta-bar-catch {
    font-size: clamp(16px, 1.5vw, 23px);
  }

  .cta-bar-number {
    font-size: clamp(33px, 3.1vw, 48px);
  }

  .cta-bar-btn {
    padding: 8px 22px 12px;
  }
}

/* ============================================================
   レスポンシブ（PC: 1024px〜）
============================================================ */
@media (min-width: 1024px) {
  /* ヘッダー：広い画面ほど左右padding を増やし、両端寄せから少し中央寄せに見せる */
  .site-header {
    padding: 12px clamp(40px, 6vw, 120px);
  }

  .site-header-title {
    font-size: 18px;
  }

  /* ヒーロー（テキストサイズは768pxブロックのclamp可変に一本化） */
  .hero-inner {
    padding-right: 300px;
  }

  /* CTA：文字拡大に合わせてボックス幅も拡大 */
  .phone-cta-actions {
    gap: var(--sp-lg);
  }

  .phone-cta-actions > * {
    width: min(100%, 500px);
  }

  /* 強調を1.12倍にしたぶん、この見出しだけ最大サイズを少し下げて
     1400px超の画面でも1行に収める */
  .strengths .section-title {
    font-size: clamp(25px, 3.4vw, 50px);
  }

  /* 症状チェックリスト：参考デザインどおり5枚を横一列に */
  .symptoms-list {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-sm);
  }

  /* 1行に収まるので、3列時の2列ぶんspan・中央寄せは解除する */
  .symptom-card,
  .symptom-card:last-child,
  .symptom-card:nth-child(4) {
    grid-column: auto;
  }

  /* 選ばれる理由：4列横並び。
     1カラムあたりが細くなるため、写真は固定高さをやめて4:3の比率で追従させる */
  .reason-list {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2.2vw, 32px);
  }

  .reason-photo {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .reason-text {
    font-size: clamp(19px, 1.8vw, 26px);
    padding: 8px 16px 0;
  }

  .reason-desc {
    font-size: clamp(14px, 1.05vw, 16px);
    padding: 0 16px;
  }

  /* お客様の声の表示枚数はSwiperのbreakpointsで制御している（js/main.js） */

  /* 流れ（横並び5列・右向き矢印） */
  .step-list {
    max-width: none;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-sm);
  }

  .step {
    padding: var(--sp-lg) var(--sp-sm);
  }

  .step-title {
    /* 5列時にカード幅へ収まるよう可変（1024pxで17px→1440pxで20px） */
    font-size: clamp(17px, 1.6vw, 23px);
  }

  .step-desc {
    font-size: clamp(14px, 1.1vw, 17px);
  }

  .step:not(:last-child)::after {
    bottom: auto;
    top: 50%;
    left: auto;
    right: -14px;
    transform: translateY(-50%);
    border-width: 10px 0 10px 12px;
    border-color: transparent transparent transparent var(--blue);
  }

  /* 会社概要 */
  .company-map {
    flex-basis: 420px;
  }
}

/* ============================================================
   プライバシーポリシーページ
============================================================ */
.policy-body {
  padding-bottom: 0; /* 追従CTAバーがないため下余白は不要 */
  background: var(--bg-blue);
}

.policy {
  padding: 40px 0 64px;
}

/* 本文は白カードに載せて読みやすくする */
.policy .inner {
  max-width: 860px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 32px 20px;
}

@media (min-width: 768px) {
  .policy .inner {
    padding: 48px 56px;
  }
}

.policy .section-title {
  margin-bottom: var(--sp-lg);
}

.policy h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  border-left: 4px solid var(--blue);
  padding-left: 12px;
  margin: var(--sp-lg) 0 var(--sp-xs);
}

.policy p,
.policy li {
  font-size: 15px;
  line-height: 1.9;
}

.policy ul {
  list-style: disc;
  padding-left: 1.6em;
}

.policy ol {
  list-style: decimal;
  padding-left: 1.6em;
}

/* 特定商取引法に基づく表記の項目一覧（SPは縦積み、768px以上は項目名と内容を横並び） */
.policy-table {
  margin-top: var(--sp-md);
  border-top: 1px solid var(--border-blue);
}

.policy-table > div {
  border-bottom: 1px solid var(--border-blue);
  padding: 14px 0;
}

.policy-table dt {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.policy-table dd {
  font-size: 15px;
  line-height: 1.9;
}

.policy-table a {
  color: var(--blue);
  font-weight: 700;
}

@media (min-width: 768px) {
  .policy-table > div {
    display: flex;
    gap: var(--sp-md);
  }

  .policy-table dt {
    flex: 0 0 220px;
  }
}

.policy-date {
  margin-top: var(--sp-lg);
  text-align: right;
  color: var(--gray);
  font-size: 14px;
}

/* 制定日は本文の締めとして右下に小さく置く */
.policy-date {
  margin-top: var(--sp-lg);
  text-align: right;
  color: var(--gray);
}

.policy-back {
  margin-top: var(--sp-md);
  text-align: center;
}

.policy-back a {
  color: var(--blue);
  font-weight: 700;
}

.site-header-title a {
  text-decoration: none;
}

/* ============================================================
   レスポンシブ（価格行: 1200px〜はバッジを価格カードの右に）
============================================================ */
@media (min-width: 1200px) {
  /* 追従CTAバーは文字サイズが画面幅に追従して大きくなるため、下余白も広げる */
  body {
    padding-bottom: 246px;
  }

  .price-row {
    flex-direction: row;
    justify-content: flex-start;
    margin-right: -280px; /* 背景写真の領域までバッジを伸ばす */
  }

  /* コンテンツ幅（.hero-inner 1320px）を広げたぶん、実績バッジを大きく表示する */
  .hero-badges-row img {
    width: clamp(150px, 13vw, 185px);
  }

  /* 価格カードもひと回り大きくする（バッジと合わせて1200px幅でも収まる範囲）*/
  .price-card {
    gap: clamp(8px, 1.2vw, 18px);
    padding: clamp(14px, 1.8vw, 24px) clamp(16px, 2.2vw, 30px);
  }

  .price-badge {
    width: clamp(64px, 7vw, 104px);
    height: clamp(64px, 7vw, 104px);
    font-size: clamp(12px, 1.5vw, 17px);
  }

  .price-before-label {
    font-size: clamp(11px, 1.5vw, 16px);
  }

  .price-before-value {
    font-size: clamp(14px, 2.1vw, 26px);
  }

  .price-arrow {
    font-size: clamp(12px, 1.9vw, 22px);
  }

  .price-after-value {
    font-size: clamp(26px, 4.6vw, 68px);
  }

  .price-unit {
    font-size: clamp(13px, 2.2vw, 32px);
  }

  .price-tax {
    font-size: clamp(10px, 1.4vw, 17px);
  }
}

/* ============================================================
   レスポンシブ（グローバルメニュー: 1行に収まる幅のみ横並び表示）
   これより狭い幅ではサイト名・電話CTAと1行に並べられないため、
   ハンバーガーメニューに切り替える
============================================================ */
@media (min-width: 1440px) {
  /* メニューを1行に収めるぶん、ヘッダーの左右paddingは詰める */
  .site-header {
    padding: 12px clamp(24px, 2.5vw, 40px);
  }

  .global-nav {
    display: block;
  }

  .nav-toggle {
    display: none;
  }

  /* サイト名・メニュー・電話ボタンの3つを space-between で均等に配置する */
  .site-header-cta {
    margin-left: 0;
  }
}