@charset "UTF-8";
/* ---------- common ---------- */
body{
	background: url("../img/bg.png") repeat;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-size:14px;
	color:#421300;
}
article{
	width:1200px;
	margin:0 auto;
}
a:hover{ opacity: 0.8; }

.sp{ display:none; }
.pc{ display:inline; }



/* ---------- header ---------- */
header{
	width:1200px;
	margin:0 auto;
	background: url("../img/bg_kv.png") no-repeat;
	position: relative;
}
header h1{
	display: inline-block;
	padding: 8px 0 0 110px;
}
header .mainCatch{
	display: inline-block;
	position:absolute;
	top:15px;
	right:40px;
}
header .subCatch{
	display: inline-block;
	position:absolute;
	top: 8px;
	right: 194px;
}

header .btnDasoku{
	display: inline-block;
	position:absolute;
	top: 681px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

header .mainCopy{
	display: block;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    padding: 720px 0 50px 0;
    text-shadow: 0 0 8px black, 0 0 8px black, 0 0 8px black, 0 0 8px black, 0 0 8px black;
}



/* ---------- article ---------- */
.backBg{
	position: fixed;
    background: url(../img/bg_contents.png) no-repeat;
    top: -50px;
    width: 1200px;
    height: 1950px;
    z-index: -10;
}

#coment{
    width: 980px;
    margin: 0 auto 55px;
    border: 1px solid #d9c060;
    background: url(../img/bg_waku_c.png) repeat-y #fff;
	background-size: 100%;
}
#coment .comentInner{
    position: relative;
	text-align: center;
	z-index: 1;
}
.comentInner:before{
	content:"";
	display:inline-block;
	background:url(../img/bg_waku_u.png) top center no-repeat;
	background-size:100%;
	width:100%;
	height:174px;
	position:absolute;
	top:0;
	left:0;
	z-index: -1;
}
.comentInner:after{
	content:"";
	display:inline-block;
	background:url(../img/bg_waku_d.png) bottom center no-repeat;
	background-size:100%;
	width:100%;
	height:174px;
	position:absolute;
	bottom:-0;
	left:0;
	z-index: -1;
}
.comentInner .titComent img{
	max-width: 744px;
}
.comentInner .comentTxtBox{}
.comentInner .comentTxtBox p{
	padding-top: 5px;
	font-size:18px;
	font-weight:600;
	line-height: 1.6;
}
.comentInner .comentTxtBox .sign{
    padding: 25px 0 45px;
}
.comentInner .comentTxtBox .sign img{
	max-width: 226px;
}


#novel{
    width: 980px;
    margin: 0 auto;
    border: 1px solid #d9c060;
    background: url(../img/bg_waku_c.png) repeat-y #fff;
	background-size: 100%;
}
#novel .novelInner{
    position: relative;
	text-align: center;
	z-index: 1;
	padding-bottom:58px;
}
#novel .novelInner .titNovel img{
	max-width: 650px;
}
.novelInner:before{
	content:"";
	display:inline-block;
	background:url(../img/bg_waku_u.png) top center no-repeat;
	background-size:100%;
	width:100%;
	height:174px;
	position:absolute;
	top:0;
	left:0;
	z-index: -1;
}
.novelInner:after{
	content:"";
	display:inline-block;
	background:url(../img/bg_waku_d.png) bottom center no-repeat;
	background-size:100%;
	width:100%;
	height:174px;
	position:absolute;
	bottom:0;
	left:0;
	z-index: -1;
}
.novelInner h3{
	background: linear-gradient(to right, rgba(0,0,0,0),rgba(217,192,96,1),rgba(0,0,0,0));
	font-size:28px;
	padding: 4px 110px;
    display: inline-block;
}
.novelInner .boxL{
    float: left;
}
.novelInner .boxR{
    float: right;
}
.novelInner .box26{
	margin: 35px auto 0;
    overflow: auto;
    width: 865px;
}
.novelInner .boxSB{
	margin: 0 auto;
	overflow:auto;
    width: 865px;
}

.novelInner .boxSB .shoei,
.novelInner .box26 .shoei{
    display: inline-block;
}
.novelInner .box26 .txtBox,
.novelInner .boxSB .txtBox{
    width: 586px;
    text-align: left;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
.txtBox .title{
    font-size: 22px;
    font-weight: 600;
    padding: 8px 0 16px;
}
.txtBox .author{
	line-height: 1.3;
    padding-bottom: 22px;
}
.txtBox .synopsis{
	border-top: 1px solid #d9c060;
	line-height: 1.4;
	padding-top:22px;
}
.novelInner .box26 .txtBox .synopsis{
	margin-bottom: 30px;
}
.novelInner .boxSB .txtBox .synopsis{
	margin-bottom: 11px;
}

.txtBox .btnDetail{
    width: 235px;
    height: 42px;
}
.novelInner .boxSB .txtBox .btnDetail{
	float: right;
}
.txtBox .btnDetail a{
	display: inline-block;
	font-size: 14px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
    background: url(../img/btn_bg_s.png) no-repeat;
    width: 235px;
    height: 42px;
    padding: 14px 0;
}

.novelInner .centerLine{
	margin:28px 0 ;
}

.kazariLine{
    text-align: center;
    margin: 25px 0;
}

#message{
	text-align: center;
}

#message .titMessage{}
#message .titMessage img{
	max-width: 540px;
}
#message h3{
	display: block;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    text-shadow: 0 0 8px black, 0 0 8px black, 0 0 8px black, 0 0 8px black, 0 0 8px black;
}
#message .tabBox{
    margin: 23px 0 30px;
}
#message .tabBox li{
    display: inline-block;
}
#message .tabBox li a{
    display: inline-block;
    background: #fff;
	border: 1px solid #d9c060;
    box-sizing: border-box;
}
#message .tabBox li a img{
	max-width: 238px;
}

#message .tabContents{}
#message .tabContents li{
	margin:0 auto 30px;
	width: 866px;
    background: #fff;
	border: 1px solid #d9c060;
    box-sizing: border-box;
    padding: 0 38px 18px;
}
#message .tabContents li .nameBox{
	background: url("../img/line_inner.png") no-repeat center,url("../img/line_03.png") no-repeat center;
    font-weight: 600;
	padding: 6px 0;
    margin-top: 15px;
}
#message .tabContents li .nameBox .name{
    font-size: 18px;
}
#message .tabContents li .nameBox .position{
    font-size: 12px;
    padding-top: 4px;
}
#message .tabContents li .works{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 12px;
	line-height: 1.2;
    border-bottom: 1px solid #d9c060;
    padding: 8px 0;
}
#message .tabContents li .txtBox{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    margin-top: 18px;
    line-height: 1.4;
}
#message .tabContents li .works + .txtBox{
    margin-top: 8px;
}


.btnBack{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    text-align: center;
	margin: 56px 0;
}
.btnBack a{
	display: inline-block;
	font-size: 14px;
    font-weight: 600;
    text-align: center;
	line-height: 1.2;
    box-sizing: border-box;
    background: url(../img/btn_bg_m.png) no-repeat;
    width: 377px;
    height: 64px;
    padding-top: 16px;
}


/* ---------- footer ---------- */
footer{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    text-align: center;
	font-size: 14px;
	line-height: 1.3;
	background:#fff;
    border-top: 2px solid #d9c060;
    padding: 15px 0 20px;
}
footer .MFbooks{
	display: inline-block;
    margin-bottom: 5px;
}
footer .copylight{
	padding: 0 5%;
}



/* 1024px以下 ※スマホ・タブレット用表示 */
@media screen and (max-width:1024px){
	.pc{ display:none; }
	.sp{ display:inline; }

	article{
		width: auto;
		margin: 0;
	}
	img{ width:100%; }

	header {}
	
	footer {}
}

/* スマホ縦向き用 */
@media screen and (max-width:640px){
	article{
		width:100%;
		}
	header{
		width:100%;
		background-size:100%;
		}
	header h1{
		padding: 1% 0 0 10%;
		width: 40%;
	}
	header .mainCatch{
		width: 17%;
		top: 1%;
		right: 1%;
	}
	header .subCatch{
		width: 24%;
		top: 1%;
		right: 15%;
	}
	header .btnDasoku{
		width: 90%;
		bottom: auto;
		top: 24%;
	}
	header .mainCopy{
		padding: 90% 0 20% 0;
		margin: 0 20px;
		font-size: 16px;
	}
		
	.backBg{
	    background-size:100%;
	    top: 0;
	    width: 100%;
	    height: 100%;
	}
	
	#coment{
		width: 90%;
	}
	.comentInner .comentTxtBox p{
		font-size: 16px;
	}
	.comentInner:before,
	.comentInner:after,
	.novelInner:before,
	.novelInner:after{
		height: 8%;
	}
	.comentInner .comentTxtBox{
		width: 85%;
		margin: 0 auto;
	}
	.comentInner .comentTxtBox .sign{
		padding-bottom:20px;
	}
	.comentInner .comentTxtBox .sign img{
		width: 70%;
	}

	#novel{
		width: 90%;
	}
	#novel .novelInner{
		padding-bottom: 40px;
	}
	.novelInner h3{
		padding: 4px 30px;
		font-size: 24px;
	}
	.novelInner .boxL,
	.novelInner .boxR{
		float: none;
	}
	.novelInner .box26,
	.novelInner .boxSB{
		width: 100%;
	}
	.novelInner .box26 .txtBox,
	.novelInner .boxSB .txtBox{
		width: 85%;
		margin:0 auto;
	}
	.txtBox .title{
		padding-top: 20px;
		line-height: 1.2;
	}
	.txtBox .author{
		padding-bottom: 13px;
	}
	.novelInner .box26 .txtBox .synopsis{
		padding-top: 13px;
	}
	.txtBox .btnDetail{
		margin: 0 auto;
	}
	.novelInner .centerLine{
		margin: 28px 5%;
	}
	.novelInner .boxSB .txtBox .btnDetail{
		float: none;
	}

	.kazariLine{
		margin: 25px 4%;
	}
	
	#message h3{
		margin: 0 5%;
	}
	#message .tabBox li{
		width: 44%;
		margin: 4px 2px;
	}
	#message .tabContents li{
		width: 90%;
		padding: 0 15px 18px;
	}
	#message .tabContents li .nameBox .position{
		font-size: 10px;
	}
	#message .tabContents li .txtBox{
		font-size: 12px;
		line-height: 1.5;
	}

	.btnBack a{
		width: 90%;
		background-size: 100%;
		padding: 3.5% 0;
	}



}