@charset "utf-8";

/* 合併号
--------------------------------------------------------- */
#pHeader.combine h1 {
	background-image: url(../vol29/h1.png)!important;
	background-size: cover;
}
#pHeader.combine h2 {
	padding-left: 130px;
}
#pHeader.combine .vol {
	display: none;
}
/* ------------------------------------------------------- */

#pHeader {
	position:relative;
}
#pHeader h1 {
	position: absolute;
	width: 320px;
	height: 80px;
	background: url(h1.png) no-repeat;
	background-size: cover;
	text-indent: -9999px;
	z-index: 1;
}
#pHeader h2 {
	position:relative;
	color: #3386ee;
	font-weight: bold;
	font-size: 2.0em;
	padding-top: 40px;
	padding-left: 70px;
	z-index: 2;
}
#pHeader .vol {
	position: absolute;
	width: 50px;
	height: 32px;
	display: block;
	background-image: url(/shared/img/yokoku/vol.png);
	background-repeat: no-repeat;
	background-size: 300px auto;
	top: 34px;
	left: 6px;
	text-indent: -9999px;
}
#pHeader .kensho {
	font-size: 1.4em;
	margin-top: 8px;
}
#pHeader a { color:#0059d2; }
#pHeader a:hover { color:#3386ee; }

#pHeader .vol.v1  { background-position: 0 0; }
#pHeader .vol.v2  { background-position: 0 -32px; }
#pHeader .vol.v3  { background-position: 0 -64px; }
#pHeader .vol.v4  { background-position: 0 -96px; }
#pHeader .vol.v5  { background-position: 0 -128px; }
#pHeader .vol.v6  { background-position: 0 -160px; }
#pHeader .vol.v7  { background-position: 0 -192px; }
#pHeader .vol.v8  { background-position: 0 -224px; }
#pHeader .vol.v9  { background-position: 0 -256px; }
#pHeader .vol.v10 { background-position: 0 -288px; }
#pHeader .vol.v11 { background-position: -50px 0; }
#pHeader .vol.v12 { background-position: -50px -32px; }
#pHeader .vol.v13 { background-position: -50px -64px; }
#pHeader .vol.v14 { background-position: -50px -96px; }
#pHeader .vol.v15 { background-position: -50px -128px; }
#pHeader .vol.v16 { background-position: -50px -160px; }
#pHeader .vol.v17 { background-position: -50px -192px; }
#pHeader .vol.v18 { background-position: -50px -224px; }
#pHeader .vol.v19 { background-position: -50px -256px; }
#pHeader .vol.v20 { background-position: -50px -288px; }
#pHeader .vol.v21 { background-position: -100px 0; }
#pHeader .vol.v22 { background-position: -100px -32px; }
#pHeader .vol.v23 { background-position: -100px -64px; }
#pHeader .vol.v24 { background-position: -100px -96px; }
#pHeader .vol.v25 { background-position: -100px -128px; }
#pHeader .vol.v26 { background-position: -100px -160px; }
#pHeader .vol.v27 { background-position: -100px -192px; }
#pHeader .vol.v28 { background-position: -100px -224px; }
#pHeader .vol.v29 { background-position: -100px -256px; }
#pHeader .vol.v30 { background-position: -100px -288px; }
#pHeader .vol.v31 { background-position: -150px 0; }
#pHeader .vol.v32 { background-position: -150px -32px; }
#pHeader .vol.v33 { background-position: -150px -64px; }
#pHeader .vol.v34 { background-position: -150px -96px; }
#pHeader .vol.v35 { background-position: -150px -128px; }
#pHeader .vol.v36 { background-position: -150px -160px; }
#pHeader .vol.v37 { background-position: -150px -192px; }
#pHeader .vol.v38 { background-position: -150px -224px; }
#pHeader .vol.v39 { background-position: -150px -256px; }
#pHeader .vol.v40 { background-position: -150px -288px; }
#pHeader .vol.v41 { background-position: -200px 0; }
#pHeader .vol.v42 { background-position: -200px -32px; }
#pHeader .vol.v43 { background-position: -200px -64px; }
#pHeader .vol.v44 { background-position: -200px -96px; }
#pHeader .vol.v45 { background-position: -200px -128px; }
#pHeader .vol.v46 { background-position: -200px -160px; }
#pHeader .vol.v47 { background-position: -200px -192px; }
#pHeader .vol.v48 { background-position: -200px -224px; }
#pHeader .vol.v49 { background-position: -200px -256px; }
#pHeader .vol.v50 { background-position: -200px -288px; }
#pHeader .vol.v51 { background-position: -250px 0; }
#pHeader .vol.v52 { background-position: -250px -32px; }
#pHeader .vol.v53 { background-position: -250px -64px; }
#pHeader .vol.v54 { background-position: -250px -96px; }
#pHeader .vol.v55 { background-position: -250px -128px; }
#pHeader .vol.v56 { background-position: -250px -160px; }
#pHeader .vol.v57 { background-position: -250px -192px; }
#pHeader .vol.v58 { background-position: -250px -224px; }
#pHeader .vol.v59 { background-position: -250px -256px; }
#pHeader .vol.v60 { background-position: -250px -288px; }
               
/* --------------------- */
#buymaga {
	width: 100%;
	margin: 8px auto;
}
#buymaga p {
	position: relative;
	cursor: pointer;
	margin-top: 2px;
}
#buymaga p span {
	position: absolute;
	right: 10px;
	top:-100%;
	bottom:-100%;
	margin: auto;
	width: 15px;
	height:15px;
	background: url(arr.png);
	background-size: 15px auto;
}
#buymaga p.open span {
	background-position: 0 -15px;
}
	
#buymaga a:hover {
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}
#buymaga ul {
	list-style-type: none;
}
#buymaga li {
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
#buymaga p img {
	width: 100%;
	height: auto;
}
#buymaga li {
	width: 50%;
	float: left;
	background: #fff;
	box-sizing: border-box;
}
#buymaga li img {
	width: 100%;
	height: auto;
}
#buymaga li:nth-child(odd) {
	margin-right: -1px;
}
#buymaga ul {
	display: none;
	margin-bottom: 8px;
}

/* --------------------- */
#pBody ul {
	border-collapse: collapse;
	box-sizing: border-box;
	width:100%;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	list-style-type:none;
}

#pBody .m1 {
	width:100%;
}
#pBody .m1 h2 {
	font-size: 1.8em;
	color:#fff;
	font-weight:bold;
	padding:9px 0;
	background:#262626;
	text-align:center;
	width:100%;
}


#pBody li h3 {
	color:#004fba;
	font-weight:bold;
	font-size: 1.6em;
	line-height:1.2;
}
#pBody li.box100 h3 {
	font-weight:bold;
	font-size: 1.4em;
}
#pBody li h4 {
	font-size: 1.4em;
	color:#dc0012;
	line-height:1.3;
	text-decoration: none;
	padding-bottom: 8px;
}
#pBody li h5 {
	color: #000;
	font-size: 1.2em;
	font-weight:normal;
	line-height:1.2;
	text-decoration: none;
}
#pBody li p {
	color: #000;
	font-size: 1.2em;
}
#pBody li a {
	text-decoration: none;
	display: block;
}
#pBody li.box001 h3 { display: inline; }
#pBody li.box001 h5 { display: inline; }
	


@media print, screen and (min-width:641px){
	
	#pHeader {
		height: 90px;
	}
	#pHeader h1 {
		position: absolute;
	}
	#pHeader .kensho {
		position: absolute;
		right: 0;
		top: 50px;
	}
	/* 
	-------------------------------------------------------- */
	#buymaga > div {
		position: relative;
		width : -webkit-calc( 50% - 1px );
		width: calc( 50% - 1px );
		margin-right: 1px;
		float: left;
		text-align: center;
	}
	#buymaga p {
		margin-right: 2px;
	}
	#buymaga a {
		display:block;
		width: 100%;
	}

	/* 
	-------------------------------------------------------- */
	#pBody {
		width:778px;
	}
	
	#pBody ul {
		border-top:1px solid #b5b5b5;
		border-left: 1px solid #b5b5b5;
	}
	#pBody li {
		border-right: 1px solid #b5b5b5;
		border-bottom: 1px solid #b5b5b5;
		border-top: none;
		vertical-align:top;
		list-style-type:none;
		box-sizing: border-box;
	}
	
	/*  */

	#pBody li a h3:hover {
		color:#1773ef;
		text-decoration: underline;
	}

	#pBody li .wrap {
		padding:9px 9px 4px;
		box-sizing: border-box;
	}
	#pBody li .grp {
		box-sizing: border-box;
	}

	/*  */
	#pBody li.box001	{ 
		padding:9px;
		width: 100%;
		display: block;
	}
	#pBody li.box001 h5 { padding:2px 8px 2px;}
	

	#pBody li.box002 .grp,
	#pBody li.box003 .grp {
		float: right;
		width: calc(100% - 193px);
		padding: 0 6px;
	}
	#pBody li.box002 img,
	#pBody li.box003 img {
		float:left;
	}

	/* 画像アリ　50％ */
	#pBody li.box002 {
		width: 50%;
	}

	/* 画像アリ　100％ */
	#pBody li.box003	{ 
		width: 100%;
	}

	/* 画像なし　50％ */
	#pBody li.box004 {
		width: 50%;
	}
	#pBody li.box004 .wrap {
		height: auto;
		padding: 10px 6px 6px;
	}
	#pBody li.box004 .grp {
		padding: 0 6px 8px;
	}
	
	/* 連載 */
	#pBody li.box100 { width:25% !important; }
	#pBody li.box100 .wrap {
		height: 6em; 
	}
	
	#pBody .kakomi {
		background:#FBF8AF;
		padding:10px;
		margin: 10px;
	}
}

/* ---------------------------------------------------------------------------------- */

@media screen and (max-width:640px) {
	
	#pBody .m1 {
		padding: 0 !important;
	}
	.vcnt {
		display: none;
	}
	
	/* header
	-------------------------------------------------------- */
	#pHeader {
		margin: 8px;
	}
	#pHeader h1 {
		margin-bottom: 8px;
	}
	#pHeader h2 {
		min-height: 90px;
	}
	#pHeader h2 big {
		font-size: 1.4em !important;
	}
	
	/* body
	-------------------------------------------------------- */
	#buymaga img {
		margin-bottom: 1px;
	}
	#buymaga {
		width: 100%;
		padding: 0 8px;
		margin: 0;
	}
	/* body
	-------------------------------------------------------- */
	#pBody {
		padding:8px;
	}
	#pBody li h3 {
		font-size: 1.4em;
	}
	#pBody li h4 {
		font-size: 1.2em;
		color:#dc0012;
		line-height:1.2;
		text-decoration: none;
		padding-bottom: 4px;
	}

	#pBody li {
		border-top:1px solid #b5b5b5;
		box-sizing: border-box;
		padding: 6px 0;
	}
	
	#pBody li.box100 {
		width:50%;
	}
	#pBody li.box001 img {
		width:50%;
		margin: 0 auto;
	}
	
	#pBody li.box002 {
		position:relative;
		overflow: hidden;
	}
	#pBody li.box002 img,
	#pBody li.box003 img,
	#pBody li.box100 img {
		float:left;
		width:120px;
	}
	#pBody li.box002 .grp,
	#pBody li.box003 .wrap,
	#pBody li.box100 .wrap {
		float:right;
		width: calc( 100% - 126px);
	}
	
	#pBody .kakomi {
		background:#FBF8AF;
		padding:10px;
		margin: 10px;
	}
}
@media screen and (max-width:480px) {
	#pHeader h2 big {
		font-size: 1.2em !important;
	}
	#pHeader h2 small {
		display: block;
	}
	#pBody li.box001 img {
		width:100%;
	}
	#pBody li.box100 {
		width:100%;
	}
}