#main_wrapper{width:980px; height:1600px; float:left;}

#box{width:810px; height:auto; float:left;}
#box_main{width:600px; height:auto; margin:10px; float:left;}


#box1{width:600px; height:auto; float:left;}
.box1_title{width:400px; height:20px; margin-top:10px; margin-bottom:10px; float:left;}
.box1_indrank{width:100px; height:16px; margin-top:10px; margin-bottom:10px; font-weight:bold; text-align:center; border:solid 2px #004080; border-radius:7px; float:right;}
.box1_indrank :hover{text-decoration:none;}
.box1_title_mainpic{width:400px; height:180px; float:left;}
.box1_title_mainpic img{width:400px; height:180px;}
.box1_info{width:186px; height:176px; margin-left:10px; border:solid 2px #dcdcdc; float:left;}
.box1_number{width:50px; height:50px; margin-top:10px; margin-left:10px; float:left;}
.box1_number img{width:50px; height:50px;}
.box1_name{width:auto; height:auto; margin-top:20px; margin-left:5px; font-size:22px; float:left;}
.box1_comment{width:176px; height:auto; margin-top:15px; margin-left:10px; float:left;}

#box2{width:600px; height:auto; margin-top:10px; float:left;}
.box2_ranktitle{width:560px; height:30px; margin-left:20px; float:left;}

.box2_rankbox{width:598px; height:auto; margin-top:10px; border:solid 1px #b8b872; float:left;}
.box2_rank{width:576px; height:136px; margin:10px; float:left; border:solid 2px #dcdcdc;} 
.box2_rankkind{width:556px; height:20px; margin:5px 10px;}
.box2_rankpic{width:160px; height:90px; margin:10px; float:left;}
.box2_rankpic img{width:160px; height:90px;}
.box2_articlebox{width:308px; height:65px; margin-top:5px; float:left;}
.box2_rankname{width:308px; height:35px; font-size:32px; float:left;}
.box2_hits{width:308px; height:14px; margin:10px 0px; float:left;}
.box2_nextman{width:308px; height:14px; margin-top:10px; float:left;}
.box2_kohei{width:60px; height:90px; margin:10px; float:right;}
.box2_kohei img{width:60px; height:90px;}


#box_side{width:190px; height:auto; margin-top:10px; background-image: 
 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#23b16a), to(#dcf8ea));
 background: linear-gradient(#23b16a, #dcf8ea);  border-radius:7px; float:left;}
.box_side_title{width:180px; height:20px; margin:5px; float:left;}
.box_side_info{width:180px; height:auto; margin:5px; float:left;}



/* ウィンドウ幅が0～479pxの場合に適用するCSS */
@media screen and ( max-width:479px )
{

#main_wrapper{width:100%; height:auto;}

#index_box{display:none;}

#box{width:100%; height:auto;}
#box_main{width:100%; height:auto; margin:0%;}

#box1{max-width:100%; height:auto;}
.box1_title{width:90%; height:auto; margin-top:3%; margin-bottom:1%; margin-left:1%;}
.box1_indrank{width:auto; height:auto; margin:2%; float:left;}
.box1_indrank a{text-decoration:none;}
.box1_indrank a:link,.box1_indrank a:active,.box1_indrank a:visited{color:midnightblue;}
.box1_indrank a:hover{color:midnightblue;}
.box1_title_mainpic{width:100%; height:auto;}
.box1_title_mainpic img{width:100%; height:auto;}
.box1_info{width:99%; height:auto; margin-top:1%; margin-left:0%; border:solid 2px #dcdcdc; float:left;}
.box1_number{width:20%; height:auto; margin:2%;}
.box1_name{width:auto; height:auto; margin:2%; font-size:3em;}
.box1_comment{width:95%; height:auto; margin2%;}


#box2{width:600px; height:auto; margin-top:10px; float:left;}
.box2_ranktitle{width:560px; height:30px; margin-left:20px; float:left;}

#box2{width:100%; height:auto; margin-top:3%;}
.box2_ranktitle{width:90%; height:auto; margin-left:2%;}
.box2_ranktitle img{width:90%; height:auto;}
.box2_rankbox{width:100%; height:auto; margin-top:3%; border:none;}
.box2_rank{width:95%; height:auto; margin:2% 0% 2% 2%; border:solid 2px #dcdcdc;}
.box2_rankkind{width:95%; height:auto; margin-top:5px; margin-left:2%;}
.box2_rankkind img{width:100%; height:auto;}
.box2_rankpic{width:70%; height:auto; margin:2% 5%;}
.box2_rankpic img{width:70%; height:auto;}
.box2_articlebox{width:55%; height:auto; margin:0% 5% 2%;}
.box2_rankname{width:100%; height:auto; font-size:2em;}
.box2_hits{width:100%; height:auto; margin:0%;}
.box2_nextman{width:100%; height:auto;}
.box2_kohei{width:15%; height:auto; margin:0% 2% 0% 0%;}
.box2_kohei img{width:100%; height:auto;}


#box_side{width:94%; height:auto; margin:3%;}
.box_side_title{width:40%; height:auto; margin:2%;}
.box_side_title img{width:100%; height:auto;}
.box_side_info{width:50%; height:auto; margin:2%}

}