/* ============================================
   tomy soin / Kids 美肌脱毛 LP
   Color palette (Dione-inspired):
   - bg white:     #ffffff
   - bg pink:      #fff0f2
   - rose:         #FF96A0 (primary salmon pink)
   - rose 2:       #f07080
   - rose deep:    #d45060 (text accent)
   - card pink:    #fff5f6
   - text dark:    #30302e
   - text body:    #4a4a4a
   - gold:         #FFD79B
   - line green:   #06C755
============================================= */

:root {
  --bg-cream: #ffffff;
  --bg-pink: #fff0f2;
  --rose: #FF96A0;
  --rose-2: #f07080;
  --rose-deep: #d45060;
  --card-pink: #fff5f6;
  --card-pink-2: #ffe8ea;
  --text: #30302e;
  --text-body: #4a4a4a;
  --text-muted: #888888;
  --gold: #FFD79B;
  --line-green: #06C755;

  --font-jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --font-jp-serif: "Noto Serif JP", "Yu Mincho", serif;
  --font-en: "Cormorant Garamond", "Times New Roman", serif;
  --font-en-round: "Quicksand", sans-serif;
  --font-hand: "Klee One", "Hiragino Mincho ProN", cursive;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-jp);
  color: var(--text);
  background: var(--bg-cream);
  line-height: 1.8;
  font-size: 17px;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* ===== Placeholders ===== */
.placeholder {
  width: 100%;
  height: 100%;
  min-height: 80px;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,150,160,.08),
      rgba(255,150,160,.08) 8px,
      rgba(255,150,160,.16) 8px,
      rgba(255,150,160,.16) 16px);
  border: 1px dashed rgba(255,120,130,.30);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--rose-deep);
  font-family: var(--font-en-round);
  font-size: 11px;
  text-align: center;
  gap: 4px;
}
.placeholder span { letter-spacing: .2em; font-weight: 700; }
.placeholder small { font-size: 10px; opacity: .75; }
.placeholder--hero    { aspect-ratio: 5/4; }
.placeholder--rect    { aspect-ratio: 4/3; }
.placeholder--square  { aspect-ratio: 1/1; }
.placeholder--portrait{ aspect-ratio: 3/4; }
.placeholder--mini    { aspect-ratio: 4/3; min-height: 90px; }

/* SP 専用改行 */
.sp-br { display: none; }
/* タブレット専用改行（600〜900px のみ表示） */
.tablet-br { display: none; }
/* 小SP（≤600px）専用改行 */
.sp-br--small { display: none; }

/* ===== Global justify（長文段落のみ）===== */
.hero__lead, .merit-card p, .consent__text p {
  text-align: justify;
  text-justify: inter-ideograph;
}

/* ===== Generic ===== */
.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 40px;
  position: relative;
}

.section-title {
  text-align: center;
  font-family: var(--font-jp-serif);
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 34px);
  color: #6a6460;
  margin: 0 0 40px;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.section-title__deco {
  color: var(--rose);
  font-size: .85em;
  font-weight: 400;
}
/* セクションタイトル内テキストまとめ用 */
.section-title__text {
  text-align: center;
}
/* 桜アイコン画像版 */
.section-title__deco--flower {
  height: 1.6em;   /* デスクトップ: テキスト1行分相当 */
  width: auto;
  display: block;
  flex-shrink: 0;
}

.accent-rose { color: var(--rose-2); font-family: var(--font-jp-serif); }

.underline-wave {
  background-image: linear-gradient(transparent 78%, rgba(255,150,160,.45) 78%);
  padding: 0 .15em;
}

/* ============================================
   HERO
============================================= */
.hero {
  position: relative;
  width: 100%;
  min-height: 640px;
  padding: 0 0 48px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fff5f6 60%, #ffe0e3 100%);
}

.hero__bg {
  position: absolute;
  top: 0;
  right: max(-50px, calc((100% - 1280px) / 2 - 40px));
  bottom: 0;
  width: 68%;
  max-width: 1000px;
  background: url('images/hero.png') right center / contain no-repeat;
  filter: brightness(1.12) saturate(0.95);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%), linear-gradient(to left, transparent 0%, black 20%);
  -webkit-mask-composite: destination-in;
  mask-image: linear-gradient(to bottom, transparent 0%, black 14%), linear-gradient(to left, transparent 0%, black 20%);
  mask-composite: intersect;
  z-index: 0;
}

.hero__glow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, 1.00) 0%,
      rgba(255, 255, 255, 0.98) 32%,
      rgba(255, 245, 247, 0.82) 46%,
      rgba(255, 245, 247, 0.22) 58%,
      rgba(255, 255, 255, 0)    66%);
  z-index: 1;
  pointer-events: none;
}

.site-header {
  position: relative;
  z-index: 2;
  padding: 24px 40px 0;
  max-width: 1280px;
  margin: 0 auto;
}
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  line-height: 1.1;
}
.logo__small {
  font-family: var(--font-jp-serif);
  font-size: 13px;
  color: var(--rose-deep);
  letter-spacing: .2em;
  font-weight: 400;
}
.logo__name {
  font-family: var(--font-en);
  font-style: italic;
  font-size: 26px;
  color: var(--text);
  letter-spacing: .04em;
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 40px 0;
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  gap: 40px;
  align-items: center;
  min-height: 480px;
}

.hero__copy { padding-top: 8px; text-align: left; }

/* Ribbon */
.ribbon {
  display: inline-block;
  background: var(--card-pink);
  border: 1.5px dashed rgba(255,150,160,.55);
  border-radius: 6px;
  margin-bottom: 22px;
}
.ribbon__num {
  font-style: normal;
  font-size: 1.15em;
  font-weight: 700;
  color: var(--rose);
  line-height: 1;
  display: inline;
  letter-spacing: 0;
}
.ribbon__bot {
  font-family: var(--font-jp);
  font-weight: 500;
  color: var(--rose-deep);
  padding: 10px 22px;
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: .08em;
  display: block;
  white-space: nowrap;
}
.ribbon__suffix {
  font-family: var(--font-jp);
  color: var(--rose-deep);
  font-size: 22px;
  letter-spacing: .12em;
  font-weight: 500;
  white-space: nowrap;
}

.hero__title {
  font-family: var(--font-jp-serif);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.55;
  letter-spacing: .04em;
  margin: 0 0 22px;
  color: #6a6460;
  text-shadow:
    0 0 18px rgba(255,255,255,1),
    0 0 32px rgba(255,255,255,0.9),
    0 0 48px rgba(255,255,255,0.7);
}

.hero__lead {
  color: var(--text-body);
  font-size: 13.5px;
  line-height: 1.9;
  margin: 0 0 32px;
}

.hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .08em;
  box-shadow: 0 6px 14px rgba(255,100,120,.15);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 18px rgba(255,100,120,.22); }
.btn--line { background: var(--line-green); }
.btn--pink { background: var(--rose-2); }
.btn__icon { display: inline-flex; align-items: center; }
.btn__icon-img { width: 38px; height: 38px; object-fit: contain; }



/* ============================================
   WORRY
============================================= */
.section--worry { padding-top: 72px; }

.worry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.worry-card {
  background: var(--card-pink);
  border-radius: 14px;
  padding: 8px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  border: 1px solid rgba(255,150,160,.18);
}
.worry-card__illust {
  width: 100%;
  height: auto;
  text-align: center;
  line-height: 1;
}
.worry-card__illust .placeholder { border-radius: 50%; min-height: 0; }
.worry-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-jp);
  font-size: 17px;
  color: var(--rose-deep);
  line-height: 1.6;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.worry-card p {
  margin: 0;
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* ============================================
   STATS
============================================= */
.section--stats { padding-top: 16px; padding-bottom: 64px; }

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.stats__card {
  background: var(--card-pink);
  border-radius: 14px;
  padding: 30px 28px;
  position: relative;
  border: 1px solid rgba(255,150,160,.18);
}

.stats__card--chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.stats__lead {
  margin: 0 0 6px;
  font-family: var(--font-jp-serif);
  font-size: 24px;
  color: #6a6460;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .03em;
}
.stats__lead-wrap {
  display: inline;
}
.stats__flash-img {
  width: 36px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 2px;
}
.stats__jitsu {
  color: #6a6460;
  font-weight: 900;
}
.merit__photo-img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  object-position: center center;
  border-radius: 16px;
  display: block;
}
.stats__sub {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--text-muted);
}

.donut {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 4px;
  width: 100%;
}
.donut__ring {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.donut__ring svg { display: block; }
.donut__pct-inline {
  display: block;
  font-family: var(--font-en-round);
  font-size: 80px;
  font-weight: 700;
  color: var(--rose-2);
  line-height: 1.0;
  letter-spacing: -.01em;
  font-style: normal;
}
.donut__pct-inline small { font-size: .5em; margin-left: 2px; font-weight: 500; }
.donut__cap {
  font-size: 17px;
  color: var(--text-body);
  line-height: 1.8;
}
.stats__source {
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  margin: 4px 0 0;
}

/* Rank */
.stats__card--rank { display: flex; flex-direction: column; }
.rank__inner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
}
/* キャラ画像: absolute配置でフレックスの幅を取らない */
.rank__chara-img {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  height: 250px;
  width: auto;
  object-fit: contain;
}
.rank__title {
  margin: 0 0 14px;
  font-family: var(--font-jp-serif);
  font-size: 16px;
  color: #6a6460;
  font-weight: 700;
}
.rank__title span { font-size: 14px; color: var(--text-muted); font-weight: 400; }
.rank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rank li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,120,130,.25);
}
.rank li:last-child { border-bottom: none; }
.rank__crown {
  font-size: 20px;
  width: 80px;
  min-width: 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rank__pos {
  font-family: var(--font-en-round);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  width: 26px;
}
.rank__text {
  font-family: var(--font-jp);
  font-size: 20px;
  color: var(--rose-2);
  font-weight: 500;
  letter-spacing: .04em;
}

/* ============================================
   REASONS
============================================= */
.section--reasons {
  padding-top: 64px;
  padding-bottom: 64px;
}
.reasons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.reason-card {
  background: var(--card-pink);
  border-radius: 14px;
  padding: 26px 18px 22px;
  text-align: center;
  border: 1px solid rgba(255,150,160,.18);
  position: relative;
}
.reason-card__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}
.reason-card__num {
  display: block;
  font-family: var(--font-en);
  font-style: italic;
  font-size: 18px;
  color: var(--rose-deep);
  margin-bottom: 10px;
  position: relative;
}
.reason-card__num::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: var(--rose);
  margin: 6px auto 0;
}
.reason-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-jp-serif);
  font-size: 22px;
  color: #7a5c4a;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.45;
  font-feature-settings: 'palt';
}
.reason-card p {
  margin: 0;
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.75;
  text-align: center;
}

/* ============================================
   MERIT
============================================= */
.section--merit {
  background: var(--bg-pink);
  max-width: none;
  padding: 64px 40px;
  margin-top: 24px;
}
.section--merit .section-title { color: #6a6460; letter-spacing: .04em; word-spacing: normal; gap: 0; display: block; margin-bottom: 14px; }
.section--merit > * { max-width: 1200px; margin-left: auto; margin-right: auto; }

.merit {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
  align-items: stretch;
}
.merit-cards {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.merit__photo {
  display: flex;
  align-items: stretch;
}
.merit__photo .placeholder {
  border-radius: 14px;
  aspect-ratio: 3/4;
  width: 100%;
}
.merit-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 4px 20px rgba(255,150,160,.13);
  text-align: left;
}
.merit-card h3 {
  font-family: var(--font-jp-serif);
  color: var(--rose-2);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: .06em;
  line-height: 1.5;
  font-feature-settings: 'palt';
}
.merit-card .hearts { color: var(--rose); margin: 0 8px; font-size: 14px; }
.merit-card p {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--text-body);
  line-height: 2.3;
  text-align: justify;
}
.merit-card p:last-child { margin-bottom: 0; }
.merit-card .emph {
  color: var(--rose-deep);
  font-weight: 700;
  background: linear-gradient(transparent 55%, rgba(255,220,100,.55) 55%);
  padding: 0 2px;
}
.merit__footer {
  font-family: var(--font-jp);
  font-size: 17px;
  text-align: left;
  margin: 28px 0 0;
  line-height: 2.3;
  color: var(--text-body);
  letter-spacing: .05em;
}

/* Merit sparkle (above h2) */
.merit-sparkle {
  display: flex;
  justify-content: center;
  margin: 0 auto 8px;
}
.merit-sparkle__img {
  width: 100px;
  height: auto;
  display: block;
}

/* Merit h2 bow divider (below h2) */
.merit-hdeco {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 40px;
  max-width: 1200px;
}
.merit-hdeco__img {
  width: min(300px, 72%);
  height: auto;
  display: block;
}

/* Merit card badge */
.merit-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.merit-badge {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(160deg, #f07080 0%, #FF96A0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.merit-badge__label {
  font-family: var(--font-en-round);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
}
.merit-badge__num {
  font-family: var(--font-en-round);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}

/* ============================================
   SPACE
============================================= */
.section--space { padding-top: 64px; padding-bottom: 48px; }
.space-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.space-grid figure { margin: 0; }
.space-grid figure .placeholder { border-radius: 12px; }
.space-grid__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; display: block; box-shadow: 0 0 0 6px var(--bg-pink), 0 0 20px 6px rgba(255,200,210,.4); }
.space-grid figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 15px;
  color: var(--text-body);
  letter-spacing: .04em;
}
.figure--exterior {
  border-radius: 12px;
  overflow: hidden;
}
.figure--exterior .space-grid__img {
  object-fit: cover;
}

/* ============================================
   FLOW
============================================= */
.section--flow { padding-top: 32px; padding-bottom: 56px; }
.section--flow .section-title { margin-bottom: 102px; }
.flow {
  display: grid;
  grid-template-columns: 1fr 30px 1fr 30px 1fr;
  gap: 8px;
  align-items: start;
}
.flow-step {
  background: #fff;
  border-radius: 20px;
  padding: 48px 20px 26px;
  text-align: center;
  position: relative;
  border: none;
  box-shadow: 0 8px 32px rgba(210, 100, 120, 0.14), 0 2px 8px rgba(210, 100, 120, 0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.flow-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(210, 100, 120, 0.2), 0 4px 12px rgba(210, 100, 120, 0.1);
}
.flow-step__badge {
  position: absolute;
  top: -16px;
  left: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--rose-2);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 4px 8px rgba(255,100,120,.20);
}
.flow-step__badge small { font-size: 9px; letter-spacing: .15em; font-family: var(--font-en-round); font-weight: 700; }
.flow-step__badge strong { font-family: var(--font-en); font-size: 22px; font-style: italic; margin-top: 2px; }

.flow-step h3 {
  margin: 18px 0 14px;
  font-family: var(--font-jp-serif);
  font-size: 21px;
  font-weight: 700;
  color: #7a6060;
  letter-spacing: .06em;
  font-feature-settings: 'palt';
}
.flow-step h3 small { display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.flow-step__icons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  align-items: center;
}
.ficon { display: inline-flex; align-items: center; justify-content: center; }

.flow-step__illust {
  margin: 0 auto 12px;
  display: block;
  width: fit-content;
}

.flow-step p {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.75;
  text-align: center;
}
.flow-step__note {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}

.flow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rose);
  font-size: 36px;
  font-weight: 300;
  font-family: serif;
}

/* ============================================
   PRICE
============================================= */
.section--price { padding-top: 56px; padding-bottom: 40px; }

.price__title {
  font-family: var(--font-jp-serif);
  text-align: center;
  font-weight: 600;
  font-size: 19px;
  color: var(--text);
  margin: 0 0 20px;
  padding-top: 20px;
  letter-spacing: .05em;
  grid-column: 1 / -1;
}
.price__title-sub { font-size: 13px; color: var(--text-body); margin-left: 8px; }
.price__title-note { display: inline-block; font-size: 10px; color: var(--text-muted); margin-left: 10px; }

.price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.price__tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 900px;
}
.price__notice {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
  max-width: 820px;
  justify-content: center;
}
.price__off {
  flex: 1;
  background: var(--card-pink);
  border-radius: 18px;
  padding: 22px 40px 26px;
  color: var(--text-body);
  text-align: center;
  border: 1.5px solid rgba(255,150,160,.35);
  position: relative;
}
.price__select-label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 5px 20px !important;
  background: var(--rose);
  color: #fff;
  font-size: 12px;
  font-family: var(--font-jp-serif);
  letter-spacing: .08em;
  border-radius: 20px;
}
.price__off-head {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--text);
  font-family: var(--font-jp-serif);
  letter-spacing: .05em;
  padding-bottom: 0;
  border-bottom: none !important;
}
.price__off p {
  margin: 8px 0;
  font-size: 18px;
  font-family: var(--font-jp-serif);
  letter-spacing: .04em;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(220,150,160,.5);
  white-space: nowrap;
}
.price__off p:last-child { border-bottom: none; }
.price__heart-icon { display: inline-block; height: 1.6em; width: auto; vertical-align: middle; margin-right: 6px; }
.price__pct {
  font-family: var(--font-en-round);
  font-size: 28px;
  color: var(--rose-deep);
  font-weight: 700;
  margin-left: 8px;
  letter-spacing: .02em;
}
.price__link {
  flex: 1;
  background: var(--card-pink);
  border-radius: 18px;
  padding: 22px 28px 26px;
  text-align: center;
  border: 1.5px solid rgba(255,150,160,.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.price__link p {
  margin: 0 0 14px;
  color: var(--text-body);
  font-size: 16px;
  font-family: var(--font-jp-serif);
  letter-spacing: .04em;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(220,150,160,.5);
}
.price__link-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #e8c07a;
  color: #fff;
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 16px;
  letter-spacing: .15em;
  font-family: var(--font-jp-serif);
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

.price-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,150,160,.25);
}
.price-table th:first-child,
.price-table td:first-child { width: 130px; }
.price-table thead th {
  background: #ffe0e3;
  color: var(--text);
  font-weight: 600;
  padding: 10px 8px;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(255,150,160,.25);
  font-family: var(--font-jp-serif);
}
.price-table tbody td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(255,150,160,.15);
  color: var(--text-body);
}
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table__note-row td {
  background: #fff;
  font-size: 10.5px;
  color: var(--text-body);
  padding: 8px 6px;
  text-align: right;
  border-bottom: none;
}
.price-table__highlight td {
  background: var(--card-pink);
  font-weight: 600;
  color: var(--rose-deep);
  font-size: 13.5px;
}
.badge-off {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--font-en-round);
  letter-spacing: .1em;
}

.price__footer {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin: 14px 0 0;
}

/* ============================================
   CONSENT
============================================= */
.section--consent {
  background: var(--card-pink);
  max-width: none;
  padding: 32px 24px;
}
.consent {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 30px;
  align-items: center;
}
.consent h3 {
  margin: 0 0 10px;
  font-family: var(--font-jp-serif);
  font-size: 16px;
  color: var(--text);
  font-weight: 600;
  text-align: center;
}
.consent__text p {
  margin: 0;
  font-size: 12px;
  color: var(--text-body);
  line-height: 1.85;
  text-align: justify;
  text-justify: inter-ideograph;
}
.consent__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--rose) 0%, var(--rose-2) 100%);
  border: none;
  border-radius: 14px;
  padding: 18px 22px;
  font-size: 13px;
  color: #fff;
  line-height: 1.5;
  box-shadow: 0 6px 24px rgba(210, 100, 120, 0.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.consent__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(210, 100, 120, 0.45);
}
.consent__btn strong { color: #fff; font-weight: 700; }
.consent__btn-arrow img { filter: brightness(0) invert(1); }
.consent__btn-icon { flex-shrink: 0; }
.consent__btn-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ============================================
   CTA FOOTER
============================================= */
.cta {
  background: var(--bg-pink);
  margin-top: 12px;
}
.cta__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
}
.cta__photo { position: relative; }
.cta__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--bg-pink) 0%,
    transparent 22%,
    transparent 78%,
    var(--bg-pink) 100%
  );
  pointer-events: none;
}
.cta__photo .placeholder { border-radius: 0; aspect-ratio: 5/3; }
.cta__photo-img { width: 100%; aspect-ratio: 5/3; object-fit: cover; display: block; -webkit-mask-image: linear-gradient(to right, black 0%, black 50%, transparent 92%); mask-image: linear-gradient(to right, black 0%, black 50%, transparent 92%); }
.cta__body {
  padding: 40px 40px;
  text-align: center;
}
.cta__title {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 22px;
  color: #6a6460;
  margin: 0 0 22px;
  letter-spacing: .05em;
  line-height: 1.55;
}
.cta__btns {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(255,100,120,.08);
  border: 1px solid rgba(255,150,160,.25);
  transition: transform .15s ease;
}
.cta-btn:hover { transform: translateY(-1px); }
.cta-btn__icon { display: inline-flex; align-items: center; }
.hpb-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #FF96A0;
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
}

.footer {
  background: var(--bg-cream);
  text-align: center;
  padding: 18px;
  color: var(--text-muted);
  font-family: var(--font-en-round);
  font-size: 11px;
  letter-spacing: .15em;
}

/* 王冠画像サイズ */
.rank__crown-img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
/* ランクタイトル: 常に中央揃え */
.rank__title { text-align: center; }

/* ============================================
   RESPONSIVE
============================================= */
@media (max-width: 900px) {
  .hero { min-height: auto; padding-bottom: 24px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); min-height: auto; padding: 16px 20px 32px; }
  .hero__bg { display: none; }
  .hero__glow { display: none; }
  .site-header { text-align: center; }
  .sp-br { display: inline; }
  .hero__title { font-size: clamp(20px, 5.8vw, 28px); overflow-wrap: break-word; word-break: break-all; }
  .hero__copy { text-align: center; }
  .hero__lead { text-align: center !important; }
  .hero__cta { justify-content: center; }
  .ribbon { text-align: center; }
  .price__notice { flex-direction: column; }
  .hero__lead { word-break: break-all; overflow-wrap: break-word; }
  .ribbon { display: block; }
  .ribbon__bot { white-space: normal; font-size: 15px; padding: 8px 16px; }
  .worry-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .reasons { grid-template-columns: minmax(0, 1fr); }
  .merit { grid-template-columns: minmax(0, 1fr); }
  .merit-card { text-align: center; }
  .space-grid { grid-template-columns: minmax(0, 1fr); }
  .flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .flow__arrow { transform: rotate(90deg); }
  .price { grid-template-columns: minmax(0, 1fr); }
  .price__tables { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); }
  .consent { grid-template-columns: minmax(0, 1fr); }
  .cta__inner { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .section { overflow-x: hidden; }
  /* Stats card */
  .stats__card { padding: 20px 16px; }
  .stats__lead { font-size: 18px; }
  .donut__pct-inline { font-size: 50px; }
  /* 桜アイコン: SP では文字2行分の高さに */
  .section-title__deco--flower { height: 56px; }
  /* 空間セクションはSPで右側アイコンを非表示にしてテキスト幅を確保 */
  .section--space .section-title .section-title__deco--flower:last-of-type { display: none; }
  .section--space .section-title__deco--flower { height: 56px; }
  /* 円グラフ: SP では小さく表示 */
  .donut__ring svg { width: 160px; height: 160px; }
  .donut { gap: 12px; }
  /* Rank card */
  .rank__title { font-size: 14px; }
  .rank__crown-img { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
  .rank__text { font-size: 16px; word-break: break-all; }
  .rank__crown { width: 56px; min-width: 56px; font-size: 16px; }
  /* 同意セクション: SP で中央揃え */
  .consent__text { text-align: center; }
  .consent__text p { text-align: center; }
  /* お悩みセクションタイトル: テキストを左揃え */
  .section--worry .section-title { text-align: left; }
  /* CTAタイトル: SPでフォントサイズを下げて1行に収める */
  .cta__title { font-size: 20px; }
}

/* タブレット: 600〜900px */
@media (min-width: 600px) and (max-width: 900px) {
  /* reasons: 2カラム */
  .reasons { grid-template-columns: repeat(2, 1fr); }
  /* お悩みグリッド: タブレットで3カラム */
  .worry-grid { grid-template-columns: repeat(3, 1fr); }
  /* 空間写真グリッド: デスクトップ同様3カラムに戻す */
  .space-grid { grid-template-columns: repeat(3, 1fr); }
  /* メリット見出し: 中央揃え */
  .merit-card__header { flex-direction: column; align-items: center; }
  .merit-card h3 { text-align: center; }
  /* ランクキャラ: タブレット1カラム時は表示（高い詳細度でオーバーライド）*/
  .section--stats .rank__chara-img {
    display: block;
    height: 180px;
    right: auto;
    left: 58%;
    transform: translateY(-50%);
  }
  /* ランクカード: キャラの分だけ右パディングを確保 */
  .stats__card--rank { padding-right: 28px; }
  /* フロー: タブレットで2カラム + 最後は中央 */
  .flow { grid-template-columns: 1fr 1fr; gap: 20px; }
  .flow__arrow { display: none; }
  .flow-step:last-of-type { grid-column: 1 / -1; max-width: calc(50% - 10px); margin: 0 auto; width: 100%; }
  /* h2 改行: タブレットでは不要（sp-brを非表示）*/
  .section--merit .sp-br { display: none; }
  .section--space .sp-br { display: none; }
  /* タブレット専用改行を表示 */
  .tablet-br { display: inline; }
}

/* 中間サイズ（≤1100px）: キャラ画像を非表示・paddingをリセット */
@media (max-width: 1100px) {
  .rank__chara-img { display: none; }
  .stats__card--rank { padding-right: 28px; }
}

/* 中間タブレット（901〜1100px）: テキスト調整 */
@media (min-width: 901px) and (max-width: 1100px) {
  .rank__text { font-size: 18px; }
}

/* 小モバイル（≤600px）: 小SP専用改行を表示 */
@media (max-width: 600px) {
  .sp-br--small { display: inline; }
  /* 料金カード: スマホでは折り返し許可・フォント小さく */
  .price__off p { white-space: normal; font-size: 15px; }
  .price__pct { font-size: 22px; }
}

/* === Asset image sizing === */
.worry-card__img      { width: 150px; height: 150px; object-fit: contain; object-position: center; display: inline-block; vertical-align: middle; border-radius: 50%; }

.reason-card__icon-img{ width: 160px; height: 160px; object-fit: contain; object-position: center; margin: 0 auto 8px; display: block; }
.flow-step__badge-img { position: absolute; top: -52px; left: 50%; transform: translateX(-50%); width: 104px; height: 104px; object-fit: contain; mix-blend-mode: multiply; }
.flow-step__illust-img{ width: 155px; height: auto; display: block; }

/* ============================================
   MOBILE: メリット・CTA写真の確実な1カラム化
============================================= */
@media (max-width: 900px) {
  .merit {
    display: block !important;
  }
  .merit__photo {
    display: block !important;
    width: 100% !important;
    margin-bottom: 24px;
  }
  .merit__photo-img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4/3;
    border-radius: 12px;
  }
  .cta__inner {
    display: block !important;
  }
  .cta__photo {
    width: 100% !important;
  }
  .cta__photo-img {
    width: 100% !important;
    aspect-ratio: 4/3;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .cta__photo::after {
    display: none !important;
  }
}