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

html,body {
    height: 100%;
}

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

#wrapper{
    margin: 0 auto;
position:relative;	

	}
	
	

#wrapper #left_area h1{
	width:90%;
	position:relative;
	z-index:100;
}
#wrapper #left_area nav li:nth-child(4){
	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%;
	/*margin-right:-5%;*/
height:100%;
	position:relative;
	overflow:hidden;
	}
	
#main_area .content{
	max-width:760px;
	width:70%;
	padding-left:5%;
	padding-right:5%;
	margin:0 auto;
	padding-top:65px;
	background:url(../../img/top_bg.gif) 0 0 repeat-x;
	background-color:#FBF8EF;
	position:relative;
	padding-bottom:50px;
}
#main_area .content h2{
	text-align:center;
	
}
#main_area .content h2 img{
	max-width:100%;
	width:auto;
	position:relative;
	z-index:2;
}
#main_area .content .leaf{
	position:absolute;
	top:-40px;
	right:100px;
	width:50%;
	z-index:1;
}

#main_area .content h3{
	border-top:1px solid #7d7c77;
	position:relative;
	margin-top:60px;
}
#main_area .content h3 p{
	position:absolute;
	top:-20px;
	left:0px;
	width:100%;
	text-align:center;
}
#main_area .content h3 p img{
	width:auto;
}
#main_area .content .cast ul{
	padding-top:50px;
}
#main_area .content .cast li{
	float:left;
	width:20.5%;
	padding-left:2%;
	padding-right:2%;
	text-align:center;
	margin-bottom:30px;
}



#main_area .content .cast li:nth-child(5){
	clear:both;
}

#main_area .content .staff{
	clear:both;
}
#main_area .content .staff ul{
	padding-top:50px;
	display:flex;
	 -webkit-justify-content:space-between; /* Safari */
  justify-content:space-between;
  flex-wrap:wrap;
  align-items:flex-end;
  padding-left:2%;
  padding-right:2%;
  
}
#main_area .content .staff li{
	width:46%;
	border-bottom:1px solid #ccc9c1;
	padding-bottom:5px;
	margin-bottom:30px;
	font-size:16px;
}
#main_area .content .staff li span{
	float:right;
	font-size:20px;
}

#main_area .content .music h3{
	width:100%;
	margin-bottom:7%;
}

#main_area .content .music img{
	width:auto;
}

#main_area .content .music p.text{
width:45%;	
float:left;
}


#main_area .content .music p.text span{
	padding-top:1em;
display:block;
	text-align:right;
}

#main_area .content .music .photo{
	float:right;
}



#main_area .content .staff li:nth-child(1){
	width:100%;
	border-bottom:1px solid #ccc9c1;
	padding-bottom:5px;
	margin-bottom:30px;
	font-size:16px;
}

#main_area .content .staff li span.ex{
	font-size:20px;
	float:none;
}


#main_area .content .staff li p{
clear:both;
}



}
	

@media screen and (max-width: 768px) {
	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:80%;
	padding-left:5%;
	padding-right:5%;
	margin:0 auto;
	padding-top:40px;
	background:url(../img/top_bg.gif) 0 0 repeat-x;
	background-size:2em;
	background-color:#FBF8EF;
	position:relative;
	padding-bottom:30px;
}
#main_area .content h2{
	text-align:center;
	width:70%;
	margin:0 auto;
}
#main_area .content h2 img{
	max-width:100%;
	width:auto;
	position:relative;
	z-index:2;
}
#main_area .content .leaf{
	position:absolute;
	top:-20px;
	right:30px;
	width:50%;
	z-index:1;
}

#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 .cast ul{
	padding-top:10%;
}
#main_area .content .cast li{
	float:left;
	width:42%;
	padding-left:4%;
	padding-right:4%;
	text-align:center;
	margin-bottom:30px;
}
#main_area .content .cast li:nth-child(5){
	clear:both;
}

#main_area .content .staff{
	clear:both;
}
#main_area .content .staff ul{
	padding-top:10%;
	display:flex;
	 -webkit-justify-content:space-between; /* Safari */
  justify-content:space-between;
  flex-wrap:wrap;
  align-items:flex-end;
  padding-left:2%;
  padding-right:2%;
  
}
#main_area .content .staff li{
	width:100%;
	border-bottom:1px solid #ccc9c1;
	padding-bottom:5px;
	margin-bottom:15px;
	font-size:12px;
}
#main_area .content .staff li span{
	float:right;
	font-size:16px;
}


#main_area .content .staff li span.ex{
	font-size:16px;
	float:none;
}


#main_area .content .staff li p{
clear:both;
}




#main_area .content .music h3{
	width:100%;
	margin-bottom:7%;
}

#main_area .content .music img{
	width:auto;
	text-align:center;
	margin:0 auto;
}

#main_area .content .music p.text{
width:85%!important;	
float:none;
margin:12% auto 7% auto;
text-align:center;
}


#main_area .content .music p.text span{
	padding:8% 0 0% 0;
display:block;
	text-align:center;
	float:none!important;
}

#main_area .content .music .photo{
	float:none;
	text-align:center;
}



}