@import url(//use.fontawesome.com/releases/v5.0.6/css/all.css);
@import url(//fonts.googleapis.com/earlyaccess/sawarabimincho.css);


html {font-size:62.5%;}
body {
	font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
	background:url(../images/bg_pattern.png) center top repeat-x #000 fixed;
	font-size:1rem;
	color:#fff;
	box-sizing:border-box;
}
@media screen and (min-width: 641px) {
/* PC用のスタイル記述 */
main {
	width:1080px;
	margin:0 auto;
	font-size:1.2rem;
	line-height:1.6;
}
header {display:none;}


/* Hタグ */
h2{
	font-size:2.2rem;
	font-weight:bold;
	color:#ed1084;
}
h2::before {content:"■";}


.detail{
	overflow:hidden;
	width:1080px;
	margin:0 0 12px;
	padding:20px 0;
	font-size:1.7rem;
	line-height:1.7;
}
.detail .Img{
	float:left;
	width:400px;
	margin-right:20px;
}
.detail .Img img {width:100%;}
.detail .Txt{
	float:left;
	width:660px;
}
.detail .Catch{
	margin-bottom:20px;
	font-size:3rem;
	font-weight:bold;
	color:#ed1084;
	line-height:1.2;
	border-bottom:2px solid #ed1084;
}
.detail .Name{
	background:#ed1084;
	margin-bottom:10px;
	padding:5px 8px;
	font-size:3.2rem;
	font-weight:bold;
	color:#fff;
	line-height:1.2;
}


/* 出典画像 */
.detail + ul{
	overflow:hidden;
	width:100%;
	list-style:none;
}
.detail + ul li{
	float:left;
	width:calc(100% / 3 - 20px);
	margin:0 10px 20px;
}
.detail + ul li img{
	width:100%;
	border:1px solid #262626;
}
.detail + ul li p {font-size:1.4rem;}


/* 既刊コミックス */
#kikan ul{
	overflow:hidden;
	margin-bottom:60px;
	padding:12px 0;
	list-style:none;
}
#kikan li{
	float:left;
	width:calc(100% / 3 - 20px);
	margin:0 10px;
}
#kikan .Tit{
	background:#ed1084;
	margin-bottom:6px;
	padding:6px 0;
	font-size:1.8rem;
	font-weight:bold;
	color:#fff;
	text-align:center;
}
.kikanBox {overflow:hidden;}
.kikanBox .kikanImg{
	float:left;
	width:180px;
	margin-right:10px;
}
.kikanBox .kikanImg img {width:100%;}
.kikanBox .kikanSummary{
	float:left;
	width:149px;
	font-size:1.4rem;
	line-height:1.4;
}
#kikan li .buyBtn{
	width:100%;
	margin:6px 0;
	text-align:center;
}
#kikan li .buyBtn a{
	display:block;
	background:#262626;
	padding:6px 0;
	font-size:1.7rem;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	border:1px solid #fff;
	transition:0.7s;
}
#kikan li .buyBtn a:hover{
	background:#fff;
	color:#262626;
	border:1px solid #262626;
	border-radius:8px;
}


/* Twitter */
#twitter p{
	width:600px;
	margin:0 auto 20px;
	font-size:2.5rem;
	font-weight:bold;
	text-align:center;
}
#twitter p a{
	display:block;
	background:#262626;
	padding:6px 0;
	color:#fff;
	text-decoration:none;
	border:2px solid #262626;
	transition:0.7s;
}
#twitter p a:hover{
	background:#fff;
	color:#262626;
	border-radius:8px;
}
#twitter p a::before{
	content:"Twitter";
	margin-right:8px;
}
#twitter p a::after{
	font-family:"Font Awesome 5 Free";
	content:"\f101";
	margin-left:8px;
}

footer {
	width:1080px;
	padding:20px 0;
}
}


@media screen and (max-width: 640px) {
/* スマートフォン用のスタイル記述 */

main {
	width:70%;
	margin:0 auto;
	line-height:1.6;
}
header {display:none;}


/* Hタグ */
h2{
	font-size:1.6rem;
	font-weight:bold;
	color:#ed1084;
}
h2::before {content:"■";}


.detail{
	overflow:hidden;
	width:90%;
	margin:0 auto 12px;
	padding:20px 0;
	font-size:1.4rem;
	line-height:1.5;
}
.detail .Img{
	width:80%;
	margin:0 auto 6px;
	text-align:center;
}
.detail .Img img {width:100%;}
.detail .Txt {width:100%;}
.detail .Catch{
	margin-bottom:20px;
	font-size:1.4rem;
	font-weight:bold;
	color:#ed1084;
	line-height:1.2;
	border-bottom:2px solid #ed1084;
}
.detail .Name{
	background:#ed1084;
	margin-bottom:10px;
	padding:5px 8px;
	font-size:1.5rem;
	font-weight:bold;
	color:#fff;
	line-height:1.2;
}


/* 出典画像 */
.detail + ul{
	overflow:hidden;
	width:100%;
	list-style:none;
}
.detail + ul li{
	width:80%;
	margin:0 auto 20px;
}
.detail + ul li img{
	width:100%;
	border:1px solid #262626;
}
.detail + ul li p {font-size:1.2rem;}


/* 既刊コミックス */
#kikan ul{
	overflow:hidden;
	margin-bottom:14px;
	padding:12px 0;
	list-style:none;
}
#kikan li{
	width:90%;
	margin:0 auto;
}
#kikan .Tit{
	background:#ed1084;
	margin-bottom:6px;
	padding:6px 0;
	font-size:1.3rem;
	font-weight:bold;
	color:#fff;
	text-align:center;
}
.kikanBox {overflow:hidden;}
.kikanBox .kikanImg{
	width:180px;
	margin:0 auto 6px;
}
.kikanBox .kikanImg img {width:100%;}
.kikanBox .kikanSummary{
	width:100%;
	line-height:1.4;
}
#kikan li .buyBtn{
	width:100%;
	margin:6px 0 40px;
	text-align:center;
}
#kikan li .buyBtn a{
	display:block;
	background:#262626;
	padding:6px 0;
	font-size:1.7rem;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	border:1px solid #fff;
	transition:0.7s;
}


/* Twitter */
#twitter p{
	width:90%;
	margin:0 auto 20px;
	font-size:1.6rem;
	font-weight:bold;
	text-align:center;
}
#twitter p a{
	display:block;
	background:#262626;
	padding:6px 0;
	color:#fff;
	text-decoration:none;
	border:2px solid #262626;
	transition:0.7s;
}
#twitter p a:hover{
	background:#fff;
	color:#262626;
	border-radius:8px;
}
#twitter p a::before{
	content:"Twitter";
	margin-right:8px;
}
#twitter p a::after{
	font-family:"Font Awesome 5 Free";
	content:"\f101";
	margin-left:8px;
}

footer {
	width:1080px;
	padding:0;
}

}