/** -------------------------------
 * ranking
-*/
#ranking {
    clear: both;
    position: relative;
    margin-top: 4%;
    padding: 0 3.667% 0;
    background-color:  #fff;
}
#ranking > .wrap {
    position: relative;
}


/* header */
#ranking .header {
    position: relative;
    max-width: 1170px;
    margin: 0 auto;
    z-index: 1;
    padding-top: 1.4%;
}
#ranking .header:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 4.27%;
    height: 5px;
    background-color: #c3002c;
}
    #ranking .header h1 {
        display: table;
    }
        #ranking .header span {
            display: table-cell;
            font-size: 3.6em;
            font-weight: normal;
            line-height: 1.1;
            vertical-align: middle;
            letter-spacing: 0.03em;
        }

@media screen and (min-width: 581px) and (max-width: 1279px) {
#ranking .header:before {
    height: .39vw;
}
}


/* index */
#ranking .index {
    max-width: 1088px;
    margin: 40px auto 0;
}
    #ranking .index .swiper {

    }
        #ranking .index .swiper-wrapper {
            gap: 0 40px;
        }

@media screen and (min-width: 581px) and (max-width: 1279px) {
#ranking .index {
    max-width: 85vw;
    margin: 3.12vw auto 0;
}
        #ranking .index .swiper-wrapper {
            gap: 0 3.12vw;
        }
}


/* slide */
#ranking .swiper-slide {
    flex-shrink: 1;
}
    #ranking .swiper-slide .content {
        position: relative;
        width: 100%;
        aspect-ratio: 336 / 415;
        background-color: #eee;
    }
        #ranking .swiper-slide .content > .wrap {
            padding-top: 50px;
        }
        #ranking .swiper-slide .content > .wrap:before {
            content: '';
            position: absolute;
            right: 20px;
            bottom: 20px;
            display: block;
            width: 24px;
            height: 24px;
            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;
                transition: transform .5s ease-out;
            }
            #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: 18px;
                top: 15px;
                font-size: 62px;
                color: #d3d3d3;
                line-height: 1.1;
                transition: color .5s ease-out;
            }
            #ranking .swiper-slide .model {
                padding: 12px 18px;
            }
                #ranking .swiper-slide .model dt {
                    display: inline-block;
                    padding: 2px 4px;
                    background-color: #b7b7b7;
                    font-size: 16px;
                    color: #fff;
                    line-height: 1.1;
                }
                #ranking .swiper-slide .model dd {
                    display: block;
                    margin-top: 8px;
                    text-indent: .2em;
                }
                    #ranking .swiper-slide .brand {
                        font-size: 21px;
                        line-height: 1.3;
                        letter-spacing: .04em;
                    }
                    #ranking .swiper-slide .edition {
                        font-size: 21px;
                        line-height: 1.3;
                        letter-spacing: .04em;
                    }
            #ranking .swiper-slide .price {
                position: absolute;
                left: 0;
                bottom: 18px;
                padding: 0 18px;
            }
                #ranking .swiper-slide .price dt {
                    font-size: 14px;
                    color: #666;
                    letter-spacing: .04em;
                }
                #ranking .swiper-slide .price dd {
                    font-size: 30px;
                    line-height: 1.2;
                    letter-spacing: .04em;
                }
                    #ranking .swiper-slide .price dd span {
                        display: inline-block;
                        font-size: 27px;
                    }
        #ranking .swiper-slide .content:hover {

        }
            #ranking .swiper-slide .content:hover .image {
                transform: scale(1.07);
            }
            #ranking .swiper-slide .content:hover .number {
                color: #b7b7b7;
            }

@media screen and (min-width: 581px) and (max-width: 1279px) {
        #ranking .swiper-slide .content > .wrap {
            padding-top: 3.9vw;
        }
        #ranking .swiper-slide .content > .wrap:before {
            right: 1.56vw;
            bottom: 1.56vw;
            width: 1.87vw;
            height: 1.87vw;
        }
            #ranking .swiper-slide .number {
                left: 1.4vw;
                top: 1.17vw;
                font-size: 4.84vw;
            }
            #ranking .swiper-slide .model {
                padding: .93vw 1.4vw;
            }
                #ranking .swiper-slide .model dt {
                    padding: .156vwx .312vw;
                    font-size: 1.25vw;
                }
                #ranking .swiper-slide .model dd {
                    margin-top: .625vw;
                }
                    #ranking .swiper-slide .brand {
                        font-size: 1.64vw;
                    }
                    #ranking .swiper-slide .edition {
                        font-size: 1.64vw;
                    }
            #ranking .swiper-slide .price {
                bottom: 1.4vw;
                padding: 0 1.4vw;
            }
                #ranking .swiper-slide .price dt {
                    font-size: 1.09vw;
                }
                #ranking .swiper-slide .price dd {
                    font-size: 2.34vw;
                }
                    #ranking .swiper-slide .price dd span {
                        font-size: 2.11vw;
                    }
}


    #ranking .quote {
        margin-top: 14px;
    }
        #ranking .quote a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 44px;
            background-color:#c3002c;
            color: #fff;
        }
        #ranking .quote a:hover {
            background: #920023;
        }
            #ranking .quote span {
                position: relative;
                display: inline-block;
                padding-right: 22px;
                font-size: 14px;
                white-space: nowrap;
            }
            #ranking .quote a span:after {
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                display: block;
                width: 7px;
                height: 10px;
                margin-top: -5px;
                background-image: url(../IMAGES/arrow_white.png);
                background-repeat: no-repeat;
                background-position: right;
                background-size: auto 10px;
            }

@media screen and (min-width: 581px) and (max-width: 1279px) {
    #ranking .quote {
        margin-top: 1.09vw;
    }
        #ranking .quote a {
            height: 3.43vw;
        }
            #ranking .quote span {
                padding-right: 1.71vw;
                font-size: 1.09vw;
            }
            #ranking .quote a span:after {
                width: .54vw;
                height: .78vw;
                margin-top: -.39vw;
                background-size: auto .78vw;
            }
}


/* footer */
#ranking .footer {
    display: flex;
    width: 700px;
    margin: 48px auto 0;
}
    #ranking .footer li {
        width: 50%;
    }
    #ranking .footer li:nth-child(1) {
        padding-right: 20px;
    }
    #ranking .footer li:nth-child(2) {
        padding-left: 20px;
    }
        #ranking .footer a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 44px;
            background-color:#eee;
            color: #000;
        }
            #ranking .footer span {
                position: relative;
                display: inline-block;
                padding-right: 22px;
                font-size: 14px;
                white-space: nowrap;
            }
            #ranking .footer a span:after {
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                display: block;
                width: 7px;
                height: 10px;
                margin-top: -5px;
                background-image: url(../IMAGES/link_red.png);
                background-repeat: no-repeat;
                background-position: right;
                background-size: auto 10px;
                transition: transform .3s ease-out;
            }
        #ranking .footer a:hover {
            color: #c3002c;
        }
            #ranking .footer a:hover span:after {
                transform: translateX(8px);
            }

@media screen and (min-width: 581px) and (max-width: 1279px) {
    #ranking .footer {
        width: 54.68vw;
        margin: 3.75vw auto 0;
    }
        #ranking .footer li:nth-child(1) {
            padding-right: 1.56vw;
        }
        #ranking .footer li:nth-child(2) {
            padding-left: 1.56vw;
        }
            #ranking .footer a {
                height: 3.43vw;
            }
                #ranking .footer span {
                    padding-right: 1.71vw;
                    font-size: 1.09vw;
                }
                #ranking .footer a span:after {
                    width: .54vw;
                    height: .78vw;
                    margin-top: -.39vw;
                    background-size: auto .78vw;
                }
                #ranking .footer a:hover span:after {
                    transform: translateX(.62vw);
                }
}


/* modal */
#ranking .modal {
    position: absolute;
    left: 50%;
    top: 0;
    /* right: 0; */
    bottom: 84px;
    z-index: 1;
    width: 1170px;
    margin-left: -585px;
    display: none;
    opacity: 0;
    background-color: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
    #ranking .modal .title {
        padding: 0 20px;
        background-color: #eee;
    }
        #ranking .modal .title span {
            display: flex;
            align-items: center;
            max-width: 1170px;
            height: 40px;
            margin: 0 auto;
            font-size: 18px;
            line-height: 1.1;
            letter-spacing: .04em;
        }
    #ranking .modal .close {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
        display: block;
        width: 40px;
        height: 40px;
        background-image: url(../IMAGES/ranking/icon_close_pc.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 20px;
    }
    #ranking .modal > .wrap {
        position: relative;
        padding: 0 20px;
    }

@media screen and (min-width: 581px) and (max-width: 1279px) {
#ranking .modal {
    left: 0;
    right: 0;
    bottom: 6.56vw;
    width: auto;
    margin-left: 0;
    box-shadow: 0 .23vw .93vw rgba(0, 0, 0, 0.15);
}
    #ranking .modal .title {
        padding: 0 1.56vw;
    }
        #ranking .modal .title span {
            max-width: 91.4vw;
            height: 3.12vw;
            font-size: 1.4vw;
        }
    #ranking .modal .close {
        width: 3.12vw;
        height: 3.12vw;
        background-size: auto 1.56vw;
    }
    #ranking .modal > .wrap {
        padding: 0 1.56vw;
    }
}


/* detail */
#ranking .detail {
    position: relative;
    display: none;
    max-width: 1015px;
    margin: 0 auto;
}
#ranking .detail.show {
    display: flex;
    width: 100%;
}
    #ranking .detail .section {
        width: 520px;
    }
    #ranking .detail .section:nth-child(2) {
        width: 495px;
    }
    #ranking .detail .links {
        display: none;
    }

@media screen and (min-width: 581px) and (max-width: 1279px) {
#ranking .detail {
    max-width: 79.3vw;
}
    #ranking .detail .section {
        width: 40.62vw;
    }
    #ranking .detail .section:nth-child(2) {
        width: 38.67vw;
    }
}


    /* detail - left */
    #ranking .detail .image {
        width: 392px;
        margin-top: 30px;
        margin-left: 12px;
        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);
    }

    @media screen and (min-width: 581px) and (max-width: 1279px) {
        #ranking .detail .image {
            width: 30.62vw;
            margin-top: 2.34vw;
            margin-left: .93vw;
        }
    }

    #ranking .detail .number {
        position: absolute;
        left: 0;
        top: 18px;
        font-size: 62px;
        color: #d3d3d3;
        line-height: 1.1;
    }
    #ranking .detail .model {
        margin-top: 10px;
    }
        #ranking .detail .model dt {
            display: inline-block;
            padding: 3px 10px;
            background-color: #b7b7b7;
            font-size: 16px;
            color: #fff;
            line-height: 1.1;
        }
        #ranking .detail .model dd {
            display: block;
            margin-top: 15px;
            text-indent: .2em;
        }
            #ranking .detail .brand {
                font-size: 23px;
                line-height: 1.3;
                letter-spacing: .04em;
            }
            #ranking .detail .edition {
                font-size: 23px;
                line-height: 1.3;
                letter-spacing: .04em;
            }

    @media screen and (min-width: 581px) and (max-width: 1279px) {
        #ranking .detail .number {
            top: 1.4vw;
            font-size: 4.84vw;
        }
        #ranking .detail .model {
            margin-top: .78vw;
        }
            #ranking .detail .model dt {
                padding: .23vw .78vw;
                font-size: 1.25vw;
            }
            #ranking .detail .model dd {
                margin-top: 1.17vw;
            }
                #ranking .detail .brand {
                    font-size: 1.79vw;
                }
                #ranking .detail .edition {
                    font-size: 1.79vw;
                }
    }

    #ranking .detail .price {
        margin-top: 15px;
    }
        #ranking .detail .price dt {
            font-size: 12px;
            color: #666;
            letter-spacing: .04em;
        }
        #ranking .detail .price dd {
            font-size: 26px;
            line-height: 1.2;
            letter-spacing: .04em;
        }
            #ranking .detail .price dd span {
                font-size: 24px;
                line-height: 1.2;
            }

    @media screen and (min-width: 581px) and (max-width: 1279px) {
        #ranking .detail .price {
            margin-top: 1.17vw;
        }
            #ranking .detail .price dt {
                font-size: .93vw;
            }
            #ranking .detail .price dd {
                font-size: 2.03vw;
            }
                #ranking .detail .price dd span {
                    font-size: 1.86vw;
                }
    }

    #ranking .detail .wltc {
        display: flex;
        margin-top: 42px;
    }
        #ranking .detail .wltc dt {
            position: relative;
            padding-left: 70px;
            font-size: 11px;
        }
        #ranking .detail .wltc dt:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 62px;
            height: 16px;
            background-image: url(../IMAGES/ranking/icon_wltc.png);
            background-repeat: no-repeat;
            background-position: left;
            background-size: contain;
        }
        #ranking .detail .wltc dd {
            margin-top: -14px;
            margin-left: 8px;
            font-size: 24px;
        }
            #ranking .detail .wltc dd span {
                font-size: 16px;
            }

    @media screen and (min-width: 581px) and (max-width: 1279px) {
        #ranking .detail .wltc {
            margin-top: 3.28vw;
        }
            #ranking .detail .wltc dt {
                padding-left: 5.46vw;
                font-size: .85vw;
            }
            #ranking .detail .wltc dt:before {
                width: 4.84vw;
                height: 1.25vw;
            }
            #ranking .detail .wltc dd {
                margin-top: -1.09vw;
                margin-left: .62vw;
                font-size: 1.87vw;
            }
                #ranking .detail .wltc dd span {
                    font-size: 1.25vw;
                }
    }

    #ranking .detail .battery {
        position: relative;
        margin-top: 16px;
        padding-left: 23px;
        font-size: 11px;
    }
    #ranking .detail .battery:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 17px;
        height: 15px;
        background-image: url(../IMAGES/ranking/icon_battery.png);
        background-repeat: no-repeat;
        background-position: left;
        background-size: contain;
    }

    @media screen and (min-width: 581px) and (max-width: 1279px) {
        #ranking .detail .battery {
            margin-top: 1.25vw;
            padding-left: 1.79vw;
            font-size: .86vw;
        }
        #ranking .detail .battery:before {
            width: 1.32vw;
            height: 1.17vw;
        }
    }


    /* detail - left */
    #ranking .detail .interior {
        margin-top: 22px;
    }
        #ranking .detail .interior-title {
            font-size: 12px;
        }
        #ranking .detail .interior-body {
            display: flex;
            gap: 0 15px;
            width: 100%;
            margin-top: 8px;
        }
            #ranking .detail .interior-body li {
                display: block;
                width: 50%;
                aspect-ratio: 1380 / 777;
                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: 10px;
            font-size: 9px;
            color: #666;
            line-height: 1.7;
        }

    @media screen and (min-width: 581px) and (max-width: 1279px) {
        #ranking .detail .interior {
            margin-top: 1.71vw;
        }
            #ranking .detail .interior-title {
                font-size: .93vw;
            }
            #ranking .detail .interior-body {
                gap: 0 1.17vw;
                margin-top: .62vw;
            }
            #ranking .detail .interior-caption {
                margin-top: .78vw;
                font-size: .7vw;
            }
    }

    #ranking .detail .option {
        margin-top: 21px;
        padding-top: 18px;
        border-top: 1px solid #ddd;
    }
        #ranking .detail .option dt {
            font-size: 20px;
        }
            #ranking .detail .option dt span {
                font-size: 14px;
            }

    @media screen and (min-width: 581px) and (max-width: 1279px) {
        #ranking .detail .option {
            margin-top: 1.64vw;
            padding-top: 1.4vw;
        }
            #ranking .detail .option dt {
                font-size: 1.56vw;
            }
                #ranking .detail .option dt span {
                    font-size: 1.09vw;
                }
    }

        #ranking .detail .option-body {
            padding-top: 5px;
        }
            #ranking .detail .option-body ul {

            }
                #ranking .detail .option-body li {
                    position: relative;
                    margin-top: 6px;
                    padding-left: 17px;
                    font-size: 12px;
                }
                #ranking .detail .option-body li:before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    display: block;
                    width: 11px;
                    height: 9px;
                    margin-top: -4.5px;
                    background-image: url(../IMAGES/ranking/icon_check.png);
                    background-repeat: no-repeat;
                    background-size: contain;
                }

        @media screen and (min-width: 581px) and (max-width: 1279px) {
            #ranking .detail .option-body {
                padding-top: .39vw;
            }
                    #ranking .detail .option-body li {
                        margin-top: .46vw;
                        padding-left: 1.32vw;
                        font-size: .93vw;
                    }
                    #ranking .detail .option-body li:before {
                        width: .86vw;
                        height: .7vw;
                        margin-top: -.35vw;
                    }
        }

        #ranking .detail .option-link {
            margin-top: 20px;
        }
            #ranking .detail .option-link a {
                color: #000;
            }
                #ranking .detail .option-link span {
                    position: relative;
                    display: inline-block;
                    padding-right: 16px;
                    font-size: 12px;
                }
                #ranking .detail .option-link a span:after {
                    content: '';
                    position: absolute;
                    right: 0;
                    top: 50%;
                    display: block;
                    width: 8px;
                    height: 12px;
                    margin-top: -6px;
                    background-image: url(../IMAGES/link_red.png);
                    background-repeat: no-repeat;
                    background-position: right;
                    background-size: auto 12px;
                }
            #ranking .detail .option-link a:hover {
                color: #c3002c;
            }

        @media screen and (min-width: 581px) and (max-width: 1279px) {
            #ranking .detail .option-link {
                margin-top: 1.56vw;
            }
                    #ranking .detail .option-link span {
                        padding-right: .125vw;
                        font-size: .93vw;
                    }
                    #ranking .detail .option-link a span:after {
                        width: .625vw;
                        height: .93vw;
                        margin-top: -.47vw;
                        background-size: auto .93vw;
                    }
        }

/** -------------------------------
 * image-gallery
-*/
#image-gallery {
    clear: both;
    position: relative;
    margin-top: 6%;
    padding: 0 3.667% 2%;
    background-color:  #fff;
}
#image-gallery > .wrap {
    display: block;
    max-width: 1170px;
    margin: 0 auto;
}

#image-gallery .header {
    position: relative;
    z-index: 1;
    padding-top: 1.4%;
}
#image-gallery .header:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 4.27%;
    height: 5px;
    background-color: #c3002c;
}
    #image-gallery .header h1 {
        display: table;
    }
        #image-gallery .header span {
            display: table-cell;
            font-size: 3.6em;
            font-weight: normal;
            line-height: 1.1;
            vertical-align: middle;
            letter-spacing: 0.03em;
        }

@media screen and (min-width: 581px) and (max-width: 1499px) {}


#image-gallery .index {
    display: block;
    max-width: 1170px;
    margin: 0 auto;
}
    #image-gallery .index > .wrap {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        column-gap: 1px;
        row-gap: 1px;
        width: 100%;
        margin-top: 2.5%;
        aspect-ratio: 1170 / 494;
        background-color: #707070;
    }
        #image-gallery .index .item {
            position: relative;
            overflow: hidden;
            background-color: #000;
        }
        #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 47px;
            opacity: 0;
            transition: opacity .7s 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(2) {
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 3;
            grid-row-end: 4;
        }
        #image-gallery .index .item:nth-child(3) {
            grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 3;
            grid-row-end: 4;
        }
        #image-gallery .index .item:nth-child(4) {
            grid-column-start: 3;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 2;
        }
        #image-gallery .index .item:nth-child(5) {
            grid-column-start: 3;
            grid-column-end: 4;
            grid-row-start: 2;
            grid-row-end: 4;
        }
        #image-gallery .index .item:nth-child(6) {
            grid-column-start: 4;
            grid-column-end: 5;
            grid-row-start: 1;
            grid-row-end: 3;
        }
        #image-gallery .index .item:nth-child(7) {
            grid-column-start: 4;
            grid-column-end: 5;
            grid-row-start: 3;
            grid-row-end: 4;
        }
            #image-gallery .index .item span {
                position: relative;
                display: block;
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                transition: all 1s ease-out;
            }
            #image-gallery .index .item:nth-child(1) span {
                background-image: url(../IMAGES/image/mosic_thumb_01.jpg);
            }
            #image-gallery .index .item:nth-child(2) span {
                background-image: url(../IMAGES/image/mosic_thumb_02.jpg);
            }
            #image-gallery .index .item:nth-child(3) span {
                background-image: url(../IMAGES/image/mosic_thumb_03.jpg);
            }
            #image-gallery .index .item:nth-child(4) span {
                background-image: url(../IMAGES/image/mosic_thumb_04.jpg);
            }
            #image-gallery .index .item:nth-child(5) span {
                background-image: url(../IMAGES/image/mosic_thumb_05.jpg);
            }
            #image-gallery .index .item:nth-child(6) span {
                background-image: url(../IMAGES/image/mosic_thumb_06.jpg);
            }
            #image-gallery .index .item:nth-child(7) span {
                background-image: url(../IMAGES/image/mosic_thumb_07.jpg);
            }
        #image-gallery .index .item:hover:before {
            opacity: 1;
        }
            #image-gallery .index .item:hover span {
                transform: scale(1.2);
                opacity: .5;
            }

@media screen and (min-width: 581px) and (max-width: 1499px) {}


#image-gallery .detail_pc {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: none;
    background-color: #000;
}
    #image-gallery .detail_pc .swiper {
        position: relative;
        height: 100%;
    }
        #image-gallery .detail_pc .swiper-wrapper {
            height: 100%;
        }
            #image-gallery .detail_pc .swiper-slide {
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-position: center;
                background-size: auto 86%;
            }
            #image-gallery .detail_pc .swiper-slide.detail-1 {
                background-image: url(../IMAGES/image/img_thumb_01.jpg);
            }
            #image-gallery .detail_pc .swiper-slide.detail-2 {
                background-image: url(../IMAGES/image/img_thumb_02.jpg);
            }
            #image-gallery .detail_pc .swiper-slide.detail-3 {
                background-image: url(../IMAGES/image/img_thumb_03.jpg);
            }
            #image-gallery .detail_pc .swiper-slide.detail-4 {
                background-image: url(../IMAGES/image/img_thumb_04.jpg);
            }
            #image-gallery .detail_pc .swiper-slide.detail-5 {
                background-image: url(../IMAGES/image/img_thumb_05.jpg);
            }
            #image-gallery .detail_pc .swiper-slide.detail-6 {
                background-image: url(../IMAGES/image/img_thumb_06.jpg);
            }
            #image-gallery .detail_pc .swiper-slide.detail-7 {
                background-image: url(../IMAGES/image/img_thumb_07.jpg);
            }
        #image-gallery .detail_pc .close {
            position: absolute;
            left: 50%;
            top: 7%;
            z-index: 1;
            display: block;
            width: 30px;
            height: 30px;
            background-image: url(../IMAGES/icon_close.png);
            background-repeat: no-repeat;
            background-size: contain;
        }
        #image-gallery .detail_pc .next {
            position: absolute;
            left: 50%;
            top: calc(7% + 50px);
            z-index: 1;
            display: block;
            width: 30px;
            height: 30px;
            background-image: url(../IMAGES/icon_next.png);
            background-repeat: no-repeat;
            background-size: contain;
            cursor: pointer;
        }
        #image-gallery .detail_pc .next[aria-disabled="true"] {
            cursor: default;
            opacity: .3;
        }
        #image-gallery .detail_pc .prev {
            position: absolute;
            left: 50%;
            top: calc(7% + 90px);
            z-index: 1;
            display: block;
            width: 30px;
            height: 30px;
            background-image: url(../IMAGES/icon_prev.png);
            background-repeat: no-repeat;
            background-size: contain;
            cursor: pointer;
        }
        #image-gallery .detail_pc .prev[aria-disabled="true"] {
            cursor: default;
            opacity: .3;
        }
        #image-gallery .detail_pc .page {
            position: absolute;
            left: 50%;
            top: calc(7% + 150px);
            z-index: 1;
            display: block;
            width: 30px;
            font-size: 10px;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            letter-spacing: .1em;
        }

@media screen and (min-width: 581px) and (max-width: 1499px) {}


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


#image-gallery .footer {

}
    #image-gallery .footer a {
        position: relative;
        display: table;
        height: 44px;
        margin: 3.4% auto 0;
        background-color:#c3002c;
        color: #fff;
        }
        #image-gallery .footer span {
            display: table-cell;
            padding: 0 40px 0 16px;
            font-size: 1.4em;
            vertical-align: middle;
            white-space: nowrap;
        }
    #image-gallery .footer a:after {
        content: '';
        position: absolute;
        right: 18px;
        top: 50%;
        display: block;
        width: 7px;
        height: 10px;
        margin-top: -5px;
        background-image: url(../IMAGES/arrow_white.png);
        background-repeat: no-repeat;
        background-position: right;
        background-size: auto 10px;
    }
    #image-gallery .footer a:hover {
        background: #920023;
    }
        #image-gallery .footer a:hover span {
        color:#fff;
        }

@media screen and (min-width: 581px) and (max-width: 1499px) {}



/** -------------------------------
 * movie-gallery
-*/
#movie-gallery {
    clear: both;
    position: relative;
    margin-top: 6%;
    padding: 0 3.667% 2%;
    background-color:  #fff;
}
#movie-gallery > .wrap {
    display: block;
    max-width: 1170px;
    margin: 0 auto;
}

#movie-gallery .header {
    position: relative;
    z-index: 1;
    padding-top: 1.4%;
}
#movie-gallery .header:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 4.27%;
    height: 5px;
    background-color: #c3002c;
}
    #movie-gallery .header h1 {
        display: table;
    }
        #movie-gallery .header span {
            display: table-cell;
            font-size: 3.6em;
            font-weight: normal;
            line-height: 1.1;
            vertical-align: middle;
            letter-spacing: 0.03em;
        }

@media screen and (min-width: 581px) and (max-width: 1499px) {}

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


#movie-gallery .index_pc {
    display: block;
    max-width: 1170px;
    margin: 0 auto;
}
    #movie-gallery .index_pc > .wrap {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 2.5%;
    }
        #movie-gallery .index_pc .item {
            width: calc((100% - 2.56% * 2) / 3);
            margin-right: 2.56%;
            margin-top: 2.56%;
            aspect-ratio: 800 / 450;
        }
        #movie-gallery .index_pc .item:nth-child(1),
        #movie-gallery .index_pc .item:nth-child(2),
        #movie-gallery .index_pc .item:nth-child(3) {
            margin-top: 0;
        }
        #movie-gallery .index_pc .item:nth-child(3n) {
            margin-right: 0;
        }
            #movie-gallery .index_pc .item div {
                position: relative;
                aspect-ratio: 800 / 450;
                background-color: #ccc;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
            }
            #movie-gallery .index_pc .item:nth-child(1) div {
                background-image: url(../IMAGES/movie/mov_thumb_03.jpg);
            }
            #movie-gallery .index_pc .item:nth-child(2) div {
                background-image: url(../IMAGES/movie/mov_thumb_04.jpg);
            }
            #movie-gallery .index_pc .item:nth-child(3) div {
                background-image: url(../IMAGES/movie/mov_thumb_05.jpg);
            }
            #movie-gallery .index_pc .item:nth-child(4) div {
                background-image: url(../IMAGES/movie/mov_thumb_06.jpg);
            }
            #movie-gallery .index_pc .item:nth-child(5) div {
                background-image: url(../IMAGES/movie/mov_thumb_07.jpg);
            }
            #movie-gallery .index_pc .item:nth-child(6) div {
                background-image: url(../IMAGES/movie/mov_thumb_08.jpg);
            }
            #movie-gallery .index_pc .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 72px;
                opacity: .5;
                transition: opacity .5s ease-out;
            }
            #movie-gallery .index_pc .item span {
                display: block;
                padding-top: 4px;
                font-size: 12px;
                text-align: right;
            }
        #movie-gallery .index_pc .item:hover div:before {
            opacity: 1;
        }

@media screen and (min-width: 581px) and (max-width: 1279px) {
    #movie-gallery .index_pc .item span {
        padding-top: 0.31vw;
        font-size: 0.94vw;
    }
}


#movie-gallery .detail_pc {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: none;
    background-color: #000;
}
    #movie-gallery .detail_pc .swiper {
        position: relative;
        height: 100%;
    }
        #movie-gallery .detail_pc .swiper-wrapper {
            height: 100%;
        }
            #movie-gallery .detail_pc .swiper-slide {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                padding: 3.1% 0;
            }
                #movie-gallery .detail_pc .swiper-slide .movie {
                    height: 100%;
                    aspect-ratio: 16 / 9;
                }
                #movie-gallery .detail_pc .swiper-slide iframe {
                    width: 100%;
                    height: 100%;
                }
        #movie-gallery .detail_pc .close {
            position: absolute;
            left: 50%;
            top: 7%;
            z-index: 1;
            display: block;
            width: 30px;
            height: 30px;
            background-image: url(../IMAGES/icon_close.png);
            background-repeat: no-repeat;
            background-size: contain;
        }
        /* #movie-gallery .detail_pc .next {
            position: absolute;
            left: 50%;
            top: calc(7% + 50px);
            z-index: 1;
            display: block;
            width: 30px;
            height: 30px;
            background-image: url(../IMAGES/icon_next.png);
            background-repeat: no-repeat;
            background-size: contain;
            cursor: pointer;
        }
        #movie-gallery .detail_pc .next[aria-disabled="true"] {
            cursor: default;
            opacity: .3;
        }
        #movie-gallery .detail_pc .prev {
            position: absolute;
            left: 50%;
            top: calc(7% + 90px);
            z-index: 1;
            display: block;
            width: 30px;
            height: 30px;
            background-image: url(../IMAGES/icon_prev.png);
            background-repeat: no-repeat;
            background-size: contain;
            cursor: pointer;
        }
        #movie-gallery .detail_pc .prev[aria-disabled="true"] {
            cursor: default;
            opacity: .3;
        }
        #movie-gallery .detail_pc .page {
            position: absolute;
            left: 50%;
            top: calc(7% + 150px);
            z-index: 1;
            display: block;
            width: 30px;
            font-size: 10px;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            letter-spacing: .1em;
        } */

@media screen and (min-width: 581px) and (max-width: 1499px) {}


#movie-gallery .footer {

}
    #movie-gallery .footer a {
        position: relative;
        display: table;
        height: 44px;
        margin: 3.4% auto 0;
        background-color:#c3002c;
        color: #fff;
        }
        #movie-gallery .footer span {
            display: table-cell;
            padding: 0 40px 0 16px;
            font-size: 1.4em;
            vertical-align: middle;
            white-space: nowrap;
        }
    #movie-gallery .footer a:after {
        content: '';
        position: absolute;
        right: 18px;
        top: 50%;
        display: block;
        width: 7px;
        height: 10px;
        margin-top: -5px;
        background-image: url(../IMAGES/arrow_white.png);
        background-repeat: no-repeat;
        background-position: right;
        background-size: auto 10px;
    }
    #movie-gallery .footer a:hover {
        background: #920023;
    }
        #movie-gallery .footer a:hover span {
        color:#fff;
        }

@media screen and (min-width: 581px) and (max-width: 1499px) {}