@charset "UTF-8";

/* =========================================================
   common.css ── FP専用ホームページ制作サービス LP
   --------------------------------------------------------
   common集約方式（CLAUDE.md §5-2）: 1ページ完結LPのため、
   このLPで使うスタイルだけを本ファイルに集約。
   未使用の汎用機構（ドロワー/モーダル/スライダー/Google Map/
   ページトップ等）と未使用トークンは削除済み。
   基準幅 1600px / 1rem = 10px（base.css vw係数 0.625vw）
   --------------------------------------------------------
   1. デザイントークン（複数箇所で使う値のみ・単一使用は直書き §8-1）
   2. ベース / コンテナ / 共通見出し / 共通パターン
   3. ヘッダー
   4. アコーディオン機構（FAQで使用）
   5. LP 各セクション
   6. レスポンシブ（SP ≤767px）
   ========================================================= */

/* =====================================================================
   1. デザイントークン
===================================================================== */

:root {
  --c-main: #1e4fbf;
  /* ブランドブルー */
  --c-main-l: #def2ff;
  /* 極薄ブルー（セクション背景） */
  --c-accent: #ea5769;
  /* CTAボタン */
  --c-yellow: #ffe300;
  /* ハイライト */
  --c-text: #000;
  /* 本文 */

  --f-num: "Lato", sans-serif;
  /* 数字・英字 */
}

/* =====================================================================
   2. ベース / コンテナ / 共通見出し / 共通パターン
===================================================================== */

/* 横スクロール抑止は root で（body では fixed 子を止められないため） */
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  background: #fff;
  color: var(--c-text);
  font-family: "Noto Sans JP", sans-serif;
  /* 本文既定。カード本文・FAQ回答等はこの継承に任せ、各クラスで再指定しない */
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.875;
  padding-top: 0;
  /* ヘッダーを sticky に変更したため、本文の押し下げは不要 */
}

main {
  overflow: hidden;
  /* 右へ抜けるMV画像のはみ出しを抑止 */
}

section {
  position: relative;
  padding: 10rem 0;
}

/* アンカー移動時に固定ヘッダー分を空ける */
section[id] {
  scroll-margin-top: 7rem;
}

/* コンテナ（中央寄せ・基準コンテンツ幅） */
.wrap {
  position: relative;
  width: 100%;
  max-width: 140rem;
  margin: 0 auto;
}

/* 背景色ユーティリティ（HTMLでセクション背景を切替） */
.bg-main {
  background: var(--c-main);
}

.bg-main-l {
  background: var(--c-main-l);
}

/* ---------------------------------------------------------------------
   セクション見出し（共通コンポーネント）
   構造: .sec-head > .sec-head__sm（小見出し＋下チェブロン線） [＋ .sec-head__lg]
   - チェブロン線は SVG ではなく CSS（::after の水平線 ＋ ::before の下向き山形）
   - 線幅は __sm を inline-block にして「テキスト幅に追従」させる
--------------------------------------------------------------------- */
.sec-head {
  text-align: center;
  /* 見出し→直後コンテンツの縦余白はここで一元管理（下の要素に margin-top を書かない） */
  margin-bottom: 6rem;
}

/* 小見出し単独（voice/faq等・__lg なし）の時は詰める */
.sec-head:not(:has(.sec-head__lg)) {
  margin-bottom: 3rem;
}

.sec-head__sm {
  position: relative;
  display: inline-block;
  padding-bottom: 2.5rem;
  /* 線＋山形のぶん */
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* 小見出し→大見出しの間隔。単独使用時は .sec-head の margin-bottom に任せる */
.sec-head__sm:not(:last-child) {
  margin-bottom: 2rem;
}

.sec-head__sm::after {
  /* 水平線（中央に隙間／幅＝テキスト幅） */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  height: 0.3rem;
  background: linear-gradient(to right,
      currentColor 0 calc(50% - 1.4rem),
      transparent calc(50% - 1.4rem) calc(50% + 1.4rem),
      currentColor calc(50% + 1.4rem) 100%);
}

/* 中央の下向き山形（∨）＋左右スタブ：線と同じ y帯・同じ太さの SVG を
   隙間に重ねるので、線端とスタブ端が同一の水平帯となり継ぎ目が出ない。
   ∨を回転borderで近似すると頂点が線に届かず隙間化するため SVG で正確に描く（§9-2） */
.sec-head__sm::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3rem;
  height: 1.8rem;
  transform: translateX(-50%);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M0 4H8L15 13L22 4H30' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M0 4H8L15 13L22 4H30' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.sec-head__lg {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.05em;
}

/* 黄色マーカー（見出し内の強調） */
.mark-y {
  background-image: linear-gradient(var(--c-yellow), var(--c-yellow));
  background-repeat: no-repeat;
  background-size: 100% 5rem;
  background-position: 0 75%;
  padding-left: 0.4rem;
  padding-right: 0.2rem;
}

/* =====================================================================
   3. ヘッダー（固定配置の機構。common.js 連動なし）
===================================================================== */

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
}

/* WordPressログイン時の管理バーと固定ヘッダーの重なりを回避 */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* =====================================================================
   4. アコーディオン（JS連動・max-height 機構 / 構造は CLAUDE.md §4-3）
   .js-acc-body 自体には padding を付けない（max-height アニメ専用）
===================================================================== */

.js-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}

/* =====================================================================
   5. LP 各セクション
===================================================================== */

/* 縦リズムは各 .sec-* の padding で個別指定（section{padding} を上書き）。
   広い section{padding:0} は各 .sec-* を out-spec するため使わない（§4-2） */
.c-main {
  color: var(--c-main);
}

/* ---------- 共通パターン（複数セクションで同一デザインのものはここに集約） ---------- */

/* 青枠カード（白地・角丸1rem） */
.mv-card,
.worry-card,
.step-card,
.option-card,
.voice-card {
  border: 0.2rem solid var(--c-main);
  border-radius: 1rem;
  background: #fff;
}

.worry-card,
.step-card,
.option-card {
  text-align: center;
}

.worry-card,
.step-card {
  width: 32.7rem;
}

/* 青ベタパネル（チェックシート・料金）。単色領域として color は領域に1回（§8-2） */
.check-panel,
.price-panel {
  border-radius: 1rem;
  background: var(--c-main);
  color: #fff;
}

/* カード内見出し（青・2.8rem） */
.worry-card__tit,
.step-card__tit {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-main);
}

/* カード内本文（サイズ・行間は body 既定を継承。見出しとの間隔だけ持つ） */
.worry-card__body,
.step-card__body,
.option-card__body {
  margin-top: 1rem;
}

/* グラデーションのピルラベル（STEP番号・オプション名） */
.step-card__label,
.option-card__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 5rem;
  /* ラベルのピル高さ：テキスト可変でも潰れないよう min-height */
  border-radius: 100px;
  background: linear-gradient(134.5deg, #416fe4 49.71%, var(--c-main) 49.71%);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* カード列：固定幅カード × space-between 型 */
.worry-list,
.step-list,
.sample-list {
  display: flex;
  justify-content: space-between;
}

/* カード列：均等fillカード × gap 型 */
.option-list,
.voice-list,
.stats-list {
  display: flex;
  gap: 3rem;
}

/* 共通CTAボタン（pink pill） */
.btn-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70rem;
  max-width: 100%;
  min-height: 13rem;
  /* テキストが折り返しても潰れないよう固定 height ではなく min-height */
  margin: 0 auto;
  border-radius: 100px;
  background: var(--c-accent);
  color: #fff;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.2);
}

/* 右端の矢印バッジ — 白い丸（::before）＋ アクセント色シェブロン（::after） */
.btn-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 3rem;
  width: 5rem;
  height: 5rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  transition: right .3s;
}

.btn-cta::after {
  content: "";
  position: absolute;
  /* 丸バッジ中心（右端から 3rem + 5rem/2 = 5.5rem）に上下左右中央で載せる。
     box中心=5.5rem→right=5.5-0.7=4.8rem。シェブロンは右へ寄る形なので
     光学的に 0.2rem 左へ足して中央に見せる */
  top: 50%;
  right: 5rem;
  width: 1.4rem;
  height: 1.4rem;
  border-top: 0.4rem solid var(--c-accent);
  border-right: 0.4rem solid var(--c-accent);
  transform: translateY(-50%) rotate(45deg);
  transition: right .3s;
}

@media (hover: hover) and (pointer: fine) {
  .btn-cta:hover {
    opacity: .9;
  }

  .btn-cta:hover::before {
    right: 2.2rem;
  }

  .btn-cta:hover::after {
    right: 4.2rem;
  }
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  height: 7rem;
  background: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 3rem;
}

.site-logo {
  display: flex;
  align-items: baseline;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  font-size: 2.2rem;

}

.site-logo__fp {
  font-family: var(--f-num);
  font-weight: 900;
  color: var(--c-main);
}

.site-logo__sub {
  color: var(--c-main);
}

/* グローバルナビ：ロゴの右へ寄せる（項目数が多いので間隔・文字を詰める） */
.gnavi {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-left: auto;
}

.gnavi__list {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.gnavi__list a {
  font-weight: 700;
  white-space: nowrap;
  transition: color .3s;
}

.gnavi__cta {
  display: inline-flex;
  align-items: center;
  padding: 1rem 3rem;
  border-radius: 100px;
  background: var(--c-accent);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity .3s;
}

@media (hover: hover) and (pointer: fine) {
  .gnavi__list a:hover {
    color: var(--c-main);
  }

  .gnavi__cta:hover {
    opacity: .85;
  }
}

/* =========================================================
   MV / HERO
   ========================================================= */
.sec-mv {
  position: relative;
  padding: 0;
  overflow: hidden;
  /* 上=淡色／下=青 の2トーン背景（境界 61rem＝Figma pale h610＋上70）。
     高さは内容で決まり青は下を埋める＝固定 height にしない（CLAUDE.md レイアウト原則） */
  background: linear-gradient(to bottom, var(--c-main-l) 0 61rem, var(--c-main) 61rem);
}

/* 左＝コピー列／右＝モックアップ画像 の分割（フローで組む＝flex）。コピーは左 x100 起点 */
.sec-mv__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  max-width: 160rem;
  margin: 0 auto;
  padding: 5rem 10rem;
}

.sec-mv__copy {
  flex: none;
  width: 70rem;
  max-width: 100%;
}

/* speech-bubble badge（青地なので color は領域に1回） */
.mv-badge {
  width: 100%;
  border-radius: 1rem;
  background: var(--c-main);
  color: #fff;
  text-align: center;
  padding: 2.5rem 2rem 2rem;
  margin-bottom: 0;
}

.mv-badge__txt {
  font-size: 2.8rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1em;
}

.mv-badge__num {
  color: var(--c-yellow);
  font-size: 5.5rem;
  vertical-align: -0.05em;
}

.mv-badge__y {
  color: var(--c-yellow);
}

/* 圏点（黄ドット）をチェックシートの上に。inline の padding-top は行を動かさず
   背景の描画領域だけ上へ広げられるので、位置指定なしで文字上にドットを置ける（§9-1） */
.mv-badge__dot {
  padding-top: 0.3rem;
  background-image: radial-gradient(circle, var(--c-yellow) 0.3rem, transparent 0.32rem);
  background-size: 3rem 0.6rem;
  background-repeat: repeat-x;
  background-position: center top;
}

/* 下向き三角（吹き出しのしっぽ）＝フロー要素として中央配置 */
.mv-badge__tail {
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 1.25rem solid transparent;
  border-right: 1.25rem solid transparent;
  border-top: 2rem solid var(--c-main);
}

/* headline */
.mv-tit {
  margin-top: 1rem;
  font-weight: 700;
  text-align: left;
  /* 見出しは左寄せ（badge/lead/cards は各自で中央・フル幅） */
}

.mv-tit__l1 {
  display: block;
  font-size: 5.8rem;
  line-height: 1.19;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mv-tit__l2 {
  display: block;
  margin-top: 1rem;
  font-size: 7.3rem;
  line-height: 1;
  white-space: nowrap;
}

.mv-tit__big {
  font-size: 11rem;
  vertical-align: -0.07em;
  padding: 0 0.2rem;
}

.mv-mark {
  background-image: linear-gradient(var(--c-yellow), var(--c-yellow));
  background-repeat: no-repeat;
  background-size: 100% 8rem;
  /* 行ボックス中央(50%)だと和文インクが上寄りで上の隙間が大きくなるため、
     インク中央に合わせて少し下げる（フォント由来＝拡縮しても比率一定） */
  background-position: 0 71%;
  padding: 0 0.3rem;
}

/* lead with diagonal slashes（\ … /） */
.mv-lead {
  margin-top: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
}

.mv-lead__txt {
  font-size: 2.8rem;
  font-weight: 700;
  white-space: nowrap;
  margin-bottom: 0.5rem;
}

.mv-lead__slash {
  flex: none;
  width: 0.2rem;
  height: 4.4rem;
  background: var(--c-main);
}

.mv-lead__slash--l {
  transform: rotate(-30deg);
}

.mv-lead__slash--r {
  transform: rotate(30deg);
}

/* 不要カード ×3（70rem 内で space-between） */
/* カードは青帯(.sec-mv__blue)の最初の子。negative margin で淡色側へ引き上げ、
   下端だけ青帯にかぶせる → カード間の gap から下だけ青がのぞく（position 不使用） */
.mv-cards {
  display: flex;
  justify-content: space-between;
  width: 70rem;
  max-width: 100%;
  margin: 0 auto;
}

.mv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22.6rem;
  /* 高さは内容＋paddingで決める（行内は align-items:stretch で自動的に揃う） */
  padding: 3rem 0 2.5rem;
}

.mv-card__tit {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.23;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
  text-align: center;
}

/* 「不要」は折り返しで分断させない（…作成／不要 で改行） */
.mv-card__tit .c-main {
  white-space: nowrap;
}

/* X 形のうすい下敷きを背景に、アイコンを中央に重ねる（position 不使用） */
.mv-card__ic {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 9rem;
  height: 9rem;
  margin-top: 0.8rem;
}

.mv-card__ic img {
  width: 7rem;
  height: auto;
}

/* ヒーローのモックアップ画像：右側でバンド・CTAに重なる装飾オーバーレイ
   → 重ね合わせが本質なので absolute は例外として可（CLAUDE.md レイアウト原則） */
.sec-mv__img {
  /* 右カラム。基準幅で収まらない時は縮む（min-width:0） */
  flex: 0 1 75rem;
  min-width: 0;
  height: auto;
  margin-right: -10rem;
  margin-top: -5rem;

}

/* CTA帯（青エリア内・中央）。画像オーバーレイより前面に */
.sec-mv__cta {
  position: relative;
  padding: 1rem 0 6rem;
  text-align: center;
}

.sec-mv__note {
  margin-top: 4.2rem;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* =========================================================
   悩み WORRIES
   ========================================================= */
.sec-worry {
  padding-bottom: 0;
  position: relative;
  z-index: 1;
  margin-bottom: -5rem;
}

.worry-card {
  /* 高さは内容＋paddingで決める（行内は align-items:stretch で自動的に揃う）。
     上3.8rem＝Figma アイコン上端40px−border2px。下paddingで総高 36.8rem に合わせる */
  padding: 3.8rem 1.5rem 3.3rem;
}

/* アイコンは通常フロー（中央寄せ）。内部の ring/glyph/spark の重ねだけ
   この相対ボックス内で行う（ページ/カードのレイアウトには absolute を使わない） */
.worry-ic {
  position: relative;
  display: block;
  width: 10rem;
  height: 10rem;
  margin: 0 auto 2rem;
}

.worry-ic img {
  /* ring/glyph/spark をアイコン内で重ねる（重ね合わせが本質・親 .worry-ic 基準）→ absolute は例外として可 */
  position: absolute;
}

.worry-ic__ring {
  left: 0;
  top: 0;
  width: 10rem;
  height: 10rem;
}

.worry-ic__spark {
  right: -1rem;
  top: -2rem;
  width: 2.6rem;
  height: 3rem;
}

/* グリフは円アイコンの上下左右中央（4種共通）。サイズだけ各グリフ固有 */
.worry-ic__g {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.worry-ic__g--w1 {
  width: 5rem;
  height: 4.3rem;
}

.worry-ic__g--w2 {
  width: 5rem;
  height: 4.3rem;
}

.worry-ic__g--w3 {
  width: 5.5rem;
  height: 5.3rem;
}

.worry-ic__g--w4 {
  width: 5.5rem;
  height: 5.5rem;
}

/* 見出し・本文の書式は共通パターン（.worry-card__tit / __body）で指定済み */

/* =========================================================
   だから WHY（薄ブルー帯）
   ========================================================= */
/* イラストはフロー（flex）で本文の左に置く（absolute レイアウトを使わない） */
.sec-why {
  position: relative;
  z-index: 0;
  padding-top: 13rem;
  padding-bottom: 0;
}

.sec-why__inner {
  position: relative;
  padding-bottom: 10rem;
}

.sec-why__txt {
  text-align: center;
}

.why-tit {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.76;
  letter-spacing: 0.05em;
  color: var(--c-main);
  text-align: center;
}

.why-lead {
  margin-top: 1.5rem;
  font-size: 2rem;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
}

/* =========================================================
   STEP
   ========================================================= */
.sec-step {
  padding-bottom: 0;
  margin-bottom: -5rem;
  position: relative;
  z-index: 1;
}

.step-card {
  position: relative;
  /* relative はカード間の右向き矢印(::after)の基準にのみ使用 */
  /* 高さは内容＋paddingで決める（行内は align-items:stretch で自動的に揃う） */
  padding: 2rem 1.5rem 4.6rem;
}

.step-card:not(:last-child)::after {
  /* 右向き矢印 */
  content: "";
  position: absolute;
  right: -2.8rem;
  top: 14.9rem;
  border-top: 2rem solid transparent;
  border-bottom: 2rem solid transparent;
  border-left: 2rem solid var(--c-main);
}

/* ラベルの書式は共通パターン（.step-card__label / .option-card__label）で指定済み */

/* アイコンは4種で横幅が異なる（48/70/60/81px）ため高さ6rem基準・幅は比率追従 */
.step-card__ic {
  display: flex;
  justify-content: center;
  height: 6rem;
  margin: 3rem auto 0;
}

.step-card__ic img {
  width: auto;
  height: 100%;
}

.step-card__tit {
  margin-top: 2rem;
}

/* =========================================================
   チェックシート CHECKSHEET + 完成イメージ
   ========================================================= */
/* パネル上端 y3009（前セクション step 終端 ≈ y2909） */
.sec-check {
  padding-top: 15rem;
}

.check-panel {
  position: relative;
  padding: 6rem;
}

/* 見出しはリストの上（リスト先頭の上に余白） */
.check-panel__tit {
  margin-bottom: 2rem;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.check-panel__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.check-panel__left {
  width: 55rem;
  text-align: center;
}

.check-panel__lead {
  /* リード上端をリスト先頭（見出しの下）に合わせる */
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-top: -1rem;
}

/* 「5分」を黄色で強調・「5」だけさらに大きく */
.check-panel__min {
  color: var(--c-yellow);
}

.check-panel__num {
  font-size: 180%;
  vertical-align: -0.05em;
  margin: 0 0.2rem;
}

/* イラストは左下の装飾オーバーレイ → position で配置（重ねが本質・CLAUDE.md レイアウト原則） */
.check-panel__illust {
  position: absolute;
  left: 24.5rem;
  bottom: 0;
  width: 16rem;
  height: 25.2rem;
}

.check-list {
  width: 65rem;
}

.check-list__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  /* 区切りは白の破線（Figma stroke-dasharray 2 2）。border:dashed はブラウザ依存なので gradient で描く（§9-1） */
  background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.6) 0 0.2rem, transparent 0.2rem 0.4rem);
  background-repeat: no-repeat;
  background-size: 100% 0.1rem;
  background-position: top;
}

.check-list__item:last-child {
  background-image:
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.6) 0 0.2rem, transparent 0.2rem 0.4rem),
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.6) 0 0.2rem, transparent 0.2rem 0.4rem);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 0.1rem, 100% 0.1rem;
  background-position: top, bottom;
}

.check-list__ic {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

/* 完成イメージ */
.sec-check__step2 {
  margin-top: 10rem;
}

/* 回答をもとに y3572（パネル下端 ≈ y3472）。列の配置は共通パターン（.sample-list）で指定済み */
.sample {
  width: 43.2rem;
}

.sample__img {
  width: 43.2rem;
  height: 89.9rem;
  object-fit: cover;
  border-radius: 0.5rem;
}

.sample__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 7rem;
  /* ボタン：テキスト折り返しでも潰れないよう min-height */
  margin-top: 2rem;
  border: 2px solid var(--c-main);
  border-radius: 100px;
  color: var(--c-main);
  font-weight: 700;
  letter-spacing: 0.05em;
}

@media (hover: hover) and (pointer: fine) {
  .sample__btn:hover {
    background: var(--c-main);
    color: #fff;
  }
}

.sec-check__msg {
  margin-top: 10rem;
}




/* =========================================================
   比較表 COMPARISON
   ========================================================= */
.sec-compare {
  background: #fff;
}

.compare {
  display: flex;
  justify-content: center;
}

.compare-table {
  width: 120rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.compare-table th,
.compare-table td {
  /* table-cell の height は「最低高さ」として働き内容で伸びる（溢れない）→ 固定 height のまま可 */
  height: 10rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #d8d8d8;
}

.compare-table__corner {
  width: 26.6rem;
  border: none;
  background: transparent;
}

.compare-table__row {
  width: 26.6rem;
  background: var(--c-main-l);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.compare-table__h--other {
  width: 26.6rem;
  background: #eee;
  font-size: 2rem;
  font-weight: 700;
}

.compare-table__c--gray {
  width: 26.6rem;
  background: #fff;
  color: #666;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.compare-table__tri {
  font-size: 3rem;
}

/* 当サービス列（強調・上にせり出す枠） */
.compare-table__h--ours {
  width: 40rem;
  background: var(--c-main);
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 5px solid var(--c-main);
}

.compare-table__c--ours {
  /* relative＋isolation で ○リング(z-index:-1)をセル背景の上・テキストの下に収める */
  position: relative;
  isolation: isolate;
  width: 40rem;
  background: #fff;
  color: var(--c-main);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-left: 5px solid var(--c-main);
  border-right: 5px solid var(--c-main);
}


.compare-table__check {
  /* 淡い○リングを td の上下左右中央に置き、テキストはその上（重ねが本質→absolute は例外） */
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8rem;
  height: 8rem;
  z-index: -1;
}

/* =========================================================
   料金 PRICING + オプション
   ========================================================= */
/* タイトル y6369（帯 y6264） */
.price-panel {
  padding: 6.5rem 0;
  text-align: center;
}

/* 要素間隔は一律 gap ではなく、デザイン実測（LP.png @2x）に合わせた個別マージン */
.price-panel__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-weight: 700;
  white-space: nowrap;
}

.price-panel__tag {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15rem;
  min-height: 6rem;
  /* タグのピル高さ：テキスト可変でも潰れないよう min-height */
  border: 1px solid #fff;
  font-size: 3.8rem;
  /* タグ→金額のインク間隔 実測40px − ¥ の字幅内余白 */
  margin-right: 3rem;
}

.price-panel__num {
  font-size: 8rem;
  line-height: 1;
}

.price-panel__unit {
  font-size: 4rem;
  /* 金額→円のインク間隔 実測21px − 数字末尾の字幅内余白 */
  margin-left: 1rem;
}

.price-panel__small {
  font-size: 2.6rem;

}

.price-feat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 124rem;
  max-width: 100%;
  margin: 6rem auto 0;
}

.price-feat::after {
  content: "";
  width: 29.2rem;
}

/* 最終行の左寄せ用 */
.price-feat__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  /* ピル高さ：テキスト可変でも潰れないよう min-height */
  border-radius: 100px;
  background: #fff;
  color: #000;
  font-size: 2rem;
  font-weight: 700;
}

/* ボックス左端から1remの位置にチェックアイコン（check-list.svg）。テキストは中央のまま */
.price-feat__item::before {
  content: "";
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  background: url(../img/lp/check-list.svg) center / contain no-repeat;
}

/* オプション */
.sec-price__opt {
  margin-top: 6.5rem;
}

.option-list {
  max-width: 120rem;
  margin: 0 auto;
}

.option-card {
  /* 120rem の中に3枚を gap で詰める（カードは均等fill） */
  flex: 1;
  min-width: 0;
  /* 高さは内容＋paddingで決める（行内は align-items:stretch で自動的に揃う）。補足セクションなので控えめに */
  padding: 3rem;
}

.option-card__price {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.sec-price__cta {
  margin-top: 10rem;
}

/* =========================================================
   お客様の声 VOICE（既存カード言語に合わせる：白カード＋青枠／3カラム）
   ========================================================= */
.voice-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 4rem 3rem;
}

/* 人物アバター＋星を横並び（星の左にアイコン） */
.voice-card__head {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.voice-card__avatar {
  flex: none;
  width: 5.6rem;
  height: 5.6rem;
}

.voice-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
}

.voice-card__stars {
  color: #ffb400;
  font-size: 2.4rem;
  line-height: 1;
}

.voice-card__lead {
  margin-top: 2rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-main);
  margin-bottom: 0;
}

.voice-card__body {
  margin-top: 1.6rem;
}

/* 肩書きはカード下端に揃える（カード高さが揃っても名前が下で並ぶ） */
.voice-card__name {
  margin-top: auto;
  padding-top: 1rem;
  font-weight: 700;
  text-align: right;
}

/* =========================================================
   実績・信頼 STATS（数字カード3カラム）
   ========================================================= */
.sec-stats {
  padding-bottom: 0;
}

.stats-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5rem 2rem;
  border-radius: 1rem;
  background: var(--c-main);
  text-align: center;
  /* 背景ブルーなので単色領域として color を1回だけ置き、子は継承（CLAUDE.md §8-2） */
  color: #fff;
}

.stats-card__label {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0;
}

.stats-card__num {
  margin-top: 1rem;
  line-height: 1;
}

/* 数字本体（280 / 22 / 8）だけ黄色・欧文フォント。単位は白のまま継承 */
.stats-card__digit {
  font-family: var(--f-num);
  font-weight: 900;
  font-size: 7rem;
  letter-spacing: 0.02em;
  color: var(--c-yellow);
  vertical-align: -0.05em;
}

.stats-card__unit {
  margin-left: 0.4rem;
  font-size: 2.4rem;
  font-weight: 700;
}

/* =========================================================
   よくあるご質問 FAQ（アコーディオン：.js-acc 機構を使用）
   ========================================================= */
.faq-list {
  max-width: 90rem;
  margin: 0 auto;
}

.faq-item {
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
}

.faq-item+.faq-item {
  margin-top: 2rem;
}

/* 質問行（クリックで開閉） */
.faq-q {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  padding: 2.6rem 3rem;
  text-align: left;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}

/* Q/A ラベルは丸バッジ・テキストは上下左右中央 */
.faq-q__label,
.faq-a__label {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.faq-q__label {
  background: var(--c-main);
}

.faq-q__text {
  flex: 1;
}

/* 開閉マーカー：border2辺＋rotate の山形（§13-9）。開で反転 */
.faq-q__mark {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin: -0.4rem 0.4rem 0;
  border-right: 0.3rem solid var(--c-main);
  border-bottom: 0.3rem solid var(--c-main);
  transform: rotate(45deg);
  transition: transform 0.3s;
}

.faq-q[aria-expanded="true"] .faq-q__mark {
  margin-top: 0.4rem;
  transform: rotate(-135deg);
}

/* 回答（.js-acc-body は max-height 機構・padding は内側に） */
.faq-a__inner {
  display: flex;
  gap: 1.6rem;
  padding: 0 3rem 2.8rem;
}

.faq-a__label {
  /* グレー系の丸バッジ（共通の丸スタイルは上でまとめて指定） */
  background: #c4c4c4;
}

.faq-a__text {
  padding-top: 0.4rem;
}

/* =========================================================
   無料相談フォーム CONTACT
   ※ 見た目のみ。送信システムは未実装
   ========================================================= */
/* 背景ブルーの単色領域として color は領域に1回（見出しのチェブロン線は currentColor で白に追従） */
.sec-contact {
  color: #fff;
}

/* 黄色マーカー上の「無料相談」だけは白だと読めないのでブルー */
.sec-contact .mark-y {
  color: var(--c-main);
}

/* 「3社」を黄色 */
.sec-head__hl {
  color: var(--c-yellow);
}

/* 「3社」の数字を大きく（line-height は継承のまま揃える） */
.sec-head__num {
  font-size: 180%;
  line-height: 1;
  vertical-align: -0.05em;
}

.contact-lead {
  text-align: center;
  font-size: 2rem;
  line-height: 2;
  letter-spacing: 0.05em;
}

/* フォーム本体（白パネル。文字色は本文既定に戻す） */
.contact-form {
  width: 76rem;
  max-width: 100%;
  margin: 4rem auto 0;
  padding: 5rem;
  border-radius: 1rem;
  background: #fff;
  color: var(--c-text);
  box-shadow: 0 0.4rem 3rem rgba(0, 0, 0, 0.10);
}

.contact-form__row {
  margin-bottom: 2.5rem;
}

.contact-form__label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 1.7rem;
  font-weight: 700;
}

/* 必須／任意バッジ */
.contact-form__req,
.contact-form__opt {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 1rem;
  border-radius: 0.4rem;
  font-size: 1.2rem;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
}

.contact-form__req {
  background: var(--c-accent);
}

.contact-form__opt {
  background: #888;
}

/* font/color は reset.css の inherit で本文既定に追従 */
.contact-form__input {
  width: 100%;
  padding: 1.6rem 1.8rem;
  border: 1px solid #bbb;
  border-radius: 0.6rem;
  background: #fff;
  transition: border-color .3s;
}

.contact-form__input::placeholder {
  color: #bbb;
}

.contact-form__input:focus {
  outline: none;
  border-color: var(--c-main);
}

/* ラジオボタン行（はい／いいえ）
   見た目は他の input と同じ枠（白地・#bbb 1px・角丸0.6rem）に合わせつつ、
   ボックス全体をタップ領域にして押しやすく。2択で横幅を等分。
   radio はネイティブのまま（キーボード操作・フォーカスはネイティブ挙動を維持） */
.contact-form__radios {
  display: flex;
  gap: 1.6rem;
}

.contact-form__radio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.6rem 1.8rem;
  /* input と同じ余白＝同じ高さ感 */
  border: 1px solid #bbb;
  border-radius: 0.6rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .3s;
}

.contact-form__radio input {
  width: 2rem;
  height: 2rem;
  accent-color: var(--c-main);
  cursor: pointer;
}

/* 選択中は input:focus と同じ青枠で控えめに示す */
.contact-form__radio:has(input:checked) {
  border-color: var(--c-main);
}

/* キーボードフォーカスをボックス側に可視化 */
.contact-form__radio:has(input:focus-visible) {
  border-color: var(--c-main);
}

@media (hover: hover) and (pointer: fine) {
  .contact-form__radio:hover {
    border-color: var(--c-main);
  }
}

.contact-form .btn-cta {
  margin-top: 4rem;
}

/* =========================================================
   FOOTER（濃いブルー・中央寄せ）
   ========================================================= */
.site-footer {
  padding: 5rem 0 4rem;
  background: var(--c-main);
  color: #fff;
  text-align: center;
  border-top: 1px solid #fff;
}

.site-footer__company {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 3rem;
  margin-top: 2.5rem;
}

.site-footer__links a {
  font-size: 1.5rem;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__links a:hover {
    opacity: .7;
  }
}

.site-footer__copy {
  margin-top: 3rem;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.8);
}

/* =========================================================
   レスポンシブ（SP ≤767px）── PCコンプ無し・SPとして設計し直す
   ========================================================= */
@media screen and (max-width: 767px) {
  body {
    padding-top: 0;
    /* ヘッダーを sticky に変更したため、SPでも押し下げ不要 */
    font-size: 1.5rem;
  }

  section {
    padding: 4.5rem 0;
  }

  section[id] {
    scroll-margin-top: 6rem;
  }

  .wrap {
    max-width: none;
    padding: 0 2rem;
  }

  /* HEADER */
  .site-header {
    height: 6rem;
  }

  .site-header__inner {
    padding: 0 1.5rem;
  }

  /* SPはテキストナビを畳み、無料相談CTAだけ残す（横幅が足りないため） */
  .gnavi {
    gap: 0;
  }

  .gnavi__list {
    display: none;
  }

  .gnavi__cta {
    padding: 0.8rem 1.8rem;
    font-size: 1.4rem;
  }

  .site-logo {
    font-size: 1.5rem;
  }

  /* HERO（rebuild後の構造：copy列＋全幅モックアップ＋青CTAブロック）
     PCの2トーンは「上=淡色ヒーロー／CTAだけ青ブロック」にSP流に再構成 */
  .sec-mv {
    background: var(--c-main-l);
  }

  .sec-mv__inner {
    flex-direction: column;
    max-width: 100%;
    padding: 2rem 2rem 0;
    gap: 2rem;
  }

  .sec-mv__copy {
    width: 100%;
  }

  .mv-badge {
    padding: 1rem 1rem 1rem;
  }

  .mv-badge__txt {
    font-size: 1.5rem;
    white-space: normal;
    line-height: 1.3;
  }

  .mv-badge__num {
    font-size: 3rem;
  }

  .mv-badge__dot {
    background-image: radial-gradient(circle, var(--c-yellow) 0.25rem, transparent 0.27rem);
    /* タイル幅＝1em（＝和文フル幅1文字の送り幅）。font-size が変わっても各ドットが文字中央に載る。
       先頭文字から揃うよう位相は左基準 */
    background-size: 1em 0.5rem;
    background-position: left top;
  }

  .mv-badge__tail {
    border-left-width: 1rem;
    border-right-width: 1rem;
    border-top-width: 1.6rem;
  }

  .mv-tit {
    margin-top: 0.5rem;
    text-align: center;
  }

  .mv-tit__l1 {
    font-size: 2.5rem;
    line-height: 1.2;
    white-space: normal;
  }

  .mv-tit__l2 {
    font-size: 3rem;
    line-height: 1.2;
    white-space: normal;
    margin-top: 0rem;
  }

  .mv-tit__big {
    font-size: 5.2rem;
  }

  .mv-mark {
    /* PCと同じ帯スタイル・同比率。PCは band高10rem/文字8.8rem(≈1.14)＋padding 0.3rem。
       SP文字4.3rem × 1.14 ≒ 4.9rem。position:0 71% は base 継承 */
    background-size: 100% 3.9rem;
    padding: 0 0.3rem;
  }

  .mv-lead {
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    gap: 1.6rem;
  }

  .mv-lead__txt {
    font-size: 1.5rem;
    white-space: normal;
  }

  .mv-lead__slash {
    height: 3rem;
  }

  .mv-cards {
    width: 100%;
    margin: 0;
    gap: 1rem;
  }

  .mv-card {
    width: calc((100% - 2rem) / 3);
    padding: 1.5rem 0 1rem;
  }

  .mv-card__tit {
    font-size: 1.5rem;
    line-height: 1.35;
    text-align: center;
    margin-bottom: 0;
  }

  .mv-card__ic {
    width: 6.4rem;
    height: 6.4rem;
    margin-top: 1rem;
  }

  .mv-card__ic img {
    width: 4.8rem;
  }

  /* モックアップ：SPは flow に戻して全幅中央・反転解除（画面内容を正位置に） */
  .sec-mv__img {
    position: static;
    flex: none;
    width: 100%;
    margin: 0 auto;
    transform: none;
    z-index: 2;
  }

  /* CTAだけ青ブロック（全幅）でブランドの2トーンを担保 */
  .sec-mv__cta {
    margin-top: -5rem;
    padding: 7rem 2rem 3rem;
    background: var(--c-main);
  }

  .btn-cta {
    width: 100%;
    min-height: 8rem;
    /* 右に矢印バッジ分の余白を確保し、長い文言がバッジに重ならないようにする */
    padding: 1rem 5rem 1rem 2rem;
    font-size: 2rem;
    letter-spacing: 0.02em;
  }

  .btn-cta::before {
    right: 2rem;
    width: 3rem;
    height: 3rem;
  }

  .btn-cta::after {
    right: 3.2rem;
    width: 1rem;
    height: 1rem;
    border-width: 0.3rem;
  }

  .sec-mv__note {
    margin-top: 2rem;
    font-size: 1.4rem;
  }

  /* 共通見出し */
  .sec-head {
    margin-bottom: 3rem;
  }

  .sec-head__sm {
    font-size: 1.7rem;
    white-space: normal;
    letter-spacing: 0;
  }

  .sec-head__sm:not(:last-child) {
    margin-bottom: 1rem;
  }

  .sec-head__lg {
    font-size: 2.4rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .mark-y {
    background-size: 100% 2.8rem;
  }

  /* WORRIES */
  .sec-worry {
    padding: 5rem 0 0;
  }

  .worry-list {
    flex-wrap: wrap;
    gap: 2rem;
  }

  .worry-card {
    width: 100%;
    padding: 2.5rem 2rem;
    /* アイコン（worry-ic＝ring）と見出しを横並び、本文は下段に回す */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 2rem;
    text-align: left;
  }

  /* アイコンを 0.65×（10→6.5rem）に縮小。ring/グリフ/spark も比例縮小 */
  .worry-ic {
    flex: none;
    margin: 0;
    width: 6.5rem;
    height: 6.5rem;
  }

  .worry-ic__ring {
    width: 6.5rem;
    height: 6.5rem;
  }

  .worry-ic__g--w1,
  .worry-ic__g--w2 {
    width: 3.3rem;
    height: 2.8rem;
  }

  .worry-ic__g--w3 {
    width: 3.6rem;
    height: 3.4rem;
  }

  .worry-ic__g--w4 {
    width: 3.6rem;
    height: 3.6rem;
  }

  .worry-ic__spark {
    width: 1.7rem;
    height: 2rem;
    top: -1.3rem;
    right: -0.7rem;
  }

  /* カード内見出しのSPサイズ（worry / step 共通） */
  .worry-card__tit,
  .step-card__tit {
    font-size: 2.2rem;
    line-height: 1.5;
  }

  .worry-card__tit {
    flex: 1;
    min-width: 0;
  }

  /* 縦積み用の改行は横並びでは不要（自然折り返しに任せる） */


  .worry-card__body {
    width: 100%;
    text-align: center;
  }

  /* WHY */
  .sec-why {
    padding: 8rem 0 5rem;
  }

  .why-tit {
    font-size: 2.2rem;
    line-height: 1.6em;
    margin-bottom: 1rem;
  }

  .why-lead {
    font-size: 100%;
    line-height: 1.8em;
    text-align: left;
  }

  .why-lead br {
    display: none;
  }

  /* STEP */
  .sec-step {
    padding: 5rem 0 0;
  }

  .step-list {
    flex-wrap: wrap;
    gap: 3rem;
  }

  .step-card {
    width: 100%;
    padding: 1rem 1rem 2rem;
    /* ラベルは上段（全幅）、アイコンと見出しを横並び、本文は下段に回す */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
    text-align: left;
  }

  .step-card__ic {
    flex: none;
    margin: 1.5rem 0 0;
    /* SPは縮小。幅は最大アイコン（ic-step4＝81:60）基準で固定し、
       他のアイコンはその中で中央揃え → 見出しの開始位置が全カードで揃う */
    height: 4.5rem;
    width: 6.1rem;
  }

  .step-card__tit {
    flex: 1;
    min-width: 0;
    margin-top: 1.5rem;
  }

  .step-card__body {
    width: 100%;
    text-align: center;
  }

  .step-card:not(:last-child)::after {
    right: 50%;
    top: auto;
    bottom: -2.5rem;
    transform: translateX(50%);
    border-top: 1.5rem solid var(--c-main);
    border-left: 1.5rem solid transparent;
    border-right: 1.5rem solid transparent;
    border-bottom: none;
  }

  .step-card__label,
  .option-card__label {
    font-size: 1.6rem;
    min-height: 4rem;
  }

  .check-panel__tit {
    font-size: 100%;
    margin-bottom: 1rem;
  }

  /* CHECKSHEET */
  .sec-check {
    padding: 8rem 0 0;
  }

  .check-panel {
    padding: 3rem 2rem;
  }

  .check-panel__body {
    flex-direction: column;
    gap: 3rem;
  }

  /* イラストは flow に戻し、リードの左に横並び
     （DOM順は lead→illust なので row-reverse で illust を左へ） */
  .check-panel__left {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
  }

  .check-panel__illust {
    position: static;
    flex: none;
    width: 6rem;
    height: auto;
    margin: 0 2rem 0 0;
  }

  .check-panel__left,
  .check-list {
    width: 100%;
  }

  .check-panel__lead {
    font-size: 2rem;
    letter-spacing: 0;
    /* PCの位置合わせ用ネガティブマージンをリセット */
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;

  }

  .check-list__item {
    font-size: 1.4rem;
    line-height: 1.5em;
  }

  .check-list__ic {
    width: 2.4rem;
    height: 2.4rem;
  }

  .sec-check__step2 {
    margin-top: 5rem;
  }

  .sample-list {
    flex-direction: column;
    align-items: center;
    gap: 3.5rem;
  }

  .sample {
    width: 100%;
    max-width: 43.2rem;
  }

  .sample__img,
  .sample__btn {
    width: 100%;
  }

  .sample__img {
    height: auto;
  }

  .sec-check__msg {
    margin-top: 3rem;
  }

  .sec-check .why-lead {
    padding-bottom: 5rem;
  }

  /* COMPARISON（横スクロール許容） */
  .sec-compare {
    padding: 5rem 0;
  }

  /* 横スクロールをやめ、4列を画面幅に収める（固定列幅→auto／セルは内容で折り返し） */
  .compare {
    overflow-x: visible;
  }

  .compare-table {
    width: 100%;
    table-layout: auto;
  }

  .compare-table th,
  .compare-table td {
    height: auto;
    padding: 1.4rem 0.4rem;
    line-height: 1.5em;
  }

  .compare-table__corner,
  .compare-table__row,
  .compare-table__h--other,
  .compare-table__c--gray,
  .compare-table__h--ours,
  .compare-table__c--ours {
    width: auto;
  }

  .compare-table__row,
  .compare-table__c--gray,
  .compare-table__h--other {
    font-size: 1.2rem;
    white-space: nowrap
  }

  .compare-table__h--ours,
  .compare-table__c--ours {
    font-size: 1.4rem;
    border-width: 3px;
  }

  .compare-table__tri {
    font-size: 2rem;
  }

  .compare-table__check {
    width: 5rem;
    height: 5rem;
  }

  /* PRICING */
  .sec-price {
    padding: 5rem 0 0;
  }

  .price-panel {
    padding: 2rem 2rem;
  }

  /* SPは折返しレイアウトなので個別マージンをリセットして gap に戻す */
  .price-panel__price {
    flex-wrap: wrap;
  }

  .price-panel__num {
    font-size: 4.5rem;
  }

  .price-panel__unit {
    font-size: 2.5rem;
    margin-left: 0.5rem;
  }

  .price-panel__small {
    font-size: 1.5rem;
    margin-left: 0;
  }

  .price-feat {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    gap: 1rem;
    margin-inline: auto;
    margin-top: 2rem;
  }

  .price-feat__item {
    justify-content: flex-start;
    padding-left: 5rem;
    min-height: 5rem;
    font-size: 1.8rem;
  }

  .price-feat__item::before {
    width: 2.8rem;
    height: 2.8rem;
    left: 1rem;
  }

  .price-panel__tag {
    width: 100%;
    font-size: 2.8rem;
    margin-right: 0;
    margin-bottom: 1rem;
    min-height: auto;
  }

  .sec-price__opt {
    margin-top: 5rem;
  }

  .sec-head:not(:has(.sec-head__lg)) {
    margin-bottom: 2rem;
  }

  .option-list {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .option-card {
    width: 100%;
    max-width: 100%;
    padding: 2rem 2rem;
  }

  .sec-price__cta {
    margin-top: 0;
    padding: 4rem 0 5rem;
  }

  .option-card__price {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 100%;
  }

  .voice-list {
    flex-direction: column;
    gap: 3rem;
  }

  .voice-card {
    padding: 3rem 2.4rem;
  }

  .voice-card__lead {
    font-size: 1.9rem;
  }

  /* STATS：大きい数字は幅が要るので1カラム */
  .stats-list {
    flex-direction: column;
    gap: 2rem;
  }

  .stats-card {
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    gap: 1rem;
    padding: 2.2rem 2rem;
  }

  .stats-card__num {
    margin-top: 0;
  }

  .stats-card__digit {
    font-size: 5rem;
  }

  .stats-card__label {
    font-size: 1.6rem;
  }

  /* FAQ */
  .faq-item+.faq-item {
    margin-top: 1.5rem;
  }

  .faq-q {
    gap: 1.2rem;
    padding: 2rem 2rem;
    font-size: 1.7rem;
  }

  .faq-q__label,
  .faq-a__label {
    width: 3.8rem;
    height: 3.8rem;
    font-size: 2.2rem;
  }

  .faq-q__mark {
    width: 1rem;
    height: 1rem;
  }

  .faq-a__inner {
    gap: 1.2rem;
    padding: 0 2rem 2.2rem;
  }

  /* CONTACT */
  .contact-lead {
    font-size: 1.6rem;
  }

  .contact-form {
    margin-top: 3rem;
    padding: 3rem 2rem;
  }

  .contact-form__row {
    margin-bottom: 2rem;
  }

  .contact-form .btn-cta {
    font-size: 1.8rem;
    margin-top: 2rem;
  }

  .contact-form__label {
    font-size: 1.5rem;
  }
}