/* Web版を踏襲し、SP版でもサービス紹介文をキービジュアル内に重ねる。 */
@media (max-width: 767px) {
    .home .atocon-mv,
    .front-page .atocon-mv,
    .home .atocon-mv__sky,
    .front-page .atocon-mv__sky {
        position: relative;
        height: 100vh;
        height: 100svh;
        min-height: 0;
        overflow: hidden;
        background: linear-gradient(#5bc1e2 0%, #b7e3f0 69%, #2098c4 69%, #24a2cb 100%);
    }

    .home .atocon-mv__sky,
    .front-page .atocon-mv__sky {
        transform: none;
    }

    .atocon-mv::after {
        top: auto;
        bottom: 0;
        height: 29vh;
        height: 29svh;
    }

    .atocon-mv__character--gorilla,
    .atocon-mv__character--rabbit,
    .atocon-mv__character--frog {
        transform: translateY(-17svh);
    }

    /* Distribute the Web hero's small sky parts through the tall SP canvas. */
    .atocon-mv__picture {
        top: 27svh;
        left: 42%;
        width: min(18vw, 7rem);
    }

    .atocon-mv__cloud--left {
        top: 35svh;
        left: 6%;
        width: min(29vw, 11.3rem);
    }

    .atocon-mv__document--1 {
        top: 35svh;
        right: 12%;
        width: min(12vw, 4.8rem);
    }

    .atocon-mv__cloud--right {
        top: 46svh;
        right: 7%;
        left: auto;
        width: min(26vw, 10.1rem);
    }

    .atocon-mv__document--2 {
        top: 50svh;
        right: 5%;
        width: min(13vw, 5.2rem);
    }

    .atocon-mv__forest--left {
        left: -8vw;
        bottom: 15svh;
        width: 52vw;
        transform: none;
    }

    .atocon-mv__forest--right {
        right: -14vw;
        bottom: 15svh;
        width: 70vw;
        transform: none;
    }

    .atocon-mv__arrow-img,
    .atocon-mv__building,
    .atocon-mv__house--1,
    .atocon-mv__house--2 {
        transform: translateY(-10svh);
    }

    .atocon-mv__confetti--1 { top: 20svh; left: 12%; }
    .atocon-mv__confetti--2 { top: 30svh; left: 48%; }
    .atocon-mv__confetti--3 { top: 45svh; left: 45%; }
    .atocon-mv__confetti--4 { top: 35svh; right: 31%; }
    .atocon-mv__confetti--5 { top: 52svh; right: 18%; }
    .atocon-mv__confetti--6 { top: 40svh; left: 17%; }
    .atocon-mv__confetti--7 { top: 14svh; left: 28%; }
    .atocon-mv__confetti--8 { top: 24svh; right: 42%; }
    .atocon-mv__confetti--9 { top: 47svh; right: 28%; }
    .atocon-mv__confetti--10 { top: 32svh; right: 8%; }

    .atocon-mv__copy {
        display: block;
        position: absolute;
        right: 2rem;
        bottom: 2.4rem;
        left: 2rem;
        z-index: 20;
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: #ffffff;
    }

    .atocon-mv__copy .atocon-mv__eyebrow {
        margin: 0 0 0.8rem;
        color: #ffffff;
        font-size: 1.15rem;
        font-weight: 900;
        line-height: 1.5;
        letter-spacing: 0.08em;
    }

    .atocon-mv__copy h1 {
        margin: 0 0 1rem 0.35rem;
        color: #ffffff;
        font-size: clamp(2.2rem, 6.2vw, 2.6rem);
        line-height: 1.35;
        letter-spacing: 0.03em;
    }

    .atocon-mv__copy > p:last-child {
        margin: 0;
        color: #ffffff;
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1.7;
        text-align: left;
    }

    .atocon-mv__copy p span,
    .atocon-mv__copy h1 span {
        padding: 0.04em 0;
        background: var(--atocon-color-accent, #f15a24);
        box-shadow: 0.18em 0 0 var(--atocon-color-accent, #f15a24), -0.18em 0 0 var(--atocon-color-accent, #f15a24);
        color: #ffffff;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    /* Premium: reserve the full character row and use semantic SP line breaks. */
    .atocon-front-about--membership .atocon-premium-banner {
        gap: 2.4rem;
    }

    .atocon-front-about .atocon-premium-banner__title {
        font-size: clamp(2.4rem, 7vw, 2.8rem);
        line-height: 1.45;
    }

    .atocon-premium-banner__line {
        display: block;
    }

    .atocon-premium-banner__lead {
        line-height: 1.85;
    }

    .atocon-front-about--membership .atocon-premium-banner__aside {
        display: grid;
        min-width: 0;
    }

    .home .atocon-front-about--membership .atocon-premium-banner__visual,
    .front-page .atocon-front-about--membership .atocon-premium-banner__visual {
        width: min(100%, 32rem);
        height: 18rem;
        margin: 0 auto -2.2rem;
    }

    .atocon-front-about--membership .atocon-premium-banner__offer {
        position: relative;
    }

    /* Keep the fixed SP header above every layer of the home hero. */
    .home .atocon-site-header,
    .front-page .atocon-site-header {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1100;
    }

    .home .atocon-site-header .atocon-container,
    .front-page .atocon-site-header .atocon-container {
        top: 0;
        z-index: 1;
        transition: background-color 0.38s ease, box-shadow 0.38s ease;
    }

    .home .atocon-site-header.is-scrolled .atocon-container,
    .front-page .atocon-site-header.is-scrolled .atocon-container {
        background: rgba(255, 253, 249, 0.96);
        box-shadow: 0 0.4rem 1.6rem rgba(17, 17, 17, 0.1);
    }

    body.admin-bar.home .atocon-site-header .atocon-container,
    body.admin-bar.front-page .atocon-site-header .atocon-container {
        top: 46px;
    }

    .home .atocon-site-header .atocon-logo,
    .front-page .atocon-site-header .atocon-logo {
        position: relative;
        display: block;
        width: clamp(16rem, 46vw, 18rem);
        aspect-ratio: 156 / 42;
        transition: width 0.52s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .home .atocon-site-header.is-scrolled .atocon-logo,
    .front-page .atocon-site-header.is-scrolled .atocon-logo {
        width: 12rem;
    }

    .home .atocon-site-header .atocon-logo img,
    .front-page .atocon-site-header .atocon-logo img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 1;
        transition: opacity 0.42s ease;
    }

    .home .atocon-site-header .atocon-logo img.atocon-logo__img--scrolled,
    .front-page .atocon-site-header .atocon-logo img.atocon-logo__img--scrolled,
    .home .atocon-site-header.is-scrolled .atocon-logo img.atocon-logo__img--default,
    .front-page .atocon-site-header.is-scrolled .atocon-logo img.atocon-logo__img--default {
        display: block;
        opacity: 0;
    }

    .home .atocon-site-header.is-scrolled .atocon-logo img.atocon-logo__img--scrolled,
    .front-page .atocon-site-header.is-scrolled .atocon-logo img.atocon-logo__img--scrolled {
        display: block;
        opacity: 1;
    }

    body.atocon-menu-open .atocon-site-header {
        z-index: 1200;
    }

    body.atocon-menu-open .atocon-menu-toggle {
        position: fixed;
        top: 2.4rem;
        right: 2.4rem;
        width: 4.8rem;
        height: 4.8rem;
        min-height: 4.8rem;
        justify-content: center;
    }

    body.atocon-menu-open .atocon-menu-toggle__bars {
        margin-top: 0;
    }

    body.admin-bar.atocon-menu-open .atocon-menu-toggle {
        top: calc(46px + 2.4rem);
    }

    @media (prefers-reduced-motion: reduce) {
        .home .atocon-site-header .atocon-container,
        .front-page .atocon-site-header .atocon-container,
        .home .atocon-site-header .atocon-logo,
        .front-page .atocon-site-header .atocon-logo,
        .home .atocon-site-header .atocon-logo img,
        .front-page .atocon-site-header .atocon-logo img {
            transition-duration: 0.01ms;
        }
    }
}