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

html{
    width:100%;
    min-height:100%;
    background:#040912;
}

body{
    width:100%;
    min-height:100%;
    margin:0;
    font-family:"Noto Sans JP",sans-serif;
    color:#f5f8fc;
    background:#040912;
    overflow-x:hidden;
}

canvas{
    display:block;
}

#bg{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
}

.hero{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    width:100%;
    min-height:100vh;
    min-height:100svh;
    padding:
        clamp(64px, 10vh, 120px)
        clamp(20px, 5vw, 56px);
}

.hero__inner{
    width:min(100%, 720px);
    margin:0 auto;
    text-align:center;
}

.hero__brand{
    margin-bottom:clamp(52px, 8vh, 96px);
}

.hero__title{
    margin:0;
    color:#ffffff;
    font-size:clamp(48px, 8vw, 88px);
    font-weight:700;
    line-height:1;
    letter-spacing:-0.04em;
    overflow-wrap:anywhere;
}

.hero__message{
    width:min(100%, 660px);
    margin:0 auto;
}

.hero__catchcopy{
    margin-bottom:clamp(30px, 4.5vh, 48px);
}

.hero__catchcopy-text{
    margin:0;
    color:#f4f7fb;
    font-size:clamp(21px, 3.1vw, 34px);
    font-weight:500;
    line-height:1.55;
    letter-spacing:0.01em;
    overflow-wrap:anywhere;
}

.hero__description{
    width:min(100%, 620px);
    margin:0 auto;
}

.hero__lead,
.hero__text{
    margin:0;
    color:#cfd8e5;
    font-size:clamp(15px, 1.8vw, 19px);
    font-weight:400;
    line-height:1.9;
    letter-spacing:0.01em;
    overflow-wrap:anywhere;
}

.hero__lead{
    margin-bottom:clamp(10px, 1.6vh, 16px);
}

.hero__price{
    margin-top:clamp(40px, 6vh, 64px);
}

.hero__price-text{
    margin:0;
    color:#ffffff;
    font-size:clamp(26px, 4vw, 42px);
    font-weight:700;
    line-height:1.4;
    letter-spacing:0.01em;
    overflow-wrap:anywhere;
}

.hero__cta{
    display:flex;
    justify-content:center;
    width:100%;
    margin-top:clamp(42px, 6vh, 68px);
}

.hero__cta-buttons{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    width:min(100%, 300px);
}

.hero__cta-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:58px;
    padding:14px 28px;
    border-radius:999px;
    color:#ffffff;
    text-decoration:none;
    font-size:clamp(15px, 1.8vw, 18px);
    font-weight:500;
    line-height:1.4;
    letter-spacing:.04em;
    cursor:pointer;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.hero__cta-button--primary{
    border:1px solid rgba(91,188,255,.88);
    background:rgba(10,24,42,.68);
    box-shadow:
        0 0 0 1px rgba(91,188,255,.08),
        0 0 22px rgba(47,164,245,.08);
}

.hero__cta-button--secondary{
    border:1px solid rgba(205,225,241,.52);
    background:rgba(10,24,42,.22);
    color:#e7eef6;
}

.hero__cta-button--primary:hover{
    border-color:#7bc9ff;
    background:rgba(18,39,66,.82);
    transform:translateY(-2px);
}

.hero__cta-button--secondary:hover{
    border-color:rgba(190,224,247,.82);
    background:rgba(18,39,66,.5);
    color:#ffffff;
    transform:translateY(-2px);
}

.hero__cta-button:focus-visible{
    outline:3px solid rgba(91,188,255,.35);
    outline-offset:4px;
}

@media(max-width:768px){

    .hero{
        place-items:start center;
        min-height:100vh;
        min-height:100svh;
        padding:
            clamp(48px, 7svh, 72px)
            clamp(18px, 6vw, 28px)
            clamp(56px, 9svh, 84px);
    }

    .hero__inner{
        width:min(100%, 420px);
        margin:auto 0;
    }

    .hero__brand{
        margin-bottom:clamp(52px, 8svh, 84px);
    }

    .hero__title{
        font-size:clamp(44px, 14vw, 64px);
        line-height:1.04;
    }

    .hero__catchcopy{
        margin-bottom:clamp(26px, 4svh, 38px);
    }

    .hero__catchcopy-text{
        font-size:clamp(20px, 6vw, 26px);
        line-height:1.6;
    }

    .hero__lead,
    .hero__text{
        font-size:clamp(14px, 4vw, 17px);
        line-height:1.9;
    }

    .hero__price{
        margin-top:clamp(34px, 5svh, 48px);
    }

    .hero__price-text{
        color:#ffffff;
        font-size:clamp(25px, 7vw, 34px);
        line-height:1.45;
    }

    .hero__cta{
        margin-top:clamp(38px, 5.5svh, 54px);
    }

    .hero__cta-buttons{
        gap:14px;
        width:min(100%, 300px);
    }

    .hero__cta-button{
        width:100%;
        min-height:56px;
        padding:14px 24px;
        font-size:16px;
    }
}

@media(max-width:480px){

    .hero{
        padding:
            44px
            20px
            64px;
    }

    .hero__inner{
        width:min(100%, 380px);
    }

    .hero__brand{
        margin-bottom:52px;
    }

    .hero__catchcopy{
        margin-bottom:26px;
    }

    .hero__price{
        margin-top:34px;
    }

    .hero__cta{
        margin-top:38px;
    }

    .hero__cta-buttons{
        width:min(100%, 300px);
        gap:14px;
    }

    .hero__cta-button{
        min-height:54px;
        padding:13px 22px;
    }
}

@media(max-width:380px){

    .hero{
        padding:
            38px
            18px
            56px;
    }

    .hero__brand{
        margin-bottom:46px;
    }

    .hero__title{
        font-size:clamp(40px, 13vw, 50px);
    }

    .hero__catchcopy-text{
        font-size:19px;
    }

    .hero__lead,
    .hero__text{
        font-size:14px;
    }

    .hero__price{
        margin-top:30px;
    }

    .hero__price-text{
        color:#ffffff;
        font-size:25px;
    }

    .hero__cta{
        margin-top:34px;
    }

    .hero__cta-buttons{
        gap:12px;
    }

    .hero__cta-button{
        min-height:52px;
        font-size:15px;
    }
}

@media(prefers-reduced-motion:reduce){

    .hero__cta-button{
        transition:none;
    }
}