@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);
  }

  #page_contents.top_rn .center .top-copy {
    font-size: 1.1em;
  }

  .top_rn h2 {
    font-size: 1.75em;
  }
}

/* ファーストビュー */
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;
  /* ← ここだけ中央寄せ */
}

#top-sec02-recommend-second {
  display: flex;
  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: 2;
  /* ← 白い円より前面 */
  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;
  z-index: 1;
  /* 画像より背面 */
  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;
}

/* ===== PCレイアウト ===== */
@media (min-width:1025px) {

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

  /* 下段（id指定）：3つ横並びにピタッと */
  #top-sec02-recommend-second {
    display: flex;
    justify-content: center;
    gap: 64px 32px;
    /* 左右の隙間を少し狭める */
  }

  #top-sec02-recommend-second .panel-grid-cell {
    flex: 0 1 calc((100% - 64px)/3);
    /* 3カラム分割 - gap分 */
  }

#top-sec02-recommend-second .panel-grid-cell:empty {
  display: none;
}

#top-sec02-recommend-secondwo {
  margin: 0 auto;
  width: fit-content; /* または固定幅を指定 */
  display: block;
}

}

@media (max-width:1024px) {

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

  /* 下段（id指定）：3つ横並びにピタッと */
  #top-sec02-recommend-second {
    display: flex;
    justify-content: center;
    gap: 64px 32px;
    /* 左右の隙間を少し狭める */
  }

  #top-sec02-recommend-second .panel-grid-cell {
    flex: 0 1 calc((100% - 64px)/3);
    /* 3カラム分割 - gap分 */
  }

}

/* ===== スマホ（～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 {
    flex: 0 1 calc((100% - 64px)/2);
    /* 3カラム分割 - gap分 */
  }

  /* 行（row）自体を均等 2 列に */
  #top-sec02-recommend-first,
  #top-sec02-recommend-second {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    /* 中央寄せ */
    gap: 10vw 6vw;
    /* たて／横の隙間 */
  }


    .panel-grid.panel-has-style > #top-sec02-recommend.panel-row-style {


  /* 各セル＝幅 50 % – gap ぶん（2 列） */
  /*#top-sec02-recommend-first .panel-grid-cell,
  #top-sec02-recommend-second .panel-grid-cell {
    flex: 0 1 calc(50% - 6vw) !important;
    max-width: calc(50% - 6vw) !important;
  }*/

  /* 3行目の“1 個だけ”を中央に寄せる */
  /*#top-sec02-recommend-second .panel-grid-cell:last-child {
    margin-inline: auto !important;
  }*/

  /* 画像も白丸も幅を 38vw に揃えて少し大きく */
  /*.top_rn .top-sec02-recommend .sow-image-container img,
  .top_rn .top-sec02-recommend .panel-grid-cell .widget_custom_html .textwidget {
    width: 38vw !important;
  }*/

  /* 白丸の被せ具合を微調整（画像に食い込む量） */
  /*.top_rn .top-sec02-recommend .panel-grid-cell .widget_custom_html .textwidget {
    transform: translateY(-34%) !important;
  }*/

  /* 下余白が広過ぎるセルを詰める */
/*  .top_rn .top-sec02-recommend .panel-grid-cell {
    margin-bottom: 4vw !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: 2;
  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;
  }
}

/* 選ばれる理由 ====================================== */
#top-sec04-recommend .flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 30px;
}

.column-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  /* ← 1:2 = 1/3 : 2/3 */
  gap: 1.25rem;
  align-items: stretch;
  width: 100%;
}

/* 画像側のボックス */
.column-2>div:first-child {
  overflow: hidden;
  border-radius: 0.5rem;
}

/* 画像をボックスいっぱいにカバー */
.column-2>div:first-child img {
  width: 300px;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  #top-sec04-recommend .flex {
    flex-wrap: wrap;
  }
}

/* 選ばれる理由セクション */

/* ====== PC：2列×3行のグリッド ====== */
.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 > * {
    display: flex;
    align-items: center;
    justify-content: center;
}*/

/* 要素が空なら無視（スタイル解除） */
.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;
  /* 最後の項目も半分幅で固定 */
}



/* 料金プラン ====================================== */
/* ----------------------------------------------------
  料金プラン一式
  - PC：3カラム／SP：縦積み
  - コンテナは薄いオレンジ、カードは白
  - レギュラーのみ本文側を薄いピンク、見出し帯はsecondary
---------------------------------------------------- */
/* ===== 色（既にあれば省略可） ===== */
:root {
  --primary: #ff9242;
  --secondary: #cd3f7c;
  --accent-dark: #a72f63;
  --ink: #333;
}

/* ===== 表示の出し分け：まず両方OFF → メディアクエリで片方だけON ===== */
.top_rn .plan-matrix,
.top_rn #plans {
  display: none;
}

/* SP/タブレット：カード（#plans）だけ表示 */
@media (max-width:768px) {
  .top_rn #plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* PC：マトリクス表だけ表示 */
@media (min-width:769px) {
  .top_rn .plan-matrix {
    display: table;
  }
}

/* =========================
   PC：マトリクス表（白背景）
   ========================= */
.top_rn .plan-matrix {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
  margin: 0 0 16px;
}

/* ヘッダー */
.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);
}

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

.top_rn .plan-matrix thead th.label {
  text-align: left;
  padding-left: 1.25rem;
  background: var(--primary);
}

.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);
}

/* バッジ（お手軽/おすすめ/しっかり）—帯内で左寄せ・改行 */
.top_rn .plan-matrix thead th .badge {
  display: block;
  width: max-content;
  margin: 0 0 4px 0;
  color: #333;
  background: #fff;
  font-weight: 800;
  padding: .2em .6em;
  border-radius: 999px;
}

/* 本体セル */
.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;
  background: #faf7f5;
  color: #555;
}

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

/* 角丸（外枠） */
.top_rn .plan-matrix thead th:first-child {
  border-top-left-radius: 16px;
}

.top_rn .plan-matrix thead th:last-child {
  border-top-right-radius: 16px;
}

/* tfoot：共通で含まれる内容（白背景の一体セル） */
.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 {
  color: #333;
  font-weight: 800;
  font-size: 1.2rem;
  margin: 0 0 .6rem;
}

.top_rn .plan-matrix tfoot .includes-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  text-align: left;
}

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

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

/* =========================
   SP：カード（白背景）
   ========================= */
.top_rn #plans {
  /* background: #fff;
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .05); */
  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: visible;
  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;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

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

/* バッジ：帯内で左寄せ・改行 */
.top_rn .plan-table>dt:first-of-type>span {
  display: block;
  text-align: left;
  margin: 0 0 4px 0;
  color: #333;
  background: #fff;
  font-weight: 800;
  padding: .2em .6em;
  border-radius: 999px;
}

/* 項目/値 */
.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;
}

.top_rn .plan-table>dt:nth-of-type(3)+dd {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
  font-weight: 800;
}

/* =========================
   SPの「含まれる内容」ボックス（白）
   ========================= */
.top_rn .plan-includes {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  padding: 1.2rem 1.25rem;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
  margin-top: 0;
}

.top_rn #plan-includes-title {
  color: #333;
  font-weight: 800;
  margin: 0 0 .6rem;
}

.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;
}



/***** 1) プラン周りの「ピンクのグラデ背景」を完全に無効化 *****/
/* SiteOrigin等の行コンテナが背景を持っている想定。プラン周辺は強制で白に。 */
#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) {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  color: inherit !important;
  padding-block: revert-layer;
  /* 余白はテーマに任せる（なければ無視されます） */
}

/* スマホで“表の下にピンク帯が残る”保険：直後の空行や装飾行も無効化 */
.top_rn .plan-includes+.panel-row-style,
.top_rn #plans+.panel-row-style {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/***** 2) PC/スマホで「含まれる内容」を重複させない（PC=tfoot、SP=.plan-includes） *****/
.top_rn .plan-matrix tfoot,
.top_rn .plan-includes {
  display: none !important;
}

@media (min-width: 769px) {

  /* PC：表のtfootだけ表示 */
  .top_rn .plan-matrix tfoot {
    display: table-footer-group !important;
  }

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

@media (max-width: 768px) {

  /* SP：別ボックスだけ表示 */
  .top_rn .plan-matrix tfoot {
    display: none !important;
  }

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

/***** 3) 背景はPC/スマホとも「全部白」に固定（プラン表・カード・含まれる内容） *****/
.top_rn .plan-matrix,
.top_rn .plan-matrix th,
.top_rn .plan-matrix td,
.top_rn .plan-matrix tfoot .includes-cell,
.top_rn #plans,
.top_rn .plan-table,
.top_rn .plan-includes {
  background: #fff;
}

/* 罫線・角丸は維持 */
.top_rn .plan-matrix,
.top_rn #plans,
.top_rn .plan-includes {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
}

/* tfoot の見出しとリスト（PC側） */
.top_rn .plan-matrix tfoot #plan-includes-title,
.top_rn #plan-includes-title {
  color: #333 !important;
  font-weight: 800;
}

/***** 4) 表示の出し分け（最終確定）：PC=表、SP=カード *****/
.top_rn .plan-matrix,
.top_rn #plans {
  display: none !important;
}

@media (min-width: 769px) {
  .top_rn .plan-matrix {
    display: table !important;
  }
}

@media (max-width: 768px) {
  .top_rn #plans {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* 見出し行だけ色を戻す（表全体は白のまま） */
.top_rn .plan-matrix thead th {
  color: #fff !important;
  font-weight: 800;
}

/* 1列目（項目ラベル）は白背景のまま＋文字色 #333 */
.top_rn .plan-matrix thead th.label {
  background: #fff !important;
  color: #333 !important;
  text-align: left;
  padding-left: 1.25rem;
}

/* ライト＆パーフェクト列 = primary */
.top_rn .plan-matrix thead th:nth-child(2),
.top_rn .plan-matrix thead th:nth-child(4) {
  background: var(--primary) !important;
}

/* レギュラー列だけ secondary */
.top_rn .plan-matrix thead th.is-recommended {
  background: var(--secondary) !important;
}

/* バッジ（お手軽/おすすめ/しっかり）は帯内で左寄せ・白地 */
.top_rn .plan-matrix thead th .badge {
  display: block;
  width: max-content;
  margin: 0 0 4px 0;
  background: #fff;
  color: #333;
  font-weight: 800;
  padding: .2em .6em;
  border-radius: 999px;
}

/* =========================
   表示の出し分け：PC=表／SP=カード
========================= */
.top_rn .plan-matrix,
.top_rn #plans {
  display: none;
}

@media (max-width:768px) {
  .top_rn #plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (min-width:769px) {
  .top_rn .plan-matrix {
    display: table;
  }
}


/* =========================
   PC：マトリクス表（白）
========================= */
.top_rn .plan-matrix {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
  margin: 0 0 16px;
}

/* ヘッダー帯 */
.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;
}

.top_rn .plan-matrix thead th.label {
  background: #fff;
  color: #333;
  text-align: left;
  padding-left: 1.25rem;
}

.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;
  background: #fff;
  color: #555;
}

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

/* おすすめ列（本文側を淡いピンク） */
.top_rn .plan-matrix td:nth-child(3) {
  background: #fff5f8;
}

/* tfoot：含まれる内容（PCでは表の一体セルとして表示） */
.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 {
  color: #333;
  font-weight: 800;
  font-size: 1.2rem;
  margin: 0 0 .6rem;
}

.top_rn .plan-matrix tfoot .includes-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  text-align: left;
}

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

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

/* PC/SPで“含まれる内容”の重複を防ぐ：PC=tfoot、SP=.plan-includes */
.top_rn .plan-matrix tfoot,
.top_rn .plan-includes {
  display: none;
}

@media (min-width:769px) {
  .top_rn .plan-matrix tfoot {
    display: table-footer-group;
  }
}

@media (max-width:768px) {
  .top_rn .plan-includes {
    display: block;
  }
}

/* =========================
   SP：カード（#plans）— 白／角丸／バッジ縦並び
========================= */
.top_rn #plans {
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
  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);
}

/* バッジを見出しの上に縦並び＆小さめに */
@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;
    margin: 0;
    white-space: nowrap;
    font-size: .78rem;
    padding: .2em .65em;
    border-radius: 999px;
    background: #fff;
    color: #333;
    max-width: 7em;
  }
}

/* 項目/値 */
.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;
  }

}

/* =========================
   SP：「含まれる内容」をカード群と連結（1つの箱に見せる）
========================= */
@media (max-width:768px) {
  .top_rn #plans {
    border-radius: 16px 16px 0 0 !important;
    /* 上だけ角丸 */
    margin: 0 !important;
  }

  .top_rn .plan-includes {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    margin-top: -1px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
    text-align: center;
    padding: 1.2rem 1.25rem;
  }
}


/* ====== 0) 表示切替の最終確定（重複防止） ====== */
.top_rn .plan-matrix tfoot,
.top_rn .plan-includes {
  display: none !important;
}

@media (min-width:769px) {
  .top_rn .plan-matrix tfoot {
    display: table-footer-group !important;
  }

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

@media (max-width:768px) {
  .top_rn .plan-matrix tfoot {
    display: none !important;
  }

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

/* ====== 1) PC：おすすめ列の本文を淡いピンクに（強制） ====== */
@media (min-width:769px) {
  .top_rn .plan-matrix tbody td:nth-child(3) {
    background: #fff5f8 !important;
  }
}

/* ====== 2) SP：カードの角丸＆連結を確実に ====== */
@media (max-width:768px) {

  /* 各カードの下角丸が欠けないように */
  .top_rn .plan-table {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
  }

  /* 上：カード群の箱（上だけ角丸） */
  

  /* 下：「含まれる内容」の箱（下だけ角丸） */
  
}

/* ====== 3) 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;
  }

}


/* ====== 4) 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 !important;
    font-size: .78rem !important;
    padding: .2em .65em !important;
    max-width: 7em !important;
    white-space: nowrap;
    margin: 0 !important;
    background: #fff;
    color: #333;
    border-radius: 999px;
  }
}


/* === スマホ：おすすめカードの地色を淡ピンクに“必ず”する === */
@media (max-width:768px) {

  /* おすすめだけ淡いピンクに上書き */
  .top_rn #plans .plan-table.plan-table.is-recommended {
    /* 自己重ねで特異性UP */
    background: #fff5f8 !important;
    /* お好みで #fff9fb でもOK */
  }


  /* 見出しをスマホで強調（おすすめだけ） */
  .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;
  }

  */

  /* バッジは見出しの上に縦並び＆小さめ（再掲） */
  .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 !important;
    font-size: .78rem !important;
    padding: .2em .65em !important;
    max-width: 7em !important;
    white-space: nowrap;
    margin: 0 !important;
    background: #fff;
    color: #333;
    border-radius: 999px;
  }

  /* カード群(#plans)と「含まれる内容」連結＆下角丸の復活（保険） */
  .top_rn #plans {
    background: none;
    border: none;
    border-radius: none;
    margin: 0;
    box-shadow: none;
    padding: 0;
  }

  .top_rn .plan-includes {
    background: none;
    border: none;
    border-top: 0 ;
    border-radius:none;
    margin-top: -1px !important;
    /* つなぎ目ゼロ */
    box-shadow: none;
  }

  /* 表・カードを包んでいる row コンテナ自体の背景を消す */
  .top_rn .panel-row-style:has(.plan-matrix),
  .top_rn .panel-row-style:has(#plans),
  .top_rn .panel-row-style:has(.plan-includes) {
    background: none !important;
    box-shadow: none !important;
  }

  /* “含まれる内容” ボックスの外側にさらに余白がある場合は詰める */
  .top_rn .panel-row-style:has(.plan-includes)+.panel-row-style {
    margin-top: 0 !important;
    background: none !important;
    box-shadow: 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);
  }
}