@charset "shift_jis";

body { background: #29272a; color: #fff; }


/* RESET & SETTING
----------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
}

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
	display: block;
	/* FOR IE8 */
}

html,
body {
	font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size: 100%;
	text-align: center;
}
a { color: inherit; text-decoration: underline; }
br { letter-spacing: normal; }
img { vertical-align: top; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

/**/

.fl { float: left; }
.fr { float: right; }

.cb { clear: both; }

.taC { text-align: center;}
.taL { text-align: left;}
.taR { text-align: right;}

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

#mainBox { position: relative; }

#contentBox { text-align: left; max-width: 1440px; min-width: 980px; margin: 0 auto; background: url(/content/ajin/images/bg-content.png) }
.sepBox { margin-bottom: 20px; }

#gNavBox { height: 46px; background: #090909; }
#gNavBox li { display: inline-block; vertical-align: top; }
#gNavBox li.sns { width: 100px; vertical-align: top; text-align: center; padding: 13px 0 0; }

#footer { background: #090909; padding: 15px 0; font-size: 12px; }

.comicsBox { height: inherit; }
.comicsBox:after { clear: both; content:''; display: block;}


.keyImgBox { width: 55%; height: 100%; position: relative; overflow: hidden; background: #999; }
#comics8 .keyImgBox { float: left; }
#comics9 .keyImgBox { float: right; }
#comics10 .keyImgBox { float: left; }

img.keyvisual { width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
	-moz-transition: .8s linear;
	-webkit-transition: .8s linear;
	-ms-transition: .8s linear;
	transition: .8s linear; }
	
img.keyvisual:hover {
	-moz-transition: 1.5s linear;
	-webkit-transition: 1.5s linear;
	-ms-transition: 1.5s linear;
	transition: 1.5s linear;
	
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
.sumTxtBox { width: 45%; }
#comics8 .sumTxtBox { float: right; }
#comics9 .sumTxtBox { float: left; }
#comics10 .sumTxtBox { float: right; }

.sepBox ul { padding-left: 1em;}
.sepBox li{ padding-right: 2em;}
.sepBox .cast li { display: inline-block; }
.tit { font-size: 14px; color:#ff0000;  }
.boxInner { padding: 25px; }
.note { font-size: 12px; padding: 10px 0; }

#btnpv08 { position: absolute; top: 60px; right: 40px; }
#catch08 { position: absolute; top: 40px; left: 20px; }
#catch09 { position: absolute; top: 25%; right: 20px; }


a.blink:hover {
	-webkit-animation:blink .1s linear infinite alternate;
    -moz-animation:blink .1s linear infinite alternate;
    animation:blink .1s linear infinite alternate;
}

@-webkit-keyframes blink{
    0% {opacity:.7;}
    100% {opacity:.8;}
}

@-moz-keyframes blink{
    0% {opacity:.7;}
    100% {opacity:.8;}
}

@keyframes blink{
    0% {opacity:.7;}
    100% {opacity:.8;}
}


.sumTxtBox h2 { color: #ff0000; border-bottom: 1px solid #FF0000; margin-bottom: 10px; }
.sumTxtBox h3 { background: #ff0000; display: inline-block; padding: 5px 1em; line-height: 1; margin-bottom: 10px; font-weight: normal; }
a.cvBtn { background: #ff0000; display: block; padding: 15px 0; line-height: 1; font-size: 24px; text-align: center; }
a.cvBtn,
a.cvBtn:hover,
a.cvBtn:active,
a.cvBtn:visited { text-decoration: none; }

@media screen and (max-width: 768px) {
	h1 img { width: 100%; }
	#contentBox { text-align: left; max-width: 640px; min-width: 320px; margin: 0 auto; }

	.sepBox { margin-bottom: 20px; }
	
	
	
	#footer { font-size:90%; }
	
	.comicsBox { height: inherit; }
	.comicsBox:after { clear: both; content:''; display: block;}
	
	.keyImgBox { width: 100%; height: 100%; position: relative; overflow: hidden; background: #999; }
	#comics8 .keyImgBox { float: none; }
	#comics9 .keyImgBox { float: none; }
	
	img.keyvisual { width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
		-moz-transition: .8s linear;
		-webkit-transition: .8s linear;
		-ms-transition: .8s linear;
		transition: .8s linear; }
		
	img.keyvisual:hover {
		-moz-transition: 1.5s linear;
		-webkit-transition: 1.5s linear;
		-ms-transition: 1.5s linear;
		transition: 1.5s linear;
		
		-moz-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1);
	}
	.sumTxtBox { width: 100%; }
	#comics8 .sumTxtBox { float: none; }
	#comics9 .sumTxtBox { float: none; }
	.sepBox ul { padding-left: 0;}
	.sepBox li{ padding-right: 0em;}
	.sepBox .cast li { display: inline-block; padding-right: 1.5em; }
	.tit { font-size: 14px; color:#ff0000;  }
	.boxInner { padding: 5%; }
	.note { font-size: 12px; padding: 10px 0; }
	
	
	
}

@media screen and (max-width: 640px) {
	#gNavBox { height: auto; background: #090909; }
	#gNavBox li { display: inline-block; width: 49%; vertical-align: top; }
	#gNavBox li img { width: 100%; }
	#gNavBox li.sns { display: inline-block; width: 100px; vertical-align: top; text-align: center; padding: 15px 0; }
	#gNavBox li.sns img { width: auto; }
	
	.sumTxtBox h2 img { width: 100%; }
	
	#btnpv08 { position: absolute; top: 4%; right:  4%; width: 35%; }
	#catch08 { position: absolute; top: 0px; left: 0px; width: 30%;  }
	#catch09 { position: absolute; top: 25%; right: 6%; width: 30%; }	
	#btnpv08 img,
	#catch08 img,
	#catch09 img { width: 100%;}
}