@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.jpg) 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(6){
	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 repeat-y;
	background-size:contain;
	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:125px;
}
#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 .goods{

	background:url(../img/goods_bg.gif) 0 bottom no-repeat;
	background-zize:contain;
	padding-bottom:30px;
}


#main_area .content .comic{
	
	padding-bottom:25%;
	
	
	}


#main_area .content ul{
padding:5% 0;
float:left;
width:100%;
}

#main_area .content ul li{
float:left;
width:33.3%;
text-align:center;
}


#main_area .content ul li img{
max-width:100%;
}

#main_area .content .comic .book{
	
	width:40%;
	float:left;

	
	}
	
	
#main_area .content .comic .text{
	
	float:left;
	width:60%;
font-size:130%;	
	}	

#main_area .content .comic .text .title{
	
font-size:140%;	
color:#cb1a1c;
	}	

#main_area .content .comic .text .title span{
	
font-size:50%;	
clear:both;
display:block;
padding:2% 0;
	}


#main_area .content .comic .text .bold{
font-weight:bold;
display:block;
clear:both;
padding:2% 0;
}


#main_area .content .comic .btn{
margin-top:5%;

float:right;
}

/*アイテム*/



#main_area .intro{
font-size:18px;
color:#892881;
}

#main_area .intro span{
font-size:80%;
}



#main_area .line{
border-bottom:solid 1px #7d7c77;
clear:both;
margin:3% 0 4% 0;
}


#main_area ul.item,#main_area ul.item_l{
padding-top:2%!important;
}


#main_area .item .banner{
width:46%;
margin:7% auto 0 auto;
text-align:center;

}


#main_area .content ul.item_l li{
width:100%;
}

#main_area .content ul.item_l li .photo{ 


border:solid 7px #dbd8cf;
box-sizing:border-box;
padding:0;
background:#fff;
margin:2% 0;


}



#main_area .content ul.item li{
width:46%;
float:left!important;
margin:2%;
}


#main_area .content ul.item li .photo{

border:solid 7px #dbd8cf;
box-sizing:border-box;
padding:0;
background:#fff;
margin:2% 0;
}

#main_area .content ul .photo img{ 


vertical-align:bottom;


}



#main_area .content ul.item li span{

font-size:80%;
text-align:left;
}

/*DVD情報*/


#main_area .content .dvd{
	
	padding-bottom:2%;
	
	
	}

#main_area .content .dvd .pkg{
	
	width:40%;
	float:left;

	
	}
	
	
#main_area .content .dvd .text{
	
	float:left;
	width:60%;
font-size:130%;	
	}	

#main_area .content .dvd .text .title{
	
font-size:140%;	
padding-bottom:5%;
	}	

#main_area .content .dvd .text .title span{
	
font-size:70%;	
clear:both;
display:block;
padding:2% 0;
	}


#main_area .content .dvd .text .bold{
font-weight:bold;
display:block;
clear:both;
padding:2% 0;
}

#main_area span.notice{
font-size:90%;
text-align:left;
}






}

#main_area .content .dvd .pic{
	
	padding-top:1.5em;
	clear:both;
	}
	
#main_area .content .dvd .pic img{
	
margin-top:0.7em;
	}	


@media screen and (min-width: 750px) and (max-width: 768px){
/*アイテム*/



#main_area .item .banner{
width:46%;
margin:7% auto 0 auto;
text-align:center;

}

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

#main_area .content h3 p img{
width:35%!important;
}



#main_area .content ul.item li{
width:45%;
float:left!important;
margin:1.5%;
}


#main_area .content ul.item li .photo{

border:solid 7px #dbd8cf;
box-sizing:border-box;
padding:0;
background:#fff;
margin:2% 0;
}


#main_area .content ul.item li span{

font-size:80%;
text-align:left;
}


#main_area .content ul{
padding:3% 0 5% 0!important;
}


}
	

@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 p a{word-wrap:break-word;}


#main_area .content h2{
	text-align:center;
	width:35%;
	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 .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%;
}







#main_area .content .goods .notice{
	text-align:right;
	float:right;
	font-size:0.7em;
}


#main_area .content .goods li .bold{
font-weight:bold;
color:#993399;
}


#main_area .content .comic .book{
	
	width:40%;
	float:left;
	
	
	}
	
	
#main_area .content .comic .text{
	
	float:right;
	width:55%;
font-size:100%;
padding-left:5%;	
	}	

#main_area .content .comic .text .title{
	
font-size:140%;	
color:#cb1a1c;
	}	

#main_area .content .comic .text .title span{
	
font-size:50%;	
clear:both;
display:block;
padding:2% 0;
	}


#main_area .content .comic .text .bold{
font-weight:bold;
display:block;
clear:both;
padding:2% 0;
}


#main_area .content .comic .btn{
clear:both;
padding:10% 0;
}



#main_area .content ul{
padding:8% 0;
clear:both;
width:100%;
}

#main_area .content ul li{
clear:both;

width:100%;
text-align:center;
}


#main_area .content ul li img{
max-width:100%;
}



/*アイテム*/



#main_area .intro{
font-size:18px;
color:#892881;
}


#main_area .line{
border-bottom:solid 1px #7d7c77;
clear:both;
padding-top:5%;
margin:5% 0 5% 0;
}


#main_area ul.item,#main_area ul.item_l{
padding-top:2%!important;
}


#main_area .item .banner{
width:60%;
padding-top:8%!important;
margin:0% auto 0 auto;
text-align:center;
clear:both;
}


#main_area .content ul.item_l li{
width:100%;
}

#main_area .content ul.item_l li .photo{ 


border:solid 7px #dbd8cf;
box-sizing:border-box;
padding:0;
background:#fff;
margin:2% 0;


}



#main_area .content ul.item li{
width:46%;
float:left!important;
margin:2%;
}


#main_area .content ul.item li .photo{

border:solid 7px #dbd8cf;
box-sizing:border-box;
padding:0;
background:#fff;
margin:2% 0;
}


#main_area .content ul.item li span{

font-size:80%;
text-align:left;
}



}



@media screen and (max-width: 768px){
/*アイテム*/



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




#main_area .content ul.item li{
width:100%;
float:left!important;
margin:1.5%;
}


#main_area .content ul.item li .photo{

border:solid 7px #dbd8cf;
box-sizing:border-box;
padding:0;
background:#fff;
margin:2% 0;
}


#main_area .content ul.item li span{

font-size:80%;
text-align:left;
}


#main_area .content ul{
padding:3% 0 5% 0!important;
}

#main_area .intro span{
font-size:80%;
}



#main_area .dvd ul.item li .photo{
	
	max-width:352px;
	background:#000;
margin:auto auto;
	}
	
#main_area .dvd ul.item li .photo img{
	
vertical-align:bottom;
	}
	

#main_area .dvd .pkg{
	
	width:40%;
	float:left;
	
	
	}
	
#main_area .content .dvd .text{
	
	float:right;
	width:55%;
font-size:100%;
padding-left:5%;	
	}	
	

#main_area .content .dvd .text .title{
	
font-size:130%;
font-weight:bold;	

	}	
	
#main_area .content .dvd .text .title span{
	
font-size:70%;
font-weight:normal;	
display:block;
padding-top:2%;
	}	
	

#main_area  span.notice{
font-size:90%;
text-align:left!important;
}


#main_area .dvd ul.item li{
	
	padding-bottom:3%;
	
	}


}

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

#main_area .content h3 p img{
width:30%!important;
}
}



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


#main_area .content h3 p{
	position:absolute;
	top:-20px;
	left:0px;
	width:100%;
	text-align:center;
}

#main_area .content h3 p img{
width:50%!important;
}

#main_area .content ul{
padding:8% 0;
width:100%;
float:left;
width:100%;
}

#main_area .content ul li{
float:left!important;
clear:none!important;
width:31%;
text-align:center;
padding:0 1%;
}

#main_area .content .comic .btn{
clear:both;
text-align:center;
margin: 0 auto;
}




#main_area  span.notice{
font-size:90%;
text-align:left!important;
}

}