/****************************************
		2. レイアウト
*****************************************/
/*
フォント
*/
@import url('https://fonts.googleapis.com/earlyaccess/sawarabimincho.css');
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/*=================================
layout
=================================*/

/*==================
chara
==================*/
.group_select_box{
    width: 90%;
    margin: 0 auto;
    max-width: 1100px
}
.group_select_box a{
    display: inline-block;
    width: 16%;
    position: relative;
    transition: all .5s ease;
}
.group_select_box a img{
    width: 100%;
}

.group_select_box a.select_other{
    width: 60%;
    max-width: 327px;
    margin-top: 1.0em;
    margin-bottom: 1.0em;
}

.select_logo_on{
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
}
.group_select_box a:hover img{
    opacity: 0.0;
}
.group_select_box a:hover .select_logo_on{
    opacity: 1.0;
}

/**/
#chara{
	background-size: 100% auto;
}
#chara #select_nav img.subnav_top{
	float: right;
}

#chara #select_nav a img{
	width:100%;
}
#chara #select_nav a{
	margin: 0.3% 0.3% 0.3% 0.3%;
	width: 45%;
	max-width: 380px;
	display: inline-block;
	box-sizing: border-box;
	z-index: 1;
	opacity: 0.5;
	position: relative;
	float: right;
	border: none;
}
#chara #select_nav a:hover,.chara #select_nav a.selected{
	opacity: 1.0;
}
#chara .select_box{
    width: 96%;
    max-width: 1100px;
    margin: 0 auto;
}
#chara .select_box hr{
    border: none;
    height: 1px;
    background-color: #595959;
    margin: 1.5em auto;
}
#chara .select_box .chara_select_box{
    display: inline-block;
    width: 48%;
    margin: 1%;
    padding: 0;
    max-width: 480px;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100%;
    box-sizing: border-box;
}
#chara #group_ikebukuro{
    background-color: #b40000;
    background-image: url("../img/chara/select_ikebukuro_bg.jpg");
}
#chara #group_yokohama{
    background-color: #040093;
    background-image: url("../img/chara/select_yokohama_bg.jpg");
}
#chara #group_shibuya{
    background-color: #ecb200;
    background-image: url("../img/chara/select_shibuya_bg.jpg");
}
#chara #group_shinjuku{
    background-color: #7a7a7a;
    background-image: url("../img/chara/select_shinjuku_bg.jpg");
}
#chara #group_osaka{
    background-color: #f04f00;
    background-image: url("../img/chara/select_osaka_bg.jpg");
}
#chara #group_nagoya{
    background-color: #522b78;
    background-image: url("../img/chara/select_nagoya_bg.jpg");
}
#chara #group_other{
    background-color: #30555d;
    background-image: url("../img/chara/select_other_bg.jpg");
}


#chara .select_box a{
    width: 30%;
    display: inline-block;
    position: relative;
    margin: 1.5%;
}
#chara .select_box .select_name{
    width: 100%;
}
/*-----------*/
#chara .box{
    padding-top: 10%;
    width: 100%;
    min-height: 80vh;
    background-image: url(../img/news/bg_top.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 40%;
    text-align: center;
}
#chara .box #chara_wrap{
	/*max-width: 1600px;*/
	width: 100%;
	position: relative;
	margin: 0 auto;
	min-height: 900px;
}

.chara_select_box a.selected,
.chara_select_box a:hover,
.chara_select_box_sub a:hover{
	opacity: 0.7;
}
#chara .new_2nd{
    position: absolute;
    top: -1px;
    left: -1px;
    width: 40%;
}
/*-----------*/
#chara .more_btn{
    float: left;
    max-width: 167px;
}
#chara .more_btn img{
    background-image: url("../img/chara/back.png");
    max-width: 167px;
    width: 100%;
}
#chara .more_btn:hover{
	opacity: 1.0;
}
#chara .more_btn:hover img{
	/*background-image: url("../img/chara/back_on.png");*/
    background-image: url("../img/chara/back_on.png?v=0");
}
#chara .btn_wrap{
    max-width: 1100px;
    width: 90%;
    margin: 0 auto;
    z-index: 2;
    position: relative;
}
/*-----------*/
#chara .swiper-button-prev{
    background-image: url("../img/chara/arr_left.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
#chara .swiper-button-next{
    background-image: url("../img/chara/arr_right.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
#chara .swiper-button-prev,
#chara .swiper-button-next{
    width: calc(var(--swiper-navigation-size) / 16* 30);
    /*height: var(--swiper-navigation-size);*/
    height: calc(var(--swiper-navigation-size) / 16* 30);
}
#chara .swiper-button-next:after,#chara .swiper-rtl .swiper-button-prev:after,
#chara .swiper-button-prev:after, #chara .swiper-rtl .swiper-button-next:after{
    content: '';
    
}
.swiper-slide-active{
	
}

.chara_image{
	position: relative;
	width: 100%;
	margin: 0 auto;
	max-width: 1100px;
	background-repeat: no-repeat;
	background-position: center center;
    background-size: auto;
	margin-bottom: 10%;
    z-index: 1;
    transform:translate3d(0,0,0);
}
#c1 .chara_image,#c2 .chara_image,#c3 .chara_image{
	background-image: url("../img/chara/ikebukuro_bg.png");
}
#c4 .chara_image,#c5 .chara_image,#c6 .chara_image{
	background-image: url("../img/chara/yokohama_bg.png");
}
#c7 .chara_image,#c8 .chara_image,#c9 .chara_image{
	background-image: url("../img/chara/shibuya_bg.png");
}
#c10 .chara_image,#c11 .chara_image,#c12 .chara_image{
	background-image: url("../img/chara/shinjuku_bg.png");
}
#c13 .chara_image,#c14 .chara_image,#c15 .chara_image{
	background-image: url("../img/chara/osaka_bg.png");
}
#c16 .chara_image,#c17 .chara_image,#c18 .chara_image{
	background-image: url("../img/chara/nagoya_bg.png");
}
#c19 .chara_image,#c20 .chara_image,#c21 .chara_image,
#c22 .chara_image,#c23 .chara_image,#c24 .chara_image{
	background-image: url("../img/chara/other_bg.png");
}

.chara_image img{width: 100%;}

.chara_image .serif{
	width: 60%;
}
.chara_serif{
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 174px;
    z-index: 2;
}
/**/
.chara_cos{
	position: absolute;
	right: 20%;
	top: 16%;
	z-index: 3;
	width: 8%;
	max-width: 70px;
}
.chara_cos .read_img{
}
.cos_btn{
	width: 100%;
	text-align: center;
	max-width: 70px;
}
.cos_btn p{
	width: 100%;
}

a.cCos-bt{
	float:left;
	cursor:pointer;
	display:inline-block;
	width: 70.0%;
	box-sizing: border-box;
	margin: 0;
	position: relative;
}
a.cCos-bt .on_bg{
    position: absolute;
    left: 0;
    top: 0;
}
a.cCos-bt .on_view{
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "alpha(opacity=0)";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
a.cCos-bt:hover .on_view{
    opacity: 1;
}
.cos_btn p a{
	display: inline-block;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}
.cos_btn p a.selected,.cos_btn p a:hover{
}

.chara_image .viewImg{opacity: 1.0;}
.chara_image .target{
	width: 75%;
	position: absolute;
	top: 10%;
	left: -5%;
	opacity: 0;
    z-index: 1;
    transform:translate3d(0,0,0);
}

@keyframes rotateYAnime{
	from{
		transform: rotateY(0);
		}
	to{
		transform: rotateY(-360deg);
		}
}

.rotateY{
	animation-name:rotateYAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
	from{
		transform: rotateY(0);
		}
	to{
		transform: rotateY(-360deg);
		}
}
/*-----------*/
.chara_intro{
	position: absolute;
	top: 14%;
	right: 14%;
	z-index: 2;
	width: 45%;
	max-width: 600px;
}
.chara_intro .chara_intro_wrap{
	width: 100%;
	/*max-width: 480px;*/
    max-width: 590px;
}
.chara_name{
}
.chara_name img{
	width: 100%;
    max-width: 600px;
}
/**/
.chara_spec{
}
.chara_spec img{
    width: 100%;
}
.chara_spec_table{
	color: #0a3190;
}
.chara_spec_table tr{
	border-bottom: 2px solid #0a3190;
	border-left: 6px solid #0a3190;
	float: left;
	width: 48%;
	margin: 1%;
}

/**/
.chara_txt{
	clear: both;
	padding: 0.5em;
	margin: 2% auto 0 auto;
	text-align: left;
	color: #000;
	font-weight: bold;
    text-shadow: 1px 1px 3px #fff , -1px -1px 3px #fff;
    width: 80%;
}
/**/
.chara_sv{
	box-sizing: border-box;
	position: relative;
	text-align: center;
}
.chara_sv .read_img{
	width: 100%;
}
a.cvplay:hover .sv_on,
.voice a.stop-bt .sv_on{
	opacity: 1.0;
}
.chara a.stop-bt{
	/*position: relative;*/
}
.chara a.play-bt{
}

.voice{
	text-align: center;
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
}
.voice a{
	margin: 2%;
	display: inline-block;
	cursor: pointer;
	position: relative;
	width: 26%;
	max-width: 135px;
	float: left;
	box-sizing: border-box;
}
.sv_on{
	opacity: 0.0;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.chara_btn{
	text-align: center;
}
.chara_btn a{
	position: relative;
	display: inline-block;
}
.chara_btn a:hover .sv_on{
	opacity: 1.0;
}

/*=========*/
.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  /*line-height: 300px;*/
}

.swiper-slide:nth-child(3n + 1) {
  /*1、4、7、3n+1枚目の背景色 */
  /*background-color: #de4439;*/
}

.swiper-slide:nth-child(3n + 2) {
  /*2、5、8、3n+2枚目の背景色 */
  /*background-color: #fcd500;*/
}

.swiper-slide:nth-child(3n + 3) {
  /*3、6、9、3n+3枚目の背景色 */
  /*background-color: #53c638;*/
}

/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 1400px) {
/*==================
character
==================*/
	.chara_cos{
        top: 14%;
	}
}/*max-width: 1400px*/
/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 1200px) {

}/*max-width: 1200px*/
/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 1100px) {
/*==================
character
==================*/
	.chara_cos{
		width: 5%;
        top: 14.5%;
	}
}/*max-width: 1100px*/
/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 768px) {

/*==================
chara
==================*/
	#chara{
		overflow: hidden;
	}
    #chara h3.read img{
        margin-left: -58%;
    }
	#chara .box{
		background-size: 100%, 100%, 20%;
	}
	#chara .select_box{
        padding: 0;
		/*background-size: 180%;*/
		/*padding: 40% 0 5em 0;*/
		/*background-position: left 5em top 5%;
		box-sizing: border-box;*/
	}
    #chara .select_box .chara_select_box{
        width: 100%;
        margin: 1% 0;
    }
    .group_select_box a{
        width: 31%;
    }
    .group_select_box a:hover img{
        opacity: 0;
    }
    .group_select_box a:hover .select_logo_on{
        opacity: 1;
    }
    
	.chara_intro{
		width: 96%;
		margin: 0 auto;
		position: relative;
        right: 0;
	}
	.chara_intro .chara_intro_wrap{
		max-width: none;
	}
	.chara_txt{
		padding: 1.0em;
        width: 100%;
	}
	.chara_sv{
		margin: 0;
	}
	.chara_image{
		background-position: center;
		background-size: 140%;
	}
    .voice a{
        margin: 3.5%;
    }
    .voice a:hover .sv_on{
        /*opacity: 0;*/
    }
    
    #chara .box #chara_wrap{
        overflow: hidden;
    }
    .chara_image .view_pc{
        display: none;
    }
    .chara_serif{
        width: 30%;
        left: 60%;
    }
    
	.chara_image .serif{
		width: 130%;
	}
	.chara_image .target{
		width: 160%;
		top: 10%;
        margin-left: -24%;
	}
	.chara_cos{
		top: 18%;
		right: 3%;
		width: 15%;
	}
	.voice{
		/*width: 60%;*/
	}
	.chara_btn{
		margin: 2em auto 5em auto;
	}
}/*max-width: 768px*/


/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 480px) {
/*==================
chara
==================*/
	.chara_image{
		/*background-position: 12em 15%, left -10em bottom;*/
		background-size:120%, 100%;
	}
}/*media:480*/