:root {
  --paper: #f6f0e8;
  --ink: #25292f;
  --navy: #15243a;
  --rose: #b84658;
  --rose-deep: #973449;
  --rose-soft: #e8cdd0;
  --gold: #b88a3b;
  --line: #c7b9a8;
  --cream: rgba(255, 251, 242, .83);
  --max: 430px;
  color-scheme: light;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #0b1320; }
body { margin: 0; color: var(--ink); background: #0b1320; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; z-index: 999; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-150%); background: #fff; border: 2px solid var(--navy); }
.skip-link:focus { transform: none; }

.lp { width: min(100%, var(--max)); margin: 0 auto; overflow: hidden; background: var(--paper); box-shadow: 0 0 38px rgba(0,0,0,.5); }
.slice { position: relative; border-bottom: 6px solid var(--navy); }
.scene { position: relative; margin: 0; overflow: hidden; background: #eee7dc; }
.scene > img { width: 100%; height: auto; }
.pos { position: absolute; z-index: 3; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, .bubble, .thought, .impact-copy, .scene-heading { font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; }
em { color: var(--rose-deep); font-style: normal; }
.bubble, .thought, .impact-copy, .narration, .post-scene-band, .chapter-band, .fact-card, .fit-card, .decision-flow, .price-panel, .final-band {
  word-break: normal;
  line-break: strict;
  overflow-wrap: normal;
  text-wrap: pretty;
}
.line { display: block; }

.ink-card { color: var(--navy); text-shadow: 0 1px 0 rgba(255,255,255,.9); }
.hero-title { position: absolute; z-index: 3; top: 4.2%; left: 5%; width: 62%; }
.hero-title .kicker { display: inline-block; margin: 0 0 4px; padding: 4px 10px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.hero-title h1 { margin: 0; font-size: clamp(26px, 7.3vw, 34px); line-height: 1.25; letter-spacing: .03em; }

.bubble { --edge: #333; margin: 0; padding: .78em 1.05em; color: #17191d; background: var(--cream); border: 1.7px solid var(--edge); border-radius: 54% 46% 51% 49% / 47% 55% 45% 53%; box-shadow: 0 3px 10px rgba(0,0,0,.14); font-size: clamp(13px, 3.5vw, 16px); font-weight: 650; line-height: 1.45; text-align: center; }
.bubble b { color: var(--rose-deep); font-size: 1.08em; }
.bubble::after { content: ""; position: absolute; width: 19px; height: 22px; background: inherit; border-color: var(--edge); }
.tail-br::after { right: 9%; bottom: -12px; clip-path: polygon(0 0,100% 0,100% 100%); border-right: 1.7px solid; transform: rotate(13deg); }
.tail-bl::after { left: 9%; bottom: -12px; clip-path: polygon(0 0,100% 0,0 100%); border-left: 1.7px solid; transform: rotate(-13deg); }
.tail-tr::after { right: 10%; top: -12px; clip-path: polygon(0 100%,100% 100%,100% 0); border-right: 1.7px solid; transform: rotate(-9deg); }
.tail-tl::after { left: 10%; top: -12px; clip-path: polygon(0 100%,100% 100%,0 0); border-left: 1.7px solid; transform: rotate(9deg); }
.bubble-soft { background: rgba(255,252,244,.80); border-style: solid; }
.bubble-quick { border-radius: 44% 56% 47% 53% / 55% 44% 56% 45%; }
.bubble-hope { background: rgba(255,247,225,.83); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
.warm { background: rgba(255,245,225,.82); border-color: #463322; }

.narration { padding: 12px 14px; color: #fff; background: rgba(21,36,58,.87); border-left: 4px solid var(--gold); box-shadow: 0 5px 16px rgba(0,0,0,.28); font-size: clamp(13px, 3.3vw, 16px); line-height: 1.55; }
.narration h2 { margin: 0 0 6px; color: #fff; font-size: clamp(21px, 5.7vw, 26px); line-height: 1.28; }
.narration p, .narration strong { margin: 0; }
.narration strong { color: #ffd480; }
.narration em { color: #ffd480; }

.scene-heading { margin: 0; color: var(--navy); font-size: clamp(22px, 5.8vw, 29px); line-height: 1.3; text-shadow: 0 1px 0 #fff, 0 0 9px rgba(255,255,255,.95); }
.scene-heading.light { color: #fff8e9; text-shadow: 0 2px 5px rgba(0,0,0,.9), 0 0 2px #000; }
.chapter-band { position: relative; z-index: 5; padding: 17px 18px 15px; color: #fff; background: linear-gradient(110deg,#111e31,var(--navy)); border-bottom: 2px solid var(--gold); }
.chapter-band::after { content: ""; position: absolute; right: 22px; bottom: -11px; width: 20px; height: 20px; background: var(--navy); border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); }
.chapter-band h2 { margin: 0; font-size: clamp(21px,5.7vw,28px); line-height: 1.35; letter-spacing: .03em; }
.chapter-band em { color: #ffd480; }
.warm-band { background: linear-gradient(110deg,#392719,#6a4526); }
.warm-band::after { background: #6a4526; }
.chapter-speech { position: relative; width: 88%; margin: 11px auto 2px; padding: 10px 15px; color: var(--navy); background: rgba(255,251,242,.84); border: 1.5px solid var(--gold); border-radius: 48% 52% 46% 54% / 55% 47% 53% 45%; font-family: "Yu Mincho","Hiragino Mincho ProN",serif; font-size: clamp(12px,3.2vw,15px); font-weight: 700; line-height: 1.45; text-align: center; }
.chapter-speech::after { content: ""; position: absolute; left: 16%; bottom: -12px; width: 20px; height: 20px; background: inherit; border-left: 1.5px solid var(--gold); clip-path: polygon(0 0,100% 0,0 100%); }
.chapter-speech b { color: var(--rose-deep); }
.chapter-speech small { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line); font-size: 12px; }
.post-scene-band { position: relative; z-index: 4; padding: 16px 18px; color: #fff; background: rgba(21,36,58,.97); border-top: 2px solid var(--gold); font-family: "Yu Mincho","Hiragino Mincho ProN",serif; font-size: clamp(15px,4vw,19px); line-height: 1.55; text-align: center; }
.post-scene-band strong { color: #ffd480; }
.correction-band { padding-top: 21px; }
.correction-band > p:last-child { margin: 11px 0 0; }
.post-bubble { position: relative; width: 78%; margin: 0 auto; padding: 9px 13px; color: var(--navy); background: rgba(255,251,242,.84); border: 1.5px solid var(--gold); border-radius: 52% 48% 46% 54% / 49% 54% 46% 51%; font-size: clamp(13px,3.5vw,16px); font-weight: 750; line-height: 1.45; }
.post-bubble::before { content: ""; position: absolute; left: 18%; top: -12px; width: 20px; height: 20px; background: inherit; border-left: 1.5px solid var(--gold); clip-path: polygon(0 100%,100% 100%,0 0); }
.sfx { z-index: 4; color: var(--rose-deep); font-family: "Yu Gothic", sans-serif; font-size: clamp(21px, 6vw, 30px); font-weight: 900; letter-spacing: -.05em; -webkit-text-stroke: 1px #fff; text-shadow: 2px 3px 0 rgba(21,36,58,.85); transform: rotate(-9deg); }
.sfx-ping { color: var(--gold); font-size: clamp(18px, 5vw, 25px); }
.light-sfx { color: #ffd377; -webkit-text-stroke: .7px #402c1b; text-shadow: 2px 3px 0 rgba(0,0,0,.72); }

.thought { margin: 0; padding: 14px 18px; background: rgba(255,252,245,.86); border: 2px dotted var(--navy); border-radius: 48% 52% 45% 55%; color: var(--navy); font-size: clamp(14px,3.6vw,17px); font-weight: 700; line-height: 1.5; text-align: center; }
.thought::before, .thought::after { content: ""; position: absolute; border: 1.5px solid var(--navy); border-radius: 50%; background: rgba(255,252,245,.8); }
.thought::before { width: 11px; height: 11px; right: 12%; bottom: -16px; }
.thought::after { width: 6px; height: 6px; right: 8%; bottom: -27px; }
.impact-copy { padding: 11px 14px; color: #fff; background: rgba(21,36,58,.86); border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5); text-align: center; }
.impact-copy p { margin: 0 0 2px; font-size: clamp(12px,3.1vw,15px); }
.impact-copy h2 { margin: 0; font-size: clamp(24px,6.4vw,32px); line-height: 1.18; }
.impact-copy em { color: #ffd480; font-size: 1.18em; }
.notebook-list { margin: 0; padding: 0; list-style: none; counter-reset: item; color: var(--navy); font-size: clamp(12px,3.2vw,16px); font-weight: 800; line-height: 1.55; transform: rotate(-3deg); }
.notebook-list li { counter-increment: item; margin: 5px 0; padding: 4px 8px; background: rgba(255,255,255,.42); border-bottom: 1px solid var(--rose); }
.notebook-list li::before { content: counter(item); display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 7px; border-radius: 50%; color: #fff; background: var(--rose); font-size: 12px; }

.fiction-note, .facts-label, .source-note { margin: 0; padding: 8px 12px; text-align: center; font-size: 12px; line-height: 1.45; }
.fiction-note { color: #f4e5d5; background: var(--navy); letter-spacing: .04em; }
.facts-label { color: #fff; background: linear-gradient(90deg,var(--navy),#33445b); border-bottom: 2px solid var(--gold); font-weight: 800; letter-spacing: .13em; }
.source-note { color: #fff; background: #33445b; }
.strong-note { color: var(--navy); background: #efe3d7; border-top: 1px solid var(--gold); font-weight: 800; }

.test-list { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.test-list li { padding: 5px 8px; border: 1px solid var(--rose-deep); border-radius: 999px; color: var(--navy); background: rgba(255,248,241,.86); font-size: clamp(12px,2.9vw,14px); font-weight: 800; }
.bridge-band { padding: 24px 22px; color: #fff; background: linear-gradient(135deg,var(--navy),#273c57); text-align: center; }
.bridge-band p { margin: 0 0 16px; font-family: "Yu Mincho",serif; font-size: clamp(17px,4.7vw,23px); line-height: 1.55; }
.bridge-band strong { color: #ffd480; }

.cta { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 58px; padding: 12px 18px; border-radius: 10px; color: #fff; background: linear-gradient(180deg,#a83d52,var(--rose-deep)); box-shadow: 0 5px 0 #752438, 0 9px 20px rgba(0,0,0,.25); font-size: clamp(16px,4.2vw,20px); font-weight: 900; line-height: 1.25; text-decoration: none; }
.cta span { margin-top: 4px; font-size: 12px; font-weight: 600; opacity: .9; }
.cta:focus-visible, .footer a:focus-visible, .sticky-cta a:focus-visible { outline: 3px solid #2d7cff; outline-offset: 3px; }
.cta:active { transform: translateY(3px); box-shadow: 0 2px 0 #752438; }

.fact-heading { color: var(--navy); text-shadow: 0 1px 0 #fff, 0 0 12px rgba(255,255,255,.9); }
.fact-heading p { margin: 0 0 4px; font-size: clamp(12px,3vw,14px); font-weight: 800; }
.fact-heading h2 { margin: 0; font-size: clamp(23px,6vw,30px); line-height: 1.24; }
.fact-heading.center { text-align: center; }
.fact-card { padding: 10px 12px; color: #fff; background: rgba(21,36,58,.84); border: 1px solid rgba(184,138,59,.8); border-radius: 12px; box-shadow: 0 4px 13px rgba(0,0,0,.2); }
.fact-card h3 { display: inline-block; margin: 0 0 4px; padding-bottom: 2px; color: #ffd480; border-bottom: 1px solid currentColor; font-size: clamp(15px,4vw,19px); }
.fact-card p { margin: 0; font-size: clamp(12px,2.85vw,14px); font-weight: 650; line-height: 1.5; }
.fact-card strong { color: #ffe0a2; font-size: 1.12em; }
.fact-card small { font-size: 12px; }
.fact-card .company-name { font-size: 12px; white-space: nowrap; }

.interview-points { margin: 0; padding: 0; list-style: none; }
.interview-points li { display: flex; align-items: center; gap: 9px; min-width: 43%; padding: 8px 10px; color: var(--navy); background: rgba(255,252,245,.88); border-left: 4px solid var(--rose); box-shadow: 0 3px 10px rgba(0,0,0,.12); font-size: clamp(12px,3.2vw,16px); font-weight: 750; line-height: 1.35; }
.interview-points b { display: grid; place-items: center; flex: 0 0 27px; height: 27px; border-radius: 50%; color: #fff; background: var(--rose); }
.fit-card { padding: 12px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.fit-card h3 { margin: 0 0 7px; font-size: clamp(15px,4vw,19px); }
.fit-card ul { margin: 0; padding-left: 1.15em; font-size: clamp(12px,2.9vw,14px); font-weight: 650; line-height: 1.65; }
.fit-yes { color: #fff; background: rgba(21,36,58,.87); }
.fit-yes h3 { color: #ffd480; }
.fit-no { color: var(--ink); background: rgba(255,251,242,.9); border: 1px solid var(--line); }
.decision-flow { display: grid; grid-template-columns: 1fr; align-items: center; gap: 4px; padding: 16px 18px 18px; color: #fff; background: var(--navy); font-size: clamp(12px,2.9vw,14px); font-weight: 750; line-height: 1.45; text-align: center; }
.decision-flow b { color: var(--gold); font-size: 1.25em; line-height: 1; }
.decision-flow strong { color: #ffd480; }

.price-panel { padding: 18px 16px; color: var(--navy); background: rgba(255,251,243,.9); border: 2px solid var(--gold); border-radius: 18px; box-shadow: 0 9px 24px rgba(21,36,58,.2); text-align: center; }
.price-panel > p:first-child { display: inline-block; margin: 0; padding: 3px 10px; color: #fff; background: var(--navy); font-size: 12px; font-weight: 800; }
.price-panel h2 { margin: 7px 0 11px; font-size: clamp(24px,6.2vw,31px); line-height: 1.22; }
.price-main { padding: 9px 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.price-main span { display: block; color: var(--rose-deep); font-weight: 900; }
.price-main strong { display: block; color: var(--rose-deep); font-size: clamp(34px,9.5vw,47px); line-height: 1; letter-spacing: -.04em; }
.price-main small { font-size: .35em; letter-spacing: 0; }
.price-sub { display: flex; justify-content: center; gap: 14px; margin: 8px 0; font-size: clamp(12px,3vw,14px); }
.price-sub b { color: var(--rose-deep); }
.screening { margin: 8px 0; padding: 6px; color: #fff; background: var(--navy); font-weight: 900; }
.refund { margin: 10px 0; padding: 10px; border: 2px dashed var(--rose); background: rgba(232,205,208,.46); }
.refund span { display: block; font-size: 12px; font-weight: 800; }
.refund strong { display: block; margin-top: 3px; color: var(--rose-deep); font-size: clamp(17px,4.7vw,23px); line-height: 1.35; }
.price-panel > small { display: block; font-size: 12px; line-height: 1.5; }

.final-band { padding: 30px 22px 38px; color: #fff; background: linear-gradient(160deg,#203753,var(--navy) 55%,#0d1725); text-align: center; border-top: 3px solid var(--gold); }
.final-kicker { display: inline-block; margin: 0 0 9px; padding: 4px 9px; color: #ffe1a6; border: 1px solid var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.final-band h2 { margin: 0 0 21px; font-size: clamp(22px,6vw,30px); line-height: 1.5; }
.final-band h2 em { color: #ffd480; }
.final-note { margin: 17px 0 0; color: #cbd4df; font-size: 12px; line-height: 1.6; }

.footer { padding: 26px 20px 105px; color: #d6dde6; background: #090f19; font-size: 12px; line-height: 1.7; }
.footer nav { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 17px 0; }
.footer a { color: #fff; text-underline-offset: 3px; }
.footer small { color: #aab4c0; font-size: 12px; }
.condition-link { display: inline-block; margin-top: 10px; color: #542032; font-size: 13px; font-weight: 800; text-underline-offset: 3px; }
.condition-link:focus-visible { outline: 3px solid #2d7cff; outline-offset: 3px; }
.sticky-cta { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; width: min(100%, var(--max)); margin: 0 auto; padding: 8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background: rgba(9,15,25,.92); backdrop-filter: blur(7px); border-top: 1px solid rgba(255,255,255,.18); }
.sticky-cta a { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 54px; border-radius: 9px; color: #fff; background: linear-gradient(#a83d52,var(--rose-deep)); box-shadow: 0 4px 0 #6f2034; font-size: 16px; font-weight: 900; line-height: 1.25; text-decoration: none; }
.sticky-cta span { font-size: 12px; font-weight: 650; }

/* Scene-specific placement. Percentages follow the verified blank areas of each generated slice. */
.s01-nana { top: 57%; left: 61%; width: 35%; }
.s01-aki { top: 50%; left: 4%; width: 32%; }
.s01-sfx { top: 74%; left: 74%; }
.s02-head { top: 3%; left: 4%; width: 50%; }
.s02-ping1 { top: 49%; left: 67%; }
.s02-ping2 { top: 73%; left: 10%; transform: rotate(8deg); }
.s03-nana { top: 25%; left: 3%; width: 42%; }
.s03-aki { top: 30%; left: 64%; width: 31%; }
.s04-thought { top: 4%; left: 50%; width: 47%; }
.s04-click { top: 51%; left: 68%; }
.s04-impact { top: 57%; left: 0; width: 100%; }
.s04-list { top: 75%; left: 56%; width: 38%; }
.s05-sfx { top: 5%; left: 67%; }
.s05-sato { top: 39%; left: 49%; width: 47%; }
.s05-mori { top: 57%; left: 4%; width: 46%; }
.s05-kuroda { top: 73%; left: 4%; width: 42%; }
.s06-head { top: 3%; left: 46%; width: 50%; }
.s06-list { top: 38%; left: 5%; width: 45%; }
.s06-aki { top: 54%; left: 52%; width: 43%; }
.s07-sfx { top: 54%; left: 12%; }
.s07-narration { top: 78%; left: 3%; width: 46%; }
.s08-title { top: 3%; left: 4%; width: 52%; }
.s08-nana1 { top: 13%; left: 4%; width: 38%; }
.s08-aki { top: 29%; left: 5%; width: 34%; }
.s09-nana { top: 4%; left: 3%; width: 42%; }
.s09-aki { top: 54%; left: 2%; width: 41%; }
.s10-title { top: 4%; left: 4%; width: 45%; }
.s10-learn { top: 23%; left: 51%; width: 45%; }
.s10-talk { top: 46%; left: 4%; width: 47%; }
.s10-connect { top: 76%; left: 49%; width: 47%; }
.s11-title { top: 3%; left: 53%; width: 44%; }
.s11-company { top: 30%; left: 50%; width: 47%; }
.s11-estate { top: 53%; left: 4%; width: 46%; }
.s11-salon { top: 68.5%; left: 49%; width: 48%; }
.s12-title { top: 3%; left: 52%; width: 45%; }
.s12-p1 { top: 24%; left: 52%; width: 44%; }
.s12-p2 { top: 44%; left: 4%; width: 43%; }
.s12-p3 { top: 63%; left: 52%; width: 44%; }
.s12-p4 { top: 82%; left: 4%; width: 43%; }
.s13-title { top: 4%; left: 24%; width: 52%; }
.s13-yes { top: 24%; left: 4%; width: 44%; }
.s13-no { top: 24%; left: 52%; width: 44%; }
.s14-panel { top: 6%; left: 8%; width: 84%; }
.s15-aki { top: 7%; left: 4%; width: 42%; }

@media (max-width: 410px) {
  .s14-panel { top: 1%; }
}

@media (min-width: 700px) {
  body { padding: 20px 0; }
  .sticky-cta { bottom: 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; }
}

@media (max-width: 370px) {
  .bubble { padding: .65em .8em; font-size: 12px; line-height: 1.37; }
  .fact-card { padding: 8px 9px; }
  .fact-card p { font-size: 12px; }
  .fit-card { padding: 9px; }
  .price-panel { padding: 13px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  html, body { background: #fff; }
  body { padding: 0; }
  .lp { box-shadow: none; }
  .sticky-cta, .skip-link { display: none; }
  .footer { padding-bottom: 25px; }
}