@charset "UTF-8";
/* ======================================================== */
/*  ALL */
/* ======================================================== */
/* ----------------------------------------
   base
---------------------------------------- */

html,body {
    height: 100%;
}

img{


	}
	
	
#main_area{
	
	
	position:relative;
	
	
	}
	



/*左右の矢印の位置を変える*/
.slick-next {
background:url(../img/next.png) 50% 50% no-repeat #000!important;
background-size:contain;
width:4%!important;
height:8%!important;	
right:0%!important;	
    z-index: 99;
	top:36%!important;	
	position:fixed!important;
	opacity:0.7;	
}
.slick-prev {
background:url(../img/back.png) 50% 50% no-repeat #000!important;
width:4%!important;
height:8%!important;
background-size:contain;
display:block!important;	
left:22%!important;
z-index: 100;
top:36%!important;	
	position:fixed!important;	
	opacity:0.7;
}


#main_area .content .chara ul{
	
padding-top:30px;

}

#main_area .content .chara li{
	float:left;

	text-align:left;

}

.slider{


	
	}

.multiple-item{
	

	
	}
		
	
/** PC版 **/




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



#main_area .content .chara li .btn{
width:130px!important;
height:100%;

right:-80%!important;	
position:absolute;
z-index:999;
}


}

@media screen and (min-width: 769px) {
body {
	background:url(../../img/left_bg.png) 0 0 no-repeat;
}

#wrapper{
    margin: 0 auto;
position:relative;	
height:100%;
	}
	


	

#wrapper #left_area h1{
	width:90%;
	position:relative;
	z-index:100;
}



#wrapper #left_area h1 img{
max-width:100%;
	}


#wrapper #left_area nav li:nth-child(3){
	background:url(../../img/navi_arrow.png) 0 0 no-repeat;
	background-size:12%;
}

#wrapper #main_area{
	
		
	float:right;
	padding-top:66px;
	padding-bottom:50px;
	background:url(../img/main_bg.jpg) 0 0 no-repeat;
	background-size:cover;
	width:78%;
height:100%;
	position:relative;
	overflow:hidden;
	}
	
#main_area .content{
	/*width:100%;*/
	/*padding-left:5%;*/

	margin:35px auto;
	padding-top:65px;
	background:url(../img/chara_bg.gif) 0 bottom repeat-x;
	background-color:#FBF8EF;
	position:relative;
	padding-bottom:50px;
	z-index:1003;

}
#main_area h2{
	text-align:center;
pointer-events:none;	
	
}
#main_area  h2 img{
	max-width:100%;
	width:auto;
	position:relative;
	z-index:2;
}
#main_area .leaf{
	position:absolute;
	top:10px;
	right:0;
	left:0;
	bottom:0;
	margin:auto;
	width:25%;
	z-index:1;
	pointer-events:none;

}

#main_area .content h3{
	border-top:1px solid #7d7c77;
	position:relative;
	margin-top:30px;
}
#main_area .content h3 p{
	position:absolute;
	top:-20px;
	left:0px;
	width:100%;
	text-align:center;
}

#main_area .content .logo{
	width:40%;
	margin: 1% auto;
	}




#main_area .content h3 p img{
	width:auto;
}
#main_area .content .chara{
	padding-bottom:30px;
padding-left:3%;	

}


#main_area .content .chara li {

position:relative;
text-align:center;

}


#main_area .content .chara li img {


}



#main_area .content .chara li .btn{
width:180px;
height:100%;

right:-50%;	
position:absolute;
z-index:999;
}






/*ポップアップ*/


.chara_detail{
	
	min-width:780px;
	width:45%;
	margin:auto;
	
	}
	
	
.chara_detail p.image{
	
	width:40%;
	float:left;
	
	}
	
.chara_detail p.image img{
	
	max-width:100%!important;
	
	
	}	
		


.chara_detail #intro{
	
		background:url(../../img/top_bg.gif) 0 0 repeat-x;
	background-color:#FBF8EF;
		position:relative;		
	}
	
.chara_detail .inner{
	
padding:7% 3% 5% 3%;

	}
		
	
	
.chara_detail #intro .name{


font-size:300%;
color:#6fbff1;
	
	}
	
	
.chara_detail #intro span{


font-size:110%;

	
	}	
	
.chara_detail #intro .text{

padding-top:5%;
font-size:150%;
	
	}	
	
	
	.popup-close{
		
		
	
		font-size:300%;
		float:right;
		
		cursor:pointer;
		position:absolute;
		right:1%;
		bottom:1%;
		}
		
		
		
			


}
	
	
	
	
	

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

/*左右の矢印の位置を変える*/
.slick-next {
background:url(../img/next.png) 50% 50% no-repeat #000!important;
background-size:1em;
width:10%!important;
height:10%!important;	
right:0%!important;	
    z-index: 99;
	top:36%!important;	
	position:fixed!important;
}
.slick-prev {
background:url(../img/back.png) 50% 50% no-repeat #000!important;
background-size:1em;
width:10%!important;
height:10%!important;	

display:block!important;	
left:0%!important;
z-index: 100;
top:36%!important;	
position:fixed!important;	
}

	
	
	html,body {
	height:auto;
}
#wrapper{
	height:auto;
	position:relative;
	background-color:#faf6e9;
}
#wrapper #main_area{
	
		
	padding-top:30px;
	padding-bottom:150px;
	background:url(../img/main_bg.jpg) 0 0 no-repeat;
	background-size:cover;
	width:100%;
	position:relative;
	}
	
#main_area .content{
	/*width:100%;*/
	margin:0 auto;
	padding-top:40px;
	background:url(../img/chara_bg.gif) 0 bottom repeat-x;
	background-size:5em;
	background-color:#FBF8EF;
	position:relative;
	padding-bottom:30px;
}
#main_area h2{
	text-align:center;
	margin:0 auto;
}
#main_area .content h2 img{
	max-width:100%;
	width:auto;
	position:relative;
	z-index:2;
}
#main_area .leaf{
	position:absolute;
	top:-20px;
	left:0;
	right:0;

	margin:auto;
	width:80%!important;
	z-index:1;
}

#main_area .leaf img{
width:100%;
}

#main_area .content .logo{
	text-align:center;
	width:70%;
	margin:1% auto;
}

#main_area .content h3{
	border-top:1px solid #7d7c77;
	position:relative;
	margin-top:30px;
}
#main_area .content h3 p{
	position:absolute;
	top:-15px;
	left:0px;
	width:100%;
	text-align:center;
}
#main_area .content h3 p img{
	width:50%!important;
}


#main_area .content .chara{
	

	z-index:1001;
	}


#main_area .content .chara ul{
	padding-top:1%;
}
#main_area .content .chara li{
	/*width:12%;*/
	float:left;
	font-size:1.3em;
}



/*ポップアップ*/


.chara_detail{
	

	width:90%;
	margin:auto;
	
	}
	
	
.chara_detail p.image{
	
	width:80%;
	margin:0 auto;
	text-align:center;
	}
	
.chara_detail p.image img{
	
	max-width:100%!important;
	
	
	}	
		


.chara_detail #intro{
	
		background:url(../../img/top_bg.gif) 0 0 repeat-x;
		background-size:2em;
	background-color:#FBF8EF;
		position:relative;		
	}
	
.chara_detail .inner{
	
padding:9% 4% 15% 4%;

	}
		
	
	
.chara_detail #intro .name{

clear:both;
font-size:200%;
color:#6fbff1;
	
	}
	
	
.chara_detail #intro span{


font-size:90%;

	
	}	
	
.chara_detail #intro .text{

padding-top:5%;
font-size:100%;
	
	}	
	
	
	.popup-close{
		
		
	
		font-size:300%;
		float:right;
		
		cursor:pointer;
		position:absolute;
		right:1%;
		bottom:1%;
		}
			

#main_area .content .chara li {
position:relative;
}


#main_area .content .chara li .btn{
width:150px!important;
height:100%;
right:-70%!important;	
position:absolute;
z-index:999;
}


.logo img{
max-width: 100%;

}

}