@charset "utf-8";


/* top */
h2{width: 95%; max-width: 924px; margin: 0 auto; padding: 180px 0  5% 0;}

.main-chara-list-top{width: 95%; max-width: 1500px; margin: 0 auto; }
.main-chara-list-top ul{justify-content: center;}
.main-chara-list-top li{width: 19%; padding:0.5%; opacity: 0; animation-name: fade-inanime; animation-duration: 1s; animation-fill-mode: forwards;}

.sub-chara-list-top{width: 95%; max-width: 1500px; margin: 0 auto; padding:5% 0;}
.sub-chara-list-top ul{justify-content: center;}
.sub-chara-list-top li{width: 49%; padding:0.5%; opacity: 0; animation-name: fade-inanime; animation-duration: 1s; animation-fill-mode: forwards;}

.main-chara-list-top li a:hover,
.sub-chara-list-top li a:hover{filter: contrast(140%);}

.chara-top-bg{background:url(../img/common/cont-common-bg.jpg) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto;  }
.chara-top-bg2{background:url(../img/common/cont-common-bg.jpg) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto;  background-attachment:fixed; }



.main-chara-list-top ul li:nth-child(1) { animation-delay: 0.15s;}
.main-chara-list-top ul li:nth-child(2) { animation-delay: 0.3s;}
.main-chara-list-top ul li:nth-child(3) { animation-delay: 0.45s;}
.main-chara-list-top ul li:nth-child(4) { animation-delay: 0.6s;}
.main-chara-list-top ul li:nth-child(5) { animation-delay: 0.75s;}
.main-chara-list-top ul li:nth-child(6) { animation-delay: 0.9s;}
.main-chara-list-top ul li:nth-child(7) { animation-delay: 1.05s;}
.main-chara-list-top ul li:nth-child(8) { animation-delay: 1.2s;}
.main-chara-list-top ul li:nth-child(9) { animation-delay: 1.35s;}


.sub-chara-list-top ul li:nth-child(1) { animation-delay: 1.5s;}
.sub-chara-list-top ul li:nth-child(2) { animation-delay: 1.7s;}


@media screen and (max-width: 700px) {
h2{width: 95%; max-width: 924px; margin: 0 auto; padding: 30% 0  5% 0;}

.chara-top-bg2{background:url(../img/common/cont-common-bg.jpg) top center no-repeat; -moz-background-size:150% auto; background-size:150% auto;  background-attachment:fixed; }

}




/* main-chara */


.chara-main-box{padding-bottom: 20%;}
.chara-main-box-position{position: relative; top:70px;  left:0;}
.chara-color{width: 60%; }
.chara-common-bg{width: 80%; position: absolute; top:50px;  right:0; background:url(../img/chara/chara-common-bg.jpg) top center no-repeat; height: 100%;}
.chara-common-bg img{width: 100%; height: 100%;}

.chara-color img{width: 100%; height: 100%;}

.chara-cont-box{position: absolute; top:0; }

.chara-vis-box{width: 50%;}
.chara-vis-box img{width: 100%;}
.chara-txt-box{width: 49%; color: #5f5c77; font-size:22px; line-height:1.61; padding-top: 80px;}
.chara-name{}
.chara-pf{ width: 80%; padding-top: 20px; padding-left: 15%; }

.chara-data{border: solid 1px #9491a8; margin-top:3%;}
.chara-data-cont{padding: 0.5%;}
.chara-data-cont{width: 24%; text-align: center;}
.chara-data-cont dt{padding:0.5%; background:#9491a8; color: #fff; font-size: 16px;}
.chara-data-cont dd{padding:0.5%;}


.chara-data2{max-width: 566px; border: solid 1px #9491a8; margin-top:3%;}
.chara-data-cont2{padding: 0.5%; color: #5f5c82; font-size: 20px;}
.chara-data-cont2{width: 24%; text-align: center;}
.chara-data-cont2 dt{padding:0.5%; background:#9491a8; color: #fff; font-size: 16px;}
.chara-data-cont2 dd{padding:0.5%;}

.chara01-color-bg{background:#b8962b;}
.chara02-color-bg{background:#782e78;}
.chara03-color-bg{background:#fe9832;}
.chara04-color-bg{background:#56c6f4;}
.chara05-color-bg{background:#bf284f;}
.chara06-color-bg{background:#4c8c4c;}
.chara07-color-bg{background:#e10c8a;}
.chara08-color-bg{background:#d671d0;}
.chara09-color-bg{background:#007657;}


.chara-catch01{ background:url(../img/chara/chara-01yue-catch.png) top left no-repeat; -moz-background-size:50% auto; background-size:50% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch02{ background:url(../img/chara/chara-02noah-catch.png) top left no-repeat; -moz-background-size:50% auto; background-size:50% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch03{ background:url(../img/chara/chara-03vergil-catch.png) top left no-repeat; -moz-background-size:50% auto; background-size:50% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch04{ background:url(../img/chara/chara-04kanata-catch.png) top left no-repeat; -moz-background-size:50% auto; background-size:50% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch05{ background:url(../img/chara/chara-05shuri-catch.png) top left no-repeat; -moz-background-size:50% auto; background-size:50% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch06{ background:url(../img/chara/chara-06milan-catch.png) top left no-repeat; -moz-background-size:50% auto; background-size:50% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch07{ background:url(../img/chara/chara-07xeno-catch.png) top left no-repeat; -moz-background-size:50% auto; background-size:50% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch08{ background:url(../img/chara/chara-08felix-catch.png) top left no-repeat; -moz-background-size:50% auto; background-size:50% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch09{ background:url(../img/chara/chara-09lorenzo-catch.png) top left no-repeat; -moz-background-size:50% auto; background-size:50% auto; animation-name: fade-inanime; animation-duration: 2s;}

.chara01-img{margin-top:-20px; margin-left:-30px;}
.chara02-img{margin-left:-30px;}
.chara03-img{margin-left:-30px;}
.chara04-img{margin-left:-30px;}
.chara05-img{margin-top:-20px; margin-left:-30px;}
.chara06-img{margin-left:-30px;}
.chara07-img{margin-left:-30px;}
.chara08-img{margin-left:-30px;}
.chara09-img{margin-top:-20px; margin-left:-30px;}





.chara-list{width: 95%; max-width: 1200px; margin: 0 auto;}
.chara-list li{width: 10%; margin: 0.5%;}
.chara-list-sub {width: 95%; max-width: 1200px; margin: 0 auto; justify-content: center;}
.chara-list-sub li{width: 32%; margin: 0.5%;}

.btn-catch00{background:url(../img/chara/btn-sub-chara2-hover.jpg?20201212) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch01{background:url(../img/top/chara1-hover.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch02{background:url(../img/top/chara2-hover.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch03{background:url(../img/top/chara3-hover.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch04{background:url(../img/top/chara4-hover.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch05{background:url(../img/top/chara5-hover.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch06{background:url(../img/top/chara6-hover.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch07{background:url(../img/top/chara7-hover.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch08{background:url(../img/top/chara8-hover.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch09{background:url(../img/top/chara9-hover.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch10{background:url(../img/chara/btn-sub-chara1-hover.jpg) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }

.btn-catch00:hover{background:url(../img/chara/btn-sub-chara2.jpg?20201212) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch01:hover{background:url(../img/top/chara1.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch02:hover{background:url(../img/top/chara2.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch03:hover{background:url(../img/top/chara3.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch04:hover{background:url(../img/top/chara4.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch05:hover{background:url(../img/top/chara5.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch06:hover{background:url(../img/top/chara6.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch07:hover{background:url(../img/top/chara7.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch08:hover{background:url(../img/top/chara8.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch09:hover{background:url(../img/top/chara9.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.btn-catch10:hover{background:url(../img/chara/btn-sub-chara1.jpg) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }


.chara00 .btn-catch00{background:url(../img/chara/btn-sub-chara2.jpg?20201212) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara01 .btn-catch01{background:url(../img/top/chara1.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara02 .btn-catch02{background:url(../img/top/chara2.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara03 .btn-catch03{background:url(../img/top/chara3.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara04 .btn-catch04{background:url(../img/top/chara4.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara05 .btn-catch05{background:url(../img/top/chara5.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara06 .btn-catch06{background:url(../img/top/chara6.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara07 .btn-catch07{background:url(../img/top/chara7.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara08 .btn-catch08{background:url(../img/top/chara8.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara09 .btn-catch09{background:url(../img/top/chara9.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }
.chara10 .btn-catch10{background:url(../img/chara/btn-sub-chara1.jpg?20201212) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; }



.btn-chara-top{width: 60%; max-width: 280px; margin: 0 auto; padding: 5% 0;}
.btn-chara-top a:hover{filter: contrast(140%);}
.chara-list-sub a:hover{filter: contrast(140%);}


@media screen and (max-width: 700px) {
.chara-main-box{padding-top: 10%;}
.chara-main-box{padding-bottom: 170%;}
.chara04 .chara-main-box{padding-bottom: 180%;}


.chara01-img{margin-left:-10px;}
.chara02-img{margin-left:-10px;}
.chara03-img{margin-left:-20px;}
.chara04-img{margin-left:-20px;}
.chara05-img{margin-left:-10px;}
.chara06-img{margin-left:-20px;}
.chara07-img{margin-left:-20px;}
.chara08-img{margin-left:-20px;}
.chara09-img{margin-left:-20px;}


.chara-vis-box{width: 100%;}
.chara-txt-box{width: 100%; padding-top: 0;}

.chara-main-box-position{position: relative; top:70px;  left:0;}
.chara-color{width: 80%; padding-bottom: 40%;}
.chara-common-bg{width: 90%; position: absolute; top:30px;  right:0; background:url(../img/chara/chara-common-bg.jpg) top center no-repeat; height: 100%;}
.chara-pf{ width: 90%; padding-top: 20px; padding-left: 0; margin: 0 auto; font-size: 16px;}

.chara-list li{width: 32%; margin: 0.5%;}
.chara-list-sub li{width: 100%; margin: 0.5% 0;}

.chara-catch01{ background:url(../img/chara/chara-01yue-catch.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch02{ background:url(../img/chara/chara-02noah-catch.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch03{ background:url(../img/chara/chara-03vergil-catch.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch04{ background:url(../img/chara/chara-04kanata-catch.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch05{ background:url(../img/chara/chara-05shuri-catch.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch06{ background:url(../img/chara/chara-06milan-catch.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch07{ background:url(../img/chara/chara-07xeno-catch.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch08{ background:url(../img/chara/chara-08felix-catch.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; animation-name: fade-inanime; animation-duration: 2s;}
.chara-catch09{ background:url(../img/chara/chara-09lorenzo-catch.png) top left no-repeat; -moz-background-size:100% auto; background-size:100% auto; animation-name: fade-inanime; animation-duration: 2s;}
}



/* sub-chara */

.sub-chara-cont-box{padding-top: 100px; padding-bottom: 5%;}

.sub-chara-box{width: 95%; max-width: 1500px; margin: 0 auto; flex-flow: row-reverse;}

.sub-chara-pf-box{width: 60%;}
.sub-chara-img-box{width: 40%;}

.catch-sub{font-size: 30px; padding: 20px 0; font-weight: 600; line-height:1.61;}
.sub-txt{font-size: 18px; color: #5f5c77;}


.catch-sub10{color: #3b7a5e;}
.catch-sub11{color: #3e51ba;}
.catch-sub12{color: #06b5bf;}
.catch-sub13{color: #f77999;}


@media screen and (max-width: 700px) {
.sub-chara-cont-box{padding-top: 20%; padding-bottom: 5%;}
.sub-chara-box{display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap;}
.sub-chara-pf-box{width: 100%;}
.sub-chara-img-box{width: 100%; margin: 0 auto;}
.catch-sub{font-size: 3.5vw; }
}

    



.kanata-tw-icon{width: 98%;  text-align: right;}
.kanata-tw-icon img{width: 100%; max-width: 50px;}
.kanata-tw-icon a:hover{filter: contrast(140%);}

/* voice */
.music_box{width: 95%; max-width: 400px; padding: 3% 0 3% 0;}
.music_box li{width: 23%; max-width: 161px; padding: 1%;}
.music_box li a:hover{filter: contrast(140%);}
.voice_no img{filter:alpha(opacity=40); -moz-opacity:0.40; -khtml-opacity:0.40; opacity:0.40;}

@media screen and (max-width: 700px) {
.music_box{width: 95%; max-width: 300px; padding: 5% 0 3% 0; margin: 0 auto;}
.music_box li{width: 32%; max-width: 161px; padding: 1%;}
}





/* anime */

@keyframes fade-inanime {
    0% {opacity: 0;}
    100% {opacity: 1;}
}