/* M PLUS Rounded 1c (SIL OFL 1.1), served from this site: only the characters
   this page uses (tools/marketing/subset_lp_font.sh). As in the app, there are
   only Regular and Medium; bold headings are drawn from Medium. */
@font-face { font-family: "Pojipo Rounded"; src: url("/assets/fonts/mplus-rounded-1c-400.lp.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pojipo Rounded"; src: url("/assets/fonts/mplus-rounded-1c-500.lp.woff") format("woff"); font-weight: 500; font-display: swap; }
:root {
  --cream: #fffdf6;
  --cream-deep: #fff7e6;
  --yellow: #ffd66b;
  --yellow-soft: #ffe8a8;
  --gold-ink: #8a5c00;
  --ink: #5b5448;
  --ink-soft: #7a7062;
  --line: rgba(91, 84, 72, 0.13);
  --shadow: 0 28px 70px rgba(101, 79, 38, 0.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "Pojipo Rounded", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif; line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 50; transform: translateY(-160%); background: #fff; padding: 10px 16px; border-radius: 12px; }
.skip-link:focus { transform: none; }
.site-header { width: min(1200px, calc(100% - 40px)); height: 78px; margin: 0 auto; display: flex; align-items: center; gap: 34px; position: relative; z-index: 20; }
.wordmark { display: block; line-height: 0; }
.wordmark img { height: 44px; width: auto; display: block; }
.header-nav { display: flex; gap: 28px; margin-left: auto; }
.header-nav a { text-decoration: none; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.header-nav a:hover { color: var(--gold-ink); }
.lang-switch { text-decoration: none; border: 1px solid var(--line); border-radius: 999px; min-width: 44px; height: 34px; padding: 0 12px; display: grid; place-items: center; background: rgba(255,255,255,.72); font-size: 12px; font-weight: 800; }
.hero { min-height: 720px; width: min(1320px, calc(100% - 32px)); margin: 0 auto; padding: clamp(54px, 7vw, 92px) clamp(24px, 6vw, 90px); border-radius: 44px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 6vw, 90px); position: relative; overflow: hidden; background: linear-gradient(145deg, #fff9e9 0%, #f7efcf 42%, #cce4ef 100%); }
.hero::before { content: ""; position: absolute; inset: auto -8% -32% 38%; height: 64%; border-radius: 50% 50% 0 0; background: linear-gradient(155deg, #aac66b 0%, #5f872e 100%); transform: rotate(-4deg); opacity: .54; }
.hero-copy { position: relative; z-index: 3; }
.eyebrow { margin: 0 0 14px; color: var(--gold-ink); font-size: 13px; font-weight: 800; letter-spacing: .14em; }
.hero h1, .section h2, .feature-copy h3 { text-wrap: balance; }
h1, h2, h3, .eyebrow, .hero-note, .promise-list strong { word-break: keep-all; overflow-wrap: anywhere; }
.nw { white-space: nowrap; }
@supports (word-break: auto-phrase) { p, li, summary, small { word-break: auto-phrase; } }
.hero h1 { margin: 0 0 24px; font-size: clamp(40px, 4.3vw, 60px); line-height: 1.28; letter-spacing: -.045em; color: #50493e; font-weight: 800; }
.hero-lead { margin: 0 0 30px; max-width: 550px; font-size: clamp(16px, 1.5vw, 20px); line-height: 2; color: var(--ink-soft); }
.store-badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.store-badges a { display: block; line-height: 0; }
.store-badges img { height: 48px; width: auto; display: block; }
.availability { margin: 12px 0 0; color: var(--ink-soft); font-size: 12px; }
.hero-scene { min-height: 590px; position: relative; z-index: 2; }
.phone { position: relative; border: 8px solid rgba(255,255,255,.94); border-radius: 42px; overflow: hidden; background: #fff; box-shadow: var(--shadow); line-height: 0; }
.phone::after { content: ""; position: absolute; inset: 0; border-radius: 33px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); pointer-events: none; }
.phone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-hero { width: min(340px, 65%); height: 660px; margin: 0 auto; transform: rotate(3deg); }
.hero-note { position: absolute; z-index: 4; left: -7%; top: 17%; background: rgba(255,255,255,.9); backdrop-filter: blur(14px); padding: 17px 22px; border-radius: 24px 24px 24px 6px; box-shadow: 0 18px 38px rgba(65,77,76,.15); font-size: 14px; font-weight: 700; line-height: 1.65; }
.sky-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.orb-one { width: 140px; height: 140px; right: 3%; top: 10%; background: rgba(255,232,168,.75); }
.orb-two { width: 76px; height: 76px; left: 4%; bottom: 17%; background: rgba(255,255,255,.42); }
.section { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 120px 0; }
.section-intro { max-width: 720px; margin: 0 auto 54px; text-align: center; }
.section h2 { margin: 0; font-size: clamp(32px, 3.8vw, 52px); line-height: 1.4; letter-spacing: -.035em; color: #50493e; }
.section-intro > p:last-child { color: var(--ink-soft); font-size: 16px; margin: 18px auto 0; max-width: 660px; }
.moment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.moment-card { min-height: 230px; padding: 30px 26px; border: 1px solid var(--line); border-radius: 30px; background: #fff; box-shadow: 0 15px 45px rgba(116,94,52,.07); }
.moment-card:nth-child(2) { background: #fff9e8; }
.moment-card:nth-child(3) { background: #f1f8ef; }
.moment-card:nth-child(4) { background: #f2f1fb; }
.moment-card > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--yellow-soft); color: var(--gold-ink); }
.moment-card > span svg { width: 26px; height: 26px; display: block; }
.moment-card h3 { margin: 24px 0 8px; font-size: 18px; }
.moment-card p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.sky-story { width: min(1320px, calc(100% - 32px)); padding: clamp(70px, 8vw, 110px); border-radius: 44px; display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(36px, 6vw, 90px); align-items: center; background: #31405b; color: #f8f3e8; overflow: hidden; }
.sky-story h2 { color: #fff9ed; font-size: clamp(30px, 3.2vw, 44px); }
.sky-copy > p:not(.eyebrow):not(.fine-print) { font-size: 17px; line-height: 2; }
.sky-copy .eyebrow { color: #f0c666; }
.fine-print { font-size: 12px; color: #d8d6d1; margin-top: 20px; }
.season-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: center; }
.season-strip figure { margin: 0; position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 20px 45px rgba(0,0,0,.26); transform: translateY(16px); }
.season-strip figure:nth-child(even) { transform: translateY(-16px); }
.season-strip img { display: block; width: 100%; aspect-ratio: .46; object-fit: cover; object-position: center 58%; }
.season-strip figcaption { position: absolute; bottom: 11px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.86); color: #554f47; font-size: 12px; font-weight: 800; white-space: nowrap; }
.features { padding-bottom: 70px; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; margin: 40px 0 82px; border-radius: 40px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(115,88,41,.08); }
.feature-row.reverse .feature-copy { order: 2; }
.feature-row.reverse .feature-visual { order: 1; }
.feature-copy { padding: clamp(42px, 6vw, 82px); align-self: center; }
.feature-no { display: inline-flex; align-items: center; justify-content: center; min-width: 50px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--cream-deep); color: var(--gold-ink); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.feature-copy h3 { margin: 20px 0; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.45; letter-spacing: -.03em; }
.feature-copy > p { color: var(--ink-soft); font-size: 16px; line-height: 2; }
.feature-copy ul { list-style: none; padding: 0; margin: 26px 0 0; }
.feature-copy li { position: relative; padding-left: 26px; margin: 11px 0; color: var(--ink-soft); font-size: 13px; }
.feature-copy li::before { content: ""; width: 8px; height: 8px; position: absolute; left: 0; top: .72em; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255,214,107,.2); }
.feature-visual { min-height: 620px; position: relative; display: grid; place-items: end center; overflow: hidden; padding: 56px 60px 0; }
.feature-visual.peach { background: linear-gradient(150deg, #fff1e5, #ffd3b8); }
.feature-visual.night { background: radial-gradient(circle at 50% 18%, #6b7396, #111f4b 68%); }
.feature-visual.mint { background: linear-gradient(150deg, #eaf8ef, #bfe8d4); }
.feature-visual.lavender { background: linear-gradient(150deg, #f1edfb, #d9ccf0); }
.feature-visual .phone { width: min(340px, 86%); height: 590px; border-radius: 36px 36px 0 0; border-bottom: 0; transform: translateY(34px); }
.feature-visual .phone::after { border-radius: 28px 28px 0 0; }
.feature-visual .phone img { object-position: top; }
.feature-visual .room-phone img { object-position: center; }
.poji-sticker { position: absolute; z-index: 4; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(87,65,27,.2)); }
.poji-sticker.reading { width: 158px; right: 18px; bottom: 30px; }
.poji-sticker.happy { width: 130px; left: 22px; bottom: 38px; }
.calm-section { width: min(1320px, calc(100% - 32px)); border-radius: 44px; padding: clamp(60px, 8vw, 110px); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(50px, 8vw, 110px); background: #1c1b23; color: #ece5d8; overflow: hidden; }
.calm-visual { min-height: 610px; position: relative; display: grid; place-items: center; }
.calm-visual .phone { width: 330px; height: 600px; border-color: rgba(255,255,255,.28); }
.calm-visual .phone img { object-position: top; }
.moon-glow { position: absolute; width: min(430px, 100%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,233,168,.24), rgba(107,90,42,.05) 52%, transparent 70%); }
.sleeping-poji { position: absolute; width: 150px; right: 1%; bottom: 4%; filter: drop-shadow(0 18px 28px rgba(0,0,0,.3)); }
.calm-copy h2 { color: #fff8eb; }
.calm-copy > p:not(.eyebrow) { color: #cfc7bb; font-size: 16px; line-height: 2; }
.calm-copy .eyebrow { color: #f0c666; }
.promise-list { margin-top: 34px; display: grid; gap: 22px; }
.promise-list > div { display: flex; gap: 16px; align-items: flex-start; }
.promise-list > div > span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #1c1b23; background: #e9c462; flex: 0 0 28px; }
.promise-list > div > span::after { content: "✓"; font-size: 14px; font-weight: 800; }
.promise-list p { margin: 0; }
.promise-list strong, .promise-list small { display: block; }
.promise-list strong { color: #fff8eb; font-size: 16px; }
.promise-list small { margin-top: 4px; color: #b4ab9c; font-size: 13px; line-height: 1.7; }
.widget-section { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 80px; background: linear-gradient(140deg, #fff8e8, #eef6e8); border: 1px solid var(--line); border-radius: 40px; padding: clamp(46px, 7vw, 86px); }
.widget-copy h2 { font-size: clamp(28px, 3vw, 40px); }
.widget-copy p:not(.eyebrow) { color: var(--ink-soft); line-height: 2; }
.widget-section > img { width: 100%; max-height: 360px; object-fit: contain; filter: drop-shadow(0 22px 34px rgba(80,76,60,.16)); }
.faq-list { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 25px 54px 25px 0; position: relative; font-size: 17px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 24px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cream-deep); color: var(--gold-ink); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: -4px 60px 26px 0; color: var(--ink-soft); font-size: 14px; }
.download { min-height: 410px; border-radius: 44px; padding: 64px 8%; display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; gap: 70px; background: linear-gradient(135deg, #ffe9a8, #fff7e6 45%, #dcebd2); overflow: hidden; }
.download-art { align-self: end; line-height: 0; position: relative; }
.download-art::before { content: ""; position: absolute; width: 360px; height: 180px; left: 50%; bottom: -55px; transform: translateX(-50%); border-radius: 50%; background: rgba(105,136,52,.35); filter: blur(4px); }
.download-art img { position: relative; width: 280px; display: block; margin: 0 auto -64px; filter: drop-shadow(0 20px 25px rgba(93,68,18,.18)); }
.download h2 { font-size: clamp(40px, 5vw, 64px); }
.download p:not(.eyebrow) { color: var(--ink-soft); font-size: 17px; }
.site-footer { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 50px 0 40px; display: grid; grid-template-columns: 1fr auto; gap: 28px 40px; align-items: center; color: var(--ink-soft); }
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.footer-brand img { height: 38px; width: auto; display: block; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px 24px; }
.site-footer nav a { text-decoration: none; font-size: 12px; }
.site-footer > small { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 24px; font-size: 11px; }
.hero-copy, .hero-scene { animation: lp-rise .7s ease-out both; }
.hero-scene { animation-delay: .08s; }
@keyframes lp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .hero-copy, .hero-scene { animation: none; } }
@media (max-width: 920px) {
  .header-nav { display: none; } .lang-switch { margin-left: auto; }
  .hero { grid-template-columns: 1fr; padding-top: 60px; } .hero-copy { text-align: center; } .hero-lead { margin-left: auto; margin-right: auto; } .hero .store-badges { justify-content: center; } .availability { text-align: center; }
  .hero-scene { min-height: 540px; } .phone-hero { height: 580px; } .hero-note { left: 9%; }
  .moment-grid { grid-template-columns: 1fr 1fr; } .sky-story { grid-template-columns: 1fr; } .sky-copy { max-width: 700px; }
  .feature-row, .feature-row.reverse { grid-template-columns: 1fr; } .feature-row.reverse .feature-copy, .feature-row.reverse .feature-visual { order: initial; } .feature-visual { min-height: 570px; }
  .calm-section { grid-template-columns: 1fr; } .calm-copy { max-width: 700px; margin: 0 auto; } .widget-section { grid-template-columns: 1fr; gap: 36px; }
  .download { grid-template-columns: .8fr 1.2fr; } .site-footer { grid-template-columns: 1fr; } .site-footer nav { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .site-header { width: calc(100% - 28px); height: 66px; } .wordmark img { height: 36px; }
  .hero { width: calc(100% - 20px); min-height: auto; border-radius: 30px; padding: 50px 20px 0; } .hero h1 { font-size: clamp(32px, 9.4vw, 56px); } .hero-lead { font-size: 15px; }
  .store-badges { justify-content: center; gap: 8px; } .store-badges img { height: 42px; } .hero-scene { min-height: 500px; margin-top: 12px; } .phone-hero { width: 260px; height: 520px; } .hero-note { left: 0; top: 14%; font-size: 12px; padding: 13px 16px; }
  .section { width: calc(100% - 28px); padding: 86px 0; } .section-intro { margin-bottom: 36px; } .section h2 { font-size: 30px; }
  .moment-grid { grid-template-columns: 1fr; } .moment-card { min-height: auto; padding: 24px; display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; } .moment-card h3 { margin: 1px 0 4px; } .moment-card p { grid-column: 2; }
  .sky-story { width: calc(100% - 20px); padding: 62px 20px; border-radius: 30px; } .season-strip { grid-template-columns: 1fr 1fr; gap: 10px; } .season-strip figure, .season-strip figure:nth-child(even) { transform: none; border-radius: 18px; } .season-strip img { aspect-ratio: .62; } .season-strip figcaption { bottom: 7px; padding: 3px 8px; font-size: 10px; }
  .feature-row { margin: 28px 0 46px; border-radius: 30px; } .feature-copy { padding: 34px 24px; } .feature-copy h3 { font-size: 27px; } .feature-visual { min-height: 500px; padding: 42px 28px 0; } .feature-visual .phone { width: 270px; height: 500px; } .poji-sticker.reading { width: 120px; right: 4px; } .poji-sticker.happy { width: 104px; left: 2px; }
  .calm-section { width: calc(100% - 20px); border-radius: 30px; padding: 62px 22px; } .calm-visual { min-height: 520px; } .calm-visual .phone { width: 270px; height: 520px; } .sleeping-poji { width: 110px; right: -3%; }
  .widget-section { padding: 44px 24px; border-radius: 30px; }
  .download { width: calc(100% - 20px); grid-template-columns: 1fr; text-align: center; padding: 60px 24px 0; border-radius: 30px; } .download > div:last-child { order: 1; } .download-art { order: 2; } .download-art img { margin-bottom: -58px; }
  .site-footer { width: calc(100% - 36px); }
}

/* Editorial pass: flatter surfaces, tighter corners, fewer floating cards. */
:root { --shadow: 0 14px 34px rgba(75, 62, 40, 0.11); }
.hero {
  border-radius: 18px;
  border: 1px solid rgba(91, 84, 72, 0.12);
  background: #f6f2e5;
}
.hero::before { opacity: .36; }
.sky-orb { display: none; }
.phone { border-width: 5px; border-radius: 28px; box-shadow: var(--shadow); }
.phone::after { border-radius: 23px; }
.hero-note {
  border-radius: 12px 12px 12px 3px;
  box-shadow: 0 8px 22px rgba(65, 77, 76, .12);
}
.section { padding-top: 96px; padding-bottom: 96px; }
.section h2 { letter-spacing: -.018em; }
.moment-grid {
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.moment-card,
.moment-card:nth-child(n) {
  min-height: 184px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.moment-card:last-child { border-right: 0; }
.moment-card > span { border-radius: 8px; background: #f3ead0; }
.sky-story { border-radius: 18px; background: #303c53; }
.season-strip figure,
.season-strip figure:nth-child(n) {
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}
.season-strip figcaption { border-radius: 4px; }
.feature-row {
  min-height: 600px;
  border-radius: 12px;
  border-color: rgba(91, 84, 72, .18);
  box-shadow: none;
}
.feature-no {
  min-width: 0;
  height: auto;
  padding: 0 0 5px;
  border-radius: 0;
  border-bottom: 2px solid #d9ad49;
  background: transparent;
}
.feature-visual.peach { background: #f4e4d7; }
.feature-visual.night { background: #17234a; }
.feature-visual.mint { background: #dcefe4; }
.feature-visual.lavender { background: #e8e3f2; }
.feature-visual .phone { border-radius: 24px 24px 0 0; }
.feature-visual .phone::after { border-radius: 19px 19px 0 0; }
.calm-section { border-radius: 18px; }
.calm-visual .phone { border-radius: 26px; }
.widget-section {
  border-radius: 12px;
  background: #f3f1e7;
}
.download {
  border-radius: 18px;
  border: 1px solid rgba(91, 84, 72, .13);
  background: #f3edd1;
}

@media (max-width: 920px) {
  .moment-grid { grid-template-columns: 1fr 1fr; }
  .moment-card:nth-child(2) { border-right: 0; }
  .moment-card:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .hero, .sky-story, .calm-section, .download { border-radius: 14px; }
  .widget-section, .feature-row { border-radius: 10px; }
  .moment-grid { grid-template-columns: 1fr; }
  .moment-card,
  .moment-card:nth-child(n) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .moment-card:last-child { border-bottom: 0; }
  .season-strip figure,
  .season-strip figure:nth-child(n) { border-radius: 5px; }
}

/* Main visual (2026-10-16, the owner's design): the copy and the phone over a
   full-bleed painted meadow at sunrise. One picture, cut twice: wide for
   desktops, tall for phones (assets/lp/hero-bg-pc.webp / hero-bg-sp.webp). */
.hero {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  min-height: 0;
  padding: clamp(40px, 5vw, 64px) max(24px, calc((100% - 1080px) / 2)) clamp(64px, 8vw, 110px);
  background: #f6f2e5 url("/assets/lp/hero-bg-pc.webp") center bottom / cover no-repeat;
}
.hero::before { display: none; }
@media (max-width: 920px) {
  .hero { padding-top: 56px; background-image: url("/assets/lp/hero-bg-sp.webp"); background-position: center top; }
}
@media (max-width: 640px) {
  .hero { width: 100%; border-radius: 0; padding: 44px 20px 48px; }
}

/* 「こんなとき、Poji がいます。」 (2026-10-16, the owner's design): one painted
   day from sunrise to the moon across the top, a gold path joining four
   painted circles, flowers in the bottom corners. */
.moments {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 9vw, 120px) max(20px, calc((100% - 1160px) / 2)) clamp(90px, 10vw, 140px);
  background: #f8f3e4 url("/assets/lp/moments-bg-pc.webp") center top / max(100%, 1500px) auto no-repeat;
}
.moments::before, .moments::after {
  content: ""; position: absolute; bottom: 0; width: min(36vw, 520px); aspect-ratio: 1000 / 389;
  background: center bottom / contain no-repeat; pointer-events: none; z-index: 0;
}
.moments::before { left: 0; background-image: url("/assets/lp/moments-flowers-left.webp"); }
.moments::after { right: 0; background-image: url("/assets/lp/moments-flowers-right.webp"); }
.moments .section-intro { position: relative; z-index: 1; margin-bottom: max(120px, calc(max(100vw, 1500px) * .2733 - 205px)); }
.moments .eyebrow::before, .moments .eyebrow::after { content: "—"; margin: 0 .6em; opacity: .8; }
.moments .moment-grid { position: relative; z-index: 1; border: 0; }
.moments .moment-card, .moments .moment-card:nth-child(n) {
  min-height: 0; padding: 0 22px 8px; text-align: center; border: 0;
  border-right: 1px solid rgba(200, 144, 30, .28); background: transparent;
}
.moments .moment-card:last-child { border-right: 0; }
.moment-icon { width: 112px; height: 112px; display: block; margin: -56px auto 10px; position: relative; z-index: 2; }
.moments .moment-card > .moment-num { width: auto; height: auto; display: block; place-items: initial; border-radius: 0; background: none; color: var(--gold-ink); font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.moments .moment-card h3 { margin: 6px 0 12px; font-size: 22px; }
.moments .moment-card p { font-size: 15px; line-height: 1.9; }
.moment-path { position: absolute; left: 0; right: 0; top: -20px; height: 40px; z-index: 1; }
.moment-path svg { width: 100%; height: 100%; display: block; overflow: visible; }
.moment-path path { fill: none; stroke: #c8901e; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.moment-path i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #c8901e; transform: translate(-50%, -50%); }
.moment-path i:nth-of-type(1) { left: 25%; top: 60%; }
.moment-path i:nth-of-type(2) { left: 50%; top: 40%; }
.moment-path i:nth-of-type(3) { left: 75%; top: 60%; }
@media (max-width: 920px) {
  .moments { background-image: url("/assets/lp/moments-bg-sp.webp"); background-position: center bottom; background-size: 100% auto; padding-bottom: min(64vw, 440px); }
  .moments .section-intro { margin-bottom: 40px; }
  .moments .moment-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .moment-path { display: none; }
  .moments .moment-card, .moments .moment-card:nth-child(n) {
    display: grid; grid-template-columns: 84px 1fr; column-gap: 18px; align-items: center; text-align: left;
    padding: 16px 0; border-right: 0; border-bottom: 1px solid rgba(200, 144, 30, .22);
  }
  .moments .moment-card:last-child { border-bottom: 0; }
  .moment-icon { width: 84px; height: 84px; margin: 0; grid-row: span 3; }
  .moments .moment-card h3 { margin: 2px 0 4px; font-size: 19px; }
  .moments .moment-card p { grid-column: 2; font-size: 14px; }
  .moments::before, .moments::after { display: none; }
}

/* 「空は、ほんとうの時刻と季節に。」 (2026-10-16, the owner's design): a painted
   starry night by the lake across the whole width, the words on the left as
   text, four phones on the right with their names below. */
.sky-story {
  width: 100%;
  margin: 0;
  border-radius: 0;
  padding: clamp(80px, 9vw, 130px) max(24px, calc((100% - 1180px) / 2)) clamp(100px, 11vw, 150px);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(20px, 3vw, 48px);
  background: #1d2944 url("/assets/lp/sky-bg-pc.webp") center / cover no-repeat;
}
.sky-copy { position: relative; z-index: 1; text-shadow: 0 1px 12px rgba(10, 18, 40, .45); }
.sky-phones { position: relative; margin: 0; }
.sky-phones img { display: block; width: 100%; height: auto; }
.sky-label {
  position: absolute; top: calc(100% + 18px); transform: translateX(-50%);
  color: #fff9ed; font-size: clamp(15px, 1.5vw, 20px); font-weight: 700; letter-spacing: .06em;
  text-shadow: 0 1px 10px rgba(10, 18, 40, .6);
}
.sky-label::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); width: 1px; height: 14px;
  background: linear-gradient(#f0c666, rgba(240, 198, 102, 0)); transform: translateX(-50%);
}
.sky-label::after {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 16px); width: 5px; height: 5px; border-radius: 50%;
  background: #f0c666; transform: translateX(-50%); box-shadow: 0 0 8px rgba(240, 198, 102, .9);
}
.sky-label.l1 { left: 12.6%; } .sky-label.l2 { left: 36.8%; } .sky-label.l3 { left: 62.7%; } .sky-label.l4 { left: 87.3%; }
@media (max-width: 920px) {
  .sky-story { grid-template-columns: 1fr; }
  .sky-phones { max-width: 760px; margin: 0 auto; width: 100%; }
}
@media (max-width: 760px) {
  .sky-story { padding: 64px 20px 72px; background-image: url("/assets/lp/sky-bg-sp.webp"); background-position: center bottom; }
  .sky-phones { max-width: 460px; }
  .sky-label { top: auto; padding: 3px 12px; border-radius: 999px; background: rgba(20, 28, 48, .62); font-size: 13px; }
  .sky-label::before, .sky-label::after { display: none; }
  .sky-label.l1, .sky-label.l3 { left: 35.5%; } .sky-label.l2, .sky-label.l4 { left: 65.4%; }
  .sky-label.l1, .sky-label.l2 { top: 44%; } .sky-label.l3, .sky-label.l4 { top: 89%; }
}
/* The small print sits over the bright lake: a soft dark backing keeps it readable. */
.sky-story .fine-print {
  display: inline-block; margin-top: 22px; padding: 9px 14px; border-radius: 10px;
  background: rgba(16, 24, 44, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fbf4e6; font-size: 13px; line-height: 1.75; text-shadow: none;
}
.sky-story .sky-copy > p:not(.eyebrow):not(.fine-print) { text-shadow: 0 1px 2px rgba(10, 18, 40, .6), 0 2px 18px rgba(10, 18, 40, .55); }

/* 「何もしない日にも。少し使いたい日にも。」 and its first feature, the timer
   (2026-10-16, the owner's design): a painted spring morning by the lake behind
   the heading and the timer, the phone in its ivory case, Poji reading beside it. */
.features { padding-top: 0; }
.features-hero {
  margin: 0 calc(50% - 50vw) 40px;
  padding: clamp(80px, 9vw, 120px) calc(50vw - 50%) clamp(40px, 5vw, 70px);
  background: #f6efe1 url("/assets/lp/features-bg-pc.webp") center bottom / cover no-repeat;
}
.features-hero .section-intro { margin-bottom: clamp(24px, 4vw, 56px); }
.features-hero .eyebrow::before, .features-hero .eyebrow::after { content: ""; display: inline-block; width: 44px; height: 1px; margin: 0 14px; vertical-align: middle; background: currentColor; opacity: .7; }
.features-hero .section-intro > p:last-child { color: #5a5248; }
.timer-row, .timer-row.reveal { margin: 0; min-height: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
.timer-row .feature-copy { padding: 0 clamp(8px, 2vw, 24px) 0 0; }
.timer-row .feature-no { min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: var(--gold-ink); font-size: 14px; letter-spacing: .08em; }
.timer-row .feature-copy > p, .timer-row .feature-copy li { color: #4f483f; }
.timer-visual { min-height: 0; padding: 0; overflow: visible; display: block; position: relative; background: none; }
.device-timer { display: block; width: min(330px, 62%); height: auto; margin: 0 auto; filter: drop-shadow(0 24px 36px rgba(70, 52, 24, .22)); }
.poji-3d { position: absolute; z-index: 2; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(87, 65, 27, .22)); }
.poji-3d.reading { width: clamp(130px, 15vw, 210px); right: 2%; bottom: -2%; }
/* (Up by the top: below, it would cover the gold send button of the sheet.) */
.timer-row .poji-3d.reading { bottom: auto; top: 2%; }
@media (max-width: 920px) {
  .features-hero { background-image: url("/assets/lp/features-bg-sp.webp"); background-position: center bottom; }
  .timer-row, .timer-row.reveal { grid-template-columns: 1fr; gap: 36px; }
  .timer-row .feature-copy { padding: 0; }
  .poji-3d.reading { right: 4%; width: 140px; }
}

/* 02 「気持ちに、名前はいらない。」 in the owner's design: the painted night
   lake, full width; the phone on the left, glowing, the words on the right. */
.feature-row.room-row, .feature-row.room-row.reveal {
  margin: 0 calc(50% - 50vw);
  padding: clamp(72px, 8vw, 120px) calc(50vw - 50%);
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  background: #15204a url("/assets/lp/room-bg-pc.webp") center / cover no-repeat;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.room-row .feature-copy { padding: 0; text-shadow: 0 1px 14px rgba(8, 14, 38, .65); }
.room-row .feature-no { color: #f2c35a; font-size: 14px; letter-spacing: .08em; border-bottom-color: #f2c35a; }
.room-row .feature-copy h3 { color: #fbf6ea; font-size: clamp(32px, 3.9vw, 56px); line-height: 1.38; }
.room-row .feature-copy > p { color: rgba(246, 241, 230, .94); font-size: 17px; line-height: 1.95; }
.room-row .feature-copy li { padding-left: 34px; color: rgba(246, 241, 230, .9); font-size: 14px; }
.room-row .feature-copy li::before { width: 13px; height: 13px; top: .42em; background: #f5c75a; box-shadow: 0 0 0 5px rgba(245, 199, 90, .2), 0 0 14px rgba(245, 199, 90, .55); }
.room-visual { min-height: 0; padding: 0; overflow: visible; display: block; background: none; }
.device-room { display: block; width: min(300px, 66%); height: auto; margin: 0 auto; filter: drop-shadow(0 0 20px rgba(255, 214, 140, .32)) drop-shadow(0 28px 40px rgba(0, 0, 0, .35)); }
@media (max-width: 920px) {
  .feature-row.room-row, .feature-row.room-row.reveal { grid-template-columns: 1fr; gap: 40px; background-image: url("/assets/lp/room-bg-sp.webp"); background-position: center bottom; }
}
@media (max-width: 760px) {
  .feature-row.room-row, .feature-row.room-row.reveal { margin: 0 calc(50% - 50vw); padding: 64px 24px 56px; }
  .device-room { width: min(250px, 70%); }
  .room-row .feature-copy > p { font-size: 15px; }
  .room-row .feature-copy h3 { font-size: 30px; }
}

/* 03 「今日の気持ちは、天気ひとつで。」 in the owner's design: sun to storm
   across one painted sky, the four weathers on an arc over the phone, Poji
   under its umbrella on the rainy side. */
.feature-row.weather-row, .feature-row.weather-row.reveal {
  position: relative;
  margin: 0 calc(50% - 50vw);
  padding: clamp(100px, 11vw, 170px) calc(50vw - 50%) clamp(70px, 7vw, 110px);
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  background: #f6efdf url("/assets/lp/hero-bg-pc.webp") center bottom / cover no-repeat;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.weather-arc { position: absolute; z-index: 0; left: 30%; top: clamp(18px, 3vw, 48px); width: 68%; pointer-events: none; }
.weather-arc img { display: block; width: 100%; height: auto; }
.weather-row .feature-copy, .weather-row .weather-visual { position: relative; z-index: 1; }
.weather-row .feature-copy { align-self: start; padding: clamp(20px, 3vw, 56px) 0 0; text-shadow: 0 0 10px rgba(255, 250, 238, .95), 0 0 22px rgba(255, 248, 232, .85); }
.weather-row .feature-no { color: var(--gold-ink); font-size: 14px; letter-spacing: .08em; }
.weather-row .feature-copy h3 { font-size: clamp(32px, 3.9vw, 56px); line-height: 1.38; }
.weather-row .feature-copy > p, .weather-row .feature-copy li { color: #3f392f; font-weight: 500; }
.weather-row .feature-copy > p { font-size: 17px; line-height: 1.95; }
.weather-row .feature-copy li { font-size: 14px; }
.weather-visual { min-height: 0; padding: 0; overflow: visible; display: block; background: none; }
.device-weather { display: block; width: min(300px, 56%); height: auto; margin: 0 auto 0 12%; filter: drop-shadow(0 26px 36px rgba(48, 56, 70, .28)); }
.poji-3d.umbrella { width: clamp(150px, 17vw, 250px); right: -2%; bottom: -4%; filter: drop-shadow(0 16px 22px rgba(40, 52, 40, .25)); }
@media (max-width: 920px) {
  .feature-row.weather-row, .feature-row.weather-row.reveal { grid-template-columns: 1fr; gap: 0; padding-top: 72px; background-image: url("/assets/lp/hero-bg-sp.webp"); }
  .weather-arc { position: relative; grid-row: 2; left: auto; top: auto; width: min(78%, 420px); justify-self: end; margin: 18px -4% 0 0; }
  .weather-row .feature-copy { grid-row: 1; padding-top: 0; }
  /* (No weather arc above it any more: no pulling the phone up over the words.) */
  .weather-row .weather-visual { grid-row: 3; margin-top: 28px; }
  .device-weather { width: min(250px, 64%); margin: 0 auto 0 4%; }
  .poji-3d.umbrella { width: 150px; right: -2%; bottom: -3%; }
}
@media (max-width: 760px) {
  .feature-row.weather-row, .feature-row.weather-row.reveal { margin: 0 calc(50% - 50vw); padding: 64px 24px 56px; }
  .weather-row .feature-copy > p { font-size: 15px; }
  .weather-row .feature-copy h3 { font-size: 30px; }
}

/* 04 「比べない、急かさない。」 in the owner's design: a painted evening by
   the river, lit stepping stones; the phone on the left with Poji reading
   at its foot, the words on the right. */
.feature-row.reflect-row, .feature-row.reflect-row.reveal {
  margin: 0 calc(50% - 50vw);
  padding: clamp(80px, 9vw, 130px) calc(50vw - 50%) clamp(70px, 8vw, 120px);
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  background: #f3dccf url("/assets/lp/reflect-bg-pc.webp") center / cover no-repeat;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.reflect-row .feature-copy { align-self: start; padding: 0; text-shadow: 0 0 10px rgba(255, 246, 236, .95), 0 0 22px rgba(255, 240, 228, .8); }
.reflect-row .feature-no { color: var(--gold-ink); font-size: 14px; letter-spacing: .08em; }
.reflect-row .feature-copy h3 { font-size: clamp(32px, 3.9vw, 56px); line-height: 1.38; }
.reflect-row .feature-copy > p, .reflect-row .feature-copy li { color: #3f392f; font-weight: 500; }
.reflect-row .feature-copy > p { font-size: 17px; line-height: 1.95; }
.reflect-row .feature-copy li { padding-left: 32px; font-size: 14px; }
.reflect-row .feature-copy li::before { width: 12px; height: 12px; top: .45em; background: #e9a636; box-shadow: 0 0 0 5px rgba(233, 166, 54, .22), 0 0 10px rgba(255, 236, 200, .9); }
.reflect-visual { min-height: 0; padding: 0; overflow: visible; display: block; position: relative; background: none; }
.device-reflect { display: block; width: min(300px, 62%); height: auto; margin: 0 6% 0 auto; filter: drop-shadow(0 26px 36px rgba(84, 52, 46, .28)); }
.poji-3d.book { width: clamp(140px, 15vw, 220px); left: 2%; bottom: -3%; filter: drop-shadow(0 16px 22px rgba(84, 52, 30, .25)); }
@media (max-width: 920px) {
  .feature-row.reflect-row, .feature-row.reflect-row.reveal { grid-template-columns: 1fr; gap: 40px; background-image: url("/assets/lp/reflect-bg-sp.webp"); }
  .device-reflect { width: min(250px, 64%); margin: 0 4% 0 auto; }
  .poji-3d.book { width: 140px; left: 0; bottom: -3%; }
}
@media (max-width: 760px) {
  .feature-row.reflect-row, .feature-row.reflect-row.reveal { margin: 0 calc(50% - 50vw); padding: 64px 24px 56px; }
  .reflect-row .feature-copy > p { font-size: 15px; }
  .reflect-row .feature-copy h3 { font-size: 30px; }
}

/* 「動きも音も、自分で決められる。」 in the owner's design: the painted
   night lake under a full moon, full width; the phone in calm mode, Poji
   asleep in its dome of light, the promises on a thin gold line. */
.calm-section {
  width: 100%;
  margin-inline: 0;
  border-radius: 0;
  padding: clamp(80px, 9vw, 130px) max(24px, calc((100% - 1180px) / 2));
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  background: #0f1a3a url("/assets/lp/calm-bg-pc.webp") left center / cover no-repeat;
}
.calm-visual { min-height: 0; display: block; position: relative; }
.device-calm { display: block; width: min(300px, 48%); height: auto; margin: 0 0 0 -3%; filter: drop-shadow(0 0 22px rgba(255, 214, 140, .3)) drop-shadow(0 28px 40px rgba(0, 0, 0, .4)); }
.poji-dome { position: absolute; z-index: 2; width: clamp(230px, 26vw, 380px); right: -12%; bottom: -3%; height: auto; }
.calm-copy { text-shadow: 0 1px 14px rgba(6, 12, 34, .7); }
.calm-copy > p:not(.eyebrow) { color: rgba(240, 235, 224, .92); }
.calm-copy h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.32; }
.calm-section .promise-list { position: relative; gap: 30px; }
.calm-section .promise-list::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(#e9c462cc, #e9c46266); }
.calm-section .promise-list > div > span { position: relative; z-index: 1; background: #10193a; box-shadow: inset 0 0 0 2px #e9c462, 0 0 12px rgba(233, 196, 98, .6); }
.calm-section .promise-list > div > span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #f3cf6b; }
.calm-section .promise-list strong { font-size: 18px; }
.calm-section .promise-list small { color: rgba(226, 220, 207, .88); font-size: 14px; }
@media (max-width: 920px) {
  .calm-section { grid-template-columns: 1fr; gap: 44px; background-image: url("/assets/lp/calm-bg-sp.webp"); background-position: center top; }
  .calm-copy { order: 1; } .calm-visual { order: 2; }
  .device-calm { width: min(250px, 62%); margin: 0 auto 0 0; }
  .poji-dome { width: min(250px, 66%); right: -6%; bottom: -4%; }
}
@media (max-width: 760px) {
  .calm-section { width: 100%; border-radius: 0; padding: 64px 24px 72px; }
  .calm-copy h2 { font-size: 31px; }
}
.calm-section .calm-copy .eyebrow { font-size: clamp(15px, 1.4vw, 19px); letter-spacing: .06em; }
.calm-section .calm-copy > p:not(.eyebrow) { font-size: 17px; line-height: 1.95; }
@media (max-width: 760px) { .calm-section .calm-copy > p:not(.eyebrow) { font-size: 15px; } }
@media (max-width: 920px) {
  /* (The moon sits behind the words here: a firmer shadow keeps them clear.) */
  .calm-section .calm-copy { text-shadow: 0 0 6px rgba(6, 12, 34, .95), 0 1px 16px rgba(6, 12, 34, .8); }
}

/* 「ホーム画面にも、Poji。」 in the owner's design: a sunny window sill. The
   phone stands on it (its foot behind the sill's edge) with the widget on
   its screen; Poji peeks from behind it, a cup, books and flowers beside,
   a gold orbit round it all. Laid out in units of the section's width. */
.widget-section {
  container-type: inline-size;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 1700 / 675;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #f6e7d2 url("/assets/lp/widget-bg-pc.webp") center bottom / cover no-repeat;
}
.widget-section .widget-copy { position: relative; z-index: 4; width: max(30cqw, 380px); padding: 6.2cqw 0 0 15.5cqw; box-sizing: content-box; text-shadow: 0 0 10px rgba(255, 248, 236, .95), 0 0 22px rgba(255, 244, 228, .8); }
.widget-section .widget-copy h2 { font-size: clamp(30px, 3.4cqw, 54px); line-height: 1.3; }
.widget-section .widget-copy p:not(.eyebrow) { color: #3f392f; font-weight: 500; font-size: clamp(15px, 1.2cqw, 19px); line-height: 1.95; }
.widget-stage, .widget-stage > * { position: absolute; }
.widget-stage { inset: 0; z-index: 1; pointer-events: none; }
.widget-stage img { display: block; height: auto; }
.w-orbit { left: 11.6cqw; top: 6.2cqw; width: 83.4cqw; z-index: 1; }
.w-poji { left: 79cqw; top: 10cqw; width: 9.4cqw; z-index: 2; filter: drop-shadow(0 10px 16px rgba(90, 60, 30, .2)); }
.w-device { left: 50.6cqw; top: 7.6cqw; width: 32.6cqw; height: 26.6cqw; overflow: hidden; z-index: 3; }
.w-device img { width: 100%; filter: drop-shadow(0 20px 30px rgba(70, 50, 30, .25)); }
.w-props { left: 63cqw; bottom: -2.1cqw; width: 50.8cqw; z-index: 4; }
.w-flowers { left: -3cqw; bottom: -3cqw; width: 70cqw; z-index: 5; }
@media (max-width: 920px) {
  .widget-section { aspect-ratio: auto; background-image: url("/assets/lp/widget-bg-sp.webp"); }
  .widget-section .widget-copy { width: auto; padding: 64px 24px 0; }
  .widget-stage { position: relative; inset: auto; height: 118cqw; }
  .w-orbit { display: none; }
  .w-device { left: 9cqw; top: 6cqw; width: 66cqw; height: 100cqw; }
  .w-flowers { left: -12cqw; bottom: -6cqw; width: 105cqw; }
  .w-poji { left: 70cqw; top: 12cqw; width: 19cqw; }
  .w-props { left: 30cqw; bottom: -4cqw; width: 98cqw; }
}
@media (max-width: 760px) {
  .widget-section { width: 100%; border-radius: 0; padding: 0; }
  .widget-section .widget-copy h2 { font-size: 30px; }
}

/* 「はじめる前に、知っておきたいこと。」 in the owner's design: a sunny room by
   an arched window; the words on the left, Poji in glasses reading on the
   books below them, the questions on a pane of frosted glass on the right.
   The pictures are laid out in units of the section's width, from below. */
.faq.section {
  container-type: inline-size;
  position: relative;
  width: 100%;
  margin: 0;
  min-height: 56.3cqw;
  padding: 9.3cqw 4.2cqw 7.5cqw 14cqw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 45.6cqw;
  align-items: start;
  gap: 2cqw;
  overflow: hidden;
  background: #f7ecd9 url("/assets/lp/faq-bg-pc.webp") center bottom / cover no-repeat;
}
.faq .section-intro { position: relative; z-index: 3; margin: 1.5cqw 0 0; max-width: none; text-align: left; text-shadow: 0 0 10px rgba(255, 250, 240, .95), 0 0 24px rgba(255, 246, 232, .85); }
.faq .section-intro h2 { font-size: clamp(30px, 3.4cqw, 56px); line-height: 1.32; }
.faq .section-intro .eyebrow::after { content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 12px; vertical-align: middle; background: currentColor; opacity: .7; }
.faq-stage, .faq-stage > * { position: absolute; }
.faq-stage { inset: 0; z-index: 1; pointer-events: none; }
.faq-stage img { display: block; height: auto; }
.f-orbit { left: 38cqw; top: 3cqw; width: 60cqw; z-index: 1; }
.f-props { left: -6.5cqw; bottom: 0; width: 45cqw; z-index: 2; }
.f-poji { left: 17.4cqw; bottom: 14.6cqw; width: 16.2cqw; z-index: 3; filter: drop-shadow(0 12px 18px rgba(90, 64, 30, .22)); }
.f-flowers { left: -4cqw; bottom: -3cqw; width: 52cqw; z-index: 4; }
.faq .faq-list {
  position: relative;
  z-index: 5;
  max-width: none;
  margin: 0;
  padding: clamp(18px, 2.4cqw, 40px) clamp(20px, 3.6cqw, 60px);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 20px;
  background: rgba(255, 252, 244, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(120, 90, 40, .16), inset 0 0 0 1px rgba(214, 180, 110, .25);
}
.faq .faq-list details:last-child { border-bottom: 0; }
.faq .faq-list summary::after { background: rgba(245, 214, 140, .4); }
@media (max-width: 920px) {
  .faq.section { min-height: 0; padding: 64px 20px 92cqw; grid-template-columns: 1fr; gap: 28px; background-image: url("/assets/lp/faq-bg-sp.webp"); }
  .faq .section-intro { margin: 0; }
  .f-orbit { display: none; }
  .f-props { left: -8cqw; bottom: 0; width: 96cqw; }
  .f-poji { left: 38cqw; bottom: 31cqw; width: 34cqw; }
  .faq .faq-list details p { margin-right: 4px; }
  .f-flowers { left: -10cqw; bottom: -6cqw; width: 120cqw; }
}
@media (max-width: 760px) {
  .faq.section { width: 100%; }
  .faq .section-intro h2 { font-size: 30px; }
}

/* 「Poji と、いっしょに。」 in the owner's design: the sunlit meadow by the
   lake, full width; the words and the store badges in the sky on the left,
   Poji waving on the grass, the app's marks on an arc above it, a path of
   gold light, flowers in front. Laid out in units of the section's width. */
.download.section {
  container-type: inline-size;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 1687 / 841;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #f4e9d2 url("/assets/lp/download-bg-pc.webp") center / cover no-repeat;
}
.download-copy { position: relative; z-index: 5; width: 36cqw; margin-left: 12.5cqw; padding-top: 3.6cqw; text-align: center; text-shadow: 0 0 12px rgba(255, 250, 238, .95), 0 0 28px rgba(255, 246, 228, .8); }
.download-sprout { display: block; width: min(22cqw, 360px); height: auto; margin: 0 auto 2px; color: #c8981f; }
.download .download-copy .eyebrow { font-size: clamp(14px, 1.3cqw, 21px); letter-spacing: .14em; }
.download .download-copy h2 { font-size: clamp(38px, 5.2cqw, 90px); line-height: 1.18; letter-spacing: -.02em; }
.download .download-copy > p:not(.eyebrow) { color: #3f392f; font-weight: 500; font-size: clamp(15px, 1.25cqw, 21px); margin: 1.2cqw 0 1.8cqw; }
.download .store-badges { justify-content: center; }
.download .store-badges img { height: clamp(42px, 3.4cqw, 58px); }
.download-note { margin: 1.2cqw 0 0; color: #5a5146; font-size: clamp(12px, .95cqw, 15px); }
.download-stage, .download-stage > * { position: absolute; }
.download-stage { inset: 0; z-index: 1; pointer-events: none; }
.download-stage img { display: block; height: auto; }
.d-icons { left: 45.9cqw; top: 2.8cqw; width: 53.9cqw; z-index: 1; }
.d-path { left: 50cqw; bottom: -6cqw; width: 18cqw; z-index: 5; opacity: .92; }
.d-poji { left: 65.2cqw; bottom: 9.6cqw; width: 20.2cqw; z-index: 3; filter: drop-shadow(0 16px 22px rgba(90, 80, 30, .22)); }
.d-flowers { left: 0; bottom: -3cqw; width: 100cqw; z-index: 4; }
@media (max-width: 920px) {
  .download.section { aspect-ratio: auto; padding: 56px 0 0; display: flex; flex-direction: column; background-image: url("/assets/lp/download-bg-sp.webp"); background-position: center bottom; }
  .download-copy { order: 1; }
  .download-stage { order: 2; align-self: stretch; }
  .download-copy { align-self: stretch; }
  .download-copy { width: auto; margin: 0 20px; padding-top: 0; }
  .download-sprout { width: 220px; }
  .download .download-copy h2 { font-size: 44px; }
  .download .download-copy > p:not(.eyebrow) { margin: 12px 0 18px; }
  .download-note { margin-top: 12px; }
  .download-stage { position: relative; inset: auto; height: 112cqw; }
  .d-icons { left: -4cqw; top: -10cqw; width: 108cqw; }
  .d-path { left: 10cqw; bottom: -8cqw; width: 34cqw; }
  .d-poji { left: 32cqw; bottom: 22cqw; width: 50cqw; }
  .d-flowers { left: -30cqw; bottom: -6cqw; width: 160cqw; }
}
@media (max-width: 760px) {
  .download.section { width: 100%; border-radius: 0; }
}

/* The painted rows meet edge to edge: no cream strip under 01 or after 04. */
.features.section { padding-bottom: 0; }
.features-hero { margin-bottom: 0; }
/* (The full-width paintings fade in without sliding, so no strip shows while they come.) */
.feature-row.room-row.reveal, .feature-row.weather-row.reveal, .feature-row.reflect-row.reveal, .widget-section.reveal, .download.section.reveal { transform: none; }

/* The footer in the owner's design: a meadow's edge in soft light, a gold
   line with a sprout, Poji waving from the flowers on the right. */
.site-footer {
  position: relative;
  width: 100%;
  margin: 0;
  padding: max(120px, 9.6vw) max(24px, 7.6vw) 40px;
  overflow: hidden;
  background: #fffcf3 url("/assets/lp/footer-bg-pc.webp") center top / 100% auto no-repeat;
}
.site-footer > :not(.footer-stage) { position: relative; z-index: 3; }
.footer-stage, .footer-stage > * { position: absolute; }
.footer-stage { inset: 0; z-index: 1; pointer-events: none; container-type: inline-size; }
.footer-stage img { display: block; height: auto; }
.ft-line { left: 22cqw; top: 3.2cqw; width: 56cqw; z-index: 2; }
.ft-poji { left: 84.3cqw; top: 3cqw; width: 9.8cqw; z-index: 3; filter: drop-shadow(0 10px 14px rgba(110, 90, 30, .18)); }
.ft-flowers { left: 0; top: -17cqw; width: 100cqw; z-index: 1; opacity: .9; }
.site-footer .footer-brand img { height: clamp(40px, 3.8vw, 64px); }
.site-footer .footer-brand small { font-size: clamp(13px, 1.05vw, 17px); color: #5a5146; }
.site-footer nav { gap: 0; margin-right: 8vw; }
.site-footer nav a { font-size: clamp(12px, .95vw, 15px); color: #5a5146; padding: 2px clamp(10px, 1.2cqw, 20px); }
.site-footer nav a + a { border-left: 1px solid rgba(91, 84, 72, .22); }
.site-footer nav a:last-child { padding-right: 0; }
.site-footer > small { font-size: 12px; color: #6b6255; }
@media (max-width: 920px) {
  .site-footer { padding: 150px 24px 36px; background-image: url("/assets/lp/footer-bg-sp.webp"); background-size: cover; }
  .ft-line { left: 6cqw; top: 6cqw; width: 88cqw; }
  .ft-poji { left: auto; right: 4cqw; top: 8cqw; width: 22cqw; }
  .ft-flowers { left: -20cqw; top: -6cqw; width: 140cqw; }
  .site-footer nav { justify-content: flex-start; gap: 10px 0; margin-right: 0; }
  .site-footer nav { gap: 12px 22px; }
  .site-footer nav a { padding: 2px 0; }
  .site-footer nav a + a { border-left: 0; }
}

/* FAQ: one answer open at a time, sliding open and shut (several open at
   once made the section grow and the pictures in it move). */
.faq .faq-list details p { overflow: hidden; }

/* Words on the bright paintings: a white glow round each letter (no plate
   behind them), so they read over flowers and sunlight alike. */
:root { --glow-light: 0 0 2px rgba(255, 255, 255, .95), 0 0 6px rgba(255, 253, 246, .95), 0 0 14px rgba(255, 250, 238, .9), 0 0 28px rgba(255, 246, 230, .7); }
.hero-copy,
.moments .section-intro, .moments .moment-card,
.features-hero .section-intro, .timer-row .feature-copy,
.weather-row .feature-copy, .reflect-row .feature-copy,
.widget-section .widget-copy, .faq .section-intro,
.download-copy, .download-note,
.site-footer .footer-brand, .site-footer nav, .site-footer > small { text-shadow: var(--glow-light); }
/* Poji's words sit in the middle of the phone's screen, under the clock and
   above Poji — on a computer too (half over the bezel they looked stuck on,
   and on a phone they covered the clock). The phone is centred in the scene. */
.hero-note { left: 50%; right: auto; top: 44%; transform: translateX(-50%); width: max-content; max-width: 78%; text-align: center; border-radius: 14px; }