@charset "UTF-8";

/* ==========================================================================
   マネーコンシェルジュ LP
   - SPデザイン幅 375px を基準に 1rem = 10px（375px時）で組んでいる
   - PC（1180px以上）は左に固定パネル、右にSPデザインの2カラム
   ========================================================================== */

/* --------------------------------------------------
   Design tokens
-------------------------------------------------- */
:root {
  --c-primary: #1263ce;
  --c-primary-deep: #0350bf;
  --c-navy: #1a427c;
  --c-navy-mid: #1b437d;
  --c-navy-light: #1d4988;
  --c-yellow: #f7e463;
  --c-line: #06c755;
  --c-text: #333333;
  --c-text-muted: #666666;
  --c-white: #ffffff;
  --c-paper: #f5f5f5;
  --c-pale: #f2f6fd;
  --c-border: #e0e6ef;
  --c-side-bg: #f2f7fd;

  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(15, 41, 28, 0.06);
  --shadow-md: 0 4px 6px rgba(15, 41, 28, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 41, 28, 0.10);

  --sp-width: 37.5rem;
  --header-h: 5.6rem;

  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-en: "Poppins", var(--font-jp);
}

/* --------------------------------------------------
   Base / reset
-------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: calc(100vw / 37.5); /* 375px幅で 1rem = 10px */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--font-jp);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

button {
  /* iOS Safari はボタンの -webkit-appearance が既定のままだと、
     特に :disabled でネイティブの装飾が混ざって描画が乱れることがある */
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

[hidden] { display: none !important; }

body.is-drawer-open { overflow: hidden; }

.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --------------------------------------------------
   Layout
-------------------------------------------------- */
.l-page {
  display: block;
}

.l-main {
  position: relative;
  width: 100%;
  max-width: var(--sp-width);
  margin-inline: auto;
  background: var(--c-white);
}

.l-side { display: none; }

/* --------------------------------------------------
   共通パーツ：LINEボタン
-------------------------------------------------- */
.btn-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  height: 5.6rem;
  padding: 0 2.4rem 0 0.5rem;
  border-radius: var(--radius-full);
  background: var(--c-line);
  box-shadow: var(--shadow-md);
  color: var(--c-white);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.btn-line:hover { opacity: 0.85; }

.btn-line__icon {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
}
.btn-line__icon img { width: 100%; height: 100%; }

.btn-line__label { flex: none; white-space: nowrap; }

.btn-line__arrow {
  position: absolute;
  top: 50%;
  right: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: var(--radius-full);
  background: var(--c-white);
  transform: translateY(-50%);
}
.btn-line__arrow img { width: 0.7rem; height: 1.2rem; }

/* 共通パーツ：英字ラベル */
.c-label {
  color: var(--c-primary);
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 0.08em;
  text-align: center;
}

/* --------------------------------------------------
   ヘッダー
-------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 1.6rem;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-white);
}

.header__logo {
  position: relative;
  z-index: 3;
}
.header__logo img {
  width: 12.8rem;
  height: 2.14rem;
}

.header__toggle {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  width: 3.1rem;
  height: 3.1rem;
}
.header__toggle-bar {
  display: block;
  width: 2.2rem;
  height: 0.2rem;
  margin-inline: auto;
  border-radius: 0.2rem;
  background: var(--c-primary);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(1) {
  transform: translateY(0.8rem) rotate(45deg);
}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(2) {
  opacity: 0;
}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(3) {
  transform: translateY(-0.8rem) rotate(-45deg);
}

/* --------------------------------------------------
   ドロワーメニュー
-------------------------------------------------- */
/* ヘッダーの最上部から開く。padding-top でヘッダーの高さ分を空ける
   （ヘッダーのロゴ・ボタンは z-index が上なのでドロワーの上に残る） */
.drawer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  max-height: 100dvh;
  padding: var(--header-h) 2.4rem 4rem;
  background: var(--c-white);
  overflow-y: auto;
  transform: translateY(-1.2rem);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.drawer.is-open {
  transform: translateY(0);
  opacity: 1;
}

.drawer__overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(22, 38, 74, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.drawer__overlay.is-open { opacity: 1; }

.drawer__list li { border-bottom: 1px solid var(--c-border); }
.drawer__list li:last-child { border-bottom: none; }
.drawer__list a {
  display: block;
  padding: 1.6rem 0.4rem;
  color: var(--c-text);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
}
.drawer__en {
  display: block;
  color: var(--c-primary);
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.drawer__cta { margin-top: 2.4rem; }

.drawer__links {
  margin-top: 2.4rem;
  text-align: center;
}
.drawer__links li + li { margin-top: 1.2rem; }
.drawer__links a {
  font-size: 1.2rem;
  line-height: 1.34;
  text-decoration: underline;
}

/* --------------------------------------------------
   01 ファーストビュー
-------------------------------------------------- */
.fv__visual { margin: 0; }
.fv__visual img { width: 100%; }

.fv__cta {
  padding-bottom: 4rem;
  background: var(--c-primary);
}

.fv__lead {
  padding: 1.9rem 0.8rem 0;
  color: var(--c-white);
  font-size: 2rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: 0.02em;
  text-align: center;
}
.fv__lead em {
  color: var(--c-yellow);
  font-style: normal;
}
.fv__lead i {
  font-style: normal;
  letter-spacing: -0.38em;
}

/* 「面談まで最短 40 秒!」はサイズの違う3要素を下端で揃えて並べる */
.fv__lead2 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 0.4rem;
  padding-right: 1.2rem; /* デザインの行は中央よりやや左寄せのため */
}
.fv__lead2-t1,
.fv__lead2-num,
.fv__lead2-t2 { white-space: nowrap; }

.fv__lead2-t1 {
  margin-bottom: 1.66rem;
  color: var(--c-white);
  font-size: 1.73rem;
  font-weight: 700;
  line-height: 2.96rem;
  letter-spacing: 0.02em;
}
.fv__lead2-num {
  margin-left: 0.3rem;
  color: var(--c-yellow);
  font-family: var(--font-en);
  font-size: 5.85rem;
  font-weight: 600;
  line-height: 6.24rem;
  letter-spacing: 0;
}
.fv__lead2-t2 {
  margin-bottom: 1.56rem;
  margin-left: 0.4rem;
  color: var(--c-yellow);
  font-size: 2.64rem;
  font-weight: 700;
  line-height: 3.17rem;
  letter-spacing: 0.02em;
}

.fv__btn {
  margin: 0.66rem 2.4rem 0;
}

/* --------------------------------------------------
   02 こんなお悩みありませんか？
-------------------------------------------------- */
.worries {
  padding: 4rem 0;
  background: var(--c-paper);
  scroll-margin-top: var(--header-h);
}

.worries .c-label { line-height: 1.6rem; }

.worries__head-1 {
  width: 30.7rem;
  margin: 2.25rem auto 0;
  transform: translateX(-0.42rem);
}
.worries__head-2 {
  width: 23.9rem;
  margin: 1.3rem auto 0;
  transform: translateX(-0.28rem);
}

/* 高さは中の吹き出し・イラストの成り行きで決まる */
.worries__body {
  margin-top: 2.25rem;
}

/* 吹き出しは通常フローで縦に積み、
   上下の間隔は margin-top、横位置は margin-left で調整する。
   position: relative はしっぽ（::after）の基準にするため */
.worries__bubble {
  position: relative;
  display: flex;
  align-items: center;
  height: 5.2rem;
  padding: 0 1.8rem;
  border-radius: 2.4rem;
  background: var(--c-primary);
  color: var(--c-white);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.worries__bubble em {
  color: var(--c-yellow);
  font-style: normal;
  font-weight: 900;
}
.worries__bubble span { font-weight: 500; }

/* 吹き出しのしっぽ
   デザイン上は二等辺三角形ではなく、片側が垂直な直角三角形。
   先端が右寄りのもの（1・3・4）と左寄りのもの（2・5）の2種類がある。
   本体との境目にサブピクセルの隙間が出るため、三角形の高さを1px伸ばして
   その分を本体に潜り込ませている（見た目の長さは1.55remのまま）。
   既定は「下向き・垂直辺が右（先端が右下）」 */
.worries__bubble::after {
  content: "";
  position: absolute;
  bottom: -1.55rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(1.55rem + 1px) 0 0 1.1rem;
  border-color: var(--c-primary) transparent transparent transparent;
}

.worries__bubble--1 {
  margin-left: 2.2rem;
  width: 27.9rem;
  justify-content: center;
}
.worries__bubble--1::after { left: 5.55rem; }

.worries__bubble--2 {
  margin-top: 1.6rem;
  margin-left: 10.3rem;
  width: 25.7rem;
  justify-content: center;
  background: var(--c-navy-mid);
}
/* 下向き・垂直辺が左（先端が左下） */
.worries__bubble--2::after {
  left: auto;
  right: 6.4rem;
  border-width: calc(1.55rem + 1px) 1.1rem 0 0;
  border-color: var(--c-navy-mid) transparent transparent transparent;
}

.worries__bubble--3 {
  margin-top: 1.7rem;
  margin-left: 2.2rem;
  width: 30.5rem;
  justify-content: center;
}
.worries__bubble--3::after { left: 4.75rem; }

.worries__bubble--4 {
  margin-top: 1.85rem;
  margin-left: 1.8rem;
  width: 29.7rem;
  justify-content: center;
  background: var(--c-navy-light);
}
/* 上向き・垂直辺が右（先端が右上） */
.worries__bubble--4::after {
  top: -1.55rem;
  bottom: auto;
  left: 3.4rem;
  border-width: 0 0 calc(1.55rem + 1px) 1.1rem;
  border-color: transparent transparent var(--c-navy-light) transparent;
}

.worries__bubble--5 {
  margin-top: 1.2rem;
  margin-left: 8.6rem;
  width: 28rem;
  justify-content: center;
}
/* 上向き・垂直辺が左（先端が左上） */
.worries__bubble--5::after {
  top: -1.55rem;
  bottom: auto;
  left: auto;
  right: 3.35rem;
  border-width: 0 1.1rem calc(1.55rem + 1px) 0;
  border-color: transparent transparent var(--c-primary) transparent;
}

.worries__illust {
  margin-top: 1.95rem;
  margin-left: 9.8rem;
  width: 19.6rem;
}

.notch {
  height: 4.55rem;
  background: url("../img/notch-worries.svg") center / 100% 100% no-repeat;
}

/* --------------------------------------------------
   03 FPが解決
-------------------------------------------------- */
.solve {
  position: relative; /* 末尾の波形（::after）の基準 */
  /* notchとの境目は、端末の幅によっては端数ピクセルの処理で1pxの隙間ができ、
     背景の白が線として見えることがある。1px引き上げてnotchの下端に潜り込ませ、
     その分を padding-top で戻している（中身の位置とページ全高は変わらない） */
  margin-top: -1px;
  padding: calc(6.25rem + 1px) 0 8.5rem;
  background: linear-gradient(180deg, var(--c-navy) 0%, #2f78e2 100%);
  color: var(--c-white);
  text-align: center;
}

/* 上から順に通常フローで積む。
   要素同士を重ねる箇所（写真とその前後）だけ負のmargin-topで寄せている */
.solve__lead img,
.solve__result img,
.solve__photo img,
.solve__cap1 img,
.solve__cap2 img { width: 100%; }

.solve__lead {
  margin-left: 5.53rem;
  width: 25.7rem;
}

.solve__brand {
  display: flex;
  align-items: center;
  gap: 0.58rem;
  margin-top: 1.8rem;
  margin-left: 3.44rem;
}
.solve__logo { width: 27.58rem; }
.solve__ga {
  /* 05 FEATURE の「が」と同じく、デザインではロゴの下端に揃っている。
     flexの中央揃えだと浮くため、行の高さを変えずに下げている */
  position: relative;
  top: 0.65rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

/* 「解決!」は下の写真より前面に重ねる */
.solve__result {
  position: relative;
  z-index: 1;
  margin: 1.45rem auto 0;
  width: 16rem;
}

/* 「解決!」の下端に写真を潜り込ませる */
.solve__photo {
  margin-top: -2.25rem;
  margin-left: 2.4rem;
  width: 32.7rem;
}
.solve__photo img { border-radius: 2.4rem; }

/* 画像の左側に余白が含まれているため margin-left は 0 のままで位置が合う */
.solve__cap1 {
  margin-top: -1.9rem; /* 写真の下端に重ねる */
  width: 31.8rem;
}

.solve__cap2 {
  margin-top: 1.05rem;
  margin-left: 8.5rem;
  width: 20.85rem;
}

.solve__note {
  margin-top: 1.45rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  letter-spacing: 0.02em;
}

.solve__btn {
  margin: 1.8rem 2.4rem 0;
}

.solve::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3.2rem;
  background: url("../img/wave-divider.svg") center bottom / 100% 100% no-repeat;
}

/* --------------------------------------------------
   04 SERVICE｜お悩みのテーマから探す
-------------------------------------------------- */
.service {
  padding: 3.1rem 0 3rem;
  background: var(--c-pale);
  scroll-margin-top: var(--header-h);
}

.service .c-label { line-height: 1.6rem; }

.service__head-1 {
  width: 22.85rem;
  margin: 3.25rem 0 0 6.6rem;
}
.service__head-2 {
  width: 30.8rem;
  margin: 1.65rem 0 0 3.25rem;
}

.service__lead {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2.15rem;
}
.service__lead-num { width: 3.1rem; }
.service__lead-txt {
  width: 21.7rem;
  margin-bottom: 0.05rem;
}

.service__list { margin-top: 3rem; }

/* アコーディオン */
.case { padding: 0 2.4rem; }
.case + .case { margin-top: 1rem; }
.case.is-open + .case { margin-top: 0.8rem; }

.case__head { margin: 0; }

.case__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: 100%;
  min-height: 6.4rem;
  padding: 1.5rem 2rem;
  border-radius: 0.8rem;
  background: var(--c-primary);
  text-align: left;
}

.case__title {
  color: var(--c-white);
  font-size: 2.3rem;
  font-weight: 900;
  line-height: 3.4rem;
  letter-spacing: 0.01em;
}

.case__toggle {
  position: relative;
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--radius-full);
  background: #f2f7fe;
}
.case__toggle::before,
.case__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.4rem;
  height: 0.2rem;
  border-radius: 0.1rem;
  background: var(--c-primary);
  transform: translate(-50%, -50%);
}
.case__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.case.is-open .case__toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.case__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
.case.is-open .case__panel { grid-template-rows: 1fr; }

/* チェック項目とキャッチコピーは右に食み出す設計のため右マージンを打ち消す */
.case__panel-inner {
  overflow: hidden;
  min-height: 0;
  margin-right: -2.4rem;
  padding-left: 0.2rem;
}

.case__rec {
  position: relative;
  height: 6rem;
  padding-top: 2rem; /* ヘッダーとの間隔 20px */
  margin-top: 0;
  box-sizing: content-box;
}

.case__avatar {
  position: absolute;
  top: 2rem;
  left: 0;
  width: 5.29rem;
}

.case__rec-list {
  padding-top: 0.4rem;
  padding-left: 6rem;
}
.case__rec-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--c-primary);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: 0.02em;
}
.case__rec-list li + li { margin-top: 0.8rem; }
.case__rec-list li::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0;
  width: 1.4rem;
  height: 1.4rem;
  background: url("../img/icon-check.svg") center / contain no-repeat;
}

/* .case__panel-inner の padding-left と負の右マージンを打ち消して中央寄せにする */
.case__figure {
  display: flex;
  justify-content: center;
  margin-left: -0.2rem;
  margin-right: 2.4rem;
}

/* イラストはケースごとにデザイン上の表示サイズを指定。
   上下マージンで画像の高さの差（18.65〜22.03rem）を吸収し、
   キャッチコピーの開始位置をケース間で揃えている。
   （上下マージンの合計は常に 22rem - 画像高さ + 0.4rem） */
.case__figure img { object-fit: contain; }

.case:nth-child(1) .case__figure { margin-top: 1.66rem; margin-bottom: 2.06rem; }
.case:nth-child(1) .case__figure img { width: 21.1rem; height: 18.68rem; }

.case:nth-child(2) .case__figure { margin-top: 1.15rem; margin-bottom: 1.55rem; }
.case:nth-child(2) .case__figure img { width: 22.2rem; height: 19.7rem; }

.case:nth-child(3) .case__figure { margin-top: 1.05rem; margin-bottom: 1.45rem; }
.case:nth-child(3) .case__figure img { width: 25.2rem; height: 19.9rem; }

.case:nth-child(4) .case__figure { margin-top: 0; margin-bottom: 0.4rem; }
.case:nth-child(4) .case__figure img { width: 27.3rem; height: 22rem; }

.case:nth-child(5) .case__figure { margin-top: 0.75rem; margin-bottom: 1.15rem; }
.case:nth-child(5) .case__figure img { width: 23.1rem; height: 20.5rem; }

.case:nth-child(6) .case__figure { margin-top: 1.68rem; margin-bottom: 2.07rem; }
.case:nth-child(6) .case__figure img { width: 23.24rem; height: 18.65rem; }

.case:nth-child(7) .case__figure { margin-top: 0; margin-bottom: 0.37rem; }
.case:nth-child(7) .case__figure img { width: 27.45rem; height: 22.03rem; }

.case:nth-child(8) .case__figure { margin-top: 0.15rem; margin-bottom: 0.54rem; }
.case:nth-child(8) .case__figure img { width: 27.05rem; height: 21.71rem; }

/* letter-spacing はデザイン（Gothic MB101）の字幅に寄せるための値 */
.case__catch {
  color: var(--c-primary);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 3rem;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.case__text {
  width: 32.7rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  color: #000;
  font-size: 1.3rem;
  line-height: 2.7rem;
  letter-spacing: -0.04em;
}

/* --------------------------------------------------
   画像帯
-------------------------------------------------- */
.band img { width: 100%; }

/* --------------------------------------------------
   05 FEATURE｜選ばれている理由
-------------------------------------------------- */
.feature {
  padding: 3.7rem 0 3.15rem;
  background: var(--c-paper);
  scroll-margin-top: var(--header-h);
}
/* 上から順に通常フローで積む */
.feature img { width: 100%; }

.feature .c-label {
  line-height: 1.6rem;
}

.feature__brand {
  margin-top: 2.6rem;
  margin-left: 10.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.feature__brand img { width: 14.3rem; }
.feature__brand span {
  /* デザインでは「が」の下端がロゴの下端に揃っている。
     flexの中央揃えだと「が」が約5px浮くため、行の高さを変えずに下げている
     （align-items: baseline にすると行の高さが増えて以降の余白がずれるため） */
  position: relative;
  top: 0.5rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: 0.02em;
}

.feature__head {
  margin-top: 1.45rem;
  margin-left: 2.9rem;
  width: 31.35rem;
}

/* 数値パネル */
.numbers {
  margin-top: 2.5rem;
  margin-left: 2.4rem;
  width: 32.7rem;
  height: 28.1rem;
  padding: 0.8rem 1.6rem;
  border-radius: 1.6rem;
  background: var(--c-white);
}

.numbers__row {
  display: flex;
  align-items: center;
  height: 13.2rem;
}

.numbers__cell {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  width: 14.7rem;
  padding: 1.6rem 0;
}

.numbers__label {
  color: var(--c-primary);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: 0.02em;
}

.numbers__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.numbers__num {
  color: var(--c-primary);
  font-size: 4rem;
  font-weight: 700;
  line-height: 4.8rem;
}
.numbers__num--en {
  font-family: var(--font-en);
  font-weight: 600;
}
.numbers__num--sm {
  font-size: 3.2rem;
  letter-spacing: 0.02em;
}
/* 「10,000件以上」は桁数と単位が長く、既定のサイズだとセル幅14.7remに収まらない。
   この項目だけ数字と単位を少し詰めている（デザインの placeholder は「0000名」だった） */
.numbers__value--long .numbers__num { font-size: 2.8rem; }
.numbers__value--long .numbers__unit { font-size: 1.4rem; }

.numbers__unit {
  color: var(--c-text-muted);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.6rem;
  letter-spacing: 0.02em;
}
.numbers__note {
  color: var(--c-text);
  font-size: 1rem;
  font-weight: 300;
  line-height: 2rem;
  letter-spacing: 0.02em;
  text-align: center;
}
.numbers__note--strong {
  font-size: 1.2rem;
  font-weight: 800;
}

.numbers__divider-v {
  flex: none;
  width: 1px;
  height: 7.2rem;
  background: #e3e8ef;
}
.numbers__divider-h {
  display: block;
  height: 1px;
  background: #e3e8ef;
}

.feature__copy1 {
  margin-top: 5rem;
  margin-left: 6.7rem;
  width: 24.1rem;
}
.feature__copy2 {
  margin-top: 1.51rem;
  margin-left: 2.6rem;
  width: 32.05rem;
}
.feature__diagram {
  margin-top: 0.21rem;
  margin-left: 2.4rem;
  width: 32.7rem;
}
.feature__copy3 {
  margin-top: 0.9rem;
  margin-left: 8.55rem;
  width: 19.05rem;
}
.feature__copy4 {
  margin-top: 1.2rem;
  margin-left: 7.45rem;
  width: 20rem;
}
.feature__note {
  margin-top: 1.31rem;
  font-size: 1.4rem;
  line-height: 2.4rem;
  letter-spacing: 0.02em;
  text-align: center;
}

/* --------------------------------------------------
   07 VOICE｜相談事例（カルーセル）
-------------------------------------------------- */
.voice {
  padding: 4rem 0;
  background: var(--c-pale);
  scroll-margin-top: var(--header-h);
}

.voice__head {
  height: 14.4rem;
  padding: 0 2.4rem;
}
.voice .c-label { line-height: 1.6rem; }

.voice__title { margin-top: 1.85rem; }
.voice__title-1 {
  width: 14.45rem;
  margin: 0 auto;
}
.voice__title-2 {
  width: 22.8rem;
  margin: 1.45rem auto 0;
  transform: translateX(0.37rem);
}

.voice__viewport {
  margin-top: 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2.4rem;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.voice__viewport::-webkit-scrollbar { display: none; }

.voice__track {
  display: flex;
  gap: 1.2rem;
  /* stretch で全カードの高さを最も高いものに揃える。
     原稿の長さが変わってもカードの高さが不揃いにならない */
  align-items: stretch;
  width: max-content;
  padding: 0.4rem 2.4rem;
}

.vcard {
  flex: none;
  width: 28rem;
  /* デザイン上の高さ。原稿が長いカードがあると、その分だけ全カードが伸びる
     （height 固定にしていたときは原稿差し替えで下が切れた） */
  min-height: 42.4rem;
  padding: 2.9rem 2rem 2rem;
  border-radius: 1.6rem;
  background: var(--c-white);
  box-shadow: var(--shadow-md);
  scroll-snap-align: start;
}

.vcard__profile {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  height: 5.6rem;
}

.vcard__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border: 3px solid var(--c-white);
  border-radius: var(--radius-full);
  background: var(--c-primary-light, #dcebfb);
  overflow: hidden;
}
.vcard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.vcard__avatar--b { background: #98d0cc; }
.vcard__avatar--c { background: #d6e4fa; }

.vcard__meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
  min-width: 0;
}
.vcard__attr {
  color: var(--c-primary);
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.vcard__topic {
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-full);
  background: #e4f6f8;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.vcard__title {
  margin-top: 1.5rem;
  color: var(--c-primary);
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.8rem;
  letter-spacing: 0.06em;
  font-feature-settings: "palt";
}

.vcard__block { margin-top: 1.4rem; }
.vcard__block + .vcard__block { margin-top: 1.5rem; }

.vcard__label {
  margin-bottom: 0.4rem;
  color: var(--c-text-muted);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.6rem;
  letter-spacing: 0.08em;
}
.vcard__label--after { color: var(--c-primary); }

.vcard__before {
  color: var(--c-text-muted);
  font-size: 1.3rem;
  line-height: 2.4rem;
  letter-spacing: 0.02em;
}
.vcard__after {
  color: var(--c-text);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: -0.05em;
}

.vcard__note {
  margin-top: 1.2rem;
  color: #8a7350;
  font-size: 1.2rem;
  line-height: 2rem;
  letter-spacing: 0.02em;
}

.voice__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.4rem;
  margin-top: 1.6rem;
  padding: 0 2.4rem;
}

.voice__dots {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.voice__dots button {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.4rem;
  background: #e3e8ef;
  transition: width 0.25s ease, background-color 0.25s ease;
}
.voice__dots button.is-active {
  width: 2rem;
  background: var(--c-primary);
}

.voice__arrows {
  display: flex;
  gap: 0.8rem;
}
/* 進める側は青（active）、それ以上進めない側は白（disabled）
   ＝ 1枚目は「前へ」が白、最終スライドでは「次へ」が白になる */
.voice__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--c-primary-deep);
  color: var(--c-white); /* 矢印の色。SVGが currentColor で参照する */
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.voice__arrow:disabled {
  border-color: #e3e8ef;
  background: var(--c-white);
  color: #e3e8ef;
  cursor: default;
}

/* 「く」の字は重心が開いている側に寄るため、向きに合わせて約1pxずらして
   視覚的に円の中心へ揃える（next=右へ / prev=左へ）。
   transform ではなく position でずらしている。transform は iOS で
   要素が別レイヤーに分離され、描画の粗が出ることがあるため */
.voice__arrow-icon {
  position: relative;
  left: 0.1rem;
  width: 0.83rem;
  height: 1.43rem;
}
.voice__arrow--prev .voice__arrow-icon { left: -0.1rem; }

/* --------------------------------------------------
   08 FLOW｜ご相談までの流れ
-------------------------------------------------- */
.flow {
  padding: 3.5rem 0 3.95rem;
  background: var(--c-white);
  scroll-margin-top: var(--header-h);
}

/* 上から順に通常フローで積む */
.flow__head {
  padding: 0 2.4rem;
}
.flow .c-label { line-height: 1.6rem; }
.flow__title {
  margin-top: 0.8rem;
  color: var(--c-primary);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 3.6rem;
  letter-spacing: 0.02em;
  text-align: center;
}

/* 「簡単! 4 STEP」は文字サイズの違う3要素を下端で揃えて並べる */
.flow__catch {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 2.4rem;
  color: var(--c-primary);
}
.flow__kantan {
  width: 7.35rem;
  margin-left: 0.35rem;
  margin-bottom: 2.15rem;
}
.flow__num {
  margin-left: 0.7rem;
  font-family: var(--font-en);
  font-size: 9.6rem;
  font-weight: 600;
  line-height: 0.72;
  letter-spacing: 0.02em;
}
.flow__step {
  margin-bottom: 2.25rem;
  font-family: var(--font-en);
  font-size: 3.8rem;
  font-weight: 600;
  line-height: 0.74;
  letter-spacing: 0.02em;
}

.flow__lead {
  margin-top: 2.09rem;
  padding: 0 2.4rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: 0.02em;
  text-align: center;
}

.flow__illust {
  margin-top: 1.05rem;
  margin-left: 11rem;
  width: 14.4rem;
}
.flow__illust img { width: 100%; }

.flow__steps {
  margin: 1.1rem 2.4rem 0;
  padding: 2.5rem 2rem;
  border-radius: 1.6rem;
  background: var(--c-pale);
}

.fstep {
  position: relative;
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
}
/* ステップをつなぐ縦線 */
.fstep::before {
  content: "";
  position: absolute;
  top: 4rem;
  left: 1.9rem;
  width: 0.2rem;
  height: calc(100% - 4rem);
  background: #dcebfb;
}
.fstep--last::before { display: none; }

.fstep__badge {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  background: var(--c-primary);
  color: var(--c-white);
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6rem;
  letter-spacing: 0.08em;
}

.fstep__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 3.2rem;
}
.fstep--last .fstep__body { padding-bottom: 0; }

.fstep__title {
  color: var(--c-primary);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 3rem;
  letter-spacing: 0.02em;
}
.fstep__desc {
  margin-top: 0.8rem;
  color: var(--c-text-muted);
  font-size: 1.4rem;
  line-height: 2.4rem;
  letter-spacing: -0.02em;
}
.fstep__note { font-size: 1.3rem; }

/* --------------------------------------------------
   09 最終CTA
-------------------------------------------------- */
/* 上部の角丸は overflow: hidden で写真ごと切り抜く。
   青い背景は写真の下（.final__body）だけに敷き、
   角丸の縁に青が透けないようにしている */
.final {
  border-radius: 3.2rem 3.2rem 0 0;
  overflow: hidden;
  color: var(--c-white);
  text-align: center;
}

.final__photo img { width: 100%; }

.final__body {
  margin-top: -0.2rem; /* 写真の下端と継ぎ目が出ないよう少し重ねる */
  padding: 3.67rem 0 4.58rem;
  background: var(--c-primary-deep);
}

.final__title-1 {
  width: 9.95rem;
  margin: 0 auto;
}
.final__title-2 {
  width: 31.25rem;
  margin: 1.55rem auto 0;
}

.final__lead {
  margin-top: 1.85rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: 0.02em;
}

.final__btn {
  margin: 2.65rem 2.4rem 0;
}

/* --------------------------------------------------
   フッター
-------------------------------------------------- */
.footer {
  padding: 3.4rem 2.4rem;
  background: var(--c-white);
  text-align: center;
}

.footer__top { line-height: 0; }
.footer__top a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 4.4rem;
  padding: 0 2.4rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full);
  color: var(--c-primary);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.43;
}
.footer__top img { width: 1.2rem; height: auto; }

.footer__label {
  margin-top: 2.95rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 2rem;
}
.footer__label span { color: var(--c-primary-deep); }

.footer__logo img {
  width: 24.25rem;
  margin: 1.4rem auto 0;
}

.footer__links { margin-top: 3.15rem; }
.footer__links li + li { margin-top: 1.2rem; }
.footer__links li { line-height: 0; }
.footer__links a {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1.6rem;
  text-decoration: underline;
}

.footer__copy {
  margin-top: 2.4rem;
  color: var(--c-text-muted);
  font-size: 1.2rem;
  line-height: 2rem;
}

/* --------------------------------------------------
   追従CTA
-------------------------------------------------- */
.sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 1.6rem;
  border-radius: 2.4rem 2.4rem 0 0;
  background: var(--c-white);
  box-shadow: var(--shadow-lg);
}
.sticky-cta .btn-line { width: 32.7rem; }

/* --------------------------------------------------
   スクロールアニメーション
-------------------------------------------------- */
[data-anim] {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-anim].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------
   600px以上：SPデザインを固定幅で中央寄せ
-------------------------------------------------- */
@media (min-width: 600px) {
  html { font-size: 10px; }

  body { background: var(--c-side-bg); }
}

/* --------------------------------------------------
   1180px以上：PC 2カラム
-------------------------------------------------- */
@media (min-width: 1180px) {
  /* デザイン基準は幅1440px。
     左パネル内容 x=221 幅327 / SPカラム x=800 幅375 / 右余白 265 */
  .l-page {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-width: 144rem;
    margin-inline: auto;
  }

  .l-main {
    flex: none;
    width: var(--sp-width);
    max-width: none;
    margin-inline: 0;
    box-shadow: 0 0 4rem rgba(22, 38, 74, 0.10);
  }

  /* 左パネルに常時CTAがあるため、右カラムの追従CTAは出さない */
  .sticky-cta { display: none; }

  /* 追従CTA（80px）が無くなる分、フッター下の余白を詰める。
     2.5remは左パネルのフッター下端（デザインの25px）と同じ値 */
  .footer { padding-bottom: 2.5rem; }

  .l-side {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    height: 100dvh;
    /* 左は下のフッターの基準（デザインの x=30）、下はフッターの下端（25px）に合わせる。
       上の3.4remは、デザインの画面高（1078px）でロゴが y=195 に来る値 */
    padding: 3.4rem 4rem 2.5rem 3rem;
    overflow-y: auto;
  }
  /* margin: auto で上下中央かつ左右中央。フッターは下端に残る。
     画面が低いときは上が切れずにパネル内でスクロールできる */
  .l-side__inner {
    width: 32.7rem;
    margin: auto;
  }
  .l-side__foot { flex: none; }

  .l-side__logo img { width: 30.6rem; }

  /* 「MENU」は白抜き＋青のフチ */
  .l-side__menu-label {
    margin-top: 4.2rem;
    color: var(--c-white);
    -webkit-text-stroke: 1px var(--c-primary);
    font-family: var(--font-en);
    font-size: 3.7rem;
    font-weight: 600;
    line-height: 5.6rem;
    letter-spacing: 0.08em;
  }

  /* ページ内メニュー。1項目 78px（上下padding16 + EN16 + 余白4 + JP26） */
  .l-side__list li + li { border-top: 1px solid #e3e8ef; }
  .l-side__list a {
    display: block;
    padding: 1.6rem 0;
    transition: opacity 0.2s ease;
  }
  .l-side__list a:hover { opacity: 0.6; }
  .l-side__en {
    display: block;
    color: var(--c-primary);
    font-family: var(--font-en);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.6rem;
    letter-spacing: 0.08em;
  }
  .l-side__jp {
    display: block;
    margin-top: 0.4rem;
    color: #1b2439;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 2.6rem;
    letter-spacing: 0.02em;
  }

  .l-side__cta { margin-top: 4.2rem; }

  /* フッターはメニューの列ではなくパネルの左下に置く（デザインどおり）。
     絶対配置にすると画面が低いときにメニューと重なるため、通常フローで下端に置いている */
  .l-side__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 3rem;
    margin-bottom: 2rem;
    line-height: 1.6rem; /* li にも効かせて行の高さを16pxに揃える */
  }
  .l-side__links a {
    color: #1b2439;
    font-size: 1.2rem;
    line-height: 1.6rem;
    letter-spacing: 0.02em;
    text-decoration: underline;
  }
  .l-side__copy {
    color: #626a7d;
    font-size: 1.2rem;
    line-height: 2rem;
    letter-spacing: 0.02em;
  }
}

/* デザイン基準幅に達したら、左パネルをデザインどおりの位置（x=221）に固定する */
@media (min-width: 1440px) {
  .l-page { padding-right: 26.5rem; }
  /* パネル左端（padding-left 3rem）から 19.1rem で、デザインの x=221 になる */
  .l-side__inner {
    margin-left: 19.1rem;
    margin-right: auto;
  }
}

/* ------------------------------------------------------------------
   scroll-hint（VOICEカルーセルのスワイプヒント）の見た目調整
   ライブラリ既定のスタイルを最小限だけ上書きする
------------------------------------------------------------------ */
.voice__viewport .scroll-hint-icon {
  border-radius: 0.8rem;
  background: rgba(26, 66, 124, 0.72);
}
.voice__viewport .scroll-hint-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}