@charset "UTF-8";

@media screen and (max-width: 667px) {
/* 文字関係 */

.imgPC {
	display: none;
}
.imgSP {
	display: block;
}
    img{width:100%;}   
#wrapper{
width:100%;
overflow: hidden;
}
    
body {
	display: block;
	z-index: -1;
	width: 100%;
    background:#FFF;
    font-size:3.5vw;
    background:none;
}
body:before{content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background-repeat:no-repeat;
background-image:url(../../_img/bg_sp.jpg);
background-size:cover;}

/* ヘッダーロゴ部分 */
header{
	width:100%; height:auto;padding-bottom: calc(100%*1455/1000);  position:relative; margin:0 auto; z-index:10; overflow: hidden
}
header #top_copy1{width:70%;position: absolute;left:0;right:0;margin:0 auto; top:1vw;z-index:6;}
header #top_copy2{width:20%;position: absolute;left:15vw;right:auto;top:70vw;z-index:6;}
header #top_title{width:99%;position: absolute;left:0;right:0;margin:0 auto; bottom:2vw;z-index:6;}

header #top_charas1{width:100%;position: absolute;left:0;right:0;margin:0 auto; top:10vw;z-index:4;}
header #top_charas2{width:87%;position: absolute;left:0;right:-2vw;margin:0 auto; top:37vw;z-index:3;}
header #top_charas3{width:51%;position: absolute;left:0;right:0;margin:0 auto; top:74vw;z-index:5;}
header #top_charas4{width:138%;position: absolute;left:0;right:0;margin:0 auto; top:0px;z-index:2;}

    
/* h2部分 */
section h2.title {width: 100%;margin: 0 auto;z-index: 2;}

section#twitter h2{width:70%;height:15vw; margin:0px auto 2vh; background:url("../../_img/h2_twitter.png") no-repeat; background-size:100% auto;font-size:0;;position:static;}
    
section#comics h2{width:80%;height:7vh; margin:0px auto 20px; background:url("../../_img/h2_comics.png") no-repeat; background-size:100% auto;font-size:0;;position:static;}

h2#comment{width:80%;height:auto; padding-top:6vh;margin:3vh auto; background:url("../../_img/h2_comment.png") no-repeat; background-size:100% auto;font-size:0;;position:static;}
    
h3 {
margin: 1vh 0 3vh;
}
   
section#commentList h2 {
    width: 100%;
    margin: 0 auto;
}
#otherData h4 {
    width: 40%;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: -20px;
}    
    
#commentList h4 {
    width: 40%;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: -20px;
}  
#twitter h4{
    width: 11%;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: -20px;
} 
#comics h4{
    width: 22%;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: -20px;
} 
    
h2.midashi{width:90%!important;margin:0 auto;}    
  /* コメントスライド部分 */  
#comments{width:100%;padding:20px 0;
    background:#40a8ff;}

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

      /*ランキング部分 */  
#ranking{width:100%;margin:40px auto;}
#ranking .rankingList li.listClear{display:none;}

#ranking .rank1_3{width:75%;margin:0 auto;}
    #ranking .rank1_3 li{margin:5px; 0;} 
    
#ranking .rankingList.rank4_20{margin:3% 0;}
#ranking .rankingList.rank4_20 li{width:33.33%;margin:0.5% 0;}
    
#ranking .rankingList.rank21_50 li{width:33.33%;margin:0.5% 0%;}
    
#ranking #otherList{width:90%;display:flex;flex-wrap: wrap;margin:20px auto;}
#ranking #otherList li{width:48%;font-size:3.5vw;margin:1%;}
#ranking #otherList li dt{width:3em;float:left}
#ranking #otherList li dd{margin-left:3em;}
#ranking #otherList li dd span{display:block;font-size:2.5vw;}
    
      /*WAKU部分 */  
section{width:100%;margin:80PX auto;padding:0; background:url("../../_img/table_cmn.png")repeat-y; background-size:100% auto;position: relative;z-index: 2;font-size:3.5vw;}
    
section:before{content: ''; display: inline-block;
 width:100%; height: auto;margin:0;padding:28px 0 0 0 ;line-height:0;font-size:0;
  background: url("../../_img/table_top.png")no-repeat center top;
  background-size:102% auto;
  vertical-align: middle;position:absolute;top:-28px;}
    
section:after{content: ''; display: inline-block;
  width:100%; height: auto;margin:0;padding:28px 0 0 0 ;line-height:0;font-size:0;
  background: url("../../_img/table_bottom.png") no-repeat;
  background-size:100% auto;
  vertical-align: middle;position:absolute;bottom:-28px;} 
    
 section#otherData .inner{width:100%;margin:0 auto;color:#000;text-align: center;}   
    
section#otherData .top5List,section#otherData .top5{display: flex;flex-wrap: wrap;padding-top:30px;justify-content: left;}
section#otherData .top5List li {width:31.33%; margin:0 1% 12vw;position: relative;font-size:3vw;} 
section#otherData .top5 li {width:31.33%; margin:0 1% 7vw;position: relative;font-size:3vw;} 
section#otherData .top5List li:nth-child(4),section#otherData .top5 li:nth-child(4),section#otherData .top5 li:nth-child(5),section#otherData .top5List li:nth-child(5) { margin:0 1% 0px;}   
    
section#otherData .top5List li span{font-size:2.5vw;display:block;}
    
    
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:-6.5vw;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:-6.5vw;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:-6.5vw;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:-6.5vw;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:-6.5vw;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:-6.5vw;z-index:1;
}
    
    #commentNum{width:60%;margin:0 auto;}
    
    
/* コメント */
section#commentList ul.menu{width:100%;margin:20px auto 5px;padding:10px 20px;background:#3399cc; }
section#commentList ul.menu li{padding:3px; }

section#commentList ul.container li{margin:20px 0;}
section#commentList dl{width:95%;margin:0 auto;}
section#commentList dl dt{width:70px;float:left;}
section#commentList dl dd{margin-left:80px;font-size:3.3vw}

p.name{color:#66ffff;font-size:16px;margin-bottom:5px;}
p.textBox{background:#FFF;border-radius: 12px;padding:12px;color:#232323;position: relative;}
    
section .inner{width:100%;margin:0px auto; position:relative; padding:2vw 4vw 0} 
    
/* Twitter */
#twitter dl{width:100%;margin:0 auto;font-size:4vw;}
#twitter dl dt{width:50%;margin:0 auto 2vh;float:none;}
#twitter dl dd{width:100%;margin-left:0px;}

#twitter dl dd a{display:block;margin-top:20px;}
    
    /* comics */
#comics ul#btns{width:90%;margin:3% 5%; display: flex;flex-wrap: wrap;}
#comics ul#btns li{width:100%; margin:1% 0;}
#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:31%; margin:1%;}
#comics ul#comicsList li img{width:100%;}

    .nav-open {
    padding: 6px 40px;
    font-size: 4.5vw;
}
}