@charset "utf-8";
/* CSS Document */
/* TOPリニューアル用 */

/* common ====================================== */
:root {
  --primary: #ff9242;
  --secondary: #cd3f7c;
  --ribbon: var(--secondary);
  --ribbon-dark: #a72f63;
  --accent: var(--secondary);
  /* 強調色（お好みで変更可） */
  --accent-dark: #a72f63;
  --ink: #333333;
  /* 文字色ベース */
  --muted: #e4752b;
  /* 価格や補足の色 */
  --dot: clamp(56px, 18vw, 72px);
  /* 丸の直径（01/02/03） */
  --line: #ffc337;
  /* 線の色（白） */
  --line-w: 2px;
  /* 線の太さ */
}

.top_rn {
  font-size: 16px;
}

#page_contents.top_rn {
  width: calc(100% - 48px);
  max-width: 1000px;
}

#page_contents.top_rn .center {
  text-align: center;
}

.top_rn .primary {
  color: #ff9242;
}

.top_rn .secondary {
  color: #cd3f7c;
}

.top_rn h2 {
  font-size: 3.5rem;
}

.top_rn .border {
  border: 2px solid #ff9242;
}

.top_rn .spacer {
  height: calc(10vw - 30px);
}

.top-rn .sub-ttl {
  font-size: 1.2em;
}

@media (max-width: 768px) {
  #page_contents.top_rn {
    width: calc(100% - 32px);
  }

  .top_rn h2 {
    font-size: 1.7rem;
  }

}

/* ファーストビュー */
h2.main-copy {
  font-size: clamp(1.25rem, 0.662rem + 2.94vw, 2.5rem);
}


/* ========== こんな方におすすめ（丸画像＋キャプション円） ========== */
.top_rn .top-sec02-recommend {
  --circle: clamp(180px, 28vw, 280px);
  /* 円サイズ */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 中央寄せベース */
  gap: 64px 48px;
  /* 上下64 / 左右48 の隙間 */
}

/* 共通：行（row）の基本 */
.top_rn .top-sec02-recommend.panel-row-style {
  display: flex;
  flex-wrap: wrap;
}

/* 1行目は中央寄せ（項目が2つの行＝firstだけ） */
#top-sec02-recommend-first {
  display: flex;
  flex-wrap: wrap;
  gap: 56px 5vw;
  justify-content: center;
  /* ← ここだけ中央寄せ */
}

/* ===== 各“項目”（SiteOriginのセル） ===== */
.top_rn .top-sec02-recommend .panel-grid-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 2行目(3つ並び)の見栄えを安定させたいので幅は自動のままにします */
}

/* ----- 画像（丸）を前面に出す ----- */
.top_rn .top-sec02-recommend .sow-image-container {
  position: relative;
  z-index: 1;
  /* ← 白い円より前面 */
  display: inline-block;
}

.top_rn .top-sec02-recommend .sow-image-container img {
  width: min(32vw, 260px);
  /* PC時の見やすい最大値 */
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
  border: 10px solid var(--primary, #ff9242);
  display: block;
}

/* 白丸（説明の背景） */
.top_rn .top-sec02-recommend .panel-grid-cell .widget_custom_html .textwidget {
  width: min(32vw, 220px);
  aspect-ratio: 1/1;
  background: #fff;
  grid-row: 2;
  border-radius: 50%;
  box-shadow: 0 8px 18px #ffb681cf;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  margin: 0 auto;
  /* 中央寄せ */
  transform: translateY(-42%);
  /* ← 画像に少し“潜り込ませる” */
}

/* 円の中のテキスト */
.top_rn .top-sec02-recommend h4 {
  margin: 0;
  padding: 0 1.2em;
  line-height: 1.75;
  font-size: clamp(1rem, 0.88rem + 0.6vw, 1.2rem);
  text-align: center;
}

@media (max-width:1024px) {

  /* 上段（id指定）：中央に2つ */
  #top-sec02-recommend-first {
    justify-content: center;
    margin-bottom: 0;
  }
}

/* ===== スマホ（～768px） ===== */
@media (max-width:768px) {
  .top-sec02-recommend .panel-row-style {
    display: flex;
  }

  /* 画像（円）を半分幅いっぱいに */
  .top_rn .top-sec02-recommend .sow-image-container img {
    width: 44vw;
    /* ほぼ半分幅（左右のgapを考慮） */
    max-width: none;
    /* 既存の max を無効化 */
  }

  /* 白い丸（テキスト背景）も同じサイズで重ねる */
  .top_rn .top-sec02-recommend .panel-grid-cell .widget_custom_html .textwidget {
    width: 44vw;
    /* 画像と同じ幅 */
    transform: translateY(-36%);
    /* 重なり具合を少し浅めに調整 */
    padding: 14px;
    /* 内側の余白は少しだけ */
  }

  /* 文字サイズはそのままでもOK。詰まるなら少しだけ調整 */
  .top_rn .top-sec02-recommend h4 {
    font-size: clamp(0.95rem, 0.9rem + 0.5vw, 1.1rem);
  }

  #top-sec02-recommend-first,
  #top-sec02-recommend-first {
    display: flex;
    flex-wrap: wrap;
    gap: 0px 8vw;
    justify-content: center;
  }

}

/* =========================
   共通リセット
   ========================= */
#top-sec02-recommend-second .panel-grid-cell {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  box-sizing: border-box;
}

#top-sec02-recommend-second {
  display: grid !important;
  gap: 12px;
  /* 初期 gap */
  align-items: start;
}

#top-sec02-recommend-second img {
  display: block;
  max-width: 100%;
  height: auto;
}

.top_rn .top-sec02-recommend h4 {
  padding-top: 30px;
}

/* =========================
   PC（769px以上）
   上2（中央寄せ） / 下3（5枚固定）
   ========================= */
@media (min-width: 769px) {
  #top-sec02-recommend-second {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* 6等分 */
    gap: 20px;
    /* お好みで調整 */
    grid-auto-flow: row;
  }

  /* 既存の自動配置/スパン等を無効化して明示配置へ */
  #top-sec02-recommend-second .panel-grid-cell {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: stretch;
  }

  /* 上段2つを中央寄せ（左右1列ずつ空ける） */
  #top-sec02-recommend-second .panel-grid-cell:nth-child(1) {
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
  }

  #top-sec02-recommend-second .panel-grid-cell:nth-child(2) {
    grid-column: 4 / 6 !important;
    grid-row: 1 !important;
  }

  /* 下段3つを等幅で3カラム */
  #top-sec02-recommend-second .panel-grid-cell:nth-child(3) {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
  }

  #top-sec02-recommend-second .panel-grid-cell:nth-child(4) {
    grid-column: 3 / 5 !important;
    grid-row: 2 !important;
  }

  #top-sec02-recommend-second .panel-grid-cell:nth-child(5) {
    grid-column: 5 / 7 !important;
    grid-row: 2 !important;
  }
}

/* =========================
   スマホ（768px以下）
   2 / 2 / 1（最後は中央）
   scale使用＋余白タイト
   ========================= */
@media (max-width: 768px) {
  :root {
    --sp-scale: 0.85;
    /* 縮小率：調整可 */
    --sp-row-gap: 6px;
    /* 上下間隔 */
    --sp-col-gap: 12px;
    /* 左右間隔 */
    --sp-tighten: -70px;
    /* 上下を詰める負マージン（調整可） */
  }

  #top-sec02-recommend-second {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--sp-row-gap);
    column-gap: var(--sp-col-gap);
    grid-auto-rows: min-content;
    /* 中身にフィット */
  }

  /* 最後の1つは全幅＋中央寄せ（2/2/1） */
  #top-sec02-recommend-second .panel-grid-cell:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 520px;
    /* 任意 */
  }

  /* 余白リセット＋縮小＋負マージン */
  #top-sec02-recommend-second .panel-grid-cell {
    padding: 0 !important;
    transform: scale(var(--sp-scale));
    transform-origin: top center;
    margin-bottom: var(--sp-tighten);
  }

  #top-sec02-recommend-second .so-panel,
  #top-sec02-recommend-second .widget,
  #top-sec02-recommend-second .textwidget {
    margin: 0 !important;
  }

  #top-sec02-recommend-second .sow-image-container {
    margin: 0 !important;
  }

  #top-sec02-recommend-second h4,
  #top-sec02-recommend-second p {
    margin: 0 !important;
    line-height: 1.3;
  }

  #top-sec02-recommend-second .panel-grid-cell>*:first-child {
    margin-top: 0 !important;
  }

  #top-sec02-recommend-second .panel-grid-cell>*:last-child {
    margin-bottom: 0 !important;
  }
}

/* キャンペーンリボン ====================================== */
.top_rn .campaign-ribbon-wrap {
  text-align: center;
}

.top_rn .campaign-ribbon {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0 20px;
  height: 50px;
  background: var(--ribbon);
  color: #fff;
  font-weight: 700;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  line-height: 50px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  overflow: visible;
  /* かぶせ部分を表示 */
}

/* たれ（下の三角） */
.top_rn .campaign-ribbon::before,
.top_rn .campaign-ribbon::after {
  position: absolute;
  top: 0;
  width: 0px;
  height: 0px;
  border-color: var(--ribbon) transparent;
  border-style: solid;
  content: "";
}

.top_rn .campaign-ribbon::before {
  left: -15px;
  border-width: 25px 0px 25px 15px;
}

.top_rn .campaign-ribbon::after {
  right: -15px;
  border-width: 25px 15px 25px 0px;
}

/* 期限バッジ：上に少しかぶせる */
.top_rn .campaign-ribbon .deadline {
  position: absolute;
  top: calc(-1 * 1em);
  /* 上に持ち上げる */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background: #fff;
  color: var(--ribbon);
  border: 2px solid var(--ribbon);
  padding: 0.15em 0.6em;
  border-radius: 999px;
  /* ピル形 */
  font-size: clamp(0.9rem, 2.8vw, 1.05rem);
  font-weight: 800;
  line-height: 1.1;
  box-shadow: 0 0.25rem 0.35rem rgba(0, 0, 0, 0.12);
}

/* お客様の声 */
/* セクション全体（任意の調整用） */
#top-sec03-recommend section {
  --gap: 1rem;
  /* 余白 */
  --radius: 0.75rem;
  /* 角丸 */
  --border: 1px solid var(--primary);
  --shadow: 0 0.25rem 0.8rem #ff835e33;
}

/* 1段目：画像(1/3) + 見出し(2/3) を横並び */
#top-sec03-recommend section>div:first-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center;
}

/* 画像はボックスいっぱいに・はみ出しトリミング */
#top-sec03-recommend section>div:first-child img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  /* 好みで 1/1 や 16/9 に変更可 */
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}

#top-sec03-recommend section>div:last-child {
  margin-top: 1rem;
  background: #fff;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.25rem;
}

/* タイトルと本文の体裁 */
#top-sec03-recommend section>div:last-child h4 {
  margin: 0 0 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px dotted var(--primary);
}

#top-sec03-recommend section>div:last-child p {
  margin: 0;
  line-height: 1.9;
  color: #4b5563;
}

@media (max-width: 768px) {
  #top-sec03-recommend section>div:first-child {
    grid-template-columns: 1fr;
  }

  #top-sec03-recommend section>div:first-child img {
    height: auto;
    aspect-ratio: auto;
  }
}

/* 選ばれる理由 ====================================== */

/* ====== PC：2列×3行のグリッド ====== */
#top-sec04-recommend .flex {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 2カラム */
  gap: 40px;
  align-items: start;
  justify-items: stretch;
  /* ← 各セルを同じ幅にする */
  /* PC：2列グリッドのまま、各行のアイテムを上下中央揃え */
  align-items: center;
  /* ← これだけでOK（start→center） */
}

/* 各項目：画像1 / テキスト2 の比率（= 幅の約1/3 : 2/3） */

.column-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  align-items: center;
  justify-items: center;
  /* 横中央 */
  padding: 16px;
  border-radius: 12px;
  background: none;
  border: none;
  box-shadow: none;
}

/* 要素が空なら無視（スタイル解除） */
.column-2:empty {
  display: none;
}

/* 画像側 */
.column-2>div:first-child {
  overflow: hidden;
  border-radius: 10px;
}

.column-2>div:first-child img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  /* 比率を揃えて見た目安定 */
  object-fit: cover;
  display: block;
}

/* 見出し/本文 */
.column-2 h3 {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.4rem);
  line-height: 1.35;
}

.column-2 p {
  margin: 0;
  line-height: 1.9;
  color: #333;
}

/* ====== スマホ：1列縦並び。ただし画像と説明は横並び ====== */
@media (max-width: 768px) {
  .flex {
    grid-template-columns: 1fr;
    /* 1カラム */
    gap: 24px;
  }

  /* 項目内レイアウトは横並びのまま 1:1 に */
  .column-2 {
    grid-template-columns: 1fr 1fr;
    /* 画像:説明=1:1 */
    gap: 12px;
  }

  /* 画像を正方形に固定。テキストが長くても画像は伸びない */
  .column-2>div:first-child {
    aspect-ratio: 1 / 1;
    /* 正方形 */
    align-self: start;
    /* 行全体が高くなっても画像は伸びない */
  }

  .column-2>div:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 正方形内にトリミング */
    display: block;
  }
}

/* ====== 超ワイド画面の中央寄せ ====== */
@media (min-width: 1200px) {
  .flex {
    max-width: 1100px;
    margin: 0 auto;
  }
}

.flex> :last-child {
  grid-column: auto / span 1;
  /* 最後の項目も半分幅で固定 */
}

/* 共通：幅統一・ボーダーなし・画像上/テキスト下の基本 */
.grid-container {
  display: grid;
  gap: 50px;
}

.column-2 {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  /* モバイルの縦並び */
  gap: 10px;
}

.column-2 img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* テキストブロック内も常に縦積み（h3→p） */
.column-2>div:last-child {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- PC表示 --- */
@media (min-width: 1024px) {

  /* 左3縦 + 右2縦（右は上下中央） */
  .grid-container {
    grid-template-columns: 1fr 1fr;
    /* 左右等幅（カード幅も統一） */
    align-items: stretch;
  }

  .grid-left,
  .grid-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .grid-right {
    justify-content: center;
  }

  /* 各カード：画像左・テキスト右（内部2列） */
  .column-2 {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: flex-start;
    gap: 20px;
  }
}

/* --- スマホ表示（2・2・1） --- */
@media (max-width: 1023px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-items: center;
  }

  .grid-container>.column-2 {
    width: 100%;
  }

  /* 幅は各カード任せに */

  /* wrapperをフラット化して5枚を連続並びに */
  .grid-left,
  .grid-right {
    display: contents;
  }

  /* 最後の1枚だけ中央寄せ（見た目は“1枚だけ真ん中”） */
  .grid-right>.column-2:last-child,
  .grid-container>.column-2:last-child {
    grid-column: 1 / -1;
    /* 2列をまたぐ */
    width: calc((100% - 20px) / 2);
    /* 2列の1枚分の幅に揃える（gap=20px前提） */
    justify-self: center;
  }
}

/* 料金プラン ===========================================
  - PC：マトリクス表（白）／SP：カード（白）
  - レギュラー：本文側を淡いピンク、見出し帯は secondary
  - highlight-light / highlight-regular で項目に色付け
====================================================== */

/* ===== 0) 共通（PC/SP 両方で使う “一度だけ” の定義） ===== */

/* 表示切替の初期値：両方隠し、メディアクエリで出し分け */
.top_rn .plan-matrix,
.top_rn #plans {
  display: none;
}

/* “含まれる内容” は PC=tfoot, SP=.plan-includes で片方だけ表示 */
.top_rn .plan-matrix tfoot,
.top_rn .plan-includes {
  display: none !important;
}

/* プラン周辺は白ベースに（背景グラデ等を無効化） */
#page_contents.top_rn .panel-row-style:has(.plan-matrix),
#page_contents.top_rn .panel-row-style:has(#plans),
#page_contents.top_rn .panel-row-style:has(.plan-includes),
#page_contents.top_rn #recommend,
#page_contents.top_rn #recommend:has(#plans),
.top_rn .plan-includes+.panel-row-style,
.top_rn #plans+.panel-row-style {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}


/* ===== 追加: 項目ごとの色付けクラス ===== */

/* ライト・パーフェクト用（薄いオレンジ） */
.highlight-light {
  background-color: #ffe8cc;
  /* 薄めのオレンジ */
  padding: 4px 8px;
}

/* レギュラー用（濃いピンク） */
.highlight-regular {
  background-color: #f7c0d6;
  /* 薄めだけど少し濃いピンク */
  padding: 4px 8px;
}

/* ===== 1) PC：マトリクス表 ================================= */

.top_rn .plan-matrix {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  overflow: hidden;
  margin: 0 0 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
}

/* ヘッダー帯（色は後述で列ごとに上書き） */
.top_rn .plan-matrix thead th {
  padding: 14px 12px;
  text-align: center;
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
  border-right: 1px solid rgba(255, 255, 255, .25);
  font-size: 1rem;
}

.top_rn .plan-matrix thead th:last-child {
  border-right: none;
}

/* 1列目（ラベル列）は白地・左寄せ */
.top_rn .plan-matrix thead th.label {
  background: #fff;
  color: #333;
  text-align: left;
  padding-left: 1.25rem;
}

/* 見出し色：ライト＆パーフェクト=primary、レギュラー=secondary */
.top_rn .plan-matrix thead th:nth-child(2),
.top_rn .plan-matrix thead th:nth-child(4) {
  background: var(--primary);
}

.top_rn .plan-matrix thead th.is-recommended {
  background: var(--secondary);
  font-size: 1.5rem;
  /* 見出しジャンプ率 */
  font-weight: 900;
}

/* ヘッダー内バッジ（お手軽/おすすめ/しっかり） */
.top_rn .plan-matrix thead th .badge {
  display: block;
  width: max-content;
  margin: 0 0 4px 0;
  background: #fff;
  color: #333;
  font-weight: 800;
  border-radius: 999px;
  font-size: .75rem;
  padding: .15em .55em;
}

/* 本体セル */
.top_rn .plan-matrix th.row-label,
.top_rn .plan-matrix td {
  padding: 18px 12px;
  border-top: 1px solid rgba(0, 0, 0, .12);
  border-right: 1px solid rgba(0, 0, 0, .08);
  background: #fff;
  text-align: center;
  vertical-align: middle;
}

.top_rn .plan-matrix tbody tr td:last-child {
  border-right: none;
}

/* 左のラベル列 */
.top_rn .plan-matrix th.row-label {
  text-align: left;
  padding-left: 1.25rem;
  font-weight: 800;
  color: #555;
}

/* 金額行を少し強調 */
.top_rn .plan-matrix tbody tr:last-child td {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  font-weight: 800;
}

/* PC：レギュラー列の本文側だけ淡いピンク */
@media (min-width:769px) {
  .top_rn .plan-matrix tbody td:nth-child(3) {
    background: #fff5f8 !important;
  }
}

/* tfoot：PCで表示（SPでは別ボックス） */
.top_rn .plan-matrix tfoot .includes-cell {
  background: #fff;
  padding: 1.2rem 1.25rem;
  text-align: center;
  border-top: 2px solid rgba(0, 0, 0, .08);
}

.top_rn .plan-matrix tfoot #plan-includes-title,
.top_rn #plan-includes-title {
  color: #333 !important;
  font-weight: 800;
  text-align: center !important;
  font-size: 1.2rem;
  margin: 0 0 .6rem;
}

/* “含まれる内容” 共通リスト体裁（PC/SP共用） */
.top_rn .includes-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  text-align: left;
}

.top_rn .includes-list li {
  position: relative;
  margin: .35em 0;
  padding-left: 1.4em;
  line-height: 1.8;
  color: #333;
}

.top_rn .includes-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(.05em);
  font-weight: 900;
  color: var(--accent-dark);
  opacity: .65;
}

/* ===== 2) SP：カード（#plans） =============================== */

.top_rn #plans {
  padding: 16px;
  text-align: center;
}

/* 各カードの箱 */
.top_rn .plan-table {
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
  overflow: hidden;
  /* 角丸を見せる */
  position: relative;
}

.top_rn .plan-table>dt,
.top_rn .plan-table>dd {
  margin: 0;
  line-height: 1.4;
}

/* 見出し帯（レギュラーだけ secondary） */
.top_rn .plan-table>dt:first-of-type {
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  padding: 14px 12px;
  font-size: clamp(1rem, .9rem + .5vw, 1.2rem);
  letter-spacing: .03em;
}

.top_rn .plan-table.is-recommended>dt:first-of-type {
  background: var(--secondary);
}

/* 見出し上のバッジ（縦並び・小さめ／SPのみ） */
@media (max-width:768px) {
  .top_rn .plan-table>dt:first-of-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .top_rn .plan-table>dt:first-of-type>span {
    display: inline-block;
    white-space: nowrap;
    font-size: .78rem;
    padding: .2em .65em;
    max-width: 7em;
    border-radius: 999px;
    background: #fff;
    color: #333;
    margin: 0;
  }
}

/* 項目/値の行 */
.top_rn .plan-table>dt:not(:first-of-type),
.top_rn .plan-table>dd {
  padding: 14px 16px;
  /* background: #fff; */
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, .12);
}

.top_rn .plan-table>dt:not(:first-of-type) {
  font-weight: 700;
}

/* SP：おすすめカードだけカード地を淡いピンク（内側の行は白） */
@media (max-width:768px) {
  .top_rn #plans .plan-table.is-recommended {
    background: #fff5f8 !important;
  }

  /* 見出し文字を少し強調（おすすめだけ） */
  .top_rn #plans .plan-table.is-recommended>dt:first-of-type {
    font-size: 1.22rem !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
  }
}

/* ===== 3) PC/SP の “出し分け” を一箇所に集約 ================= */

/* PC：表を表示（tfoot も表示）、SPボックスは非表示 */
@media (min-width:769px) {
  .top_rn .plan-matrix {
    display: table !important;
  }

  .top_rn .plan-matrix tfoot {
    display: table-footer-group !important;
  }

  .top_rn #plans {
    display: none !important;
  }

  .top_rn .plan-includes {
    display: none !important;
  }
}

/* SP：カード群＋含まれる内容を表示、表は非表示 */
@media (max-width:768px) {
  .top_rn #plans {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .top_rn .plan-includes {
    display: block !important;
    text-align: center;
  }

  .top_rn .plan-matrix,
  .top_rn .plan-matrix tfoot {
    display: none !important;
  }
}


/* ステップ ====================================== */

/* コンテナ */
#top-sec06-recommend {
  position: relative;
}

#top-sec06-recommend .flex {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 30px;
}

.step {
  display: grid;
  justify-items: center;
  /* 番号とh3を中央寄せ */
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0;
  background: #fff;
  border: 1px solid var(--primary);
  border-radius: 16px;
  padding: 16px;
}

/* 01（丸アイコン） */
.step>span {
  display: grid;
  place-items: center;
  /* 数字を中央に */
  width: clamp(48px, 10vw, 72px);
  /* 円の直径：48～72px */
  height: clamp(48px, 10vw, 72px);
  border-radius: 50%;
  background: var(--primary);
  /* ●で囲む＝塗りつぶし */
  color: #fff;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  /* 01,02…の桁揃え */
  font-size: clamp(22px, 5vw, 28px);
  /* 数字自体の大きさ */
  box-shadow: 0 0.25rem 0.6rem rgba(205, 127, 63, 0.35);
  z-index: 1;
}

/* 見出し：18～20px */
.step h3 {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 20px);
  line-height: 1.25;
  text-align: center;
}

.step p {
  margin: 0.25rem 0 0;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.8;
  color: #4b5563;
  max-width: 62ch;
  text-align: left;
}

/* ---- PC/タブレット：横一本の白線 ---- */
#top-sec06-recommend::before {
  content: "";
  position: absolute;
  left: 14%;
  top: 54px;
  /* 丸の中心を通す */
  height: var(--line-w);
  width: 66.7%;
  background: var(--line);
  pointer-events: none;
}

/* 既存の.stepのスタイルはそのまま。スマホ時だけ横並びに */
@media (max-width: 780px) {
  #top-sec06-recommend .flex {
    flex-wrap: wrap;
  }

  .step {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-auto-rows: auto;
    gap: 0.5rem 1rem;
    justify-items: stretch;
    align-items: center;
  }

  /* 左の数字（丸アイコン）を2行ぶんにまたがせる */
  .step>span {
    grid-column: 1;
    grid-row: 1 / span 2;
    /* h3 と p の縦2行に対応 */
    justify-self: center;
    /* 左カラム中央に配置 */
  }

  /* 右側のボックス（h3 + p） */
  .step h3 {
    grid-column: 2;
    text-align: left;
    margin: 0 0 0.25rem;
  }

  .step p {
    grid-column: 2;
    text-align: left;
    /* 本文は読みやすく左寄せ */
    margin: 0;
  }

  #top-sec06-recommend::before {
    left: calc(25% / 2);
    top: 18%;
    width: var(--line-w);
    height: 64%;
    pointer-events: none;
  }
}

@media (max-width: 600px) {
  #top-sec06-recommend::before {
    left: calc(25% / 2);
  }
}