@charset "UTF-8";
/* CSS Document */

/*--- first veiw
-------------------------------------------------------------------------------- */
body{
	background-image:url("../img/bg_chara.png");
	background-position:center center;
	background-size:cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color:#fff!important;
}
@media screen and (max-width: 768px) {
	body{
		background:none;
	}
	body::before {
	  	background:url("../img/bg_chara.png") no-repeat left bottom;
	  	background-size: cover;
	  	display: block;
	  	position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height:100vh;
		content: "";
		z-index: -1;
	}   
}

.main_chara{
	min-height:100%;
	max-width:1280px;
	margin:0 auto;
}
@media screen and (max-width: 768px) {
	.main_chara{
		overflow:hidden;
	}
}


.chara {
	width:100%;
}
.chara_img{
	text-align:center;
	margin:10px auto;
}



h2.chara_ttl{
	margin-top:100px;
	width:100%;
	text-align:center;
}
@media screen and (max-width: 768px) {
	h2.chara_ttl{
		padding-top: 25px;
		width:60%;
		text-align:center;
		margin:0 auto;
	}
}

.chara_change_btn{
	max-width: 768px;
	width: 100%;
	margin: 0px auto;
}
.chara_change_btn_img{
	width : 33.33333%;
	width : -webkit-calc(100% / 3);
	width : calc(100% / 3);
	text-align: center;
	float: left;
	background-size:90% auto;
	background-position: center center;
	background-repeat: no-repeat;
	height: 0;
    padding-top: 15%;
	cursor: pointer;
}
.chara_change_btn_img.one{
	background-image:url(../img/button_route_1_off.png);
}
.chara_change_btn_img.two{
	background-image:url(../img/button_route_2_off.png);
}
.chara_change_btn_img.three{
	background-image:url(../img/button_route_3_off.png);
}
.chara_change_btn_img.one.is-active{
	background-image:url(../img/button_route_1.png);
}
.chara_change_btn_img.two.is-active{
	background-image:url(../img/button_route_2.png);
}
.chara_change_btn_img.three.is-active{
	background-image:url(../img/button_route_3.png);
}