/****************************************
		2. レイアウト
*****************************************/
/*
フォント
*/
/*=================================
layout
=================================*/

/*==================
chara
==================*/
#wrapper:has(#chara_wrap) {
    padding-bottom: 0;
}
/**/
#chara{
}
#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: 24%;
	max-width: 266px;
	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;
    text-align: left;
}
#chara .select_box hr{
    border: none;
    height: 1px;
    background-color: #595959;
    margin: 1.5em auto;
}

#chara .select_box a{
    display: inline-block;
    position: relative;
    margin: 1.5%;
}

#chara .main_chara_select .select_box a{
    width: 23%;
    max-width: 266px;
    margin: 1%;
    position: relative;
    overflow: hidden;
}
.select_frame{
    z-index: 2;
    position: relative;
}
.select_img{
    position: absolute;
    left: 0;
    top: 0;
    transition: transform .6s ease;
    z-index: 1;
}
#chara .main_chara_select .select_box a:hover{opacity: 1.0;}
#chara .main_chara_select .select_box a:hover img.select_img {
  transform: scale(1.1);
}
.b_c0{border: #ff669c 4px solid;}
.b_c1{border: #81717e 4px solid;}
.b_c2{border: #4dc1fe 4px solid;}
.b_c3{border: #fc802a 4px solid;}
.b_c4{border: #c8e654 4px solid;}
.b_c5{border: #c65afd 4px solid;}
.b_c00{border: #c7c7c7 4px solid;}


/*-----------*/

.chara_nav_wrap{
    border-top: #ff65a9 solid 3px;
    width: 100%;
    background-color: #fff;
}
.chara_select_box{
    margin: 0 auto;
    max-width: 1100px;
    width: 96%;
    padding: 0.5em 0;
}
.chara_nav_wrap .chara_select_box a{
    max-width: 120px;
    margin: 0.5%;
    position: relative;
    overflow: hidden;
    border: #ff65a9 solid 3px;
    width: 10%;
    display: inline-block;
}
.chara_nav_wrap .chara_select_box a img{
    width: 100%;
}
.chara_nav_wrap .chara_select_box a:hover img.select_img{
    transform: scale(1.1);
}
/*-----------*/
#chara .box{
    padding-top: 6%;
    width: 100%;
    min-height: 80vh;
    text-align: center;
}
#chara .box #chara_wrap{
	width: 100%;
	position: relative;
	margin: 0 auto;
    overflow: hidden;
    padding-bottom: 20px;
    min-height: 920px;
}
.arr_left{
    position: absolute;
    top: 50%;
    left: 0;
    margin: 0;
    max-width: 55px;
    z-index: 3;
    width: 7%;
}
.arr_right{
    position: absolute;
    top: 50%;
    right: 0;
    margin: 0;
    max-width: 55px;
    z-index: 3;
    width: 7%;
}
.arr_left img, .arr_right img{
    width: 100%;
}
.arr_left:hover , .arr_right:hover{
    opacity: 0.7;
}
/*-----------*/
#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");
}
/*-----------*/
#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:hover{
    background-image: url("../img/chara/arr_left_on.png");
}
#chara .swiper-button-next:hover{
    background-image: url("../img/chara/arr_right_on.png");
}

#chara .swiper-button-prev,
#chara .swiper-button-next{
    width: calc(var(--swiper-navigation-size) / 23* 30);
    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_wrap_box{
    width: 90%;
    max-width: 1400px;
    position: relative;
    margin: 0 auto;
}
.chara_image{
    float: left;
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
    background-size: 100%;
    z-index: 1;
    width: 70%;
	max-width: 1400px;
}


.chara_image img{width: 100%;}

.chara_image .serif{
	width: 100%;
}
.chara_serif{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
}
/**/
.chara_cos{
}
.chara_cos p{
    color: #f16999;
    font-weight: 200;
    font-size: min(5.0vw, 48px);
}
.click_non{
    pointer-events: none;
}
.chara_cos .read_img{
}
.cos_btn{
	width: 100%;
	text-align: center;
	max-width: 90px;
}
a.cCos-bt{
	cursor:pointer;
	display:inline-block;
	width: 17%;
	box-sizing: border-box;
	margin: 0;
	position: relative;
    background-color: #e53f7a;
    border: solid 3px #fff;
    border-radius: 10px;
    max-width: 80px;
    box-shadow: 4px 4px 0 #c7c7c7;
    overflow: hidden;
    margin: 1%;
}
a.cCos-bt:hover,
.chara_cos a.selected{
    opacity: 1;
    background-color: #ff65a9;
}
.cCos-bt img{
    width: 100%;
}
.cos_btn p a{
	display: inline-block;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}

.chara_image .viewImg{opacity: 1.0;}
.chara_image .target{
	width: 110%;
	position: absolute;
	top: 0;
	left: -10%;
	opacity: 0;
    z-index: 1;
}

/*-----------*/
.chara_intro{
	z-index: 2;
	width: 42.8%;
    float: right;
    position: relative;
    margin-top: 8%;
    margin-right: 6%;
    max-width: 600px;
}
.chara_intro .chara_intro_wrap{
	width: 100%;
}
.chara_name{
    text-align: center;
}
.chara_name img{
	width: 100%;
    max-width: 600px;
}
/**/
.chara_txt{
	clear: both;
    padding: 1.0em;
	margin: 2% 0;
	text-align: left;
	color: #303030;
    position: relative;
    background-color: #fff;
    font-size: 1.0em;
}
/**/
.chara_sv{
	box-sizing: border-box;
	position: relative;
	text-align: center;
}
.chara_sv p{
    color: #f16999;
    font-weight: 200;
    font-size: min(5.0vw, 48px);
}
a.cvplay{
    cursor: pointer;
    background-color: #e53f7a;
    border: solid 3px #fff;
    border-radius: 10px;
    max-width: 80px;
    box-shadow: 4px 4px 0 #c7c7c7;
    margin: 1%;
    display: inline-block;
    width: 17%;
}
a.cvplay:hover,
.voice a.stop-bt{
	opacity: 1.0;
    background-color: #ff65a9;
}
.chara a.stop-bt{
}
.chara a.play-bt{
}

.voice{
	text-align: center;
	width: 100%;
	margin: 0 auto;
}
.voice .voice_btn{
    margin: 0;
	display: inline-block;
	position: relative;
	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;
}



/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 768px) {

/*==================
chara
==================*/
	#chara{
		overflow: hidden;
	}
	#chara .box{
        padding-top: 50px;
	}
	#chara .select_box{
        padding: 0;
	}
    #chara .main_chara_select .select_box a{
        width: 31.3%;
    }
    #chara .box #chara_wrap{
        overflow: inherit;
    }
    .chara_wrap_box{
        width: 100%;
        min-height: 70vh;
    }
    .chara_nav_wrap .chara_select_box a{
        width: 19%;
    }
    .chara_intro{
        width: 40%;
        margin-right: 5%;
        margin-top: 20%;
    }
    .chara_image .target{
        /*width: 130%;
        left: -15%;*/
        
        width: 170%;
        left: -35%;
    }
    #c8 .chara_image .target{
        width: 130%;
        left: -10%;
    }
    .chara_image{
        width: 70%;
    }
    .chara_serif{
        left: 6%;
        top: 6.0em;
    }
    #chara .box #chara_wrap{
        min-height: 0;
        padding-bottom: 9%;
    }
    a.cvplay,
    a.cCos-bt{
        width: 25%;
    }
    
    
    
}/*max-width: 768px*/


/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 480px) {
    nav a{
        padding: 0.5em 0;
    }
    #chara .box #chara_wrap{
        padding-bottom: 0;
    }
    
    #chara .box{
        min-height: 60vh;
    }
    .chara_image .target {
        width: 210%;
        left: -45%;
    }
    #c8 .chara_image .target {}
    #c8{
        min-height: 48vh;
    }
}/*media:480*/