body{
   margin: 0;
   padding: 0;
   line-height: 1.4;
   font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 
                'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
   }
   
   a:link{
   cursor: pointer;
   cursor: hand;
   }


.pc_none{
display: none;
}


.clear{
clear: both;
}


.center{
text-align: center;
}


.red{
color: #C7161D;
}


.box_900{
width: 900px;
margin: 30px auto 60px auto;
}


#waku{
width: 100%;
}


#bgswitcher{
width: 100%;
height: 120vh;
background-position:center center;
background-size: cover;
align-items: center;
justify-content: center;
margin-bottom: 50px;
}


#header{
width: 960px;
height: 80px;
margin: 0 auto;
padding-top: 20px;
position: relative;
}


   #headersearch_box{
   position: absolute;
   top: 27px;
   right: 75px;
   }
   
   
   #headersearch_btn{
   position: absolute;
   top: 25px;
   right: 20px;
   border: solid 1px #000;
   background-color: #C8C9CA;
   }


#navi{
width: 100%;
background-color: #C7161D;
}


   #navi ul{
   padding: 5px 0;
   letter-spacing: -1em;
   width: 960px;
   margin: 0 auto;
   }
   
   
   #navi ul li{
   list-style-type: none;
   display: inline-block;
   letter-spacing: 0em;
   width: 24%;
   text-align: center;
   border-right: solid 1px #FFF;
   }
   
   
   #navi ul li:last-child{
   border: 0;
   }
   
   
   #navi ul li a{
   display: block;
   color: #FFF;
   text-decoration: none;
   padding: 5px 0;
   }
   
   
   #navi ul li a:hover{
   background-color: #96171B;
   padding: 10px 0;
   margin: -5px 0;
   }


.top_select_h{
font-size: 30px;
margin: 5px 0;
}


.top_select_h_small{
font-size: 14px;
}


#top_select{
width: 960px;
margin: 0 auto;
color: #FFF;
text-align: center;
padding-top: 50px;
}


   #top_select ul{
   margin: 0;
   padding: 60px 0 120px 0;
   letter-spacing: -1em;
   }
   
   
   #top_select ul li{
   width: 250px;
   height: 250px;
   list-style-type: none;
   display: inline-block;
   letter-spacing: 0em;
   border: solid 2px #FFF;
   margin: 0 25px;
   }
   
   
   #top_select ul li a{
   text-decoration: none;
   display: inline-block;
   }
   
   
   .topbox_h1{
   color: #FFF;
   font-size: 16px;
   margin-top: 90px;
   }
   
   
   .topbox_h2{
   color: #FFF;
   font-size: 40px;
   }
   
   
   #top_select ul li:hover{
   filter:alpha(opacity=50);
   -moz-opacity: 0.5;
   opacity: 0.5;
   }



.top_h1{
font-size: 16px;
text-align: center;
}


.top_h2{
font-size: 38px;
text-align: center;
margin-bottom: 20px;
}

.top_h3{
width: 960px;
background-color: #C7161D;
color: #FFF;
font-size: 22px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}


.more{
width: 200px;
margin: 30px auto;
border: solid 1px #000;
text-align: center;
background-color: #FFF;
}


   .more a{
   font-size: 20px;
   display: block;
   padding-top: 5px;
   padding-bottom: 5px;
   text-decoration: none;
   color: #000;
   }
   
   
   .more a:hover{
   background-color: #C8C9CA;
   }
   
   
   .ranking_more{
   margin-top: 50px;
   margin-bottom: 100px;
   width: 250px;
   }


#search{
width: 960px;
margin: 0 auto;
padding: 50px 0;
position: relative;
}


   #topseach{
   width: 100%;
   margin: 30px auto;
   }
   
   
   #topsearch_box{
   width: 85%;
   height: 20px;
   font-size: 20px;
   padding: 20px;
   }
   
   
   #topsearch_btn{
   width: 8%;
   height: 46px;
   float: right;
   border: solid 1px #000;
   background-color: #C8C9CA;
   font-size: 20px;
   }
   
   
   .search_result_h{
   width: 900px;
   margin: 30px auto;
   padding: 10px 0;
   border-top: solid 1px #000;
   border-bottom: solid 1px #000;
   font-size: 12px;
   }
   
   
   .searchtop_btn{
   position: absolute;
   border: solid 1px #000;
   top: 70px;
   right: 30px;
   }
   
   
   .searchtop_btn a{
   padding: 10px 20px;
   display: block;
   text-decoration: none;
   color: #000;
   }
   
   
   .searchtop_btn a:hover{
   background-color: #C8C9CA;
   }
   
   
   #search_name{
   background-color: #C8C9CA;
   padding: 10px 0;
   border: 0;
   }
   
   
   .search_list{
   padding: 0;
   letter-spacing: -1em;
   width: 900px;
   margin: 0 auto;
   padding: 20px 0;
   border-bottom: solid 1px #000;
   font-size: 14px;
   }
   
   
   .search_list li{
   list-style-type: none;
   display: inline-block;
   letter-spacing: 0em;
   padding: 0 1%;
   vertical-align: top;
   }
   
   
   .search_list li:nth-child(1){
   width: 15%;
   }
   
   
   .search_list li:nth-child(2){
   width: 20%;
   }
   
   
   .search_list li:nth-child(3){
   width: 9%;
   }
   
   
   .search_list li:nth-child(4){
   width: 15%;
   }
   
   
   .search_list li:nth-child(5){
   width: 15%;
   }
   
   
   .search_list li:nth-child(6){
   width: 14%;
   }
   
   
   #simple_search{
   width: 960px;
   border: solid 1px #000;
   margin-bottom: 80px;
   }
   
   
   #simple_search_box{
   width: 85%;
   height: 20px;
   font-size: 20px;
   padding: 20px;
   margin-bottom: 30px;
   }
   
   
   #simple_search_btn{
   width: 8%;
   height: 46px;
   float: right;
   border: solid 1px #000;
   background-color: #C8C9CA;
   font-size: 20px;
   margin-bottom: 30px;
   }
   
   
   .search_h{
   display: block;
   background-color: #C8C9CA;
   color: #FFF;
   font-size: 22px;
   text-align: center;
   padding: 10px 0;
   }
   
   
   #manual_search{
   width: 960px;
   border: solid 1px #000;
   margin-bottom: 100px;
   }
   
   
   .manual_search_list{
   width: 24%;
   margin: 10px 2%;
   display: inline-block;
   text-align: right;
   }
   
   
   .manual_search_genre{
   display: inline-block;
   padding: 25px 0;
   }
   
   
   .search_box{
   width: 70%;
   padding: 10px 0 10px 10px;
   margin: 10px 0;
   display: inline-block;
   font-size: 18px;
   }
   
   
   .manual_search_coment{
   width: 70%;
   padding: 10px 0 10px 10px;
   margin: 10px 0;
   display: inline-block;
   font-size: 18px;
   }
   
   
   .search_radio{
   width: 70%;
   display: inline-block;
   vertical-align: top;
   }
   
   
   .search_radio div{
   width: 20%;
   display: inline-block;
   margin: 5px 0;
   }
   
   
   #manual_search_btn{
   width: 8%;
   height: 46px;
   border: solid 1px #000;
   background-color: #C8C9CA;
   font-size: 20px;
   margin: 30px 0;
   }


#ranking{
width: 960px;
margin: 0 auto;
padding: 50px 0;
}


   #ranking_box{
   background-color: #EEEEEF;
   }
   
   
   #ranking_innerbox{
   width: 960px;
   padding-bottom: 20px;
   background-color: #FFF;
   }
   
   
   #topranking_period{
   width: 900px;
   margin: 0 auto;
   padding: 20px 0;
   font-size: 14px;
   font-weight: bold;
   text-align: right;
   }
   
   
   #topranking_name{
   background-color: #C8C9CA;
   padding: 10px 0;
   border: 0;
   }
   
   
   .topranking_list{
   padding: 0;
   letter-spacing: -1em;
   width: 900px;
   margin: 0 auto;
   padding: 20px 0;
   vertical-align: middle;
   border-bottom: solid 1px #000;
   }
   
   
   #ranking_innerbox ul:last-child{
   border: 0;
   }
   
   
   .topranking_list li{
   list-style-type: none;
   display: inline-block;
   letter-spacing: 0em;
   position: relative;
   padding: 0 1%;
   vertical-align: middle;
   }
   
   
   .topranking_list img{
   width: 40px;
   position: absolute;
   top: -25;
   left: 26px;
   }
   
   
   .topranking_list li:nth-child(1){
   width: 8%;
   text-align: center;
   }
   
   
   .topranking_list li:nth-child(2){
   width: 8%;
   text-align: center;
   }
   
   
   .topranking_list li:nth-child(3){
   width: 27%;
   }
   
   
   .topranking_list li:nth-child(4){
   width: 27%;
   }
   
   
   .topranking_list li:nth-child(5){
   width: 17%;
   }
   
   
   .rank_up{
   color: #C7161D;
   }
   
   
   .rank_down{
   color: #003FBC;
   }
   
   
   .ranking_monthno{
   margin: 40px 0;
   text-align: center;
   font-size: 30px;
   }
   
   
   #ranking_navi{
   margin: 30px 0;
   text-align: center;
   font-size: 22px;
   }
   
   
   #ranking_navi a{
   text-decoration: none;
   color: #000;
   margin: 0 30px;
   }
   
   
   #weeklyranking{
   width: 880px;
   margin: 0 auto;
   text-align: left;
   padding-left: 20px;
   }
   
   
   #monthlyranking{
   width: 880px;
   margin: 0 auto;
   background-color: 1D5CAE;
   text-align: left;
   padding-left: 20px;
   }
   
   
   #anisonranking{
   width: 880px;
   margin: 0 auto;
   background-color: E2007F;
   text-align: left;
   padding-left: 20px;
   }
   
   
   .ranking_detail{
   width: 900px;
   margin: 30px auto;
   }
   
   
   .pastranking_box{
   width: 955px;
   text-align: center;
   margin: 80px 0;
   }
   
   
   .pastranking_year{
   width: 955px;
   
   background-color: #C8C9CA;
   border-top: solid 1px #000;
   border-left: solid 1px #000;
   border-right: solid 1px #000;
   font-size: 22px;
   }
   
   
   .pastranking_year a{
   padding: 10px 0;
   display: block;
   text-decoration: none;
   color: #000;
   }
   
   
   .pastranking_month{
   margin: 0;
   padding: 0;
   width: 957px;
   letter-spacing: -1em;
   }
   
   
   .pastranking_month li{
   list-style-type: none;
   display: inline-block;
   letter-spacing: 0em;
   width: 238px;
   height: 60px;
   border-right: solid 1px #000;
   border-bottom: solid 1px #000;
   vertical-align: middle;
   line-height: 60px;
   }
   
   
   .pastranking_month li a{
   margin: 0;
   display: block;
   text-decoration: none;
   text-align: center;
   color: #000;
   }
   
   
   .pastranking_month li:first-child,
   .pastranking_month li:nth-child(5),
   .pastranking_month li:nth-child(9){
   border-left: solid 1px #000;
   }
   
   
   .pastranking_month li a:hover{
   background-color: #C8C9CA;
   }


#newsongs{
width: 960px;
margin: 0 auto;
padding: 50px 0;
}


   #initial{
   padding: 0;
   letter-spacing: -1em;
   width: 900px;
   margin: 30px auto;
   }
   
   
   #initial li{
   list-sty: e-type: none;
   display: inline-block;
   letter-spacing: 0em;
   width: 6.5%;
   border: solid 1px #000;
   text-align: center;
   margin-right: 22.5px;
   }
   
   
   #initial li a{
   text-decoration: none;
   color: #000;
   padding: 5px 0;
   display: block;
   }
   
   
   #initial li:hover{
   background-color: #C8C9CA;
   }
   
   
   #initial li:last-child{
   margin: 0;
   }
   
   
   #topnewsongs_name{
   background-color: #C8C9CA;
   padding: 10px 0;
   border: 0;
   }
   
   
   .topnewsongs_list{
   padding: 0;
   letter-spacing: -1em;
   width: 900px;
   margin: 0 auto;
   padding: 20px 0;
   border-bottom: solid 1px #000;
   font-size: 14px;
   }
   
   
   .topnewsongs_list li{
   list-style-type: none;
   display: inline-block;
   letter-spacing: 0em;
   padding: 0 1%;
   vertical-align: top;
   }
   
   
   .topnewsongs_list li:nth-child(1){
   width: 24%;
   }
   
   
   .topnewsongs_list li:nth-child(2){
   width: 24%;
   }
   
   
   .topnewsongs_list li:nth-child(3){
   width: 10%;
   }
   
   
   .topnewsongs_list li:nth-child(4){
   width: 18%;
   }
   
   
   .topnewsongs_list li:nth-child(5){
   width: 9%;
   }
   
   
   #newsongs_h{
   width: 880px;
   margin: 0 auto;
   text-align: left;
   padding-left: 20px;
   }
   
   
   #genre{
   padding: 0;
   letter-spacing: -1em;
   width: 900px;
   margin: 30px auto 0 auto;
   }
   
   
   #genre li{
   list-style-type: none;
   display: inline-block;
   letter-spacing: 0em;
   border: solid 1px #000;
   margin-right: 25px;
   }
   
   
   #genre li a{
   text-decoration: none;
   color: #000;
   display: block;
   padding: 5px 20px;
   }
   
   
   #genre li:hover{
   background-color: #C8C9CA;
   }
   
   
   #prevnext_box{
   text-align: center;
   margin: 40px 0;
   }
   
   
   #prevnext_box a{
   text-decoration: none;
   color: #000;
   }
   
   
   .prevnext{
   
   margin: 0 30px;
   display: inline-block;
   }
   
   
   .prevnext a{
   border: solid 1px #000;
   padding: 10px 35px;
   display: inline-block;
   text-decoration: none;
   color: #000;
   }
   
   
   .prevnext a:hover{
   background-color: #C8C9CA;
   }


#foot_navi{
text-align: center;
margin-bottom: 80px;
}


   .foot_navi_list{
   text-decoration: none;
   color: #000;
   text-align: center;
   margin: 15px;
   font-size: 14px;
   }
   
   
   .foot_navi_list:hover{
   color: #FF0000;
   }


#footer{
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
background-color: #C7161D;
color: #FFF;
}


   .site{
   width: 320px;
   margin: 20px auto;
   border: solid 1px #FFF;
   }
   
   
   .site a{
   padding-top: 3px;
   padding-bottom: 3px;
   font-size: 14px;
   display: block;
   text-decoration: none;
   color: #FFF;
   }
   
   
   .copy{
   font-size: 11px;
   }
   
   
#topback{
position: fixed;
bottom: 180px;
right: 100px;
z-index: 1000;
}


   #topback img{
   width: 60px;
   }

   .search_artist_list{
   padding: 0;
   letter-spacing: -1em;
   width: 900px;
   margin: 0 auto;
   padding: 20px 0;
   border-bottom: solid 1px #000;
   font-size: 14px;
   }

   .search_artist_list li{
   list-style-type: none;
   display: inline-block;
   letter-spacing: 0em;
   padding: 0 1%;
   vertical-align: top;
   }
   
   
   .search_artist_list li:nth-child(1){
   width: 65%;
   }
   
   
   .search_artist_list li:nth-child(2){
   width: 30%;
   }

   .more2{
   width: 270px;
   margin: 0px auto;
   border: solid 1px #000;
   text-align: center;
   background-color: #FFF;
   }


   .more2 a{
   font-size: 16px;
   display: block;
   padding-top: 5px;
   padding-bottom: 5px;
   text-decoration: none;
   color: #000;
   }
   
   .more2 a:hover{
   background-color: #C8C9CA;
   }