

.usp_contents {
	font-size: 8px;
	max-width: 1000px;
	margin-inline: auto;
}

/* title */
.section_title {
    position: relative;
    max-width: 1170px;
    margin: 0 auto;
    padding: 1.4% 0 0;
    font-size: 3.6em;
    line-height: 1.3;
}
.section_title:before {
    content: '';
    position: absolute;
    left:0;
    top: 0;
    display: block;
    width: 5em;
    height: .5em;
    background-color: #c3002c;
}



/* ------------
 * variation
 */
#variation {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 5.5em 0;
}

/* movie */
#variation .variation_movie {
    position: relative;
    display: flex;
    width: 100%;
    margin: 2em auto;
}
    #variation .usp_movie__wrap {
        position: relative;
        width: 55em;
        flex-shrink: 0;
        /* height: 100%; */
        overflow: hidden;
    }
        #variation .variation_movie video {
            width: 100%;
            height: 100%;
        }
        #variation .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 9em;
            background-position: center;
            opacity: 0.5;
            transition: opacity 0.3s;
        }
        #variation .usp_movie__play:hover {
            opacity: 1;
        }
        #variation .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;
        }
        #variation .switch_sound.mute {
            background-image: url(../IMAGES/common/icon_volume_off.png);
        }
        #variation .usp_movie__caption {
            position: absolute;
            left: 0;
            top: 100%;
            margin-top: 0.5em;
            font-size: 1.2em;
        }
    #variation .usp_movie__image {
        width: 100%;
        background-image: url(../IMAGES/variation/variation_image.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right;
    }



/* ------------
 * aroundview
 */
#aroundview {
    position: relative;
    max-width: 1280px;
    margin: 8em auto 0;
    padding: 0 5.5em 0;
}
    .aroundview_wrap {
        position: relative;
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin-top: 2em;
    }

/* 3d parse map */
.aroundview_body {
    flex-shrink: 0;
    width: 55em;
    aspect-ratio: 1100 / 1517;
    overflow: hidden;
    background-color: #f7f7f7;
}
    .aroundview_body__wrap {
        position: relative;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    .aroundview_body.started .aroundview_body__wrap {
        opacity: 1;
    }

        /* item */
        .aroundview_item {
            position: absolute;
            z-index: 101;
            width: 16.2em;
            height: 16.2em;
            border-radius: 50%;
            transition: transform 0.3s, opacity 0.3s;
        }
        .aroundview_item:nth-child(1) {
            left: 46.2em;
            top: 9.8em;
            transform: translate(-43%, -50%) scale(.832);
        }
        .aroundview_item:nth-child(2) {
            left: 36.6em;
            top: 27.7em;
            transform: translate(-50%, -50%) scale(.832);
        }
        .aroundview_item:nth-child(3) {
            left: 21.9em;
            top: 13.5em;
            transform: translate(-46%, -50%) scale(.626);
        }
        .aroundview_item:nth-child(4) {
            left: 31.3em;
            top: 61.2em;
            transform: translate(-50%, -29%) scale(.626);
        }
        .aroundview_item:nth-child(5) {
            left: 31.3em;
            top: 42.4em;
            transform: translate(-50%, -50%) scale(.832);
        }
        .aroundview_item:nth-child(6) {
            left: 9.6em;
            top: 22.8em;
            transform: translate(-63%, -50%) scale(.68);
        }
        .aroundview_item:nth-child(7) {
            left: 13.1em;
            top: 46.2em;
            transform: translate(-50%, -50%) scale(.626);
        }
            .aroundview_item__wrap {
                position: relative;
                width: calc(100% + 1.2em);
                height: calc(100% + 1.2em);
                margin: -0.6em;
                border-radius: 50%;
                border: 0.7em solid rgba(52, 186, 243, 1);
                transition: border-width 0.3s;
            }
            .aroundview_item:nth-child(3) .aroundview_item__wrap,
            .aroundview_item:nth-child(4) .aroundview_item__wrap,
            .aroundview_item:nth-child(6) .aroundview_item__wrap,
            .aroundview_item:nth-child(7) .aroundview_item__wrap {
                border-width: 0.48em;
            }
            .aroundview_item__wrap:before {
                content: '';
                position: absolute;
                left: 50%;
                bottom: 0;
                width: 17.6em;
                height: 5.7em;
                transform: translate(-50%, 100%);
                background-repeat: no-repeat;
                background-position: center top;
                opacity: 0;
                transition: opacity 0.3s, transform 0.3s;
                pointer-events: none;
            }
            .aroundview_item:nth-child(1) .aroundview_item__wrap:before {
                background-image: url(../IMAGES/aroundview/baloon_avm.png);
                background-size: auto 4.5em;
            }
            .aroundview_item:nth-child(2) .aroundview_item__wrap:before {
                background-image: url(../IMAGES/aroundview/baloon_ema.png);
                background-size: auto 5.7em;
            }
            .aroundview_item:nth-child(3) .aroundview_item__wrap:before {
                background-image: url(../IMAGES/aroundview/baloon_propilot.png);
                background-size: auto 4.5em;
            }
            .aroundview_item:nth-child(4) .aroundview_item__wrap:before {
                background-image: url(../IMAGES/aroundview/baloon_rcta.png);
                background-size: auto 4.5em;
            }
            .aroundview_item:nth-child(5) .aroundview_item__wrap:before {
                background-image: url(../IMAGES/aroundview/baloon_fumi.png);
                background-size: auto 4.5em;
            }
            .aroundview_item:nth-child(6) .aroundview_item__wrap:before {
                background-image: url(../IMAGES/aroundview/baloon_fcw.png);
                background-size: auto 4.5em;
            }
            .aroundview_item:nth-child(7) .aroundview_item__wrap:before {
                background-image: url(../IMAGES/aroundview/baloon_bsw.png);
                background-size: auto 4.5em;
            }
                .aroundview_item__flare {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 100%;
                    height: 100%;
                    margin-left: -50%;
                    margin-top: -50%;
                    background-color: rgba(52, 186, 243,.4);
                    border-radius: 50%;
                    opacity: 0;
                }
                .aroundview_item__flare:nth-child(2) { animation-delay: 0.1s; }
                .aroundview_item__flare:nth-child(3) { animation-delay: 0.2s; }
                .aroundview_item__flare:nth-child(4) { animation-delay: 0.3s; }

                /* image */
                .aroundview_item__image {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    width: 100%;
                    height: 100%;
                    margin-left: -50%;
                    margin-top: -50%;
                    border-radius: 50%;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;
                }
                .aroundview_item:nth-child(1) .aroundview_item__image {
                    background-image: url(../IMAGES/aroundview/zoom_avm.png);
                }
                .aroundview_item:nth-child(2) .aroundview_item__image {
                    background-image: url(../IMAGES/aroundview/zoom_ema.png);
                }
                .aroundview_item:nth-child(3) .aroundview_item__image {
                    background-image: url(../IMAGES/aroundview/zoom_propilot.png);
                }
                .aroundview_item:nth-child(4) .aroundview_item__image {
                    background-image: url(../IMAGES/aroundview/zoom_rcta.png);
                }
                .aroundview_item:nth-child(5) .aroundview_item__image {
                    background-image: url(../IMAGES/aroundview/zoom_fumi.png);
                }
                .aroundview_item:nth-child(6) .aroundview_item__image {
                    background-image: url(../IMAGES/aroundview/zoom_fcw.png);
                }
                .aroundview_item:nth-child(7) .aroundview_item__image {
                    background-image: url(../IMAGES/aroundview/zoom_bsw.png);
                }

        /* item.focus */
        .aroundview_item.focus {
            z-index: 103;
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
            .aroundview_item.focus .aroundview_item__wrap {
                border-width: 0.7em;
            }
            .aroundview_item.focus .aroundview_item__wrap:before {
                transform: translate(-50%, 120%);
                opacity: 1;
            }
            .aroundview_item.focus .aroundview_item__flare {
                display: none;
            }

        /* item.active */
        .aroundview_item.active {
            z-index: 102;
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
            .aroundview_item.active .aroundview_item__wrap {
                border-width: 0.7em;
            }
            .aroundview_item.active .aroundview_item__wrap:before {
                transform: translate(-50%, 120%);
                opacity: 1;
            }
            .aroundview_item.active .aroundview_item__flare {
                display: none;
            }

        /* item.blur */
        .aroundview_item.blur:not(.active) {
            /* opacity: 0; */
        }

        /* bg */
        .aroundview_bg {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url(../IMAGES/aroundview/map.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

        /* layer */
        .aroundview_layer {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 101;
            background-color: rgba(255,255,255,0.7);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .aroundview_layer.active {
            opacity: 1;
        }


/* initial movie */
.aroundview_aside {
    position: relative;
    width: 54.8em;
}
    .aroundview_aside__wrap {
        height: 100%;
        /* border: 2px solid #959595; */
    }
        .aroundview_movie {
            width: 44em;
            height: 100%;
            margin: 0 auto;
            padding: 5em 0 0;
        }
            .aroundview_movie .usp_movie__wrap {
                position: relative;
                width: 100%;
                overflow: hidden;
            }
                .aroundview_movie .usp_movie video {
                    /* width: 100%; */
                    height: 100%;
                }
                .aroundview_movie .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 9em;
                    background-position: center;
                    opacity: 0.5;
                    transition: opacity 0.3s;
                }
                .aroundview_movie .usp_movie__play:hover {
                    opacity: 1;
                }
            .aroundview_movie__text {
                position: relative;
                padding: 2.5em 0 0 7em;
                font-size: 2em;
            }
            .aroundview_movie__text:before {
                content: '';
                position: absolute;
                left: 0;
                top: 2.5em;
                width: 5.5em;
                height: 5.5em;
                background-image: url(../IMAGES/aroundview/icon_dayz.png);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
            }

        .aroundview_aside__bg {
            position: absolute;
            right: 0;
            top: 0;
            width: 58.5em;
            height: 100%;
            background-image: url(../IMAGES/aroundview/bg_default.png);
            background-repeat: no-repeat;
            background-size: auto 100%;
            background-position: right;
        }
        .aroundview_aside__bg[data-bg="0"] {
            background-image: url(../IMAGES/aroundview/bg_avm.png);
        }
        .aroundview_aside__bg[data-bg="1"] {
            background-image: url(../IMAGES/aroundview/bg_ema.png);
        }
        .aroundview_aside__bg[data-bg="2"] {
            background-image: url(../IMAGES/aroundview/bg_propilot.png);
        }
        .aroundview_aside__bg[data-bg="3"] {
            background-image: url(../IMAGES/aroundview/bg_rcta.png);
        }
        .aroundview_aside__bg[data-bg="4"] {
            background-image: url(../IMAGES/aroundview/bg_fumi.png);
        }
        .aroundview_aside__bg[data-bg="5"] {
            background-image: url(../IMAGES/aroundview/bg_fcw.png);
        }
        .aroundview_aside__bg[data-bg="6"] {
            background-image: url(../IMAGES/aroundview/bg_bsw.png);
        }

/* modal */
.usp_modal {
    position: absolute;
    left: .2em;
    right: .2em;
    top: .2em;
    bottom: .2em;
    display: none;
    background-color: #fff;
    /* border: 2px solid #34BAF3; */
}
.usp_modal.active {
    display: flex;
    /* align-items: flex-end; */
}
    .usp_modal__wrap {
        position: relative;
        width: 100%;
        height: 100%;
        /* background-color: rgba(255,255,255,1); */
    }

/* modal: close */
.usp_modal__close {
    position: absolute;
    right: 5em;
    top: 4em;
    z-index: 1;
    width: 5em;
    height: 5em;
    background-image: url(../IMAGES/common/icon_close.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 2.4em;
}

/* modal: swiper */
.usp_swiper {
    position: relative;
    height: 100%;
}
.usp_swiper .swiper {
    height: 100%;
}
.usp_swiper .swiper-next,
.usp_swiper .swiper-prev {
    position: absolute;
    top: 29em;
    z-index: 1;
    width: 5em;
    height: 5em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 2.4em;
}
.usp_swiper .swiper-next {
    right: 6em;
    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.6em);
}
.usp_swiper .swiper-prev {
    left: 6em;
    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.6em);
}
.swiper-pagination {
    position: absolute;
    left: 0;
    bottom: 20px;
    z-index: 1;
    font-size: 14px;
    text-align: center;
}

/* modal: slide */
.swiper-slide {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 4em 5em;
}
    .usp_modal__body {
        padding: 4.5em 0 0;
        background-color: #f7f7f7;
    }
        .usp_modal__movie {
            display: block;
            width: 29em;
            margin: 0 auto;
            aspect-ratio: 1080 / 1400;
        }
            .usp_modal__catch {
                display: flex;
                width: 100%;
                height: 4.2em;
                justify-content: center;
                align-items: center;
                padding: 0 2em;
                background-color: #fff;
                border-top: 2px solid #d4d4d4;
                font-size: 1.4em;
                letter-spacing: 0.1em;
            }
            .usp_modal__movie .usp_movie__wrap {
                position: relative;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
                .usp_modal__movie .usp_movie video {
                    width: 100%;
                    height: 100%;
                }
                .usp_modal__movie .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 6em;
                    background-position: center;
                    opacity: 0.5;
                    transition: opacity 0.3s;
                }
                .usp_modal__movie .usp_movie__play:hover {
                    opacity: 1;
                }
                .usp_modal__movie .usp_movie__layer {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                }
    .usp_modal__text {
        height: 100%;
        padding: 3.5em 6.5em 0;
        background-color: #eee;
        border-top: 2px solid #d4d4d4;
    }
        .usp_modal__title {
            font-size: 1.8em;
            letter-spacing: 0.1em;
            line-height: 1.6;
        }
        .usp_modal__summary {
            margin-top: 1.3em;
            font-size: 1.3em;
            letter-spacing: 0.1em;
        }
            .usp_modal__summary span {
                font-family: ShinGoPro-Light,sans-serif !important;
                /* color: #c3002c; */
            }
            .usp_modal__summary sup {
                font-family: ShinGoPro-Light,sans-serif !important;
                /* color: #c3002c; */
            }
            .usp_modal__summary em {
                font-family: ShinGoPro-Light,sans-serif !important;
                display: inline-block;
                font-size: .8em;
                line-height: 1.1;
                padding: .1em .4em;
                border: 1px solid #000;
                vertical-align: middle;
            }
        .usp_modal__caption {
            margin-top: 0.8em;
            font-size: 1em;
            letter-spacing: .06em;
            line-height: 1.6;
        }

/* modal: aroundview */
#aroundview .swiper-slide:nth-child(1) .usp_modal__image {
    background-image: url(../IMAGES/aroundview/slide_01.jpg);
}
#aroundview .swiper-slide:nth-child(2) .usp_modal__image {
    background-image: url(../IMAGES/aroundview/slide_02.jpg);
}
#aroundview .swiper-slide:nth-child(3) .usp_modal__image {
    background-image: url(../IMAGES/aroundview/slide_03.jpg);
}
#aroundview .swiper-slide:nth-child(4) .usp_modal__image {
    background-image: url(../IMAGES/aroundview/slide_04.jpg);
}
#aroundview .swiper-slide:nth-child(4) .usp_modal__image {
    background-image: url(../IMAGES/aroundview/slide_05.jpg);
}

/* caption */
#aroundview .caution {
    margin-top: 6em;
    font-size: 1.2em;
    line-height: 1.75;
}
#aroundview .caption {
    margin-top: 1.2em;
}
    #aroundview .caption dl {

    }
        #aroundview .caption dt {
            position: relative;
            display: flex;
            height: 4.8em;
            padding: 0 3em;
            align-items: center;
            background-color: #eee;
            border: 1px solid #eee;
            cursor: pointer;
        }
        #aroundview .caption dt:before {
            content: '';
            position: absolute;
            right: 3em;
            top: 50%;
            display: block;
            width: 1.7em;
            height: 1.7em;
            margin-top: -.8em;
            background-image: url(../IMAGES/common/icon_open.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
            #aroundview .caption dt span {
                font-size: 1.4em;
                line-height: 1.1;
            }
        #aroundview .caption dt.active {
            background-color: #fff;
        }
        #aroundview .caption dt.active:before {
            background-image: url(../IMAGES/common/icon_close.png);
        }
            #aroundview .caption dd {
                display: none;;
                padding-top: 2.5em;
            }
                #aroundview .caption ul {

                }
                    #aroundview .caption li {
                        font-size: 1.2em;
                        line-height: 1.75;
                    }

/* banner */
#aroundview .banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 7em;
    padding: 2.5em 4em;
    border: 1px solid #C1C1C1;
}
    #aroundview .banner .image {
        width: 25.4em;
    }
        #aroundview .banner .image img {
            width: 100%;
        }
    #aroundview .banner > .wrap{
        width: calc(100% - 29em);
    }
        #aroundview .banner dt {
            font-size: 1.8em;
            line-height: 1.6;
        }
        #aroundview .banner dd {
            margin-top: 2em;
            font-size: 1.2em;
            line-height: 1.75;
        }

