/* =========================================================
  FV / ファーストビュー
  ---------------------------------------------------------
  このCSSは、FV専用のレイアウト・装飾です。
  色・角丸・影・横幅などは common.css の :root 変数を使います。
========================================================= */


/* =========================================================
  FV / テキスト左・フォーム右型：PC
  ---------------------------------------------------------
  common.cssを土台にして、
  このFV専用のレイアウト・装飾だけを記述します。
========================================================= */


/* ---------------------------------------------------------
  FV全体
  ---------------------------------------------------------
  section全体の余白・背景・装飾を設定します。
  position: relative は、背景装飾を重ねるために使います。
--------------------------------------------------------- */
.fv-contact {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background:
    radial-gradient(circle at 84% 18%, rgba(95, 195, 184, 0.14), transparent 26%),
    linear-gradient(135deg, var(--color-bg) 0%, var(--color-sub) 100%);
}


/* ---------------------------------------------------------
  背景の大きな装飾
  ---------------------------------------------------------
  画像のワイヤーフレームにある、右側の薄い図形風の装飾です。
  HTMLに書かず、CSSの疑似要素で作っています。
--------------------------------------------------------- */
.fv-contact::before {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 620px;
  height: 620px;
  border-radius: 45% 55% 42% 58%;
  background: rgba(31, 122, 122, 0.07);
  transform: rotate(-18deg);
}


/* ---------------------------------------------------------
  FVの内側レイアウト
  ---------------------------------------------------------
  PCでは「左：テキスト」「右：フォーム」の2カラム。
  .l-container は common.css の共通横幅です。
--------------------------------------------------------- */
.fv-contact__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  align-items: center;
  gap: 72px;
}


/* ---------------------------------------------------------
  左側コンテンツ
  ---------------------------------------------------------
  コピー・リード文・ベネフィットリストをまとめる箱です。
--------------------------------------------------------- */
.fv-contact__content {
  min-width: 0;
}


/* ---------------------------------------------------------
  補足ラベル
  ---------------------------------------------------------
  common.css の .c-label に、FV用の余白を追加します。
--------------------------------------------------------- */
.fv-contact__label {
  margin-bottom: 24px;
}


/* ---------------------------------------------------------
  メインコピー
  ---------------------------------------------------------
  FVで一番目立たせる見出しです。
  clamp()で画面幅に応じて文字サイズを調整します。
--------------------------------------------------------- */
.fv-contact__title {
  color: var(--color-text);
  font-size: clamp(2.5rem, 4.6vw, 4.2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
}


/* ---------------------------------------------------------
  リード文
  ---------------------------------------------------------
  メインコピーの下に置く説明文です。
--------------------------------------------------------- */
.fv-contact__lead {
  margin-top: 28px;
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 2;
}


/* ---------------------------------------------------------
  ベネフィットリスト
  ---------------------------------------------------------
  チェック付きの3項目をカード風にまとめます。
  ワイヤーフレームの「3つの強み」に該当します。
--------------------------------------------------------- */
.fv-contact__benefits {
  display: grid;
  gap: 14px;
  width: min(100%, 470px);
  margin-top: 36px;
  padding: 22px;
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(31, 122, 122, 0.14);
  box-shadow: var(--shadow-card);
}


/* ---------------------------------------------------------
  ベネフィット1項目
  ---------------------------------------------------------
  チェックアイコンとテキストを横並びにします。
--------------------------------------------------------- */
.fv-contact__benefit {
  display: flex;
  align-items: center;
  gap: 12px;
}


/* ---------------------------------------------------------
  ベネフィットのチェックアイコン
  ---------------------------------------------------------
  丸いチェックを作ります。
--------------------------------------------------------- */
.fv-contact__benefit-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-main);
  color: var(--color-white);
  font-size: 0.86rem;
  font-weight: 700;
}


/* ---------------------------------------------------------
  ベネフィットの文章
  ---------------------------------------------------------
  強みを短く伝えるテキストです。
--------------------------------------------------------- */
.fv-contact__benefit-text {
  color: var(--color-text);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.6;
}


/* ---------------------------------------------------------
  サブリンク
  ---------------------------------------------------------
  すぐフォーム送信しない人向けの補助導線です。
--------------------------------------------------------- */
.fv-contact__text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--color-main);
  color: var(--color-main);
  font-weight: 700;
}


/* ---------------------------------------------------------
  フォームエリア
  ---------------------------------------------------------
  右側フォームカードの外側です。
--------------------------------------------------------- */
.fv-contact__form-area {
  position: relative;
}


/* ---------------------------------------------------------
  フォームカード
  ---------------------------------------------------------
  フォーム全体をカード状に見せます。
  白背景・角丸・影で、右側の重要エリアとして目立たせます。
--------------------------------------------------------- */
.fv-contact__form-card {
  width: 100%;
  padding: 36px;
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(31, 122, 122, 0.14);
  box-shadow: var(--shadow-soft);
}


/* ---------------------------------------------------------
  フォーム見出しエリア
  ---------------------------------------------------------
  フォームの目的を伝える部分です。
--------------------------------------------------------- */
.fv-contact__form-head {
  margin-bottom: 24px;
  text-align: center;
}


/* ---------------------------------------------------------
  フォームタイトル
  ---------------------------------------------------------
  「資料請求・お問い合わせ」など、フォームの目的を示します。
--------------------------------------------------------- */
.fv-contact__form-title {
  color: var(--color-text);
  font-size: 1.55rem;
  line-height: 1.4;
}


/* ---------------------------------------------------------
  フォーム説明文
  ---------------------------------------------------------
  入力前の心理的ハードルを下げる短い文です。
--------------------------------------------------------- */
.fv-contact__form-lead {
  margin-top: 6px;
  color: var(--color-text-light);
  font-size: 0.92rem;
  line-height: 1.7;
}


/* ---------------------------------------------------------
  入力項目のまとまり
  ---------------------------------------------------------
  label と input を縦に並べるための箱です。
--------------------------------------------------------- */
.fv-contact__field {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}


/* ---------------------------------------------------------
  入力ラベル
  ---------------------------------------------------------
  何を入力する欄なのかを示します。
--------------------------------------------------------- */
.fv-contact__field-label {
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 700;
}


/* ---------------------------------------------------------
  入力欄
  ---------------------------------------------------------
  名前・メールアドレスなどの入力欄です。
--------------------------------------------------------- */
.fv-contact__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  background: var(--color-white);
  color: var(--color-text);
  font: inherit;
}


/* ---------------------------------------------------------
  入力欄フォーカス時
  ---------------------------------------------------------
  入力中の項目が分かるように枠色と影を変えます。
--------------------------------------------------------- */
.fv-contact__input:focus {
  outline: none;
  border-color: var(--color-main);
  box-shadow: 0 0 0 3px rgba(31, 122, 122, 0.12);
}


/* ---------------------------------------------------------
  送信ボタン
  ---------------------------------------------------------
  フォーム内のメインCTAです。
--------------------------------------------------------- */
.fv-contact__submit {
  width: 100%;
  margin-top: 24px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}


/* ---------------------------------------------------------
  安心表記
  ---------------------------------------------------------
  個人情報の取り扱いなど、フォーム送信前の不安を減らします。
--------------------------------------------------------- */
.fv-contact__note {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--color-text-light);
  font-size: 0.78rem;
  line-height: 1.6;
  text-align: center;
}


/* ---------------------------------------------------------
  PC専用改行
  ---------------------------------------------------------
  <br class="u-pc"> をPCでは表示します。
--------------------------------------------------------- */
.u-pc {
  display: inline;
}
/* =========================================================
   Variation C：テキスト左＋画像右レイアウト / PC
========================================================= */

/* セクション全体 */
.problem-c {
  background: #ffffff;
}

/* 2カラム全体 */
.problem-c__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 60px;
}

/* 左側テキストエリア */
.problem-c__content {
  min-width: 0;
}

/* 小ラベル */
.problem-c__label {
  margin-bottom: 20px;
}

/* 大見出し */
.problem-c__title {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.45;
  font-weight: 700;
}

/* 見出し下の説明文 */
.problem-c__lead {
  margin-top: 18px;
  color: var(--color-text-light);
  font-size: 1rem;
  line-height: 1.9;
}

/* 悩みポイントリスト */
.problem-c__list {
  display: grid;
  gap: 13px;
  margin-top: 28px;
}

/* 悩みポイント1行 */
.problem-c__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 12px;
}

/* 丸いチェックアイコン */
.problem-c__icon {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  margin-top: 4px;
  border: 1px solid var(--color-main);
  border-radius: 50%;
  color: var(--color-main);
  font-size: 0.78rem;
  font-weight: 700;
}

/* 悩みポイント本文 */
.problem-c__text {
  color: var(--color-text);
  font-size: 0.98rem;
  line-height: 1.8;
}

/* ボタンまわり */
.problem-c__buttons {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 34px;
}

/* メインボタン */
.problem-c__btn {
  min-width: 240px;
}

/* ボタン内矢印 */
.problem-c__btn-arrow {
  margin-left: 8px;
  font-size: 1.1em;
}

/* サブリンク */
.problem-c__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--color-main);
  color: var(--color-main);
  font-weight: 700;
}

/* サブリンク矢印 */
.problem-c__link-arrow {
  font-size: 1.2em;
  line-height: 1;
}

/* 右側画像エリア */
.problem-c__image {
  min-height: 360px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  background:
    linear-gradient(to top right, transparent 49.7%, var(--color-border) 50%, transparent 50.3%),
    linear-gradient(to bottom right, transparent 49.7%, var(--color-border) 50%, transparent 50.3%),
    var(--color-bg-soft);
  overflow: hidden;
}

/* 実画像を入れる場合 */
.problem-c__img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

/* 仮画像枠 */
.problem-c__placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 360px;
  padding: 40px;
  color: var(--color-text-light);
  text-align: center;
}

/* 仮画像アイコン */
.problem-c__placeholder-icon {
  display: block;
  margin-bottom: 12px;
  color: var(--color-main);
  font-size: 3.2rem;
}
/* =========================================================
   Variation C：画像＋特徴リスト型 / PC
========================================================= */

/* セクション全体 */
.reason-c {
  background: #ffffff;
}

/* 画像＋テキストの2カラム */
.reason-c__inner {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 56px;
}

/* 左の画像エリア */
.reason-c__visual {
  text-align: center;
}

/* 仮画像枠 */
.reason-c__placeholder {
  display: grid;
  place-items: center;
  min-height: 360px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  background:
    linear-gradient(to top right, transparent 49.7%, var(--color-border) 50%, transparent 50.3%),
    linear-gradient(to bottom right, transparent 49.7%, var(--color-border) 50%, transparent 50.3%),
    var(--color-bg-soft);
  overflow: hidden;
}

/* 仮画像アイコン */
.reason-c__placeholder-icon {
  color: var(--color-main);
  font-size: 3rem;
}

/* 実画像を入れる場合 */
.reason-c__img {
  width: 100%;
  height: 360px;
  border-radius: var(--radius-m);
  object-fit: cover;
}

/* 画像下キャプション */
.reason-c__caption {
  margin-top: 14px;
  color: var(--color-text-light);
  font-size: 0.92rem;
}

/* 右側テキストエリア */
.reason-c__content {
  min-width: 0;
}

/* 小見出しラベル */
.reason-c__label {
  margin-bottom: 18px;
}

/* 見出し */
.reason-c__title {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.4;
  font-weight: 700;
}

/* リード文 */
.reason-c__lead {
  margin-top: 12px;
  color: var(--color-text-light);
  font-size: 1rem;
  line-height: 1.8;
}

/* 特徴リスト全体 */
.reason-c__list {
  display: grid;
  gap: 0;
  margin-top: 28px;
}

/* 特徴リスト1行 */
.reason-c__item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--color-border);
}

/* チェックアイコン */
.reason-c__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 2px;
  border: 1px solid var(--color-main);
  border-radius: 50%;
  color: var(--color-main);
  font-size: 0.95rem;
  font-weight: 700;
}

/* テキスト全体 */
.reason-c__text-wrap {
  display: grid;
  gap: 4px;
}

/* 特徴タイトル */
.reason-c__item-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 特徴説明文 */
.reason-c__item-text {
  color: var(--color-text-light);
  font-size: 0.92rem;
  line-height: 1.7;
}
/* =========================================================
   Variation C：おすすめプラン強調 + 比較表 / PC
========================================================= */

/* セクション全体 */
.price-c {
  background: #ffffff;
}

/* 上部ラベル群 */
.price-c__top-labels {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}

/* Variation C ラベル */
.price-c__variation-label {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius-s);
  background: var(--color-bg-soft);
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 700;
}

/* 左おすすめ + 右比較表 */
.price-c__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.6fr;
  align-items: center;
  gap: 48px;
}

/* 左側おすすめプラン */
.price-c__pickup {
  min-width: 0;
}

/* おすすめバッジ */
.price-c__badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 14px;
  border-radius: var(--radius-s);
  background: var(--color-main);
  color: var(--color-white);
  font-size: 0.84rem;
  font-weight: 700;
}

/* プラン名 */
.price-c__title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.35;
  font-weight: 700;
}

/* リード文 */
.price-c__lead {
  margin-top: 10px;
  color: var(--color-text-light);
  font-size: 1rem;
  line-height: 1.8;
}

/* 価格 */
.price-c__price {
  margin-top: 24px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

/* 円マーク */
.price-c__yen {
  font-size: 1.2rem;
}

/* 月額・税込 */
.price-c__period {
  font-size: 0.9rem;
  font-weight: 700;
}

/* おすすめプランの機能リスト */
.price-c__pickup-list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

/* リスト1行 */
.price-c__pickup-list li {
  position: relative;
  padding-left: 24px;
  color: var(--color-text);
  font-size: 0.95rem;
}

/* チェックマーク */
.price-c__pickup-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-main);
  font-weight: 700;
}

/* 申し込みボタン */
.price-c__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 320px);
  min-height: 56px;
  margin-top: 30px;
  border-radius: var(--radius-s);
  background: var(--color-main);
  color: var(--color-white);
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}

/* 詳細リンク */
.price-c__detail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--color-main);
  color: var(--color-main);
  font-weight: 700;
}

/* 比較表の外側 */
.price-c__table-wrap {
  overflow-x: auto;
}

/* 比較表 */
.price-c-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid var(--color-border);
  background: var(--color-white);
}

/* 表セル共通 */
.price-c-table th,
.price-c-table td {
  padding: 15px 12px;
  border: 1px solid var(--color-border);
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* 左端の項目名 */
.price-c-table tbody th {
  text-align: left;
  background: var(--color-bg-soft);
  font-weight: 700;
}

/* 表ヘッダー */
.price-c-table thead th {
  background: var(--color-bg-soft);
  font-weight: 700;
}

/* おすすめ列 */
.price-c-table__featured {
  position: relative;
  background: rgba(95, 195, 184, 0.08);
  font-weight: 700;
}

/* 表内おすすめバッジ */
.price-c-table__badge {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  background: var(--color-main);
  color: var(--color-white);
  font-size: 0.78rem;
  white-space: nowrap;
}

/* おすすめ列の価格セル */
.price-c-table__price {
  background: var(--color-main);
  color: var(--color-white);
}
/* =========================================================
   Variation C：カード型ステップ・カードリスト / PC
========================================================= */

/* セクション全体 */
.flow-c {
  background: #ffffff;
}

/* 見出し下の説明文 */
.flow-c__lead {
  margin-top: 12px;
  color: var(--color-text-light);
  font-size: 0.98rem;
}

/* 上部ラベル群 */
.flow-c__top-labels {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}

/* Variation C ラベル */
.flow-c__variation-label {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius-s);
  background: var(--color-bg-soft);
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 700;
}

/* カード一覧 */
.flow-c__cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}

/* ステップカード */
.flow-c-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 260px;
  padding: 28px 20px 26px;
  text-align: center;
}

/* 丸数字 */
.flow-c-card__number {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border: 2px solid var(--color-main);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-main);
  font-size: 1.28rem;
  font-weight: 700;
}

/* アイコン枠 */
.flow-c-card__icon {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-bottom: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  background: var(--color-bg-soft);
  color: var(--color-main);
  font-size: 1.8rem;
}

/* 見出し */
.flow-c-card__title {
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
}

/* 本文 */
.flow-c-card__text {
  color: var(--color-text-light);
  font-size: 0.9rem;
  line-height: 1.8;
}
/* =========================================================
   Variation C：シンプルリスト型FAQ / PC
========================================================= */

/* セクション全体 */
.faq-c {
  background: #ffffff;
}

/* 見出し下の説明文 */
.faq-c__lead {
  margin-top: 12px;
  color: var(--color-text-light);
  font-size: 0.98rem;
}

/* 上部ラベル群 */
.faq-c__top-labels {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}

/* Variation C ラベル */
.faq-c__variation-label {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius-s);
  background: var(--color-bg-soft);
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 700;
}

/* FAQリスト全体 */
.faq-c__list {
  display: grid;
  gap: 0;
}

/* FAQ 1行 */
.faq-c__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--color-border);
}

/* 質問・回答の共通 */
.faq-c__question,
.faq-c__answer {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: 12px;
}

/* Q/Aアイコン */
.faq-c__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-main);
  font-weight: 700;
  line-height: 1;
}

/* Aアイコン */
.faq-c__icon--answer {
  background: var(--color-white);
}

/* 質問文 */
.faq-c__question-text {
  font-weight: 700;
  line-height: 1.75;
}

/* 回答文 */
.faq-c__answer-text {
  color: var(--color-text-light);
  line-height: 1.75;
}

/* 下部CTA枠 */
.faq-c__contact {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
  padding: 24px 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--color-bg-soft);
}

/* CTA左側テキスト */
.faq-c__contact-text {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-text);
  font-weight: 700;
}

/* 吹き出し風アイコン */
.faq-c__contact-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-main);
}

/* CTAボタン */
.faq-c__contact-btn {
  min-width: 260px;
}
/* =========================================================
   Variation C：コンパクトお問い合わせボックス / PC
========================================================= */

/* セクション全体 */
.cta-c {
  background: #ffffff;
}

/* 見出し下の説明文 */
.cta-c__lead {
  margin-top: 12px;
  color: var(--color-text-light);
  font-size: 0.98rem;
}

/* 上部ラベル群 */
.cta-c__top-labels {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}

/* Variation C ラベル */
.cta-c__variation-label {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius-s);
  background: var(--color-bg-soft);
  color: var(--color-text);
  font-size: 0.88rem;
  font-weight: 700;
}

/* CTAボックス本体 */
.cta-c__box {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 36px;
  width: min(100%, 900px);
  margin-inline: auto;
  padding: 36px 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

/* 左側メッセージ */
.cta-c__message {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 22px;
}

/* 丸アイコン */
.cta-c__icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-main);
  font-size: 2rem;
  font-weight: 700;
}

/* メッセージ見出し */
.cta-c__title {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.5;
  font-weight: 700;
}

/* メッセージ本文 */
.cta-c__text {
  margin-top: 8px;
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 1.8;
}

/* 右側アクション */
.cta-c__action {
  padding-left: 36px;
  border-left: 1px solid var(--color-border);
}

/* ボタン */
.cta-c__btn {
  width: 100%;
  min-width: auto;
}

/* ボタン矢印 */
.cta-c__btn-arrow {
  margin-left: 8px;
}

/* 受付時間 */
.cta-c__time {
  margin-top: 16px;
  color: var(--color-text-light);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* 電話番号 */
.cta-c__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--color-text);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.3;
}

/* 電話アイコン */
.cta-c__tel-icon {
  color: var(--color-main);
  font-size: 1.1rem;
}