/* title */
.section_title {
    position: relative;
    padding: 1.4% 0 0;
    font-size: 3.6rem;
    line-height: 1.3;
}
.section_title:before {
    content: '';
    position: absolute;
    left:0;
    top: 0;
    display: block;
    width: 5rem;
    height: .5rem;
    background-color: #c3002c;
}
@media screen and (min-width: 581px) and (max-width: 1279px) {
    .section_title:before {

    }
}



/* ------------
 * usp
 */
.usp {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 3.667% 0;
}
#safety {
    margin-top: 8rem;
}
    .usp_wrap {
        position: relative;
        display: flex;
        width: 100%;
        gap: 1.2rem;
        margin-top: 2rem;
    }

/* body */
.usp_body {
    flex-shrink: 0;
    width: 47rem;
}
    /* movie */
    .usp_movie {
        position: relative;
        width: 100%;
        height: 100%;
    }
        .usp_movie__wrap {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
            .usp_movie video {
                position: relative;
                width: 100%;
                height: 100%;
            }
            .usp_movie__play {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-image: url(../IMAGES/common/icon_play.png);
                background-repeat: no-repeat;
                background-size: auto 9rem;
                background-position: center;
                opacity: 0.5;
                transition: opacity 0.3s;
                /* history */
                display: none;
            }
            .usp_movie__play:hover {
                opacity: 1;
            }
            .switch_sound {
                position: absolute;
                right: 8px;
                bottom: 8px;
                width: 32px;
                height: 32px;
                display: none;
                background-image: url(../IMAGES/common/icon_volume_on.png);
                background-repeat: no-repeat;
                background-size: contain;
            }
            .switch_sound.mute {
                background-image: url(../IMAGES/common/icon_volume_off.png);
            }
        .usp_movie__caption {
            position: absolute;
            left: 0;
            top: 100%;
            margin-top: 0.5rem;
            font-size: 1.2rem;
        }

    /* image */
    .usp_image_01 {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        background-image: url(../IMAGES/comfortable/movie_poster.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .usp_image_02 {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        background-image: url(../IMAGES/safety/main_pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

/* aside */
.usp_aside {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #eee;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
}
.usp_aside:before {
    content: '';
    position: absolute;
    left: 0;
    top: 8.5rem;
    height: 2rem;
    background-color: #fff;
}
#comfortable .usp_aside:before {
    width: 50.4rem;
}
#safety .usp_aside:before {
    width: 46rem;
}
    .usp_lead {
        position: relative;
    }
        .usp_lead span {
            font-size: 2.7rem;
            letter-spacing: .15em;
        }
    .usp_menu {
        position: relative;
        display: flex;
        width: 52.8rem;
        margin-top: 5rem;
        flex-wrap: wrap;
        gap: 2.5rem 2.8rem;
        justify-content: space-between;
    }
        .usp_item {
            position: relative;
            width: 25rem;
            aspect-ratio: 250 / 115;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            box-shadow: 0 0 1rem rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        .usp_item:hover {
            transform: scale(1.1);
        }
        #comfortable .usp_item:nth-child(1) {
            background-image: url(../IMAGES/comfortable/menu_01.jpg);
        }
        #comfortable .usp_item:nth-child(2) {
            background-image: url(../IMAGES/comfortable/menu_02.jpg);
        }
        #comfortable .usp_item:nth-child(3) {
            background-image: url(../IMAGES/comfortable/menu_03.jpg);
        }
        #comfortable .usp_item:nth-child(4) {
            background-image: url(../IMAGES/comfortable/menu_04.jpg);
        }
        #safety .usp_item:nth-child(1) {
            background-image: url(../IMAGES/safety/menu_01.jpg);
        }
        #safety .usp_item:nth-child(2) {
            background-image: url(../IMAGES/safety/menu_02.jpg);
        }
        #safety .usp_item:nth-child(3) {
            background-image: url(../IMAGES/safety/menu_03.jpg);
        }
        #safety .usp_item:nth-child(4) {
            background-image: url(../IMAGES/safety/menu_04.jpg);
        }

/* modal */
.usp_modal {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
}
.usp_modal.active {
    display: flex;
    align-items: flex-end;
}
    .usp_modal__wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #eee;
    }

/* modal: close */
.usp_modal__close {
    position: absolute;
    right: 2rem;
    top: 2rem;
    z-index: 1;
    width: 2.8rem;
    height: 2.8rem;
    background-image: url(../IMAGES/common/icon_close.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 2.4rem;
}

/* modal: swiper */
.usp_swiper {
    position: relative;
    height: 100%;
}
.usp_swiper .swiper {
    height: 100%;
}
.usp_swiper .swiper-next,
.usp_swiper .swiper-prev {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 2.8rem;
    height: 2.8rem;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 2.8rem;
}
.usp_swiper .swiper-next {
    right: 2rem;
    background-image: url(../IMAGES/common/icon_next.svg);
    cursor: pointer;
    transform: translateX(0);
    transition: opacity 0.3s, transform 0.3s;
}
.usp_swiper .swiper-next.swiper-button-disabled {
    opacity: .2;
    pointer-events: none;
}
.usp_swiper .swiper-next:not(.swiper-button-disabled):hover {
    transform: translateX(0.6rem);
}
.usp_swiper .swiper-prev {
    left: 2rem;
    background-image: url(../IMAGES/common/icon_prev.svg);
    cursor: pointer;
    transform: translateX(0);
    transition: opacity 0.3s, transform 0.3s;
}
.usp_swiper .swiper-prev.swiper-button-disabled {
    opacity: .2;
    pointer-events: none;
}
.usp_swiper .swiper-prev:not(.swiper-button-disabled):hover {
    transform: translateX(-0.6rem);
}
.swiper-pagination {
    position: absolute;
    left: 0;
    bottom: .4rem;
    z-index: 1;
    font-size: 1.2rem;
    text-align: center;
}
.swiper-pagination * {
    font-family: ShinGoPro-Light,sans-serif !important;
}

/* modal: slide */
.swiper-slide {
    height: 100%;
    padding: 2.8rem 8rem;
}
    .usp_modal__item {
        height: 100%;
        padding: 1rem 3rem;
        background-color: #eee;
        border: 1px solid #ccc;
    }
        .usp_modal__catch {
            padding-bottom: .2rem;
            font-size: 1.6rem;
            color: #7e7e7e;
        }
        .usp_modal__image {
            display: block;
            aspect-ratio: 710 / 400;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
        .usp_modal__summary {
            margin-top: 1rem;
            font-size: 1.6rem;
            letter-spacing: 0.15em;
        }
        .usp_modal__title {
            display: flex;
            gap: 0 1rem;
            margin-top: 0.2rem;
            letter-spacing: 0.15em;
        }
            .usp_modal__title dt {
                font-size: 1.3rem;
            }
            .usp_modal__title dd {
                width: 10rem;
            }
            .usp_modal__title dd span {
                display: block;
                padding: .1rem .6rem;
                border: 1px solid #ccc;
                font-size: 1.0rem;
                white-space: nowrap;
                text-align: center;
            }

/* modal: comfortable */
#comfortable .swiper-slide:nth-child(1) .usp_modal__image {
    background-image: url(../IMAGES/comfortable/slide_01.jpg);
}
#comfortable .swiper-slide:nth-child(2) .usp_modal__image {
    background-image: url(../IMAGES/comfortable/slide_02.jpg);
}
#comfortable .swiper-slide:nth-child(3) .usp_modal__image {
    background-image: url(../IMAGES/comfortable/slide_03.jpg);
}
#comfortable .swiper-slide:nth-child(4) .usp_modal__image {
    background-image: url(../IMAGES/comfortable/slide_04.jpg);
}
/* modal: safety */
#safety .swiper-slide:nth-child(1) .usp_modal__image {
    background-image: url(../IMAGES/safety/slide_01.jpg);
}
#safety .swiper-slide:nth-child(2) .usp_modal__image {
    background-image: url(../IMAGES/safety/slide_02.jpg);
}
#safety .swiper-slide:nth-child(3) .usp_modal__image {
    background-image: url(../IMAGES/safety/slide_03.jpg);
}
#safety .swiper-slide:nth-child(4) .usp_modal__image {
    background-image: url(../IMAGES/safety/slide_04.jpg);
}

/* caption */
#safety .caution {
    margin-top: 6rem;
    font-size: 1.2rem;
    line-height: 1.75;
}
#safety .caption {
    margin-top: 1.2rem;
}
    #safety .caption dl {

    }
        #safety .caption dt {
            position: relative;
            display: flex;
            height: 4.8rem;
            padding: 0 3rem;
            align-items: center;
            background-color: #eee;
            border: 1px solid #eee;
            cursor: pointer;
        }
        #safety .caption dt:before {
            content: '';
            position: absolute;
            right: 3rem;
            top: 50%;
            display: block;
            width: 1.7rem;
            height: 1.7rem;
            margin-top: -.8rem;
            background-image: url(../IMAGES/common/icon_open.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
            #safety .caption dt span {
                font-size: 1.4rem;
                line-height: 1.1;
            }
        #safety .caption dt.active {
            background-color: #fff;
        }
        #safety .caption dt.active:before {
            background-image: url(../IMAGES/common/icon_close.png);
        }
            #safety .caption dd {
                display: none;;
                padding-top: 2.5rem;
            }
                #safety .caption ul {

                }
                    #safety .caption li {
                        font-size: 1.2rem;
                        line-height: 1.75;
                    }



/* ------------
 * lineup
 */
#lineup {
    clear: both;
    position: relative;
    max-width: 1280px;
    margin: 8rem auto 0;
    padding: 0 3.667% 0;
}
/* body */
.lineup_body {
    display: flex;
    gap: 3.2rem;
    margin-top: 2rem;
}
    .lineup_item {
        position: relative;
        display: block;
        width: calc(25% - 2.4rem);
        color: #343434;
    }
        .lineup_image {
            display: block;
            aspect-ratio: 16 / 9;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .lineup_item:nth-child(1) .lineup_image {
            background-image: url(../IMAGES/lineup/lineup_01.jpg);
        }
        .lineup_item:nth-child(2) .lineup_image {
            background-image: url(../IMAGES/lineup/lineup_02.jpg);
        }
        .lineup_item:nth-child(3) .lineup_image {
            background-image: url(../IMAGES/lineup/lineup_03.jpg);
        }
        .lineup_item:nth-child(4) .lineup_image {
            background-image: url(../IMAGES/lineup/lineup_04.jpg);
            border: 1px solid #ccc;
        }
        .lineup_item dl {
            margin-top: 1.4rem;
        }
            .lineup_item dt {
                font-size: 1.7rem;
            }
            .lineup_item dd {
                position: relative;
                display: inline-block;
                padding-right: 2.2rem;
                font-size: 1.3rem;
            }
            .lineup_item dd:after {
                content: '';
                position: absolute;
                right: 0;
                top: 50%;
                display: block;
                width: .7rem;
                height: 1rem;
                margin-top: -.5rem;
                background-image: url(../IMAGES/common/link_red.png);
                background-repeat: no-repeat;
                background-position: right;
                background-size: auto 1rem;
                transition: transform .3s ease-out;
            }
    /* hover */
    .lineup_item:hover dd:after {
        transform: translateX(8px);
    }
@media screen and (min-width: 581px) and (max-width: 1279px) {

}



/* ------------
 * bodycolor
 */
#bodycolor {
    clear: both;
    position: relative;
    max-width: 1170px;
    margin: 8rem auto 0;

    aspect-ratio: 16 / 9;
    background-color: #555;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    color: #fff;
}