@charset "UTF-8";
/* =========================================================
   ハカレル LP  |  株式会社ハレガケ
   Figma: サーベイ懇親会（1900px = 2x アートボード）
   1rem = 10 デザインpx。ルートフォントを viewport で伸縮させ、
   1201〜1900px は 1900px デザインを等比スケール、1200px 以下は SP レイアウト。
   ========================================================= */

/* ---------- root / tokens ---------- */
:root {
  --navy:        #1e458d;
  --purple:      #6368ef;
  --purple-40:   rgba(99, 104, 239, .4);
  --pink:        #f64080;
  --teal:        #3dcbcb;
  --yellow:      #fff200;
  --yellow-mark: #ffdd63;
  --blue-pale:   #d4e6ff;
  --page:        #f2f7ff;
  --white:       #fff;
  --shadow-card: 0 .6rem 0 0 rgba(199, 215, 255, .52);
  --shadow-btn:  0 .8rem 0 0 rgba(199, 215, 255, .52);

  --font-base: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;
  --font-num:  "Inter", "Helvetica Neue", Arial, sans-serif;

  /* デザイン幅 1900px を 1rem = 10px 基準でスケール */
  --page-w: 190rem;
  --inner-w: 156.3rem;
}

html {
  font-size: clamp(6.3px, calc(100vw / 190), 10px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 14rem;
}

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

body {
  margin: 0;
  background: var(--page);
  color: var(--navy);
  font-family: var(--font-base);
  font-weight: 700;
  line-height: 1.6;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

#wrapper {
  width: var(--page-w);
  margin: 0 auto;
  overflow: hidden;
}

/* 背景ブロックはページ上方ほど手前（Figma の重ね順）。
   下のセクションの角丸／曲線が上のセクションに覆われないようにする。 */
.intro    { z-index: 9; }
.problem  { z-index: 8; }
.feature  { z-index: 7; }
.flow     { z-index: 6; }
.benefit  { z-index: 5; }
.price    { z-index: 4; }
.message  { z-index: 3; }
.faq      { z-index: 2; }
.footer   { z-index: 1; }
.intro, .problem, .feature, .flow,
.benefit, .price, .message, .faq, .footer { position: relative; }

/* アンカーは各セクションの見出し（h2）に付与。着地位置は scroll-padding-top が
   ヘッダー分を確保する。（負の scroll-margin はスマホブラウザで無視されるため廃止） */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 1rem 2rem;
  background: var(--navy);
  color: #fff;
  font-size: 1.8rem;
}
.skip-link:focus { left: 0; }

:where(a, button, input, textarea):focus-visible {
  outline: .3rem solid var(--pink);
  outline-offset: .3rem;
}

/* =========================================================
   共通パーツ
   ========================================================= */

/* ---- 見出し（?  テキスト  ! ） ---- */
.heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  font-weight: 900;
  font-size: 6.2rem;
  letter-spacing: .62rem;
  line-height: 1.45;
  text-align: center;
}
.heading--navy { color: var(--navy); }
.heading--white { color: var(--white); }
.heading__text { display: block; }
.heading__deco { flex: none; }
.heading__deco--q {
  width: 8.4rem;
  height: 14.3rem;
  transform: rotate(-19.66deg);
}
.heading__deco--ex {
  width: 3rem;
  height: 14.1rem;
  transform: rotate(19.98deg);
}
.heading--white .heading__deco--ex { filter: brightness(0) invert(1); }

/* ---- ボタン ---- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60rem;
  max-width: 100%;
  height: 8.7rem;
  padding: 0 2rem;
  border: 0;
  border-radius: 5rem;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.btn--pink { background: var(--pink); padding-right: 9.5rem; }
.btn--teal { background: var(--teal); box-shadow: var(--shadow-btn); }
.btn__label {
  font-weight: 900;
  font-size: 4rem;
  letter-spacing: .2rem;
  color: var(--white);
  line-height: 1;
  white-space: nowrap;
}
.btn__icon {
  position: absolute;
  top: 50%;
  right: 1.6rem;
  width: 6.3rem;
  height: 6.3rem;
  transform: translateY(-50%);
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-.3rem); filter: brightness(1.06); }
}

/* ---- Before / After の文字色 ---- */
.c-before { color: var(--purple); }
.c-after  { color: var(--teal); }

/* ---- SPのみ改行 ---- */
.br-sp { display: none; }
/* ---- PCのみ改行（SPでは改行しない）---- */
.br-pc { display: inline; }

/* ---- ハイライト（白抜き文字＋紫の帯） ---- */
.hl {
  background: var(--purple);
  color: var(--white);
  padding: 0 .4rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* =========================================================
   ヘッダー
   ========================================================= */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(.6rem);
}
.header__inner {
  display: flex;
  align-items: center;
  width: var(--page-w);
  height: 13rem;
  margin: 0 auto;
  padding: 0 6.1rem 0 4.7rem;
}
.header__logo { flex: none; }
.header__logo img { width: 15.4rem; height: auto; }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 8.7rem; }
.nav__link {
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: .15rem;
  color: var(--navy);
  transition: color .2s ease;
}
@media (hover: hover) {
  .nav__link:hover { color: var(--pink); }
}
.header__toggle { display: none; }
.header__overlay { display: none; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  width: var(--page-w);
  height: 105.3rem;
}
.hero__visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__body {
  position: absolute;
  left: 12.8rem;
  top: 24.2rem;
  width: 70rem;
}
.hero__title { display: block; }
.hero__lead {
  display: inline-block;
  margin-left: -1.9rem;
  font-weight: 700;
  font-size: 4.1rem;
  line-height: 1.44;
  color: var(--purple);
  background: linear-gradient(to bottom,
    transparent 0 71%, var(--yellow-mark) 71% 91%, transparent 91%);
}
.hero__name {
  display: block;
  margin-top: -.6rem;
  font-weight: 900;
  font-size: 15rem;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--purple);
}
.hero__catch {
  margin-top: 1.4rem;
  font-weight: 900;
  font-size: 3.5rem;
  line-height: 5.7rem;
  letter-spacing: .175rem;
  color: var(--navy);
  text-shadow: .3rem .2rem .1rem var(--white);
}
.hero__body .btn { margin-top: 21.4rem; }

/* =========================================================
   INTRO（謎解き×サーベイ＝ハカレル）
   ========================================================= */
.intro { width: var(--page-w); }
.intro__summary {
  padding: 7.9rem 6.1rem 0;
  font-weight: 700;
  font-size: 4rem;
  line-height: 1.6;
  text-align: center;
}
.intro__panel {
  margin-top: 8.1rem;
  padding: 0 6.1rem;
}
.intro__panel-inner {
  margin-top: 3.6rem;
  padding: 7.1rem 0 6rem;
  border-radius: 4rem;
  background: var(--white);
}
/* イントロ見出しの ?! は他見出しより大きく（比率維持）、白枠の上端にかぶせる */
.intro .heading__deco--q  { width: 14rem; height: 23.9rem; position: relative; top: -9rem; }
.intro .heading__deco--ex { width: 5rem;  height: 23.4rem; position: relative; top: -9.5rem; left: 2.5rem; }
.intro__cols {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 7.9rem;
  padding: 0 6.8rem;
}
.intro__text {
  font-weight: 700;
  font-size: 2.9rem;
  line-height: 6.2rem;
  letter-spacing: .15rem;
}
.intro__illust { width: 54.8rem; height: auto; flex: none; }
.intro__cta { margin-top: -2rem; text-align: center; }

/* =========================================================
   PROBLEM（もやもや）
   ========================================================= */
.problem {
  width: var(--page-w);
  margin-top: 9.4rem;
  padding: 10.3rem 0 13.25rem;
  border-radius: 30rem;
  background: var(--purple);
}
.problem__inner { width: var(--inner-w); margin: 0 auto; }
.problem__heading {
  font-weight: 900;
  font-size: 6.2rem;
  line-height: 1.37;
  letter-spacing: .62rem;
  color: var(--white);
  text-align: center;
}
.problem__list { margin-top: 4.5rem; }
.problem__item { position: relative; padding-top: 6.4rem; }
.problem__item + .problem__item { margin-top: 1.7rem; }

.problem__num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 18rem;
  height: 14.4rem;
}
.problem__item--reverse .problem__num { left: auto; right: 0; }
/* PCのみ: 雲本体（モクモク＋数字）を若干上げる。02・04は〇〇も含めて全体を右へ */
@media (min-width: 1201px) {
  .problem__cloud,
  .problem__num-text { transform: translateY(-1.5rem); }
  .problem__item--reverse .problem__num { right: -3.5rem; }
  /* 02・04 はモクモク（雲＋数字）だけさらに右へ（〇〇は据え置き） */
  .problem__item--reverse .problem__cloud,
  .problem__item--reverse .problem__num-text { transform: translate(2rem, -1.5rem); }
}
.problem__cloud {
  width: 18rem;
  height: 14.4rem;
  filter: drop-shadow(-.4rem .6rem 0 var(--white));
}
.problem__num-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1rem;
  font-weight: 900;
  font-size: 7rem;
  line-height: 1;
  color: var(--white);
}
/* 雲のしっぽの 〇〇（PC）：通常=雲の右下 / reverse=雲の左下。SPはメディアクエリ内で別指定 */
.problem__num::before,
.problem__num::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--teal);
}
.problem__num::before { width: 2.3rem; height: 2.2rem; left: 12rem;   top: 13.4rem; }
.problem__num::after  { width: 1.7rem; height: 1.6rem; left: 16.4rem; top: 16.1rem; }
.problem__item--reverse .problem__num::before { left: 5.2rem; }
.problem__item--reverse .problem__num::after  { left: 1.4rem; }
.problem__card {
  position: relative;
  width: 125rem;
  min-height: 32.7rem;
  margin-left: 6.7rem;
  padding: 5.1rem 5.9rem 5.1rem 13.2rem;
  border-radius: 4rem;
  background: var(--white);
}
.problem__item--reverse .problem__card {
  margin-left: auto;
  margin-right: 0;
  padding: 5.1rem 16.9rem 5.1rem 5.9rem;
  text-align: right;
}
/* テキストは Figma の指定幅。イラストは絶対配置で重ねる（デザイン通り） */
.problem__text { position: relative; z-index: 1; width: 74.5rem; }
.problem__item--reverse .problem__text { width: 79.6rem; margin-left: auto; }
.problem__title {
  display: inline-block;
  padding-bottom: 1.5rem;
  border-bottom: .3rem solid var(--purple);
  font-weight: 900;
  font-size: 5rem;
  line-height: 1.44;
  letter-spacing: .25rem;
}
.problem__desc {
  margin-top: 2.6rem;
  font-weight: 700;
  font-size: 3rem;
  line-height: 6.2rem;
  letter-spacing: .15rem;
}
.problem__illust { position: absolute; z-index: 0; }
.problem__item:nth-child(1) .problem__illust { width: 39.3rem; left: 79.8rem;  top: 7.6rem; }
.problem__item:nth-child(2) .problem__illust { width: 39.8rem; left: -1.5rem;  top: -.3rem; }
.problem__item:nth-child(3) .problem__illust { width: 38rem;   right: 1.5rem;  top: 8.4rem; }
.problem__item:nth-child(4) .problem__illust { width: 40rem;   left: 1.4rem;   top: 4.7rem; }

/* nth-child(1)/(3) はタイトルの下線幅をデザインに合わせる */
.problem__item:nth-child(1) .problem__title { min-width: 65.1rem; }
.problem__item:nth-child(2) .problem__title { min-width: 70.3rem; }
.problem__item:nth-child(3) .problem__title { min-width: 68.3rem; }
.problem__item:nth-child(4) .problem__title { min-width: 68rem; }

/* =========================================================
   FEATURE（ハカレルの特徴）
   ========================================================= */
.feature {
  width: var(--page-w);
  margin-top: -40.15rem;
  padding: 50.5rem 0 15.5rem;
  border-radius: 16.2rem;
  background: var(--blue-pale);
}
.feature__inner { width: var(--inner-w); margin: 0 auto; }
.feature__list { margin-top: 10.4rem; }
.feature__item + .feature__item { margin-top: 9rem; }
/* 01・02 の下に入る波形の区切り（カードの下で弧を描く） */
.feature__item { position: relative; }
.feature__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -16.85rem;   /* inner → セクション端までフルブリード */
  right: -16.85rem;
  bottom: -5rem;     /* アイテム間の余白(9rem)の中ほどに弧の底 */
  height: 12rem;
  z-index: -1;       /* カードの背面・セクション背景の前面 */
  /* 中央は水平、左右の角だけ丸める */
  border-radius: 0 0 10rem 10rem;
  background: var(--blue-pale);
  box-shadow: 0 .6rem 1.6rem rgba(99, 104, 239, .28);
}
.feature__head {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding-left: 1.6rem;
}
.feature__triangle {
  flex: none;
  width: 4rem;
  height: 3.5rem;
  transform: rotate(90deg);
}
.feature__num {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16rem;
  line-height: 1;
  letter-spacing: -.32rem;
  color: var(--pink);
}
.feature__title {
  margin-left: 2.2rem;
  font-weight: 900;
  font-size: 5rem;
  line-height: 1.44;
  letter-spacing: .25rem;
}
.feature__card {
  margin-top: 1.6rem;
  margin-right: 3.4rem;
  padding: 4.9rem 12.1rem 4.9rem 18.9rem;
  border-radius: 2.9rem;
  background: var(--white);
  font-weight: 700;
  font-size: 3rem;
  line-height: 6.2rem;
  letter-spacing: .15rem;
}
.feature__bullets { padding-left: 2.4rem; }
.feature__bullets li::before { content: "・"; }

/* =========================================================
   FLOW（具体的な仕組み）
   ========================================================= */
.flow {
  width: var(--page-w);
  margin-top: -41.4rem;
  padding: 59.4rem 0 20.4rem;
  border-radius: 0 0 30rem 30rem;
  /* Figma実測: 地#f2f7ff + 模様#ebf0ff、タイルピッチ416×410px(=41.6rem) */
  background: var(--page) url("../../img/add/hakarel/bg_flow.png") top left / 41.6rem auto repeat;
}
.flow__inner {
  position: relative;
  width: 141.8rem;
  margin: 0 auto;
  padding-left: 2.2rem;
}
.flow__list { position: relative; margin-top: 9.5rem; }
/* マーカーを結ぶ破線 */
.flow__list::before {
  content: "";
  position: absolute;
  left: 6.95rem;
  top: 3rem;
  /* 最後のマーカー（ゲームクリア）で止める */
  bottom: 25rem;
  border-left: .9rem dashed var(--purple);
}
.flow__step { position: relative; }
.flow__step + .flow__step { margin-top: 5.2rem; }
/* マーカーのみのSTEPは前のカードに詰める */
.flow__step + .flow__step--nobar { margin-top: 0; }

.flow__bar {
  position: relative;
  height: 17.6rem;
  display: flex;
  align-items: center;
}
.flow__bar::before {
  content: "";
  position: absolute;
  left: 3.7rem;
  right: 0;
  top: 5.99rem;
  height: 8.1rem;
  border-radius: 4.05rem;
  background: var(--purple);
}
.flow__bar--marker-only { height: 4.5rem; }
.flow__bar--marker-only::before { display: none; }
.flow__marker {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 15.9rem;
  height: 17.9rem;
}
.flow__bar--marker-only .flow__marker { top: -2.8rem; }
.flow__phase {
  position: relative;
  z-index: 1;
  margin-left: 18.4rem;
  font-weight: 900;
  font-size: 5rem;
  line-height: 1.44;
  letter-spacing: .25rem;
  color: var(--yellow);
}

.flow__card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 16.5rem;
  margin: -.9rem 0 0 16.9rem;
  padding: 2.9rem 3.6rem;
  width: 115rem;
  border-radius: 1.8rem;
  background: var(--purple-40);
}
.flow__card-body { position: relative; z-index: 1; flex: 1 1 auto; }
.flow__title {
  font-weight: 700;
  font-size: 4rem;
  line-height: 1.45;
  letter-spacing: .2rem;
  color: var(--white);
}
.flow__desc {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: .5rem;
  font-weight: 700;
  font-size: 3rem;
  line-height: 6.2rem;
  letter-spacing: .15rem;
}
.flow__triangle {
  flex: none;
  width: 3.6rem;
  height: 3.1rem;
  transform: rotate(90deg);
}
.flow__illust {
  position: absolute;
  z-index: 0;
  flex: none;
}
.flow__illust--survey { width: 36.9rem; right: -6.7rem; top: -3.4rem; }
.flow__illust--result  { width: 48.4rem; right: -9.9rem; top: -1.8rem; }

/* =========================================================
   BENEFIT（導入でできること）
   ========================================================= */
.benefit {
  width: var(--page-w);
  margin-top: -46.7rem;
  padding: 61.9rem 0 12.9rem;
  border-radius: 16.2rem;
  background: var(--blue-pale);
}
.benefit__inner { width: var(--inner-w); margin: 0 auto; }
.benefit__list { margin-top: 6.6rem; }
.benefit__item + .benefit__item { margin-top: 10.5rem; }

.benefit__head { position: relative; height: 7.9rem; }
.benefit__head::before {
  content: "";
  position: absolute;
  left: 31.6rem;
  top: 2rem;
  width: 124.7rem;
  height: 7.7rem;
  background: var(--purple);
}
.benefit__tag {
  position: absolute;
  left: .2rem;
  top: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  height: 7.9rem;
  padding: 0 2.9rem;
  background: var(--pink);
}
.benefit__triangle {
  flex: none;
  width: 4rem;
  height: 3.5rem;
  transform: rotate(90deg);
}
.benefit__tag-text {
  font-weight: 900;
  font-size: 5rem;
  line-height: 1;
  letter-spacing: .25rem;
  color: var(--white);
}
.benefit__title {
  position: absolute;
  left: 45.7rem;
  top: 2.5rem;
  z-index: 1;
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1.44;
  letter-spacing: .225rem;
  color: var(--white);
  white-space: nowrap;
}
.benefit__item:nth-child(1) .benefit__title { left: 36.8rem; }

.benefit__card {
  margin-top: 4rem;
  padding: 1.7rem 12.1rem 1.7rem 18.9rem;
  border-radius: 2.9rem;
  background: var(--white);
  font-weight: 700;
  font-size: 3rem;
  line-height: 6.2rem;
  letter-spacing: .15rem;
}
.benefit__cta { margin-top: 10.8rem; text-align: center; }

/* =========================================================
   PRICE（料金プラン）
   ========================================================= */
.price {
  width: var(--page-w);
  margin-top: -20.2rem;
  padding: 32.8rem 0 24.6rem;
  background: url("../../img/add/hakarel/bg_price.svg") center / 100% 100% no-repeat;
}
.price__inner { width: var(--inner-w); margin: 0 auto; }
.price .heading__deco--q { filter: brightness(0) saturate(100%) invert(74%) sepia(58%) saturate(510%) hue-rotate(120deg) brightness(97%); }
.price .heading__deco--ex-yellow { filter: brightness(0) saturate(100%) invert(85%) sepia(96%) saturate(1352%) hue-rotate(1deg) brightness(107%); }

.price__card {
  width: 147rem;
  margin: 9.3rem auto 0;
  padding: 7.3rem 0 5.4rem;
  border-radius: 8rem;
  background: var(--white);
  text-align: center;
}
.price__amount {
  display: block;
  color: var(--navy);
  line-height: 1.4;
  white-space: nowrap;
}
.price__num {
  font-family: var(--font-num);
  font-weight: 900;
  font-size: 13rem;
  letter-spacing: -.1rem;
}
.price__unit {
  font-weight: 900;
  font-size: 6rem;
}
.price__amount::after {
  content: "";
  display: block;
  width: 103.2rem;
  max-width: 100%;
  height: 1.1rem;
  margin: 1.4rem auto 0;
  border-radius: 8rem;
  background: var(--pink);
}
.price__note {
  width: 103.2rem;
  margin: 3.1rem auto 0;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 4.2rem;
  letter-spacing: .12rem;
  text-align: left;
}
.price__note-indent { padding-left: 2.4rem; }

/* =========================================================
   MESSAGE（代表からのコメント）
   ========================================================= */
.message {
  width: var(--page-w);
  margin-top: -43.2rem;
  padding: 38.5rem 0 19.4rem;
  border-radius: 31.2rem;
  /* Figma実測: 地#d4e6ff + 模様#c9dbfe、タイルピッチ309×305px(=30.9rem)。PC/SP共通 */
  background: var(--blue-pale) url("../../img/add/hakarel/bg_message.png") top left / 30.9rem auto repeat;
}
.message__inner { width: var(--page-w); margin: 0 auto; }
.message__card {
  width: 147rem;
  margin: 27.2rem auto 0;
  /* padding-top .1rem でマージン相殺を防ぎ、写真の負マージンを枠外へ効かせる */
  padding: .1rem 8.7rem 10rem;
  border-radius: 16.2rem;
  background: var(--white);
}
.message__photo {
  width: 48.8rem;
  height: 48.8rem;
  /* 高さの半分を白枠の外に出す */
  margin: -24.4rem auto 0;
  border-radius: 50%;
  object-fit: cover;
}
.message__body {
  width: 129.8rem;
  margin: 3.2rem auto 0;
  font-weight: 700;
  font-size: 3rem;
  line-height: 5.5rem;
  letter-spacing: .15rem;
}
.message__body p + p { margin-top: 5.5rem; }
.message__sign {
  width: 63.7rem;
  margin: 14rem 9.5rem 0 auto;
  font-weight: 700;
  font-size: 3rem;
  line-height: 5.5rem;
  letter-spacing: .15rem;
  text-align: right;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq {
  width: var(--page-w);
  padding: 13.2rem 0 13.6rem;
}
.faq__inner { width: var(--inner-w); margin: 0 auto; }
.faq__list { margin-top: 8.1rem; }
.faq__item + .faq__item { margin-top: 4.2rem; }
.faq__q, .faq__a {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  padding: 2.2rem 12.7rem 2.2rem 2.5rem;
}
.faq__q {
  min-height: 13.8rem;
  align-items: center;
  border-radius: 2rem;
  background: var(--purple);
}
.faq__a {
  margin-top: 1.9rem;
  padding-top: 3.3rem;
  padding-bottom: 3.3rem;
  border-radius: 2rem;
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.faq__mark {
  flex: none;
  width: 12.9rem;
  font-family: var(--font-num);
  font-weight: 900;
  font-size: 11.5rem;
  line-height: .95;
  letter-spacing: .575rem;
}
.faq__mark--q { color: var(--yellow); }
.faq__mark--a { color: var(--pink); }
.faq__q-text {
  font-weight: 700;
  font-size: 4.1rem;
  line-height: 1.44;
  letter-spacing: .205rem;
  color: var(--white);
}
.faq__a-text {
  font-weight: 700;
  font-size: 3rem;
  line-height: 5.6rem;
  letter-spacing: .15rem;
}

/* =========================================================
   CONTACT + FOOTER
   ========================================================= */
.footer {
  width: var(--page-w);
  border-radius: 30rem 30rem 0 0;
  background: var(--blue-pale);
}
.contact { padding: 12.3rem 0 0; }
.contact__inner { width: var(--page-w); margin: 0 auto; }
.contact__card {
  width: 156.6rem;
  margin: 12.5rem auto 0;
  padding: 13.4rem 23.8rem 20.9rem;
  border-radius: 12.5rem;
  background: var(--page);
}

.form__row + .form__row { margin-top: 6.2rem; }
.form__label {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1.4;
  letter-spacing: .17rem;
}
.form__required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8.51rem;
  height: 2.96rem;
  border: .3rem solid var(--pink);
  border-radius: .5rem;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: .1rem;
  color: var(--pink);
}
.form__input {
  display: block;
  width: 100%;
  height: 7.95rem;
  margin-top: 1.1rem;
  padding: 0 2rem;
  border: .2rem solid var(--navy);
  border-radius: 1.2rem;
  background: var(--white);
  color: var(--navy);
  font-family: inherit;
  font-weight: 700;
  font-size: 2.8rem;
}
.form__input--textarea {
  height: 26.03rem;
  padding: 1.6rem 2rem;
  line-height: 1.6;
  resize: vertical;
}
.form__input:focus-visible { outline-offset: .2rem; }
.form__input[aria-invalid="true"] { border-color: var(--pink); }
.form__error {
  margin-top: .8rem;
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--pink);
}

.contact__note {
  margin-top: 5.7rem;
  font-weight: 700;
  font-size: 4rem;
  line-height: 1.45;
  text-align: center;
}
.contact__submit { margin-top: 9.4rem; text-align: center; }

.footer__bottom {
  padding: 10.6rem 8.4rem 5.7rem;
  text-align: right;
}
.footer__logos {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3.3rem;
}
.footer__logos img:first-child { width: 17.8rem; }
.footer__logos img:last-child  { width: 19.6rem; }
.footer__copy {
  margin-top: 1.4rem;
  font-weight: 500;
  font-size: 3rem;
  line-height: 1.45;
}
.footer__copy small { font-size: inherit; }

/* =========================================================
   追従CTA（デザインには無いが実務上必須の常設CTA）
   ========================================================= */
.floating-cta {
  position: fixed;
  right: 2rem;
  bottom: 4rem;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 .6rem 1.8rem rgba(30, 69, 141, .28);
  color: var(--white);
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.6rem);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.floating-cta.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
  .floating-cta:hover { filter: brightness(1.08); }
}

/* =========================================================
   SP / タブレット（1200px 以下）
   750px 相当のデザインに読み替えて 1 カラム化
   ========================================================= */
/* =========================================================
   SP（1200px 以下）— Figma SPアートボード 750px を実測して再現
   file 9A10D0wqqBbcUAcHgXxJZH / node 108:2「SP」
   1rem = デザイン10px。750px 以上のビューポートでは 750px 固定・中央寄せ。
   ========================================================= */
@media (max-width: 1200px) {
  html {
    font-size: min(calc(100vw / 75), 10px);
    scroll-padding-top: 15rem;
  }

  :root { --page-w: 75rem; --inner-w: 75rem; }

  #wrapper { width: var(--page-w); }

  .br-sp { display: inline; }   /* SPのみ改行を有効化 */
  .br-pc { display: none; }     /* PC用改行はSPでは無効化 */

  /* ---------- 共通：見出し（? テキスト !） ---------- */
  .heading {
    gap: 0;
    font-size: 4.5rem;
    letter-spacing: .45rem;
    line-height: 1.45;
  }
  .heading__deco--q { width: 5.94rem; height: 9.97rem; transform: rotate(-19.22deg); }
  .heading__deco--ex { width: 2.13rem; height: 9.82rem; transform: rotate(19.52deg); }
  .heading__text { margin: 0 1.6rem; }

  /* ---------- 共通：ボタン ---------- */
  .btn {
    width: 45.7rem;
    height: 6.63rem;
    padding: 0 2rem 0 3.7rem;
    border-radius: 5rem;
  }
  .btn--pink { padding-right: 8.5rem; }
  .btn__label { font-size: 3.5rem; letter-spacing: .175rem; }
  .btn__icon { right: 1.2rem; width: 4.8rem; height: 4.8rem; }

  /* =========================================================
     ヘッダー / ドロワー
     ========================================================= */
  .header__inner { width: var(--page-w); height: 13rem; padding: 0 2rem; }
  .header__logo img { width: 15.4rem; }

  .header__toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 5.1rem;
    height: 3.9rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .header__toggle-bar {
    display: block;
    width: 5.1rem;
    height: .58rem;
    background: var(--purple);
    transition: transform .3s ease, opacity .2s ease, background-color .3s ease;
  }
  .header__toggle[aria-expanded="true"] {
    position: fixed;
    z-index: 96;
    right: 2rem;
    top: 4.6rem;
  }
  .header__toggle[aria-expanded="true"] .header__toggle-bar { background: var(--white); }
  .header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(1) {
    transform: translateY(1.66rem) 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(-1.66rem) rotate(-45deg);
  }

  /* ドロワー本体（Figma: Rectangle 88 #6368ef 750×1390 + メニュー 45:3） */
  .nav {
    position: fixed;
    left: 50%;
    top: 0;
    z-index: 95;
    width: var(--page-w);
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--purple);
    transform: translateX(-50%);
    transition: max-height .35s ease;
  }
  .nav.is-open { max-height: 100vh; min-height: 100vh; overflow-y: auto; }
  /* ドロワー見出し「ハカレル」80px Black white */
  .nav__list::before {
    content: "ハカレル";
    display: block;
    margin: 4.1rem 0 0 5.5rem;
    font-weight: 900;
    font-size: 8rem;
    line-height: 1.45;
    color: var(--white);
  }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 12rem;
  }
  .nav__item { margin: 0 5.4rem 0 5.5rem; }
  .nav__item:first-child { margin-top: 11.8rem; }
  .nav__item + .nav__item { margin-top: 5.6rem; border-top: 0; }
  .nav__link {
    display: block;
    padding: 0 0 6.7rem 4.9rem;
    border-bottom: .2rem solid var(--white);
    font-weight: 700;
    font-size: 3.5rem;
    letter-spacing: .175rem;
    color: var(--white);
  }
  @media (hover: hover) {
    .nav__link:hover { color: var(--yellow); }
  }
  .header__overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(30, 69, 141, .45);
  }
  .header__overlay[hidden] { display: none; }

  /* =========================================================
     HERO（TOP 750×1053 / 写真は 1264×710 を左に -360 でマスク）
     ========================================================= */
  .hero {
    height: 89.4rem;
    overflow: hidden;
  }
  .hero__visual {
    position: absolute;
    inset: auto;
    max-width: none;
    left: -36rem;
    top: 18.4rem;
    width: 126.4rem;
    height: 71rem;
    object-fit: cover;
  }
  /* 上部を地色でフェードさせる（Figma: Rectangle 75 750×433） */
  .hero::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 43.3rem;
    background: linear-gradient(to bottom,
      var(--page) 0 67.667%, rgba(242, 247, 255, 0) 100%);
    pointer-events: none;
  }
  .hero__body {
    left: 4.9rem;
    top: 15.6rem;
    z-index: 2;
    width: 65rem;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  .hero__lead {
    margin-left: 0;
    font-size: 3rem;
    line-height: 1.44;
    background: linear-gradient(to bottom,
      transparent 0 67%, var(--yellow-mark) 67% 95%, transparent 95%);
  }
  .hero__name {
    margin-top: -.4rem;
    margin-left: 1rem;
    font-size: 11rem;
    line-height: 1.45;
  }
  .hero__catch {
    margin-top: .5rem;
    margin-left: .7rem;
    font-size: 2.8rem;
    line-height: 4.5rem;
    letter-spacing: .14rem;
    text-shadow: .3rem .2rem .1rem var(--white);
  }
  .hero__body .btn { margin: 36.3rem 0 0 9.8rem; }

  /* =========================================================
     INTRO（リード文 750×139 → 白パネル 692×1194）
     ========================================================= */
  .intro__summary {
    padding: 5.6rem 3rem 0;
    font-size: 3rem;
    line-height: 1.55;
    letter-spacing: .15rem;
    text-align: center;
  }
  .intro__panel {
    margin-top: 4.3rem;
    padding: 0 2.9rem;
    background: none;
  }
  .intro__panel-inner {
    padding: 4.5rem 0 13rem;
    background: var(--white);
  }
  /* SPでは ?! を見出しの上に横並びで置き、パネル上端に少しかぶせる（Figma 45:13 / 45:12） */
  .intro .heading { flex-wrap: wrap; align-items: flex-end; gap: 0 1.6rem; margin-top: -7rem; }
  .intro .heading__text {
    order: 3;
    flex: 0 0 100%;
    margin: 0;
    font-size: 4.4rem;
    letter-spacing: .15rem;
    white-space: nowrap;
  }
  /* SVGはpreserveAspectRatio:noneのため実比率(127:218 / 46:215)で指定しないと太る */
  /* PC用の拡大・位置ずらし（top/left）はSPでは無効化 */
  .intro .heading__deco--q { order: 1; width: 6.7rem; height: 11.5rem; margin-bottom: 1rem; top: 0; left: 0; }
  .intro .heading__deco--ex { order: 2; width: 2.2rem; height: 10.3rem; margin-bottom: 1.2rem; top: 0; left: 0; }
  /* 見出し → イラスト → 本文 → CTA の順（DOM は本文→イラストなので反転） */
  .intro__cols {
    flex-direction: column-reverse;
    align-items: center;
    gap: 4.2rem;
    margin-top: 0;
    padding: 0;
  }
  .intro__illust { width: 49rem; margin-top: 1.7rem; }
  .intro__text {
    width: 62.4rem;
    font-size: 2.8rem;
    line-height: 4.9rem;
    letter-spacing: .14rem;
  }
  .intro__cta { margin-top: 5.1rem; }

  /* =========================================================
     PROBLEM（紫ブロック 750×3148 r150）
     ========================================================= */
  .problem {
    margin-top: 5.6rem;
    padding: 9.5rem 0 21rem;
    border-radius: 15rem;
  }
  .problem__inner { width: 65.4rem; margin: 0 auto; }
  .problem__heading {
    font-size: 4.5rem;
    line-height: 7.9rem;
    letter-spacing: .225rem;
  }
  /* 「もやもや」を一回り大きく（Figma SP） */
  .problem__heading .em { font-size: 5.4rem; }
  .problem__list { margin-top: 4.6rem; }
  .problem__item { padding-top: 5.8rem; }
  .problem__item + .problem__item { margin-top: -1.4rem; }

  /* 番号クラウド：奇数=左 / 偶数=右（Figma はPC由来で右側が画面外に出るため内側に収める） */
  .problem__num,
  .problem__item--reverse .problem__num {
    top: -4.5rem;    /* カード上端の角に少し重なる高さ */
    left: -2.7rem;
    right: auto;
    width: 17.6rem;
    height: 16.7rem;
  }
  /* 雲本体と数字だけ少し下げる（しっぽの〇〇は据え置き） */
  .problem__cloud,
  .problem__num-text { transform: translateY(1.8rem); }
  /* 03・04 の雲だけさらに若干下げる */
  .problem__item:nth-child(3) .problem__num { top: -2.5rem; }
  /* 02・04 は雲本体（＋数字）だけさらに下げる */
  .problem__item:nth-child(4) .problem__cloud,
  .problem__item:nth-child(4) .problem__num-text { transform: translateY(3.6rem); }
  /* 02・04 のしっぽ〇〇も雲に合わせて下げる */
  .problem__item:nth-child(2) .problem__num::before,
  .problem__item:nth-child(2) .problem__num::after{ transform: translateY(1.6rem); }
  .problem__item:nth-child(4) .problem__num::before,
  .problem__item:nth-child(4) .problem__num::after { transform: translateY(3.0rem); }
  /* 雲のしっぽの 〇〇（雲の下からカードへ向かうドット）：通常=雲の右下 / reverse=雲の左下 */
  .problem__num::before,
  .problem__num::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--teal);
  }
  .problem__num::before,
  .problem__num::after { left: auto; top: auto; }  /* PC用のleft/top指定を無効化 */
  .problem__num::before { width: 3rem;   height: 3rem;   right: .6rem;   bottom: -1.1rem; }
  .problem__num::after  { width: 1.8rem; height: 1.8rem; right: -1.4rem; bottom: -2.0rem; }
  .problem__item--reverse .problem__num::before { right: auto; left: 1.6rem; }
  .problem__item--reverse .problem__num::after  { right: auto; left: -1.4rem; }
  .problem__item--reverse .problem__num { left: auto; right: -2.7rem; }
  .problem__num-text { padding-bottom: 2.8rem; font-size: 7rem; }

  /* カード内：タイトル → 罫線 → イラスト → 説明文 */
  .problem__card,
  .problem__item--reverse .problem__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* innerより少し広く（見出しの折り返しを変えないようカードだけ拡幅） */
    width: 69.4rem;
    min-height: 0;
    margin: 0 0 0 -2rem;
    padding: 3.7rem 0 3.3rem;
    border-radius: 4rem;
    text-align: center;
  }
  .problem__text,
  .problem__item--reverse .problem__text {
    display: contents;
  }
  .problem__title,
  .problem__item:nth-child(n) .problem__title {
    order: 1;
    min-width: 0;
    width: 51.9rem;
    padding-bottom: 1.7rem;
    border-bottom: .2rem solid var(--purple);
    font-size: 4rem;
    line-height: 1.44;
    letter-spacing: .2rem;
    /* 雲・ドットと反対側へ寄せて文字の重なりを避ける（雲が左上 → 右へ） */
    position: relative;
    left: 6rem;
  }
  .problem__item--reverse:nth-child(n) .problem__title { left: -5.5rem; }  /* 雲が右上 → 左へ */
  .problem__item:nth-child(n) .problem__illust {
    order: 2;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 38.4rem;
    margin: 3.4rem 0 0;
  }
  .problem__item:nth-child(2) .problem__illust { width: 38.9rem; }
  .problem__item:nth-child(3) .problem__illust { width: 37.1rem; }
  .problem__item:nth-child(4) .problem__illust { width: 39.1rem; }
  .problem__desc {
    order: 3;
    width: 55.6rem;
    margin-top: 2.5rem;
    font-size: 2.8rem;
    line-height: 4.9rem;
    letter-spacing: .14rem;
    text-align: left;
  }

  /* =========================================================
     FEATURE（#d4e6ff 750×3128 r150 / 紫ブロックと 161 重なる）
     ========================================================= */
  .feature {
    /* 角丸(15rem)が紫の角丸ゾーンと重なると弧が露出するため、30rem以上重ねて隠す */
    margin-top: -32rem;
    padding: 44rem 0 17.8rem;
    border-radius: 15rem;
  }
  .feature__inner { width: 68.4rem; margin: 0 auto; }
  .feature__list { margin-top: 8.7rem; }
  .feature__item + .feature__item { margin-top: 8.1rem; }
  /* 区切りの弧：SPの実寸に合わせる（PCの-16.85remでは角丸が画面外にクリップされ直線に見える） */
  .feature__item:not(:last-child)::after {
    left: -3.3rem;
    right: -3.3rem;
    bottom: -4rem;
    height: 10rem;
    border-radius: 0 0 8rem 8rem;
  }
  .feature__head {
    display: grid;
    grid-template-columns: 4.6rem 11.3rem 1fr;
    align-items: start;
    gap: 0;
    padding-left: 0;
  }
  .feature__triangle {
    width: 4.6rem;
    height: 3.81rem;
    margin-top: 3.4rem;
    transform: rotate(90deg);
  }
  .feature__num {
    font-size: 9rem;
    line-height: 1;
    letter-spacing: -.18rem;
  }
  .feature__title {
    width: 50.3rem;
    margin: .3rem 0 0 .6rem;
    font-size: 3.8rem;
    line-height: 1.45;
    letter-spacing: .2rem;
  }
  .feature__card {
    width: 61.6rem;
    margin: 1.8rem auto 0;
    padding: 4rem 4rem;
    border-radius: 2.9rem;
    font-size: 2.8rem;
    line-height: 5rem;
    letter-spacing: .14rem;
  }
  .feature__bullets { padding-left: 2rem; }

  /* =========================================================
     FLOW（パターン背景 750×2026 / 特徴と 357 重なる）
     ========================================================= */
  .flow {
    margin-top: -35.7rem;
    /* 下パディング＝カード下の白エリア。イラスト(はみ出し11.5rem)を余裕で包む高さ */
    padding: 46.4rem 0 24rem;
    /* PCの30remでは75rem幅に対して丸すぎるため、他セクションと同じ15remに */
    border-radius: 0 0 15rem 15rem;
    /* Figma実測: 地#f2f7ff + 模様#ebf0ff、タイルピッチ416×410px(=41.6rem) */
  background: var(--page) url("../../img/add/hakarel/bg_flow.png") top left / 41.6rem auto repeat;
  }
  .flow__inner { width: 71.3rem; margin: 0 auto; padding-left: 0;}
  .flow__list { margin-top: 9.6rem; }
  .flow__list::before {
    /* LPと同じ見た目：太く・最初のマーカーから最後のマーカーまで */
    left: 7.1rem;   /* 太さ分の中心補正 */
    top: 2rem;
    /* 最後のマーカー（ゲームクリア）で止める：最終カードの高さ分を除外 */
    bottom: 17rem;
    border-left: .8rem dashed var(--purple);
  }
  .flow__step + .flow__step { margin-top: 4rem; }

  .flow__bar { height: 13.33rem; }
  .flow__bar::before {
    left: 2.8rem;
    right: 0;
    top: 4.3rem;
    height: 6.2rem;
    border-radius: 3.1rem;
  }
  .flow__bar--marker-only { height: 9.6rem; }
  .flow__marker { width: 12.04rem; height: 13.55rem; }
  .flow__bar--marker-only .flow__marker { top: -1.6rem; }
  .flow__phase {
    margin-left: 15.6rem;
    font-size: 4rem;
    line-height: 1.38;
    letter-spacing: .2rem;
  }

  .flow__card {
    display: block;
    /* 枠を左に寄せて広げ、本文を1行16文字で折り返す（右端位置は変えない） */
    width: 63.5rem;
    min-height: 0;
    margin: -1.4rem 0 0 8.4rem;
    padding: 1.2rem 3rem 2rem 6.2rem;
    border-radius: 1.8rem;
  }
  .flow__title { font-size: 3.5rem; line-height: 1.26; letter-spacing: .175rem; }
  .flow__desc {
    align-items: flex-start;
    gap: 1.3rem;
    margin-top: .1rem;
    margin-left: 0;
    max-width: 54rem;
    font-size: 2.8rem;
    line-height: 4.9rem;
    letter-spacing: .14rem;
  }
  .flow__triangle { width: 3.1rem; height: 2.6rem; margin-top: 1.2rem; }
  /* イラストはカード右下に重ねる（Figma image8 / image9） */
  .flow__illust,
  .flow__illust--survey,
  .flow__illust--result {
    position: absolute;
    margin: 0;
  }
  /* 下へ大きくはみ出させて本文テキストと重ならないように */
  .flow__illust--survey { width: 23.4rem; right: 1.5rem; bottom: -7rem; top: auto; }
  .flow__illust--result  { width: 36.7rem; right: 1.5rem; bottom: -11.5rem; top: auto; }

  /* =========================================================
     BENEFIT（#d4e6ff 750×2737 r150 / FLOWと 687 重なる）
     ========================================================= */
  .benefit {
    margin-top: -68.7rem;
    padding: 82rem 0 13.7rem;   /* 白エリア下〜見出しの間隔 */
    border-radius: 15rem;
  }
  .benefit__inner { width: 66.2rem; margin: 0 auto; }
  .benefit .heading {
    flex-wrap: nowrap;
    width: 71.1rem;
    margin-left: -2.45rem;
  }
  /* 1行目「ハカレルを導入すること」で(14文字)が収まるサイズに */
  .benefit .heading__text { font-size: 4rem; letter-spacing: .2rem; }
  .benefit__list { margin-top: 7rem; }   /* 見出し下の余白 */
  .benefit__item + .benefit__item { margin-top: 16.2rem; }
  /* 各ブロック下の波形区切り（featureと同じ、左右の角だけ丸い弧） */
  .benefit__item { position: relative; }
  .benefit__item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: -4.4rem;   /* inner 66.2rem → 画面端 75rem までフルブリード */
    right: -4.4rem;
    bottom: -8rem;
    height: 10rem;
    z-index: -1;
    border-radius: 0 0 8rem 8rem;
    background: var(--blue-pale);
    box-shadow: 0 .6rem 1.6rem rgba(99, 104, 239, .28);
  }

  .benefit__head { height: auto; }
  .benefit__head::before { display: none; }
  .benefit__tag,
  .benefit__item:nth-child(n) .benefit__tag {
    position: relative;
    left: auto;
    top: auto;
    display: inline-flex;
    gap: 1rem;
    height: 7.9rem;
    padding: 0 2.6rem 0 3.6rem;
    border-radius: 0;
  }
  .benefit__triangle { width: 4.6rem; height: 3.81rem; }
  .benefit__tag-text { font-size: 4rem; letter-spacing: .2rem; }
  .benefit__title,
  .benefit__item:nth-child(n) .benefit__title {
    position: relative;
    left: auto;
    top: auto;
    display: flex;
    align-items: center;
    min-height: 11.6rem;
    margin-top: -.8rem;
    padding: .6rem 3rem .6rem 4.7rem;
    background: var(--purple);
    font-size: 3.5rem;
    line-height: 1.45;
    letter-spacing: .175rem;
    white-space: normal;
  }
  .benefit__card {
    width: 66.2rem;
    margin-top: 1.4rem;
    padding: 1.4rem 4.4rem;
    border-radius: 2.9rem;
    font-size: 2.8rem;
    line-height: 4.9rem;
    letter-spacing: .14rem;
  }
  .benefit__cta { margin-top: 12.4rem; }

  /* =========================================================
     PRICE（紫 750×1450 / BENEFITと 544 重なる）
     ========================================================= */
  .price {
    margin-top: -54.4rem;
    padding: 67.7rem 0 17.6rem;
    background: var(--purple);
  }
  /* 下端が中央で持ち上がる曲線（次セクションの色で切り抜く） */
  .price::after {
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: -.1rem;
    height: 7rem;
    background: var(--blue-pale);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  }
  .price__inner { width: var(--page-w); margin: 0 auto; }
  .price__card {
    width: 69rem;
    margin: 4.5rem auto 0;
    padding: 8.2rem 0 4.6rem;
    border-radius: 8rem;
  }
  .price__amount { white-space: nowrap; }
  .price__num { font-size: 7.3rem; letter-spacing: -.146rem; }
  .price__unit { font-size: 5.8rem; }
  .price__amount::after { width: 63.6rem; height: 1.1rem; margin-top: 1.1rem; }
  .price__note {
    width: 62.2rem;
    margin-top: 4.7rem;
    font-size: 2.2rem;
    line-height: 3.7rem;
    letter-spacing: .11rem;
  }
  .price__note-indent { display: inline-block; padding-left: 1.6rem; }

  /* =========================================================
     MESSAGE（#d4e6ff 750×2806 / PRICEと 227 重なる）
     ========================================================= */
  .message {
    margin-top: -22.7rem;
    padding: 31.1rem 0 14.2rem;
    border-radius: 15rem;
  }
  .message__inner { width: var(--page-w); }
  .message__card {
    width: 66rem;
    margin: 24rem auto 0;
    /* padding-top .1rem でマージン相殺を防ぎ、写真の負マージンを枠外へ効かせる */
    padding: .1rem 4.5rem 12.2rem;
    border-radius: 15rem;
  }
  .message__photo {
    width: 37.2rem;
    height: 37.2rem;
    margin: -18.6rem auto 0;
  }
  .message__body {
    width: 61.1rem;
    margin: 5.4rem auto 0;
    font-size: 2.4rem;
    line-height: 4.9rem;
    letter-spacing: .14rem;
    padding-right:4rem;
  }
  .message__body p + p { margin-top: 4.9rem; }
  .message__sign {
    width: 100%;
    margin: 4.9rem 0 0;
    font-size: 2.8rem;
    line-height: 5.6rem;
    letter-spacing: .14rem;
  }

  /* =========================================================
     FAQ（651幅 / MESSAGEの下 89px）
     ========================================================= */
  .faq { padding: 8.9rem 0 11rem; }
  .faq__inner { width: 65.1rem; margin: 0 auto; }
  .faq__list { margin-top: 8.2rem; }
  .faq__item + .faq__item { margin-top: 4.1rem; }
  .faq__q, .faq__a {
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.8rem 4rem 1.8rem 1rem;
    border-radius: 2rem;
  }
  .faq__q { min-height: 16.3rem; align-items: center; }
  .faq__a { margin-top: 2.1rem; padding-top: 2.1rem; padding-bottom: 3rem; }
  .faq__mark { width: 8.3rem; font-size: 6rem; line-height: 1.22; letter-spacing: .3rem; }
  .faq__q-text { font-size: 2.8rem; line-height: 1.44; letter-spacing: .15rem; }
  .faq__a-text { font-size: 2.6rem; line-height: 5.6rem; letter-spacing: .14rem; }

  /* =========================================================
     CONTACT / FOOTER（フッター 750×2228 r上）
     ========================================================= */
  .footer { border-radius: 15rem 15rem 0 0; }
  .contact { padding: 10.8rem 0 0; }
  .contact__inner { width: 65.4rem; margin: 0 auto; }
  .contact__card {
    width: 65.4rem;
    margin: 8.5rem auto 0;
    padding: 11.1rem 3.2rem 12.3rem;
    border-radius: 10rem;
  }
  .form__row + .form__row { margin-top: 6.2rem; }
  .form__label { gap: 1.1rem; font-size: 3rem; letter-spacing: .15rem; }
  .form__required {
    width: 7.16rem;
    height: 2.96rem;
    border-width: .3rem;
    font-size: 1.8rem;
  }
  .form__input {
    height: 7.9rem;
    margin-top: 1rem;
    padding: 0 2rem;
    border-width: .2rem;
    border-radius: 1.2rem;
    font-size: 2.8rem;
  }
  .form__input--textarea { height: 26rem; padding: 1.6rem 2rem; }
  .form__error { font-size: 2.2rem; }
  .contact__note {
    margin-top: 4.5rem;
    font-size: 3rem;
    line-height: 4.3rem;
    letter-spacing: .15rem;
  }
  .contact__submit { margin-top: 6rem; }
  .contact__submit .btn { width: 60rem; height: 8.7rem; padding: 0 2rem; }
  .contact__submit .btn__label { font-size: 4rem; letter-spacing: .2rem; }

  .footer__bottom { padding: 8.6rem 0 5.7rem; text-align: center; }
  .footer__logos { justify-content: center; gap: 2.3rem; }
  .footer__logos img:first-child { width: 14.6rem; }
  .footer__logos img:last-child  { width: 16.1rem; }
  .footer__copy { margin-top: 3rem; font-size: 3rem; line-height: 1.3; }

  /* ---------- 追従CTA ---------- */
  .floating-cta {
    right: 2.4rem;
    bottom: 2.4rem;
    width: 17rem;
    height: 17rem;
    font-size: 2.9rem;
  }
}

/* =========================================================
   アクセシビリティ
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .floating-cta { transition: none; }
}

@media print {
  .header, .floating-cta { display: none; }
}

/* =========================================================
   MW WP Form 対応（送信ボタンは input 要素のため文字装飾を直接当てる）
   ========================================================= */
.contact__form input.btn {
  font-weight: 900;
  font-size: 4rem;
  letter-spacing: .2rem;
  color: var(--white);
}
/* バリデーションエラー */
.contact__form .error {
  display: block;
  margin-top: .8rem;
  font-size: 2.6rem;
  color: var(--pink);
}
@media (max-width: 1200px) {
  .contact__form input.btn { font-size: 3.5rem; letter-spacing: .175rem; }
  .contact__form .error { font-size: 2.8rem; }
}
/* 確認画面：入力値のテキスト表示を大きく */
.mw_wp_form_confirm .form__row {
  margin-top: 1.1rem;
  font-size: 3rem;
  line-height: 1.6;
}
/* 完了画面メッセージ／直接アクセス・送信エラー表示 */
.mw_wp_form_complete,
.mw_wp_form_send_error {
  padding: 6rem 2rem;
  font-weight: 700;
  font-size: 3rem;
  line-height: 2;
  text-align: center;
}