@charset "utf-8";


/*------------------------------
 c o m m o n
--------------------------------*/
* {
	position:relative;
	box-sizing:border-box;
	font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
	background-color:#ffcc32;
	background:url(../../image/temp/bg.gif); 
}

body * {
	text-align:left;
}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}


/*--------------------------------------
	m a i n W r a p p e r
--------------------------------------*/
#wrpContents {
	background:url(../../image/temp/bgWhite.gif);
	width:1100px;
	min-height:80vh;
	margin:auto;
	padding-top:30px;
}
	#mainContents {
		width:1061px;
		margin:1em auto;
	}


/*--------------------------------------
	H e a d e r
--------------------------------------*/
#pcHeader {
	width:1061px;
	height:78px;
	background:url(../../image/temp/header/pc/bg.gif) no-repeat;
	margin:auto;
}
	#pcHeader a {
		display:inline-block;
		height:78px;
		position:absolute;
	}
		#pcHeader a img { position:absolute; display:inline-block; left:0; top:0; }
		#pcHeader .logo 	{ width:211px;	height:95px;	left:0px;	top:-18px; }
		#pcHeader .pickup	{ width:141px;	height:94px;	left:215px;	top:-10px; }
		#pcHeader .next		{ width:88px;	height:88px;	left:380px;	top:-6px; }
		#pcHeader .comics	{ width:176px;	height:88px;	left:493px;	top:-6px; }
		#pcHeader .channnel { width:156px;	height:120px;	left:694px;	top:-21px; }
		#pcHeader .webComics{ width:177px;	height:88px;	left:871px;	top:-4px; }


/*--------------------------------------
	F o o t e r
--------------------------------------*/
#wrpFooter {
	background:url(../../image/temp/bgRed.gif);
	width:100%;
	min-height:20vh;
	border-top:5px #000 solid;
}

/*--------------------------------------
	t e m p - m a i n C o n t e n t s
--------------------------------------*/
#returnTop {
	padding: 1em;
	text-align:right;
}
	#returnTop a {
		display:inline-block;
	}



/*--------------------------------
	micro clear fix
----------------------------------*/
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}


h2{ font-size:200%; font-weight:bold; line-height:120% }
h3{ font-size:160%; font-weight:bold; }
.readtxt{ font-size:120%; margin-top:10px; }

.super_bnr{width:100%; text-align:center; margin-top:17px;}
.inline_bnr{ display:none; }

@media screen and (max-width: 640px) {

	#pcHeader { display:none; }

	#spMenus,#spHeader .openHead,#wrpContents,#wrpFooter {
		max-width:320px;
	}
	
	/*--------------------------------------
		m e n u s
	--------------------------------------*/
		
	#spHeader {
		position:fixed;
		z-index:5;
		top:0;
		left:0;
		text-align:center;
		width:100vw;
		padding-top:10px;
	}
		#spHeader .openHead {
			width:92.5%;
			height:72px;
			background:url(../../image/temp/header/sp/menuHead.png) no-repeat;
			background-size:contain;
			margin:auto;
			z-index:5;
		}
		#spHeader .openHead > a.coroLogo {
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			width: 50%;
		}
			#spHeader .openHead > a.btnClose {
				width:34px;
				height:34px;
				right:11px;
				top: 17px;
				position:absolute;
				overflow:hidden;
			}
				#spHeader .openHead > a.btnClose > img {
					width:100%;
					position:absolute;
					left:0;
					top:0;
				}
		
		#spMenuWrap {
			width:95%;
			margin:auto;
			max-width:320px;
		}
		
		#spMenus {
			width:97.5%;
			margin:auto;
			border:5px solid #000;
			border-top:0;
			top: -15px;
			left:4px;
			z-index:1;
			position:absolute;
		}
			#spMenus a {
				display:inline-block;
				border-bottom:5px solid #000;
			}
				#spMenus a:first-child {
					border-top:5px solid #000;
				}
				#spMenus a:last-child {
					border-bottom:none;
				}
			#spMenus img {
				width:100%;
			}
			
		/* Animation ------------------------------ */
		#spMenus {
			transition: all 0.6s ease;
			transform:translate(-320px,0px);
			-webkit-transition: all 0.6s ease;
			-webkit-transform:translate(-320px,0px);
			-moz-transition: all 0.6s ease;
			-moz-transform:translate(-320px,0px);
			-o-transition: all 0.6s ease;
			-o-transform:translate(-320px,0px);
		}	
			.menuSlideOn{
				transform:translate(0px,0px) !important;
				-webkit-transform:translate(0px,0px) !important;
				-moz-transform:translate(0px,0px) !important;
				-o-transform:translate(0px,0px) !important;
			}
		
		#spHeader .openHead > a > img {
			transition: all 0.6s ease;
			transform:translate(-100%,0px);
			-webkit-transition: all 0.6s ease;
			-webkit-transform:translate(-100%,0px);
			-moz-transition: all 0.6s ease;
			-moz-transform:translate(-100%,0px);
			-o-transition: all 0.6s ease;
			-o-transform:translate(-100%,0px);
		}
			.menuCloseImgOn {
				transform:translate(0%,0px) !important;
				-webkit-transform:translate(0%,0px) !important;
				-moz-transform:translate(0%,0px) !important;
				-o-transform:translate(0%,0px) !important;
			}
				
		#fadePrate {
			width:100vw;
			height:100vh;
			background:#000;
			position:fixed;
			z-index:2;
			transition: all 1s;
			opacity: 0;
			display:none;
		}
			.fadeInAnime { display:block !important; opacity:0.6 !important; }
		
	
	/*--------------------------------------
		m a i n W r a p p e r
	--------------------------------------*/
	#wrpContents {
		width:97vw;
		overflow:hidden;
		background-size:contain;
		padding: 80px 7px 0 7px;
	}
		#mainContents { height:auto; }
		
		#mainContents {
			width:100%;
			margin:auto;
		}
	/*--------------------------------------
		F o o t e r
	--------------------------------------*/
	#wrpFooter {
		width:97vw;
		margin:auto;
	}
	
	#wrpFooter .subNavi a {
		display:block !important;
		margin-left:5% !important;
		margin: 0.3em 0;
	}
	#wrpFooter .copyRights {
		text-align:left !important;
		padding:1em !important;
	}
	
	
	/*--------------------------------------
	t e m p - m a i n C o n t e n t s
	--------------------------------------*/
	#returnTop {
		padding: 0 0 0.8em 0;
		text-align:right;
	}
	#returnTop a {
		display:inline-block;
	}
	
	h2{ font-size:140%; font-weight:bold; line-height:140% }
	h3{ font-size:120%; font-weight:bold; }
	.readtxt{ font-size:100%; margin-top:10px; }
	
	.super_bnr{ display:none; }
	.inline_bnr{ display:block; }	
	.inline_bnr a img{ width:100% !important; }


}