@charset "UTF-8";
/* CSS Document */
/* ----------------------------------------
story
---------------------------------------- */
#main li.sub_pic{
	padding:0 2px 2px 0;
	float:left;
	}
#main li.sub_pic a:hover{
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
	}
#main #main_top{
	background:url("../../story/img/img_main_bg.png") no-repeat 0 0;
	width:676px;
	padding:20px 20px 0;
	}
#main #main_content{
	background:url("../../story/img/main_bg.png") repeat-y 0 0;
	padding:8px 20px 0;
	}
#main_content h2{
	padding-left:6px;
	margin-bottom:10px;
	padding-bottom:10px;
	background:url("../img/dot_w.png") repeat-x 0 bottom;
}

#main #main_content .story_inner .title{
	width:670px;
	background:url("../img/dot_w.png") repeat-x 0 26px;
	padding-left:6px;
	height:27px;
	margin-bottom:10px;
	}
#main #main_content .story_inner{
	display:inline-block;
	*display:inline;
	*zoom:1;
	}
#main #main_content .story_inner .l_box p.main_text{
	width:454px;
	padding-left:6px;
	margin-bottom:20px;
	}
#main #main_content .story_inner .l_box .lead{
	font-size:140%;
	font-weight:bold;
	width:454px;
	padding-left:6px;
	margin-bottom:6px;
	}
#main #main_content .l_box #charactor{
	display:inline-block;
	width:475px;
	}
#main #main_content .l_box #charactor .title{
	width:468px;
	background:url("../img/dot_w.png") repeat-x 0 26px;
	padding-left:6px;
	height:27px;
	margin-bottom:10px;
	}
#main #main_content .l_box #charactor .chara_box{
	width:140px;
	margin-bottom:16px;
	padding:0 6px 0;
	float:left;
	}
#main #main_content .l_box #charactor .chara_box img,
#main #main_content .l_box #charactor .chara_box p.name,
#main #main_content .l_box #charactor .chara_box p.text{
	margin-bottom:10px;
	}
#main #main_content .l_box #charactor .chara_box p.name,
#main #main_content .story_inner .r_box p.tameshiyomi{
	font-size:140%;
	font-weight:bold;
	}
#main #main_content .story_inner .r_box{
	width:180px;
	}
#main #main_content .story_inner .r_box .btn_tameshiyomi{
	margin-bottom:22px;
	}
#main #main_content .story_inner .r_box .box_comics{
	background:url("../../story/img/box_comics.png") no-repeat 0 0;
	height:119px;
	width:168px;
	margin-bottom:10px;
	padding:32px 6px 0;
	}
#main #main_content .story_inner .r_box .box_comics_long{
	background:url("../../story/img/box_comics_long.png") no-repeat 0 0;
	height:139px;
	width:168px;
	margin-bottom:10px;
	padding:32px 6px 0;
	}
#main #main_content .story_inner .r_box .box_comics .cover,
#main #main_content .story_inner .r_box .box_comics_long .cover{
	border:1px solid #ccc;
	margin-right:6px;
	}
#main #main_content .story_inner .r_box .box_comics a:hover .cover,
#main #main_content .story_inner .r_box .box_comics_long a:hover .cover{
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
	}
#main #main_content .story_inner .r_box .box_comics .box_text p.middle,
#main #main_content .story_inner .r_box .box_comics_long .box_text p.middle{
	margin:10px 0;
	}
#main_content .story_inner .r_box .btn{
	margin-bottom:6px;
	}
	

.list_inner{
	padding-bottom:30px;
}
#main .list_inner .list{
	float:left;
	width:208px;
	padding:0 15px 10px 0;
	}
#main .list_inner .list .pic{
	float:left;
	width:65px;
	padding-left:12px;
	}
#main .list_inner .list .pic a img{
	width: 55px;
	border:1px solid #cccccc;
	}
#main .list_inner .list .pic a:hover img{
	border:1px solid #ff3c7c;
	}
#main .list_inner .list .cap{
	margin-top:2px;
	font-weight:bold;
	}
	
#main .list_inner .list .name{
	margin-left:75px;
	}
	

#sub {
	position:relative;
	}
#sub .list_inner .name{
	font-size:10px;
	}
#sub #accordion .menu_head{
	width:236px;
	position: relative;
	cursor: pointer;
	}
#sub .list_inner .menu_body{
	display:none;
	}
#sub .list_inner .menu{
	background:url("../../story/img/slider_bg.png") no-repeat 0 0;
	height:31px;
	width:190px;
	padding:6px 6px 6px 40px;
	font-size:120%;
	}
#sub .list_inner .menu_anan{
	background:url("../../story/img/slider_bg04.png") no-repeat 0 0;
	height:31px;
	width:190px;
	padding:6px 6px 6px 40px;
	}
#sub .list_inner .menu_bottom{
	background:url("../../story/img/slider_bg03.png") no-repeat 0 0;
	height:31px;
	width:190px;
	padding:6px 6px 6px 40px;
	}
#sub .list_inner span.subttl{
	font-size:8px;
	line-height:1;
	}
#sub .list_inner .menu_papa{
	background:url("../../story/img/slider_bg02.png") no-repeat 0 0;
	height:43px;
	width:190px;
	padding:6px 6px 6px 40px;
	}
#sub .list_inner .menu_last{
	background:url("../../story/img/slider_bg.png") no-repeat 0 0;
	height:30px;
	width:190px;
	padding:6px 6px 6px 40px;
	}
#sub .list_inner .menu a,
#sub .list_inner .menu_bottom a,
#sub .list_inner .menu_papa a,
#sub .list_inner .menu_last a,
#sub .list_inner .menu_anan a
{
	display:block;
	}
#sub .btn_all{
	width:82px;
	height:20px;
	position:absolute;
	right:19px;
	top:18px;
	}	
#sub .list_inner{
	background:url("../../story/img/list_bg.png") repeat-y 0 0;
	width:236px;
	padding-bottom:0;
	}
#sub .list_inner .list{
	padding:3px 0;
	}
#sub .list_inner .list .pic{
	float:left;
	}
#sub .list_inner .list .pic a img{
	border:1px solid #808080;
	}
#sub .list_inner .list .pic a:hover img{
	border:1px solid #ff3c7c;
	}
#sub .list_inner .list .cap{
	float:right;
	width:135px;
	margin-top:2px;
	}
	
.sp_menu{
	display: none;
}	
	


@media screen and (max-width:767px) and (min-width: 1px){

	#main #main_top{
		width: auto;
		background: none;
		padding: 10px;
	}
	
	#main #main_content .story_inner{
		display: block;
		padding: 0 10px;
	}
	
	/* ストーリー */
	
	#main #main_content .story_inner .title{
		width: auto;
		padding-left: 0;
	}
	
	#main #main_content .story_inner .l_box p.main_text{
		width: auto;
		padding: 0;
	}
	
	/* 登場人物 */
	
	#main #main_content .l_box #charactor{
		display: block;
		width: auto;
	}
	
	#main #main_content .l_box #charactor .title{
		width: auto;
		padding-left: 0;
	}
	
	#main #main_content .l_box #charactor .chara_box{
		width: 28%;
		padding: 0;
		margin-right: 5%;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	
	#main #main_content .l_box #charactor .chara_box p img{
		max-width: 100%;
	}
	
	#main #main_content .story_inner .l_box .lead{
		width: auto;
		padding: 0;
	}
	
	
	#main #main_top img{
		max-width: 100%;
	}
	
	#main #main_content{
		padding: 0;
		background-image: none;
	}
	
	.head,
	.foot{
		display: none;
	}
	
	#main_content h2{
		padding: 10px;
	}
	
	#main{
		margin: 0 10px 10px;
		background-color: #fff;
		box-shadow: 0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
		border: 1px solid #d8d7d7;
		border-radius: 5px;
		overflow: hidden;
	}
	
	/**/
	
	#sub{
		padding: 0;
	}
	
	#sub > div{
		display: none;
	}
	
	#sub > div.sp_menu{
		display: block; 
		margin: 40px 10px;
		background-color: #fff;
		box-shadow: 0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
		border: 1px solid #d8d7d7;
		border-radius: 5px;
		overflow: hidden;
	}
	
	#sub p.title{
		display: block;
		padding-left: 20px;
		width: auto;
		height: 50px;
		line-height: 50px;
		font-size: 180%;
		background: #fff;
		border-bottom: 1px dotted #b2b2b2;
	}
	
	.btn_all{
		display: none;
	}
	
	
	/* コミックス */
	#main #main_content .story_inner .r_box{
		width: 260px;
	}
  
	#main #main_content .story_inner .r_box .box_comics_long,
	#main #main_content .story_inner .r_box .box_comics{
		width: 248px;
		height: 119px;
		background: url("../../story/img/box_comics_long_sp.png");
	}
	
	#main_content .story_inner .r_box .btn{
		text-align: center;
	}
	
	
	#main #main_content .story_inner .r_box p.btn_buy a{
		display: inline-block;
		background: url("../../common/img/btn_buy_big.png");
		background-size: contain;
		width: 142px;
		height: 33px;
	}
	
	#main #main_content .story_inner .r_box p.btn_buy a img{
		display: none;
	}
	
	#main #main_content .story_inner .r_box .btn_tameshiyomi a{
		display: block;
		background: url("../../common/img/btn_tameshiyomi_sp.png");
		background-size: contain;
		width: 260px;
		height: 62px;
	}
	#main #main_content .story_inner .r_box .btn_tameshiyomi img{
		display: none;
	}
		
	
  
	
	#sub > div.sp_menu ul li{
		padding-left: 40px;
		width: auto;
		height: 31px;
		line-height: 31px;
		background-color: #fff;
		background-image: url(../../comicnews/img/arrow.png);
		background-position: 25px center;
		border-bottom: 1px dotted #b2b2b2;
		font-size: 140%;
	}
	
	
	div.clearbox{
		display: none;
	}
	
	#main .list_inner .list{
		width: 50%;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	
	#main #main_content .story_inner .r_box{
		float: none;
		margin: 0 auto 20px;
	}
	
	#main_content div.l_box{
		float: none;
	}
	
	h1#title img{
		width: 173px;
	}
	

}