@charset "utf-8";

span.name-en{
	margin-left: 10px;
	color: #9b9b9b;
	font-weight: bold;	
}

/* コンテンツタイトル */
#main #content-area h2#content-ttl.special{
	background-image: url(../special/img/content_ttl.png);
	height: 170px;
	background-position: 45px 48px;
}

/* 見出しサブ */
#main #content-area h3{
	padding: 25px 25px 25px 45px;
}

/* 作家・作品 */
ul.product-area {
	overflow: hidden;
	padding-left: 25px;
	padding-bottom: 45px;
	min-height: 500px;
}

ul.product-area li.detail{
	width: 250px;
	height: 330px;
	border: 1px solid #dcdcdc;
	margin: 0 15px 15px 0;
	background: #ffffff;
	position: relative;
}

div.img-box div.detail {
	width: 100px;
	word-wrap:break-all;
}
	ul.product-area li.detail:hover{
		border: 1px solid #797979;
	}

	ul.product-area li.detail a{
		width: 250px;
		height: 330px;
		display: block;
	}
	

	ul.product-area li.detail a.popup{
		width: auto;
		height: auto;
	}

	ul.product-area li.detail a:hover{
		text-decoration: none;
		*cursor: pointer;
	}

	ul.product-area li.detail .icon-new {
		width: 54px;
		height: 54px;
		background: url(../img/common/icon_new.png) no-repeat;
		text-indent: -9999px;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	ul.product-area li.detail .icon-update {
		width: 54px;
		height: 54px;
		background: url(../img/common/icon_update.png) no-repeat;
		text-indent: -9999px;
		position: absolute;
		left: 0;
		top: 0;
	}
	

	ul.product-area li.detail .inner{
		overflow: hidden;
	}

	ul.product-area li.detail .inner .txt-box{
		width: 205px;
		margin: 16px auto 0;
	}
		ul.product-area li.detail .inner .txt-box .ttl{
			font-size: 14px;
			font-weight: bold;
			line-height: 1.3;
		}
			ul.product-area li.detail .inner .txt-box .ttl .font-s{
				font-size: 13px;
				display: block;
				font-weight: inherit;
			}

		ul.product-area li.detail .inner .txt-box .name{
			color: #9b9b9b;
			font-size: 12px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		ul.product-area li.detail .inner .txt-box .lead{
			font-size: 11px;
		}

	ul.product-area li.detail .border{
		width: 252px;
	}


/* サブページ ===================================================*/

/* リンクのブロック要素リセット */
a.a_reset {
	display: inline !important;;

}

/* youtubeの可変 */
div.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
div.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* コンテンツタイトル */
#main #content-area div#subpage h2#content-ttl{	height: 260px; }
/* sp01 */
#main #content-area div#subpage h2#content-ttl.sp-01{	background-image: url(../special/img/01/content_ttl.png);}
/* sp180001 */
#main #content-area div#subpage h2#content-ttl.sp-180001{	background-image: url(../special/img/180001/content_ttl.png);}
/* sp180027 */
#main #content-area div#subpage h2#content-ttl.sp-180027{	background-image: url(../special/img/180027/content_ttl.png);}
/* sp180028 */
#main #content-area div#subpage h2#content-ttl.sp-180028{	background-image: url(../special/img/180028/content_ttl.png);}
/* sp180008 */
#main #content-area div#subpage h2#content-ttl.sp-180008{	background-image: url(../special/img/180008/content_ttl.png);}
/* sp180041 */
#main #content-area div#subpage h2#content-ttl.sp-180041{	background-image: url(../special/img/180041/content_ttl.png);}
/* sp180065 */
#main #content-area div#subpage h2#content-ttl.sp-180065{	background-image: url(../special/img/180065/content_ttl.png);}
/* sp180050 */
#main #content-area div#subpage h2#content-ttl.sp-180050{	background-image: url(../special/img/180050/content_ttl.png);}
/* sp180104 */
#main #content-area div#subpage h2#content-ttl.sp-180104{ background-image: url(../special/img/180104/content_ttl.png);}
/* sp180147 */
#main #content-area div#subpage h2#content-ttl.sp-180147{ background-image: url(../special/img/180147/content_ttl.png);}
/* sp180147 */
#main #content-area div#subpage h2#content-ttl.sp-180124{ background-image: url(../special/img/180124/content_ttl.png);}
/* sp180130 */
#main #content-area div#subpage h2#content-ttl.sp-180130{ background-image: url(../special/img/180130/content_ttl.png);}
/* sp180163 */
#main #content-area div#subpage h2#content-ttl.sp-180163{ background-image: url(../special/img/180163/content_ttl.png);}

/* 背景画像 */
#main #content-area div#subpage>.wrapper{	padding-top: 23px;}
/* レアリア */
#main #content-area div#subpage.realiaBg>.wrapper{	background: url(../special/img/180001/realia_bgr.jpg);}

/* コンテンツ */
div#subpage ul.product-aimg {
	overflow: hidden;
	padding-left: 25px;
	margin-bottom: 45px;
}

div#subpage ul.product-area li.detail{
	width: 500px;
	height: auto;
	border: 1px solid #dcdcdc;
	margin: 0 15px 15px 0;
	background: #ffffff;
	position: relative;
}

	div#subpage ul.product-area li.detail .inner{	overflow: hidden;}

/* 各エリア */
div#subpage ul.product-area li.detail .inner.mainvisual{
	height: 712px;
	border: none;
}



div#subpage ul.product-area li.detail .inner h4#ttl-base{background-position: 16px center;}
div#subpage ul.product-area li.detail .inner h4#ttl-base.ttl-chara{background-image: url(../special/img/sub_detail_ttl_chara.png);}
div#subpage ul.product-area li.detail .inner h4#ttl-base.ttl-story{background-image: url(../special/img/sub_detail_ttl_story.png);}
div#subpage ul.product-area li.detail .inner h4#ttl-base.ttl-charm{background-image: url(../special/img/sub_detail_ttl_charm.png);}
div#subpage ul.product-area li.detail .inner h4#ttl-base.ttl-intro{background-image: url(../special/img/sub_detail_ttl_intro.png);}
div#subpage ul.product-area li.detail .inner h4#ttl-base.ttl-comment{background-image: url(../special/img/180065/sub_detail_ttl_comment.png);}
div#subpage ul.product-area li.detail .inner h4#ttl-base.ttl-diagram{background-image: url(../special/img/sub_detail_ttl_diagram.png);}
div#subpage ul.product-area li.detail .inner h4#ttl-base.ttl-summary{background-image: url(../special/img/sub_detail_ttl_summary.png);}

/* レアリアのみ */
div#subpage ul.product-area li.detail .inner h4#ttl-base.ttl-wold{background-image: url(../special/img/180001/sub_detail_ttl_wold.png);}



		div#subpage ul.product-area li.detail .inner .content-box{
			width: 450px;
			margin: 25px auto 25px;
			font-size: 11px;
			overflow: hidden;
		}

		div#subpage ul.product-area li.detail .inner .bannerBox{
	height: 240px;
		}
	

		div#subpage ul.product-area li.detail .inner .content-box .font-b{
			font-weight: bold;
			font-size: 12px;
			margin-bottom: 5px;
		}

.font-large{
			font-weight: bold;
			font-size: 29px;
			margin-bottom: 5px;
			letter-spacing: 0.2em;
		}
	
		div#subpage ul.product-area li.detail .inner .txt-box{
			width: auto;
			margin: 0;
		}

	/* 登場人物 */
	div#subpage ul.product-area li.detail .inner .content-box.chara ul li {
		display: block;
		overflow: hidden;
		height: 155px;
		margin-bottom: 15px;
	}
		div#subpage ul.product-area li.detail .inner .content-box.chara ul li.end{
			margin-bottom: 0;
		}

		div#subpage ul.product-area li.detail .inner .content-box.chara ul li .img-box{
			float: left;
			margin-right: 10px;
		}
			div#subpage ul.product-area li.detail .inner .content-box.chara ul li .img-box img{
				border: 1px solid #dcdcdc;
			}

		div#subpage ul.product-area li.detail .inner .content-box.chara ul li .txt-box{
			float: right;
			width: 283px;
		}

	div#subpage ul.product-area li.detail .inner .content-box.chara ul li.no-img {
		height: auto;
		width: 100%;
	}

		div#subpage ul.product-area li.detail .inner .content-box.chara ul li.no-img .txt-box{
			float: none;
			width: 100%;
		}
		
	/* レアリア（相関図） */
div#subpage.realia ul.product-area li.detail div.diagram {
	overflow: hidden;
	height: 710px;
}
div#subpage.realia ul.product-area li.detail div.diagram img {
	width: 450px;
}


	/* 登場人物（レアリア） */
	li#realia-chara-box {
		height: 2560px !important;
		display: block;
	}
	


		div#subpage.realia ul.product-area li.detail .inner .content-box.chara ul li{
			height: auto;
			width: 140px;
			float: left;
			margin-right: 15px;
		}
			div#subpage.realia ul.product-area li.detail .inner .content-box.chara ul li.end{
				margin-right: 0 !important;
			}

		div#subpage.realia ul.product-area li.detail .inner .content-box.chara ul li.no-img {
			height: auto;
			width: 100%;
		}

			div#subpage.realia ul.product-area li.detail .inner .content-box.chara ul li.no-img .txt-box{
				float: none;
				width: 100%;
			}

		div#subpage.realia ul.product-area li.detail .inner .content-box.chara ul li .img-box{
			float: left;
			margin-bottom: 5px;
			margin-right: 0;
		}

		div#subpage.realia ul.product-area li.detail .inner .content-box.chara ul li .img-box img{
			width: 120px;
		}

		div#subpage.realia ul.product-area li.detail .inner .content-box.chara ul li .txt-box{
			clear: both;
			width: auto;
			*clear: none;
		}

		div#subpage.realia ul.product-area li.detail .inner .content-box.chara span.name-en{
			display: block !important;
			margin: 0 !important;
		}
		li.end{

}

	/* 登場人物 高さ（謎解き乙女） */
	li#nazotoki-chara-box {
		height: 1200px !important;
		display: block;
	}
	
	/* 登場人物　高さ（天久鷹央の推理カルテ） */
	li#ameku-chara-box {
		height: 1200px !important;
		display: block;
	}
	
/* 登場人物 高さ（ケーキ王子） */
	li#180050-chara-box {
		height: 500px !important;
		display: block;
	}

/* あらすじ 高さ（ケーキ王子） */
	div#180050-summary {
		background-color:#F00;
		height:2000px !important;
		display: block;
	}
	
	
	/* Twitter */
	li#Twitter-box {
		height: 500px !important;
		display: block;
	}


	/* 告知 */
	div#subpage ul.product-area li.detail .inner .content-box.promo .txt-box{
		width: 350px;
		float: left;
		margin-right: 10px;
	}

	/* 物語 */
	div#subpage ul.product-area li.detail .inner .content-box.story .img-box{
		float: left;
		margin-right: 15px;
	}

		div#subpage ul.product-area li.detail .inner .content-box.story .img-box .ttl{
			display: block;
			margin-top: 5px;
			font-size: 10px;
		}

		div#subpage ul.product-area li.detail .inner .content-box.story .btn-area{
			margin-top: 7px;
		}

		div#subpage ul.product-area li.detail .inner .content-box.story a.btn-detail{
			margin-bottom: 5px;
		}

		div#subpage ul.product-area li.detail .inner .content-box.story a.btn-detail,
		div#subpage ul.product-area li.detail .inner .content-box.story a.btn-buy{
			width: 100px;
			height: 25px;
			background: #000000;
			color: #ffffff;
			line-height: 27px;
			text-align: center;
			border-radius: 3px;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
		}

		div#subpage ul.product-area li.detail .inner .content-box.story a.btn-detail:hover,
		div#subpage ul.product-area li.detail .inner .content-box.story a.btn-buy:hover{
			background: #cccccc;
			color: #000000;
		}

	div#subpage ul.product-area li.detail .inner .content-box.story .txt-box{
		width: 330px;
		float: left;
	}

	div#subpage ul.product-area li.detail .inner .content-box.story ul{
		margin-bottom: 25px;
		height: 177px;
		overflow: hidden;
	}
		div#subpage ul.product-area li.detail .inner .content-box.story ul li{
			width: 100px;
			float: left;
			margin-right: 16px;
		}
			div#subpage ul.product-area li.detail .inner .content-box.story ul li.end{
				margin-right: 0px;
			}
			div#subpage ul.product-area li.detail .inner .content-box.story ul li img{
				margin-bottom: 5px;
			}
			div#subpage ul.product-area li.detail .inner .content-box.story ul li p.ttl{
				font-size: 10px;
			}

		ul.product-area li.detail .inner .content-box.story .txt-box{
			/* 作品が複数の場合はコメントアウトを外す */
			/*clear: both;*/	
		}



	/* 著者紹介 */
	div#subpage ul.product-area li.detail .inner .content-box.intro .img-box{
		float: left;
		margin-right: 15px;
	}

	div#subpage ul.product-area li.detail .inner .content-box.intro .txt-box{
		width: 330px;
		float: left;
	}
		div#subpage ul.product-area li.detail .inner .content-box.intro .txt-box p{
			margin-bottom: 10px;
		}

	div#subpage ul.product-area li.detail .inner .content-box.intro .txt-box .btn-interview a{
		height: 36px;
		width: 100%;
		display: block;
		background: url(../img/common/arrow_02.png) no-repeat #000000;
		background-position: 305px center;
		color: #ffffff;
		text-align: center;
		line-height: 36px;
		font-size: 15px;
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;

		/*display: none;*/
	}
		div#subpage ul.product-area li.detail .inner .content-box.intro .txt-box .btn-interview a:hover{
			text-decoration: none;
			background: url(../img/common/arrow_01.png) no-repeat #cccccc;
			background-position: 305px center;
			color: #000000;
		}

div#subpage ul.product-area li.detail .border{
	width: 502px;
}


/* スマホ用 ============================================================ */
@media (max-width: 1024px) {
/* コンテンツタイトル */
#main #content-area h2#content-ttl.special{
	height: auto;
}

#main #content-area .wrapper{
	padding: 0 15px;
}
	#main #content-area .wrapper ul{
		padding: 0;
		min-height: 0;
	}
	#main #content-area .wrapper ul li{
		display: block;
		box-sizing: border-box;
		-webkit-box-sizing:border-box;
		width: 100%;
		padding: 15px;
		margin: 0 0 15px 0;
		height: auto;
	}
	ul.product-area li.detail a{
		width: 100%;	
		height: auto;
	}

#main #content-area .wrapper ul li .img-box{
	float: left;
	width: 118px;
	height: 168px;
	overflow: hidden;
	margin-right: 15px;
}
	#main #content-area .wrapper ul li .img-box > img{
		height: 100%;
	}
		.img-box.sp000 img {margin-left: -115px;}
		.img-box.sp001 img {margin-left: -74px;}
		.img-box.sp002 img {margin-left: -45px;}


ul.product-area li.detail .inner .txt-box{
	margin: 0;
	width: auto;	
}

.font-large{
			font-weight: bold;
			font-size: 22px;
			margin-bottom: 5px;
		}

/* サブページ ============================================================ */
#main #content-area #subpage .wrapper{
	padding: 15px;
}

#main #content-area div#subpage h2#content-ttl{
	height: auto;
	margin: 0;
}

#main #content-area div#subpage h2#content-ttl .wrapper{
	padding: 0 !important;	
}

#main #content-area div#subpage h2#content-ttl .wrapper{
	margin-bottom: 15px !important;
	display: table-cell;
	vertical-align: middle;
}
	#main #content-area div#subpage h2#content-ttl .ttl{
		line-height: 1.2;
	}
	#main #content-area div#subpage h2#content-ttl .name{
		font-size: 150%;
	}

#main #content-area #subpage .wrapper ul li{
	padding: 0;
}

/* 作家・作品  */
div#subpage ul.product-area li.detail{
	border: none;
}

	div#subpage ul.product-area li.detail .inner{
		border: 1px solid #dcdcdc;
	}

	div#subpage ul.product-area li.detail .inner h4#ttl-base{
		border-top: none;
	}

	div#subpage ul.product-area li.detail .inner .content-box{
		width: auto !important;
		padding: 15px;
		margin: 0;
	}

	/* 各エリア ==============*/
	/* メインビジュアル */
	div#subpage ul.product-area li.detail.mb-area{
		text-align: center;
	}
	div#subpage ul.product-area li.detail .inner.mainvisual,img#img-summary{
		height: auto;
	}

	div#subpage ul.product-area li.detail .inner.mainvisual img,img#img-summary{
		width: 100%;
	}



/* 告知バナー携帯 */
		div#subpage ul.product-area li.detail .inner .bannerBox{
	height: 170px;
		}

	/* 登場人物 */
	div#subpage .content-box.chara li{
		margin: 0 !important;
	}
	
		div#subpage .content-box.chara .img-box{
			width: 50px !important;
			height: 50px !important;
			margin-bottom: 15px;
			float: left;
			border: 1px solid #dcdcdc;
		}
			div#subpage .content-box.chara .img-box img{
				margin: 0 !important;
				border: none !important;
			}

		div#subpage .content-box.chara .txt-box{
			margin-bottom: 15px !important;
			width: auto !important;
			float: none !important;
			margin-left: 65px !important;
		}

		div#subpage .content-box.chara ul li.no-img .txt-box{
			margin-left: 0 !important;
		}

	/* 登場人物（レアリア） */
	div#subpage.realia li.detail.grid.chara{
		height: auto !important;
	}

		div#subpage.realia ul.product-area li.detail .inner .content-box.chara ul li{
			height: auto;
			width: 140px;
			float: left;
			margin-right: 15px;
		}
			div#subpage.realia ul.product-area li.detail .inner .content-box.chara ul li.end{
				margin-right: 0 !important;
			}

		div#subpage.realia ul.product-area li.detail .inner .content-box.chara ul li .img-box{
			width: 110px !important;
			height: 210px !important;
			margin-bottom: 15px;
		}

		div#subpage.realia ul.product-area li.detail .inner .content-box.chara ul li .txt-box{
			clear: none;
			margin-left: 0 !important;
		}

		div#subpage.realia ul.product-area li.detail .inner .content-box.chara span.name-en{
			display: block !important;
			margin: 0 !important;
		}

	/* 告知 */
	div#subpage .content-box.promo{
		min-height: 115px;
	}
	
		div#subpage .content-box.promo .img-box{
			width: 88px !important;
			height: 115px !important;
			position: absolute;
			top: 16px;
			left: 16px;
		}
			div#subpage .content-box.promo .img-box img{
				margin: 0 !important;
			}
	
		div#subpage .content-box.promo .txt-box{
			width: auto !important;
			margin: 0 0 0 105px !important;
			float: none !important;
		}

	/* 物語 */
	div#subpage .content-box.story .img-box{
		width: 100px !important;	
		height: auto !important;
		margin-bottom: 15px;
	}
		div#subpage .content-box.story .img-box img{
			margin: 0 !important;
		}
	
	div#subpage .content-box.story .txt-box{
		width: auto !important;
		margin: 0 0 0 115px !important;
		float: none !important;
		clear: none;
	}
	
	div#subpage .content-box.story ul{
		width: 215px;
		margin: 15px auto 15px !important;
	}
		div#subpage .content-box.story ul li{
			width: 100px !important;
			margin-right: 15px !important;
			margin: 0 15px 15px	 0 !important;
		}
	
		div#subpage .content-box.story ul li:nth-child(even){
			margin: 0 0 15px 0 !important;
		}
	
	/* 著者紹介 */
	div#subpage .content-box.intro{
		position: relative;
		min-height: 135px;  	
	}
	
	div#subpage .content-box.intro .img-box{
		width: 91px !important;	
		height: 134px !important;
		margin-bottom: 15px;
	}
		div#subpage .content-box.intro .img-box img{
			margin: 0 !important;
		}
	
	div#subpage .content-box.intro .txt-box{
		width: auto !important;
		margin: 0 0 0 106px !important;
		float: none !important;
	}
	
	div#subpage .content-box.intro .btn-interview a{
		background: none !important;
		background: #000000 !important;
		position: relative;
	}
		div#subpage .content-box.intro .btn-interview a:after{
			content: "";
			width: 12px;
			height: 12px;
			background: url(../img/common/arrow_02.png) no-repeat;
			position: absolute;
			top: 50%;
			margin-top: -6px;
			right: 15px;
		}
		div#subpage .content-box.intro .btn-interview a:hover{
			text-decoration: none !important;
			background: #cccccc !important;
			background-position: 225px center !important;
			color: #000000 !important;
		}


}ttl-comment