@charset "utf-8";




/*----------------------------------------
	for PC
----------------------------------------*/


@media screen and (min-width: 641px){



/*  */


#wrapper{}

/* story_character */

#content_story_character{background:#000 url(../img/top/character_story_bg.jpg) ;background-repeat:no-repeat;background-position:center top;background-size:140%;padding:120px 0 0;position:relative;}

#content_story_character .inner_centering.story{text-align:center;}
#content_story_character .inner_centering.story .title{background:url(../img/top/character_story_title.png);width:752px;height:89px;display:inline-block;}
#content_story_character .inner_centering.story .text{background:url(../img/top/character_story_text.png);width:791px;height:429px;display:inline-block;margin-top:40px;margin-bottom:30px;}

#content_story_character .character_bg{background:url(../img/top/character_img.png);width:100%;padding-top:1300px;background-position:center top;margin-top:0px;background-size:2400px;background-repeat:no-repeat;}

#content_story_character .character{text-align:center;margin-top:-30px;}
#content_story_character .character .title{background:transparent url(../img/top/character_title.png);width:696px;height:141px;display:inline-block;margin-top:120px;}

#content_story_character .character .text{color:#fff;}
#content_story_character .character .btn{background:transparent url(../img/top/character_btn.png); width:499px;height:63px;display:inline-block;border-radius:30px;box-shadow:1px 1px 5px rgba(0,0,0,0.2);margin:30px 0 0px;text-indent:-9999px;}

/* .slider_box{transform:rotate(-5deg);} */
.slider_box{margin-top:20px;background-color:rgb(21, 34, 80, 0.8);padding:10px 0;}
#content_story_character .slider-item{width:300px;}
#content_story_character .slider-item .image img{width:96%;margin:0 auto;border-radius:10px;box-shadow:4px 4px 6px rgba(0,0,0,0.3);margin-bottom:5px;}


.character_icon{width:96%;margin:0 auto;padding:80px 0 160px;}
.character_icon .box{text-align:center;color:#fff;margin:0px 0px 27px;display:block;position:relative;}
.character_icon .box img{transition:all 0.3s;}
.character_icon .box:hover img{transform:scale(1.04);}
.character_icon .box.noname:hover img{transform:scale(1);}
.character_icon .box.noname p{opacity:0;}
.character_icon .box.none{display:none;}

.character_icon .box.new:after{content:'NEW';color:#373320;background-image:url(../img/common/new_bg.jpg);padding:2px 13px;box-shadow:0px 0px 6px rgba(0, 0, 0, 0.8);background-size:100%;border-radius:20px;font-size:16px;font-weight:800;font-family: 'Work Sans', cursive;display:inline-block;position:absolute;top:-7px;left:-7px;z-index:50;line-height:1.2;}

.character_icon .box img{display:block;margin-bottom:-9px;}
.character_icon .box .thum{display:inline;}
.character_icon .flex{display:flex;flex-wrap: wrap;justify-content:center;}

.character_icon .new1{margin-bottom:16px;}
.character_icon .new1 p{opacity:0;}
.character_icon .name_non p{opacity:0;}


.character_icon .exist:before{content:'';display:block;width:100%;border-top:1px solid #444;margin:40px 0 70px;}


#tab_sort{text-align:center;}
.tab_border{border-bottom:1px solid #fff;display:inline-block;margin:50px 0 0;}
.tab_border a{margin:0 10px;padding:0px 0px;color:#fff;box-sizing:border-box;display:inline-block;transition:all 0.2s;}
.tab_border a.on{border-bottom:5px solid #fff;display:inline-block;}
.tab_border a:hover{transform:scale(1.05);}


#cboxOverlay{background:#000!important;opacity:0.7!important;}

#cboxClose{width:79px!important;height:79px!important;background-image:url(../img/character/btn_close.png)!important;}
#cboxClose:focus{outline:0;}


#cboxWrapper{overflow:visible!important;margin:0 auto;left:50%!important;margin-left:-459.5px!important;}
#colorbox{width:100%!important;left:0!important;}
#cboxCurrent{display:none!important;}
#cboxPrevious{background:url(../img/character/d_left.png)!important;width:57px!important;height:102px!important;margin-top:-56px!important;left:-35px!important;}
#cboxNext{background:url(../img/character/d_right.png)!important;width:57px!important;height:102px!important;margin-top:-56px!important;right:-35px!important;}

#cboxPrevious:focus,#cboxNext:focus{outline:0;}




/*  */

.centering{text-align:center;}

}



@media screen and (min-width: 1551px) {/*大画面用サイズ変更*/
#visual{padding-top:55%;background-position:center center;background-size:cover;}
#content_story_character{background-size:100%;}
}








/*----------------------------------------
	for SP
----------------------------------------*/


@media screen and (max-width: 640px) {

	/* common */




	/* story_character */

	#content_story_character{background:#000 url(../img/top/character_story_bg_sp.jpg) ;background-repeat:no-repeat;background-position:center top;background-size:100%;padding-top:200%;position:relative;}

	#content_story_character .inner_centering.story{text-align:center;padding-bottom:0px;}
	/* #content_story_character .inner_centering.story .title{background:url(../img/top/character_story_title.png);width:752px;height:89px;display:inline-block;} */
	/* #content_story_character .inner_centering.story .text{background:url(../img/top/character_story_text.png);width:791px;height:429px;display:inline-block;margin-top:20px;} */

	/* #content_story_character .character_bg{background:url(../img/top/character_img.png);width:100%;padding-top:1300px;background-position:center top;margin-top:0px;background-size:2400px;background-repeat:no-repeat;} */

	#content_story_character .character{text-align:center;margin-top:-30px;}
	#content_story_character .character .title{background:transparent url(../img/top/character_title.png);width:98%;padding-top:20%;display:inline-block;margin-top:0px;background-size:100%;margin-top:90px;}

	#content_story_character .character .text{color:#fff;font-size:14px;}
	#content_story_character .character .btn{background:transparent url(../img/top/character_btn.png); width:96%;padding-top:12.12%;display:inline-block;border-radius:30px;box-shadow:1px 1px 5px rgba(0,0,0,0.8);margin:30px 0 0px;text-indent:-9999px;height:0px;background-size:100%;background-repeat:no-repeat;}

	/* .slider_box{transform:rotate(-5deg);} */
	.slider_box{margin-top:20px;background-color:rgb(21, 34, 80, 0.8);padding:7px 0 3px;}
	#content_story_character .slider-item{width:300px;}
	#content_story_character .slider-item .image img{width:96%;margin:0 auto;border-radius:10px;box-shadow:4px 4px 6px rgba(0,0,0,0.3);margin-bottom:5px;}

	.story_name{width:200px;margin-top:20px;}


	.character_icon{width:90%;margin:0 auto;padding:30px 0 40px;}
	.character_icon .box{text-align:center;color:#fff;margin:0px 3px 14px;display:block;width:30%;position:relative;}
	.character_icon .box p{font-size:12px;display:block;}
	.character_icon .box.noname p{opacity:0;}
	.character_icon .box.none{display:none;}

	.character_icon .flex{display:flex;flex-wrap: wrap;justify-content:center;}

	.character_icon .box img{display:block;width:100%;}

	.character_icon .box.new:after{content:'NEW';color:#373320;background-image:url(../img/common/new_bg.jpg);padding:2px 10px;box-shadow:0px 0px 6px rgba(0, 0, 0, 0.8);background-size:100%;border-radius:20px;font-size:11px;font-weight:800;font-family: 'Work Sans', cursive;display:inline-block;position:absolute;top:-7px;left:-7px;z-index:50;line-height:1.2;}


	#tab_sort{text-align:center;}
	.tab_border{border-bottom:1px solid #fff;display:inline-block;margin:30px 0 0;}
	.tab_border a{margin:0 0px;padding:0px 0px;color:#fff;box-sizing:border-box;display:inline-block;width:20%;}
	.tab_border a img{width:100%;}
	.tab_border a.on{border-bottom:5px solid #fff;display:inline-block;}


	#cboxOverlay{background:#000!important;opacity:0.7!important;}

	#cboxClose{width:60px!important;height:60px!important;background-image:url(../img/character/btn_close.png)!important;background-size:100%!important;margin-top:-20px!important;}
	#cboxClose:focus{outline:0;}


	#cboxWrapper{}
	/* #colorbox{overflow:visible!important;} */
	#cboxCurrent{display:none!important;}
	#cboxPrevious{background:url(../img/character/d_left.png)!important;width:37px!important;height:67px!important;margin-top:-16px!important;left:4px!important;background-size:100%!important;top:150px!important;}
	#cboxNext{background:url(../img/character/d_right.png)!important;width:37px!important;height:67px!important;margin-top:-16px!important;right:4px!important;background-size:100%!important;top:150px!important;}

	#cboxPrevious:focus,#cboxNext:focus{outline:0;}
	.centering{text-align:center;}


}