@charset "UTF-8";
/* CSS Document */
/* 基本情報 */
@keyframes bodyFadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
 @-webkit-keyframes bodyFadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none
}
body {
	animation: bodyFadeIn 2s ease 0s 1 normal;
	-webkit-animation: bodyFadeIn 2s ease 0s 1 normal;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    overflow-x: hidden;
}

#comments{width:100%;padding:20px 0;
    background:#40a8ff;}

.loop_js div{
    margin-right: 5px;
    margin-left: 5px;
}

.loop_js img {
  width: 100%;
}

#comments h2{background:#074e89;text-align: center;padding:10px 0;margin-bottom:20px;}
#comments h2 img{width:985px;}

#ranking{width:1009px;margin:40px auto;}
#ranking p{font-size:21px;line-height:30px;margin-top:30px;}

#ranking .rankingList{display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}
#ranking .rankingList img{width:100%;}
#ranking .rankingList li.listClear{width:100%!important;display:block}

#ranking .rankingList.rank4_20{margin:3% 0;}
#ranking .rankingList.rank4_20 li{width:25%;margin:0.5% 0;}
#ranking .rankingList.rank21_50 li{width:19%;margin:0.5%;}

#ranking #otherList{display:flex;flex-wrap: wrap;margin:20px 0;}
#ranking #otherList li{width:31.33%;font-size:21px;margin:1%;text-shadow: 2px 2px 10px #b01cff ,
-2px 2px 10px #b01cff ,
2px -2px 10px #b01cff ,
-2px -2px 10px #b01cff;}
#ranking #otherList li dt{width:50px;float:left}
#ranking #otherList li dd{margin-left:60px;}
#ranking #otherList li dd span{display:block;font-size:14px;}

body {
	display: block;
	z-index: -1;
	width: 100%;
    background:#000;color:#FFF;
    font-size:14px;
    background: url("../../_img/bg.jpg") no-repeat center top #000;
    background-attachment: fixed;
}
ol, ul {
	list-style: none;
	list-style-type: none;
}
a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: “alpha( opacity=80 )”;
}

#wrapper{width:100%; overflow: hidden;}
.imgPC {
	display: block;
}
.imgSP {
	display: none;
}
.fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 300ms;
}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

.mixitup-page-list{display: flex;justify-content: center;}
.mixitup-page-list button{margin:5px;}
.mixitup-page-stats{text-align: center;}
/* ヘッダーロゴ部分 */
header{
	width:997px; height:970px; position:relative; margin:0 auto; z-index:0;
}
header #top_copy1{width:610px;position: absolute;left:0;right:0;margin:0 auto; top:5px;z-index:6;}
header #top_copy2{width:200px;position: absolute;left:-550px;right:0;margin:0 auto; top:310px;z-index:6;}
header #top_title{width:947px;position: absolute;left:0;right:0;margin:0 auto; bottom:0;z-index:6;}

header #top_charas1{width:794px;position: absolute;left:0;right:0;margin:0 auto; top:0;z-index:4;}
header #top_charas2{width:703px;position: absolute;left:0;right:-40px;margin:0 auto; top:100px;z-index:3;}
header #top_charas3{width:389px;position: absolute;left:0;right:0;margin:0 auto; top:370px;z-index:5;}
header #top_charas4{width:1124px;position: absolute;left:-50px;right:0;margin:0 auto; top:0px;z-index:2;}

section{width:1031px;margin:150px auto;padding-bottom:20px;position: relative; background:url(../../_img/table_cmn.png) center top repeat-y;box-sizing: border-box;}

section:before{content: ''; display: inline-block;
  width: 1031px; height: 78px;line-height:0;font-size:0;
  background-image: url("../../_img/table_top.png");
  background-size: contain;
  vertical-align: middle;position:absolute;top:-78px;}

section:after{content: ''; display: inline-block;
  width: 1031px; height: 78px;line-height:0;font-size:0;
  background-image: url("../../_img/table_bottom.png");
  background-size: contain;
  vertical-align: middle;position:absolute;bottom:-78px;}

section#otherData .inner{width:900px;margin:0 auto;color:#000;text-align: center;}

/* 見出し部分 */
#otherData h4{width:258px;position: absolute;margin:0 auto;left:0;right:0;top:-52px;}
#commentList h4{width:262px;position: absolute;margin:0 auto;left:0;right:0;top:-52px;}
#twitter h4{width:74px;position: absolute;margin:0 auto;left:0;right:0;top:-52px;}
#comics h4{width:136px;position: absolute;margin:0 auto;left:0;right:0;top:-52px;}

#comics h2{width:624px;margin:0 auto;}


section#otherData h3{margin:30px 0;}
section#otherData .top5List{width:100%; display: flex;flex-wrap: nowrap;color:#e4ce92;padding-top:50px;}
section#otherData .top5{width:100%; display: flex;flex-wrap: nowrap;color:#e4ce92;padding-top:10px;justify-content: center}
section#otherData .top5 li {width:18%; margin:0 1%;position: relative;}

section#otherData .top5List li {width:18%; margin:0 1%;position: relative;font-size:18px;}

section#otherData .top5List li:before{
content: ''; display: inline-block;
  width: 100%; height:auto;line-height:0;font-size:0;padding-top:126%;
  background: url("../../_img/flame1.png") center top no-repeat;
  background-size: cover;
  position:absolute;top:-40px;z-index:1;
}
section#otherData .top5List li:nth-child(2):before{
  background: url("../../_img/flame2.png") center top no-repeat;  background-size: cover;
  position:absolute;top:-40px;z-index:1;
}
section#otherData .top5List li:nth-child(3):before,section#otherData .top5List li.num3:before{
  background: url("../../_img/flame3.png") center top no-repeat;
    background-size: cover;
  position:absolute;top:-40px;z-index:1;
}
section#otherData .top5List li:nth-child(4):before{
  background: url("../../_img/flame4.png") center top no-repeat;
    background-size: cover;
  position:absolute;top:-40px;z-index:1;
}
section#otherData .top5List li:nth-child(5):before{
  background: url("../../_img/flame5.png") center top no-repeat;
    background-size: cover;
  position:absolute;top:-40px;z-index:1;
}
section#otherData .top5List li:nth-child(3):before,section#otherData .top5List li.num3:before{
  background: url("../../_img/flame3.png") center top no-repeat;
    background-size: cover;
  position:absolute;top:-40px;z-index:1;
}
section#otherData .top5List li img{width:100%;}
section#otherData .top5List li span{font-size:12px;display:block;}

.waku{width:100%; border:2px solid #40a8ff;padding:20px 20px 30px;margin-bottom:20px;}
.more{display:none;}
section#otherData h2{margin-bottom:12px;}




/* タブのメニュー部分 */

.tab-area {
  display: flex;
  border: 2px solid;
  cursor: pointer;/* カーソルポインターに */
    margin-bottom:20px;
}
.tab {
  background-color: #FFF;
  width: calc(100%/3);
  padding: 5px;
  text-align: center;
}
.tab:nth-child(n+2) {
  border-left: 2px solid;
}
.tab.active {
  background-color: #000;
  color: #fff;
}
.panel {
      color: #fff;
  display: none;
  text-align: center;
}
.panel.active {
  display: block;
}

/* グリッドレイアウト部分 */
.grid-container{
  display: grid;
grid-template-rows: 30px 100px 100px 100px 100px 100px;
 grid-template-columns	:0.6fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
#gi1 {  background-color: aqua; }
#gi2 {  background-color: seashell; }
#gi3 {  background-color: darkkhaki; }
#gi4 {  background-color: aquamarine; }
#gi5 {  background-color: pink; }
.grid__item{background:#FFF;border:1px solid #000;text-align: center;display: flex;color:#000;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;}
.row_header{background:#000;color:#FFF;border:1px solid #FFF;border-bottom:none;text-align: center;display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;}

section#commentList h2{width:624px;margin:0 auto;}

section#commentList ul.menu{width:97%;margin:30px auto 5px;padding:20px 10px 20px 20px;background:#3399cc; }

section#commentList ul.container li{margin:50px 0;}
section#commentList dl{width:850px;margin:0 auto;}
section#commentList dl dt{width:100px;float:left;}
section#commentList dl dd{margin-left:120px;}

p.name{color:#66ffff;font-size:16px;margin-bottom:5px;}
p.textBox{background:#FFF;border-radius: 12px;padding:12px;color:#232323;position: relative;}

p.textBox::before {
  position: absolute; /*絶対配置*/
  content: ''; /*空に*/
  border-top: 10px solid transparent; /*三角を作る*/
  border-right: 10px solid #FFF;
  border-bottom: 10px solid transparent;
    top: 10px;
    left:-8px;
}
.slide-arrow {
  background-color: #333;
  bottom: 0;
  height: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 0;
}
.prev-arrow {
  border-bottom: 15px solid #3399cc;
  border-left: 0;
  border-right: 15px solid #fff;
  border-top: 15px solid #3399cc;
  left: 0px;
}
.next-arrow {
  border-bottom: 15px solid #3399cc;
  border-left: 15px solid #fff;
  border-right: 0;
  border-top: 15px solid #3399cc;
  right: 0px;
}
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
}

controls-pagination{margin:0 auto;text-align: center;}

.mixitup-list{display: flex;flex-wrap: nowrap;justify-content: center;}
.controls-pagination{color:#000;}

button.mixitup-control{width: 35px;margin:0 5px;
    height: 35px;background:#29aae1;border-radius: 50%;display: flex;
align-items: center;font-size:16px;font-weight:bold;
justify-content: center;}

.mixitup-control-active{background:#FFF!important;}

button.mixitup-control.page-control-active{background:#FFF;color:#00132f;border:1px solid #000}
.mixitup-control-prev,.page-control-next{background:#00132f;border-radius: 20px;padding:0 20px; height: 35px;margin:0 20px;}

.mixitup-control-truncation-marker{color:#FFF;padding-top: 5px;}
.mixitup-page-stats{margin-top:10px;color:#FFF;}

/* Twitter */
#twitter dl{width:786px;margin:0 auto;font-size: 21px;}
#twitter dl dt{width:295px;float:left;}
#twitter dl dd{width:481px;margin-left:310px;}

#twitter dl dd a{display:block;margin-top:20px;}


/* comics */
#comics ul#btns{width:90%;margin:3% 5%; display: flex;flex-wrap: nowrap;}
#comics ul#btns li{width:31.3%; margin:1%;}
#comics ul#btns li a{display: block;}

#comics ul#comicsList{width:90%;margin:0 5%; display: flex;flex-wrap: wrap;}
#comics ul#comicsList li{width:15.6666666%; margin:0.5%;}
#comics ul#comicsList li img{width:100%;}

/*ボタンのCSS　*/
.nav-open{background:#29aae1;padding:10px 20px;color:#00103f;font-size:21px;line-height:1em;font-weight:bold;border-radius:12px;}


a.voteBtn2{width:100%;height:auto;font-size:22px;line-height:1.2em;cursor:pointer!important;text-align:center;background: linear-gradient(-0deg, #fc00ff 0%, #feafff 100%);padding:10px 0;margin:0 auto;color:#000;font-weight:bold;letter-spacing: 0.2em;text-decoration: none;border: solid 2px #000; outline: solid 2px #29aae1;}

a.voteBtn2:hover{background: linear-gradient(-0deg, #aa00ac 0%, #c161c3 100%);}

/* フッター */
footer {
	width: 100%;
    background:#000;
    padding:0px;
}
footer p.copy {
    padding:10px 0;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
    color:#FFF;
}

footer #snsBtn{
  font-size: 0;
  padding: 20px 0;
    text-align:center;
}
footer #snsBtn li{
  line-height: 1.83333;
  letter-spacing: 0;
  display: inline-block
}
footer #snsBtn li + li {
  margin-left: 15px
}
footer #snsBtn img {
  width: 50px;
  height: auto
}
footer #vBanner{width:309px; margin:0 auto;}

/* clearfix */
.clearfix {
	zoom: 1;
}
.clearfix:after, ul:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}