/* 案A：ピンク×白の写真帯（主参考 prelovenus 3days_opt） */
.ttl {
  font-family: var(--serif); font-weight: 600; color: var(--wine);
  font-size: 23px; line-height: 1.6; letter-spacing: .06em;
  padding-bottom: 18px; margin-bottom: 28px; position: relative;
}
.ttl::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 3px;
  background: linear-gradient(90deg, var(--wine), var(--rose));
}
.ttl--center { text-align: center; }
.ttl--center::after { left: 50%; margin-left: -60px; }
.sub {
  font-family: var(--serif); font-weight: 600; color: var(--wine);
  font-size: 19px; line-height: 1.7; margin: 36px 0 20px;
}
.lead-s {
  font-family: var(--serif); font-weight: 600; color: var(--wine);
  font-size: 17px; line-height: 1.8; margin: 28px 0 16px;
}

/* 02 */
.lead { background: var(--blush); padding-top: 40px; text-align: center; }
.lead__copy {
  font-family: var(--serif); font-weight: 600; color: var(--wine);
  font-size: 19px; line-height: 1.8; letter-spacing: .05em;
}
.lead .cta { margin-top: 24px; }

/* 03 実績 */
.proof { padding: 10px 0; background: linear-gradient(180deg, #f6dbe5, #fdf3f6 50%, #f6dbe5); }
.proof__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 6px; }
.proof__grid li { background: #fff; padding: 3px; box-shadow: 0 2px 6px rgba(122, 29, 69, .12); }
.proof__grid img { width: 100%; aspect-ratio: 116 / 86; object-fit: cover; }
.proof__num { background: #fff; margin: 14px 0; padding: 26px 16px 24px; text-align: center; }
.proof__l1, .proof__l2 { font-family: var(--serif); font-weight: 600; color: var(--wine); font-size: 19px; line-height: 1.7; }
.proof__big {
  font-family: var(--serif); font-weight: 600; font-size: 68px; line-height: 1.15; letter-spacing: .02em;
  color: var(--rose);
  background: linear-gradient(180deg, #d84d84, #8f2150); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* 04 事例 */
.cases { background: var(--blush); }
.case {
  background: #fff; border-top: 4px solid var(--rose);
  padding: 22px 16px 24px; margin-bottom: 24px;
  box-shadow: 0 6px 18px rgba(122, 29, 69, .08);
}
.case__cup { text-align: center; font-family: var(--serif); color: var(--wine); line-height: 1; }
.case__cup b { font-size: 50px; font-weight: 700; }
.case__cup b.is-after { color: var(--rose); }
.case__cup span { font-size: 15px; font-weight: 700; margin-left: 2px; }
.case__cup i { font-style: normal; font-size: 18px; margin: 0 6px; }
.case__who {
  margin: 14px 0 12px; background: linear-gradient(90deg, var(--wine), var(--rose));
  color: #fff; text-align: center; font-size: 14px; font-weight: 700; padding: 6px;
}
.case__photo { border: 1px solid var(--line); padding: 4px; background: #fff; }
.case__photo img { width: 100%; }
.case .small { margin-top: 8px; }
.case__box { margin-top: 14px; background: var(--pink); padding: 14px 16px; font-size: 14px; }
.case__worry { font-weight: 700; color: var(--wine); margin-bottom: 10px; }
.case__after { margin-top: 14px; font-size: 14px; }
.voice-hl { margin-top: 36px; text-align: center; }
.ribbon {
  display: block; position: relative; background: var(--wine); color: #fff;
  font-family: var(--serif); font-size: 15px; letter-spacing: .1em; padding: 8px; margin: 0 6px;
}
.ribbon::before, .ribbon::after {
  content: ""; position: absolute; top: 0; border: 21px solid var(--wine); border-width: 21px 10px;
}
.ribbon::before { left: -14px; border-left-color: transparent; }
.ribbon::after { right: -14px; border-right-color: transparent; }
.voice-hl__big { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.6; color: var(--wine); margin: 20px 0 8px; }
.voice-hl__big span { color: var(--rose); }

/* 05 悩み */
.worry { background: #ececec; padding: 40px 0 0; }
.worry .ttl { padding: 0 var(--gut) 18px; }
.worry__bubbles { width: 345px; margin: 0 auto; }
.worry__woman { width: 312px; margin: 8px auto 0; }
.turn { background: #fff; padding-top: 40px; }
.turn__band {
  margin: 28px calc(var(--gut) * -1); padding: 30px var(--gut);
  background: linear-gradient(135deg, var(--wine), #a32a5e); color: #fff; text-align: center;
}
.turn__q { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.7; }
.turn__a { margin-top: 14px; font-family: var(--serif); font-size: 18px; line-height: 1.7; }
.turn__a em { font-weight: 700; font-size: 22px; }

/* 06 特典 */
.gift { background: var(--blush); }
.gift__bar {
  background: linear-gradient(90deg, var(--wine), var(--rose)); color: #fff; text-align: center;
  font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: .08em; padding: 12px;
}
.gift__visual { width: calc(100% + 36px); max-width: none; margin: 18px -18px 0; }
.chks { margin: 26px 0; display: grid; gap: 16px; }
.chk { display: grid; grid-template-columns: 116px 1fr; background: #fff; border: 1px solid var(--line); }
.chk__img img { width: 116px; height: 150px; object-fit: cover; }
.chk__txt { padding: 16px 14px 10px; }
.chk__no { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #fff; background: var(--rose); padding: 1px 8px; }
.chk h3 { margin-top: 8px; font-family: var(--serif); font-weight: 600; color: var(--wine); font-size: 17px; line-height: 1.5; }
.chk__cnt { margin-top: 6px; font-size: 12px; color: var(--wine); }
.chk__desc { grid-column: 1 / -1; background: var(--blush); padding: 12px 16px; font-size: 14px; line-height: 1.8; border-top: 1px solid var(--line); }

/* 07 原因 */
.cause { background: #fff; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--blush); padding: 18px 6px; margin: 28px 0; text-align: center; }
.three svg, .pt__icon svg, .medal__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--wine); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.three li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; line-height: 1.5; }
.three svg { width: 54px; height: 54px; padding: 13px; border: 1px solid #c6a26a; border-radius: 50%; background: #fff; }
.pt { border: 1px solid var(--line); padding: 22px 18px 20px; margin-top: 24px; }
.pt__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pt__icon svg { width: 40px; height: 40px; padding: 8px; border: 1px solid #c6a26a; border-radius: 50%; }
.pt__n { font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--rose); }
.pt__ttl { margin: 14px 0 16px; font-family: var(--serif); font-weight: 600; color: var(--wine); font-size: 17.5px; line-height: 1.6; }
.pt .body { font-size: 14px; }
.note { margin-top: 18px; background: var(--pink); border-left: 3px solid var(--wine); padding: 14px 14px; font-size: 14px; }
.note p + p { margin-top: 1.9em; }

/* 08 解決策 */
.sol { background: var(--blush); padding-top: 0; }
.sol__hero { position: relative; margin: 0 calc(var(--gut) * -1) 32px; }
.sol__hero img { width: 100%; height: 300px; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.sol__ttl {
  position: relative; margin: -86px var(--gut) 0; background: #fff; padding: 20px 18px;
  font-family: var(--serif); font-weight: 600; color: var(--wine); font-size: 22px; line-height: 1.6;
  border-left: 4px solid var(--rose);
}
.steps { margin: 28px 0; position: relative; display: grid; gap: 12px; }
.steps::before { content: ""; position: absolute; left: 31px; top: 20px; bottom: 20px; width: 2px; background: #e6b9ca; }
.steps li { position: relative; display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); padding: 12px 12px 12px 0; }
.step__no {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-left: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--wine), var(--rose)); color: #fff;
  font-size: 10px; letter-spacing: .08em; line-height: 1.1;
}
.step__no b { font-size: 20px; font-family: var(--serif); }
.steps p { font-family: var(--serif); font-weight: 600; color: var(--wine); font-size: 15px; line-height: 1.6; }

/* 09 提供者 */
.prof { background: #fff; }
.prof__id { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 30px; }
.prof__id img { width: 100%; height: auto; aspect-ratio: 160 / 220; object-fit: cover; }
.prof__role { font-size: 11px; line-height: 1.6; letter-spacing: 0; color: var(--wine); white-space: nowrap; }
.prof__name { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--wine); letter-spacing: .04em; margin-top: 6px; white-space: nowrap; padding-top: 8px; border-top: 1px solid var(--line); }
.story { border-left: 2px solid #ecc9d6; margin-left: 6px; }
.story li { position: relative; padding: 0 0 22px 22px; }
.story li::before { content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--wine); }
.story__h { font-weight: 700; margin-bottom: 14px; }
.story li p + p { margin-top: 1.9em; }
.story li > p:not(.story__h) { font-size: 14px; }
.story__note { margin: -6px 0 24px 30px; }
.medal { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; border: 1px solid #e6cf9e; padding: 18px 12px; font-size: 13.5px; line-height: 1.8; letter-spacing: .02em; }
.medal__icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #e4c46f, #b98a2c); }
.medal__icon svg { stroke: #fff; }
.medal b { font-family: var(--serif); color: var(--wine); font-size: 17px; }
.prof .medal + .body { margin-top: 28px; }

/* 10 FAQ */
.faq { background: var(--pink); }
.faq__item { background: #fff; margin-top: 20px; border: 1px solid var(--line); }
.faq__q { display: flex; gap: 6px; background: var(--wine); color: #fff; padding: 14px 16px; font-family: var(--serif); font-weight: 600; font-size: 16px; line-height: 1.6; }
.faq__mark { font-family: var(--sans); font-weight: 700; }
.faq__a { padding: 16px 18px 18px; font-size: 14px; background: #fffaf8; }
.faq__a p + p { margin-top: 1.9em; }
.faq__a .small { margin-top: 12px; }

/* 11 追伸 */
.ps { background: linear-gradient(180deg, #f6f3f3, #ece4e6); }
.ps__card { background: #fff; padding: 28px 22px; box-shadow: 0 10px 30px rgba(122, 29, 69, .16); }
.ps__key { margin: 26px -6px; background: var(--pink); padding: 16px 16px; font-family: var(--serif); font-weight: 600; color: var(--wine); font-size: 16px; line-height: 1.9; }
.ps__last { margin-top: 26px; font-family: var(--serif); color: var(--wine); font-size: 14.5px; letter-spacing: .02em; line-height: 2; font-weight: 600; }

/* ===== 本番（案A採用）の追加：2026-11-12 user指定 ===== */
html { scroll-behavior: smooth; }
body { background: linear-gradient(135deg, #f6e1e9 0%, #fcf6f3 45%, #f4dde6 100%) fixed; }

/* ボタン：左→右に光が流れる＋常時ゆっくり拡大縮小。カーソルを合わせると演出が止まり、下へ沈む */
.cta__btn { position: relative; transform-origin: 50% 60%; animation: btn-pulse 1.8s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.cta__btn::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%, transparent 100%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-mask: url(../img/bt.png) center / 100% 100% no-repeat; mask: url(../img/bt.png) center / 100% 100% no-repeat;
  animation: btn-shine 2.8s ease-in-out infinite;
}
@keyframes btn-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes btn-shine { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
.cta__btn:hover, .cta__btn:focus-visible, .cta__btn:active { animation: none; transform: translateY(4px); filter: brightness(.97); }
.cta__btn:hover::after, .cta__btn:focus-visible::after, .cta__btn:active::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta__btn, .cta__btn::after { animation: none; }
}

/* 下部追従ボタン（スマホ・タブレット）：本文中のボタンとFVが画面に無い時だけ出す */
.sticky {
  position: fixed; left: 50%; bottom: 0; z-index: 50; width: 100%; max-width: var(--col);
  padding: 8px 40px calc(8px + env(safe-area-inset-bottom));
  background: rgba(242, 196, 212, .5); box-shadow: 0 -4px 12px rgba(122, 29, 69, .08);
  transform: translate(-50%, 110%); visibility: hidden;
}
.sticky.is-show { transform: translate(-50%, 0); visibility: visible; }
.sticky .cta__btn { max-width: 260px; }
.sticky .cta__btn, .sticky .cta__btn::after { animation: none; }

/* PC：左＝FV＋ボタン、中央＝LP、右＝目次 */
.side { display: none; }
@media (min-width: 900px) {
  .layout { display: grid; grid-template-columns: 1fr var(--col) 1fr; align-items: start; }
  .page { grid-column: 2; grid-row: 1; box-shadow: 0 0 40px rgba(122, 29, 69, .12); }
  .side { display: block; grid-row: 1; height: 100%; }
  .side--l { grid-column: 1; }
  .side--r { grid-column: 3; }
  .side__in { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px 32px; }
  .side__fv img { width: auto; max-width: 100%; max-height: calc(100vh - 200px); box-shadow: 0 10px 30px rgba(122, 29, 69, .16); }
  .side .cta { margin: 20px 0 0; padding: 0; width: 100%; max-width: 326px; }
  .sticky { display: none; }
  .foot { padding-bottom: 28px; }
  .toc { align-items: stretch; }
  .toc > * { width: 100%; max-width: 280px; margin-left: auto; margin-right: auto; }
  .toc__ttl { font-family: var(--serif); font-weight: 600; color: var(--wine); font-size: 18px; letter-spacing: .2em; padding: 0 0 10px; border-bottom: 2px solid var(--wine); background: none; }
  .toc ol { background: #fff; counter-reset: toc; padding: 6px 0; box-shadow: 0 10px 30px rgba(122, 29, 69, .1); }
  .toc li a {
    display: grid; grid-template-columns: 28px 1fr; align-items: baseline; gap: 6px;
    padding: 11px 18px 11px 14px; border-left: 3px solid transparent;
    color: var(--ink); text-decoration: none; font-size: 13.5px; line-height: 1.6;
  }
  .toc li + li a { border-top: 1px solid #f1e3e8; }
  .toc li a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); font-family: var(--serif); font-weight: 600; color: var(--rose); font-size: 13px; }
  .toc li a:hover { color: var(--wine); background: var(--pink); }
  .toc li a.is-current { color: var(--wine); font-weight: 700; border-left-color: var(--wine); background: var(--pink); }
}

/* 狭い画面（〜373px）：強制改行の位置で1〜2文字だけの行が出ないよう、見出し類を画面幅に合わせて縮める
   （修正提案書 2026-11-11「390px幅と狭い画面で文字の欠け・重なり・極端な縮小がない」） */
h2, h3, .page p { text-wrap: pretty; }
@media (max-width: 373px) {
  .ttl { font-size: 6.4vw; }
  .proof__l1, .proof__l2 { font-size: 5.4vw; }
  .voice-hl__big { font-size: 7.4vw; }
  .turn__q { font-size: 5.9vw; }
  .sub { font-size: 5.4vw; }
  .lead-s { font-size: 4.9vw; }
  .chk { grid-template-columns: 96px 1fr; }
  .chk__img img { width: 96px; }
  .chk h3 { font-size: 4.6vw; }
  .pt__ttl { font-size: 4.7vw; }
  .steps p { font-size: 4.4vw; }
  .sol__ttl { font-size: 6.2vw; }
  .prof__id { grid-template-columns: 44% 1fr; }
  .prof__role { white-space: normal; }
  .prof__name { font-size: 16px; }
  .medal b { font-size: 4.8vw; }
  .faq__q { font-size: 4.8vw; }
  .ps__key { font-size: 4.7vw; }
  .ps__last { font-size: 4.2vw; }
}

/* ===== 2026-11-12 追加指示：読ませる演出・自動下線・FAQ開閉・写真と背景 ===== */
::selection { background: #e2a6dc; color: #4a1036; }

/* 細い帯のフッター */
.foot { background: var(--wine); color: #fff; padding: 8px var(--gut); font-size: 11px; letter-spacing: .08em; }
.foot small { color: #fff; }

/* 重要な部分：画面に入ると左から下線が引かれる */
.page strong, .mk, .turn__a em {
  background: linear-gradient(transparent 62%, #f4b3cc 62%, #f4b3cc 92%, transparent 92%) no-repeat 0 0 / 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1.1s cubic-bezier(.4, 0, .2, 1) .15s;
}
.turn__a em { background-image: linear-gradient(transparent 70%, rgba(244, 179, 204, .55) 70%); }
.page strong.is-drawn, .mk.is-drawn, .turn__a em.is-drawn { background-size: 100% 100%; }

/* 重要な部分だけ、画面に入るとふわっと表示 */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease; }
.js .rv.is-in { opacity: 1; transform: none; }

/* 写真を帯の中に溶かし込む */
.fade-photo { margin: 28px calc(var(--gut) * -1); }
.fade-photo img { width: 100%; height: 220px; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.fade-photo--side img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%); mask-image: linear-gradient(90deg, transparent, #000 28%); }

/* セクションの背景 */
.proof { background: #f7e3ea url(../img/bg/sparkle_soft.webp) center / cover; }
.cases { background: linear-gradient(180deg, #fffafb 0%, #fbeef2 100%); }
.faq { background: #f6eef0 url(../img/bg/sparkle_white.webp) center / cover; }
.ps { background: #fbe4ea url(../img/bg/sparkle_pink.webp) center / cover; padding-top: 50px; }
.cause { background: linear-gradient(180deg, #fff 0%, #fff 60%, var(--blush) 100%); }

/* 追伸：本人写真は丸で切らず、周りを溶かして置く */
.ps__photo { width: 220px; margin: -10px auto 18px; }
.ps__photo img { width: 100%; aspect-ratio: 1; object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }

/* FAQ：開閉式 */
.faq__q { cursor: pointer; list-style: none; position: relative; padding-right: 44px; }
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { position: absolute; right: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: #fff; transition: transform .3s ease; }
.faq__icon::after { transform: rotate(90deg); }
details[open] .faq__icon::after { transform: rotate(0); }
details[open] .faq__a { animation: faq-open .4s ease; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .page strong, .mk, .turn__a em { transition: none; background-size: 100% 100%; }
}

/* お悩み：ほんのり温かみのあるグレー（画像のグレー地は乗算で消す） */
.worry { background: #eeebec url(../img/bg/tex_wave.webp) center / cover; }

/* 見出し：英字の小見出し＋飾り罫で、単調にならないように */
.ttl { font-size: 24px; }
.ttl__en {
  display: block; margin-bottom: 10px; font-family: var(--serif); font-weight: 500;
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--rose);
}
.ttl--center .ttl__en::before, .ttl--center .ttl__en::after { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--rose); vertical-align: middle; margin: 0 10px; }
.ttl:not(.ttl--center) .ttl__en::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--rose); vertical-align: middle; margin-right: 10px; }
.ttl::after {
  width: 72px; height: 8px; bottom: 0;
  background:
    radial-gradient(circle, var(--wine) 2.6px, transparent 3.2px) center / 8px 8px no-repeat,
    linear-gradient(var(--rose), var(--rose)) left center / 28px 1px no-repeat,
    linear-gradient(var(--rose), var(--rose)) right center / 28px 1px no-repeat;
}
.ttl--center::after { margin-left: -36px; }
.sub {
  position: relative; padding: 14px 16px 14px 20px; font-size: 18px;
  background: linear-gradient(90deg, var(--pink) 0%, #fff 100%); border-left: 4px solid var(--rose);
}
.lead-s { position: relative; padding-top: 14px; text-align: center; }
.lead-s::before { content: ""; position: absolute; top: 0; left: 50%; width: 36px; height: 3px; margin-left: -18px; background: linear-gradient(90deg, var(--wine), var(--rose)); }

/* 実績：感想ボードを横に流し続けるカルーセル（2列目は逆向き）。触れている間は止まる */
.mq { overflow: hidden; padding: 6px 0; }
.mq__track { display: flex; gap: 8px; width: max-content; animation: mq-flow 46s linear infinite; }
.mq--rev .mq__track { animation-direction: reverse; }
.mq__track li { flex: 0 0 150px; background: #fff; padding: 3px; box-shadow: 0 2px 6px rgba(122, 29, 69, .12); }
.mq__track img { width: 100%; aspect-ratio: 116 / 86; object-fit: cover; }
.mq:hover .mq__track, .mq:active .mq__track { animation-play-state: paused; }
@keyframes mq-flow { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 4px)); } }
@media (prefers-reduced-motion: reduce) {
  .mq { overflow-x: auto; }
  .mq__track { animation: none; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .side__in { padding: 20px 16px; }
}

/* 原因：バストの形を作る3つの条件（写真＋番号を左右交互、「＋」で重なりを示す） */
.facs { margin: 30px 0; }
.fac { display: grid; grid-template-columns: 58% 1fr; align-items: center; }
.fac--r { grid-template-columns: 1fr 58%; }
.fac--r .fac__img { order: 2; }
.fac__img img, .fac__img--none { width: 100%; aspect-ratio: 13 / 10; object-fit: cover; background: var(--pink); }
.fac:not(.fac--r) .fac__img img { -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.fac--r .fac__img img { -webkit-mask-image: linear-gradient(270deg, #000 70%, transparent); mask-image: linear-gradient(270deg, #000 70%, transparent); }
.fac__txt { position: relative; z-index: 1; margin-left: -14px; font-family: var(--serif); font-weight: 600; color: var(--wine); font-size: 19px; line-height: 1.5; }
.fac--r .fac__txt { margin: 0 -14px 0 0; text-align: right; }
.fac__n { display: block; font-size: 34px; line-height: 1; letter-spacing: .02em; color: var(--rose); margin-bottom: 6px;
  background: linear-gradient(180deg, #e0679a, #8f2150); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fac__plus { text-align: center; color: var(--rose); font-size: 22px; line-height: 1; margin: 6px 0; }
@media (max-width: 373px) { .fac__txt { font-size: 5vw; } }

/* POINT：箱ごとの切り替えが分かるよう、番号の帯＋写真＋白い台紙にする */
.pt { border: 0; padding: 0 0 20px; margin-top: 36px; background: #fff; box-shadow: 0 8px 24px rgba(122, 29, 69, .12); }
.pt > .body, .pt > .note, .pt > .pt__ttl { margin-left: 18px; margin-right: 18px; }
.pt__head { display: flex; align-items: center; justify-content: center; padding: 12px; border: 0; background: linear-gradient(90deg, var(--wine), var(--rose)); }
.pt__n { color: #fff; font-family: var(--serif); font-size: 13px; letter-spacing: .24em; display: flex; align-items: baseline; gap: 8px; }
.pt__n b { font-size: 30px; line-height: 1; letter-spacing: .04em; }
.pt__img img { width: 100%; height: 180px; object-fit: cover; }
.pt__ttl { margin-top: 18px; text-align: center; padding-bottom: 14px; border-bottom: 1px dashed #e6b9ca; }

/* PC左のボタン：演出なし、カーソルを合わせると沈むだけ */
.side .cta__btn, .side .cta__btn::after { animation: none; }

/* 実績の数字（権威性）：ワインの地に金の細枠、きらめく粒。数字は動かない金色 */
.proof__num {
  position: relative; overflow: hidden; isolation: isolate; margin: 14px 10px; padding: 30px 16px 28px;
  background: radial-gradient(120% 90% at 50% 0%, #b8396e 0%, #8a1f4f 55%, #5e1235 100%);
  box-shadow: 0 10px 28px rgba(94, 18, 53, .35);
}
.proof__num::before {
  content: ""; position: absolute; top:8px;right:8px;bottom:8px;left:8px;inset:8px; top: 8px; right: 8px; bottom: 8px; left: 8px; z-index: -1;
  border: 1px solid rgba(226, 196, 132, .75); outline: 1px solid rgba(226, 196, 132, .35); outline-offset: 3px;
}
.proof__num::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle, #f6dfa6 0 1.4px, transparent 2px) 12% 22% / 60px 60px,
    radial-gradient(circle, #f3c9d9 0 1.2px, transparent 1.8px) 70% 15% / 46px 46px,
    radial-gradient(circle, #f6dfa6 0 1px, transparent 1.6px) 40% 70% / 38px 38px,
    radial-gradient(circle, #ffd9e8 0 1.6px, transparent 2.2px) 85% 80% / 72px 72px;
  animation: twinkle 3.2s ease-in-out infinite alternate;
}
@keyframes twinkle { 0% { opacity: .35; } 50% { opacity: 1; } 100% { opacity: .5; background-position: 14% 26%, 68% 12%, 43% 73%, 82% 84%; } }
.proof__num .proof__l1, .proof__num .proof__l2 { color: #fff; }
.proof__num .proof__big {
  font-size: 74px;
  background: linear-gradient(180deg, #f1d58c 0%, #d9b056 45%, #b98a2c 70%, #d8b264 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}
@keyframes gold-flow { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .proof__num::after, .proof__num .proof__big { animation: none; } }

/* FV直下のCTA見出し：タイトルとして目立たせる */
.lead__copy { letter-spacing: .04em; }
.lead__pre { display: inline-block; position: relative; padding: 0 18px; font-size: 15px; color: var(--ink); }
.lead__pre::before, .lead__pre::after { content: ""; position: absolute; top: 50%; width: 12px; height: 1px; background: var(--rose); }
.lead__pre::before { left: 0; transform: rotate(55deg); }
.lead__pre::after { right: 0; transform: rotate(-55deg); }
.lead__main { display: block; margin-top: 6px; font-size: 28px; line-height: 1.45; color: var(--wine); }
.lead__main b { font-size: 46px; line-height: 1; margin: 0 2px; color: var(--rose);
  background: linear-gradient(180deg, #e0679a, #8f2150); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 373px) { .lead__pre { font-size: 4vw; } .lead__main { font-size: 7.4vw; } .lead__main b { font-size: 12vw; } }

/* FV直下のCTA見出し：タイトルとして目立たせる */
.lead__copy { letter-spacing: .04em; }
.lead__pre { display: inline-block; position: relative; padding: 0 20px; font-size: 15px; color: var(--ink); }
.lead__pre::before, .lead__pre::after { content: ""; position: absolute; top: 50%; width: 14px; height: 1px; background: var(--rose); }
.lead__pre::before { left: 0; transform: rotate(55deg); }
.lead__pre::after { right: 0; transform: rotate(-55deg); }
.lead__main { display: block; margin-top: 6px; font-size: 28px; line-height: 1.45; color: var(--wine); }
.lead__main b { font-size: 46px; line-height: 1; margin: 0 2px; color: var(--rose);
  background: linear-gradient(180deg, #e0679a, #8f2150); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 373px) { .lead__pre { font-size: 4vw; } .lead__main { font-size: 7.4vw; } .lead__main b { font-size: 12vw; } }

.lead { background: #fbf3ee url(../img/bg/sparkle_cream.webp) center / cover; }

/* 実績の箱（提供者紹介）：金のメダルに数字、メソッド名を帯で見せる */
.medal { display: block; position: relative; overflow: hidden; isolation: isolate; text-align: center; border: 0; padding: 30px 18px 26px;
  background: #fff8f0 url(../img/bg/sparkle_cream.webp) center / cover; box-shadow: 0 10px 28px rgba(122, 29, 69, .14); }
.medal::before { content: ""; position: absolute; top: 8px; right: 8px; bottom: 8px; left: 8px; z-index: -1; border: 1px solid #d9b56a; outline: 1px solid rgba(217, 181, 106, .45); outline-offset: 3px; }
.medal__badge { position: relative; width: 168px; margin: 0 auto 14px; }
.medal__badge img { width: 100%; filter: drop-shadow(0 6px 12px rgba(122, 29, 69, .25)); }
.medal__badge p { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; color: var(--wine); line-height: 1.25; }
.medal__badge span { font-size: 13px; }
.medal__badge b { font-size: 40px; line-height: 1.05; color: var(--wine);
  background: linear-gradient(180deg, #c99a3e 0%, #9c7020 55%, #b98a2c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.medal__txt { font-size: 14px; line-height: 1.9; color: var(--ink); }
.medal__txt b { font-family: var(--serif); color: var(--wine); font-size: 18px; }
.medal__name { margin: 16px -18px 0; padding: 14px 10px; background: linear-gradient(90deg, var(--wine), var(--rose)); color: #fff; font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: .06em; line-height: 1.4; }
.medal__name span { display: block; font-size: 14px; letter-spacing: .2em; color: #f6dfa6; }
.medal__name small { font-size: 15px; }
@media (max-width: 373px) { .medal__name { font-size: 6vw; } .medal__txt b { font-size: 4.8vw; } }

/* CHECKの写真：縦長の生成写真に合わせる */
.chk__img img { aspect-ratio: 3 / 4; object-fit: cover; }
/* 写真がまだ無い時は、番号と言葉だけを白い札で見せる */
.fac--noimg, .fac--noimg.fac--r { display: block; background: #fff; border: 1px solid var(--line); padding: 16px; text-align: center; }
.fac--noimg .fac__txt, .fac--noimg.fac--r .fac__txt { margin: 0; text-align: center; }

/* お悩み：イラストと吹き出しはグレー地を抜いた透過画像にして、背景の上に重ねる */
.worry__bubbles, .worry__woman { position: relative; z-index: 2; }

/* 特典の診断画像：下からふわっと上がって表示し、常にきらめかせる */
.gift__vis { position: relative; overflow: hidden; margin: 18px -18px 0; }
.gift__vis .gift__visual { width: 100%; margin: 0; }
.js .gift__vis.rv { transform: translateY(40px); transition-duration: 1.1s; }
.js .gift__vis.rv.is-in { transform: none; }
.gift__glint { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.gift__glint::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 240, 246, .55), transparent);
  animation: glint-sweep 3.6s ease-in-out infinite;
}
.gift__glint::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(circle, #fff 0 1.6px, rgba(255, 220, 160, .7) 2.4px, transparent 4px) 18% 14% / 120px 140px,
    radial-gradient(circle, #fff 0 1.4px, rgba(255, 190, 215, .7) 2.2px, transparent 3.6px) 76% 36% / 150px 120px,
    radial-gradient(circle, #fff 0 1.2px, rgba(255, 220, 160, .6) 2px, transparent 3.2px) 40% 82% / 110px 130px;
  animation: twinkle 2.4s ease-in-out infinite alternate;
}
@keyframes glint-sweep { 0% { left: -60%; } 60%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .gift__glint::before, .gift__glint::after { animation: none; } }

/* 明朝体は Noto Serif JP の 600 まで（太すぎない）。読ませる文は Noto Sans JP */
.ttl, .sub, .lead-s, .lead__copy, .proof__l1, .proof__l2, .proof__big, .voice-hl__big, .turn__q, .turn__a, .gift__bar,
.chk h3, .pt__ttl, .pt__n, .sol__ttl, .prof__name, .story__h, .faq__q, .fac__txt, .medal__badge p, .medal__name, .toc__ttl { font-weight: 600; }
.ttl b, .lead__copy b, .turn__a em, .medal__badge b, .medal__txt b, .pt__n b, .fac__n, .case__cup b { font-weight: 600; }
.steps p, .ps__key, .ps__last, .medal__txt { font-family: var(--sans); }
.steps p, .ps__key, .ps__last { font-weight: 700; }
.medal__txt b { font-family: var(--sans); font-weight: 700; }
.medal__name { font-family: var(--serif); }

/* メダル：大きく、中央に */
.medal__badge { width: 230px; margin: 0 auto 18px; }
.medal__badge span { font-size: 15px; }
.medal__badge b { font-size: 54px; }

/* 追伸：背景は白寄りの薄ピンク、写真は縦長で下までなじませる */
.ps { background: linear-gradient(180deg, #fdf4f6 0%, #fbe9ee 100%); }
.ps__photo { width: 210px; margin: 0 auto 22px; position: relative; }
.ps__photo::before { content: ""; position: absolute; top: 10px; right: -10px; bottom: 30px; left: 10px; border: 1px solid #e6b9ca; }
.ps__photo img { position: relative; width: 100%; aspect-ratio: 480 / 600; object-fit: cover; object-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }

/* FV直下の見出し：1行にまとめ、上の余白・行間・ボタンとの距離を詰める */
.lead { padding-top: 22px; }
.lead__main { margin-top: 2px; font-size: 25px; line-height: 1.3; white-space: nowrap; }
.lead__main b { font-size: 42px; }
.lead .cta { margin-top: 10px; }
@media (max-width: 373px) { .lead__main { font-size: 6.6vw; } .lead__main b { font-size: 11vw; } }

/* 診断画像のきらめき：粒はやめ、左上から右下へ斜めにキランと光る（短い間隔でくり返す） */
.gift__glint::after { display: none; }
.gift__glint::before {
  top: -50%; bottom: auto; left: -50%; width: 45%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 250, .75), transparent);
  transform: rotate(-35deg) translate(0, 0);
  animation: glint-diag 1.4s ease-out infinite;
}
@keyframes glint-diag {
  0% { transform: rotate(-35deg) translate(-40%, -30%); opacity: 0; }
  10% { opacity: 1; }
  55% { transform: rotate(-35deg) translate(330%, 30%); opacity: 1; }
  56%, 100% { transform: rotate(-35deg) translate(330%, 30%); opacity: 0; }
}
/* 追伸の写真：マスクなし（四角のまま） */
.ps__photo img { -webkit-mask-image: none; mask-image: none; }
.ps__photo::before { bottom: -10px; }

/* 実績の5,000：ホワイトゴールド（白っぽい、銀に近い金） */
.proof__num .proof__big {
  background: linear-gradient(180deg, #fbf8f1 0%, #ece4d2 40%, #cfc5b0 68%, #e8e0cd 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* 診断画像：光はなし（下からのフェードインだけ） */
.gift__glint { display: none; }

/* 実績の5,000：黄みのある金に戻す（ホワイトゴールドは不採用） */
.proof__num .proof__big {
  background: linear-gradient(180deg, #fbe7a0 0%, #f0c94e 42%, #d4a12a 70%, #eccb6a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* CHECK：番号と項目数の帯 → 写真と見出し・説明を横並び。説明を見出しの下にまとめて読みやすく */
.chks { gap: 22px; }
.chk { display: block; background: #fff; border: 0; box-shadow: 0 6px 18px rgba(122, 29, 69, .1); }
.chk__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: linear-gradient(90deg, var(--wine), var(--rose)); color: #fff; }
.chk__no { display: flex; align-items: baseline; gap: 6px; padding: 0; background: none; font-family: var(--serif); font-size: 12px; font-weight: 600; letter-spacing: .2em; color: #fff; }
.chk__no b { font-size: 24px; line-height: 1; letter-spacing: 0; }
.chk__cnt { margin: 0; padding: 2px 10px; background: #fff; color: var(--wine); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.chk__body { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 14px; align-items: start; }
.chk__img img { width: 112px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.chk__txt { padding: 0; }
.chk h3 { margin: 2px 0 0; font-size: 17px; line-height: 1.45; padding-bottom: 8px; border-bottom: 1px solid #f0d6e0; }
.chk__desc { grid-column: auto; margin-top: 8px; padding: 0; background: none; border: 0; font-size: 14px; line-height: 1.75; color: var(--ink); }
@media (max-width: 373px) { .chk__body { grid-template-columns: 92px 1fr; gap: 10px; } .chk__img img { width: 92px; } }
.chk__desc { font-size: 13.5px; letter-spacing: 0; }

/* ボタンの光：細く鋭い光を素早く走らせ、短い間隔でキラン、キランとくり返す */
.cta__btn::after {
  background: linear-gradient(110deg, transparent 0%, transparent 44%, rgba(255, 255, 255, .25) 46%, rgba(255, 255, 255, .95) 49.5%, rgba(255, 255, 255, .25) 53%, transparent 55%, transparent 100%) no-repeat;
  background-size: 300% 100%;
  animation: btn-shine-quick 1.3s linear infinite;
}
@keyframes btn-shine-quick { 0% { background-position: 100% 0; } 38%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .cta__btn::after { animation: none; } }

/* 感想ボードのカルーセル：速く流し、PCの全幅でも上下とも途切れず常に表示（1列＝6枚×(150+8)px ずつ流す） */
.mq__track { animation: mq-loop 20s linear infinite; }
.mq--rev .mq__track { animation-direction: reverse; }
@keyframes mq-loop { from { transform: translateX(0); } to { transform: translateX(-948px); } }
@media (prefers-reduced-motion: reduce) { .mq__track { animation: none; } }

/* スマホ：画面幅いっぱいに表示（374pxより広い端末で左右にピンクの余白を出さない）。タブレットは600pxまで */
:root { --col: 100%; }
@media (min-width: 600px) and (max-width: 899px) { :root { --col: 600px; } }
/* PC：クオルレボ（ARTEMIS LP01）と同じ見え方。中央のLPは480px、左はブランド・キャッチ・ボタン、右は目次 */
@media (min-width: 900px) { :root { --col: 430px; } }
@media (min-width: 1024px) {
  :root { --col: 480px; }
  .page { box-shadow: 0 0 60px rgba(122, 29, 69, .16); }
  .side__in { padding: 24px 40px; }
}
.brand { text-align: center; }
.brand__en { font-family: var(--serif); font-size: 11px; letter-spacing: .4em; color: var(--rose); }
.brand__name { margin-top: 10px; font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.3; letter-spacing: .08em; color: var(--wine); }
.brand__sub { margin-top: 8px; font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: #b48a3c; }
.brand__sub::before, .brand__sub::after { content: ""; display: inline-block; width: 18px; height: 1px; margin: 0 10px; vertical-align: middle; background: #c9a35a; }
.brand__copy { margin-top: 22px; font-family: var(--serif); font-weight: 600; font-size: 17px; line-height: 1.8; color: var(--ink); }
.brand__copy em { color: var(--wine); font-size: 20px; }
.brand__medal { position: relative; width: 132px; margin: 22px auto 0; }
.brand__medal img { width: 100%; filter: drop-shadow(0 6px 12px rgba(122, 29, 69, .2)); }
.brand__medal p { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; color: var(--wine); line-height: 1.2; font-size: 11px; }
.brand__medal b { font-size: 30px; line-height: 1.05; background: linear-gradient(180deg, #c99a3e 0%, #9c7020 55%, #b98a2c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.side .brand .cta { margin-top: 22px; }
/* ボタンは画面幅に合わせて広げる（最大400px。3倍解像度の画像なので広げても粗くならない） */
.page .cta__btn { max-width: 400px; }
.sticky .cta__btn { max-width: 300px; }

/* お悩みの吹き出し：1つずつ縦に並べて大きく見せる（左右に少しずつずらす） */
.bubbles { display: grid; gap: 6px; margin: 0 -8px 10px; position: relative; z-index: 2; }
.bubbles li { width: 92%; }
.bubbles li:nth-child(even) { justify-self: end; }
.bubbles img { width: 100%; }

/* 下部追従ボタンは最初から常に表示。最後の文やフッターが隠れないよう、その高さ分だけ下に余白を足す */
@media (max-width: 899px) { .page { padding-bottom: 132px; } }

/* PC左：FVとボタンは目次と同じくらいの幅（280px）に */
@media (min-width: 900px) {
  .side__fv img { width: 280px; max-height: none; }
  .side .cta { max-width: 280px; }
}

/* 事例（文字・数字版）：BEFORE→AFTER のカップ数と期間を大きく見せる */
.case--text .case__who { margin-top: 0; }
.cup { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; margin: 14px 0 10px; }
.cup__col { text-align: center; padding: 14px 6px 12px; background: #f6f0f2; }
.cup__col.is-after { background: linear-gradient(160deg, var(--wine), var(--rose)); color: #fff; }
.cup__lbl { display: block; font-family: var(--serif); font-size: 11px; letter-spacing: .3em; color: var(--ink-sub); }
.cup__col.is-after .cup__lbl { color: #f6dfa6; }
.cup__col b { display: block; font-family: var(--serif); font-weight: 600; font-size: 64px; line-height: 1.05; color: var(--ink-sub); }
.cup__col.is-after b { color: #fff; }
.cup__unit { display: block; font-size: 13px; font-weight: 700; }
.cup__when { display: inline-block; margin-top: 8px; padding: 2px 8px; font-size: 11px; background: #fff; color: var(--wine); }
.cup__arrow { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.cup__arrow::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--rose); }
.cup__arrow::after { content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-top: 2px solid var(--rose); border-right: 2px solid var(--rose); transform: rotate(45deg); }
.cup__arrow span { position: relative; z-index: 1; background: #fff; border: 1px solid var(--rose); color: var(--rose); font-size: 11px; font-weight: 700; line-height: 1.3; text-align: center; padding: 4px 4px; }
.cup__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 4px 0 6px; }
.cup__steps li { text-align: center; font-family: var(--serif); font-weight: 600; font-size: 14px; padding: 6px 0; color: #fff; background: #e9b7c9; }
.cup__steps li:nth-child(2) { background: #dc8fae; }
.cup__steps li:nth-child(3) { background: #c95f8c; }
.cup__steps li.is-now { background: var(--wine); }
@media (max-width: 373px) { .cup { grid-template-columns: 1fr 56px 1fr; } .cup__col b { font-size: 17vw; } }
/* お悩みの吹き出し：元のサイズ（345px・中央） */
.worry__bubbles { width: 345px; max-width: 100%; margin: 0 auto 10px; }

/* FAQ：閉じている時の質問の箱を2行分の高さでそろえる */
.faq__q { min-height: calc(16px * 1.6 * 2 + 28px); align-items: center; }
@media (max-width: 373px) { .faq__q { font-size: 4.2vw; min-height: calc(4.2vw * 1.6 * 2 + 28px); } }

/* PC左：FVとボタンを同じ幅（280px）で中央にそろえる */
@media (min-width: 900px) {
  .side__fv { width: 280px; margin: 0 auto; }
  .side__fv img { display: block; width: 100%; margin: 0 auto; }
  .side .cta { width: 280px; max-width: 280px; margin-left: auto; margin-right: auto; }
  .side .cta__btn { max-width: 280px; }
}
@media (min-width: 900px) { .toc ol { width: 100%; } .side__in.toc { padding-left: 24px; padding-right: 24px; } }

/* お悩みの吹き出し：文字は本物のテキスト（どの画面でもくっきり）、イラストだけ画像。原稿と同じ2列×3段 */
.wb { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 8px; margin: 4px -6px 14px; position: relative; z-index: 2; }
.wb__i { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 112px; padding: 14px 10px 14px 12px;
  background: #fff; border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%; box-shadow: 0 3px 10px rgba(80, 60, 70, .12); }
.wb__i::after { content: ""; position: absolute; bottom: -7px; left: 22px; width: 14px; height: 14px; background: #fff; transform: rotate(35deg) skewX(-15deg); box-shadow: 3px 3px 5px rgba(80, 60, 70, .06); }
.wb__i:nth-child(even)::after { left: auto; right: 22px; }
.wb__i p { position: relative; z-index: 1; font-size: 11.5px; font-weight: 700; line-height: 1.55; color: #3a3036; letter-spacing: 0; padding-right: 34px; }
.wb__hl { color: #e8344f; font-size: 13px; background: linear-gradient(transparent 62%, #ffe14a 62%); }
.wb__i img { position: absolute; right: -2px; bottom: 4px; width: 50px; height: auto; }
.wb__i:nth-child(6) img, .wb__i:nth-child(5) img { width: 46px; }
@media (min-width: 400px) { .wb__i p { font-size: 12.5px; } .wb__hl { font-size: 14px; } .wb__i img { width: 58px; } }
/* 吹き出し：はみ出し・不自然な改行を防ぐため、角丸の箱に文字を全幅で入れ、イラストは右下に小さく */
.wb { gap: 16px 8px; margin: 4px -4px 14px; }
.wb__i { display: block; min-height: 0; padding: 12px 10px 40px 12px; border-radius: 22px; }
.wb__i p { padding-right: 0; font-size: 11px; line-height: 1.6; }
.wb__hl { font-size: 12.5px; }
.wb__i img, .wb__i:nth-child(5) img, .wb__i:nth-child(6) img { width: auto; height: 40px; right: 8px; bottom: 4px; }
.wb__i::after { bottom: -6px; }
@media (min-width: 400px) { .wb__i p { font-size: 12px; } .wb__hl { font-size: 13.5px; } .wb__i img, .wb__i:nth-child(5) img, .wb__i:nth-child(6) img { height: 46px; } .wb__i { padding-bottom: 46px; } }

/* 特典の診断画像：インパクトを抑えて少し小さく（幅80%・最大300px、中央） */
.gift__vis { width: 80%; max-width: 300px; margin: 22px auto 0; box-shadow: 0 8px 22px rgba(122, 29, 69, .14); }

/* お悩み：写真なしの文字だけ。グレーのもやもや雲の吹き出しを斜め・不規則に置き、下の女性から湧き出ているように見せる */
.wb { gap: 6px 4px; margin: 6px -10px 0; }
.wb__i { display: flex; align-items: center; justify-content: center; min-height: 118px; padding: 26px 20px 28px; border-radius: 0; box-shadow: none; text-align: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 124' preserveAspectRatio='none'%3E%3Cpath d='M30 97C9 98 3 77 17 66 4 51 19 30 38 37 42 15 70 9 83 24 93 7 123 8 131 24 146 10 173 18 171 39 192 41 198 63 183 73 197 87 183 107 162 102 155 118 127 119 117 106 105 120 77 120 69 106 57 117 33 113 30 97Z' fill='%23f0edef' stroke='%23c9bfc5' stroke-width='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 5px rgba(80, 60, 70, .12)); }
.wb__i::after { display: none; }
.wb__i p { font-size: 11.5px; line-height: 1.6; padding: 0; color: #4a4046; }
.wb__hl { color: #d9304d; font-size: 13px; background: linear-gradient(transparent 64%, #ffe878 64%); }
/* 不規則に傾け、上下にずらす */
.wb__i:nth-child(1) { transform: rotate(-4deg) translate(4px, 0); }
.wb__i:nth-child(2) { transform: rotate(3deg) translate(-2px, 14px); }
.wb__i:nth-child(3) { transform: rotate(2deg) translate(10px, -4px); }
.wb__i:nth-child(4) { transform: rotate(-3deg) translate(-6px, 10px); }
.wb__i:nth-child(5) { transform: rotate(-2deg) translate(2px, -2px); }
.wb__i:nth-child(6) { transform: rotate(4deg) translate(-4px, 8px); }
/* 女性の頭から雲へつながる小さな丸 */
.wb__dots { position: relative; z-index: 2; height: 46px; margin: 8px 0 -18px; }
.wb__dots i { position: absolute; border-radius: 50%; background: #f0edef; border: 1.5px solid #c9bfc5; }
.wb__dots i:nth-child(1) { width: 22px; height: 18px; left: 46%; top: 0; }
.wb__dots i:nth-child(2) { width: 14px; height: 12px; left: 53%; top: 20px; }
.wb__dots i:nth-child(3) { width: 9px; height: 8px; left: 57%; top: 35px; }
@media (min-width: 400px) { .wb__i p { font-size: 12.5px; } .wb__hl { font-size: 14px; } .wb__i { min-height: 128px; } }
.gift__vis { width: 90%; max-width: 350px; }

/* お悩みの雲：文字は回転させず最前面のテキストでくっきり。雲だけを傾ける。凹凸を浅くした大人向けの形、白寄りの薄グレー */
.wb__i { background: none; filter: none; }
.wb__i::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 212 132' preserveAspectRatio='none'%3E%3Cpath d='M194.0 60.0Q200.5 71.5 186.8 80.7Q185.2 92.7 166.5 98.2Q156.9 108.9 136.0 109.9Q120.0 117.7 100.0 114.0Q80.0 117.7 64.0 109.9Q43.1 108.9 33.5 98.2Q14.8 92.7 13.2 80.7Q-0.5 71.5 6.0 60.0Q-0.5 48.5 13.2 39.3Q14.8 27.3 33.5 21.8Q43.1 11.1 64.0 10.1Q80.0 2.3 100.0 6.0Q120.0 2.3 136.0 10.1Q156.9 11.1 166.5 21.8Q185.2 27.3 186.8 39.3Q200.5 48.5 194.0 60.0Z' fill='%23f7f7f7' stroke='%23d9d9d9' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .08)); }
.wb__i p { position: relative; z-index: 1; color: #3d3a3c; }
.wb__i:nth-child(1) { transform: translate(4px, 0); }  .wb__i:nth-child(1)::before { transform: rotate(-4deg); }
.wb__i:nth-child(2) { transform: translate(-2px, 14px); } .wb__i:nth-child(2)::before { transform: rotate(3deg); }
.wb__i:nth-child(3) { transform: translate(10px, -4px); } .wb__i:nth-child(3)::before { transform: rotate(2deg); }
.wb__i:nth-child(4) { transform: translate(-6px, 10px); } .wb__i:nth-child(4)::before { transform: rotate(-3deg); }
.wb__i:nth-child(5) { transform: translate(2px, -2px); }  .wb__i:nth-child(5)::before { transform: rotate(-2deg); }
.wb__i:nth-child(6) { transform: translate(-4px, 8px); }  .wb__i:nth-child(6)::before { transform: rotate(4deg); }
.wb__dots i { background: #f7f7f7; border-color: #d9d9d9; }

/* 事例：イメージ写真1枚（注記つき） */
.case__image { margin: 0 calc(var(--gut) * -1) 26px; position: relative; }
.case__image img { width: 100%; aspect-ratio: 748 / 460; object-fit: cover; }
.case__image figcaption { position: absolute; right: 8px; bottom: 6px; font-size: 10px; color: #fff; background: rgba(60, 40, 50, .55); padding: 1px 6px; }

/* お悩み：セクションの高さを抑える（雲を詰め、女性のイラストを雲の下に少し重ねる） */
.worry { padding-top: 32px; }
.worry .ttl { margin-bottom: 18px; }
.wb { gap: 0 2px; margin-top: 0; }
.wb__i { min-height: 98px; padding: 18px 16px 20px; }
.wb__i:nth-child(1) { transform: translate(4px, 0); }
.wb__i:nth-child(2) { transform: translate(-2px, 8px); }
.wb__i:nth-child(3) { transform: translate(8px, -6px); }
.wb__i:nth-child(4) { transform: translate(-6px, 2px); }
.wb__i:nth-child(5) { transform: translate(2px, -10px); }
.wb__i:nth-child(6) { transform: translate(-4px, -4px); }
.wb__dots { height: 30px; margin: -6px 0 -34px; }
.wb__dots i:nth-child(2) { top: 14px; }
.wb__dots i:nth-child(3) { top: 24px; }
.worry__woman { width: 250px; margin: 0 auto; position: relative; z-index: 1; }
@media (min-width: 400px) { .wb__i { min-height: 106px; } }
.wb__dots { height: 30px; margin: 0 0 -10px; }
.wb__dots i:nth-child(1) { left: 54%; top: 0; }
.wb__dots i:nth-child(2) { left: 58%; top: 13px; }
.wb__dots i:nth-child(3) { left: 61%; top: 23px; }

/* お悩みの女性イラストを大きめに */
.worry__woman { width: 330px; max-width: 100%; }

/* 事例のイメージ写真（注記なし） */
.case__image { margin: 0 calc(var(--gut) * -1) 26px; }
.case__image img { width: 100%; aspect-ratio: 748 / 460; object-fit: cover; }

/* 受講者の声：人物イラストが話している吹き出し */
.say { display: grid; grid-template-columns: 96px 1fr; align-items: end; gap: 8px; margin: 16px 0 8px; text-align: left; }
.say img { width: 96px; }
.say__bubble.voice-hl__big { position: relative; margin: 0 0 30px; padding: 14px 14px; background: #fff; border: 1.5px solid #e6b9ca; border-radius: 18px; font-size: 21px; line-height: 1.5; text-align: center; }
.say__bubble::before { content: ""; position: absolute; left: -10px; bottom: 18px; width: 16px; height: 16px; background: #fff; border-left: 1.5px solid #e6b9ca; border-bottom: 1.5px solid #e6b9ca; transform: rotate(45deg); }
@media (max-width: 373px) { .say { grid-template-columns: 78px 1fr; } .say img { width: 78px; } .say__bubble.voice-hl__big { font-size: 5.6vw; } }

/* 特典の診断画像：約1.2倍に */
.gift__vis { width: calc(100% + 26px); max-width: none; margin: 22px -13px 0; }
@media (min-width: 480px) { .gift__vis { width: 420px; margin: 22px auto 0; } }

/* 受講者の声：吹き出しの文字が変なところで折れないように */
.say { grid-template-columns: 84px 1fr; }
.say img { width: 84px; }
.say__bubble.voice-hl__big { font-size: 19px; padding: 14px 10px; }
.prof__id img { object-position: 38% center; }

/* 受講者の声：白い台紙の上で、右の女性が話している形に。人物は大きめ、吹き出しは左 */
.voice-hl { margin-top: 40px; padding: 0 0 18px; background: #fff; box-shadow: 0 8px 22px rgba(122, 29, 69, .1); }
.voice-hl .ribbon { margin-top: -14px; }
.say { grid-template-columns: 1fr 128px; gap: 0; align-items: end; margin: 6px 0 4px; padding: 0 0 0 14px; }
.say img { order: 2; width: 128px; margin-top: 10px; }
.say__bubble.voice-hl__big { order: 1; margin: 0 -6px 46px 0; padding: 18px 12px 16px; font-size: 21px; line-height: 1.5; border: 0; border-radius: 22px;
  background: linear-gradient(160deg, #fdf0f4, #f8e1ea); }
.say__bubble.voice-hl__big::before { left: auto; right: -7px; bottom: 26px; width: 16px; height: 16px; border: 0; background: #f8e3eb; transform: rotate(45deg); }
.say__bubble.voice-hl__big::after { content: "“"; position: absolute; top: -18px; left: 8px; font-family: var(--serif); font-size: 52px; line-height: 1; color: #e6a5bd; }
.voice-hl > .small { margin-top: 0; }
@media (max-width: 373px) { .say { grid-template-columns: 1fr 104px; } .say img { width: 104px; } .say__bubble.voice-hl__big { font-size: 5.6vw; } }
.say__bubble.voice-hl__big { font-size: 21px; white-space: nowrap; }
.say__bubble em { font-size: 1.2em; background: linear-gradient(transparent 64%, #f6c6d6 64%); }
@media (max-width: 373px) { .say__bubble.voice-hl__big { font-size: 5.6vw; } }

/* 特典の診断画像：スマホでは少し小さく（幅85%・最大320px） */
@media (max-width: 479px) { .gift__vis { width: 85%; max-width: 320px; margin: 22px auto 0; } }

/* お悩みの雲：スマホは改行せず自然に折り返す。PCだけ指定の位置で改行 */
@media (max-width: 899px) { .wb br.pc { display: none; } .wb__i p { text-align: left; } }
/* 強調部分は途中で折らない（スマホで「消えてし／まう」のような分かれ方を防ぐ） */
.wb__hl { display: inline-block; white-space: nowrap; }
.wb__i p { text-wrap: pretty; }
/* PC：6つ目は指定どおりの改行で1行に収める */
@media (min-width: 900px) {
  .wb__i:nth-child(6) { padding-left: 8px; padding-right: 8px; }
  .wb__i:nth-child(6) p { white-space: nowrap; font-size: 11.5px; letter-spacing: -.02em; }
}

/* スマホ：お悩みセクションを1画面に収める（雲を詰め、イラストを小さく） */
@media (max-width: 899px) {
  .worry { padding-top: 24px; }
  .worry .ttl { margin-bottom: 10px; padding-bottom: 12px; }
  .worry .ttl__en { margin-bottom: 4px; }
  .wb__i { min-height: 0; padding: 14px 16px 15px; }
  .wb__i p { font-size: 11.5px; line-height: 1.55; }
  .wb__hl { font-size: 12.5px; }
  .wb__i:nth-child(n) { transform: none; }
  .wb__i:nth-child(odd) { transform: translateY(0); }
  .wb__i:nth-child(even) { transform: translateY(8px); }
  .wb__dots { height: 22px; margin: 0 0 -6px; }
  .wb__dots i:nth-child(1) { width: 16px; height: 13px; }
  .wb__dots i:nth-child(2) { top: 10px; width: 11px; height: 9px; }
  .wb__dots i:nth-child(3) { top: 18px; width: 7px; height: 6px; }
  .worry__woman { width: 200px; }
}
@media (max-width: 899px) { .wb__i { padding: 16px 22px 17px; } .worry__woman { width: 240px; } }
/* スマホの雲：文字は上下左右とも中央、雲を大きくして文字が雲の内側に収まるように */
@media (max-width: 899px) {
  .wb { margin-left: -18px; margin-right: -18px; gap: 0; }
  .wb__i { min-height: 112px; padding: 22px 28px 22px; display: flex; align-items: center; justify-content: center; }
  .wb__i p { text-align: center; }
}

/* 帯（ribbon）：帯と左右の切り込みを1枚の形で描き、つなぎ目の段差・線（ぐらつき）をなくす（2026-11-13 user指摘） */
.ribbon { height: 44px; line-height: 44px; padding: 0 22px; margin-left: -7px; margin-right: -7px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%); }
.ribbon::before, .ribbon::after { content: none; }

/* AFTERを光らせる（2026-11-13 user：星は不要／地の斜めの白線は不要／金に黒文字が目立つ／光の横切りは2倍速）
   金の地（斜めの反射なし）＋黒文字＋金の外光。光が1.75秒おきに横切る */
.cup__col.is-after { position: relative; z-index: 1; overflow: hidden;
  background: linear-gradient(170deg, #f8e19a 0%, #e8c060 45%, #cf9f3a 100%);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c9962f, 0 8px 20px rgba(150, 105, 20, .4), 0 0 24px rgba(255, 205, 90, .85); }
.cup:not(.cup--s) .cup__col.is-after { transform: scale(1.03); }
.cup__arrow { z-index: 2; }
.cup__col.is-after b, .cup__col.is-after .cup__unit, .cup__col.is-after .cup__lbl { color: #1c1714; text-shadow: none; }
.cup__col.is-after .cup__lbl { font-weight: 700; }
.cup__col.is-after .cup__when { background: #1c1714; color: #f8e19a; }
.cup__col.is-after > * { position: relative; z-index: 1; }
.cup__col.is-after::before { content: ""; position: absolute; top:-10%;right:-10%;bottom:-10%;left:-10%;inset:-10%; pointer-events: none; z-index: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .15) 44%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, .15) 56%, transparent 62%);
  transform: translateX(-110%); animation: cupShine 1.75s ease-in-out .4s infinite; }
@keyframes cupShine { 0%, 50% { transform: translateX(-110%); } 80%, 100% { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) { .cup__col.is-after::before { animation: none; transform: translateX(-110%); } }