@charset "utf-8";

/*-----------------------------------------------
 #content
-----------------------------------------------*/

#content{
	padding-top: 15px;
}

div#main{
	width: 660px;
}

#content h1{
	margin-bottom: 20px;
	line-height: 0;
}

#content h2{
	margin-bottom: 10px;
	padding-left: 15px;
	font-size: 16px;
	color: #ff3d6e;
	background-image: url(../img/icon/icon-left_border.png);
	background-position: left bottom;
	background-repeat: repeat-y;
	background-size: 4px auto; 
}

@media screen and (max-width:767px) and (min-width: 1px){
	
	#content{
		padding-top: 0;
	}
	
	div#main{
		width: auto;
	}
	
	#content h1{
		margin: 0 -10px 20px;
	}

	#content h1 img{
		width: 100%;
	}
	
}

/*-----------------------------------------------
   今月号
-----------------------------------------------*/

div.column-now{
	margin-bottom: 20px;
}

div.column-now div.cover{
	float: left;
	width: 196px;
	margin: 0 15px 40px 30px;
	line-height: 0;
}

div.column-now div.cover img{
	width: 194px;
	border: 1px solid #000;
}

div.column-now div.detail{
	float: right;
	width: 419px;
}

div.column-now div.box div.noimage{
	float: none;
	width: 100%;
}
div.column-now div.cover-detail p.title{
	font-weight: bold;
	font-size: 24px;
}

div.column-now div.cover-detail p.title span{
	font-size: 18px;
}

div.column-now div.cover-detail p.subtitle{
	margin-bottom: 10px;
	font-weight: bold;
	line-height: 1.2;
	font-size: 18px;
	color: #ff3d6e;
}

div.column-now div.cover-detail p.txt{
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.2;
}

div.column-now div.cover-detail p.nowonsale{
	font-weight: bold;
	font-size: 18px;
	line-height: 1.2;
}

div.column-now div.cover-detail p.price{
	font-weight: bold;
}
/*-----------------追加2017/10月号------------------*/
div.column-now ul li div.box div.noimage{
	float: none;
	width: 100%;
}
/*-----------------追加2018/5月号------------------*/
div.column-now p.copy,
div.column-next p.copy{
	font-size: 120%;
}
/*-----------------追加2019/5月号------------------*/
div.column-now img.ttl-kusumoto{
margin-bottom: -2px;
width: 14px;
}	
/*-----------------追加2020/4月号------------------*/
div.column-now div.cover-detail p.txt span.fs12,
div.column-next div.cover-detail p.txt span.fs12{
font-size: 12px;
}
div.column-now div.cover-detail p.txt span.fs12_pk{
font-size: 12px;
color: #ff3d6e;
font-weight: bold;
}
div.column-now div.cover-detail p.fs12{
font-size: 12px;
}
/*-----------------追加2020/7月号------------------*/
div.column-now .box h3 .filled{
text-emphasis-style: filled;
-webkit-text-emphasis-style: filled;
-moz-text-emphasis-style: filled;
-ms-text-emphasis-style: filled;
}
/*-----------------追加ここまで--------------------*/
@media screen and (max-width:767px) and (min-width: 1px){
	
	div.column-now div.cover{
		float: none;
		width: auto;
		margin: 0 10% 10px;
	}
	
	div.column-now div.cover img{
		width: 100%;
	}
	
	div.column-now div.cover-detail{
		float: none;
		width: auto;
		margin: 0 0 40px;
		text-align: center;
	}
	
	div.column-now div.cover-detail p{
		text-align: center;
	}
	
/*-----------------追加2018/7月号------------------*/
div .subtxt{
font-size: 120%;
color: #ff3d6e;
font-weight: bold;
}

#content h2.h2_2{
	margin-bottom: 10px;
	padding-left: 0;
	font-size: 16px;
	color: #ff3d6e;
	background-image:none;
	background-position: left bottom;
	background-repeat: repeat-y;
	background-size: 4px auto; 
}

/*-----------------追加ここまで--------------------*/	
	
}

/*-----------------------------------------------
   来月号
-----------------------------------------------*/

div.column-next div.cover-detail{
	margin: 0 0 40px 30px;
}

div.column-next div.cover-detail p.title{
	font-weight: bold;
	font-size: 24px;
}

div.column-next div.cover-detail p.title span{
	font-size: 18px;
}

div.column-next div.cover-detail p.subtitle{
	margin-bottom: 10px;
	font-weight: bold;
	line-height: 1.2;
	font-size: 18px;
	color: #ff3d6e;
}

div.column-next div.cover-detail p.txt{
	font-weight: bold;
	font-size: 16px;
	line-height: 1.2;
}

div.column-next div.cover-detail p.nowonsale{
	font-weight: bold;
	font-size: 18px;
	line-height: 1.2;
}

div.column-next div.cover-detail p.price{
	font-weight: bold;
}
/*-----------------追加2017/6月号------------------*/
div.column-next div.cover-detail span.alerts{
	color: #ff3d6e;
	font-size: 14px;
}
/*-----------------追加2017/10月号------------------*/
div.column-next div.box div.noimage{
	float: none;
	width: 100%;
}
/*-----------------追加2018/5月号------------------*/
h2 .obata{
	font-size: 140%;
	color: #000;
}
/*-----------------追加2018/7月号------------------*/
div .subtxt{
font-size: 120%;
color: #ff3d6e;
font-weight: bold;
}

#content h2.h2_2{
	margin-bottom: 10px;
	padding-left: 0;
	font-size: 16px;
	color: #ff3d6e;
	background-image:none;
	background-position: left bottom;
	background-repeat: repeat-y;
	background-size: 4px auto; 
}
/*-----------------追加2019/5月号------------------*/
div.column-next img.ttl-kusumoto{
margin-bottom: -2px;
width: 14px;
}
/*-----------------追加2020/7月号------------------*/
div.column-next .box h3 .filled{
text-emphasis-style: filled;
-webkit-text-emphasis-style: filled;
-moz-text-emphasis-style: filled;
-ms-text-emphasis-style: filled;
}
/*-----------------追加2020/9月号------------------*/
div.column-next div.box div.detail span.fs12{
font-size: 12px;
}
/*-----------------追加2021/12月号------------------*/
div.column-next span.fs16{
font-size: 16px;
font-weight: bold;
}
div.column-next span.fs18{
font-size: 18px;
font-weight: bold;
}
div.column-next span.pk{
font-weight: bold;
color: #ff3d6e;
}
/*-----------------追加2022/1月号------------------*/
div.column-now span.fs16{
font-size: 16px;
font-weight: bold;
}
div.column-now span.fs18{
font-size: 18px;
font-weight: bold;
}
div.column-now span.fs22{
font-size: 22px;
font-weight: bold;
}
div.column-now span.pk{
font-weight: bold;
color: #ff3d6e;
}
/*-----------------追加2022/2月号------------------*/
span.pk{
color: #ff3d6e;
}
span.pk a{
color: #ff3d6e;
} 
/*-----------------追加ここまで--------------------*/

@media screen and (max-width:767px) and (min-width: 1px){
	
	div.column-next div.cover-detail{
		float: none;
		width: auto;
		margin: 0 0 40px;
	}
	
	div.column-next div.cover-detail p{
		text-align: center;
	}
	
}

/*-----------------------------------------------
   ボックス
-----------------------------------------------*/

div.box{
	position: relative;
	margin-bottom: 30px;
}

/* サムネイル */

div.box div.image{
	position: relative;
	float: left;
	width: 116px;
	line-height: 0;
}

div.box div.image img{
	width: 100%;
}

div.box div.image span{
	display: block;
	position: absolute;
	top: -10px;
	right: -10px;
	width: 43px;
	height: 43px;
}

/* 詳細 */

div.box div.detail{
	float: right;
	width: 524px;
}

div.box h3{
	margin-bottom: 10px;
	padding: 5px 0;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	font-size: 12px;
	font-weight:normal;
}
div.box p.name{
	margin-bottom: 10px;
	font-weight: bold;
}
/*-----------------追加2018/7月号------------------*/
div.box p.name span.subtitle{
	font-size: 80%;
	font-weight: normal;
}
/*-----------------追加ここまで------------------*/
div.box p.name span.big{
	font-size: 120%;
}
/*-----------------追加2018/7月号------------------*/
div.box p.name{
	margin-bottom: 10px;
	font-weight: 500;
}
/*-----------------追加ここまで------------------*/
@media screen and (max-width:767px) and (min-width: 1px){

	div.box div.image{
		width: 48.5%;
	}

	div.box div.detail{
		width: 48.5%;
	}
	div.box div.noimage{
		width: 100%;
	}
	div.box div.noimage img{
		width:100%;
	}
		
}

/*-----------------------------------------------
   ボックス 2カラム
-----------------------------------------------*/

ul.two-column li{
	float: left;
	width: 324px;
	margin: 0 0 20px 0;
}

ul.two-column li:nth-child(odd){
	margin-right: 12px;
}

ul.two-column li div.box{
	margin-bottom: 0;
}

ul.two-column li div.box div.image{
	width: 100px;
}

ul.two-column li div.box div.detail{
	width: 212px;
}

@media screen and (max-width:767px) and (min-width: 1px){
	
	ul.two-column li:nth-child(odd),
	ul.two-column li{
		float: none;
		width: auto;
		margin: 0 0 20px 0;
	}
	
	ul.two-column li div.box div.image{
		width: 38%;
	}
	
	ul.two-column li div.box div.detail{
		width: 59%;
	}
	
}

/*-----------------------------------------------
   リンク
-----------------------------------------------*/

p.link{
	display: inline-block;
	margin: 0 2px 6px 0;
}

p.link a{
	display: inline-block;
	background-color: #000;
	position: relative;
	padding: 2px 8px 2px 15px;
	color: #fff;
	font-size: 12px;
}

p.link a::before,
p.link a::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}

p.link a::after{
	left: 5px;
	box-sizing: border-box;
	width: 5px;
	height: 5px;
	border: 5px solid transparent;
	border-left: 5px solid #ff3366;
}

p.history-toggle{
	position: absolute;
	top: 116px;
	left: 0;
}

p.history-toggle a{
	display: inline-block;
	position: relative;
	width: 116px;
	margin: 5px 0;
	padding: 5px 10px 5px 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #000;
	color: #fff;
	font-size: 10px;
	text-align: left;
}

p.history-toggle a::before,
p.history-toggle a::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	vertical-align: middle;
}

p.history-toggle a::after{
	top: 3px;
	left: 3px;
	box-sizing: border-box;
	width: 5px;
	height: 5px;
	border: 5px solid transparent;
	border-top: 5px solid #fff;
}

p.history-toggle a.close::after{
	top: -6px;
	left: 3px;
	box-sizing: border-box;
	width: 5px;
	height: 5px;
	border: 5px solid transparent;
	border-bottom: 5px solid #fff;
}

@media screen and (max-width:767px) and (min-width: 1px){
	
	p.history-toggle{
		position: static;
	}
	
	p.history-toggle a{
		width:100%;
	}
	
}

/*-----------------------------------------------
   前回までのあらすじ
-----------------------------------------------*/

div.modal-content{
	display: none;
}

/* ピックアップ */

div.pickup{
	width: 600px;
}

div.pickup div.text{
	float: left;
	width: 266px;
}

div.pickup p{
	font-size: 12px;
}

div.pickup div.pickup-tmb{
	float: right;
	border: 1px solid #c6c6c6;
	line-height: 0;
	margin-left: 10px;
}

body .tos-wrapper.tos-fixed .tos-slide.tos-html > div{
	padding: 15px;
}

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

	div.pickup{
		width: auto;
		max-width: 260px;
	}
	
	div.pickup div.text{
		margin-bottom: 5px;
	}

	div.pickup p{
		font-size: 10px;
	}

	div.pickup div.text{
		float: none;
		width: auto;
	}
	
	div.pickup div.pickup-tmb{
		margin: 0 0 10px 0;
		float: none;
	}
	
	div.pickup div.pickup-tmb img{
		width: 100%;
	}
	
}