/* ========================================
   v2 ベース（リセット＋画像プレースホルダ＋共通CTA）
   ======================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-jp);
  color: var(--c-charcoal);
  background: var(--bg-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: var(--cta-bar-h); /* 追従バーの逃げ */
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }

/* ========================================
   画像プレースホルダ（チェック柄）
   画像化予定・未書き出しの画像枠。data-img にファイル名を入れるとラベル表示
   ======================================== */
.ph {
  position: relative;
  overflow: hidden;
  background-color: #fdfdfd;
  background-image:
    linear-gradient(45deg, #e4e4e4 25%, transparent 25%, transparent 75%, #e4e4e4 75%),
    linear-gradient(45deg, #e4e4e4 25%, transparent 25%, transparent 75%, #e4e4e4 75%);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
}
.ph::after {
  content: attr(data-img);
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 1;
  max-width: calc(100% - 12px);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  color: #555;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
}
.ph--circle { border-radius: 50%; }
.ph--circle::after { left: 50%; bottom: 8px; transform: translateX(-50%); }
.ph--nolabel::after { display: none; } /* 小さすぎてラベルが入らない枠用 */

/* セクション背景が写真のときの控えめチェック柄（テキストが読めるよう低コントラスト） */
.ph-bg {
  position: relative;
  background-color: #f5f7f9;
  background-image:
    linear-gradient(45deg, #e9edf1 25%, transparent 25%, transparent 75%, #e9edf1 75%),
    linear-gradient(45deg, #e9edf1 25%, transparent 25%, transparent 75%, #e9edf1 75%);
  background-size: 36px 36px;
  background-position: 0 0, 18px 18px;
}
.ph-bg--blue {
  background-color: var(--c-primary);
  background-image:
    linear-gradient(45deg, #2b8ccb 25%, transparent 25%, transparent 75%, #2b8ccb 75%),
    linear-gradient(45deg, #2b8ccb 25%, transparent 25%, transparent 75%, #2b8ccb 75%);
}
.ph-bg--navy {
  background-color: var(--c-navy);
  background-image:
    linear-gradient(45deg, #12457a 25%, transparent 25%, transparent 75%, #12457a 75%),
    linear-gradient(45deg, #12457a 25%, transparent 25%, transparent 75%, #12457a 75%);
}
.ph-bg::before {
  content: attr(data-img);
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.85);
  color: #555;
  font-size: 9px;
  line-height: 1.4;
}

/* ========================================
   共通CTA（2026-08-01 Figma 2528:857／2349:943 で S01・S04 を統一）
   ・電話CTA ＝ ヒーロー版に統一（白枠2px・アイコン・ラベル-8度skew）
   ・フォームCTA ＝ S04版に統一（枠線なし・アイコンなし・テキストのみ）
   ======================================== */
.cta-stack {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 統一 2026-07-31（旧15） */
  width: 100%;
}
/* CTA直上のリード行（Figma 2925:314）＝左右に斜線を添えた紺文字 */
.cta-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* Figma 2925:314 itemSpacing */
  font-size: 16px;
  font-weight: 700;
  line-height: 19px; /* Figma 2925:311 実測h19 */
  color: var(--c-navy);
}
/* Figma Line100/101：長さ20px・1px・黒。水平線を±60度回転＝垂直線を∓30度回転と同じ傾き */
.cta-lead::before,
.cta-lead::after {
  content: "";
  flex-shrink: 0;
  width: 1px;
  height: 20px;
  background: #000;
}
.cta-lead::before { transform: rotate(-30deg); } /* ＼ */
.cta-lead::after { transform: rotate(30deg); }   /* ／ */

.cta-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: var(--shadow-card); /* 2026-08-12：シャドウ統一（旧0 4px 10px） */
  color: #fff;
  text-align: center;
}
/* CTAアイコン：白・24px（Figma 2918:200）。※追従バーには入れない
   枠線が無くなったので left24 ＝ 外周から24px（Figma x23.79） */
.cta-pill-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  /* 縦中央＋Figma 2918:200 の回転。
     ⚠️Figmaのrotationは反時計回りが正、CSSのrotate()は時計回りが正なので符号が反転する
     （Figma rotation:-5 ＝ 時計回り5度 ＝ CSS rotate(5deg)） */
  transform: translateY(-50%) rotate(5deg);
  width: 24px;
  height: auto;
  flex-shrink: 0;
}
.cta-pill-icon--form { transform: translateY(-50%); } /* フォーム側は回転なし */
/* 電話CTA（Figma 2159:48・2026-08-02再取得）：⚠️白枠を削除・高さ64px固定
   p(8,20,12,20)＋gap8。内容＝ラベル12＋gap8＋番号20＝40px */
.cta-pill--tel {
  height: 64px;
  background: var(--c-cta-tel); /* 2026-08-12：電話CTAは#FF5C5C */
  gap: 8px; /* ラベル↔番号（アイコンはabsoluteのためflex対象外） */
  padding: 8px 20px 12px;
}
/* フォームCTA（Figma 2159:51・2026-08-02再取得）：⚠️白枠を削除・高さ64px固定（旧52px） */
.cta-pill--form {
  height: 64px;
  background: var(--c-primary); /* Figma 2026-07-29：青（旧緑・追従バーのみ緑を維持） */
  padding: 14px 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}
.cta-pill-label {
  font-size: 12px; /* Figma 2918:198（2026-08-02・旧16） */
  line-height: 12px; /* 1行=100% */
  font-weight: 700;
  transform: skewX(-8deg); /* 2026-08-01ユーザー指定（Figmaにはないが維持） */
}
.cta-pill-number {
  font-size: 24px; /* Figma 2159:50（2026-08-02・旧28） */
  font-weight: 900;
  line-height: 20px; /* Figma実測h20（数字のみで下降部がないため字面に合わせる） */
}

/* スクリーンリーダー専用（画像化した見出しの代替テキスト用・2026-07-30） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ※CTA直上のマイクロコピー（.cta-micro）は 2026-08-01 に廃止。
   S01＝ヒーローのテキストブロック（.hero-cta-intro）、S04＝斜線付きリード行（.cta-lead）へ置換 */