@charset "utf-8";
/* CSS Document */
/*リセットcss*/
/* http://meyerweb.com/eric/tools/css/reset/ 
 v2.0 | 20110126
 License:none (public domain)
*/
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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
box-sizing: border-box;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display:block;
}

ol,
ul{
list-style:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* font-awesome　共有*/
.fa-blk:before{
	color: #000 ;
}


/*広告-imobile*/
@media screen and ( max-width:480px ){
.sp_ad{
padding:16px;
}
}
@media screen and ( min-width:481px ){
.sp_ad{
	display:none;
}
}



/*全体*/
.pd20{
	padding:20px;
}

body{
background:#030303;
box-sizing:border-box;
color:#eee;
font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
line-height:1.4em;
font-size:14px;
}

@media screen and ( min-width:1024px )
{
body{
background:url(../img/bg-middleGrunge.png) #030303;
}
}

div,li,p{
box-sizing:border-box;
}
a{
color:#eee;
text-decoration:none;
}
a:hover{
color:#f30000;
}
i{
margin-right:4px;
}
i.margin-left{
margin-left:4px;
}
.date{
margin-right:12px;
color:#DBC4C4;
display:inline-block;
}


.feature-list{
margin:8px 0;
}
#sideContent-feature li:last-child{
margin-bottom:24px;
}
#wrapper-clm{
background:#000;
padding:0;
width:100%;
min-width:320px;
overflow:hidden;
}
@media screen and ( min-width:1024px )
{
	#wrapper-clm{
	width:1024px;
	margin:0 auto;
	overflow:hidden;
	}
}

/*ヘッダー*/
header{
overflow:hidden;
background-color:rgba(216,216,216,1.0);
height:40px;

}
@media screen and ( min-width:1024px )
{
	header{
	margin-bottom:20px;
	}
}
#header-inner{
width:100%;
min-width:320px;
padding:4px 8px;
}
#header-inner li{
	display:inline-block;
}
#header-inner li:last-child{
	margin:0 0 0 auto;
}
@media screen and ( min-width:1024px )
{
	#header-inner{
	padding:4px 0 8px 0;
	width:1024px;
	margin:0 auto;
	overflow:hidden;
	}
}

/*ヘッダー：ロゴ*/
#logo-wrapper{
	width:100%;
	max-width:170px;
	display:inline-block;
}
h1#logo-horror2{
display:inline-block;
transition: 0.1s;
width:160px;
}
#logo-horror2-img{
height:21px;
display:block;
margin:6px 0;
}
#logo-subTtl{
clear:both;
width:140px;
height:auto;
margin-bottom:16px;
display:block;
}
@media screen and ( min-width:1024px )
{
	h1#logo-horror2{
	padding-left:18px;
	}
	h1#logo-horror2:hover{
	background:url(../img/logoBg.png) no-repeat;
	background-size:contain;
	}
	#logo-horror2-img{
	height:28px;
	margin:2px 0;
	}
	#logo-subTtl{
	width:160px;
	}
	#logo-subTtl img{
	width:160px;
	}
}

/*特集
#logo-special{
display:hidden;
width:140px;
height:34px;
overflow:hidden;
}
#logo-special img{
height:34px;
width:140px;
}
*/


/*ナビゲーション：カテゴリー*/
.h2-w{
	font-size:10px;
	border-bottom:1px solid #eee;
	padding-left:10px;
}

@media screen and ( min-width:1024px )
{
	.h2-w{
	padding-left:0;
}
}
#category{
margin-bottom:16px;
}
#category li{
height:34px;
line-height: 34px;
border-bottom:1px solid #3e3e3e;
}

#category .big-cat:before{
font-family: "Font Awesome 5 Free";
content: "\f101";
font-weight: bold;
margin-right:4px;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}

#category #violent:before{
font-family: "Font Awesome 5 Free";
content: "\f071";
font-weight: bold;
font-size:12px;
margin-right:4px;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}

/*#category #comedy:before{
font-family: "Font Awesome 5 Free";
content: "\f59b";
font-weight: 900;
font-size:12px;
margin-right:4px;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}*/

#category .big-cat{
font-size:16px;
padding-left:8px;
}

#category .small-cat span:before{
font-family: "Font Awesome 5 Free";
content: "\f105";
font-weight: bold;
margin-right:4px;

-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}

#category .small-cat span{
font-size:12px;	
display:inline-block;
margin-left:18px;
}


#nav-cat {
float:left;
margin:0;
padding:0;
width:100%;
height:auto;
font-size:0;
}
#nav-cat li{
width:33%;
display:inline-block;
height:auto;
overflow:hidden;
margin:0px;
text-align:center;
}
@media screen and (min-width: 767px) and (max-width: 1023px)
{
#nav-cat li{
width:20%;
display:inline-block;
height:auto;
overflow:hidden;
margin:0px;
text-align:center;
}
}

#nav-cat li a{
display:block;
height:47px;
font-size:16px;
color:#f30000;
line-height:2em;
}
@media screen and ( min-width:1024px ) {
#wrapper-header{
	height:47px;
}
#nav-cat {
width:680px;
height:46px;
float:left;
margin:0;
padding:0;
clear:both;
}
#nav-cat li{
width:130px;
height:46px;
margin:0px;
}
#nav-cat li a{
line-height:47px;
}
}



/* Twitterタイムライン　PC表示*/
.twitterTL{
display:block;
}
#nav-cat li a:hover{
animation:rumble 0.12s linear infinite;
color:#fff;
}

@keyframes rumble{
0%{transform:rotate(0deg)translate(0,0);}
12.5%{transform:rotate(0.4deg)translate(1px,-1px);}
25%{transform:rotate(0.8deg)translate(0px,1px);}
37.5%{transform:rotate(0.4deg)translate(-1px,0);}
50%{transform:rotate(0deg)translate(0,0);}
62.5%{transform:rotate(-0.4deg)translate(1px,0);}
75%{transform:rotate(-0.8deg)translate(0,1px);}
87.5%{transform:rotate(-0.4deg)translate(-1px,-1px);}
100%{transform:rotate(0deg)translate(0,0);    }
}
/*ナビゲーション：SNS 検索窓*/
#nav-sns{
float:right;
text-align:right;
}
#nav-sns li{
display:inline-block;
margin:0px;
overflow:hidden;
text-align:center;
color:#000;
}
#nav-sns li a{
list-style:none;
font-size:24px;
display:block;
font-weight:normal;
line-height:32px;
margin-left:4px;
}

#nav-sns i{
margin:0 !important;
}
.rss{
display:none !important;
}

@media screen and ( min-width:1024px ){
	#nav-sns{
	width:160px;
	}
	#nav-sns li{
	display:inline-block;
	text-align:right;
	}
	.rss{
	display:block !important;
	}
}

#wrapper-searchForm {
width:94%;
max-width:480px;
height:36px;
font-size:12px;
font-weight:bold;
text-align:left;
line-height:18px;
overflow:hidden;
padding:1px 3px 1px 0;
margin:16px auto 24px;
border-radius:18px;
box-sizing: border-box;
}

input.searchForm {
font-size:14px;
width:100%;
height:34px;
border:none;
color:#eee;
padding:1px 6px 1px 30px;
background:url(../img/search.png) no-repeat 10px 10px #3f3f3f;
}
form input.submit:hover {
background-position:bottom left;
}

@media screen and ( min-width:1024px ){
#wrapper-searchForm {
width:300px;
}
input.searchForm:focus{
	outline:0;
	}
}
/*サイドバー*/
.side-banner{
width:302px;
margin:16px auto;
}
#sidebar{
width:100%;
}
.sideContent li a:hover{
color:#f30000;
}
.sideContent,
#sideContent-tag{
clear:both;
margin-bottom:24px;
}
.sideContent li{
overflow:hidden;
position:relative;
}

/*公開スケジュール*/
.schedule{
line-height:1.8em;
margin:0.5em;
}

@media screen and ( min-width:1024px )
{
/*サイドバー*/
#sidebar{
float:right;
width:344px;
}
#sideContent-rank a{
font-size:12px;
}
	
#ranking{
font-size:12px;
}
}


.contentTtl{
display: block;
background:#f20000;
background:-moz-linear-gradient(left, #c30000 0%, #f20000 100%);
background:-webkit-gradient(linear, left top, right top, color-stop(0%,#c30000), color-stop(100%,#f20000));
background:-webkit-linear-gradient(left, #c30000 0%,#f20000 100%);
background:-o-linear-gradient(left, #c30000 0%,#f20000 100%);
background:-ms-linear-gradient(left, #c30000 0%,#f20000 100%);
background:linear-gradient(to right, #c30000 0%,#f20000 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#c30000', endColorstr='#f20000',GradientType=1 );
color:#000;
font-size:14px;
line-height:1.8em;
font-weight:bold;
text-align: center;
}
.contentTtl h2{
font-size:12px;
}

.sideContent .article,
.sideContent .backnumber,
.rank-article,
.ranking-post{
border-bottom:1px solid #333;
padding-right:4px;
}

.sideContent .article img{
width:120px;
height:120px;
object-fit:cover;
float:left;
}
.sideContent span.articleTtl{
font-size:14px;
padding:8px;
display:inline-block;
width:calc(100% - 120px);
text-align: justify;
text-justify: inter-ideograph;
}
@media screen and ( min-width:1024px )
{
.sideContent span.articleTtl{
font-size:12px;
}	
}

.sideContent .backnumber{
font-size:12px;
text-align:right;
line-height:2.4em;
}
.sideContent .backnumber a{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.sideContent .backnumber a:hover{
color:#eee;
}
/*サイドバー：ランキング*/
#ranking{
counter-reset:number;
list-style:none;
padding:0;
}
.ranking-post{
position:relative;
display:block;
overflow:hidden;
box-sizing:content-box;
}
.ranking-post a{
font-size:12px;
}
.ranking-post:before{
counter-increment: number; /* 任意の名前を付けて！ */
content: counter(number); /* 名前を付けたカウンターを呼び出し */
background-color:#000;
color:#eee; 
display:block;
position:absolute;
top:0px;
left:0px;
font-size:10px;
font-weight:bold;
width:1.8em;
line-height:1.8em;
text-align:center;
overflow:hidden;
}
.ranking-post img{
width:64px;
height:64px;
float:left;
margin-right:4px;
}

#article-search{
	margin-top:20px;
}


/*メインカラム*/
h2.pagetitle{
font-size:18px;
font-weight:bold;
margin:16px 0 8px 0;
padding-bottom:6px;
border-bottom:2px solid #eee;
}


.page h3:before,
.page h6:before {
font-family: "Font Awesome 5 Free";
content:"\f0d7";
margin-right:4px;
}

.page h3,h6{
background: none;
padding:6px 6px 6px 16px;
font-size:16px;
margin:0 0 4px 0px;
border-top:1px solid #aaa;
border-bottom:1px solid #aaa;
clear:both;
}

.page p{
	font-size:16px;
	margin-bottom:1em;
	line-height:1.6;
}

.page a{
	text-decoration:underline;
}

/*メインカラム：ページャー*/
.pager{
height:28px;
overflow: hidden;
text-align: center;
margin:1em auto;
}
.pager a,
.pager span{
margin:0;
}
.pager span{
color:#aaa;
}
.page-numbers{
display:inline-block;
width:28px;
height:28px;
line-height: 28px;
text-align:center;	
}

a.page-numbers{
display:inline-block;
width:28px;
height:28px;
background:#c30000;
color:#000;
font-weight: bold;
box-sizing: border-box;
}
a.prev,
a.next{
	width:64px;
}

/*メインカラム：記事リスト*/
#mainClm{
width:100%;
padding:20px;
box-sizing:border-box;
}
@media screen and ( min-width:1024px ){
#mainClm{
width:680px;
background-color: #000;
margin:0 auto;
float:left;
}
}

.articleCat a{
display:inline-block;
font-size:12px;
color:#000;
line-height:1.5em;
background:#c20000;
margin:0 4px 4px 0;
padding:0 4px;
font-weight:bold;
}
.articleCat a:hover{
background:#3e372b;
}

.big-articleList,
.articleList{
clear:both;
position:relative;
overflow:hidden;
padding:0;
margin-bottom:20px;
}

.big-articleList{
margin-bottom:30px;
}

.articleList{
margin-bottom:20px;
}



@media screen and ( min-width:1024px )
{
.big-articleList,
.articleList{
border:none;
padding-right:8px;
}
}

.big-articleList .articleTtl{
font-size:14px;
line-height:1.4em;
font-weight:bold;
display:block;
}

@media screen and (min-width: 767px) and (max-width: 1023px)
{
.big-articleList .articleTtl{
font-size:18px;
line-height:1.4em;
font-weight:bold;
display:block;
}
}

@media screen and ( min-width:1024px )
{
.big-articleList .articleTtl{
font-size:18px;
line-height:1.4em;
font-weight:bold;
margin-bottom:8px;
border-bottom:none;
}
}

.big-articleList .articleImg{
vertical-align:middle;
border:1px solid #333;
overflow:hidden;
box-sizing:content-box;
margin-bottom:10px;
}

.big-articleList .articleImg img{
display:block;
width:100%;
max-height:230px;
object-fit: cover;
box-sizing:content-box;
}


@media screen and (min-width: 767px) and (max-width: 1023px)
{
.big-articleList .articleImg{
display:table-cell;
float:left;
width:30%;
margin-right:1em;
margin-bottom:0;
width:250px;
max-height:380px;
height:auto;
}
}

@media screen and ( min-width:1024px )
{
.big-articleList .articleImg{
display:table-cell;
width:220px;
height:auto;
float:left;
margin:0 10px 0 0;
border:1px solid #333;
overflow:hidden;
box-sizing:content-box; 
}
.big-articleList .articleImg img{
width:100%;
height:auto;
max-height:350px;
}
.articleList .articleImg{
width:96px;
height:96px;
border:1px solid #333;
}	
}



.articleInfo{
overflow:hidden;
margin:0;
padding:0;
}
.articleInfo.date{
font-size:10px;
}
.date:before{
font-family: "Font Awesome 5 Regular";
/*content:"\f303";*/
font-weight:normal;
margin-right:2px;
}
.articleInfo .writer{
display:none;
}
.articleList .articleImg{
width:64px;
height:64px;
float:left;
overflow:hidden;
margin-right:1em;
border:1px solid #333;
overflow:hidden;
box-sizing:content-box; 
}

.articleList .articleImg img{
width:100%;
height:auto;
box-sizing:content-box;
margin-right:16px;
}
.articleList .articleTtl{
font-size:12px;
font-weight:bold;
margin-bottom:4px;
line-height:1.4em;
overflow:hidden;
}

.articleText{
display:none;
}	
@media screen and ( min-width:1024px )
{
.articleText{
font-size:14px;
display:block;
color:#CCC;
overflow:hidden;
}
	
/*メインカラム：記事リスト*/
.articleCat{
font-size:12px;
line-height:1.6em;
}
.writer,
.date{
font-size:14px;
}
.articleInfo .writer{
display:inline;
}

.articleList .articleTtl{
font-size:16px;
margin-bottom:4px;
font-weight:bold;
}
	
}

#morePost{
margin:12px;
text-align: center;
}
#morePost a{
display:inline-block;
height:36px;
width:280px;
line-height:36px;
text-align:center;
font-weight:bold;
border-radius:24px;
background:#c20000;
color:#000;
}
#morePost a:hover{
border:2px solid #c20000;
box-sizing:border-box;
line-height:32px;
background:#000;
color:#c20000;
}

/*固定ページ---ページ内スタイルはsingle欄に併記*/
.page h1{
height:26px;
font-size:18px;
font-weight:bold;
margin:16px 0 8px 0;
border-bottom:2px solid #eee;
}

.page h2{
font-size:18px;
font-weight:bold;
margin:20px auto;
padding:0 10px;
border-left:4px solid #f30000;
line-height:1.2em;
clear:both;
}

/*記者ページ*/
#author{
margin-bottom:16px;
overflow:hidden;
}
#profileImg{
float:left;
margin-right:16px;
}
#authorName{
font-size:18px;
font-weight:bold;
}
/*フッター*/
footer{
width:100%;
height:112px;
margin:0 auto;
padding:10px;
font-weight:normal;
border-top:1px solid #333;
clear:both;
position:relative;
}
#nav-footer{
font-size:14px;
}
#nav-footer li{
margin:0 8px 8px 0;
}
#copyright{
clear:both;
width:100%;
font-size:12px;
text-align:center;
position:absolute;
bottom:0;
}

#copyright{
margin-top:0;
}



@media screen and ( min-width:1024px )
{
/*フッター*/
footer{
}
#nav-footer{
float:right;
font-size:12px;
}
#nav-footer li{
float:left;
}
}


@media screen and ( min-width:1024px )
{
html{
height:100%;
}
body{
padding:0;
height:100%;
}
/* Twitterタイムライン　PC表示*/
.twitterTL{
display:block;
}

/*サイトジャック　左右の広告
#wrapper-ad{
position:relative;
width:1168px;
z-index:0;
margin:0 auto;
display:block; ---変更箇所 blockにする
top:0;
}
#left-ad,
#right-ad{
width:200px;
height:317px;
position:absolute;
z-index:0;
display:block;
}
#left-ad{
background:url(../special/PRANK-img/bg-left.png) no-repeat;
}
#right-ad{
background:url(../special/PRANK-img/bg-right.png) no-repeat;
}
#left-ad a,
#right-ad a{
display:block;
width:100%;
height:100%;
}
#left-ad a span,
#right-ad a span{
visibility:hidden;
}
#left-ad{
left:-200px;
}
#right-ad{
right:-200px;
}
ここまで*/


/*特集
#logo-special{
width:272px;
height:66px;
}
#logo-special img{
width:272px;
height:66px;
}
*/



/*------------------メインカラム*/




}