/** -------------------------------
 * ranking
-*/
#ranking {
    clear: both;
    position: relative;
    margin-top: 12vw;
    background-color:  #fff;
}

/* header */
#ranking .header {
    position: relative;
    z-index: 1;
    padding: 0 4%;
}
#ranking .header:before {
    content: '';
    position: absolute;
    left: 4%;
    top: 0;
    display: block;
    width: 13.33%;
    height: 4px;
    border-top: 3.99px solid #c3002c;
}
    #ranking .header h1 {
        display: table;
        width: 100%;
    }
        #ranking .header span {
            display: table-cell;
            padding: 3.0% 0 0.6%;
            font-size: 7.46vw;
            font-weight: normal;
            vertical-align: middle;
        }

/* index */
#ranking .index {
    margin-top: 4vw;
}
    #ranking .index .swiper {
        position: relative;
        height: 100%;
        padding-right: 12vw;
    }
        #ranking .index .swiper-wrapper {
            height: 100%;
            padding-left: 4vw;
        }

/* slide */
#ranking .swiper-slide {
    padding-right: 4vw;
    /* opacity: .4; */
    /* transition: opacity .3s ease-out; */
}
    #ranking .swiper-slide .content {
        position: relative;
        width: 100%;
        aspect-ratio: 610 / 760;
        padding-top: 12vw;
        background-color: #eee;
        /* pointer-events: none; */
    }
        #ranking .swiper-slide .content > .wrap {
            opacity: 0;
            transition: opacity .3s ease-out;
        }
        #ranking .swiper-slide .content > .wrap:before {
            content: '';
            position: absolute;
            right: 4vw;
            bottom: 4vw;
            display: block;
            width: 8.8vw;
            height: 8.8vw;
            background-image: url(../IMAGES/ranking/icon_zoom.png);
            background-repeat: no-repeat;
            background-size: contain;
        }
            #ranking .swiper-slide .image {
                aspect-ratio: 1000 / 495;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                /* mix-blend-mode: multiply; */
            }
            #ranking .swiper-slide.item-1 .image {
                background-image: url(../IMAGES/ranking/car01.png);
            }
            #ranking .swiper-slide.item-2 .image {
                background-image: url(../IMAGES/ranking/car02.png);
            }
            #ranking .swiper-slide.item-3 .image {
                background-image: url(../IMAGES/ranking/car03.png);
            }
            #ranking .swiper-slide .number {
                position: absolute;
                left: 4vw;
                top: 2.5vw;
                font-size: 13.2vw;
                color: #d3d3d3;
                line-height: 1.1;
            }
            #ranking .swiper-slide .model {
                padding: 2.2vw 5vw 0;
            }
                #ranking .swiper-slide .model dt {
                    display: inline-block;
                    padding: .4vw 1vw;
                    background-color: #b7b7b7;
                    font-size: 3.73vw;
                    color: #fff;
                    line-height: 1.1;
                }
                #ranking .swiper-slide .model dd {
                    display: block;
                    margin-top: 3vw;
                    text-indent: .2em;
                }
                    #ranking .swiper-slide .brand {
                        font-size: 6.13vw;
                        line-height: 1.2;
                        letter-spacing: .02em;
                    }
                    #ranking .swiper-slide .edition {
                        font-size: 6.13vw;
                        line-height: 1.2;
                        letter-spacing: .04em;
                    }
            #ranking .swiper-slide .price {
                position: absolute;
                left: 0;
                bottom: 7vw;
                padding: 0 5vw;
            }
                #ranking .swiper-slide .price dt {
                    font-size: 3.2vw;
                    color: #666;
                    letter-spacing: .04em;
                }
                #ranking .swiper-slide .price dd {
                    font-size: 5.66vw;
                    line-height: 1.2;
                    letter-spacing: .04em;
                }
                    #ranking .swiper-slide .price dd span {
                        font-size: 5.33vw;
                    }
    #ranking .quote {
        margin-top: 4vw;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease-out;
    }
        #ranking .quote a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 11.73vw;
            background-color:#c3002c;
            color: #fff;
        }
            #ranking .quote span {
                position: relative;
                display: inline-block;
                padding-right: 4.8vw;
                font-size: 3.73vw;
                white-space: nowrap;
            }
            #ranking .quote a span:after {
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                display: block;
                width: 1.6vw;
                height: 2.4vw;
                margin-top: -1.2vw;
                background-image: url(../IMAGES/arrow_white.png);
                background-repeat: no-repeat;
                background-position: right;
                background-size: auto 2.4vw;
            }
/* slide.active */
#ranking .swiper-slide-active {
    /* opacity: 1; */
}
    /* #ranking .swiper-slide-active .content {
        pointer-events: inherit;
    } */
        #ranking .swiper-slide-active .content > .wrap {
            opacity: 1;
        }
    #ranking .swiper-slide-active .quote {
        pointer-events: inherit;
        opacity: 1;
    }

/* footer */
#ranking .footer {
    display: flex;
    padding: 4vw 4vw 0;
}
    #ranking .footer li {
        width: 50%;
    }
    #ranking .footer li:nth-child(1) {
        padding-right: 2vw;
    }
    #ranking .footer li:nth-child(2) {
        padding-left: 2vw;
    }
        #ranking .footer a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 11.73vw;
            background-color:#eee;
            color: #000;
        }
            #ranking .footer span {
                position: relative;
                display: inline-block;
                padding-right: 4.8vw;
                font-size: 3.2vw;
                white-space: nowrap;
            }
            #ranking .footer a span:after {
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                display: block;
                width: 1.6vw;
                height: 2.4vw;
                margin-top: -1.2vw;
                background-image: url(../IMAGES/link_red.png);
                background-repeat: no-repeat;
                background-position: right;
                background-size: auto 2.4vw;
            }

/* modal */
#ranking .modal {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 10;
    display: none;
    opacity: 0;
    background-color: #fff;
}
    #ranking .modal > .wrap {
        position: relative;
    }
        #ranking .modal .title {
            display: flex;
            align-items: center;
            width: 100%;
            height: 14.66vw;
            padding: 0 4vw;
            background-color: #eee;
        }
            #ranking .modal .title span {
                font-size: 5.33vw;
            }
        #ranking .modal .close {
            position: absolute;
            right: 3.33vw;
            top: 3.33vw;
            z-index: 1;
            display: block;
            width: 8vw;
            height: 8vw;
            background-image: url(../IMAGES/ranking/icon_close_sp.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: auto 4.26vw;
        }

/* detail */
#ranking .detail {
    position: relative;
    display: none;
    width: 100%;
    padding: 8vw 4vw 0;
}
#ranking .detail.show {
    display: block;
}
    #ranking .detail .image {
        aspect-ratio: 1000 / 495;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        mix-blend-mode: multiply;
    }
    #ranking .detail.item-1 .image {
        background-image: url(../IMAGES/ranking/car01.png);
    }
    #ranking .detail.item-2 .image {
        background-image: url(../IMAGES/ranking/car02.png);
    }
    #ranking .detail.item-3 .image {
        background-image: url(../IMAGES/ranking/car03.png);
    }
    #ranking .detail .number {
        display: none;
        position: absolute;
        left: 4vw;
        top: 2.5vw;
        font-size: 13.2vw;
        color: #d3d3d3;
        line-height: 1.1;
    }
    #ranking .detail .model {
        margin: 5vw 1.33vw 0;
    }
        #ranking .detail .model dt {
            display: inline-block;
            padding: .4vw 1.6vw;
            background-color: #b7b7b7;
            font-size: 4.26vw;
            color: #fff;
            line-height: 1.1;
        }
        #ranking .detail .model dd {
            display: block;
            margin-top: 3.2vw;
        }
            #ranking .detail .brand {
                font-size: 7.93vw;
                line-height: 1.35;
                letter-spacing: .02em;
            }
            #ranking .detail .edition {
                font-size: 7.73vw;
                line-height: 1.35;
                letter-spacing: .04em;
            }
    #ranking .detail .price {
        margin: 9vw 1.33vw 0;
    }
        #ranking .detail .price dt {
            font-size: 3.2vw;
            color: #666;
            letter-spacing: .04em;
        }
        #ranking .detail .price dd {
            margin-top: 1.6vw;
            font-size: 8.5vw;
            line-height: 1.2;
            letter-spacing: .04em;
        }
            #ranking .detail .price dd span {
                font-size: 8.3vw;
                line-height: 1.2;
            }
    #ranking .detail .wltc {
        margin: 8vw 1.33vw 0;
    }
        #ranking .detail .wltc dt {
            position: relative;
            padding-left: 18.5vw;
            font-size: 3.2vw;
        }
        #ranking .detail .wltc dt:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 16.53vw;
            height: 4.26vw;
            background-image: url(../IMAGES/ranking/icon_wltc.png);
            background-repeat: no-repeat;
            background-position: left;
            background-size: contain;
        }
        #ranking .detail .wltc dd {
            margin-top: .4vw;
            font-size: 5.86vw;
        }
            #ranking .detail .wltc dd span {
                font-size: 4vw;
            }
    #ranking .detail .battery {
        position: relative;
        margin: 4vw 1.33vw 0;
        padding-left: 6.8vw;
        font-size: 3.2vw;
    }
    #ranking .detail .battery:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 4.8vw;
        height: 4.26vw;
        background-image: url(../IMAGES/ranking/icon_battery.png);
        background-repeat: no-repeat;
        background-position: left;
        background-size: contain;
    }
    #ranking .detail .interior {
        margin-top: 10vw;
    }
        #ranking .detail .interior-title {
            font-size: 3.36vw;
        }
        #ranking .detail .interior-body {

        }
            #ranking .detail .interior-body li {
                display: block;
                aspect-ratio: 1380 / 777;
                margin-top: 2vw;
                background-color: #eee;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
            }
            #ranking .detail.item-1 .interior-body li:nth-child(1) {
                background-image: url(../IMAGES/ranking/inpane01.jpg);
            }
            #ranking .detail.item-1 .interior-body li:nth-child(2) {
                background-image: url(../IMAGES/ranking/sheet01.jpg);
            }
            #ranking .detail.item-2 .interior-body li:nth-child(1) {
                background-image: url(../IMAGES/ranking/inpane02.jpg);
            }
            #ranking .detail.item-2 .interior-body li:nth-child(2) {
                background-image: url(../IMAGES/ranking/sheet02.jpg);
            }
            #ranking .detail.item-3 .interior-body li:nth-child(1) {
                background-image: url(../IMAGES/ranking/inpane03.jpg);
            }
            #ranking .detail.item-3 .interior-body li:nth-child(2) {
                background-image: url(../IMAGES/ranking/sheet03.jpg);
            }
        #ranking .detail .interior-caption {
            margin-top: 3vw;
            font-size: 2.66vw;
            color: #666;
            line-height: 1.7;
        }
    #ranking .detail .option {
        margin-top: 10vw;
        padding-top: 8vw;
        border-top: 1px solid #ddd;
    }
        #ranking .detail .option dt {
            font-size: 5.86vw;
        }
            #ranking .detail .option dt span {
                font-size: 4vw;
            }
        #ranking .detail .option-body {
            padding-top: 1vw;
        }
            #ranking .detail .option-body ul {

            }
                #ranking .detail .option-body li {
                    position: relative;
                    margin-top: 4.4vw;
                    padding-left: 6vw;
                    font-size: 3.2vw;
                }
                #ranking .detail .option-body li:before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: .8vw;
                    display: block;
                    width: 3.6vw;
                    height: 2.93vw;
                    background-image: url(../IMAGES/ranking/icon_check.png);
                    background-repeat: no-repeat;
                    background-size: contain;
                }
        #ranking .detail .option-link {
            margin-top: 10vw;
        }
            #ranking .detail .option-link a {
                color: #000;
            }
                #ranking .detail .option-link span {
                    position: relative;
                    display: inline-block;
                    padding: 1vw 3vw 1vw 0;
                    font-size: 3.2vw;
                }
                #ranking .detail .option-link a span:after {
                    content: '';
                    position: absolute;
                    right: 0;
                    top: 50%;
                    display: block;
                    width: 1.73vw;
                    height: 2.94vw;
                    margin-top: -1.47vw;
                    background-image: url(../IMAGES/link_red.png);
                    background-repeat: no-repeat;
                    background-position: right;
                    background-size: auto 2.4vw;
                }

    #ranking .detail .links {
        position: relative;
        padding: 8vw 0 0;
    }
        #ranking .detail .links ul {
            display:  table;
            width: 100%;
        }
            #ranking .detail .links li {
                display:  table-cell;
                width: 33.33%;
            }
                #ranking .detail .links a {
                    position: relative;
                    display: table;
                    width: 100%;
                    height: 11.73vw;
                    background-color:#c3002c;
                    color: #fff;
                }
                #ranking .detail .links li:nth-child(2) a,
                #ranking .detail .links li:nth-child(3) a {
                    border-left:  1px solid #fff;
                }
                    #ranking .detail .links span {
                        display: table-cell;
                        padding: 0 0 0 2.6vw;
                        font-size: 2.66vw;
                        vertical-align: middle;
                        white-space: nowrap;
                    }
                #ranking .detail .links a:after {
                    content: '';
                    position: absolute;
                    right: 2.6vw;
                    top: 50%;
                    display: block;
                    width: 1.6vw;
                    height: 2.4vw;
                    margin-top: -1.2vw;
                    background-image: url(../IMAGES/arrow_white.png);
                    background-repeat: no-repeat;
                    background-position: right;
                    background-size: auto 2.4vw;
                }


/** -------------------------------
 * image-gallery
-*/
#image-gallery {
    clear: both;
    position: relative;
    margin-top: 12vw;
    background-color:  #fff;
}
#image-gallery > .wrap {
    display: block;
}

#image-gallery .header {
    position: relative;
    z-index: 1;
    padding: 0 4%;
}
#image-gallery .header:before {
    content: '';
    position: absolute;
    left: 4%;
    top: 0;
    display: block;
    width: 13.33%;
    height: 4px;
    border-top: 3.99px solid #c3002c;
}
    #image-gallery .header h1 {
        display: table;
        width: 100%;
    }
        #image-gallery .header span {
            display: table-cell;
            padding: 3.0% 0 0.6%;
            font-size: 28px;
            font-size: 7.46vw;
            font-weight: normal;
            vertical-align: middle;
        }

#image-gallery .index {
    margin-top: 4vw;
    padding: 0 4vw;
}
    #image-gallery .index > .wrap {
        position: relative;
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        gap: 2.8vw;
    }
        #image-gallery .index .item {
            position: relative;
            width: calc((100% - 2.8vw) / 2);
            aspect-ratio: 16 / 9;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        /* #image-gallery .index .item:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            background-image: url(../IMAGES/image/icon_zoom.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: auto 8vw;
            opacity: .5;
            transition: opacity .5s ease-out;
        } */
        #image-gallery .index .item:nth-child(1) {
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 3;
        }
        #image-gallery .index .item:nth-child(1) {
            background-image: url(../IMAGES/image/img_thumb_01.jpg);
        }
        #image-gallery .index .item:nth-child(2) {
            background-image: url(../IMAGES/image/img_thumb_02.jpg);
        }
        #image-gallery .index .item:nth-child(3) {
            background-image: url(../IMAGES/image/img_thumb_03.jpg);
        }
        #image-gallery .index .item:nth-child(4) {
            background-image: url(../IMAGES/image/img_thumb_04.jpg);
        }
        #image-gallery .index .item:nth-child(5),
        #image-gallery .index .item:nth-child(6),
        #image-gallery .index .item:nth-child(7) {
            display: none;
        }

#image-gallery .detail_pc {
    display: none;
}

#image-gallery .detail_sp {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: none;
    background-color: #000;
}
    #image-gallery .detail_sp > .wrap {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0 4vw;
    }
        #image-gallery .detail_sp .body {
            position: absolute;
            left: 4vw;
            right: 4vw;
            top: 50%;
            transform: translateY(-50%);
        }
            #image-gallery .detail_sp .swiper {
                position: relative;
            }
                #image-gallery .detail_sp .swiper-wrapper {

                }
                    #image-gallery .detail_sp .swiper-slide {
                        width: 100%;
                        height: inherit;
                        aspect-ratio: 16 / 9;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: cover;
                    }
                    #image-gallery .detail_sp .swiper-slide.detail-1 {
                        background-image: url(../IMAGES/image/img_thumb_01.jpg);
                    }
                    #image-gallery .detail_sp .swiper-slide.detail-2 {
                        background-image: url(../IMAGES/image/img_thumb_02.jpg);
                    }
                    #image-gallery .detail_sp .swiper-slide.detail-3 {
                        background-image: url(../IMAGES/image/img_thumb_03.jpg);
                    }
                    #image-gallery .detail_sp .swiper-slide.detail-4 {
                        background-image: url(../IMAGES/image/img_thumb_04.jpg);
                    }
                #image-gallery .detail_sp .prev,
                #image-gallery .detail_sp .next {
                    display: none;
                }
                #image-gallery .detail_sp .page {
                    display: none;
                    /* display: block; */
                    margin-top: 1.6vw;
                    font-size: 2.93vw;
                    white-space: nowrap;
                    text-align: center;
                    letter-spacing: .1em;
                }
        #image-gallery .detail_sp .close {
            position: absolute;
            right: 4vw;
            top: 4vw;
            z-index: 1;
            display: block;
            width: 8vw;
            height: 8vw;
            background-image: url(../IMAGES/icon_close.png);
            background-repeat: no-repeat;
            background-size: contain;
        }

        #image-gallery .footer {
            padding: 6.8vw 4vw 0;
        }
            #image-gallery .footer a {
                position: relative;
                display: table;
                width: 100%;
                height: 11.73vw;
                margin: 0 auto;
                background-color:#c3002c;
                color: #fff;
                }
                #image-gallery .footer span {
                    display: table-cell;
                    padding: 0 0 0 2.6vw;
                    font-size: 3.73vw;
                    vertical-align: middle;
                    white-space: nowrap;
                }
            #image-gallery .footer a:after {
                content: '';
                position: absolute;
                right: 2.6vw;
                top: 50%;
                display: block;
                width: 1.6vw;
                height: 2.4vw;
                margin-top: -1.2vw;
                background-image: url(../IMAGES/arrow_white.png);
                background-repeat: no-repeat;
                background-position: right;
                background-size: auto 2.4vw;
            }


/** -------------------------------
 * movie-gallery
-*/
#movie-gallery {
    clear: both;
    position: relative;
    margin-top: 12vw;
    background-color:  #fff;
}
#movie-gallery > .wrap {
    display: block;
}

#movie-gallery .header {
    position: relative;
    z-index: 1;
    padding: 0 4%;
}
#movie-gallery .header:before {
    content: '';
    position: absolute;
    left: 4%;
    top: 0;
    display: block;
    width: 13.33%;
    height: 4px;
    border-top: 3.99px solid #c3002c;
}
    #movie-gallery .header h1 {
        display: table;
        width: 100%;
    }
        #movie-gallery .header span {
            display: table-cell;
            padding: 3.0% 0 0.6%;
            font-size: 28px;
            font-size: 7.46vw;
            font-weight: normal;
            vertical-align: middle;
        }

#movie-gallery .index_pc {
    display: none;
}

#movie-gallery .index_sp {
    margin-top: 4vw;
    padding: 0 4vw;
}
    #movie-gallery .index_sp > .wrap {
        position: relative;
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        gap: 2.8vw;
    }
        #movie-gallery .index_sp .item {
            width: calc((100% - 2.8vw) / 2);
        }
            #movie-gallery .index_sp .item div {
                position: relative;
                aspect-ratio: 16 / 9;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
            }
            #movie-gallery .index_sp .item.item-1 div {
                background-image: url(../IMAGES/movie/mov_thumb_03.jpg);
            }
            #movie-gallery .index_sp .item.item-2 div {
                background-image: url(../IMAGES/movie/mov_thumb_04.jpg);
            }
            #movie-gallery .index_sp .item.item-3 div {
                background-image: url(../IMAGES/movie/mov_thumb_05.jpg);
            }
            #movie-gallery .index_sp .item.item-4 div {
                background-image: url(../IMAGES/movie/mov_thumb_06.jpg);
            }
            #movie-gallery .index_sp .item div:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                z-index: 1;
                background-image: url(../IMAGES/movie/icon_play.png);
                background-repeat: no-repeat;
                background-position: center;
                background-size: auto 8vw;
                opacity: .5;
                transition: opacity .5s ease-out;
            }
            #movie-gallery .index_sp .item span {
                display: block;
                padding-top: 1.1vw;
                font-size: 2.93vw;
            }

#movie-gallery .detail_sp {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: none;
    background-color: #000;
}
    #movie-gallery .detail_sp > .wrap {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 0 4vw;
    }
        #movie-gallery .detail_sp .movie {
            width: 100%;
            aspect-ratio: 16 / 9;
        }
            #movie-gallery .detail_sp iframe {
                width: 100%;
                height: 100%;
            }
        #movie-gallery .detail_sp .close {
            position: absolute;
            right: 4vw;
            top: 4vw;
            z-index: 1;
            display: block;
            width: 8vw;
            height: 8vw;
            background-image: url(../IMAGES/icon_close.png);
            background-repeat: no-repeat;
            background-size: contain;
        }

    #movie-gallery .footer {
        padding: 6.8vw 4vw 0;
    }
        #movie-gallery .footer a {
            position: relative;
            display: table;
            width: 100%;
            height: 11.73vw;
            margin: 0 auto;
            background-color:#c3002c;
            color: #fff;
            }
            #movie-gallery .footer span {
                display: table-cell;
                padding: 0 0 0 2.6vw;
                font-size: 3.73vw;
                vertical-align: middle;
                white-space: nowrap;
            }
        #movie-gallery .footer a:after {
            content: '';
            position: absolute;
            right: 2.6vw;
            top: 50%;
            display: block;
            width: 1.6vw;
            height: 2.4vw;
            margin-top: -1.2vw;
            background-image: url(../IMAGES/arrow_white.png);
            background-repeat: no-repeat;
            background-position: right;
            background-size: auto 2.4vw;
        }