@charset "utf-8";

/*	変数
---------------------------------*/
:root {
  /* Color */
  --c-primary: #16a4ba;
  --c-navy: #162d3a;
  --c-deep: #10333d;
  --c-yellow: #fbe94a;
  --c-gray-text: #5c7480;
  --c-gray-sub: #7b8b93;
  --c-gray-note: #8299a1;
  --c-pink: #e8536b;
  --c-blue: #0d78d9;
  --c-red: #eb6170;
  --c-bg-light: #f2f4f5;
  --c-bar-bg: #dde6e8;
  --c-grad: linear-gradient(130deg, #e6f7fa 0%, #f4fbef 100%);

  /* Font */
  --font-num: "Inter", sans-serif;

  /* Radius */
  --r-card: 24px;
  --r-figure: 22px;
  --r-pill: 999px;

  /* Layout */
  --header-h: 50px;
}

body {
  color: var(--c-navy);
}

[id] {
  scroll-margin-top: calc(var(--header-h) + 10px);
}

/*	セクション共通
---------------------------------*/
.section {
  padding-block: 56px;
}

.section--soft {
  background: var(--c-bg-light);
}

/* 小見出し（ターコイズ＋下線） */
.eyebrow {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 14px;
  color: var(--c-primary);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

.eyebrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--c-primary);
}

/* h2 */
.ttl-cmn {
  margin-bottom: 20px;
  color: var(--c-deep);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
}

/* リード文 */
.lead {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
}

/* 注記 */
.source {
  margin-top: 24px;
  color: var(--c-gray-note);
  font-size: 1.25rem;
  line-height: 1.8;
}

/*	CTAボタン
---------------------------------*/
.btn-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-inline: auto;
  padding: 8px 52px 8px 10px;
  border: 1px solid var(--c-navy);
  border-radius: var(--r-pill);
  background: var(--c-yellow);
  box-shadow: 4px 4px 0 var(--c-navy);
  color: var(--c-deep);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.3;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* 「無料」バッジ：ネイビーの円 */
.btn-cta__badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-deep);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.btn-cta__txt {
  flex: 1;
  text-align: center;
}

/* 矢印：ネイビーの円に白い三角 */
.btn-cta__arrow {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-deep);
  line-height: 0;
  padding-left: 3px;
}

.btn-cta__arrow img {
  width: 10px;
}

.btn-cta:hover {
  opacity: 1;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--c-navy);
}
/*	CTAブロック（ボタン＋指アイコン）
---------------------------------*/
.cta-block {
  position: relative;
  margin-block: 32px 20px;
  max-width: 336px;
  min-height: 63px;
}

.cta-block__hand {
  position: absolute;
  right: -3px;
  bottom: 1px;
  z-index: 4;
  width: 30px;
  line-height: 0;
  pointer-events: none;
}
/*	ヘッダー（追従）
---------------------------------*/
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid rgba(31, 64, 84, 0.12);
}

.header__inr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
}

.header__logo {
  flex-shrink: 0;
  width: 128px;
  line-height: 0;
}

.header__logo img {
  width: 100%;
}

/* SPでは非表示。PCのみ表示 */
.btn-footer.header__cta {
  display: none;
}

/*	ハンバーガー
	※ 下層ページ追加時に index.html のコメントを外して復活させる
---------------------------------*/
.navToggle {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.navToggle span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: var(--c-navy);
  transition: 0.3s ease-in-out;
}

.navToggle span:nth-child(1) {
  top: 2px;
}
.navToggle span:nth-child(2) {
  top: 11px;
}
.navToggle span:nth-child(3) {
  top: 20px;
}

.open .navToggle span:nth-child(1) {
  top: 11px;
  transform: rotate(45deg);
}
.open .navToggle span:nth-child(2) {
  width: 0;
  left: 50%;
}
.open .navToggle span:nth-child(3) {
  top: 11px;
  transform: rotate(-45deg);
}

/*	FV
---------------------------------*/
.fv {
  overflow: hidden;
  padding-block: 20px 40px;
  background: #f6f6f6;
  border-bottom: 1px solid rgba(31, 64, 84, 0.12);
}

/*	ビジュアル（端末・コンパス・フキダシ）
---------------------------------*/
.fv__visual {
  position: relative;
  margin-bottom: 32px;
  z-index: 0;
}

/* 端末モックアップ：左寄せ */
.fv__mockup {
  position: relative;
  max-width: 500px;
  z-index: 5;
}

/* コンパス：端末の右下奥 */
.fv__compass {
  position: absolute;
  z-index: 1;
  top: 250px;
  left: 56%;
  right: auto;
  bottom: auto;
  width: 57%;
  line-height: 0;
  opacity: 1;
}

.fv__compass img {
  width: 100%;
}

.fv__body {
  position: relative;
  z-index: 5;
}

/*	テキスト
---------------------------------*/
.fv__sub {
  margin-bottom: 8px;
  color: var(--c-gray-sub);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6;
}

.fv__logo {
  width: 137px;
  margin-bottom: 10px;
  line-height: 0;
}

.fv__ttl {
  margin-bottom: 20px;
  color: var(--c-navy);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.44;
}

.fv__ttl .is-primary {
  color: var(--c-primary);
}

.fv__lead {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.86;
}

.fv__lead + .fv__lead {
  margin-top: 1.86em;
}

/* 注記 */
.fv__note {
  color: var(--c-gray-sub);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.9;
}

/*	01 どんな人と出会えるのか
---------------------------------*/
.figures {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}

.figure {
  padding: 20px 18px 24px;
  border-radius: var(--r-figure);
  background: var(--c-bg-light);
}

/* ラベル（黄色いピル） */
.figure__label {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 15px;
  border-radius: var(--r-pill);
  background: var(--c-yellow);
  color: var(--c-primary);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* 大きい数値 */
.figure__hero {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 4px;
  margin-bottom: 14px;
}

.figure__num {
  color: var(--c-primary);
  font-family: var(--font-num);
  font-size: 4.6rem;
  font-weight: 800;
  line-height: 1;
}

.figure__unit {
  color: var(--c-primary);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}

.figure__desc {
  margin-left: 8px;
  color: var(--c-deep);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
}

/* カード内の注記 */
.figure__note {
  margin-top: 14px;
  color: var(--c-gray-note);
  font-size: 1.05rem;
  line-height: 1.8;
}

/*	横棒グラフ
---------------------------------*/
.bar {
  overflow: hidden;
  height: 16px;
  border-radius: var(--r-pill);
  background: var(--c-bar-bg);
}

.bar__fill {
  display: block;
  width: var(--v);
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--c-primary);
}

/*	凡例
---------------------------------*/
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
}

.legend__item {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--c-gray-text);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

.legend__sw {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--c-bar-bg);
}

.legend__sw.is-on {
  background: var(--c-primary);
}

/*	平均年齢
---------------------------------*/
.avg {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.avg__item {
  flex: 1;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
}

.avg__ttl {
  margin-bottom: 8px;
  color: var(--c-primary);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}

.avg__val {
  color: var(--c-deep);
  font-family: var(--font-num);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}

.avg__unit {
  margin-left: 2px;
  font-family: var(--font-base);
  font-size: 1.4rem;
  font-weight: 700;
}

/*	円グラフ（学歴）
---------------------------------*/
.pies {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 4px;
}

.pie-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.pie svg {
  display: block;
  width: 100%;
  height: auto;
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  max-width: 200px;
}

.pie-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-gray-text);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}

.pie-legend b {
  margin-left: auto;
  color: var(--c-navy);
  font-family: var(--font-num);
  font-size: 1.5rem;
  font-weight: 800;
}

.pie-legend b i {
  margin-left: 1px;
  font-family: var(--font-base);
  font-size: 1.1rem;
  font-style: normal;
}

.pie-legend__sw {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--c);
}

.figure__caption {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.figure__caption strong {
  color: var(--c-primary);
  font-family: var(--font-num);
  font-size: 3.6rem;
  font-weight: 800;
}

.figure__caption strong .is-sm {
  font-family: var(--font-base);
  font-size: 2.4rem;
}

/*	年収
---------------------------------*/
.income {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
}

.income__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.income__ttl {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}

.income__row .bar {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 14px;
}

.income__val {
  font-family: var(--font-num);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  text-align: right;
}

.is-male .income__ttl,
.is-male .income__val {
  color: var(--c-blue);
}

.is-male .bar__fill {
  background: var(--c-blue);
}

.is-female .income__ttl,
.is-female .income__val {
  color: var(--c-red);
}

.is-female .bar__fill {
  background: var(--c-red);
}

/* 出典（中央寄せ） */
.source--center {
  text-align: center;
}

/*	02 出会うことの魅力
---------------------------------*/
.steps {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 32px;
}

.step {
  padding: 24px 20px 28px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: 0 10px 15px rgba(16, 51, 61, 0.07);
}

.step__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.step__num {
  color: var(--c-primary);
  font-family: var(--font-num);
  font-size: 4.8rem;
  font-weight: 800;
  line-height: 1;
}

.step__phase {
  color: var(--c-primary);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}

.step__ttl {
  margin-bottom: 12px;
  color: var(--c-deep);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}

.step__txt {
  color: var(--c-gray-text);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.78;
}
/*	03　成婚実績
---------------------------------*/
.proofs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}

.proof-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 34px 22px;
  border-radius: var(--r-card);
  background: var(--c-bg-light);
  text-align: center;
}

.proof-card__label {
  color: var(--c-navy);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
}

.proof-card__label strong {
  font-size: 2.1rem;
}

/*	バッジ（黄色い丸）
---------------------------------*/
.burst {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 150px;
  height: 150px;
  border: 2px solid var(--c-deep);
  border-radius: 50%;
  background: var(--c-yellow);
}

.burst__sm {
  color: var(--c-deep);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.burst__num {
  color: var(--c-deep);
  font-family: var(--font-num);
  font-size: 4.6rem;
  font-weight: 800;
  line-height: 1;
}

.burst__unit {
  color: var(--c-navy);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

/*	ドーナツグラフ
---------------------------------*/
.donut {
  width: 60%;
  max-width: 250px;
}
.donut svg {
  display: block;
  width: 100%;
  height: auto;
}

/*	ターコイズの帯
---------------------------------*/
.band {
  margin-top: 20px;
  padding: 24px 18px;
  border-radius: 20px;
  background: var(--c-primary);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}

/*	04 できること
---------------------------------*/
.feature-cards {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 32px;
}

.feature {
  overflow: hidden;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: 0 10px 30px rgba(16, 51, 61, 0.07);
}

/* ビジュアル（グラデ背景＋端末画像） */
.feature__visual {
  display: grid;
  place-items: center;
  padding: 24px 22px;
  background: var(--c-grad);
}

.feature__visual img {
  width: 126px;
  max-width: 100%;
  border-radius: 8px;
}

/* テキスト */
.feature__body {
  padding: 34px 28px 30px;
}

.feature__num {
  margin-bottom: 9px;
  color: var(--c-primary);
  font-family: var(--font-num);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
}

.feature__ttl {
  margin-bottom: 12px;
  color: var(--c-deep);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
}

.feature__txt {
  color: var(--c-gray-text);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.95;
}

/*	05 会員からの声
---------------------------------*/

/* 矢印 */
.voices__nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-block: 20px 10px;
}

.voices__arrow {
  position: relative;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.voices__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--c-primary);
  border-right: 2px solid var(--c-primary);
}

.voices__arrow--prev::before {
  transform: translate(-40%, -50%) rotate(-135deg);
}

.voices__arrow--next::before {
  transform: translate(-60%, -50%) rotate(45deg);
}

.voices__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* スライダー */
.voices__slider {
  margin-top: 16px;
  padding-inline: var(--container-gutter);
}

.voice-slider {
  overflow: visible;
}

/* カード */
.voice {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: auto;
  border-radius: var(--r-card);
  background: var(--c-bg-light);
}

.voice__visual {
  position: relative;
  aspect-ratio: 3 / 2;
  background: linear-gradient(150deg, #dff3f6 0%, #f2f8e9 100%);
}

.voice__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
}

.voice__body {
  flex: 1;
  padding: 32px 26px 29px;
}

.voice__ttl {
  margin-bottom: 10px;
  color: var(--c-deep);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
}

.voice__txt {
  margin-bottom: 16px;
  color: var(--c-gray-text);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.95;
}

.voice__link {
  text-align: right;
}

.voice__link a {
  color: #0e8ca0;
  font-size: 1.35rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.voices .source {
  margin-top: 24px;
}

/*	最終CTAセクション
---------------------------------*/
.action {
  padding-block: 58px;
  background: var(--c-grad);
  text-align: center;
}

.action__ttl {
  margin-bottom: 14px;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.42;
}

.action__ttl .is-primary {
  color: var(--c-primary);
}

.action__lead {
  margin-bottom: 40px;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2;
}
.action .cta-block {
  margin: 0 auto;
}
.action__kicker {
  color: var(--c-gray-text);
  margin-bottom: 5px;
}

/*	フッター
---------------------------------*/
.footer {
  padding-block: 40px 28px;
  background: var(--c-deep);
  color: #fff;
  text-align: center;
}

.footer__logo {
  width: 155px;
  margin: 0 auto 12px;
  line-height: 0;
}

.footer__logo img {
  filter: brightness(0) invert(1);
}

.footer__txt {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.9;
}

/* リンク */
.footer__nav {
  margin-top: 30px;
}

.footer__nav li {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 2.28;
}

.footer__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* フッターCTA */
.footer__cta {
  margin-top: 30px;
  text-align: center;
}

.btn-footer {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px 16px 16px;
  border: 2px solid var(--c-deep);
  border-radius: var(--r-pill);
  background: var(--c-yellow);
  color: var(--c-deep);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.btn-footer__badge {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--c-deep);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
}

/* コピーライト */
.copyright {
  margin-top: 40px;
  font-size: 1.15rem;
  font-weight: 400;
  text-align: center;
}

/* =========================================================
   PC（769px以上）
========================================================= */
@media screen and (min-width: 769px) {
  :root {
    --header-h: 79px;
  }

  .section {
    padding-block: 100px;
  }

  .header__logo {
    width: 198px;
  }

  .btn-footer.header__cta {
    display: inline-flex;
    flex-shrink: 0;
    padding: 10px 24px 10px 12px;
    font-size: 1.5rem;
    white-space: nowrap;
  }

  .eyebrow {
    font-size: 1.6rem;
  }

  .ttl-cmn {
    margin-bottom: 24px;
    font-size: 4rem;
  }

  .lead {
    font-size: 1.6rem;
  }

  .source {
    font-size: 1.4rem;
  }

  .navToggle {
    display: none;
  }

  .btn-cta {
    font-size: 2rem;
  }

  /*	FV（PC）
  ---------------------------------*/
  .fv {
    padding-block: 80px 30px;
  }

  .fv__inr {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    column-gap: 32px;
    align-items: start;
  }

  .fv__body {
    grid-column: 1;
    grid-row: 1;
    margin-left: 3vw;
  }

  .fv__visual {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  .fv__note {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 48px;
    font-size: 1.2rem;
  }
  .fv__sub {
    font-size: 1.6rem;
  }
  .fv__logo {
    width: 224px;
  }
  .fv__ttl {
    font-size: clamp(3.2rem, 4vw, 6rem);
    line-height: 1.42;
    white-space: nowrap;
  }
  .fv__lead {
    font-size: 1.6rem;
  }

  .fv__mockup {
    position: relative;
    margin-inline: 0;
    max-width: 550px;
  }

  /* コンパスは端末の右奥に */
  .fv__compass {
    position: absolute;
    top: -20%;
    left: -50%;
    width: 25vw;
    opacity: 1;
  }

  /*	01 どんな人と出会えるのか
   データカード（PC）
  ---------------------------------*/
  .figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    margin-top: 40px;
  }

  .figure {
    padding: 26px 26px 30px;
  }

  .figure__num {
    font-size: 5.6rem;
  }

  .figure__unit {
    font-size: 2.8rem;
  }

  .figure__desc {
    margin-left: 10px;
    font-size: 2.2rem;
  }

  .avg__val {
    font-size: 3.6rem;
  }
  /* 円グラフ（PC） */
  .pies {
    flex-direction: row;
    gap: 20px;
  }

  .pie-block {
    flex: 1;
    min-width: 0;
  }

  .pie-legend li {
    font-size: 1.3rem;
  }

  .pie-legend b {
    font-size: 1.6rem;
  }
  .figure__caption {
    font-size: 2rem;
  }

  .figure__caption strong {
    font-size: 3.6rem;
  }

  .figure__caption strong .is-sm {
    font-size: 2.2rem;
  }
  /*	02 出会うことの魅力
    ステップカード（PC）
  ---------------------------------*/
  .steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    margin-top: 40px;
  }

  .step {
    padding: 30px 30px 36px;
  }

  .step__head {
    gap: 14px;
    margin-bottom: 16px;
  }

  .step__num {
    font-size: 6.4rem;
  }

  .step__phase {
    font-size: 1.8rem;
  }

  .step__ttl {
    margin-bottom: 16px;
    font-size: 2.3rem;
    line-height: 1.6;
  }

  .step__txt {
    font-size: 1.6rem;
    line-height: 1.75;
  }
  /*	03　成婚実績（PC）
  ---------------------------------*/
  .proofs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    margin-top: 40px;
  }

  .proof-card {
    justify-content: center;
    gap: 16px;
    padding: 34px 20px;
  }

  .proof-card__label {
    font-size: 1.5rem;
  }

  .proof-card__label strong {
    font-size: 2rem;
  }
  .burst {
    width: 152px;
    height: 152px;
  }

  .donut {
    width: 150px;
  }

  .band {
    padding: 30px;
    border-radius: 24px;
    font-size: 2rem;
    line-height: 1.7;
  }

  /*	04 できること（PC）
  ---------------------------------*/
  .feature-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    margin-top: 40px;
  }

  .feature {
    display: flex;
    flex-direction: column;
  }

  .feature__visual {
    min-height: 320px;
    padding: 30px;
  }

  .feature__visual img {
    width: 160px;
  }

  .feature__body {
    flex: 1;
    padding: 36px 30px 40px;
  }

  .feature__num {
    margin-bottom: 12px;
    font-size: 3.6rem;
  }

  .feature__ttl {
    margin-bottom: 16px;
    font-size: 2.4rem;
  }

  .feature__txt {
    font-size: 1.6rem;
    line-height: 1.9;
  }
  /*	05 会員からの声（PC）
  ---------------------------------*/
  .voices__nav {
    gap: 16px;
  }

  .voices__arrow {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--c-primary);
    background: #fff;
    transition: background 0.2s ease;
  }

  .voices__arrow::before {
    width: 11px;
    height: 11px;
  }

  .voices__arrow:hover {
    background: var(--c-bg-light);
  }

  .voices__slider {
    margin-top: 20px;
  }

  .voice__ttl {
    font-size: 2.2rem;
  }

  .voice__txt {
    font-size: 1.5rem;
  }

  .voice__link a {
    font-size: 1.5rem;
  }

  .voice__body {
    padding: 36px 30px 32px;
  }
  /*	最終CTAセクション（PC）
---------------------------------*/
  .action {
    padding-block: 100px;
  }
  .action__ttl {
    font-size: 4rem;
    margin-bottom: 30px;
  }
  .action__lead {
    font-size: 1.6rem;
  }
  /*	フッター（PC）
  ---------------------------------*/
  .footer {
    padding-block: 50px 15px;
  }

  .footer__logo {
    width: 200px;
    margin-bottom: 16px;
  }

  .footer__txt {
    font-size: 1.6rem;
  }

  .btn-footer {
    padding: 18px 36px 18px 18px;
    font-size: 1.8rem;
  }

  .btn-footer__badge {
    padding: 6px 14px;
    font-size: 1.3rem;
  }

  .copyright {
    margin-top: 56px;
    font-size: 1.3rem;
  }
}