@charset "utf-8";

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    width: 100%;
}


/* Web-font */

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&subset=japanese');

/* chara */

.charaNew,
.charaOld {
    display: block;
}

.charaNew.onBtn,
.charaOld.onBtn {
    display: block;
}



.charaContents {
    position: relative;
    width: 100%;
}

.charaContents img {
    vertical-align: bottom;
}

.slider-thumbnail-New {
    margin: 0 auto;
    width: 80%;
    left: 0;
    right: 0;
    height: auto;
    z-index: 35;
    padding-bottom: 35px;
}

.slider-thumbnail-New .swiper-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 85%;
    /*スライド防止*/
    transform: translate3d(0, 0, 0) !important;
}

.sliderNew {
    z-index: 31;
}

.sliderNew {
    z-index: 31;
}


/* キャラクター */

#chara .slider-thumbnail-New .icon-1 {
    background: url("../img/pc_02_mt_chara_icon_01_on.png") no-repeat;
    background-size: 100%;
}

#chara .slider-thumbnail-New .icon-2 {
    background: url("../img/pc_02_mt_chara_icon_02_on.png") no-repeat;
    background-size: 100%;
}

#chara .slider-thumbnail-New .icon-3 {
    background: url("../img/pc_02_mt_chara_icon_03_on.png") no-repeat;
    background-size: 100%;
}

#chara .slider-thumbnail-New .icon-4 {
    background: url("../img/pc_02_mt_chara_icon_04_on.png") no-repeat;
    background-size: 100%;
}

#chara .slider-thumbnail-New .icon-5 {
    background: url("../img/pc_02_mt_chara_icon_05_on.png") no-repeat;
    background-size: 100%;
}

#chara .slider-thumbnail-New .icon-6 {
    background: url("../img/pc_02_mt_chara_icon_06_on.png") no-repeat;
    background-size: 100%;
}

#chara .slider-thumbnail-New .icon-7 {
    background: url("../img/pc_02_mt_chara_icon_07_on.png") no-repeat;
    background-size: 100%;
}

#chara .slider-thumbnail-New .icon-8 {
    background: url("../img/pc_02_mt_chara_icon_08_on.png") no-repeat;
    background-size: 100%;
}

#chara .slider-thumbnail-New .icon-9 {
    background: url("../img/pc_02_mt_chara_icon_09_on.png") no-repeat;
    background-size: 100%;
}

#chara .slider-thumbnail-New .icon-10 {
    background: url("../img/pc_02_mt_chara_icon_10_on.png") no-repeat;
    background-size: 100%;
}

#chara .slider-thumbnail-New .swiper-wrapper .swiper-slide.swiper-slide-thumb-active img {
    opacity: 0;
}

#chara .slider-thumbnail-New .swiper-wrapper .swiper-slide img {
    opacity: 1;
}

.smn .swiper-slide {
    width: 100%;
    margin: 0 0.5% 2vw;
}

.smn .swiper-slide:nth-child(n+6) {
    margin-bottom: 0;
}


/* スライド矢印 */

.charaNew .swiper-button-prev,
.charaNew .swiper-button-next {
    width: 10%;
    height: 18%;
    top: 0;
    bottom: 0;
    margin: auto;
}

.charaNew .swiper-button-prev {
    left: 2vw;
}

.charaNew .swiper-button-next {
    right: 2vw;
}

#chara .swiper-button-prev:after {
    background: url("../img/pc_02_mt_chara_arrow_l.png") no-repeat center center;
    background-size: contain;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    max-width: 100px;
    max-height: 100px;
}

#chara .swiper-button-next:after {
    background: url("../img/pc_02_mt_chara_arrow_r.png") no-repeat center center;
    background-size: contain;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    max-width: 100px;
    max-height: 100px;
}

#chara .charaNew .icon-1,
#chara .charaNew .icon-2,
#chara .charaNew .icon-3,
#chara .charaNew .icon-4,
#chara .charaNew .icon-5,
#chara .charaNew .icon-6,
#chara .charaNew .icon-7,
#chara .charaNew .icon-8,
#chara .charaNew .icon-9,
#chara .charaNew .icon-10,
#chara .charaNew .icon-11,
#chara .charaNew .icon-12,
.icon-dummy {
    width: 16.6% !important;
    cursor: pointer;
}

#chara .charaImg {
    position: relative;
    margin: 0 auto;
    z-index: 32;
    opacity: 1;
    width: 80%;
}

.charaImg img {
    display: block;
    width: 80%;
    margin: 0 auto;
    max-width: 660px;
}

.slider-thumbnail-New .swiper-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

@media screen and (min-width:720px) {
    /* chara  720px */

    .charaContents {
        width: 100%;
        margin: 0 auto;
    }

    .slider-thumbnail-New .swiper-wrapper {
        display: flex;
        width: 100%;
        justify-content: space-around;
    }

    .slider-thumbnail-New .swiper-wrapper {
        margin: 0 auto;
    }

    .charaContents {
        position: relative;
        width: 100%;
    }

    /* スライド矢印 */
    #chara .charaImg {
        /* width: 66vw; */
        height: auto;
        opacity: 1;
    }

    .charaNew .swiper-button-prev,
    .charaNew .swiper-button-next {
        left: 0;
        right: 0;
        position: absolute;
        top: 0;
    }

    .charaNew .swiper-button-prev {
        left: 0;
        right: auto;
    }

    .charaNew .swiper-button-next {
        right: 0;
        left: auto;
    }
}

@media screen and (min-width:800px) {
    .slider-thumbnail-New {
        padding-bottom: 0px;
    }

    .slider-thumbnail-New {
        width: 580px;
        margin-bottom: 60px;
    }

    #chara .charaNew .icon-1,
    #chara .charaNew .icon-2,
    #chara .charaNew .icon-3,
    #chara .charaNew .icon-4,
    #chara .charaNew .icon-5,
    #chara .charaNew .icon-6,
    #chara .charaNew .icon-7,
    #chara .charaNew .icon-8,
    #chara .charaNew .icon-9,
    #chara .charaNew .icon-10,
    #chara .charaNew .icon-11,
    #chara .charaNew .icon-12,
    .icon-dummy {
        width: 100px !important;
        margin-bottom: 20px;
        cursor: pointer;
    }

    .slider-thumbnail-New .swiper-wrapper {
        flex-wrap: wrap
    }

    .smn .swiper-slide {
        width: 100%;

    }

    #chara .swiper-button-prev:after {
        max-width: 120px;
        max-height: 120px;
    }

    #chara .swiper-button-next:after {
        max-width: 120px;
        max-height: 120px;
    }

    .charaImg img {
        width: 95%;
    }

}


@media screen and (min-width:1200px) {
    .slider-thumbnail-New {
        width: 580px;
        margin-bottom: 60px;
    }
}