/*
---------------------------------------
view mode
---------------------------------------
*/
.viewSp {
    display: none;
}

.viewTb {
    display: none;
}

@media screen and (min-width: 760px) and (max-width: 979.98px) {
    .viewPc {
        display: none;
    }

    .viewSp {
        display: none;
    }

    .viewTb {
        display: block;
    }
}

@media(max-width:759.98px) {
    .viewPc {
        display: none;
    }

    .viewSp {
        display: block;
    }

    .viewTb {
        display: none
    }
}


#mv-slider {
    background: url(../img/bg_top.png)no-repeat;
    background-size: cover;
    background-position-x: center;
}

#mv-slider .mv-title {
    color: #FFFFFF;
}

#overview {
    background: url(../img/bg_overview.jpg);
    background-size: cover;
    padding: 100px 0 0;
}

#overview .overview-illustration {
    font-size: 0;
}

#overview .overview-illustration img {
    max-width: 877px;
    margin-top: 20px;
}

#slider {
    background: url(../img/bg_screen.png);
    background-size: 270px;
}

#mv-slider .single {
    outline: 4px solid #E6E6E6;
}

#slider .slide-title01 {
    border-top: 1px solid #FFFFFF;
    color: #FFFFFF;
}

#slider .slide-title01:before {
    background: #FFFFFF;
}

@media screen and (min-width: 760px) and (max-width: 979.98px) {
    #overview {
        padding: 60px 0 0;
    }

    #overview .overview-illustration {
        padding: 0 35px;
    }

    #overview .overview-illustration img {
        margin-top: 0;
    }

    #slider {
        background-size: 200px;
    }

    #slider .slide-title01 {
        border-top: none;
    }
}

@media(max-width:759.98px) {
    #overview {
        padding: 50px 0 0;
    }

    #overview .overview-illustration img {
        margin-top: 35px;
    }

    #sp-swipe {
        background: url(../img/bg_screen.png);
        background-size: 200px;

    }

    #sp-swipe .scrolls .title-wrap .slide-title01 {
        color: #FFFFFF;
    }

    #sp-swipe .scrolls .title-wrap .slide-title01:before {
        background: #FFFFFF;
    }

}

/*
---------------------------------------
#mv-slider
---------------------------------------
*/
.slider-nav .nav_movie .icon {
    position: relative;
}

.slider-nav .nav_movie .icon::after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/mv-current.svg)no-repeat;
    background-position: 50%;
}

.slick-current .img-wrap {
    position: relative;
    transition: 0.8s;
}

.slick-current .img-wrap::after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/mv-current.svg)no-repeat;
    background-position: 50%;
    transition: 0.8s;

}

@media screen and (min-width: 760px) and (max-width: 979.98px) {
    .slider-nav .nav_movie .icon::after {
        background-size: 30%;
    }

    .slick-current .img-wrap::after {
        background-size: 30%;

    }
}