@charset "UTF-8";

/* ==========================================================================
   Reset
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 0;
}

a {
    text-decoration: none;
    color: inherit;
    background: transparent;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: 0;
    background: transparent;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
    color: #000;
    background: #ffc401;
    overflow-x: hidden;
    font-feature-settings: "palt" 1;
}

html.is-menu-open,
body.is-menu-open {
    overflow: hidden;
    height: 100%;
    touch-action: none;
    overscroll-behavior: none;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
    position: absolute;
    top: 2.625rem; /* 42px */
    left: 0;
    right: 0;
    z-index: 1001; /* above .mobile-menu (1000): the hamburger stays the visible,
    clickable close control in place when the menu is open, and the logo
    swaps to its white variant so it still reads against the black overlay */
    padding: 0 1.5rem 0 3.5rem; /* 24px right / 56px left (Figma gutters) */
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.543rem; /* 72.69px */
}

.header__logo {
    position: relative;
    display: block;
    width: 9rem; /* 144px */
    aspect-ratio: 144 / 67.68885;
}

.header__logo-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    transition: opacity 0.25s ease;
}

.header__logo-img--white {
    opacity: 0;
}

html.is-menu-open .header__logo-img--default {
    opacity: 0;
}

html.is-menu-open .header__logo-img--white {
    opacity: 1;
}

.header__menu-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 0.25rem; /* 4px */
    width: 6.4375rem; /* 103px */
    height: 2.4375rem; /* 39px */
    background: #000;
    border-radius: 999px;
    flex-shrink: 0;
}

.header__menu-btn-bar {
    width: 1.1875rem; /* 19px */
    height: 0.125rem; /* 2px */
    background: #fff;
    transition:
        transform 0.3s ease,
        opacity 0.2s ease;
}

.header__menu-btn[aria-expanded="true"] .header__menu-btn-bar:first-child {
    transform: translateY(0.1875rem) rotate(45deg);
}

.header__menu-btn[aria-expanded="true"] .header__menu-btn-bar:last-child {
    transform: translateY(-0.1875rem) rotate(-45deg);
}

/* ==========================================================================
   Mobile menu overlay
   ========================================================================== */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow-y: auto;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: safe center; /* centers vertically, but falls back to start alignment instead of
    overflowing past padding-top when content is taller than the available room — otherwise plain
    `center` lets tall content bleed upward into the .header area on short screens */
    padding: 5.3125rem 1.5rem 2.5rem; /* top is a floor — centered content can never ride up into the real .header */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0s linear 0.35s;
}

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0s linear 0s;
}

.mobile-menu__inner {
    width: 100%;
    max-width: 26.125rem; /* 418px: 402px design width + side padding */
    margin: 0 auto;
}

/* mobile-menu is added purely so the header's own hamburger/logo (elevated
   above via z-index, swapped to white) can act as the single close control —
   the overlay itself carries no header row of its own. */
.mobile-menu__col1 {
    display: flex;
    flex-direction: column;
}

.mobile-menu__cta {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* 20px */
    margin-bottom: 2.375rem; /* 38px */
}

.mobile-menu__btn img {
    display: block;
    width: 100%;
    height: auto;
}

.mobile-menu__mascot {
    display: none; /* desktop-only decoration, see @media (min-width: 769px) */
    width: 14.464rem; /* 231.43px, matches the exported image's own canvas */
}

.mobile-menu__mascot-img {
    display: block;
    width: 100%;
    height: auto;
}

.mobile-menu__list li {
    border-bottom: 1px solid #343434;
}

.mobile-menu__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1.1125rem 0;
    font-size: 1.0625rem; /* 17px */
    line-height: 2.14;
    color: #fff;
    font-weight: 900;
}

.mobile-menu__chevron {
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
    clip-path: polygon(15% 0%, 100% 50%, 15% 100%, 15% 80%, 65% 50%, 15% 20%);
    background: #d54d24;
}

@media (min-width: 769px) {
    .mobile-menu {
        padding-top: 14.4375rem; /* 231px: clears the real .header at its desktop position/height */
    }

    .mobile-menu__inner {
        max-width: 71.6875rem; /* 1147px ≈ 1115px content span + a little breathing room */
        display: flex;
        justify-content: space-between;
        gap: 8.5625rem; /* 137px */
    }

    .mobile-menu__col1 {
        flex: 0 0 22.0625rem; /* 353px, matches the CTA button width */
    }

    .mobile-menu__cta {
        margin-bottom: 4.6875rem; /* 75px, gap to the mascot */
    }

    .mobile-menu__mascot {
        display: block;
    }

    .mobile-menu__nav {
        flex: 0 0 39.0625rem; /* 625px */
    }
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
/* Hero always fills the viewport height exactly (height: 100dvh). Every size
   that contributes to its vertical footprint (the visual, gaps, type) is
   driven by --hero-vh-scale — a single height-based ratio, clamped so text
   never gets unreadably small or absurdly large. Height is prioritized, but
   capped by a width-safety term (100vw - textMinPx) / visualRefPx so a
   narrow-but-tall window can never scale the visual up far enough to push
   real content (headline, CTA buttons) off-screen. */
.hero {
    --hero-vh-scale: min(
        clamp(0.78, calc(100dvh / 824px), 1.35),
        calc((100vw - 300px) / 742.4px)
    );
    /* CTA buttons get their own scale: smaller at the reference size, but with
     a higher ceiling so they keep growing on tall/large screens instead of
     capping out at the same 1.35x as the rest of the hero */
    --hero-cta-scale: min(
        clamp(0.78, calc(100dvh / 824px), 1.8),
        calc((100vw - 300px) / 742.4px)
    );
    position: relative;
    overflow: hidden;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(48px * var(--hero-vh-scale));
    width: 100%;
}

/* ---------- visual (bg circles + phone mock + people) ---------- */
.hero__visual {
    position: relative;
    width: min(100%, 28.875rem);
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__phone-slider {
    position: absolute;
    left: 24.242%;
    top: 19.903%;
    width: 51.516%;
    height: 65.75%;
}

.hero__phone-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
}

.hero__phone-slide.is-active {
    opacity: 1;
}

.hero__phone-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero__people {
    position: absolute;
    left: 12.5%;
    top: 15.78%;
    width: 75.27%;
    height: 58.37%;
}

/* outer: handles the entrance position (translate) and fade only */
.hero__people-item {
    position: absolute;
    aspect-ratio: 1 / 1;
    opacity: 0;
    transition:
        transform 0.85s ease-out var(--pop-delay, 0s),
        opacity 0.4s ease var(--pop-delay, 0s);
}

/* inner: handles the pop (scale), always pivoting around its own center */
.hero__people-item img {
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1)
        var(--pop-delay, 0s);
}

.hero__people.is-visible .hero__people-item {
    opacity: 1;
    transform: translate(0, 0);
}

.hero__people.is-visible .hero__people-item img {
    transform: scale(1);
}

.hero__people.is-gathered .hero__people-item {
    transition: transform 0.7s ease;
}

/* left/top/width = final (Figma) position, enlarged 20% around its own center.
   No transform here: the outer element stays put during the entrance pop-in
   (only the inner <img> scales), so each image grows from its own center
   instead of sliding in from elsewhere. */
.hero__people-item--01 {
    left: 5.87%;
    top: -2.62%;
    width: 24.38%;
    --pop-delay: 0s;
}
.hero__people-item--02 {
    left: 93.07%;
    top: 33.74%;
    width: 9.1%;
    --pop-delay: 0.15s;
}
.hero__people-item--03 {
    left: -0.74%;
    top: 71.18%;
    width: 24.38%;
    --pop-delay: 0.3s;
}
.hero__people-item--04 {
    left: 10.34%;
    top: 43.01%;
    width: 13.79%;
    --pop-delay: 0.45s;
}
.hero__people-item--05 {
    left: 74.04%;
    top: 53.51%;
    width: 28.3%;
    --pop-delay: 0.6s;
}
.hero__people-item--06 {
    left: 73.42%;
    top: -2.62%;
    width: 24.38%;
    --pop-delay: 0.6s;
}

.hero__people.is-gathered .hero__people-item--01 {
    transform: translate(0.7rem, 0.625rem);
}
.hero__people.is-gathered .hero__people-item--02 {
    transform: translate(-0.925rem, 0.155rem);
}
.hero__people.is-gathered .hero__people-item--03 {
    transform: translate(0.75rem, -0.56rem);
}
.hero__people.is-gathered .hero__people-item--04 {
    transform: translate(0.935rem, -0.04rem);
}
.hero__people.is-gathered .hero__people-item--05 {
    transform: translate(-0.86rem, -0.38rem);
}
.hero__people.is-gathered .hero__people-item--06 {
    transform: translate(-0.73rem, 0.59rem);
}

.hero__scrolldown {
    position: absolute;
    right: 0;
    bottom: calc(-60px * var(--hero-vh-scale));
    width: calc(120px * var(--hero-vh-scale));
}

/* ---------- main (headline + balloon + cta) ---------- */
.hero__main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: calc(543px * var(--hero-vh-scale));
}

.hero__h1-wrap {
    margin-bottom: calc(31px * var(--hero-vh-scale));
}

.hero__title {
    font-weight: 900;
    color: #000;
    line-height: 1;
}

.hero__title-line {
    display: block;
    white-space: normal;
}

.hero__title-big {
    font-size: calc(39px * var(--hero-vh-scale));
    line-height: 1.487;
    letter-spacing: 0.02em;
}

.hero__title-small {
    font-size: calc(30px * var(--hero-vh-scale));
    line-height: 1.487;
    letter-spacing: 0.02em;
}

.hero__logo {
    width: calc(341px * var(--hero-vh-scale));
    aspect-ratio: 341 / 63;
    margin-top: calc(12px * var(--hero-vh-scale));
}

.hero__balloon {
    display: flex;
    align-items: center;
    gap: calc(14px * var(--hero-vh-scale));
    margin-bottom: calc(38px * var(--hero-vh-scale));
}

.hero__balloon-bubble {
    position: relative;
    flex-shrink: 0;
    width: calc(176px * var(--hero-vh-scale));
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__balloon-bg {
    width: 100%;
    aspect-ratio: 176 / 180;
}

.hero__balloon-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #c21d1d;
    font-size: calc(19.84px * var(--hero-vh-scale));
    line-height: 1.169;
}

.hero__balloon-arrow {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.0125rem;
}

.hero__balloon-arrow img {
    width: calc(19px * var(--hero-vh-scale));
    aspect-ratio: 18.9345 / 13.0968;
    transform: rotate(90deg);
}

.hero__balloon-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(5px * var(--hero-vh-scale));
}

.hero__balloon-list li {
    background: #d54d24;
    color: #fff;
    font-size: calc(20px * var(--hero-vh-scale));
    line-height: 1.5;
    border-radius: calc(3px * var(--hero-vh-scale));
    padding: calc(1px * var(--hero-vh-scale)) calc(10px * var(--hero-vh-scale));
    white-space: nowrap;
}

.hero__cta {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: calc(14.4px * var(--hero-vh-scale)); /* 12px + 20% */
}

.hero__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 0.5rem;
    height: 4.3125rem;
    padding: 0 1.75rem;
    border-radius: 6.25rem;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0.375rem 0.4375rem 0 rgba(0, 0, 0, 0.1);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.hero__btn:hover {
    transform: translateY(-0.375rem);
    box-shadow: 0.375rem 0.6875rem 0 rgba(0, 0, 0, 0.1);
}

.hero__btn--download,
.hero__btn--line {
    height: auto;
    min-width: 0;
    padding: 0;
    background: none;
    box-shadow: none;
}

.hero__btn--download:hover,
.hero__btn--line:hover {
    box-shadow: none;
}

.hero__btn--download img,
.hero__btn--line img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* both pills are 69px tall in the design (104:2508 / 104:2497); giving each button
   a flex-basis matching its own native width keeps them proportionally identical
   while shrinking together (instead of independently) if the column is narrow */
.hero__btn--download {
    /* flex-shrink: 0 (inherited from .hero__btn) — the button keeps its full
     intended size and is allowed to overflow .hero__main into the visual's
     area rather than getting silently squeezed back down to fit */
    flex: 0 0 calc(248.4px * var(--hero-cta-scale)); /* 372.6px, sized back down to 2/3 */
}

.hero__btn--line {
    flex: 0 0 calc(229.08px * var(--hero-cta-scale)); /* 343.62px, sized back down to 2/3 */
}

/* ==========================================================================
   Layout: desktop (>768px) — visual on right, main on left
   ========================================================================== */
@media (min-width: 769px) {
    .hero__inner {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0;
    }

    .hero__main {
        order: 1;
        flex: 1 1 auto;
        min-width: 18.75rem; /* 300px floor so text never gets squeezed unreadably narrow */
        margin-top: calc(
            100px * var(--hero-vh-scale)
        ); /* renders as ~40px visible: align-items:center on the row absorbs part of any asymmetric margin */
        padding-left: calc(56px * var(--hero-vh-scale));
        box-sizing: border-box;
    }

    /* visual's size tracks viewport HEIGHT (not width), so a narrow-but-tall
     window never forces it to shrink the whole hero down with it */
    .hero__visual {
        order: 2;
        flex-shrink: 0;
        width: calc(742.4px * var(--hero-vh-scale));
        margin-left: calc(-25.6px * var(--hero-vh-scale));
    }

    .hero__title-line {
        white-space: nowrap;
    }
}

/* ==========================================================================
   Layout: mobile / SP (<=768px)
   ========================================================================== */
@media (max-width: 768px) {
    .hero {
        --hero-vh-scale: min(
            clamp(0.75, calc(100dvh / 860px), 1.25),
            calc((100vw - 48px) / 354px)
        );
    }

    .hero__visual {
        width: calc(402px * var(--hero-vh-scale));
        max-width: 100%;
        margin-top: calc(-16px * var(--hero-vh-scale));
    }

    .hero__scrolldown {
        display: none;
    }

    .hero__main {
        padding: 0 1.5rem; /* 24px, matches header gutter — a width gutter, not scaled by height */
        box-sizing: border-box;
        margin-top: calc(-96px * var(--hero-vh-scale));
        text-align: left;
    }

    .hero__logo {
        width: calc(187.2px * var(--hero-vh-scale));
    }

    /* mobile reference values (Figma node 104:3509) differ from desktop's,
     so they get their own calc() base instead of the desktop px figures */
    .hero__h1-wrap {
        margin-bottom: calc(20px * var(--hero-vh-scale));
    }

    .hero__title-big {
        font-size: calc(
            29px * var(--hero-vh-scale)
        ); /* 25.425px, sized up ~15% */
        line-height: 1.2; /* tighter than the shared 1.487 */
    }

    .hero__title-small {
        font-size: calc(
            22.5px * var(--hero-vh-scale)
        ); /* 19.558px, sized up ~15% */
        line-height: 1.2;
    }

    .hero__balloon {
        gap: calc(8px * var(--hero-vh-scale));
        margin-bottom: calc(24px * var(--hero-vh-scale));
    }

    .hero__balloon-bubble {
        width: calc(130.711px * var(--hero-vh-scale));
    }

    .hero__balloon-text {
        font-size: calc(14.757px * var(--hero-vh-scale));
    }

    .hero__balloon-arrow img {
        width: calc(16.052px * var(--hero-vh-scale));
    }

    .hero__balloon-list {
        gap: calc(3.7px * var(--hero-vh-scale));
    }

    .hero__balloon-list li {
        font-size: calc(14.854px * var(--hero-vh-scale));
        border-radius: calc(2.228px * var(--hero-vh-scale));
        padding: calc(0.74px * var(--hero-vh-scale))
            calc(7.4px * var(--hero-vh-scale));
    }

    .hero__cta {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__btn {
        flex: none;
        width: 100%;
        min-width: 0;
    }
    .hero__btn--download img,
    .hero__btn--line img {
        display: block;
        width: 90%;
        height: auto;
        margin: 0 auto;
    }

    .header {
        top: 1.3125rem; /* 21px */
        padding: 0 1.5rem; /* 24px both sides */
    }

    .header__inner {
        height: 2.7619rem; /* 44.19px */
    }

    .header__logo {
        width: 5.875rem; /* 94px */
        aspect-ratio: 94 / 44.19;
    }

    .header__menu-btn {
        width: 4.5rem; /* 72px */
        height: 1.7038rem; /* 27.26px */
        gap: 0.2125rem; /* 3.4px */
    }

    .header__menu-btn-bar {
        width: 0.8125rem; /* 13px */
        height: 0.1rem; /* 1.6px */
    }
}

.pc-only {
    display: block;
}
.sp-only {
    display: none;
}
@media (max-width: 768px) {
    .pc-only {
        display: none;
    }
    .sp-only {
        display: block;
    }
}

/* ==========================================================================
   About (problem cards + CTA)
   ========================================================================== */
.about {
    background: #ffc401;
    padding: 3.75rem 0;
    overflow: hidden;
}

.about__inner {
    width: 100%;
    max-width: 25.125rem; /* 402px */
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---------- title ---------- */
.about__title {
    text-align: center;
    margin-bottom: 2.625rem; /* 42px */
}

.about__title-eyes {
    width: 3.0625rem; /* 49px */
    margin: 0 auto 0.5rem;
}

.about__heading {
    margin-bottom: 1rem;
}

.about__heading img {
    margin: 0 auto;
    width: auto;
    max-width: 100%;
}

.about__lead {
    font-size: 0.9375rem; /* 15px */
    font-weight: 500;
    line-height: 1.867; /* 28px */
    color: #000;
}

/* ---------- grid / cards ---------- */
.about__grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 24px */
    margin-bottom: 2.75rem; /* 44px */
}

.about__card {
    position: relative;
    background: #fff;
    border-radius: 2.25rem; /* 36px */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.about__card-illust {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 1.5rem 1.5rem 0;
}

.about__card-illust img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.about__card-body {
    padding: 1rem 1.5rem 2rem;
}

.about__badge {
    display: inline-block;
    align-self: flex-start;
    background: #ffc401;
    color: #fff;
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    line-height: 1.75;
    padding: 0.125rem 0.8125rem;
    border-radius: 999px;
    margin-bottom: 0.625rem; /* 10px */
}

.about__card-title {
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    line-height: 1.556; /* 28px */
    color: #000;
    margin-bottom: 0.5rem;
}

.about__card-text {
    font-size: 1rem; /* 16px */
    font-weight: 400;
    line-height: 1.75; /* 28px */
    color: #505050;
}

/* ---------- CTA ---------- */
.about__cta {
    position: relative;
}

.about__cta-bgtext {
    display: none;
}

.about__cta-panel {
    position: relative;
    background-image: url("../img/about-bg-mobile.jpg");
    background-size: cover;
    background-position: center;
    border-radius: 1rem; /* 16px */
    box-shadow: 0 0.8686rem 0 0 #dca900; /* 13.897px */
    padding: 2.7625rem 0.75rem 14rem; /* bottom reserves room for mascots below the buttons */
    text-align: center;
    overflow: visible;
}

.about__cta-arrow {
    position: absolute;
    left: 38.79%;
    top: 2rem;
    width: 23.11%;
}

.about__cta-heading {
    padding-top: 2.5rem; /* 40px */
    font-size: 1.7283rem; /* 27.652px */
    font-weight: 900;
    line-height: 0.8;
    color: #d54d24;
    letter-spacing: 0.0345rem; /* 0.553px */
    margin-bottom: 1.5rem;
}

.about__cta-line1 {
    display: inline-block;
    margin-bottom: 0.75rem; /* 12px: the tight 0.8 line-height crams this line against the next one otherwise */
}

.about__cta-brand {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 2.0245rem; /* 32.392px */
    letter-spacing: 0;
}

.about__cta-emphasis {
    position: relative;
    display: inline-block;
    line-height: 2.8; /* reserves clearance above the glyphs so the dot row below doesn't get
    camouflaged against the same-colored bold text */
}

.about__cta-emphasis::after {
    content: "";
    position: absolute;
    left: 0.05em;
    right: 0.05em;
    top: 0.532em; /* dot row, nudged 8px lower than the native text-emphasis position */
    height: 0.343em;
    background-image: radial-gradient(
        circle 0.11em,
        #d54d24 99%,
        transparent 100%
    );
    background-size: 20% 100%;
    background-position: center;
    background-repeat: repeat-x;
    pointer-events: none;
}

.about__cta-mascot {
    position: absolute;
    z-index: 2;
}

.about__cta-mascot--1 {
    left: 13%;
    bottom: 2rem; /* 32px */
    width: 38.28%;
}

.about__cta-mascot--2 {
    left: 58.75%;
    bottom: 1.25rem; /* 20px */
    width: 29.57%;
}

.about__cta-mascot picture img {
    width: 100%;
    height: auto;
}

.about__cta-comma {
    display: none;
}

.about__cta-buttons {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem; /* 18px */
    margin-top: 1.3125rem; /* 21px, gap from heading */
}

.about__cta-btn {
    display: block;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.about__cta-btn:hover {
    transform: translateY(-0.375rem);
}

.about__cta-btn img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.about__cta-btn--download {
    width: 16.9375rem; /* 271px */
}

.about__cta-btn--line {
    width: 16.8125rem; /* 269px, mobile */
}

@media (min-width: 769px) {
    .about {
        padding: 6.25rem 0;
    }

    .about__inner {
        max-width: 73rem; /* 1168px */
        padding: 0 2rem;
    }

    .about__title {
        max-width: 40.75rem; /* 652px */
        margin: 0 auto 3.25rem;
    }

    .about__title-eyes {
        width: 4.25rem; /* 68px */
        margin-bottom: 0.75rem;
    }

    .about__lead {
        font-size: 1.125rem; /* 18px */
        line-height: 1.556; /* 28px */
    }

    .about__grid {
        max-width: 67.6875rem; /* 1083px */
        margin: 0 auto 3.8125rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1.3125rem; /* 21px */
        row-gap: 1.5rem; /* 24px */
    }

    .about__card {
        flex-direction: row;
    }

    .about__card-illust {
        flex: 0 0 13rem; /* 208px */
        padding: 0;
        align-self: stretch;
    }

    .about__card-illust--short {
        aspect-ratio: 208 / 243;
    }

    .about__card-illust--tall {
        aspect-ratio: 208 / 260;
    }

    .about__card-illust img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
    }

    .about__card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem 1.75rem;
    }

    .about__badge {
        font-size: 0.75rem;
    }

    .about__card-title {
        font-size: 1.25rem; /* 20px */
        line-height: 1.4; /* 28px */
    }

    .about__cta-panel {
        max-width: 52.8125rem; /* 845px */
        margin: 0 auto;
        background-image: url("../img/about-bg-desktop.jpg");
        border-radius: 2.25rem; /* 36px */
        box-shadow: 0 0.875rem 0 0 #dca900; /* 14px */
        padding: 4.5rem 3.75rem 3.75rem;
    }

    .about__cta-bgtext {
        display: block;
        position: absolute;
        left: calc(-50vw + 50%);
        right: calc(-50vw + 50%);
        top: 44%;
        transform: translateY(-50%);
        overflow: hidden;
        z-index: 0;
        pointer-events: none;
    }

    .about__cta-bgtext-track {
        display: flex;
        width: max-content;
        animation: about-bgtext-scroll 22s linear infinite;
    }

    .about__cta-bgtext-track span {
        flex: none;
        font-family: "Chillax", "Noto Sans JP", sans-serif;
        font-weight: 700;
        font-size: 12.5rem; /* 200px */
        line-height: 1;
        color: #e8b200;
        letter-spacing: 0.25rem; /* 4px */
        white-space: nowrap;
        padding-right: 5rem; /* gap between repeats */
    }

    @keyframes about-bgtext-scroll {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50%);
        }
    }

    .about__cta-arrow {
        left: 43.9%;
        top: 3.5rem;
        width: 13.85%;
    }

    .about__cta-heading {
        font-size: 2.1875rem; /* 35px */
        line-height: 0.8;
        letter-spacing: 0.04375rem; /* 0.7px */
        margin: 2rem 0;
    }

    .about__cta-brand {
        font-size: 2.5625rem; /* 41px */
    }

    .about__cta-mascot--1 {
        left: -15.15%;
        top: 14%;
        width: 29.11%;
    }

    .about__cta-mascot--2 {
        left: 92.78%;
        top: 29.23%;
        width: 22.49%;
    }

    .about__cta-comma {
        display: block;
        position: absolute;
        left: 30.5%;
        top: 46.1%;
        width: 0.6875rem; /* 11px */
    }

    .about__cta-buttons {
        flex-direction: row;
        justify-content: center;
        gap: 0.75rem; /* 12px */
        margin-top: 3rem;
    }

    .about__cta-btn--download {
        width: 16.9375rem; /* 271px */
    }

    .about__cta-btn--line {
        width: 15.625rem; /* 250px */
    }
}

/* ==========================================================================
   Results (testimonial / stats)
   ========================================================================== */
.results {
    position: relative;
    z-index: 1; /* .voice sits above and overlaps this section's bottom edge */
    background: #017dca;
    overflow: hidden;
    border-radius: 2.25rem 2.25rem 0 0; /* 36px, mobile: top corners only */
    padding: 2.8125rem 0 7.1875rem; /* bottom clears .voice's 65px overlap, plus 50px of visible margin below #results */
}

.results__inner {
    position: relative;
    max-width: 25.125rem; /* 402px */
    margin: 0 auto;
    padding: 0 1.5rem;
}

.results__bg {
    display: none; /* desktop-only decorative scatter, see min-width:769px */
}

.results__header {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    margin-bottom: 1.5rem;
}

.results__eyebrow {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 0.75rem; /* 12px */
    margin-bottom: 0.25rem;
}

.results__heading {
    font-size: 1.875rem; /* 30px */
    font-weight: 900;
}

.results__card-wrap {
    position: relative;
    z-index: 1;
}

.results__h3 {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: -2.25rem;
}

.results__h3 img {
    margin: 0 auto;
    width: 100%;
    max-width: 21.25rem; /* 340px */
    height: auto;
}

.results__card {
    position: relative;
    z-index: 1;
    background-image: linear-gradient(
        97.84deg,
        #ffc300 2.2678%,
        #ffc401 17.444%,
        #00b6ff 97.921%
    );
    border-radius: 2.75rem; /* 44px */
    box-shadow: 0.4375rem 0.5rem 0.00625rem 0 rgba(0, 0, 0, 0.25);
    padding: 0.5625rem; /* ~9px inset for the white inner card */
}

.results__card-inner {
    background: #fff;
    border-radius: 2.1875rem; /* 35px */
    padding: 2.875rem 1.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.results__voice-badge {
    display: block;
    width: 5.5rem; /* 88px */
    height: auto;
    margin-bottom: -0.75rem;
}

.results__quote {
    background: #ffc401;
    border-radius: 1rem; /* 16px */
    padding: 1.75rem 1.25rem;
    width: 100%;
}

.results__quote p {
    color: #2e2402;
    font-size: 1.0625rem; /* 17px */
    font-weight: 700;
    line-height: 1.647; /* 28px */
    text-align: center;
}

.results__quote-emphasis {
    display: inline-block;
    line-height: 2.294; /* 39px */
}

.results__quote + picture {
    margin-top: -1.5rem; /* cancels .results__card-inner's gap for this pair only */
}

.results__uservoice {
    width: 100%;
    max-width: 18.9375rem; /* 303px */
    height: auto;
}

.results__divider {
    width: 100%;
    border: none;
    height: 1px;
    background: #d9d9d9;
    margin: 0;
}

.results__stats {
    width: 100%;
    height: auto;
}

.results__bubble {
    display: none; /* desktop-only decoration, see min-width:769px */
}

@keyframes results-bubble-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.75rem);
    }
}

@media (min-width: 769px) {
    .results {
        border-radius: 5rem; /* 80px */
        padding: 4.5625rem 0 20rem; /* bottom clears .voice's 149px overlap + the floating bubble's own overflow */
    }

    .results__inner {
        max-width: 80rem; /* 1280px */
        padding: 0 2rem;
    }

    .results__bg {
        display: block;
        position: absolute;
        left: -12.96%;
        top: 3.2%;
        width: 125.6%; /* 95.15% * 1.2 * 1.1, center kept fixed */
        height: 80.96%; /* 61.33% * 1.2 * 1.1, center kept fixed */
        pointer-events: none;
    }

    .results__bg img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .results__header {
        margin-bottom: 2rem;
    }

    .results__eyebrow {
        font-size: 1.25rem; /* 20px */
    }

    .results__heading {
        font-size: 2.6rem; /* 41.6px */
    }

    .results__card-wrap {
        max-width: 50.1875rem; /* 803px */
        margin: 0 auto;
    }

    .results__h3 {
        margin-bottom: -4.375rem;
    }

    .results__h3 img {
        max-width: 37.75rem; /* 604px */
    }

    .results__card-inner {
        padding: 5.5rem 3rem 2.5rem;
        gap: 2rem;
    }

    .results__voice-badge {
        width: 5.9375rem; /* 95px */
        margin-bottom: -1rem;
    }

    .results__quote {
        padding: 2rem 2.5rem;
    }

    .results__quote p {
        font-size: 1.125rem; /* 18px */
    }

    .results__uservoice {
        max-width: 21.5rem; /* 344px */
    }

    .results__quote + picture {
        margin-top: -2rem; /* cancels .results__card-inner's desktop gap for this pair only */
    }

    .results__bubble {
        display: block;
        position: absolute;
        right: -11.5rem;
        bottom: -2.5rem;
        z-index: 3;
        width: 16.0625rem; /* 257px */
        animation: results-bubble-float 3s ease-in-out infinite;
    }

    .results__bubble img {
        width: 100%;
        height: auto;
    }
}

/* ==========================================================================
   Voice (testimonial cards)
   ========================================================================== */
.voice {
    position: relative;
    z-index: 2; /* sits in front, overlapping .results' bottom edge */
    background: #13c4a4;
    overflow: hidden;
    border-radius: 2.25rem; /* 36px */
    margin-top: -4.0625rem; /* 65px, tucks up under .results */
    padding: 3.75rem 0 3rem;
}

.voice__inner {
    position: relative;
    max-width: 25.125rem; /* 402px */
    margin: 0 auto;
    padding: 0 1.5rem;
}

.voice__bg {
    display: none; /* desktop-only decorative tile, see min-width:769px */
}

.voice__header {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    margin-bottom: 1.875rem; /* 30px */
}

.voice__eyebrow {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    margin-bottom: 0.25rem;
}

.voice__heading {
    font-size: 1.875rem; /* 30px */
    font-weight: 900;
}

.voice__list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3.375rem; /* 54px: clears the 30px mascot overlap + ~24px card gap */
}

.voice__card {
    position: relative;
}

.voice__mascot {
    position: absolute;
    left: -1.5625rem; /* 25px inset from card left edge, matches Figma */
    top: -1.875rem; /* 30px */
    z-index: 0;
    width: 8rem; /* 128px */
}

.voice__mascot img {
    width: 100%;
    height: auto;
}

.voice__bubble {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 4.5rem 1.5rem 1.5rem 0.25rem; /* 72px 24px 24px 4px */
    padding: 1.625rem 1.5rem 1.75rem;
}

.voice__highlight {
    position: relative;
    width: 100%;
    height: 8.375rem; /* 134px */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.1875rem; /* 19px */
    color: var(--voice-accent);
    margin-bottom: 1.25rem;
}

.voice__highlight::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--voice-accent);
    opacity: 0.16;
    border-radius: 3.1875rem 1.5rem 1.5rem 0.5625rem; /* 51px 24px 24px 9px */
}

.voice__highlight span {
    position: relative;
}

.voice__meta {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.voice__tag {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 0.875rem; /* 14px */
    color: var(--voice-accent);
    margin-right: 0.4375rem;
}

.voice__connector {
    width: 0.875rem; /* 14px */
    height: 0.1875rem; /* 3px */
    background: var(--voice-accent);
    border-radius: 999px;
}

.voice__role {
    background: var(--voice-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem; /* 14px */
    padding: 0.25rem 1rem;
    border-radius: 999px;
    white-space: nowrap;
    margin-left: -0.25rem; /* slight overlap with the connector, no gap */
}

.voice__text {
    color: #3b423f;
    font-weight: 700;
    font-size: 1rem; /* 16px */
    line-height: 1.75; /* 28px */
}

.voice__card--3 {
    order: 3;
}

.voice__card--4 {
    order: 2;
}

@media (min-width: 769px) {
    .voice {
        border-radius: 5rem; /* 80px */
        margin-top: -9.3125rem; /* 149px */
        padding: 7.375rem 0 6.25rem;
    }

    .voice__inner {
        max-width: 80rem; /* 1280px */
        padding: 0 2rem;
    }

    .voice__bg {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .voice__bg img {
        position: absolute;
        left: 2.3125rem; /* 37px */
        width: 95.13%;
        height: auto;
    }

    .voice__bg img:first-child {
        top: 4.5rem; /* 72px */
    }

    .voice__bg img:last-child {
        top: 40.31%;
    }

    .voice__header {
        margin-bottom: 2.5rem;
    }

    .voice__eyebrow {
        margin-bottom: 0.5rem;
    }

    .voice__heading {
        font-size: 2.6rem; /* 41.6px */
    }

    .voice__list {
        max-width: 59.9375rem; /* 959px */
        margin: 0 auto;
        gap: 2.25rem; /* 36px */
    }

    .voice__card--3,
    .voice__card--4 {
        order: 0;
    }

    .voice__mascot {
        left: -2.375rem; /* 38px */
        top: -1.875rem; /* 30px */
        width: 8rem;
    }

    .voice__bubble {
        display: flex;
        align-items: center;
        gap: 2rem;
        padding: 1.5rem 2.75rem;
        border-radius: 5.5625rem 12.5rem 12.5rem 0.6875rem; /* 89px 200px 200px 11px */
        max-width: 45.625rem; /* 730px */
    }

    .voice__highlight {
        flex: 0 0 9.6875rem; /* 155px */
        width: auto;
        height: 8.375rem; /* 134px */
        margin-bottom: 0;
    }

    .voice__highlight::before {
        border-radius: 3.1875rem 3.625rem 3.625rem 0.5625rem; /* 51px 58px 58px 9px */
    }

    .voice__content {
        flex: 1;
    }

    .voice__meta {
        margin-bottom: 0.5rem;
    }

    .voice__text {
        font-size: 1rem;
    }

    /* right-facing cards: mascot + highlight swap to the right */
    .voice__card--2,
    .voice__card--4 {
        display: flex;
        justify-content: flex-end;
    }

    .voice__card--2 .voice__mascot,
    .voice__card--4 .voice__mascot {
        left: auto;
        right: -2.375rem;
    }

    .voice__card--2 .voice__bubble,
    .voice__card--4 .voice__bubble {
        flex-direction: row-reverse;
        border-radius: 12.5rem 5.5625rem 0.6875rem 12.5rem; /* 200px 89px 11px 200px */
    }

    .voice__card--2 .voice__highlight::before,
    .voice__card--4 .voice__highlight::before {
        border-radius: 3.625rem 3.1875rem 0.5625rem 3.625rem; /* 58px 51px 9px 58px */
    }
}

/* ==========================================================================
   Commitment (Hug Studioのこだわり)
   ========================================================================== */
.commitment {
    position: relative;
    background: #ffc401;
    overflow: hidden;
    padding: 3.75rem 0 3rem;
}

.commitment__bg-anchor {
    position: relative;
}

.commitment__bg {
    position: absolute;
    left: 50%;
    right: 50%;
    top: -3.6875rem; /* 59px: bg's top edge sits just behind h3, not flush with the section top */
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    height: 35.1875rem; /* 563px */
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.commitment__bg img {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 25.125rem; /* 402px, matches the mobile design width */
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.commitment__inner {
    position: relative;
    z-index: 1;
    max-width: 25.125rem; /* 402px */
    margin: 0 auto;
    padding: 0 1.5rem;
}

.commitment__header {
    text-align: center;
    color: #000;
    margin-bottom: 1.5rem;
}

.commitment__eyebrow {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    margin-bottom: 0.25rem;
}

.commitment__heading {
    font-weight: 900;
}

.commitment__heading-brand {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 2.5145rem; /* 40.229px */
}

.commitment__heading-no {
    font-size: 1.7033rem; /* 27.252px */
}

.commitment__heading-kotawari {
    font-size: 2.109rem; /* 33.741px */
}

/* ---------- infinite scroll marquee ---------- */
.commitment__scroll-wrap {
    position: relative;
    z-index: 2; /* front of the section, above .commitment__bg's upward bleed */
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    overflow: hidden;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.commitment__scroll-track {
    display: flex;
    align-items: flex-start;
    width: max-content;
    gap: 1.5rem; /* 24px */
    padding: 0 0.75rem;
    animation: commitment-scroll 36s linear infinite;
}

@keyframes commitment-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.commitment__scroll-item {
    display: block;
    flex: none;
    width: 17.15rem; /* 274.4px, ~80% of the desktop 343px source */
    height: auto;
}

/* ---------- lead paragraph ---------- */
.commitment__lead {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.733; /* 26px */
    text-align: center;
    max-width: 22.0625rem; /* 353px */
    margin: 0 auto 2rem;
}

/* ---------- h3 ---------- */
.commitment__h3 {
    text-align: center;
    font-weight: 900;
    font-size: 1.75rem; /* 27.994px */
    line-height: 1.322; /* 37px */
    margin: 2rem 0 2.5rem;
}

.commitment__h3-brand {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 2.002rem; /* 32.032px */
}

.commitment__h3-underline {
    position: relative;
    display: inline-block;
    margin-top: 0.75rem; /* 12px: keeps the dot row (pulled up via ::after) clear of the line above */
}

.commitment__h3-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.5rem;
    height: 0.375rem;
    background-image: url("../img/commitment-h3-dots-mobile.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* ---------- h3-wrap (h3 + flanking phone illustrations) ---------- */
.commitment__h3-wrap {
    position: relative;
    z-index: 1;
}

.commitment__phone {
    display: none; /* not part of the visible mobile design, see min-width:769px */
}

/* ---------- feature cards ---------- */
.commitment__grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.commitment__card {
    position: relative;
    background: #fff;
    border-radius: 2.25rem; /* 36px */
    padding: 1.5rem 1.5625rem 2rem;
}

.commitment__card-illust {
    margin-bottom: 1rem;
}

.commitment__card-illust img {
    width: 100%;
    height: auto;
}

.commitment__card-title {
    font-weight: 900;
    font-size: 1.125rem; /* 18px */
    line-height: 1.667; /* 30px */
    color: var(--card-accent);
    margin-bottom: 0.75rem;
    text-align: center;
}

.commitment__card-text {
    font-weight: 400;
    font-size: 0.875rem; /* 14px */
    line-height: 2.143; /* 30px */
    color: #363636;
}

.commitment__card--1 {
    --card-accent: #0091d4;
}

.commitment__card--2 {
    --card-accent: #d54d24;
}

.commitment__card--3 {
    --card-accent: #007942;
}

.commitment__contents2 img {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .commitment__contents2 {
        position: relative;
        left: 50%;
        right: 50%;
        width: 100vw;
        margin-left: -50vw;
        margin-right: -50vw;
    }
}

@media (min-width: 769px) {
    .commitment {
        padding: 6.25rem 0 6.25rem;
    }

    .commitment__inner {
        max-width: 80rem; /* 1280px */
        padding: 0 2rem;
    }

    .commitment__bg {
        top: -3.3125rem; /* 53px */
        height: 55.375rem; /* 886px */
    }

    .commitment__bg img {
        width: 80rem; /* 1280px */
        max-width: none;
    }

    .commitment__header {
        margin-bottom: 2.5rem;
    }

    .commitment__heading-brand {
        font-size: 3.1rem; /* 49.6px */
    }

    .commitment__heading-no {
        font-size: 2.1rem; /* 33.6px */
    }

    .commitment__heading-kotawari {
        font-size: 2.6rem; /* 41.6px */
    }

    .commitment__scroll-track {
        gap: 1.5625rem; /* 25px */
        padding: 0 1rem;
        animation-duration: 60s;
    }

    .commitment__scroll-item {
        width: 21.4375rem; /* 343px */
    }

    .commitment__lead {
        font-size: 1.25rem; /* 20px */
        line-height: 1.75; /* 35px */
        max-width: 42.625rem; /* 682px */
    }

    .commitment__h3-wrap {
        max-width: 46.8rem; /* 748.8px, matches h3 so the flanking phones anchor to h3's true edges */
        margin: 0 auto;
    }

    .commitment__h3 {
        font-size: 2.4398rem; /* 39.036px */
        line-height: 1.847; /* 72.046px */
        margin: 2.5rem 0 3rem;
    }

    .commitment__h3-brand {
        font-size: 2.7916rem; /* 44.666px */
    }

    .commitment__h3-underline::after {
        background-image: url("../img/commitment-h3-dots-desktop.png");
        top: -0.5rem;
        height: 0.5rem;
    }

    .commitment__phone {
        display: block;
        position: absolute;
        top: -3.3125rem; /* 53px */
        z-index: 2;
        width: 13.1875rem; /* 211px */
        height: auto;
    }

    .commitment__phone--left {
        right: calc(100% + 3.625rem); /* 58px gap from h3's left edge */
    }

    .commitment__phone--right {
        left: calc(100% + 3.625rem); /* 58px gap from h3's right edge */
    }

    .commitment__grid {
        flex-direction: row;
        justify-content: center;
        gap: 1.3125rem; /* 21px */
        max-width: 68.75rem; /* 1100px */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 4.5rem;
    }

    .commitment__card {
        flex: 1 1 22rem;
        max-width: 22.0625rem; /* 353px */
        padding: 2rem 1.9375rem 2.5rem;
    }

    .commitment__card-title {
        font-size: 1.1875rem; /* 19px */
    }

    .commitment__card-text {
        font-size: 0.9375rem; /* 15px */
        line-height: 2; /* 30px */
    }
}

/* ==========================================================================
   Photo (写真撮影サービス)
   ========================================================================== */
.photo {
    position: relative;
    padding: 2rem 0;
    overflow-x: hidden;
}

.photo__inner {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    background: #fff;
    border-radius: 4rem; /* 64px */
}

.photo__content {
    position: relative;
    max-width: 25.125rem; /* 402px, matches the mobile design width */
    margin: 0 auto;
    padding: 7.3125rem 1.5rem 2.3125rem; /* 117px 24px 37px */
}

/* ---------- bg marquee text ---------- */
.photo__bgtext {
    position: absolute;
    left: calc(-50vw + 50%);
    right: calc(-50vw + 50%);
    top: 6rem;
    height: 9rem;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.photo__bgtext-track {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    animation: photo-bgtext-scroll 52s linear infinite;
}

.photo__bgtext-track span {
    flex: none;
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 7.8387rem; /* 125.419px */
    line-height: 1;
    color: rgba(236, 110, 67, 0.13);
    white-space: nowrap;
    padding-right: 5rem;
}

@keyframes photo-bgtext-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ---------- header ---------- */
.photo__header {
    position: relative;
    z-index: 1;
}

.photo__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15.25rem; /* 244px */
    height: 3.8365rem; /* 61.384px */
    background-image: url("../img/photo-badge.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
    font-size: 1.3456rem; /* 21.529px */
    font-weight: 900;
    text-align: center;
    margin-bottom: 1.6rem; /* 25.6px */
}

@media (max-width: 768px) {
    .photo__badge {
        width: 10.1667rem; /* 162.67px, 2/3 of 244px */
        height: 2.5577rem; /* 40.92px, 2/3 of 61.384px */
        font-size: 0.8971rem; /* 14.35px, 2/3 of 21.529px */
    }
}

.photo__heading {
    color: #000;
    font-size: 2rem; /* 32px */
    font-weight: 900;
    line-height: 2.8125rem; /* 45px */
    margin-bottom: 1.1875rem; /* 19px */
    font-feature-settings: "palt" 1;
}

.photo__heading-line1 {
    white-space: nowrap;
}

.photo__heading-light {
    font-weight: 300;
}

.photo__lead {
    color: #000;
    font-size: 0.9375rem; /* 15px */
    font-weight: 500;
    line-height: 1.6875rem; /* 27px */
}

.photo__catch {
    display: none;
    aspect-ratio: 296 / 365.619;
}

/* ---------- cards ---------- */
.photo__grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
    margin: 2.75rem 0 3.625rem; /* 44px top, 58px bottom */
}

.photo__card {
    background: #fdece7;
    border-radius: 2.25rem; /* 36px */
    padding: 1.9375rem 2.25rem 2.5rem; /* 31px 36px 40px */
}

.photo__card-illust {
    margin-bottom: 2.8125rem; /* 45px */
}

.photo__card-illust img {
    width: 100%;
    height: auto;
}

.photo__card3-illust {
    aspect-ratio: 277 / 198.472;
}

.photo__card-illust--3 {
    margin-bottom: 1.125rem; /* 18px: SVG has ~14% transparent bottom padding baked in, so less margin is needed to match the other cards' visual gap */
}

.photo__card-title {
    color: #d54d24;
    font-size: 1.1875rem; /* 19px */
    font-weight: 900;
    line-height: 1.875rem; /* 30px */
    text-align: center;
    margin-bottom: 0.875rem; /* 14px */
}

.photo__card-text {
    color: #d54d24;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 1.875rem; /* 30px */
}

/* ---------- scroll photo marquee ---------- */
.photo__scroll-wrap {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    overflow: hidden;
    margin-bottom: 1.375rem; /* 22px */
}

.photo__scroll-track {
    display: flex;
    align-items: flex-start;
    width: max-content;
    gap: 1.9375rem; /* 31px */
    padding: 0 1.9375rem;
    animation: photo-scroll-marquee 42s linear infinite;
}

.photo__scroll-img {
    flex: none;
    width: 19.125rem; /* 306px */
    height: 12.75rem; /* 204px */
    object-fit: cover;
}

.photo__scroll-img:nth-child(4n + 2) {
    width: 20.25rem; /* 324px */
    height: 13.5rem; /* 216px */
    margin-top: 3.5rem; /* 56px stagger */
}

.photo__scroll-img:nth-child(4n + 3) {
    width: 20.25rem; /* 324px */
    height: 13.4375rem; /* 215px */
}

.photo__scroll-img:nth-child(4n + 4) {
    width: 20.25rem; /* 324px */
    height: 13.5625rem; /* 217px */
    margin-top: 3.5rem; /* 56px stagger */
}

@keyframes photo-scroll-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ---------- movie ---------- */
.photo__movie {
    position: relative;
    background: #ec6e43;
    border-radius: 2.25rem; /* 36px */
    overflow: hidden;
    padding: 2.5rem 1.4375rem 3.5rem; /* 40px 23px 56px */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.photo__movie-bgtext {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.photo__movie-bgtext-track {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    animation: photo-bgtext-scroll 90s linear infinite;
}

.photo__movie-bgtext-track span {
    flex: none;
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 7.8387rem; /* 125.419px */
    line-height: 1;
    color: rgba(255, 255, 255, 0.13);
    white-space: nowrap;
    padding-right: 5rem;
}

.photo__movie-illust {
    position: relative;
    z-index: 1;
    width: 19.125rem; /* 306px */
    height: auto;
    margin-bottom: 0.5625rem; /* 9px */
}

.photo__movie-text {
    position: relative;
    z-index: 1;
    width: 100%;
}

.photo__movie-h3 {
    color: #fff;
    font-size: 1.5rem; /* 24px */
    font-weight: 900;
    line-height: 3.125rem; /* 50px */
}

.photo__movie-p {
    color: #fff;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 1.875rem; /* 30px */
    margin-top: 1.0625rem; /* 17px */
}

@media (min-width: 769px) {
    .photo {
        padding: 4rem 0 4.5rem;
    }

    .photo__content {
        max-width: 68.75rem; /* 1100px */
        padding: 11.1125rem 2rem 8.4375rem; /* 177.8px 32px 135px */
    }

    .photo__heading {
        font-size: 2.6rem; /* 41.6px */
        line-height: 3.625rem; /* 58px */
        margin-bottom: 1.125rem; /* 18px */
    }

    .photo__lead {
        font-size: 1.125rem; /* 18px */
        line-height: 2.4375rem; /* 39px */
    }

    .photo__catch {
        display: block;
        position: absolute;
        top: -9.05rem; /* -144.8px */
        right: 0.625rem; /* 10px */
        width: 18.5rem; /* 296px */
        z-index: 0;
    }

    .photo__grid {
        flex-direction: row;
        gap: 1.3125rem; /* 21px */
        margin: 3.125rem 0 4rem; /* 50px top, 64px bottom */
    }

    .photo__card {
        flex: 1 1 22rem;
        max-width: 22rem; /* 352px */
    }

    .photo__card-illust--3 {
        margin-bottom: 1.1875rem; /* 19px, same compensation at the desktop illust size */
    }

    .photo__scroll-wrap {
        margin-bottom: 4.1875rem; /* 67px */
    }

    .photo__movie {
        flex-direction: row;
        align-items: flex-start;
        padding: 2.3125rem 0 3.325rem 10.25rem; /* 37px 0 53.2px 164px */
        gap: 3.25rem; /* 52px */
    }

    .photo__movie-illust {
        flex: none;
        width: 19.625rem; /* 314px */
        margin-bottom: 0;
    }

    .photo__movie-text {
        width: auto;
        max-width: 26.1875rem; /* 419px */
        padding-top: 0.25rem;
    }

    .photo__movie-h3 {
        font-size: 1.9792rem; /* 31.667px */
    }

    .photo__movie-p {
        margin-top: 1.25rem; /* 20px */
    }
}

/* ==========================================================================
   Reason (保育園のことをわかっている制作会社です)
   ========================================================================== */
.reason {
    position: relative;
    background: #ffc401;
    padding: 0 0 3rem;
}

.reason__inner {
    max-width: 25.125rem; /* 402px */
    margin: 0 auto;
    padding: 0 1.5rem;
}

.reason__grid {
    display: flex;
    flex-direction: column;
}

/* ---------- header ---------- */
.reason__header {
    text-align: center;
    color: #000;
    margin-bottom: 1.875rem; /* 30px */
}

.reason__eyebrow {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    line-height: 2.275rem; /* 36.4px */
    margin-bottom: 0.1875rem;
}

.reason__heading {
    font-size: 1.875rem; /* 30px */
    font-weight: 900;
    line-height: 2.6875rem; /* 43px */
    font-feature-settings: "palt" 1;
}

/* ---------- bg photo collage ---------- */
.reason__bg-col {
    position: relative;
    overflow: hidden;
    margin: 0 -1.5rem 2.25rem; /* bleed to viewport edges on mobile */
}

.reason__bg-track {
    display: flex;
    align-items: flex-start;
    width: max-content;
    padding: 0;
    animation: reason-bg-scroll-x 34s linear infinite;
}

.reason__bg-tile {
    flex: none;
    display: block;
}

@media (max-width: 768px) {
    .reason__bg-tile {
        height: 20.5rem; /* 328px, half of the natural render size */
        width: auto;
    }
}

.reason__bg-tile:nth-child(4n + 1) {
    margin-left: 0;
    margin-top: 0;
}
.reason__bg-tile:nth-child(4n + 2) {
    margin-left: 2.125rem;
    margin-top: 4.375rem;
}
.reason__bg-tile:nth-child(4n + 3) {
    margin-left: 3.3125rem;
    margin-top: 0.5625rem;
}
.reason__bg-tile:nth-child(4n + 4) {
    margin-left: 3.0625rem;
    margin-top: 4.5rem;
}

@keyframes reason-bg-scroll-x {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ---------- cards ---------- */
.reason__cards {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
}

.reason__card {
    background: #fff;
    border-radius: 1.5rem; /* 24px */
    padding: 1.5rem 1.4375rem 1.75rem; /* 24px 23px 28px */
}

.reason__card-icon-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 9.4375rem; /* 151px */
    background: #ffc401;
    border-radius: 0.9375rem; /* 15px */
    margin-bottom: 0.5625rem; /* 9px */
}

.reason__card-icon-bg img {
    max-width: 60%;
    max-height: 60%;
    height: auto;
}

.reason__card-label {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 0.75rem; /* 12px */
    color: #ffc401;
    margin-bottom: 0.5rem;
}

.reason__card-label--1 {
    display: block;
}

.reason__card-title {
    color: #0d0d0d;
    font-size: 1.25rem; /* 20px */
    font-weight: 900;
    line-height: 1.5; /* 30px */
    margin-bottom: 0.75rem; /* 12px */
}

.reason__card-text {
    color: #565656;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 1.6875rem; /* 27px */
}

@media (min-width: 769px) {
    .reason {
        padding: 0 0 14.25rem;
    }

    .reason__inner {
        max-width: 68.75rem; /* 1100px */
        padding: 0 2rem;
    }

    .reason__grid {
        position: relative;
        display: block;
        padding-right: 24.6875rem; /* 355px tile column + 40px gap */
    }

    .reason__header {
        text-align: left;
        margin-bottom: 3.625rem; /* 58px */
    }

    .reason__heading {
        font-size: 2.6rem; /* 41.6px */
        line-height: 3.4375rem; /* 55px */
    }

    .reason__bg-col {
        position: absolute;
        top: 0; /* .reason no longer has top padding, so this already sits flush at the #photo boundary */
        right: 0;
        bottom: 0; /* .recruit is pulled up beneath this via negative margin; #recruit paints on top of the overlap */
        width: 22.1875rem; /* 355px */
        margin: 0;
        border-radius: 0;
    }

    .reason__bg-col::before,
    .reason__bg-col::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 4rem; /* 64px fade */
        z-index: 1; /* .reason__bg-track's animation gives it its own stacking context, which would otherwise paint over ::before */
        pointer-events: none;
    }

    .reason__bg-col::before {
        top: 0;
        background: linear-gradient(
            to bottom,
            #ffc401 0%,
            rgba(255, 196, 1, 0) 100%
        );
    }

    .reason__bg-col::after {
        bottom: 0;
        background: linear-gradient(
            to top,
            #ffc401 0%,
            rgba(255, 196, 1, 0) 100%
        );
    }

    .reason__bg-track {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        height: max-content;
        padding: 0;
        animation: reason-bg-scroll-y 40s linear infinite;
    }

    .reason__bg-tile:nth-child(4n + 1) {
        width: 14.25rem; /* 228px, left-aligned */
        margin-left: 0;
        margin-top: 1.8125rem;
    } /* 29px wrap gap */
    .reason__bg-tile:nth-child(4n + 2) {
        width: 17.6875rem; /* 283px, right-aligned */
        margin-left: 4.5rem; /* 72px: 355px column - 283px tile */
        margin-top: 4.4375rem;
    } /* 71px gap */
    .reason__bg-tile:nth-child(4n + 3) {
        width: 14.25rem; /* 228px, left-aligned */
        margin-left: 0;
        margin-top: 3.375rem;
    } /* 54px gap */
    .reason__bg-tile:nth-child(4n + 4) {
        width: 12.5625rem; /* 201px, right-aligned */
        margin-left: 9.625rem; /* 154px: 355px column - 201px tile */
        margin-top: 1.6875rem;
    } /* 27px gap */

    @keyframes reason-bg-scroll-y {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-50%);
        }
    }

    .reason__cards {
        grid-area: cards;
        gap: 1rem; /* 16px */
    }

    .reason__card {
        display: flex;
        align-items: flex-start;
        padding: 0.875rem 2.5625rem 0.875rem 0.9375rem; /* 14px 41px 14px 15px */
        gap: 2.5rem; /* 40px */
    }

    .reason__card-icon-bg {
        flex: none;
        width: 9.4375rem; /* 151px */
        height: 9.4375rem; /* 151px */
        margin-bottom: 0;
    }

    .reason__card-icon-bg img {
        max-width: 70%;
        max-height: 70%;
    }

    .reason__card-body {
        flex: 1;
        padding-top: 0.25rem;
    }

    .reason__card-title {
        font-size: 1.375rem; /* 22px */
    }

    .reason__card-text {
        max-width: 28.4375rem; /* 455px */
    }
}

/* ==========================================================================
   Recruit (保育士の採用もホームページで変わります)
   ========================================================================== */
.recruit {
    position: relative;
    z-index: 1;
    background: #ffc401;
    overflow-x: hidden;
}

.recruit__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.recruit__bg-ellipse {
    position: absolute;
    left: 50%;
    top: 5.5rem; /* 88px */
    transform: translateX(-50%);
    width: 200%;
    aspect-ratio: 1396 / 740;
    background: #ffedcd;
    border-radius: 50%;
}

.recruit__bg-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: #ffeed1;
    font-size: 1.251rem; /* 20.02px */
    font-weight: 900;
    line-height: 1.752rem; /* 28px */
}

.recruit__bg-arc {
    position: absolute;
    left: 50%;
    top: 5.5rem; /* 88px, matches the ellipse */
    transform: translateX(-50%);
    width: 200%;
    aspect-ratio: 1396 / 740;
    overflow: visible;
}

.recruit__bg-arc-text {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 40px;
    fill: #ffedcd;
}

.recruit__bg-arc-of {
    font-weight: 400;
}

.recruit__bg-rect {
    position: absolute;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    top: 29.9375rem; /* 479px */
    bottom: 0;
    background: #ffedcd;
}

.recruit__inner {
    position: relative;
    z-index: 1;
    max-width: 25.125rem; /* 402px */
    margin: 0 auto;
    padding: 7.9375rem 1.5rem 3rem; /* 127px top */
}

/* ---------- header ---------- */
.recruit__header {
    text-align: center;
    margin-bottom: 2.75rem; /* 44px */
}

.recruit__catch {
    width: 4.384rem; /* 70.14px */
    height: auto;
    aspect-ratio: 70.144 / 68.903;
    margin: 0 auto 0.875rem;
}

.recruit__heading {
    color: #000;
    font-size: 1.875rem; /* 30px */
    font-weight: 900;
    line-height: 2.8125rem; /* 45px */
    font-feature-settings: "palt" 1;
    margin-bottom: 1.5625rem; /* 25px */
}

.recruit__lead {
    color: #0d0d0d;
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    line-height: 1.8125rem; /* 29px */
}

/* ---------- cards ---------- */
.recruit__cards {
    display: flex;
    flex-direction: column;
    gap: 2.25rem; /* 36px */
    max-width: 17.269rem; /* 276.3px, matches the illustration box width */
    margin: 0 auto;
}

.recruit__card-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 1.7611rem; /* 28.178px */
    overflow: hidden;
}

.recruit__card-num {
    position: absolute;
    top: 1.875rem; /* 30px */
    left: 1.75rem; /* 28px */
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 3.5rem; /* 56px */
    line-height: 1;
    color: #ffc401;
}

.recruit__card-illust {
    position: absolute;
}

.recruit__card-illust--1 {
    left: 2.5rem; /* 40px */
    top: 5.1875rem; /* 83px */
    width: 11.0182rem; /* 176.29px */
    aspect-ratio: 176.292 / 145.042;
}

.recruit__card-illust--2 {
    left: 1.6875rem; /* 27px */
    top: 6.375rem; /* 102px */
    width: 9.4105rem; /* 150.57px */
    aspect-ratio: 150.568 / 147.903;
}

.recruit__card-mascot {
    position: absolute;
    right: 1.3625rem; /* 21.8px */
    bottom: 0.1875rem; /* 3px */
    width: 5.841rem; /* 93.45px */
    aspect-ratio: 93.4546 / 103.083;
}

.recruit__card-icon {
    position: absolute;
    left: 9.8125rem; /* 157px */
    top: 10.0625rem; /* 161px */
    width: 2.925rem; /* 46.8px */
    aspect-ratio: 46.796 / 47.677;
    transform: rotate(6.94deg);
}

.recruit__form-mock {
    position: absolute;
    left: 2.875rem; /* 46px */
    top: 5.875rem; /* 94px */
    width: 11.3125rem; /* 181px */
}

.recruit__form-bar {
    display: block;
    width: 100%;
    height: 1.625rem; /* 26px */
    background: #ededed;
    border-radius: 0.25rem;
    margin-bottom: 0.375rem; /* 6px */
}

.recruit__form-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.4375rem; /* 119px */
    height: 1.9375rem; /* 31px */
    margin-top: 0.5625rem; /* 9px */
    background: #008954;
    border-radius: 6.25rem;
    color: #fff;
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 0.875rem; /* 14px */
}

.recruit__card-cursor {
    position: absolute;
    right: 1.3125rem; /* 21px */
    top: 3.625rem; /* 58px */
    width: 4.44rem; /* 71px */
    aspect-ratio: 62.948 / 61.834;
    transform: scaleY(-1) rotate(171.88deg);
}

.recruit__card-title {
    color: #0d0d0d;
    font-size: 1.375rem; /* 22px */
    font-weight: 700;
    line-height: 2rem; /* 32px */
    text-align: center;
    margin-top: 1.375rem; /* 22px */
    margin-bottom: 0.75rem; /* 12px */
}

.recruit__card-text {
    color: #3f3f3f;
    font-size: 0.9375rem; /* 15px */
    font-weight: 500;
    line-height: 1.625rem; /* 26px */
    text-align: center;
}

@media (min-width: 769px) {
    .recruit {
        margin-top: -6.25rem; /* 100px: overlaps only .reason's empty bottom padding, not its cards */
    }

    .recruit__bg-ellipse {
        top: 7.3125rem; /* 117px */
        width: 110%;
    }

    .recruit__bg-label {
        text-align: center;
        font-size: 1.875rem; /* 30px */
        line-height: 2.625rem; /* 42px */
    }

    .recruit__bg-arc {
        top: 7.3125rem; /* 117px, matches the ellipse */
        width: 110%;
    }

    .recruit__bg-arc-text {
        font-size: 56px;
    }

    .recruit__bg-rect {
        top: 29.0625rem; /* 465px */
    }

    .recruit__inner {
        max-width: 68.75rem; /* 1100px */
        padding: 10rem 2rem 6.25rem; /* 160px top */
    }

    .recruit__header {
        margin-bottom: 3.5rem; /* 56px */
    }

    .recruit__catch {
        width: 4.384rem;
        margin-bottom: 0.5rem;
    }

    .recruit__heading {
        font-size: 2.6rem; /* 41.6px */
        line-height: 3.125rem; /* 50px */
        margin-bottom: 1.5625rem;
    }

    .recruit__lead {
        font-size: 1.125rem; /* 18px */
        line-height: 2rem; /* 32px */
    }

    .recruit__cards {
        flex-direction: row;
        justify-content: center;
        max-width: 61.9375rem; /* 991px */
        gap: 4.73rem; /* 75.7px */
    }

    .recruit__card {
        flex: 1 1 17.269rem; /* 276.3px, shrinks on narrower desktop widths instead of overflowing */
        min-width: 0;
        max-width: 17.269rem;
    }
}

/* ==========================================================================
   Price (料金について)
   ========================================================================== */
.price {
    position: relative;
    z-index: 2; /* stacks above .flow so #price paints over their shared overlap */
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -0.8125rem; /* -13px: overlaps .recruit's bg, this section painting on top */
    margin-bottom: -3rem; /* 48px: pulls .flow up underneath this section's bottom padding */
    background: #d54d24;
    border-radius: 2.25rem; /* 36px */
    overflow: hidden;
    padding-bottom: 3rem;
}

.price__bg-decor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.price__bg-decor picture img {
    position: absolute;
    left: 50%;
    top: 3.4856rem; /* 55.77px */
    transform: translateX(-50%);
    width: 31rem; /* 496px */
    height: auto;
}

.price__mascot-yellow {
    position: absolute;
    left: calc(
        50% - 13.694rem
    ); /* keeps the mascot locked to the same spot on the now-centered bg image */
    top: 16.4544rem; /* 263.27px */
    width: 3.5669rem; /* 57.07px */
    aspect-ratio: 136.144 / 116.585;
}

.price__inner {
    position: relative;
    z-index: 1;
    max-width: 25.125rem; /* 402px */
    margin: 0 auto;
    padding: 3.2356rem 1.5rem 0; /* 51.77px top */
}

/* ---------- header ---------- */
.price__header {
    text-align: center;
    color: #fff;
}

.price__eyebrow {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    line-height: 2.275rem; /* 36.4px */
    margin-bottom: 0.375rem; /* 6px */
}

.price__heading {
    font-size: 2rem; /* 32px */
    font-weight: 900;
    line-height: 2.275rem; /* 36.4px */
    margin-bottom: 1.5rem; /* 24px */
}

.price__lead {
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 2rem; /* 32px */
    margin-bottom: 2.0106rem; /* 32.17px */
}

/* ---------- card ---------- */
.price__card {
    position: relative;
    background: #fff;
    border-radius: 2.25rem; /* 36px */
    padding: 1.3125rem 1.53125rem 2.3125rem; /* 21px 24.5px 37px */
}

.price__box {
    background: rgba(213, 77, 36, 0.12);
    border-radius: 1rem; /* 16px */
    text-align: center;
    padding: 1.25rem 1rem;
    margin-bottom: 1.0625rem; /* 17px */
}

.price__box-label {
    color: #d54d24;
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    line-height: 2.275rem; /* 36.4px */
    padding-bottom: 16px; /* 4px */
}

.price__box-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

.price__box-num {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 4.4375rem; /* 71px */
    line-height: 2.275rem;
    color: #d54d24;
}

.price__box-unit {
    color: #d54d24;
    font-size: 1.25rem; /* 20px */
    font-weight: 900;
    line-height: 2.275rem;
}

.price__note {
    color: #000;
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 2rem; /* 32px */
    text-align: center;
    margin-bottom: 1.5625rem; /* 25px */
}

.price__highlight {
    background: #ffc401;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.price__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.0625rem; /* 17px */
    margin-bottom: 2.25rem; /* 36px */
}

.price__cta-btn {
    display: block;
}

.price__cta-btn img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.price__cta-btn--download {
    width: 19.0625rem; /* 305px */
}

.price__cta-btn--line {
    width: 19rem; /* 304px */
}

.price__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.price__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: #000;
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    line-height: 1.5625rem; /* 25px */
}

.price__list-icon {
    flex: none;
    width: 1.4375rem; /* 23px */
    aspect-ratio: 23 / 27;
    margin-top: 0.125rem;
}

@media (min-width: 769px) {
    .price {
        border-radius: 4rem; /* 64px */
        margin-top: -3.1875rem; /* -51px */
        margin-bottom: -6.25rem; /* 100px: pulls .flow up underneath this section's bottom padding */
        padding-bottom: 6.25rem;
    }

    .price__bg-decor picture img {
        top: 5.8125rem; /* 93px */
        width: 70.9528rem; /* 1183.24px */
    }

    .price__mascot-yellow {
        left: calc(
            50% - 28.85125rem
        ); /* keeps the mascot locked to the same spot on the now-centered bg image */
        top: 36.75rem; /* 588px */
        width: 8.509rem; /* 136.14px */
    }

    .price__inner {
        max-width: 68.75rem; /* 1100px */
        padding: 3.5rem 2rem 0; /* 56px top */
    }

    .price__heading {
        font-size: 2.6rem; /* 41.6px */
        line-height: 2.275rem;
        margin-bottom: 2.375rem; /* 38px */
    }

    .price__lead {
        font-size: 1.25rem; /* 20px */
        line-height: 2.275rem; /* 36.4px */
        margin-bottom: 2.6875rem; /* 43px */
    }

    .price__card {
        max-width: 46.1875rem; /* 739px */
        margin: 0 auto;
        padding: 3.0625rem 3.25rem 3.125rem; /* 49px 52px 50px */
    }

    .price__box {
        padding: 1.5rem 1rem;
    }

    .price__note {
        font-size: 1.0625rem; /* 17px */
        margin-bottom: 2.375rem; /* 38px */
    }

    .price__cta {
        flex-direction: row;
        justify-content: center;
        gap: 0.75rem; /* 12px */
        margin-bottom: 3.125rem; /* 50px */
    }

    .price__cta-btn--download {
        width: 16.875rem; /* 270px */
    }

    .price__cta-btn--line {
        width: 15.5625rem; /* 249px */
        padding-top: 16px;
    }

    .price__list {
        max-width: 26.3125rem; /* 421px */
        margin: 0 auto;
        gap: 0.375rem;
    }

    .price__list li {
        font-size: 1.0625rem; /* 17px */
        line-height: 2.275rem; /* 36.4px */
    }
}

/* ==========================================================================
   Flow (導入の流れ)
   ========================================================================== */
.flow {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    background: #0091d4;
    border-radius: 2.25rem; /* 36px */
    overflow: hidden;
    padding-top: 2rem; /* keeps ~80px visible above the header once .price's overlap is accounted for */
    padding-bottom: 3rem;
}

.flow__bgtext {
    position: absolute;
    left: 0;
    right: 0;
    top: 38.25rem; /* 612px */
    height: 12.5rem;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.flow__bgtext-track {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    animation: flow-bgtext-scroll 30s linear infinite;
}

.flow__bgtext-track span {
    flex: none;
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 7.8387rem; /* 125.419px, matches other marquees' scale */
    line-height: 1;
    color: rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    padding-right: 5rem;
}

@keyframes flow-bgtext-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.flow__inner {
    position: relative;
    z-index: 1;
    max-width: 25.125rem; /* 402px */
    margin: 0 auto;
    padding: 3.6875rem 2rem 4rem; /* 59px 32px 64px */
}

/* ---------- header ---------- */
.flow__header {
    position: relative;
    text-align: center;
    color: #fff;
}

.flow__mascot {
    display: none;
}

.flow__eyebrow {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    line-height: 2.275rem; /* 36.4px */
    margin-bottom: 0.125rem; /* 2px */
}

.flow__heading {
    font-size: 1.875rem; /* 30px */
    font-weight: 900;
    line-height: 3.125rem; /* 50px */
    font-feature-settings: "palt" 1;
    margin-bottom: 0.75rem; /* 12px */
}

.flow__lead {
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    line-height: 1.6875rem; /* 27px */
}

/* ---------- steps ---------- */
.flow__steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4rem; /* 64px */
    margin-top: 3rem; /* 48px */
}

.flow__step {
    text-align: center;
}

.flow__step-badge {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 5.875rem; /* 94px */
    height: 5.875rem;
    margin: 0 auto;
    border: 1px solid #fff;
    border-radius: 50%;
}

.flow__step-badge::before {
    content: "";
    position: absolute;
    inset: 0.5625rem; /* centers the 77px inner circle within the 94px ring */
    background: #fff;
    border-radius: 50%;
    z-index: -1;
}

.flow__step-label {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 0.625rem; /* 10px */
    line-height: 1.5;
    color: #0091d4;
}

.flow__step-num {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    line-height: 1.2;
    color: #0091d4;
}

.flow__step-title {
    color: #fff;
    font-size: 1.1875rem; /* 19px */
    font-weight: 900;
    line-height: 2rem; /* 32px */
    margin-top: 0.5rem; /* 8px */
}

.flow__step-tag {
    display: inline-block;
    background: #fff;
    color: #017dca;
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    line-height: 1.6875rem; /* 27px */
    padding: 0 1rem;
    border-radius: 6.25rem;
    margin-top: 0.3125rem; /* 5px */
    white-space: nowrap;
}

.flow__step-text {
    color: #fff;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    line-height: 1.5rem; /* 24px */
    margin-top: 0.5625rem; /* 9px */
}

@media (min-width: 769px) {
    .flow {
        border-radius: 4rem; /* 64px */
        padding-top: 6.75rem; /* keeps ~80px visible above the header once .price's larger desktop overlap is accounted for */
    }

    .flow__inner {
        max-width: 68.75rem; /* 1100px */
        padding: 3.6875rem 2rem 4rem; /* 59px 32px 64px */
    }

    .flow__mascot {
        display: block;
        position: absolute;
    }

    .flow__mascot--mint {
        left: 6.6875rem; /* 107px, aligns the character with its old position (label is now baked into the image) */
        top: 0.8125rem; /* 13px, header-relative */
        width: 11.0625rem; /* 177px */
        aspect-ratio: 334 / 322;
    }

    .flow__mascot--yellow {
        left: 58.5813rem; /* 937px, aligns the character with its old position (label is now baked into the image) */
        top: 1.3875rem; /* 22px, header-relative */
        width: 8.75rem; /* 140px */
        aspect-ratio: 264 / 336;
    }

    .flow__heading {
        font-size: 2.6rem; /* 41.6px */
        line-height: 3.125rem; /* 50px */
        margin-bottom: 1.5625rem; /* 25px */
    }

    .flow__bgtext {
        top: 10rem; /* 160px: positions the marquee band behind .flow__heading, not down in the steps area */
    }

    .flow__eyebrow {
        margin-bottom: 1.5625rem; /* 25px */
    }

    .flow__lead {
        font-size: 1.125rem; /* 18px */
        line-height: 2rem; /* 32px */
    }

    .flow__steps {
        flex-direction: row;
        justify-content: space-between;
        gap: 1.25rem; /* 20px */
        margin-top: 2.8125rem; /* 45px */
    }

    .flow__step {
        width: 12.5rem; /* 200px */
        flex: none;
    }

    .flow__steps::before {
        content: "";
        position: absolute;
        left: 6.25rem; /* 100px: STEP 01 badge's center */
        right: 3.5rem; /* 56px: STEP 05 badge's center */
        top: 2.9375rem; /* 47px, vertical center of the 94px badge */
        height: 0.3125rem; /* 5px */
        background: #fff;
        border-radius: 0.625rem;
        z-index: 0;
    }
}

@media (max-width: 768px) {
    .flow__bgtext {
        top: 7.0625rem; /* 113px: keeps the marquee behind the header block, clear of STEP 02 */
    }
}

/* ==========================================================================
   FAQ (よくある質問)
   ========================================================================== */
.faq {
    position: relative;
    background: #ffc401;
    padding: 3rem 0 8rem;
}

.faq__inner {
    max-width: 25.125rem; /* 402px */
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---------- header ---------- */
.faq__header {
    text-align: center;
    color: #1e1e1e;
    margin-bottom: 3.375rem; /* 54px */
}

.faq__eyebrow {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    line-height: 2.275rem; /* 36.4px */
    margin-bottom: 0.3125rem; /* 5px */
}

.faq__heading {
    font-size: 1.875rem; /* 30px */
    font-weight: 900;
    line-height: 3.125rem; /* 50px */
    font-feature-settings: "palt" 1;
    margin-bottom: 0.6875rem; /* 11px */
}

.faq__lead {
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    line-height: 2rem; /* 32px */
}

/* ---------- accordion ---------- */
.faq__list {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
}

.faq__item {
    background: #fff;
    border-radius: 2.25rem; /* 36px */
}

.faq__question {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
    width: 100%;
    padding: 1.5625rem 1.5rem; /* 25px 24px */
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.faq__q-label {
    flex: none;
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 1.875rem; /* 30px */
    line-height: 2.275rem; /* 36.4px */
    color: #ffc401;
}

.faq__q-text {
    flex: 1;
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 1.5rem; /* 24px */
    color: #1e1e1e;
}

.faq__icon {
    position: relative;
    flex: none;
    width: 1.5rem; /* 24px */
    height: 1.5rem;
    margin-left: auto;
}

.faq__icon-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5rem; /* 24px */
    height: 0.1875rem; /* 3px */
    background: #d54d24;
    border-radius: 0.625rem;
    transform: translate(-50%, -50%);
    transition: transform 0.35s ease;
}

.faq__icon-bar--v {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item.is-open .faq__icon-bar--v {
    transform: translate(-50%, -50%) rotate(0deg);
}

.faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.faq__item.is-open .faq__answer {
    grid-template-rows: 1fr;
}

.faq__answer-inner {
    overflow: hidden;
    min-height: 0;
}

.faq__a-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem; /* 12px */
    padding: 0 1.5rem 1.5625rem; /* 24px sides, 25px bottom */
}

.faq__a-label {
    flex: none;
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 1.875rem; /* 30px */
    line-height: 2.275rem; /* 36.4px */
    color: #d54d24;
}

.faq__a-text {
    flex: 1;
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    line-height: 2rem; /* 32px */
    color: #1e1e1e;
}

@media (min-width: 769px) {
    .faq__inner {
        max-width: 68.75rem; /* 1100px */
        padding: 0 2rem;
    }

    .faq__header {
        margin-bottom: 4.25rem; /* 68px */
    }

    .faq__eyebrow {
        margin-bottom: 1.5625rem; /* 25px */
    }

    .faq__heading {
        font-size: 2.6rem; /* 41.6px */
        margin-bottom: 1.5625rem; /* 25px */
    }

    .faq__lead {
        font-size: 1.125rem; /* 18px */
    }

    .faq__question {
        gap: 1.375rem; /* 22px */
        padding: 1.125rem 2.1875rem 1.125rem 2.25rem; /* 18px 35px 18px 36px */
    }

    .faq__q-label {
        font-size: 2.5rem; /* 40px */
    }

    .faq__q-text {
        font-size: 1.125rem; /* 18px */
        line-height: 2rem; /* 32px */
    }

    .faq__icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .faq__a-row {
        gap: 1.375rem; /* 22px */
        padding: 0 2.1875rem 2.25rem 2.25rem; /* 35px right, 36px left, 36px bottom */
    }

    .faq__a-label {
        font-size: 2.5rem; /* 40px */
    }

    .faq__a-text {
        font-size: 1rem; /* 16px */
        line-height: 2rem; /* 32px */
    }
}

/* ==========================================================================
   Contact (お問い合わせ・資料ダウンロード)
   ========================================================================== */
.contact {
    position: relative;
    background: #d54d24;
    border-radius: 2.25rem; /* 36px */
    overflow: hidden;
    padding: 3rem 0;
}

.contact__inner {
    position: relative;
    z-index: 1;
    max-width: 25.125rem; /* 402px */
    margin: 0 auto;
    padding: 0 1.5rem;
}

.contact__eyebrow {
    text-align: center;
    color: #fff;
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    line-height: 2.275rem; /* 36.4px */
    margin-bottom: 0.9375rem; /* 15px */
}

.contact__card {
    position: relative;
    background: #fff;
    border-radius: 2.25rem; /* 36px */
    padding: 3.5rem 1.5625rem 1.6875rem; /* 56px 25px 27px */
}

.contact__mouth {
    position: absolute;
    top: 1.875rem; /* 30px */
    left: 50%;
    transform: translateX(-50%);
    width: 4.875rem; /* 78px */
    aspect-ratio: 117 / 30.603;
}

/* ---------- header ---------- */
.contact__header {
    text-align: center;
    margin-top: 1rem; /* clears .contact__mouth, which sits above via absolute positioning */
    margin-bottom: 1.75rem; /* 28px */
}

.contact__tagline {
    color: #d54d24;
    font-size: 1.3851rem; /* 22.161px */
    font-weight: 900;
    line-height: 1.7313rem; /* 27.701px */
    letter-spacing: 0.0269rem;
    margin-bottom: 0.85rem; /* 13.6px */
}

.contact__tagline-brand {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 1.5774rem; /* 25.239px */
}

.contact__heading {
    color: #d54d24;
    font-size: 1.875rem; /* 30px */
    font-weight: 900;
    line-height: 2.8125rem; /* 45px */
    letter-spacing: 0.0375rem;
    margin-bottom: 1.375rem; /* 22px */
}

.contact__lead {
    color: #666;
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 1.7313rem; /* 27.701px */
    letter-spacing: 0.02rem;
}

/* ---------- points ---------- */
.contact__points {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.75rem; /* 28px */
    margin-bottom: 2.3125rem; /* 37px */
}

.contact__point {
    background: #fff;
    border: 1px solid #d54d24;
    border-radius: 0.375rem; /* 6px */
    padding: 1.1875rem 1.3125rem; /* 19px 21px */
}

.contact__point-title {
    color: #d54d24;
    font-size: 1.0625rem; /* 17px */
    font-weight: 700;
    line-height: 1.7313rem; /* 27.701px */
    letter-spacing: 0.0213rem;
    margin-bottom: 0.25rem;
}

.contact__point-text {
    color: #747474;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    line-height: 1.375rem; /* 22px */
    letter-spacing: 0.0175rem;
}

/* ---------- note bubble ---------- */
.contact__note {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.1875rem; /* 19px */
}

.contact__note-mascot {
    width: 9.2875rem; /* 148.6px */
    aspect-ratio: 148.491 / 145.863;
    margin-bottom: -1.5rem;
    z-index: 1;
    transform: rotate(8.12deg);
}

.contact__note-bubble {
    position: relative;
    background: #007942;
    border-radius: 10rem;
    padding: 1.25rem 1.5rem;
    text-align: center;
}

.contact__note-bubble p {
    color: #fff;
    font-size: 1.0625rem; /* 17px */
    font-weight: 700;
    line-height: 1.5rem; /* 24px */
    letter-spacing: 0.0213rem;
}

/* ---------- form panel ---------- */
.contact__form-panel {
    position: relative;
    z-index: 1; /* paints over .contact__note's bottom edge in the overlap zone */
    margin-top: -1.5rem; /* -16px: overlaps .contact__note by 16px, leaving the rest of its margin-bottom visible */
    background: #fbede9;
    border-radius: 1.5rem; /* 24px */
    padding: 1.875rem 16px 1.5rem; /* 30px 22px 24px */
}

.contact__form-title {
    text-align: center;
    color: #d54d24;
    font-size: 1.25rem; /* 20px */
    font-weight: 900;
    margin-bottom: 1.375rem; /* 22px */
}

.contact__error {
    background: #fff;
    border: 1px solid #d54d24;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.375rem; /* 22px */
    color: #d54d24;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    line-height: 1.8;
}

.contact__form {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
}

.contact__field {
    background: #fff;
    border-radius: 1rem; /* 16px */
    padding: 1.125rem 1.375rem; /* 18px 22px */
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px */
}

.contact__field-label {
    display: block;
    color: #000;
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 1.7313rem; /* 27.701px */
    letter-spacing: 0.02rem;
}

.contact__input {
    width: 100%;
    background: #eee;
    border: 0;
    border-radius: 0.25rem; /* 4px */
    padding: 0.8125rem 1rem; /* 13px 16px */
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.0625rem; /* 17px */
    font-weight: 500;
    color: #1e1e1e;
}

.contact__input::placeholder {
    color: #b2aead;
}

.contact__checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact__checkbox {
    display: flex;
    align-items: center;
    gap: 0.6875rem; /* 11px */
    cursor: pointer;
}

.contact__checkbox input {
    flex: none;
    width: 1.625rem; /* 26px */
    height: 1.625rem;
    accent-color: #d54d24;
    background: #eee;
    border-radius: 0.25rem;
}

.contact__checkbox span {
    color: #000;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 1.7313rem; /* 27.701px */
    letter-spacing: 0.02rem;
}

.contact__privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6875rem; /* 11px */
    cursor: pointer;
    margin: 0.25rem 0 0.375rem;
}

.contact__privacy input {
    flex: none;
    width: 1.625rem; /* 26px */
    height: 1.625rem;
    accent-color: #d54d24;
    border-radius: 0.25rem;
}

.contact__privacy span {
    color: #4f4f4f;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
}

.contact__submit {
    display: block;
    width: 100%;
    max-width: 19.4375rem; /* 311px */
    margin: 0.5rem auto 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.contact__submit:hover {
    transform: translateY(-0.25rem);
}

.contact__submit img {
    display: block;
    width: 100%;
    height: auto;
}

.contact__form-note {
    text-align: center;
    color: #747474;
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    letter-spacing: 0.0163rem;
    margin-top: 0.875rem; /* 14px */
}

/* ---------- LINE panel ---------- */
.contact__line-panel {
    text-align: center;
    background: rgba(0, 185, 0, 0.1);
    border-radius: 1.5rem; /* 24px */
    padding: 1.75rem 1.25rem 1.875rem; /* 28px 20px 30px */
    margin-top: 1.6875rem; /* 27px */
}

.contact__line-text {
    color: #00b900;
    font-size: 1.25rem; /* 20px */
    font-weight: 900;
    line-height: 1.4519rem; /* 23.229px */
    margin-bottom: 1.125rem; /* 18px */
}

.contact__line-btn {
    display: block;
    width: 100%;
    max-width: 17.1875rem; /* 275px */
    margin: 0 auto;
    transition: transform 0.25s ease;
}

.contact__line-btn:hover {
    transform: translateY(-0.25rem);
}

.contact__line-btn img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 769px) {
    .contact {
        border-radius: 4rem; /* 64px */
    }

    .contact__inner {
        max-width: 68.75rem; /* 1100px */
        padding: 0 2rem;
    }

    .contact__eyebrow {
        margin-bottom: 1.5625rem; /* 25px */
    }

    .contact__card {
        max-width: 52.8125rem; /* 845px */
        margin: 0 auto;
        padding: 4.125rem 3.0625rem 1.6875rem; /* 66px 49px 27px */
    }

    .contact__mouth {
        top: 3.3125rem; /* 53px */
        width: 7.3125rem; /* 117px */
    }

    .contact__header {
        margin-top: 2.125rem; /* clears .contact__mouth at the larger desktop size */
        margin-bottom: 1.4375rem; /* 23px */
    }

    .contact__tagline {
        margin-bottom: 1.4375rem; /* 23px */
    }

    .contact__heading {
        font-size: 2.25rem; /* 36px */
    }

    .contact__lead {
        font-size: 1rem; /* 16px */
    }

    .contact__points {
        flex-direction: row;
        gap: 1.1875rem; /* 19px */
        margin-top: 2.1875rem; /* 35px */
        margin-bottom: 2.75rem; /* 44px */
    }

    .contact__point {
        flex: 1;
    }

    .contact__note {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0;
        margin-bottom: 0.5rem; /* 24px */
    }

    .contact__note-mascot {
        width: 9.2813rem; /* 148.5px */
        margin-bottom: 0;
        margin-right: -0.9375rem; /* 15px overlap with the bubble's tail */
        transform: none;
    }

    .contact__note-bubble {
        max-width: 32.75rem; /* 524px */
    }

    .contact__form-panel {
        padding: 2.5rem 3.125rem 2.1875rem; /* 40px 50px 35px */
    }

    .contact__form-title {
        font-size: 1.25rem; /* 20px */
        margin-bottom: 1.75rem; /* 28px */
    }

    .contact__field {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
        padding: 1.125rem 1.375rem;
    }

    .contact__field-label {
        flex: 0 0 8.625rem; /* 138px */
    }

    .contact__field--checkbox,
    .contact__field:has(.contact__checkbox-group) {
        align-items: flex-start;
    }

    .contact__checkbox-group {
        flex: 1;
    }

    .contact__submit {
        max-width: 26.3125rem; /* 421px */
    }

    .contact__line-panel {
        padding: 2.25rem 1.25rem 2.375rem; /* 36px 38px */
    }

    .contact__line-btn {
        max-width: 26.3125rem; /* 421px */
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    position: relative;
    left: 50%;
    right: 50%;
    width: calc(100vw - 3rem); /* 100vw minus 24px margin on each side */
    margin-left: calc(-50vw + 1.5rem);
    margin-right: calc(-50vw + 1.5rem);
    background: #ffc401;
    padding: 3rem 0 1.6875rem; /* bottom matches .footer__pagetop's overlap so it stays within the page's natural height */
}

.footer__inner {
    position: relative;
    max-width: 25.125rem; /* 402px */
    margin: 0 auto;
    padding: 0 1.5rem;
}

.footer__card {
    position: relative;
    overflow: hidden;
    background: #373737;
    border-radius: 1.5rem; /* 24px */
    padding: 3rem 1.5rem 3.75rem; /* 48px 24px 60px */
    text-align: center;
}

@media (max-width: 768px) {
    .footer__card {
        left: 50%;
        right: 50%;
        width: 100vw;
        margin-left: -50vw;
        margin-right: -50vw;
        border-radius: 0;
    }
}

.footer__bg-shape {
    position: absolute;
    left: 2.5rem; /* 40px */
    top: 2.375rem; /* 38px */
    width: 18.125rem; /* 290px */
    aspect-ratio: 290 / 317;
    z-index: 0;
    pointer-events: none;
}

.footer__logoarea {
    position: relative;
    z-index: 1;
}

.footer__tagline {
    color: #fff;
    font-size: 0.8713rem; /* 13.941px */
    font-weight: 900;
    line-height: 1.7426rem; /* 27.882px */
    margin-bottom: 0.5rem;
}

.footer__logo {
    display: block;
    width: 8.7133rem; /* 139.41px */
    height: auto;
    margin: 0 auto;
}

.footer__nav {
    position: relative;
    z-index: 1;
    margin-top: 2.5rem; /* 40px */
}

.footer__nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem; /* 12px */
}

.footer__nav-list a {
    color: #838383;
    font-size: 0.775rem; /* 14px */
    font-weight: 400;
}

.footer__partner-link {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 2rem; /* 32px */
}

.footer__partner-link a {
    color: #838383;
    font-size: 0.775rem; /* 14px */
    font-weight: 400;
}

.footer__copyright {
    position: relative;
    z-index: 1;
    color: #838383;
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 0.775rem; /* 14px */
    line-height: 2rem;
    margin-top: 1.25rem; /* 20px */
}

.footer__pagetop {
    position: absolute;
    left: 50%;
    bottom: -1.6875rem; /* 27px, overlaps the card's bottom edge */
    transform: translateX(-50%);
    width: 5rem; /* 80px */
    aspect-ratio: 80 / 87;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.footer__pagetop:hover {
    transform: translateX(-50%) translateY(-0.25rem);
}

.footer__pagetop img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 80 / 87; /* the SVG has no usable intrinsic ratio (width/height are 100%), so height:auto alone renders it stretched */
    animation: footer-pagetop-float 3s ease-in-out infinite;
}

@keyframes footer-pagetop-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.5rem);
    }
}

@media (min-width: 769px) {
    .footer {
        padding-bottom: 2.6875rem; /* matches .footer__pagetop's larger desktop overlap */
    }

    .footer__inner {
        max-width: 100%; /* 1246px */
    }

    .footer__card {
        padding: 3rem 1.5rem 2.875rem; /* 48px 24px 46px */
    }

    .footer__bg-shape {
        left: auto;
        right: 4.375rem; /* positions the U-shape toward the right, matching the design */
        top: 2.5rem; /* 40px */
        width: 18.125rem; /* 290px */
    }

    .footer__tagline {
        font-size: 1rem; /* 16px */
        line-height: 2rem; /* 32px */
        margin-bottom: 0.75rem;
    }

    .footer__logo {
        width: 10rem; /* 160px */
    }

    .footer__nav {
        margin-top: 5.6875rem; /* 91px */
    }

    .footer__nav-list {
        flex-direction: row;
        justify-content: center;
        gap: 2.375rem; /* 38px */
    }

    .footer__partner-link {
        margin-top: 2.5rem; /* 40px */
    }

    .footer__copyright {
        margin-top: 1.1875rem; /* 19px */
    }

    .footer__pagetop {
        right: 2.6875rem; /* 43px */
        left: auto;
        bottom: -2.6875rem; /* 43px */
        transform: none;
    }

    .footer__pagetop:hover {
        transform: translateY(-0.25rem);
    }
}

/* ==========================================================================
   Page Hero (下層ページ共通の見出しセクション)
   ========================================================================== */
.page-hero {
    position: relative;
    background: #ffc401;
    padding: 9.125rem 1.5rem 6.6rem; /* 146px top (clears the absolutely-positioned .header), 105.6px bottom */
    text-align: center;
}

.page-hero__title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900;
    font-size: 1.9375rem; /* 31px */
    line-height: 2.275rem; /* 36.4px */
    color: #000;
    margin-bottom: 0.85rem; /* 13.6px */
}

.page-hero__subtitle {
    font-family: "Chillax", "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-size: 0.875rem; /* 14px */
    line-height: 2.275rem; /* 36.4px */
    color: #000;
}

@media (max-width: 768px) {
    /* No mobile frame was provided in Figma for this template; these values
       extrapolate proportionally from the desktop spec against the existing
       mobile .header metrics (top:21px, height:44.19px). */
    .page-hero {
        padding: 5.25rem 1.5rem 3rem; /* 84px top, 48px bottom */
    }

    .page-hero__title {
        font-size: 1.5rem; /* 24px */
        line-height: 1.8125rem; /* 29px */
        margin-bottom: 0.625rem; /* 10px */
    }

    .page-hero__subtitle {
        font-size: 0.75rem; /* 12px */
        line-height: 1.5rem; /* 24px */
    }
}

/* ==========================================================================
   Privacy Policy content
   ========================================================================== */
.privacy {
    background: #fff;
    padding: 4rem 1.5rem 6rem;
}

.privacy__inner {
    max-width: 68.75rem; /* 1100px */
    margin: 0 auto;
}

.privacy__updated {
    font-weight: 500;
    font-size: 0.875rem; /* 14px */
    color: #000;
    text-align: right;
    margin-bottom: 2rem;
}

.privacy__lead {
    font-weight: 500;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.8;
    color: #000;
    margin-bottom: 3rem;
}

.privacy__section {
    margin-bottom: 2.5rem;
}

.privacy__section-title {
    font-weight: 900;
    font-size: 1.25rem; /* 20px */
    color: #000;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #ffc401;
}

.privacy__section p,
.privacy__section li {
    font-weight: 500;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.9;
    color: #000;
}

.privacy__section p + p {
    margin-top: 1rem;
}

.privacy__section ul,
.privacy__section ol {
    margin-top: 0.75rem;
    padding-left: 1.5rem;
}

.privacy__section ul {
    list-style: disc;
}

.privacy__section ol {
    list-style: decimal;
}

.privacy__section li + li {
    margin-top: 0.5rem;
}

.privacy__contact {
    margin-top: 0.75rem;
    padding: 1.5rem;
    background: #fbede9;
    border-radius: 1rem;
}

.privacy__contact p + p {
    margin-top: 0.5rem;
}

@media (min-width: 769px) {
    .privacy {
        padding: 5rem 2rem 8rem;
    }

    .privacy__section-title {
        font-size: 1.5rem; /* 24px */
    }

    .privacy__lead,
    .privacy__section p,
    .privacy__section li {
        font-size: 1rem; /* 16px */
    }
}

/* ==========================================================================
   Inquiry form (お問い合わせページ)
   ========================================================================== */
.inquiry {
    background: #fff;
    padding: 4rem 1.5rem 6rem;
}

.inquiry__inner {
    max-width: 43.75rem; /* 700px */
    margin: 0 auto;
}

.inquiry__intro {
    text-align: center;
    font-weight: 500;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.8;
    color: #000;
    margin-bottom: 2.5rem;
}

.inquiry__form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.inquiry__field-label {
    display: block;
    color: #000;
    font-size: 1rem; /* 16px */
    font-weight: 700;
    margin-bottom: 0.625rem;
}

.inquiry__required,
.inquiry__optional {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem; /* 11px */
    font-weight: 700;
    color: #fff;
    border-radius: 999px;
    vertical-align: middle;
}

.inquiry__required {
    background: #d54d24;
}

.inquiry__optional {
    background: #b2aead;
}

.inquiry__input,
.inquiry__textarea {
    display: block;
    width: 100%;
    background: #eee;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    color: #1e1e1e;
}

.inquiry__input::placeholder,
.inquiry__textarea::placeholder {
    color: #b2aead;
}

.inquiry__input:focus,
.inquiry__textarea:focus {
    outline: none;
    border-color: #ffc401;
    background: #fff;
}

.inquiry__textarea {
    min-height: 10rem;
    resize: vertical;
}

.inquiry__privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6875rem; /* 11px */
    cursor: pointer;
    margin-top: 0.5rem;
    text-align: center;
}

.inquiry__privacy input {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    accent-color: #d54d24;
    border-radius: 0.25rem;
}

.inquiry__privacy span {
    color: #4f4f4f;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
}

.inquiry__privacy a {
    color: #d54d24;
    text-decoration: underline;
}

.inquiry__submit {
    display: block;
    width: 100%;
    max-width: 20rem;
    margin: 0.5rem auto 0;
    padding: 1rem 2rem;
    background: #d54d24;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.0625rem; /* 17px */
    font-weight: 900;
    text-align: center;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.inquiry__submit:hover {
    transform: translateY(-0.25rem);
}

.inquiry__note {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    color: #666;
}

.inquiry__error {
    background: #fdece7;
    border: 1px solid #d54d24;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    color: #d54d24;
    font-size: 0.9375rem; /* 15px */
    font-weight: 700;
    line-height: 1.8;
}

.inquiry__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

@media (min-width: 769px) {
    .inquiry {
        padding: 5rem 2rem 8rem;
    }

    .inquiry__intro {
        font-size: 1rem; /* 16px */
        margin-bottom: 3rem;
    }
}

/* ==========================================================================
   Company profile (運営会社ページ)
   ========================================================================== */
.company-table {
    width: 100%;
    border-collapse: collapse;
}

.company-table th,
.company-table td {
    text-align: left;
    font-weight: 500;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.8;
    color: #000;
    padding: 1rem 0;
    border-bottom: 1px solid #e5e5e5;
}

.company-table th {
    font-weight: 900;
    width: 8.5rem;
    white-space: nowrap;
    padding-right: 1.5rem;
}

.company-table a {
    color: #d54d24;
    text-decoration: underline;
}

@media (min-width: 769px) {
    .company-table th,
    .company-table td {
        font-size: 1rem; /* 16px */
        padding: 1.375rem 0;
    }

    .company-table th {
        width: 12rem;
    }
}

/* ==========================================================================
   Thanks page download CTA (download-thanks.php)
   ========================================================================== */
.thanks__download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 26rem;
    margin: 2rem auto 0;
    padding: 1.5rem 2rem;
    background: #d54d24;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.1875rem; /* 19px */
    font-weight: 900;
    text-align: center;
    border-radius: 999px;
    box-shadow: 0 0.5rem 1.5rem rgba(213, 77, 36, 0.35);
    transition: transform 0.25s ease;
}

.thanks__download-btn:hover {
    transform: translateY(-0.25rem);
}

.thanks__download-icon {
    flex: none;
    width: 1.75rem;
    height: auto;
    aspect-ratio: 23.01 / 23.7692; /* the SVG has no usable intrinsic ratio (width/height are 100%), so height:auto alone renders it stretched */
}

.thanks__top-link-wrap {
    text-align: center;
    margin-top: 1.5rem;
}

.thanks__top-link {
    display: inline-block;
    color: #999;
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    text-decoration: underline;
}

@media (min-width: 769px) {
    .thanks__download-btn {
        max-width: 30rem;
        padding: 1.75rem 2.5rem;
        font-size: 1.3125rem; /* 21px */
    }

    .thanks__download-icon {
        width: 2rem;
    }
}