:root {
  --green: #264f3e;
  --cta-green: #3a6f5b;
  --accent: #e18062;
  --highlight: #fffcc7;
  --cta-background: #fef0c9;
  --body-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --brand-font: "kinuta-maruminold-stdn";
  --header-height: 50px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color: var(--green); font-family: var(--body-font); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #fff; }
main { padding-top: var(--header-height); isolation: isolate; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
[hidden] { display: none !important; }
.brand { font-family: var(--brand-font); font-weight: 400; font-style: normal; font-synthesis: none; }
.highlight { background: linear-gradient(transparent 68%, var(--highlight) 68%, var(--highlight) 95%, transparent 95%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
strong { color: #086e20; font-weight: 600; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
section, [id] { scroll-margin-top: calc(var(--header-height) + 16px); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 200; padding: 10px 18px; background: #fff; color: var(--green); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

/* Header */
.site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); z-index: 100; background: #fff; box-shadow: 2px 2px 2px rgb(0 0 0 / 10%); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding-left: 20px; gap: 12px; }
.site-header__logo { width: min(149.457px, calc(100vw - 213px)); flex-shrink: 0; }
.site-header__cta { display: block; width: 181px; height: 50px; flex-shrink: 0; }
.site-header__cta img { width: 100%; height: 50px; object-fit: contain; }
[data-cta][aria-disabled="true"] { cursor: default; }
[data-cta][href] { cursor: pointer; }
[data-cta][href]:hover { filter: brightness(1.04); }

/* First view: only the artwork is positioned; the page remains in normal flow. */
.hero { position: relative; --hero-width: min(100vw, 560px); }
.hero__background { position: absolute; top: 0; left: 0; width: 100%; height: calc(var(--hero-width) * 491 / 375); }
.hero__background img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__stage { position: relative; width: var(--hero-width); height: calc(var(--hero-width) * 540 / 375); margin-inline: auto; }
.hero__copy { position: absolute; top: calc(var(--hero-width) * 4 / 375); left: 50%; transform: translateX(-50%); width: 94.3513%; }
.hero__copy img { width: 100%; }
.hero__badges { position: absolute; top: 77.4074%; left: 3.7333%; width: 92.8%; display: flex; }
.hero__badges picture { width: 35.0575%; flex-shrink: 0; }
.hero__badges picture + picture { margin-left: -2.5862%; }
.hero__badges img { width: 100%; }

/* Shared CTA */
.cta { position: relative; background: var(--cta-background); padding-bottom: 22px; overflow: hidden; }
.cta__inner { position: relative; width: min(335px, calc(100% - 40px)); height: 164px; margin-inline: auto; }
.cta__box { position: absolute; top: 24px; width: 100%; height: 140px; }
.cta__box img { width: 100%; height: 100%; object-fit: cover; }
.cta__brochure-pc { display: none; }
.cta__brochure-one { position: absolute; top: 8px; left: -27px; width: 96.181px; transform: rotate(-10.13deg); }
.cta__brochure-two { position: absolute; top: 4px; right: -10px; width: 64.525px; transform: rotate(8.29deg); }
.cta__copy { position: absolute; top: 43px; left: 50%; transform: translateX(-50%); width: 221px; display: flex; align-items: center; justify-content: center; color: var(--cta-green); font-size: 18px; line-height: 20px; letter-spacing: -.07em; text-align: center; white-space: nowrap; }
.cta__highlight { background: linear-gradient(transparent 60%, var(--highlight) 60%); }
.cta__accent { position: absolute; top: 14px; left: 0; width: 11px; height: 29px; border-left: 1px solid var(--green); transform: skew(21deg); }
.cta__accent--right { left: auto; right: 0; transform: skew(-21deg); }
.cta__link { --cta-button-height: 55px; position: absolute; top: 98px; left: 50%; transform: translateX(-50%); width: calc(100% - 31px); max-width: 304px; height: 55px; display: block; }
.cta__link picture, .cta__link img { width: 100%; height: 100%; object-fit: contain; }
.cta__link::after { content: ""; position: absolute; top: 50%; left: 50%; width: min(100%, calc(var(--cta-button-height) * 824 / 154)); aspect-ratio: 824 / 154; transform: translate(-50%, -50%); clip-path: inset(5.1948% 1.4563% 10.3896% round 999px); pointer-events: none; background: linear-gradient(110deg, transparent 44%, rgb(255 255 255 / 18%) 50%, transparent 56%); background-size: 300% 100%; background-repeat: no-repeat; background-position: 90% 0; animation: cta-shine 4s linear infinite; }
@keyframes cta-shine {
  0% { background-position: 90% 0; }
  24%, 100% { background-position: 10% 0; }
}
.cta--hero { margin-top: -63px; padding-top: 56px; padding-bottom: 30px; background: transparent; }
.cta--hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cta-background); pointer-events: none; }

/* Problems: intentionally overlapping illustration groups. */
.problems { position: relative; z-index: 2; background: #f8f6f0; padding: 40px 0 5px; }
.problems::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 31px; background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.problems h2 { font-size: 26px; line-height: 30px; text-align: center; }
.problems__balloons { position: relative; width: min(346px, calc(100% - 30px)); aspect-ratio: 346 / 494; margin: 18px auto 0; }
.problems__balloon { position: absolute; }
.problems__balloon img { width: 100%; height: 100%; object-fit: contain; }
.problems__balloon--1 { top: 0; left: .8671%; width: 78.9017%; }
.problems__balloon--2 { top: 15.7895%; left: 20.2312%; width: 78.6127%; }
.problems__balloon--3 { top: 50.8097%; left: 0; width: 79.1908%; }
.problems__balloon--4 { top: 75.7085%; left: 18.7861%; width: 81.2139%; }

/* Reasons */
.reasons { position: relative; padding: 60px 0 24px; background: #f6f0e3 url("../assets/images/sp/section2-bg.png") center / cover no-repeat; background-image: image-set(url("../assets/images/optimized/sp/section2-bg.webp") type("image/webp"), url("../assets/images/sp/section2-bg.png") type("image/png")); }
.reasons__leaf { display: none; }
.reasons__intro { position: relative; width: min(277px, calc(100% - 40px)); margin: 0 auto 30px; text-align: center; }
.reasons__icon { width: 37.011px; margin-inline: auto; }
.reasons__intro h2 { margin-top: 6px; font-size: 26px; line-height: 30px; }
.reasons__title-color { color: var(--accent); }
.reasons__four { font-size: 35px; }
.reasons__wave { width: 219.055px; margin: 2px auto 0; }
.reasons__accent { position: absolute; top: 48px; width: 11px; height: 47px; border-left: 1px solid var(--accent); transform: skew(13deg); }
.reasons__accent--left { left: 0; }
.reasons__accent--right { right: 0; transform: skew(-13deg); }
.reasons__list { width: min(560px, calc(100% - 40px)); margin-inline: auto; }
.reason { display: flex; flex-direction: column; gap: 20px; }
.reason + .reason { margin-top: 20px; }
.reason__number { padding-bottom: 5px; border-bottom: 1px solid var(--green); text-align: center; font-family: "Shippori Mincho", serif; }
.reason__number span { display: block; }
.reason__number span:first-child { font-size: 16px; font-weight: 500; line-height: 20px; }
.reason__number span:last-child { margin-top: -4px; font-size: 32px; font-weight: 400; line-height: 35px; }
.reason__heading { margin-top: 19px; font-size: 24px; line-height: 28px; text-align: center; }
.reason__body { margin-top: 15px; font-size: 15px; line-height: 28px; text-align: justify; overflow-wrap: anywhere; }
.reason--04 .reason__body { margin-top: 7px; }
.reason__photo img { width: 100%; }

/* Comparison: the scroll region, never the page, owns its overflow. */
.comparison { padding: 40px 0 50px; }
.comparison__inner { position: relative; width: min(560px, calc(100% - 40px)); margin-inline: auto; }
.comparison__leaf { position: absolute; top: -34px; right: 2px; width: 122px; }
.comparison__intro { position: relative; text-align: center; }
.comparison__icon { width: 37px; margin-inline: auto; }
.comparison__intro h2 { margin-top: 10px; font-size: 26px; line-height: 32px; text-shadow: 0 0 4.2px #fff, 0 0 4.2px #fff, 0 0 4.2px #fff; }
.comparison__viewport { position: relative; margin-top: 30px; }
.comparison__scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.comparison__hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 120px; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 4px; background: rgb(0 0 0 / 60%); color: #fff; font-family: var(--body-font); font-size: 10px; font-weight: 600; line-height: 14px; white-space: nowrap; pointer-events: none; }
.comparison__hint svg { flex: none; }
.comparison__image, .comparison__image img { width: 706px; max-width: none; }
.comparison__image img { height: auto; aspect-ratio: 1803 / 1286; }
.pricing { margin: 30px auto 0; }
.pricing__photo img { width: 100%; aspect-ratio: 335 / 200; object-fit: cover; }
.pricing__content { position: relative; padding: 20px 18px; background: #effcf5; }
.pricing h3 { text-align: center; font-size: 26px; line-height: 30px; font-weight: 600; }
.pricing__details { margin-top: 20px; }
.pricing__details > div, .pricing__total > div { display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 0; }
.pricing__details { font-size: 15px; line-height: 15px; }
.pricing__details > div + div { margin-top: 16px; }
.pricing__note { white-space: nowrap; }
.pricing__total { margin-top: 15px; border-top: 1px solid var(--green); padding-top: 15px; font-size: 15px; line-height: 15px; }

/* Family voices. Artwork keeps its ratio; white cards may grow with text. */
.voices { padding: 4px 0 42px; background: #f4eddf url("../assets/images/sp/section4-bg.png") center / cover no-repeat; background-image: image-set(url("../assets/images/optimized/sp/section4-bg.webp") type("image/webp"), url("../assets/images/sp/section4-bg.png") type("image/png")); }
.voices__title { width: min(358px, calc(100% - 16px)); margin-inline: auto; }
.voices__title img { width: 100%; }
.voices__list { display: grid; gap: 12px; width: min(349px, calc(100% - 26px)); margin: -2px auto 0; }
.voice { position: relative; }
.voice::before { content: ""; position: absolute; top: 36px; bottom: 0; left: 5px; right: 5px; border-radius: 10px; background: #fff; }
.voice__background { position: absolute; inset: 0 0 auto; pointer-events: none; }
.voice__background img { width: 100%; }
.voice__body { position: relative; padding: 61.3181% 20px 31px; }
.voice h3 { font-size: 20px; line-height: 24px; text-align: center; }
.voice__text { margin-top: 23px; font-size: 15px; line-height: 23px; text-align: justify; overflow-wrap: anywhere; }
.voice__text p + p { margin-top: 7px; }
.voice__text strong { font-weight: 500; }
.voice--2 .voice__body { padding-top: 61.2069%; padding-bottom: 29px; }
.voice--2 .voice__text { margin-top: 22px; }

/* FAQ: all panels remain readable without JavaScript. */
.faq { padding: 40px 0 34px; background: #fafafa; }
.faq__intro { text-align: center; }
.faq__icon { width: 41px; margin-inline: auto; }
.faq__intro h2 { margin-top: 7px; font-size: 26px; line-height: 32px; }
.faq__inner { width: min(560px, calc(100% - 40px)); margin-inline: auto; }
.faq__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 5px; margin: 30px auto 40px; }
.faq__tabs button { min-height: 30px; padding: 3px 6px; color: var(--green); background: #fafafa; border: 1px solid var(--green); border-radius: 40px; font-size: 16px; line-height: 22px; cursor: pointer; }
.faq__tabs [aria-selected="true"] { color: #fff; background: var(--green); }
.faq__item + .faq__item { margin-top: 20px; }
.faq__item:not(:last-child) { border-bottom: 1px solid #aaa; padding-bottom: 20px; }
.faq__item dt, .faq__item dd { display: grid; grid-template-columns: 39px minmax(0, 1fr); column-gap: 11px; }
.faq__item dt { align-items: center; min-height: 39px; font-size: 18px; line-height: 22px; }
.faq__item dd { margin-top: 18px; font-size: 15px; line-height: 22px; }
.faq__question, .faq__item dd p { overflow-wrap: anywhere; }
.faq__badge { display: block; width: 39px; height: 39px; flex-shrink: 0; border-radius: 3px; color: #fff; background: #e48e77; font-family: "Basic", sans-serif; font-size: 32px; font-weight: 400; line-height: 39px; text-align: center; }
.faq__badge--answer { background: #e9b4a5; }
.faq__panel:not([role]) > h3 { position: static; width: auto; height: auto; margin: 36px 0 20px; overflow: visible; clip: auto; clip-path: none; white-space: normal; }

@media (min-width: 600px) and (max-width: 1099px) {
  .problems__balloons { width: 346px; }
  .hero__stage { max-width: 560px; }
}

@media (max-width: 359px) {
  .problems h2 { font-size: 23px; }
  .comparison__intro h2 { font-size: 24px; }
  .faq__tabs button { font-size: 14px; }
  .voice h3 { font-size: 18px; }
  .pricing__details > div, .pricing__total > div { grid-template-columns: 57px minmax(0, 1fr); }
  .pricing__note { white-space: normal; }
}

/* Only SP badges sit above the first CTA background; other layers keep their order. */
@media (max-width: 1099px) {
  .hero__badges { z-index: 1; }
}

@media (min-width: 1100px) {
  :root { --header-height: 80px; }
  .sp-only { display: none; }
  .site-header { box-shadow: 0 4px 4px -1px rgb(0 0 0 / 8%); }
  .site-header__inner { max-width: 1000px; padding-left: 0; margin-inline: auto; }
  .site-header__logo { width: 270px; }
  .site-header__cta { width: 250px; height: 50px; }
  .hero__background { height: 600px; }
  .hero__stage { width: min(1200px, calc(100% - 40px)); height: 600px; }
  .hero__copy { top: 41px; left: 21px; transform: none; width: 715px; }
  .hero__badges { top: 279px; left: 115px; width: 527px; }
  .hero__badges picture { width: 185px; }
  .hero__badges picture + picture { margin-left: -14px; }
  .cta { padding: 31px 0 22px; }
  .cta__inner { width: 833px; height: 223px; }
  .cta__box { top: 0; left: 7px; width: 820px; height: 213px; }
  .cta__brochure-pc { display: block; position: absolute; top: 11px; left: 512px; width: 318px; }
  .cta__brochure-one, .cta__brochure-two { display: none; }
  .cta__copy { top: 35px; left: 108px; transform: none; width: 369px; font-size: 30px; line-height: 37px; }
  .cta__accent { top: 20px; width: 20px; height: 54px; border-width: 2px; }
  .cta__link { --cta-button-height: 69px; top: 117px; left: 107px; transform: none; width: 370px; max-width: none; height: 69px; }
  .cta--hero { margin-top: -53px; padding-top: 0; padding-bottom: 15px; overflow: visible; }
  .cta--hero .cta__inner { top: -39px; margin-bottom: -39px; }
  .problems { padding: 80px 0 40px; }
  .problems::after { height: 50px; }
  .problems h2 { font-size: 42px; line-height: 50px; }
  .problems__balloons { width: 775px; aspect-ratio: 775 / 425; margin-top: -59px; }
  .problems__balloon--1 { top: 0; left: 5px; width: 380px; }
  .problems__balloon--2 { top: 0; left: 390px; width: 380px; }
  .problems__balloon--3 { top: 257px; left: 0; width: 380px; }
  .problems__balloon--4 { top: 257px; left: 385px; width: 390px; }
  .reasons { padding: 110px 0 80px; background-image: url("../assets/images/pc/section2-bg.png"); background-image: image-set(url("../assets/images/optimized/pc/section2-bg.webp") type("image/webp"), url("../assets/images/pc/section2-bg.png") type("image/png")); }
  .reasons__leaf { display: block; position: absolute; pointer-events: none; }
  .reasons__leaf--left { top: 80px; left: 0; width: 175px; }
  .reasons__leaf--right { top: 1119px; right: 0; width: 186px; }
  .reasons__intro { width: 483px; margin-bottom: 60px; }
  .reasons__icon { width: 72px; }
  .reasons__intro h2 { margin-top: 10px; font-size: 42px; line-height: 55px; }
  .reasons__four { font-size: 53px; }
  .reasons__wave { width: 367px; margin-top: -4px; }
  .reasons__accent { top: 80px; width: 33px; height: 100px; border-width: 3px; transform: skew(18deg); }
  .reasons__accent--right { transform: skew(-18deg); }
  .reasons__list { width: 1006px; }
  .reason { display: grid; grid-template-columns: 450px 536px; align-items: center; gap: 20px; }
  .reason:nth-child(even) { grid-template-columns: 536px 450px; }
  .reason__photo { grid-column: 1; grid-row: 1; }
  .reason__text { grid-column: 2; grid-row: 1; min-width: 0; }
  .reason:nth-child(even) .reason__photo { grid-column: 2; }
  .reason:nth-child(even) .reason__text { grid-column: 1; }
  .reason + .reason { margin-top: 38px; }
  .reason--01 + .reason { margin-top: 24px; }
  .reason--03 + .reason { margin-top: 37px; }
  .reason__number { padding-bottom: 10px; border-bottom-width: 2px; text-align: left; font-family: "Shippori Mincho B1", serif; }
  .reason__number span { width: 57px; text-align: center; }
  .reason__number span:first-child { font-size: 19px; font-weight: 700; line-height: 20px; }
  .reason__number span:last-child { margin-top: 10px; font-size: 47px; line-height: 32px; letter-spacing: -.02em; }
  .reason__heading { margin-top: 19px; font-size: 28px; line-height: 40px; text-align: left; }
  .reason__body { margin-top: 20px; font-size: 18px; line-height: 28px; }
  .reason--04 .reason__body { margin-top: 20px; }
  .comparison { padding: 80px 0; }
  .comparison__inner { width: 1000px; }
  .comparison__leaf { top: -42px; right: 100px; width: 216px; }
  .comparison__icon { width: 67px; }
  .comparison__intro h2 { font-size: 42px; line-height: 55px; text-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff; }
  .comparison__viewport { margin-top: 50px; z-index: 1; }
  .comparison__hint { display: none; }
  .comparison__image, .comparison__image img { width: 1000px; }
  .pricing { display: grid; grid-template-columns: 400px 400px; width: 800px; margin-top: 80px; }
  .pricing__photo img { aspect-ratio: 400 / 266; }
  .pricing__content { padding: 35px 30px 34px; }
  .pricing__content::before { content: ""; position: absolute; top: 0; left: 0; width: 200px; height: 3px; background: var(--green); }
  .pricing h3 { text-align: left; font-size: 20px; line-height: 28px; }
  .pricing__details { margin-top: 15px; font-size: 18px; line-height: 28px; }
  .pricing__details > div, .pricing__total > div { grid-template-columns: 79px minmax(0, 1fr); }
  .pricing__details > div + div { margin-top: 6px; }
  .pricing__total { margin-top: 15px; padding-top: 14px; border-top-width: 2px; font-size: 20px; line-height: 28px; }
  .voices { padding: 5px 0 67px; background-image: url("../assets/images/pc/section4-bg.png"); background-image: image-set(url("../assets/images/optimized/pc/section4-bg.webp") type("image/webp"), url("../assets/images/pc/section4-bg.png") type("image/png")); }
  .voices__title { width: 628px; }
  .voices__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; width: 1016px; margin-top: -35px; }
  .voice::before { content: none; }
  .voice__body, .voice--2 .voice__body { min-height: 667px; padding: 293px 44px 41px; }
  .voice h3 { font-size: 25px; line-height: 40px; }
  .voice--2 h3 { width: 425px; margin-inline: calc((100% - 425px) / 2); }
  .voice__text, .voice--2 .voice__text { margin-top: 20px; font-size: 15px; line-height: 29px; }
  .voice__text p + p { margin-top: 0; }
  .voice__text strong { font-weight: 600; }
  .faq { padding: 80px 0; }
  .faq__icon { width: 67px; }
  .faq__intro h2 { margin-top: 10px; font-size: 42px; line-height: 55px; }
  .faq__inner { width: 800px; }
  .faq__tabs { width: 498px; gap: 20px; margin: 50px auto 60px; }
  .faq__tabs button { min-height: 34px; padding: 4px 12px; border-width: 2px; font-size: 20px; }
  .faq__item + .faq__item { margin-top: 30px; }
  .faq__item:not(:last-child) { padding-bottom: 23px; }
  .faq__item dt, .faq__item dd { grid-template-columns: 35px minmax(0, 1fr); column-gap: 15px; }
  .faq__item dt { min-height: 35px; font-size: 22px; line-height: 28px; }
  .faq__item dd { margin-top: 20px; font-size: 18px; line-height: 28px; }
  .faq__badge { width: 35px; height: 35px; font-size: 28px; line-height: 35px; }
}

@media (min-width: 1100px) and (max-width: 1399px) {
  .hero__copy { width: 62%; }
  .hero__badges { left: 8%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .cta__link::after { content: none; animation: none; }
}