@charset "Shift_JIS";

/* ****************************************************************** 
	@This stylesheet Information{
		CSS File Name: contents.css
	}
****************************************************************** */

/*===================================================================
	General setting
===================================================================*/
body{
	width:100%;
	height:100%;
	background:#fff;
	color:#000;
	line-height:1.4;
	text-align:center;
	font-family:'HiraKakuProN-W3','HiraKakuProN-W6','MS PGothic',Helvetica,Verdana, Arial;
	word-break:normal;
	word-wrap:break-word;
	font-size:100%;
	-webkit-text-size-adjust: none;
}


body,div,h1,h2,h3,h4,h5,h6,p,address,blockquote,pre,th,td,dl,dt,dd,ul,ol,li,form,fieldset,textarea,table{
	margin:0;
	padding:0;
	font-size:100%;
}

html>body{height:auto;}

ul,
ol{list-style:none;}

table{border-collapse:collapse;line-height:1.37;}

table caption,
table th,
table td{text-align:left;vertical-align:top;}

table td img{display:inline-block}

hr{display:none;}

img{border:0;}

a:link{color:#000; text-decoration:none;}
a:visited{color:#000; text-decoration:none;}
a:hover{color:#000; text-decoration:underline;}
a:active{color:#000; text-decoration:underline;}

strong{font-weight:normal;}
em{font-weight:bold;font-style:normal;}
address{font-style:normal;}


/*--[class]-----------------------------------------------------*/

.clearBoth{clear:both;}

.caution{color:#CC0000 !important;}

.noscriptMsg{
	color:#CC0000;
	font-weight:bold;
	padding:1px 0 1px 20px;
	background:url(../images/icon_noscript.gif) no-repeat 0 0.25em;
	margin:0 10px 10px
}

/* clearfix */
.pkg:after{
	content: " ";
	display: block;
	clear: both;
	height: 0px;
	visibility:hidden;
}

.pkg{ display: inline-block; }

/* no ie mac \*/
* html .pkg{ height: 1%; }
.pkg{ display: block; }
/* */


/*===================================================================
	header setting
===================================================================*/
div#pcHeader{
	margin:0;
	text-align:left;
}

div#spHeader{
	display:none;
}

/*===================================================================
	footer setting
===================================================================*/
div#pcFooter{
	display:block;
}

div#spFooter{
	display:none;
}


/*===================================================================
	container setting
===================================================================*/
#wrapper{
	text-align:center;
}

#container{
	width:960px;
	margin:0 auto;
	font-size:0.86em;
	padding:30px 0 60px;
}

#container a:link{color:#000; text-decoration:none;}
#container a:visited{color:#000; text-decoration:none;}
#container a:hover{color:#000; text-decoration:underline;}
#container a:active{color:#000; text-decoration:underline;}

#container h1{
	margin-bottom:10px;
}

.contents ul{
	background:url(../images/bg_column.gif) 50% 50% no-repeat;
	margin-bottom:10px;
	min-height:328px;
}

.contents ul li{
	width:320px;
	min-height:328px;
	padding:10px;
	position:relative;
	float:left;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	
	*width:300px;
	_width:300px;
}

.contents ul li.new{
	background:#fff962;
}

.contents ul li.twoblock{
	width:640px;
	*width:620px;
	_width:620px;
}

.contents ul li .inner{
	text-align:left;
	background:#ffffff;
	border:2px solid #000000;
	border-radius:5px;
	overflow:hidden;
	position:relative;
}

.contents ul li.new span.ico{
	width:14px;
	height:12px;
	display:block;
	position:absolute;
	top:4px;
	left:3px;
}

.contents ul li.new span.ico span{
	width:14px;
	height:12px;
	display:block;
	position:relative;
	background:url(../images/z_new.png) 0 0 no-repeat;
	
	-moz-animation:new_rotate 0.9s linear 0s infinite;
	-webkit-animation:new_rotate 0.9s linear 0s infinite;
	-o-animation:new_rotate 0.9s linear 0s infinite;
	-ms-animation:new_rotate 0.9s linear 0s infinite;
	animation:new_rotate 0.9s linear 0s infinite;
}

@-moz-keyframes new_rotate{
	0%   {-moz-transform:rotate(0deg);}
	25%  {-moz-transform:rotate(-90deg);}
	50%  {-moz-transform:rotate(-180deg);}
	75%  {-moz-transform:rotate(-270deg);}
	100% {-moz-transform:rotate(-360deg);}
}

@-webkit-keyframes new_rotate{
	0%   {-webkit-transform:rotate(0deg);}
	25%  {-webkit-transform:rotate(-90deg);}
	50%  {-webkit-transform:rotate(-180deg);}
	75%  {-webkit-transform:rotate(-270deg);}
	100% {-webkit-transform:rotate(-360deg);}
}

@-o-keyframes new_rotate{
	0%   {-o-transform:rotate(0deg);}
	25%  {-o-transform:rotate(-90deg);}
	50%  {-o-transform:rotate(-180deg);}
	75%  {-o-transform:rotate(-270deg);}
	100% {-o-transform:rotate(-360deg);}
}

@-ms-keyframes new_rotate{
	0%   {-ms-transform:rotate(0deg);}
	25%  {-ms-transform:rotate(-90deg);}
	50%  {-ms-transform:rotate(-180deg);}
	75%  {-ms-transform:rotate(-270deg);}
	100% {-ms-transform:rotate(-360deg);}
}

@keyframes new_rotate{
	0%   {transform:rotate(0deg);}
	25%  {transform:rotate(-90deg);}
	50%  {transform:rotate(-180deg);}
	75%  {transform:rotate(-270deg);}
	100% {transform:rotate(-360deg);}
}

.contents ul li .inner .articleHead{
	background:#ffcc00;
	border-bottom:2px solid #000000;
	padding:12px 15px;
}

.contents ul li.column .inner .articleHead{
	background:url(../images/ico_column_pc.png) 98% 100% no-repeat #ffcc00;
}

.contents ul li.manga .inner .articleHead{
	background:url(../images/ico_manga_pc.png) 100% 100% no-repeat #ffcc00;
}

.contents ul li .inner .articleHead .genre{
	float:left;
}

.contents ul li.yomimono .inner .articleHead .genre{
	width:78px;
}

.contents ul li.column .inner .articleHead .genre{
	width:53px;
}

.contents ul li.manga .inner .articleHead .genre{
	width:57px;
}

.contents ul li .inner .articleHead .date{
	float:right;
	font-size:0.86em;
	margin-top:0.15em;
}

.contents ul li .inner .articleHead .genre img{
	width:100%;
	height:auto;
}

.contents ul li .inner .articleBody{
	padding:10px 10px 20px;
}

.contents ul li .inner .articleBody .articleTtl{
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:2px dotted #cecece;
	font-size:1.4em;
	font-weight:bold;
}

.contents ul li .inner .articleBody .articleImg{
	text-align:center;
	margin-bottom:10px;
}

.contents ul li.twoblock .inner .articleBody .articleImg{
	width:276px;
	float:left;
}

.contents ul li.twoblock .inner .articleBody .articleTxt{
	padding-left:300px;
}