/* ════════════════════════════════════════════════
   sumire — Landing page styles
   くすみすみれ色 × 明朝 × 余白 × ふわっとした動き
   ════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-jp-sans); font-size: 15px; line-height: 1.85; letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--sumire-300); color: var(--ink); }
p, h1, h2, h3, .exp .txt h3, .sec-top h2, .core h2, .final h2 { text-wrap: pretty; }

.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }
.mark .petal { fill: currentColor; }
.lt-display { font-family: var(--font-lt-display); }
.lt-italic { font-family: var(--font-lt-serif); font-style: italic; }
.tag { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-lt-serif); font-style: italic;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }

/* ── scroll progress bar ── */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 300;
  background: linear-gradient(90deg, var(--sumire-400), var(--rose), var(--coral)); transition: width .1s linear; }

/* ── buttons ── */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border: none;
  border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--font-jp-serif); font-size: 15.5px;
  letter-spacing: 0.08em; cursor: pointer; padding: 0 32px; position: relative; overflow: hidden;
  transition: transform .14s ease, background .25s ease, box-shadow .25s ease; }
.btn-primary:hover { background: var(--sumire-700); box-shadow: 0 10px 30px rgba(123,107,168,0.35); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-primary .arw { font-family: var(--font-lt-display); font-size: 18px; transition: transform .2s ease; }
.btn-primary:hover:not(:disabled) .arw { transform: translateX(4px); }
/* shimmer sweep */
.btn-primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.25), transparent); transform: skewX(-18deg); }
.btn-primary:hover:not(:disabled)::after { animation: sweep 0.9s ease; }
@keyframes sweep { to { left: 120%; } }

/* ════════ TOP BAR ════════ */
header.bar { position: sticky; top: 0; z-index: 200; background: rgba(42,30,61,0.82); backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 0.5px solid rgba(255,255,255,0.12); transition: background .3s; }
.bar-in { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--sumire-200); }
.brand .mark { width: 25px; height: 25px; animation: bloom 9s ease-in-out infinite; transform-origin: center; }
@keyframes bloom { 0%,100%{ transform: rotate(0deg) scale(1);} 50%{ transform: rotate(8deg) scale(1.06);} }
.brand .name { font-family: var(--font-lt-display); font-size: 21px; letter-spacing: 0.2em; color: var(--paper); }
.bar-r { display: flex; align-items: center; gap: 16px; }
.bar-tagline { font-family: var(--font-lt-serif); font-style: italic; font-size: 11.5px; color: rgba(250,246,241,0.55); letter-spacing: 0.08em; }
.bar-cta { font-family: var(--font-jp-serif); font-size: 13px; padding: 9px 20px; border-radius: 999px;
  background: var(--paper); color: var(--ink); letter-spacing: 0.06em; transition: transform .15s, box-shadow .2s; }
.bar-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }

/* ════════ HERO ════════ */
.hero { position: relative; overflow: hidden; padding: 48px 0 58px; color: var(--paper);
  background-image:
    linear-gradient(100deg, rgba(26,17,36,0.94) 0%, rgba(34,22,48,0.52) 34%, rgba(34,22,48,0.40) 58%, rgba(26,17,36,0.86) 100%),
    linear-gradient(180deg, rgba(26,17,36,0.28), rgba(26,17,36,0.58)),
    url("../lp/hero-bg.jpg");
  background-size: cover; background-position: center 28%; }
@keyframes heroShift { 0%,100%{ background-position: 0% 0%; } 50%{ background-position: 100% 100%; } }
.hero .aura { display: none; }
.hero .bigflower { display: none; }
@keyframes floatSlow { 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(22px) rotate(-6deg); } }
.hero .wrap { position: relative; z-index: 2; }
.hero .tag { color: var(--sumire-200); }
.hero .display { font-family: var(--font-lt-display); font-size: clamp(72px, 18vw, 200px); line-height: 0.86;
  letter-spacing: 0.02em; margin: 6px 0 0; color: var(--paper); white-space: nowrap; text-shadow: 0 4px 30px rgba(0,0,0,0.3); }
.hero .display .word { white-space: nowrap; }
.hero .display .ch { display: inline-block; }
@keyframes dropIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.hero .kana { display: block; font-family: var(--font-jp-serif); font-size: clamp(12px,3.6vw,17px); letter-spacing: 0.7em;
  color: var(--sumire-300); margin: 12px 0 0; padding-left: 0.7em; }
.hero .whatis { display: inline-block; margin-top: 18px; max-width: 640px;
  font-family: var(--font-jp-serif); font-weight: 600; letter-spacing: 0.04em; line-height: 1.45; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.45);
  border: 1.5px solid rgba(250,246,241,0.5); border-radius: 18px; padding: 18px 26px;
  background: rgba(42,30,61,0.42); backdrop-filter: blur(6px); }
.hero .whatis .wa1 { font-size: clamp(24px, 5.6vw, 40px); font-weight: 700; color: #fff; }
.hero .whatis .wa2 { font-size: clamp(20px, 4.8vw, 32px); color: var(--sumire-100); }
.hero .whatis .hl-w { background: var(--sumire-400); color: #fff; padding: 2px 12px; border-radius: 8px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero .lead .hl-w2 { background: linear-gradient(transparent 58%, var(--rose-light) 58%); color: #fff; font-weight: 700; padding: 0 3px; border-radius: 2px; }
.hero-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hero-points li { display: flex; align-items: center; gap: 11px; font-family: var(--font-jp-serif); font-weight: 600;
  font-size: clamp(14px, 2vw, 17px); letter-spacing: 0.02em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.55); }
.hero-points li b { font-weight: 700; color: var(--sumire-100); }
.hero-points .hp-ck { flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--rose-deep);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(166,80,100,0.5); }
.hero-points .hp-ck svg { width: 13px; height: 13px; color: #fff; }
.hero .catch { font-family: var(--font-hand-casual); font-weight: 400; font-size: clamp(30px, 7.6vw, 60px);
  letter-spacing: 0.04em; line-height: 1.35; margin: 0 0 4px; color: var(--rose-light); text-shadow: 0 2px 18px rgba(0,0,0,0.4); }
.hero .catch em { font-style: normal; color: #fff; position: relative; }
.hero .lead { margin: 0 0 22px; font-family: var(--font-jp-serif); font-weight: 500; font-size: clamp(16px, 2.2vw, 21px); color: var(--sumire-100); max-width: none; line-height: 1.95; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.hero .lead b { font-weight: 700; color: #fff; }
.hv-shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.hero-cta { margin-top: 0; max-width: 460px; }
.hero-right { margin-top: 26px; background: none; backdrop-filter: none; border: none; border-radius: 0; padding: 0; box-shadow: none; }

/* hero entrance — transform-only (opacity always 1 → always visible, even if timeline is paused) */
html.js .hero .tag, html.js .hero .kana, html.js .hero .whatis, html.js .hero .catch,
html.js .hero .lead, html.js .hero-cta {
  transform: translateY(20px);
  transition: transform .8s cubic-bezier(.2,.7,.2,1); }
html.js .hero .display .ch { transform: translateY(34px);
  transition: transform .7s cubic-bezier(.2,.7,.2,1); }
html.js .hero .kana { transition-delay: .15s; }
html.js .hero .whatis { transition-delay: .3s; }
html.js .hero .catch { transition-delay: .04s; }
html.js .hero .lead { transition-delay: .54s; }
html.js .hero-cta { transition-delay: .66s; }
body.loaded .hero .tag, body.loaded .hero .kana, body.loaded .hero .whatis, body.loaded .hero .catch,
body.loaded .hero .lead, body.loaded .hero-cta, body.loaded .hero .display .ch {
  transform: none; }

/* hero desktop two-column + product visual */
.hero-visual { display: none; }
@media (min-width: 940px) {
  .hero { padding: 88px 0 100px; }
  .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: end; }
  .hero-brand { max-width: 660px; }
  .hero-right { margin-top: 0; }
  .hero .lead { max-width: 480px; }
  .hero-visual { display: block; position: relative; justify-self: center; width: 300px; }
  .hv-glow { position: absolute; inset: -60px -40px; background: radial-gradient(50% 50% at 60% 40%, rgba(201,155,170,0.4), transparent 70%); filter: blur(10px); }
  .hv-phone { position: relative; width: 300px; z-index: 2; }
  .hv-float { position: absolute; z-index: 3; background: rgba(250,246,241,0.97); border-radius: 16px; box-shadow: var(--sh-3);
    font-family: var(--font-jp-serif); color: var(--ink); padding: 11px 15px; font-size: 12.5px; display: flex; align-items: center; gap: 10px; backdrop-filter: blur(6px); }
  .hv-mood { top: 64px; left: -56px; animation: bob 4.6s ease-in-out infinite; }
  .hv-mood b { color: var(--sumire-600, var(--sumire-700)); }
  .hv-mood .hv-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--sage); box-shadow: 0 0 0 4px rgba(157,174,148,0.25); flex: none; }
  .hv-match { bottom: 86px; right: -52px; animation: bob 5.2s ease-in-out infinite .4s; }
  .hv-match .hv-heart { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--rose), var(--rose-deep)); font-size: 14px; flex: none; }
  .hv-match .hv-mt { font-family: var(--font-lt-display); font-size: 13px; letter-spacing: 0.1em; color: var(--rose-deep); }
  .hv-match .hv-ms { font-size: 10.5px; color: var(--mute); }
}

/* ── section dot nav (desktop) ── */
.dotnav { display: none; }
@media (min-width: 1100px) {
  .dotnav { display: flex; flex-direction: column; gap: 16px; position: fixed; right: 26px; top: 50%;
    transform: translateY(-50%); z-index: 150; }
  .dotnav a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; position: relative; }
  .dotnav .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--mute-soft); transition: background .25s, transform .25s; }
  .dotnav a::before { content: attr(data-label); font-family: var(--font-jp-serif); font-size: 11px; letter-spacing: 0.08em;
    color: var(--ink); background: rgba(255,255,255,0.9); padding: 4px 10px; border-radius: 999px; box-shadow: var(--sh-1);
    opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; white-space: nowrap; pointer-events: none; }
  .dotnav a:hover .dot { background: var(--sumire-500); }
  .dotnav a:hover::before { opacity: 1; transform: none; }
  .dotnav a.on .dot { background: var(--sumire-500); transform: scale(1.5); }
  /* dark sections → light dots */
  body.dn-dark .dotnav .dot { background: rgba(250,246,241,0.45); }
  body.dn-dark .dotnav a.on .dot { background: var(--sumire-200); }
  body.dn-dark .dotnav a::before { background: rgba(42,30,61,0.92); color: var(--paper); }
}

/* signup card (shared) */
.signup form { display: flex; flex-direction: column; gap: 12px; }
.signup .field { display: flex; flex-direction: column; gap: 12px; }
.signup input[type=email] { height: 56px; border-radius: 999px; padding: 0 22px; font-family: var(--font-jp-sans);
  font-size: 14.5px; transition: border-color .2s, box-shadow .2s, background .2s; }
.signup .consent { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; font-size: 12.5px; line-height: 1.6;
  letter-spacing: 0.02em; user-select: none; }
.signup .consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.signup .consent .box { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  transition: background .2s, border-color .2s; margin-top: 1px; }
.signup .consent .box svg { width: 13px; height: 13px; opacity: 0; transform: scale(0.5); transition: opacity .18s, transform .18s; }
.signup .consent input:checked + .box svg { opacity: 1; transform: scale(1); }
.signup .consent input:focus-visible + .box { outline: 2px solid var(--sumire-400); outline-offset: 2px; }
.signup .consent a { text-decoration: underline; text-underline-offset: 2px; }
.signup .eligibility { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; letter-spacing: 0.04em; }
.signup .eligibility svg { width: 14px; height: 14px; flex: none; }
.signup .fineprint { font-size: 11.5px; letter-spacing: 0.04em; }
.signup .done { display: none; }
.signup .done.show { display: block; animation: fadeUp .6s ease; }

/* hero signup specific colors (on dark) */
/* core section signup form (replaces map) */
.core .cwrap { align-items: center; }
.core-formwrap { display: flex; }
.core-cta { width: 100%; max-width: 480px; margin: 0 auto; }
.core-cta .cta-kicker { display: inline-block; font-family: var(--font-jp-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; color: var(--sumire-100); border: 1px solid rgba(250,246,241,0.3); border-radius: 999px;
  padding: 8px 18px; margin: 0 0 16px; }
.core-cta .cta-lead { margin: 0 0 20px; font-size: 14px; line-height: 1.85; color: rgba(250,246,241,0.82); }

/* feature-request section */
.freq { background: linear-gradient(180deg, var(--paper-2), var(--paper)); }
.freq-wrap { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.freq-head .tag { color: var(--rose-deep); margin-bottom: 14px; display: inline-flex; }
.freq-head h2 { font-family: var(--font-jp-serif); font-weight: 600; font-size: clamp(28px, 6vw, 46px);
  letter-spacing: 0.04em; line-height: 1.3; margin: 0; color: var(--ink); }
.freq-head p { margin: 18px 0 0; font-size: 14px; line-height: 1.9; color: var(--ink-soft); max-width: 460px; }
.freq-card { background: #fff; border: 0.5px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: var(--sh-2); }
.freq-card textarea { width: 100%; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; resize: vertical;
  font-family: var(--font-jp-sans); font-size: 14.5px; line-height: 1.7; color: var(--ink); background: var(--paper);
  transition: border-color .2s, box-shadow .2s, background .2s; }
.freq-card textarea::placeholder { color: var(--mute); }
.freq-card textarea:focus { outline: none; border-color: var(--sumire-400); background: #fff; box-shadow: 0 0 0 4px rgba(181,164,210,0.18); }
.freq-card input[type=email] { height: 54px; border-radius: 999px; padding: 0 22px; font-family: var(--font-jp-sans);
  font-size: 14.5px; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  transition: border-color .2s, box-shadow .2s; }
.freq-card input[type=email]:focus { outline: none; border-color: var(--sumire-400); box-shadow: 0 0 0 4px rgba(181,164,210,0.18); }
.freq-card input[type=email]::placeholder { color: var(--mute); }
.freq-card .btn-primary { width: 100%; background: linear-gradient(120deg, var(--sumire-500), var(--rose-deep)); color: #fff;
  box-shadow: 0 10px 26px rgba(123,107,168,0.35); }
.freq-card .fineprint { font-size: 11.5px; letter-spacing: 0.04em; color: var(--mute); margin: 0; }
.freq-card .done { text-align: center; padding: 14px 0; }
.freq-card .done .ttl { font-family: var(--font-jp-serif); font-size: 18px; color: var(--sumire-700); }
.freq-card .done p { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; }
@media (min-width: 820px) {
  .freq-wrap { grid-template-columns: 1fr 1fr; gap: 56px; }
  .freq-card { padding: 34px; }
}

.mark-sumire { font-family: var(--font-lt-display); font-size: 1.55em; letter-spacing: 0.04em;
  color: var(--sumire-700); line-height: 1; }
/* hero signup — make it stand out */
.hero-cta { padding: 22px; border-radius: 22px; background: rgba(24,15,34,0.42);
  border: 1px solid rgba(250,246,241,0.16); backdrop-filter: blur(10px); box-shadow: 0 20px 50px rgba(0,0,0,0.34); }
.hero-cta input[type=email] { height: 58px; font-size: 15px; }
.hero-cta .btn-primary { height: 58px; font-size: 16px; font-weight: 700; letter-spacing: 0.1em;
  background: linear-gradient(120deg, var(--sumire-400), var(--rose)); color: #fff;
  box-shadow: 0 10px 26px rgba(150,133,189,0.5); }
.hero-cta .btn-primary:hover:not(:disabled) { background: linear-gradient(120deg, var(--sumire-500), var(--rose-deep)); box-shadow: 0 14px 32px rgba(150,133,189,0.6); }
.hero-cta input[type=email] { border: 1px solid rgba(250,246,241,0.26); background: rgba(250,246,241,0.07); color: var(--paper); }
.hero-cta input[type=email]::placeholder { color: rgba(250,246,241,0.5); }
.hero-cta input[type=email]:focus { outline: none; border-color: var(--sumire-300); background: rgba(250,246,241,0.12); box-shadow: 0 0 0 4px rgba(181,164,210,0.18); }
.hero-cta .consent { color: rgba(250,246,241,0.8); }
.hero-cta .consent .box { border: 1.5px solid rgba(250,246,241,0.4); background: rgba(250,246,241,0.06); }
.hero-cta .consent input:checked + .box { background: var(--sumire-300); border-color: var(--sumire-300); color: var(--ink); }
.hero-cta .consent a { color: var(--sumire-200); }
.hero-cta .eligibility { color: rgba(250,246,241,0.62); }
.hero-cta .eligibility svg { color: var(--sumire-300); }
.hero-cta .btn-primary { background: var(--paper); color: var(--ink); width: 100%; }
.hero-cta .btn-primary:hover:not(:disabled) { background: #fff; }
.hero-cta .fineprint { color: rgba(250,246,241,0.55); }
.hero-cta .done { border: 1px solid rgba(250,246,241,0.26); border-radius: 18px; padding: 20px 22px; background: rgba(250,246,241,0.05); }
.hero-cta .done .ttl { font-family: var(--font-jp-serif); color: var(--sumire-100); font-size: 16px; }
.hero-cta .done p { margin: 6px 0 0; font-size: 13px; color: rgba(250,246,241,0.72); }

/* floating petals */
.petal-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.petal-field .pf { position: absolute; top: -40px; color: var(--sumire-200); opacity: 0; animation: fall linear infinite; will-change: transform, opacity; }
@keyframes fall {
  0% { transform: translateY(-40px) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: var(--mo, 0.5); }
  50% { transform: translateY(50vh) translateX(var(--sway, 40px)) rotate(calc(var(--spin, 220deg) * 0.5)); }
  90% { opacity: calc(var(--mo, 0.4) * 0.8); }
  100% { transform: translateY(106vh) translateX(0) rotate(var(--spin, 220deg)); opacity: 0; }
}
@keyframes fall2 {
  0% { transform: translateY(-40px) translateX(0) rotate(0deg); opacity: 0; }
  12% { opacity: var(--mo, 0.5); }
  50% { transform: translateY(52vh) translateX(calc(var(--sway, 40px) * -1)) rotate(calc(var(--spin, 220deg) * -0.5)); }
  88% { opacity: calc(var(--mo, 0.4) * 0.8); }
  100% { transform: translateY(106vh) translateX(0) rotate(calc(var(--spin, 220deg) * -1)); opacity: 0; }
}

/* ════════ MARQUEE ════════ */
.marquee { background: var(--ink); padding: 16px 0; overflow: hidden; }
.marquee .track { display: flex; gap: 0; white-space: nowrap; width: max-content; animation: mq 28s linear infinite; }
.marquee .it { font-family: var(--font-lt-display); font-size: 21px; letter-spacing: 0.1em; color: var(--paper); padding: 0 24px; display: inline-flex; align-items: center; gap: 24px; }
.marquee .it .d { color: var(--sumire-400); }
@keyframes mq { to { transform: translateX(-50%); } }

/* ════════ SECTION BASE ════════ */
section { padding: 70px 0; position: relative; }
.sec-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; flex-wrap: wrap; }
.sec-top .l .tag { color: var(--sumire-500); margin-bottom: 14px; display: inline-flex; }
.sec-top h2 { font-family: var(--font-jp-serif); font-weight: 600; font-size: clamp(28px, 6vw, 47px);
  letter-spacing: 0.04em; line-height: 1.3; margin: 0; }
.sec-top .r { font-size: 13.5px; color: var(--ink-soft); max-width: 340px; }

/* ════════ PROBLEM / 共感 ════════ */
.problem { background: var(--paper); text-align: center; overflow: hidden; }
.problem .veil-flower { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); width: 320px; opacity: 0.05; color: var(--sumire-500); pointer-events: none; }
.problem .eyebrow { font-family: var(--font-lt-serif); font-style: italic; font-size: 13px; letter-spacing: 0.16em; color: var(--rose-deep); text-transform: uppercase; }
.problem .lines { margin: 26px auto 0; max-width: 620px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.problem .ln { font-family: var(--font-jp-serif); font-weight: 500; font-size: clamp(18px, 4vw, 27px);
  letter-spacing: 0.04em; line-height: 1.7; color: var(--ink-soft); margin: 0; text-wrap: balance; }
.problem .ln .q { color: var(--rose); font-family: var(--font-lt-serif); font-style: italic; font-size: 0.85em; }
.problem .ln .em { color: var(--ink); border-bottom: 2px solid var(--sumire-200); padding-bottom: 1px; }
.problem .answer { margin: 36px 0 0; }
.problem .answer .small { font-family: var(--font-lt-serif); font-style: italic; font-size: 14px; color: var(--mute); letter-spacing: 0.1em; }
.problem .answer .big { font-family: var(--font-jp-serif); font-weight: 700; font-size: clamp(24px, 5.6vw, 38px);
  letter-spacing: 0.06em; line-height: 1.55; color: var(--ink); margin: 14px 0 0; text-wrap: balance; }
.problem .answer .big .hl { position: relative; color: var(--sumire-500); white-space: nowrap; }
.problem .answer .big .hl::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 4px; height: 30%;
  background: var(--sumire-100); z-index: -1; border-radius: 4px; }

/* ════════ CORE VALUE / 街・位置 ════════ */
.core { background: linear-gradient(160deg, #241834, #34254e 60%, #2a1e3d); color: var(--paper); overflow: hidden; }
.core .glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 36%, rgba(150,133,192,0.34), transparent 72%); }
.core .cwrap { position: relative; display: grid; grid-template-columns: 1fr; gap: 42px; align-items: center; }
.core .badge-core { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-lt-serif); font-style: italic;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sumire-200);
  background: rgba(181,164,210,0.16); border: 0.5px solid rgba(181,164,210,0.34); padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }
.core h2 { font-family: var(--font-jp-serif); font-weight: 700; font-size: clamp(32px, 7.4vw, 58px); letter-spacing: 0.05em; line-height: 1.24; margin: 0; color: var(--paper); }
.core h2 .accent { color: var(--sumire-300); }
.core p { font-size: 15px; line-height: 1.98; color: rgba(250,246,241,0.85); margin: 24px 0 0; max-width: 460px; }
.core p strong { color: #fff; font-weight: 600; }
.core .fine { margin-top: 22px; font-size: 12px; color: rgba(250,246,241,0.6); display: inline-flex; align-items: center; gap: 8px; }
.core .fine svg { width: 16px; height: 16px; color: var(--sumire-300); flex: none; }

/* map viz */
.mapviz { position: relative; aspect-ratio: 1 / 1; border-radius: 28px; overflow: hidden;
  background: linear-gradient(160deg, #2f2348, #3c2c5a); border: 0.5px solid rgba(250,246,241,0.16); box-shadow: var(--sh-3); }
.mapviz .grid { position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(rgba(181,164,210,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(181,164,210,0.16) 1px, transparent 1px);
  background-size: 46px 46px; animation: gridDrift 30s linear infinite; }
@keyframes gridDrift { to { background-position: 46px 46px; } }
.mapviz .road { position: absolute; background: rgba(181,164,210,0.14); }
.mapviz .r1 { top: 38%; left: -5%; width: 110%; height: 14px; transform: rotate(-8deg); }
.mapviz .r2 { top: -5%; left: 56%; width: 14px; height: 110%; transform: rotate(6deg); }
.mapviz .lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapviz .lines line { stroke: var(--sumire-300); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0.5;
  stroke-dashoffset: 200; }
.mapviz.in .lines line { animation: draw 1.6s ease forwards; }
.mapviz.in .lines line:nth-child(2){ animation-delay: .2s; } .mapviz.in .lines line:nth-child(3){ animation-delay: .4s; } .mapviz.in .lines line:nth-child(4){ animation-delay: .6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.mapviz .pin { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%,-50%); }
.mapviz .pin .dot { width: 16px; height: 16px; border-radius: 999px; background: var(--rose); box-shadow: 0 0 0 6px rgba(201,155,170,0.22); }
.mapviz .pin.me .dot { background: var(--sumire-200); box-shadow: 0 0 0 8px rgba(181,164,210,0.28); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0%{ box-shadow: 0 0 0 0 rgba(181,164,210,0.45);} 100%{ box-shadow: 0 0 0 30px rgba(181,164,210,0);} }
.mapviz .pin .lab { font-family: var(--font-jp-serif); font-size: 10.5px; color: var(--paper); background: rgba(30,20,40,0.62); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.mapviz .p1 { top: 26%; left: 26%; } .mapviz .p2 { top: 66%; left: 30%; } .mapviz .p3 { top: 40%; left: 58%; }
.mapviz .p4 { top: 76%; left: 72%; } .mapviz .me { top: 48%; left: 47%; }
/* concentric distance rings (500m units), centered on あなた (47%,48%) */
.mapviz .rings { position: absolute; inset: 0; pointer-events: none; }
.mapviz .ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(181,164,210,0.42); }
.mapviz .ring.ra { width: 30%; height: 30%; left: 32%; top: 33%; }
.mapviz .ring.rb { width: 58%; height: 58%; left: 18%; top: 19%; }
.mapviz .ring.rc { width: 86%; height: 86%; left: 4%; top: 5%; }
.mapviz .ring-lab { position: absolute; font-family: var(--font-lt-serif); font-style: italic; font-size: 9.5px;
  letter-spacing: 0.04em; color: rgba(250,246,241,0.6); transform: translateX(-50%); white-space: nowrap; }
.mapviz .ring-lab.rl-a { left: 47%; top: 32.5%; } .mapviz .ring-lab.rl-b { left: 47%; top: 18.5%; } .mapviz .ring-lab.rl-c { left: 47%; top: 4.5%; }
/* fuzzy markers — approximate, blurred to imply imprecise location */
.mapviz .pin.fuzzy .dot { filter: blur(2px); width: 22px; height: 22px; opacity: 0.85;
  box-shadow: 0 0 0 10px rgba(201,155,170,0.16); }
.mapviz .card-float { position: absolute; bottom: 16px; left: 16px; right: 16px; background: rgba(250,246,241,0.97);
  border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 11px; box-shadow: var(--sh-2); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
.mapviz .card-float .av { width: 38px; height: 38px; border-radius: 999px; background: linear-gradient(135deg, var(--coral), var(--rose)); flex: none; }
.mapviz .card-float .t1 { font-family: var(--font-jp-serif); font-size: 13px; color: var(--ink); }
.mapviz .card-float .t2 { font-size: 11px; color: var(--mute); }
.mapviz .card-float .mood { margin-left: auto; font-family: var(--font-jp-serif); font-size: 11px; color: var(--sumire-700); background: var(--sumire-50); padding: 4px 10px; border-radius: 999px; }

/* ════════ STRENGTHS (3 pillars) ════════ */
.pillars { background: var(--paper); }
.pillar-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.pillar { position: relative; border-radius: 0; padding: 30px 0 6px; overflow: visible; border: none; border-top: 0.5px solid var(--line); background: none; }
.pillar .pnum { font-family: var(--font-lt-display); font-size: 13px; letter-spacing: 0.22em; }
.pillar .pico { margin: 0; }
.pillar .pico svg { width: 32px; height: 32px; stroke-width: 1.4; }
.pillar h3 { font-family: var(--font-jp-serif); font-weight: 700; font-size: 21px; letter-spacing: 0.04em; margin: 0 0 10px; line-height: 1.45; }
.pillar p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.pillar .pchip { display: inline-block; margin-top: 14px; font-family: var(--font-jp-serif); font-size: 12px; letter-spacing: 0.03em; }
.pillar .pchip::before { content: "\2014\A0"; opacity: 0.7; }
.pillar.v1 { background: none; }
.pillar.v1 .pnum, .pillar.v1 h3 .dot, .pillar.v1 .pico { color: var(--sumire-500); }
.pillar.v1 .pchip { color: var(--sumire-700); }
.pillar.v2 { background: none; }
.pillar.v2 .pnum, .pillar.v2 .pico { color: var(--rose-deep); }
.pillar.v2 .pchip { color: var(--rose-deep); }
.pillar.v3 { background: none; }
.pillar.v3 .pnum, .pillar.v3 .pico { color: var(--sage-deep); }
.pillar.v3 .pchip { color: var(--sage-deep); }
.pillar:hover { transform: translateY(-3px); transition: transform .3s; }

/* ════════ FEATURES (alternating) ════════ */
.features { background: linear-gradient(180deg, var(--paper), var(--paper-2) 70%, var(--paper)); }
.exp { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; padding: 38px 0; }
.exp + .exp { border-top: 0.5px solid var(--line); }
.exp .ph-wrap { display: flex; justify-content: center; }
.exp .txt .efnum { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-lt-display); font-size: 13px; letter-spacing: 0.2em; color: var(--sumire-400); }
.exp .txt .efnum .efline { width: 28px; height: 1px; background: var(--sumire-300); }
.exp .txt h3 { font-family: var(--font-jp-serif); font-weight: 700; font-size: clamp(22px,5vw,31px); letter-spacing: 0.03em; margin: 14px 0 14px; line-height: 1.45; }
.exp .txt h3 .accent { color: var(--sumire-500); }
.exp .txt p { margin: 0; font-size: 14.5px; color: var(--ink-soft); max-width: 480px; }
.exp .txt .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.exp .txt .chip { font-family: var(--font-jp-serif); font-size: 12px; color: var(--sumire-700); background: var(--sumire-50);
  border: 0.5px solid var(--sumire-100); padding: 6px 14px; border-radius: 999px; letter-spacing: 0.03em; }
.exp .moods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.exp .mood-chip { font-family: var(--font-jp-serif); font-size: 12.5px; padding: 7px 14px; border-radius: 999px;
  background: #fff; border: 0.5px solid var(--line); color: var(--ink-soft); transition: transform .15s, background .2s, color .2s; cursor: default; }
.exp .mood-chip:hover { transform: translateY(-2px); background: var(--sumire-500); color: #fff; border-color: var(--sumire-500); }

/* phone mock */
.phone { position: relative; width: 260px; border-radius: 40px; background: linear-gradient(160deg, #2a1e3d, #4a3868); padding: 9px;
  box-shadow: var(--sh-3); flex: none; transition: transform .4s ease; }
.exp:hover .phone { transform: translateY(-6px) rotate(-1deg); }
.phone .notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 78px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.45); z-index: 5; }
.phone .scr { border-radius: 32px; overflow: hidden; aspect-ratio: 252 / 540; position: relative; background: var(--paper); }
/* in-phone UI mock */
.pscreen { position: absolute; inset: 0; display: flex; flex-direction: column; font-family: var(--font-jp-sans); }
.pscreen .ptop { height: 54px; flex: none; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 16px 8px; }
.pscreen .ptop .pname { font-family: var(--font-lt-display); font-size: 17px; letter-spacing: 0.14em; color: var(--sumire-700); }
.pscreen .ptop .pic { width: 18px; height: 18px; color: var(--sumire-400); }
.pscreen .pbody { flex: 1; overflow: hidden; padding: 0 14px; }
.pscreen .pnav { height: 52px; flex: none; border-top: 0.5px solid var(--line); display: flex; align-items: center; justify-content: space-around; background: #fff; }
.pscreen .pnav .ni { width: 20px; height: 20px; color: var(--mute-soft); }
.pscreen .pnav .ni.on { color: var(--sumire-500); }
.plabel { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 6; font-family: var(--font-lt-serif); font-style: italic;
  font-size: 10px; letter-spacing: 0.04em; text-align: center; color: rgba(30,20,40,0.5); background: rgba(255,255,255,0.6); padding: 4px 7px; border-radius: 7px; backdrop-filter: blur(2px); }

/* generic mock atoms */
.m-card { background: #fff; border: 0.5px solid var(--line); border-radius: 14px; padding: 10px; margin-bottom: 10px; }
.m-row { display: flex; align-items: center; gap: 8px; }
.m-av { width: 30px; height: 30px; border-radius: 999px; flex: none; }
.m-line { height: 7px; border-radius: 999px; background: var(--line-soft); }
.m-pill { font-size: 9px; padding: 3px 8px; border-radius: 999px; font-family: var(--font-jp-serif); white-space: nowrap; }
.m-img { border-radius: 10px; }

/* mood-share mock */
.mood-sel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mood-sel span { font-size: 10px; font-family: var(--font-jp-serif); padding: 5px 10px; border-radius: 999px; background: var(--sumire-50); color: var(--sumire-700); border: 0.5px solid var(--sumire-100); }
.mood-sel span.on { background: var(--sumire-500); color: #fff; border-color: var(--sumire-500); }

/* match mock */
.match-burst { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(circle at 50% 42%, rgba(201,155,170,0.35), transparent 65%); }
.match-burst .hearts { display: flex; gap: -10px; }
.match-burst .mc-av { width: 64px; height: 64px; border-radius: 999px; border: 3px solid #fff; box-shadow: var(--sh-2); }
.match-burst .mc-av:nth-child(2){ margin-left: -18px; }
.match-burst .mtxt { font-family: var(--font-lt-display); font-size: 24px; letter-spacing: 0.14em; color: var(--rose-deep); }
.match-burst .msub { font-family: var(--font-jp-serif); font-size: 11px; color: var(--ink-soft); }

/* badge mock */
.vbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-family: var(--font-jp-serif); color: #fff;
  background: linear-gradient(135deg, var(--sumire-500), var(--sumire-700)); padding: 3px 9px; border-radius: 999px; }
.vbadge svg { width: 10px; height: 10px; }

/* ════════ SAFETY GRID (features 5-8) ════════ */
.safety { background: var(--ink); color: var(--paper); }
.safety .sec-top h2 { color: var(--paper); }
.safety .sec-top .tag { color: var(--sumire-300); }
.safety .sec-top .r { color: rgba(250,246,241,0.66); }
.sgrid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(250,246,241,0.13); border: 0.5px solid rgba(250,246,241,0.13); border-radius: 14px; overflow: hidden; }
.scell { background: #211734; padding: 30px 26px; transition: background .3s; }
.scell:hover { background: #281c40; }
.scell .stop { display: flex; align-items: center; justify-content: space-between; }
.scell .sico { color: var(--sumire-300); width: 28px; height: 28px; }
.scell .snum { font-family: var(--font-lt-display); font-size: 12px; letter-spacing: 0.2em; color: rgba(181,164,210,0.6); }
.scell h3 { font-family: var(--font-jp-serif); font-weight: 600; font-size: 17px; letter-spacing: 0.03em; margin: 16px 0 8px; color: var(--paper); line-height: 1.5; }
.scell p { margin: 0; font-size: 13px; color: rgba(250,246,241,0.7); }
.safety .opt-note { text-align: center; max-width: 600px; margin: 30px auto 0; font-size: 12.5px; color: rgba(250,246,241,0.55); letter-spacing: 0.04em; }
.safety .opt-note strong { color: var(--sumire-200); font-weight: 500; }

/* safety: light text overrides for phone-paired .exp blocks on dark bg */
.safety .exp + .exp { border-top-color: rgba(250,246,241,0.14); }
.safety .exp .txt h3 { color: var(--paper); }
.safety .exp .txt h3 .accent { color: var(--sumire-300); }
.safety .exp .txt p { color: rgba(250,246,241,0.82); }
.safety .exp .txt p strong { color: #fff; }
.safety .exp .txt .efnum { color: var(--sumire-200); }
.safety .exp .txt .efnum .efline { background: var(--sumire-300); }

/* highlight ring overlay inside phone screen */
.scr .spot { position: absolute; z-index: 6; pointer-events: none; border: 2.5px solid var(--rose-deep);
  border-radius: 14px; box-shadow: 0 6px 18px rgba(166,80,100,0.45); }
.scr .spot.s-sumire { border-color: var(--sumire-400); box-shadow: 0 6px 18px rgba(123,107,168,0.5); }
.scr .spot .spot-tag { position: absolute; top: -11px; left: 12px; font-family: var(--font-jp-sans); font-weight: 600;
  font-size: 10px; letter-spacing: 0.08em; color: #fff; background: var(--rose-deep); padding: 3px 11px;
  border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.scr .spot.s-sumire .spot-tag { background: var(--sumire-500); }

/* ════════ FEATURE CATALOG / 全機能 ════════ */
.catalog { background: linear-gradient(180deg, var(--paper), var(--paper-2) 60%, var(--paper)); }
.cat-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.cat-card { background: #fff; border: 0.5px solid var(--line); border-radius: var(--r-card); padding: 30px 30px 32px;
  box-shadow: var(--sh-1); transition: transform .3s, box-shadow .3s; }
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.cat-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.cat-head.sub { margin-top: 26px; padding-top: 24px; border-top: 0.5px solid var(--line-soft); }
.cat-ico { width: 26px; height: 26px; flex-shrink: 0; color: var(--sumire-500); }
.cat-head h3 { font-family: var(--font-jp-serif); font-weight: 600; font-size: 21px; letter-spacing: 0.04em; margin: 0; color: var(--ink); }
.cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.cat-list li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.cat-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 999px;
  background: var(--sumire-400); }
.cat-list li b { display: block; font-family: var(--font-jp-serif); font-weight: 600; font-size: 15px; letter-spacing: 0.02em;
  color: var(--ink); margin-bottom: 2px; }
.cat-card.c-rose   .cat-ico, .cat-card.c-rose   .cat-list li::before { color: var(--rose-deep); background: var(--rose); }
.cat-card.c-rose   .cat-ico { background: none; }
.cat-card.c-sage   .cat-ico, .cat-card.c-sage   .cat-list li::before { color: var(--sage-deep); background: var(--sage); }
.cat-card.c-sage   .cat-ico { background: none; }
.cat-card.c-gold   .cat-ico, .cat-card.c-gold   .cat-list li::before { color: var(--gold); background: var(--gold); }
.cat-card.c-gold   .cat-ico { background: none; }
.cat-card.c-sumire .cat-ico { color: var(--sumire-500); }
.cat-card.c-sumire .cat-list li::before { background: var(--sumire-400); }
@media (min-width: 720px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }
}
@media (min-width: 1040px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ════════ COMPARE ════════ */
.compare { background: var(--paper-2); }
.ctable-wrap { max-width: 920px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ctable { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: var(--sh-2); border: 1px solid var(--line); }
.ctable th, .ctable td { padding: 15px 16px; text-align: left; font-size: 13px; vertical-align: middle; border-bottom: 0.5px solid var(--line); }
.ctable thead th { font-family: var(--font-jp-serif); font-weight: 600; letter-spacing: 0.04em; }
.ctable thead .c-name { font-family: var(--font-lt-display); font-size: 18px; letter-spacing: 0.12em; }
.ctable thead th.sum { background: var(--sumire-500); color: #fff; }
.ctable thead th.sum .c-tag { font-family: var(--font-lt-serif); font-style: italic; font-size: 10px; letter-spacing: 0.12em; opacity: 0.85; display: block; margin-top: 2px; text-transform: uppercase; }
.ctable thead th.oth { background: var(--paper-3); color: var(--mute); font-size: 12.5px; }
.ctable thead th.feat { background: var(--ink); color: var(--paper); }
.ctable tbody td.feat { font-family: var(--font-jp-serif); color: var(--ink); background: var(--paper); font-size: 12.5px; letter-spacing: 0.02em; width: 28%; }
.ctable tbody td.sum { background: var(--sumire-50); color: var(--sumire-900); font-family: var(--font-jp-serif); }
.ctable tbody td.oth { color: var(--mute); }
.ctable tbody tr:last-child td { border-bottom: none; }
.ctable .vm { color: var(--sumire-500); font-family: var(--font-lt-display); margin-right: 6px; }
.ctable .dash { color: var(--mute-soft); }
.compare .cnote { max-width: 920px; margin: 18px auto 0; font-size: 11.5px; color: var(--mute); letter-spacing: 0.03em; line-height: 1.7; }

/* ════════ QUIZ ════════ */
.quiz { background: var(--paper); text-align: center; }
.quiz .card { max-width: 680px; margin: 0 auto; background: linear-gradient(140deg, var(--sumire-100), var(--rose-light)); border-radius: var(--r-card); padding: 46px 32px; position: relative; overflow: hidden; }
.quiz .card .qglow { position: absolute; width: 200px; height: 200px; border-radius: 999px; background: rgba(255,255,255,0.4); filter: blur(40px); top: -60px; right: -40px; }
.quiz .tagpill { position: relative; font-family: var(--font-lt-serif); font-style: italic; font-size: 11px; letter-spacing: 0.16em; color: var(--rose-deep); background: rgba(255,255,255,0.65); padding: 5px 14px; border-radius: 999px; text-transform: uppercase; }
.quiz .flowers { display: flex; justify-content: center; gap: 12px; margin: 22px 0; position: relative; }
.quiz .flowers .mark { width: 28px; height: 28px; animation: bob 4s ease-in-out infinite; }
.quiz .flowers .mark:nth-child(1){ color: var(--sumire-500); } .quiz .flowers .mark:nth-child(2){ color: var(--rose-deep); animation-delay:.3s;} .quiz .flowers .mark:nth-child(3){ color: var(--coral); animation-delay:.6s;} .quiz .flowers .mark:nth-child(4){ color: var(--sage-deep); animation-delay:.9s;} .quiz .flowers .mark:nth-child(5){ color: var(--gold); animation-delay:1.2s;}
.quiz h2 { position: relative; font-family: var(--font-jp-serif); font-weight: 700; font-size: clamp(24px,5.6vw,34px); letter-spacing: 0.05em; margin: 8px 0 10px; }
.quiz p { position: relative; margin: 0 auto; max-width: 440px; font-size: 13.5px; color: var(--ink-soft); }
.quiz .btn-q { position: relative; display: inline-block; margin-top: 24px; font-family: var(--font-jp-serif); font-size: 14px; padding: 13px 30px; border-radius: 999px; background: #fff; color: var(--sumire-700); letter-spacing: 0.06em; box-shadow: var(--sh-1); transition: transform .15s, box-shadow .2s; }
.quiz .btn-q:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }

/* ════════ FINAL CTA ════════ */
.final { background: linear-gradient(160deg, #2a1e3d, #4a3868 70%, #5e4a7e); color: var(--paper); text-align: center; overflow: hidden; }
.final .aura { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 50% at 50% 0%, rgba(201,155,170,0.3), transparent 60%); }
.final .bigflower { position: absolute; left: 50%; top: -70px; transform: translateX(-50%); width: 320px; opacity: 0.12; color: var(--sumire-200); animation: floatSlow 13s ease-in-out infinite; }
.final .wrap { position: relative; z-index: 2; }
.final .mark-lg { width: 46px; height: 46px; color: var(--sumire-200); margin: 0 auto 22px; }
.final h2 { font-family: var(--font-jp-serif); font-weight: 700; font-size: clamp(30px,7.4vw,52px); letter-spacing: 0.06em; margin: 0; color: var(--paper); line-height: 1.34; }
.final h2 .accent { color: var(--sumire-300); }
.final p { margin: 20px auto 0; max-width: 440px; color: rgba(250,246,241,0.82); font-size: 14.5px; }
.final .signup { max-width: 460px; margin: 32px auto 0; text-align: left; }
.final .signup input[type=email] { border: 1px solid rgba(250,246,241,0.26); background: rgba(250,246,241,0.07); color: var(--paper); }
.final .signup input[type=email]::placeholder { color: rgba(250,246,241,0.5); }
.final .signup input[type=email]:focus { outline: none; border-color: var(--sumire-300); box-shadow: 0 0 0 4px rgba(181,164,210,0.18); }
.final .signup .consent { color: rgba(250,246,241,0.8); }
.final .signup .consent .box { border: 1.5px solid rgba(250,246,241,0.4); background: rgba(250,246,241,0.06); }
.final .signup .consent input:checked + .box { background: var(--sumire-300); border-color: var(--sumire-300); color: var(--ink); }
.final .signup .consent a { color: var(--sumire-200); }
.final .signup .eligibility { color: rgba(250,246,241,0.62); }
.final .signup .eligibility svg { color: var(--sumire-300); }
.final .signup .btn-primary { background: var(--paper); color: var(--ink); width: 100%; }
.final .signup .btn-primary:hover:not(:disabled) { background: #fff; }
.final .promises { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin-top: 16px; font-size: 11.5px; color: rgba(250,246,241,0.62); }
.final .promises span { display: inline-flex; align-items: center; gap: 6px; }
.final .promises .star { color: var(--sumire-300); font-family: var(--font-lt-display); }
.final .done { border: 1px solid rgba(250,246,241,0.26); border-radius: 18px; padding: 26px 24px; text-align: center; background: rgba(250,246,241,0.05); }
.final .done .ttl { font-family: var(--font-jp-serif); color: var(--sumire-100); font-size: 19px; letter-spacing: 0.06em; }
.final .done p { color: rgba(250,246,241,0.84); margin: 10px auto 0; max-width: 360px; font-size: 13.5px; }
.final .done .sig { font-family: var(--font-lt-serif); font-style: italic; color: var(--sumire-300); margin-top: 14px; display: block; font-size: 15px; }

/* ════════ FOOTER ════════ */
footer { background: var(--ink); color: rgba(250,246,241,0.7); padding: 32px 0 42px; border-top: 0.5px solid rgba(250,246,241,0.14); }
.foot-top { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; }
.foot-brand .name { font-family: var(--font-lt-display); font-size: 26px; letter-spacing: 0.18em; color: var(--paper); }
.foot-brand .tg { font-family: var(--font-lt-serif); font-style: italic; font-size: 12px; color: rgba(250,246,241,0.5); margin-top: 6px; }
.foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 30px; }
.foot-links a { font-size: 12.5px; color: rgba(250,246,241,0.66); transition: color .2s; }
.foot-links a:hover { color: var(--paper); }
.foot-bot { margin-top: 36px; padding-top: 20px; border-top: 0.5px solid rgba(250,246,241,0.14);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: 11px; color: rgba(250,246,241,0.45); letter-spacing: 0.06em; }

/* ════════ REVEAL ANIMATIONS ════════ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; } .reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; } .reveal[data-d="4"] { transition-delay: .32s; }
.r-left { opacity: 0; transform: translateX(-36px); transition: opacity .8s ease, transform .8s ease; }
.r-left.in { opacity: 1; transform: none; }
.r-right { opacity: 0; transform: translateX(36px); transition: opacity .8s ease, transform .8s ease; }
.r-right.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal, .r-left, .r-right { opacity: 1 !important; transform: none !important; }
  .hero .tag, .hero .kana, .hero .whatis, .hero .catch, .hero .lead, .hero-cta, .hero .display .ch { opacity: 1 !important; transform: none !important; }
}

@media print {
  .reveal, .r-left, .r-right { opacity: 1 !important; transform: none !important; }
  html.js .hero .tag, html.js .hero .kana, html.js .hero .whatis, html.js .hero .catch,
  html.js .hero .lead, html.js .hero-cta, html.js .hero .display .ch { transform: none !important; }
  .progress, .petal-field, .marquee { display: none !important; }
}

/* ════════ WORRY BUBBLES (共感・もくもく) ════════ */
.problem .bubbles { position: relative; margin: 40px auto 8px; max-width: 1040px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.problem .bub { transform: rotate(var(--rot, 0deg)); }
.problem .bub:nth-child(1){ --rot: -4deg; } .problem .bub:nth-child(2){ --rot: 3deg; }
.problem .bub:nth-child(3){ --rot: -2deg; } .problem .bub:nth-child(4){ --rot: 4deg; }
.problem .bub:nth-child(5){ --rot: -3deg; } .problem .bub:nth-child(6){ --rot: 2deg; }
.problem .bub:nth-child(7){ --rot: -2deg; }
.problem .bub:nth-child(8){ --rot: 3deg; } .problem .bub:nth-child(9){ --rot: -3deg; }
.problem .bub:nth-child(10){ --rot: 2deg; } .problem .bub:nth-child(11){ --rot: -2deg; } .problem .bub:nth-child(12){ --rot: 4deg; }
.problem .bub-in { position: relative; font-family: var(--font-hand-casual); font-weight: 400;
  font-size: clamp(13px, 1.6vw, 17px); line-height: 1.5; letter-spacing: 0.01em; color: var(--ink-soft);
  background: #fff; border: 2px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: clamp(140px, 19vw, 200px); height: clamp(140px, 19vw, 200px); padding: 20px; box-shadow: var(--sh-1); }
.problem .bub-in::after { content: ""; position: absolute; bottom: 4px; left: 28px; width: 20px; height: 20px;
  background: #fff; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  border-bottom-left-radius: 7px; transform: rotate(56deg); }
.problem .bub-in.reveal { opacity: 0; transform: scale(.65);
  transition: opacity .5s ease, transform .55s cubic-bezier(.34,1.56,.64,1); }
.problem .bub-in.reveal.in { opacity: 1; transform: none; }
.problem .bub:nth-child(2) .bub-in { transition-delay: .06s; }
.problem .bub:nth-child(3) .bub-in { transition-delay: .12s; }
.problem .bub:nth-child(4) .bub-in { transition-delay: .18s; }
.problem .bub:nth-child(5) .bub-in { transition-delay: .24s; }
.problem .bub:nth-child(6) .bub-in { transition-delay: .30s; }
.problem .bub:nth-child(7) .bub-in { transition-delay: .36s; }
.problem .bub:nth-child(8) .bub-in { transition-delay: .42s; }
.problem .bub:nth-child(9) .bub-in { transition-delay: .48s; }
.problem .bub:nth-child(10) .bub-in { transition-delay: .54s; }
.problem .bub:nth-child(11) .bub-in { transition-delay: .60s; }
.problem .bub:nth-child(12) .bub-in { transition-delay: .66s; }
/* scattered cloud on desktop */
@media (min-width: 880px) {
  .problem .bubbles { display: block; height: 800px; }
  .problem .bub { position: absolute; }
  .problem .bub:nth-child(1){ left: 0%;  top: 40px;  }
  .problem .bub:nth-child(2){ left: 84%; top: 300px; }
  .problem .bub:nth-child(3){ left: 23%; top: 150px; }
  .problem .bub:nth-child(4){ left: 84%; top: 40px;  }
  .problem .bub:nth-child(5){ left: 0%;  top: 300px; }
  .problem .bub:nth-child(6){ left: 45%; top: 30px;  }
  .problem .bub:nth-child(7){ left: 23%; top: 410px; }
  .problem .bub:nth-child(8){ left: 65%; top: 410px; }
  .problem .bub:nth-child(9){ left: 0%;  top: 560px; }
  .problem .bub:nth-child(10){ left: 65%; top: 150px; }
  .problem .bub:nth-child(11){ left: 45%; top: 300px; }
  .problem .bub:nth-child(12){ left: 84%; top: 560px; }
}

/* handwritten core heading */
.core h2 { font-family: var(--font-hand); font-weight: 600; letter-spacing: 0.03em; }

/* ════════ RESPONSIVE ════════ */
@media (min-width: 720px) {
  .pillar-grid { grid-template-columns: repeat(3, 1fr); }
  .sgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 880px) {
  .core .cwrap { grid-template-columns: 1.05fr 0.95fr; gap: 60px; }
  .exp { grid-template-columns: 1fr 1fr; gap: 56px; }
  .exp.flip .ph-wrap { order: 2; }
  .sgrid { grid-template-columns: repeat(4, 1fr); }
}
/* ── reset desktop inline fixed-widths on tablet/mobile ── */
@media (max-width: 939px) {
  .hero-grid { width: auto !important; }
  .hero-brand { width: auto !important; max-width: 100% !important; }
  .hero .whatis { width: auto !important; max-width: 100% !important; }
  .hero .whatis .wa1 { font-size: clamp(24px, 6.6vw, 40px) !important; }
  .hero .whatis .wa1 span[style] { white-space: normal !important; }
  .compare .wrap[style] { font-family: var(--font-jp-serif) !important; }
}

@media (max-width: 540px) {
  .hero .bar-tagline { display: none; }
  section { padding: 56px 0; }
  .wrap { padding: 0 18px; }

  /* bar: push below status bar / Dynamic Island */
  header.bar { padding-top: env(safe-area-inset-top, 44px); }
  header.bar { padding-top: 44px; } /* fallback for older webkit */
  .bar-in { height: 48px; }
  .bar-cta { font-size: 10px; padding: 6px 10px; letter-spacing: 0.02em; white-space: nowrap; }

  /* hero */
  .hero { padding: 40px 0 56px; }
  .hero .catch { font-size: clamp(26px, 8vw, 40px); }
  .hero .display { font-size: clamp(60px, 26vw, 110px); }
  .hero .whatis { padding: 14px 18px; }
  .hero-points li { font-size: 14px; }
  .hero-cta { padding: 18px; }

  /* section headers */
  .sec-top { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 26px; }
  .sec-top h2 { font-size: clamp(26px, 8.2vw, 36px); }
  .sec-top .r { max-width: 100%; }

  /* answer "その諦めを..." — shrink drastically */
  .problem .answer .big { font-size: 20px !important; letter-spacing: 0.02em !important; line-height: 1.55 !important; }
  .problem .answer .big .hl { font-size: 22px !important; white-space: normal !important; }
  .problem .answer .big .mark-sumire { font-size: 1.3em !important; }

  /* bubbles: 3 per row, small circles, ~1.5 scroll tall */
  .problem .bubbles { gap: 12px; }
  .problem .bub-in { width: 100px !important; height: 100px !important; font-size: 12px !important; padding: 12px; }
  .problem .bub { transform: rotate(var(--rot, 0deg)) !important; }

  /* pillar: pnum + icon inline */
  .pillar .pnum-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .pillar .pico { margin: 0; }
  .pillar .pico svg { width: 28px; height: 28px; }

  /* hero: center-align on mobile */
  .hero-brand { text-align: center; }
  .hero-points { align-items: center; }
  .hero .lead { text-align: center; }
  .hero-cta { text-align: left; }

  /* answer: center */
  .problem .answer { text-align: center; }
  .problem .answer .big { text-align: center !important; }

  /* bubbles: center wrap, remove tail */
  .problem .bubbles { justify-content: center; }
  .problem .bub-in::after { display: none; }

  /* features: remove top gap */
  .features { padding-top: 0 !important; }

  /* feature / safety: phone ABOVE text even for flip blocks */
  .exp.flip .ph-wrap { order: -1; }
  .exp { gap: 24px; padding: 30px 0; }
  .exp .phone { width: 220px; }
  .exp .txt h3 { font-size: clamp(21px, 6.4vw, 27px); }
  .exp .txt p { font-size: 14px; }

  /* core (form) + freq stack */
  .core .cwrap { gap: 30px; }
  .core-cta { max-width: 100%; }
  .freq-card { padding: 22px; }

  /* compare table → keep scrollable */
  .compare .ctable { font-size: 12.5px; }
}