/* fadeIn_anime */
.fadeIn_anime,
.fadeIn_anime_intro {
    transform: translateY(48px);
    transition:
        transform 1s,
        opacity 1s; /* 明確にトランジションを指定 */
    opacity: 0;
    @media (max-width: 600px) {
        transform: translateY(32px);
        transition:
            transform 1s,
            opacity 1s; /* メディアクエリ内でトランジションを再指定 */
    }

    &.fadeIn_anime_on {
        transform: translateY(0);
        opacity: 1 !important;
    }
    &.loading_anime_intro_on {
        @media (max-width: 750px) {
            transform: translateY(0);
            opacity: 1 !important;
        }
    }
}

body {
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-weight: 700;
    font-style: normal;
    background: #000;
    font-size: 1vw;
}
/* top_fv */
.top_fv {
    position: relative;
    z-index: 10;
    .logo {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999;
        max-width: 25em;
        width: 100%;
        @media (max-width: 750px) {
            max-width: 32em;
        }
        img {
            width: 100%;
            height: auto;
        }
    }
    .image {
        img {
            width: 100%;
            height: auto;
        }
    }
}
/* top_intro */
.top_intro {
    position: relative;
    margin-top: -7em;
    padding-top: 12em;
    padding-bottom: 7em;
    @media (max-width: 750px) {
        padding-top: 9em;
        padding-bottom: 17em;
    }
    .bg_img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        content: "";
        height: calc(100% + 12em);
        display: block;
        @media (max-width: 750px) {
            top: -6em;
            height: calc(100% + 26em);
        }
        img {
            height: 100%;
            width: auto;
            /* object-fit: cover; */
        }
    }
    h2 {
        font-size: 4em;
        color: #fff;
        text-align: center;
        line-height: 1.8em;
        letter-spacing: 0.04em;
        opacity: 0;
        @media (max-width: 750px) {
            font-size: 7em;
            letter-spacing: 0;
            line-height: 1.57em;
        }
    }
    .lead_img {
        margin-top: 5em;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        @media (max-width: 750px) {
            margin-top: 9em;
            transition-delay: 0.6s;
        }
        img {
            width: 49%;
            @media (max-width: 750px) {
                width: 85%;
            }
        }
    }
}
/* car_images_1 */
.car_images_1 {
    position: relative;
    z-index: 1;
    .image_main {
        margin: 0 auto;
        width: 48%;
        opacity: 0;
        @media (max-width: 750px) {
            width: 79%;
            transition-delay: 0.9s;
        }
        img {
            width: 100%;
            height: auto;
        }
    }
    .image_sub {
        position: relative;
        margin: 0 auto;
        margin-top: 7em;
        width: 78%;
        @media (max-width: 750px) {
            margin-top: 16em;
        }
        div {
            &:nth-of-type(1),
            &:nth-of-type(2) {
                position: absolute;
                top: 0;
                left: 0;
                width: 59%;
                @media (max-width: 750px) {
                    position: static;
                    width: 100%;
                }
                img {
                    width: 100%;
                    height: auto;
                }
            }
            &:nth-of-type(2) {
                top: 25em;
                @media (max-width: 750px) {
                    margin-top: 15em;
                }
            }
            &:nth-of-type(3) {
                margin-left: auto;
                width: 24.9%;
                @media (max-width: 750px) {
                    margin-top: 16em;
                    width: 41.4%;
                }
                img {
                    transform: translateX(10px);
                    width: 100%;
                    height: auto;
                }
            }
        }
    }
    .bg_image {
        position: absolute;
        top: 12em;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        @media (max-width: 750px) {
            top: 20em;
        }
        img.bg {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .text {
            position: absolute;
            bottom: -28.5em;
            left: 0;
            width: 85%;
            @media (max-width: 750px) {
                width: 91%;
                bottom: -16.5em;
            }
            img {
                width: 100%;
                height: auto;
            }
        }
    }
}
/* car_images_2 */
.car_images_2 {
    position: relative;
    z-index: 1;
    padding-top: 30.4em;
    padding-bottom: 2.5em;
    @media (max-width: 750px) {
        padding-top: 57.4em;
        padding-bottom: 9.5em;
    }
    .image {
        margin: 0 auto;
        width: 79%;
        display: flex;
        justify-content: end;
        @media (max-width: 750px) {
            justify-content: center;
        }
        > picture {
            height: 29.2em;
            width: auto;
            @media (max-width: 750px) {
                height: 143em;
            }
            img {
                height: 100%;
                width: auto;
            }
        }
    }
    .bg {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 18em;
        z-index: -1;
        background: #fff;
        opacity: 0.16;
        /* 右端だけ斜めにする */
        clip-path: polygon(
            0 0,
            /* 左上  */ 100% 0,
            /* 右上  */ 90% 100%,
            /* 右下(少し左へずらす) */ 0 100% /* 左下  */
        );
        @media (max-width: 750px) {
            height: 162em;
            clip-path: polygon(
                0 0,
                /* 左上  */ 100% 0,
                /* 右上  */ 87% 100%,
                /* 右下(少し左へずらす) */ 0 100% /* 左下  */
            );
        }
    }
}
/* footer_main */
.footer_main {
    margin-top: 9em;
    @media (max-width: 750px) {
        margin-top: 22em;
    }
    .logo {
        margin: 0 auto;
        padding: 3em;
        width: 33%;
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 1.8em;
        @media (max-width: 750px) {
            padding: 6em 10em;
            width: 83%;
            border-radius: 4.8em;
        }
        img {
            width: 100%;
            height: auto;
        }
    }
    .video {
        margin-top: 5.5em;
        display: flex;
        justify-content: center;
        @media (max-width: 750px) {
            margin-top: 15.5em;
        }
        iframe {
            width: 71%;
            aspect-ratio: 180 / 100;
            @media (max-width: 750px) {
                width: 86%;
            }
        }
    }
    .copy {
        padding: 8em 0 4em 0;
        display: flex;
        justify-content: center;
        @media (max-width: 750px) {
            padding: 20em 0 6em 0;
        }
        > div {
            height: 2em;
            @media (max-width: 750px) {
                height: 4em;
            }
            img {
                height: 100%;
                width: auto;
            }
        }
    }
    .point_btm {
        margin: 0 auto;
        margin-bottom: 8em;
        max-width: 71%;
        padding: 2em 1.5em;
        border: 1px solid #fff;
        line-height: 2em;
        font-size: 1em;
        color: #fff;
        text-align: center;
        font-weight: 300;
        @media (max-width: 750px) {
            margin-bottom: 4em;
            max-width: 86%;
            font-size: 3.2em;
            text-align: left;
        }
    }
}

.cta_bottom {
    margin-top: 6em;
    .wrap_cta {
        .text_in {
            padding: 2em 2.5em;
            margin: 0 auto;
            width: 71%;
            font-size: 2.5em;
            line-height: 2em;
            color: #fff;
            border: 1px solid #fff;
            @media (max-width: 750px) {
                padding: 2em 2em;
                width: 86%;
                font-size: 3.5em;
            }
            b {
                font-size: 1.1em;
            }
        }
        a.btn {
            margin: 1em auto;
            width: 9em;
            height: 2.35em;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.8em;
            background: #f15a24;
            color: #fff;
            border-radius: 0.5em;
            @media (max-width: 750px) {
                 font-size: 5.5em;
            }
        }
    }
}