@charset "UTF-8";

.ttl_top{
	width: 100%;
	margin: 0 0 30px;
}

	@media screen and (max-width: 1170px){
		.ttl_top{
			margin: 20px 0 0;
		}
	}

#special-column{
	margin: 0 0 50px;
}

.celeb .mainttl{
	margin: 0 0 -30px;
}

.recommend{
	text-align: center;
	margin: 0 0 40px 0;
}
	@media screen and (max-width: 1170px){
		.recommend {
			margin: 0 0 20px;
		}

		.recommend img{
			width: 100%;
		}
	}

ul.btn_box{
	overflow: hidden;
	margin: 0 0 45px;
	font-size: 0;
	text-align: center;
}

ul.btn_box li{
	width: 170px;
	margin: 0 30px 0 0;
	display: inline-block;
}

ul.btn_box li:last-child{
	margin: 0;
}

ul.btn_box li a{
	height: 54px;
	display: block;
	text-align: center;
	line-height: 55px;
	font-size: 1.7rem;
	color: #fff;
	border-radius: 4px;
}

ul.btn_box li a{
	text-decoration: none;
}

ul.btn_box li:nth-child(1) a{
	background: #ffca28;
	color: #111;
}

ul.btn_box li:nth-child(2) a{
	background: #006ed5;
}

ul.btn_box li:nth-child(3) a{
	background: #ef4348;
	margin: 0;
}

#character dl:last-child dd{
	margin-bottom: 0;
}

#character dl dd p.name{
	margin: 0 0 10px;
}

#character dl dd p.serif.man,
#character dl dd p.serif.woman{
	font-size: 1.6rem;
	font-weight: 600;
	margin: 0 0 10px;
	line-height: 1.5;
}

#character dl dd p.serif.man{
	color: #2b4283;
}

#character dl dd p.serif.woman{
	color: #ef4348;
}

.book_box{
	margin: 0 0 30px;
}

.book_box img{
	display: block;
	width: 160px;
	margin: 0 auto 20px;
}

.book_box a{
	width: 270px;
	height: 45px;
	display: block;
	margin: 0 auto;
	background: #006ed5;
	color: #fff;
	text-align: center;
	line-height: 45px;
	border-radius: 4px;
	font-size: 1.7rem;
}

.book_box a:hover{
	text-decoration: none;
}

@media screen and (max-width: 1170px){
	#special-left .mainttl{
		margin: 10px 0 30px;
	}

	#special-column.celeb #special-left .mainttl{
		margin: 0;
	}

	ul.btn_box li{
		width: 31.0%;
		margin: 0 3.5% 0 0;
	}

	.happy ul.btn_box li{
		width: 48.0%;
		margin: 0 4% 0 0;
	}

	.happy ul.btn_box li:last-child{
		margin: 0;
	}
}

@media screen and (max-width: 640px){
	ul.btn_box{
		margin: 0 0 25px;
	}

	ul.btn_box li{
		width: 100%;
		margin: 0 0 10px;
	}



	#comic .txt_box{
		margin: 0;
	}

	#comic .txt_box .lead br{
		display: none;
	}
}

#comic{
	margin: 70px 0 40px;
}

#comic .ttl{
	font-size: 2.6rem;
	line-height: 1.2;
	margin: 0 0 28px;
}

#comic .ttl span{
	display: block;
	font-size: 3.5rem;
	color: #ec4362;
	font-weight: bold;
}

#comic .detail {
	overflow: hidden;
	margin: 0 0 25px;
}


@media screen and (max-width: 1170px){
	#comic .detail .img_box {
		margin: 0 auto;
		text-align: center;
	}
}

#comic .detail .img_box img.book{
	margin: 0 0 20px;
}

#comic .detail .img_box img.logo_maou{
	vertical-align: middle;
}

#comic .detail .img_box .btn_maou{
	width: 100%;
	height: 50px;
	display: block;
	background: #e1222a;
	color: #fff;
	text-align: center;
	line-height: 50px;
	font-size: 1.5rem;
	border-radius: 35px;
	position: relative;
}
	@media screen and (max-width: 640px){
		#comic .detail .img_box .btn_maou{
			font-size: 1.5rem;
			padding: 0 15px;
			text-align: center;
			line-height: 1.4;
			height: 105px;
			padding: 17px 0 0;
			border-radius: 60px;
			box-sizing: border-box;
			-webkit-box-sizing:border-box;
		}

		#comic .detail .img_box .btn_maou img{
			width: 100px;

		}
	}

#comic .detail .img_box .btn_maou:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 9.5px 10px 9.5px;
	border-color: transparent transparent #e1222c transparent;
	position: absolute;
	left: 110px;
	top: -10px;
}
	@media screen and (max-width: 1170px){
		#comic .detail .img_box .btn_maou:after{
			left: 50%;
			margin: 0 0 -8px;
		}
	}

#comic .detail .img_box .btn_maou:hover{
	text-decoration: none;
}

#comic .detail .img_box .btn_maou br{
	display: none;
}
	@media screen and (max-width: 640px){
		#comic .detail .img_box .btn_maou br{
			display: block;
		}
	}

#comic .detail .txt_box {
	margin: 0 0 0 260px;
	position: absolute;
}
	@media screen and (max-width: 1170px){
		#comic .detail .txt_box {
			margin: 0 0 30px;
			position: static;
		}
	}

#comic .detail .txt_box .credit{
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.5;
	margin: 0 0 20px;
}

#comic .detail .txt_box .credit span{
	display: block;
	border: 1px solid #000;
	margin: 0 0 7px;
	width: 120px;
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.8;
}

#comic .detail a.btn_read{
	width: 100%;
	height: 54px;
	display: block;
	background: #006ed5;
	margin: 20px 0 0;
	color: #fff;
	text-align: center;
	line-height: 54px;
	font-size: 1.6rem;
	border-radius: 4px;
}

#comic .detail a.btn_read.sma{
	display: none;
}
	@media screen and (max-width: 1170px){
		#comic .detail a.btn_read.pc{
			display: none;
		}

		#comic .detail a.btn_read.sma{
			display: block;
		}
	}

#comic .detail a.btn_read:hover{
	text-decoration: none;
}

#comic a.btn_check{
	width: 100%;
	height: 82px;
	display: block;
	border-radius: 4px;
	text-align: center;
	line-height: 82px;
	color: #fff;
	text-align: center;
	font-size: 2.4rem;
	padding: 0 0 0 130px;
	border-radius: 4px;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	background: url(../images/sp22/comic/img_btn_check.jpg) no-repeat 10px 9px #48b70c;
}

#comic a.btn_check br{
	display: none;
}

	@media screen and (max-width: 1170px){
		#comic a.btn_check{
			font-size: 2.0rem;
			padding: 0 15px 0 120px;
			background: url(../images/sp22/comic/img_btn_check.jpg) no-repeat 16px 18px #48b70c;
			background-size: 90px 45px;
		}

		#comic a.btn_check br{
			display: none;
		}
	}

	@media screen and (max-width: 640px){
		#comic a.btn_check{
			line-height: 1.4;
			padding: 20px 15px 0 120px;
			font-size: 1.5rem;
		}

		#comic a.btn_check br{
			display: block;
		}
	}

#comic a.btn_check:hover{
	text-decoration: none;
}