@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.75em;
  }
}

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

/* こんな方におすすめ ====================================== */
.top_rn #top-sec02-recommend {
  text-align: center;
}
.top_rn #top-sec02-recommend img {
  border-radius: 50%;
  border: 10px solid #ff9242;
}
.top_rn #top-sec02-recommend div:has(> h4) {
  width: auto;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -72%;
  box-shadow: 0 6px 16px #ffb681cf;
}
.top_rn #top-sec02-recommend h4 {
  margin-top: 60%;
  font-size: clamp(1rem, 0.882rem + 0.59vw, 1.25rem);
}

@media (max-width: 1023px) {
  .panel-grid.panel-has-style > #top-sec02-recommend.panel-row-style {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-justify-content: space-between;
    flex-direction: row;
    justify-content: center;
    gap: 4vw;
  }
  .panel-grid.panel-has-style
    > #top-sec02-recommend.panel-row-style
    > .panel-grid-cell {
    width: calc(50% - 2vw);
    margin-bottom: 0;
  }
  .top_rn #top-sec02-recommend div:has(> h4) {
    margin-top: -30vw;
  }
  .top_rn #top-sec02-recommend h4 {
    margin-top: 22vw;
  }
}

/* キャンペーンリボン ====================================== */
.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;
  }
}

/* 料金プラン ====================================== */

/* BEST：バッジ */
.plan-ribbon {
  position: absolute;
  top: -20px;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.7em;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--secondary);
  background: #fff;
  border: solid 2px var(--secondary);
  border-radius: 999px; /* ピル型 */
  width: max-content;
  margin-bottom: 0.5rem;
}
.plan-ribbon::before {
  content: "★";
  font-size: 1em;
  line-height: 1;
  opacity: 0.9;
}

/* 見出し：20～48pxの範囲でレスポンシブ */
h3 {
  margin: 0.25rem 0 0.25rem;
  font-weight: 900;
  color: var(--ink);
  font-size: clamp(1.25rem, 1.132rem + 0.59vw, 1.5rem);
  line-height: 1.15;
}

/* 価格：やや小さめ＆控えめ */
.price {
  margin: 0.25rem 0 0.5rem;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  color: var(--muted);
  font-weight: 700;
}

/* 小さなピル（おすすめ！など） */
.pill {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.2em 0.7em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  background: #fff;
  border: 1px solid rgba(205, 63, 124, 0.35);
  border-radius: 999px;
}

/* 補足テキスト（mini） */
.mini {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* 本文ボックス：小さめ＆目立たせない・薄い背景色 */
.plan__body {
  margin-top: 0.5rem;
  padding: 1rem 1.1rem;
  font-size: 0.9rem;
  color: #c56b4e;
  background: #fffbe3;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0.6rem;
}

/* リストの見た目（控えめなチェック） */
.plan__body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.plan__body li {
  position: relative;
  padding-left: 1.25em;
  line-height: 1.7;
}
.plan__body li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(0.1em);
  font-weight: 900;
  color: var(--accent-dark);
  opacity: 0.6;
}

#recommend {
  position: relative;
  background: linear-gradient(180deg, #e73e64, #b90a59);
  border-radius: 24px;
  padding: 40px 16px 16px;
  color: #fff;
  box-shadow: 0 0.25rem 0.6rem rgba(205, 63, 124, 0.35);
}
#recommend h3 {
  font-size: 3em;
  color: #fff;
}
#recommend .mini,
#recommend .price {
  color: #ffdede;
}
#recommend .price {
  font-size: 1.2em;
  margin-top: -2em;
  text-align: right;
}
#recommend .plan__body {
  font-size: 1rem;
  color: #9f0225;
  background: #fff9fb;
}

@media (max-width: 768px) {
  #recommend h3 {
    font-size: 2em;
  }
  .top_rn #recommend .price {
    margin-top: 0;
    text-align: right;
  }
}

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

/* コンテナ */
#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);
  }
}