@charset "UTF-8";

/* ===========================
 コンテンツ
=========================== */
a {
    img {
        transition: all 0.4s;
    }
    &:hover {
        img {
            opacity: 0.8;
        }
    }
}

@keyframes scale {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}

.wrap {
    max-width: 750px;
    margin: 0 auto;
    img {
        width: 100%;
        display: block;
    }
    .btn {
        transition: all 0.4s;
        animation: scale 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite alternate;
        &:hover {
            opacity: 0.8;
        }
    }
    .mv {
        position: relative;
        .btn {
            width: 612px;
            display: block;
            margin: 0 auto;
            position: absolute;
            left: 27px;
            right: 0;
            bottom: 90px;
            @media only screen and (max-width: 749px) {
                width: calc(100vw * 612 / 750);
                left: calc(100vw * 27 / 750);
                bottom: calc(100vw * 90 / 750);
            }
        }
    }
    .movie {
        position: relative;
        video {
            border-radius: 50%;
            width: 536px;
            position: absolute;
            bottom: 192px;
            left: 0;
            right: 0;
            margin: 0 auto;
            @media only screen and (max-width: 749px) {
                width: calc(100vw * 536 / 750);
                bottom: calc(100vw * 192 / 750);
            }
        }
        .img {
            width: 175px;
            position: absolute;
            top: 180px;
            right: 35px;
            @media only screen and (max-width: 749px) {
                width: calc(100vw * 175 / 750);
                top: calc(100vw * 180 / 750);
                right: calc(100vw * 35 / 750);
            }
        }
    }
    .offer {
        position: relative;
        .btn {
            display: block;
            position: absolute;
        }
        .btn01 {
            width: 612px;
            margin: 0 auto;
            left: 15px;
            right: 0;
            top: 515px;
            @media only screen and (max-width: 749px) {
                width: calc(100vw * 612 / 750);
                left: calc(100vw * 15 / 750);
                top: calc(100vw * 515 / 750);
            }
        }
        .btn02 {
            width: 612px;
            margin: 0 auto;
            left: 15px;
            right: 0;
            bottom: 452px;
            @media only screen and (max-width: 749px) {
                width: calc(100vw * 612 / 750);
                left: calc(100vw * 15 / 750);
                bottom: calc(100vw * 452 / 750);
            }
        }
        .btn03 {
            width: 467px;
            right: 60px;
            bottom: 110px;
            @media only screen and (max-width: 749px) {
                width: calc(100vw * 467 / 750);
                right: calc(100vw * 60 / 750);
                bottom: calc(100vw * 110 / 750);
            }
        }
    }
}