/* title */
.section_title {
    position: relative;
    padding: 3vw 0 1vw;
    font-size: 7.46vw;
    line-height: 1.4;
}
.section_title:before {
    content: '';
    position: absolute;
    left:0;
    top: 0;
    display: block;
    width: 13.33vw;
    border-top: 3.99px solid #c3002c;
}



/* ------------
 * variation
 */
#variation {
    position: relative;
    padding: 0 4vw 4vw;
}

/* movie */
#variation .variation_movie {

}
    #variation .usp_movie__wrap {
        position: relative;
        width: 100%;
        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 20vw;
            background-position: center;
            opacity: 0.5;
        }
        #variation .switch_sound {
            position: absolute;
            right: 4vw;
            bottom: 4vw;
            width: 8vw;
            height: 8vw;
            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 {
            margin-top: 1vw;
            font-size: 2.93vw;
        }



/* ------------
 * aroundview
 */
#aroundview {
    position: relative;
    margin-top: 6vw;
    padding: 0 4vw 4vw;
}
    .aroundview_wrap {
        position: relative;
    }

/* 3d parse map */
.aroundview_body {
    width: 100%;
    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;
    }
        .aroundview_item {
            position: absolute;
            z-index: 101;
            width: 27.06vw;
            height: 27.06vw;
            border-radius: 50%;
            transition: transform 0.3s, opacity 0.3s;
        }
        .aroundview_item:nth-child(1) {
            left: 77.2vw;
            top: 16.2vw;
            transform: translate(-43%, -50%) scale(.832);
        }
        .aroundview_item:nth-child(2) {
            left: 61.1vw;
            top: 46.3vw;
            transform: translate(-50%, -50%) scale(.832);
        }
        .aroundview_item:nth-child(3) {
            left: 37.86vw;
            top: 22.53vw;
            transform: translate(-46%, -50%) scale(.626);
        }
        .aroundview_item:nth-child(4) {
            left: 52.14vw;
            top: 102.26vw;
            transform: translate(-50%, -29%) scale(.626);
        }
        .aroundview_item:nth-child(5) {
            left: 52.26vw;
            top: 70.8vw;
            transform: translate(-50%, -50%) scale(.832);
        }
        .aroundview_item:nth-child(6) {
            left: 16vw;
            top: 38vw;
            transform: translate(-63%, -50%) scale(.68);
        }
        .aroundview_item:nth-child(7) {
            left: 23.06vw;
            top: 77.2vw;
            transform: translate(-50%, -50%) scale(.626);
        }
            .aroundview_item__wrap {
                position: relative;
                display: block;
                width: calc(100% + 1.6vw);
                height: calc(100% + 1.6vw);
                margin: -0.8vw;
                border-radius: 50%;
                border: 0.85vw 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.75vw;
            }
            .aroundview_item__wrap:before {
                content: '';
                position: absolute;
                left: 50%;
                bottom: 0;
                width: 32vw;
                height: 9.47vw;
                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 7.47vw;
            }
            .aroundview_item:nth-child(2) .aroundview_item__wrap:before {
                background-image: url(../IMAGES/aroundview/baloon_ema.png);
                background-size: auto 9.47vw;
            }
            .aroundview_item:nth-child(3) .aroundview_item__wrap:before {
                background-image: url(../IMAGES/aroundview/baloon_propilot.png);
                background-size: auto 7.47vw;
            }
            .aroundview_item:nth-child(4) .aroundview_item__wrap:before {
                background-image: url(../IMAGES/aroundview/baloon_rcta.png);
                background-size: auto 7.47vw;
            }
            .aroundview_item:nth-child(5) .aroundview_item__wrap:before {
                background-image: url(../IMAGES/aroundview/baloon_fumi.png);
                background-size: auto 7.47vw;
            }
            .aroundview_item:nth-child(6) .aroundview_item__wrap:before {
                background-image: url(../IMAGES/aroundview/baloon_fcw.png);
                background-size: auto 7.47vw;
            }
            .aroundview_item:nth-child(7) .aroundview_item__wrap:before {
                background-image: url(../IMAGES/aroundview/baloon_bsw.png);
                background-size: auto 7.47vw;
            }
                /* flare */
                .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.85vw;
            }
            .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.85vw;
            }
            .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_movie {
    display: none;
}


/* modal */
.usp_modal {
    position: absolute;
    left: -4vw;
    right: -4vw;
    top: 0;
    bottom: 0;
    z-index: 100;
    display: none;
    background-color: rgba(255,255,255,.8);
    /* padding: 4vw; */
}
.usp_modal.active {
    display: flex;
    align-items: center;
}
    .usp_modal__wrap {
        position: relative;
        width: 100%;
    }

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

/* swiper */
.usp_swiper {
    position: relative;
}
.usp_swiper .swiper-next,
.usp_swiper .swiper-prev {
    position: absolute;
    top: 47vw;
    z-index: 1;
    width: 8vw;
    height: 8vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 5.33vw;
}
.usp_swiper .swiper-next {
    right: 8vw;
    background-image: url(../IMAGES/common/icon_next.svg);
    cursor: pointer;
    transition: opacity 0.3s;
}
.usp_swiper .swiper-next.swiper-button-disabled {
    opacity: .2;
    pointer-events: none;
}
.usp_swiper .swiper-prev {
    left: 8vw;
    background-image: url(../IMAGES/common/icon_prev.svg);
    cursor: pointer;
    transition: opacity 0.3s;
}
.usp_swiper .swiper-prev.swiper-button-disabled {
    opacity: .2;
    pointer-events: none;
}

/* modal: slide */
.swiper-slide {
    /* padding: 0 4vw; */
    display: flex;
    flex-direction: column;
    height: 126.93vw;
    padding-top: 8vw;
}
    .usp_modal__body {

    }
        .usp_modal__movie {
            width: 60vw;
            margin: 0 auto;
        }
            .usp_modal__catch {
                display: flex;
                width: 100%;
                height: 7.73vw;
                justify-content: center;
                align-items: center;
                padding: 0 2rem;
                background-color: #eee;
                border-top: 2px solid #d4d4d4;
                font-size: 3.2vw;
                letter-spacing: 0.1rem;
            }
            .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%;
                }
    .usp_modal__text {
        height: 100%;
        background-color: #eee;
        border-top: 1px solid #d4d4d4;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
        .usp_modal__title {
            width: 68.66vw;
            margin: 0 auto;
            font-size: 4vw;
            letter-spacing: 0.1em;
            line-height: 1.4;
        }
        .usp_modal__summary {
            width: 68.66vw;
            margin: 2vw auto 0;
            font-size: 3.2vw;
            letter-spacing: 0.1em;
            line-height: 1.4;
        }
            .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: 2.66vw;
                line-height: 1.1;
                padding: .2vw .7vw;
                border: .99px solid #000;
                vertical-align: middle;
            }
        .usp_modal__caption {
            width: 80vw;
            margin: .8vw auto 0;
            font-size: 2.66vw;
            letter-spacing: .06em;
            line-height: 1.3;
        }

    /* propilot */
    .slide-propilot .usp_modal__title {
        width: 80vw;
    }
    .slide-propilot .usp_modal__summary {
        width: 80vw;
        margin-top: 1.2vw;
    }



/* caption */
#aroundview .caution {
    margin-top: 6vw;
    font-size: 3.2vw;
    line-height: 1.55;
}
#aroundview .caption {
    margin-top: 2.5vw;
}
    #aroundview .caption dl {

    }
        #aroundview .caption dt {
            position: relative;
            display: flex;
            padding: 1vw 10vw 1vw 3vw;
            align-items: center;
            background-color: #eee;
            border: 1px solid #eee;
            cursor: pointer;
        }
        #aroundview .caption dt:before {
            content: '';
            position: absolute;
            right: 3.2vw;
            top: 50%;
            display: block;
            width: 4.5vw;
            height: 4.5vw;
            margin-top: -2.25vw;
            background-image: url(../IMAGES/common/icon_open.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
            #aroundview .caption dt span {
                font-size: 3.73vw;
                line-height: 1.4;
            }
        #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: 4vw;
        }
            #aroundview .caption ul {

            }
                #aroundview .caption li {
                font-size: 3.2vw;
                line-height: 1.75;
                }

/* banner */
#aroundview .banner {
    margin-top: 12vw;
    padding: 5.3vw;
    border: 1px solid #C1C1C1;
}
    #aroundview .banner .image {
        width: 240px;
        margin: 0 auto;
    }
        #aroundview .banner .image img {
            width: 100%;
        }
    #aroundview .banner > .wrap {
        margin-top: 4.2vw;
    }
        #aroundview .banner dt {
            font-size: 4.8vw;
            line-height: 1.6;
        }
        #aroundview .banner dd {
            margin-top: 4.2vw;
            font-size: 3.2vw;
            line-height: 1.75;
        }