@charset "UTF-8";

html,
body {
    background-image: url(../img/bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

html {
    overscroll-behavior: none;
}

body {
    background-attachment: fixed;
}

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

video {
    width: 100%;
}

a img {
    transition: all 0.25s;
}

a:hover img {
    opacity: 0.7;
}

.l-header,
.l-fixHeader {
    display: none;
}

.l-footer {
    background-color: #033a22;
    color: #fff;
}

.l-footer__foot {
    padding-bottom: 3em;
    padding-top: 3em;
}

.top #content {
    padding-top: 0;
    margin: 0 auto;
}

.container {
    background-color: #fff;
    box-shadow: 0px 25px 30px 0px rgba(0, 0, 0, 0.25);
}

.btn,
.movie {
    margin-inline: auto;
}

.cta-btn {
    width: 77%;
}

.fv>img {
    margin-bottom: 2.4%;
}

.fv {
    padding-bottom: 4.4%;
}

.user1 {
    padding-bottom: 1%;
}

.user1-1 {
    margin-bottom: 3.5%;
}

.user1-movie {
    width: 77%;
    margin-bottom: 2.7%;
}

.cta1 {
    padding-bottom: 15%;
}

.cta1>img {
    margin-bottom: 4%;
}

.quality {
    padding-bottom: 10.7%;
}

.quality-1 {
    margin-bottom: 5.7%;
}

.quality-movie {
    width: 87%;
    margin-bottom: 3.6%;
}

.user2 {
    position: relative;
}

.user2-movie {
    width: 50%;
    position: absolute;
    top: 18%;
    left: 0;
    right: 0;
}

.cta2 {
    background-color: #ECE8E5;
    padding-top: 10.5%;
    padding-bottom: 15%;
}

.cta2>img {
    margin-bottom: 3.6%;
}

.sns {
    padding-top: 9.5%;
    padding-bottom: 9.5%;
}

.sns>img {
    margin-bottom: 7%;
}

.line-btn {
    width: 85%;
    margin-bottom: 5.2%;
}

.instagram-btn {
    width: 87%;
}

.faq {
    padding-top: 11.3%;
    padding-bottom: 16.5%;
}

.faq>img {
    margin-bottom: 4.5%;
}

.cta3 {
    padding-bottom: 5.3%;
}

.cta3>img {
    margin-bottom: 2.3%;
}

@media (min-width: 960px) {
    .cta-fix {
        padding: 2% 3.6% 0 3.6%;
        width: min(42vw, 509px, calc(100vh * 509 / 775));
        max-height: 100vh;
        margin-inline: auto;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
    }

    .cta-fix-inner {
        width: auto;
        aspect-ratio: 509 / 775;
    }

    .cta-fix>img {
        margin-inline: auto;
        margin-bottom: 3.3%;
    }

    .cta-fix .cta-btn {
        width: 100%;
    }

    .container {
        width: 53%;
        margin-left: auto;
    }
}

@media (max-width: 959px) {

    .l-footer__nav a,
    .l-footer .copyright {
        font-size: min(3.2vw, 19px);
    }

    .cta-fix {
        display: none;
    }
}

@media (max-width: 640px) {
    .l-container {
        padding-left: 0;
        padding-right: 0;
    }
}