@charset "UTF-8";

/*PC�pcss*/
@media all and (min-width: 721px) {

/* タブ */
#rank_tab{}
#rank_tab.anime{}

.lead{text-align: center; line-height: 1.5em; padding-top: 30px; padding-bottom: 30px; color: #FFFFFF; margin: 0 auto;}
.lead .gunma{color: #69BD73;}
.lead .saitama{color: #FFA64E;}
.lead .tokyo{color: #68A8E8;}	

#rank_tab h2{}
#rank_tab h2.anime{}

#rank_tab .ChangeElem_Btn_Content{
  height: 57px;
	justify-content: center;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
#rank_tab .ChangeElem_Btn{
  width: 188px;
  height: 57px;
  margin: 0 2px;
  z-index: 1;
  cursor: pointer;
}
#rank_tab .ChangeElem_Btn.is-active{pointer-events: none;}
#rank_tab .ChangeElem_Btn:hover{margin-top: 5px; transition: 0.2s;}
#rank_tab .ChangeElem_Btn.is-active:hover{margin-top: 0;}
#rank_tab .ChangeElem_Btn#tab1{background: url(../images/shibu_tab1b.png) no-repeat center bottom;}
#rank_tab .ChangeElem_Btn#tab2{background: url(../images/shibu_tab2b.png) no-repeat center bottom;}
#rank_tab .ChangeElem_Btn#tab3{background: url(../images/shibu_tab3b.png) no-repeat center bottom;}
#rank_tab .ChangeElem_Btn#tab1.is-active{background: url(../images/shibu_tab1a.png) no-repeat center bottom;}
#rank_tab .ChangeElem_Btn#tab2.is-active{background: url(../images/shibu_tab2a.png) no-repeat center bottom;}
#rank_tab .ChangeElem_Btn#tab3.is-active{background: url(../images/shibu_tab3a.png) no-repeat center bottom;}

#rank_tab .ChangeElem_Btn#tab1.anime{animation: slideInDown2 0.1s 0.6s ease-out both;}
#rank_tab .ChangeElem_Btn#tab2.anime{animation: slideInDown2 0.1s 0.7s ease-out both;}
#rank_tab .ChangeElem_Btn#tab3.anime{animation: slideInDown2 0.1s 0.8s ease-out both;}


    
#rank_tab .ChangeElem_Panel{
  width: 1260px;
  margin: 0 auto 30px;
  min-height: 750px;
}

#tab1_con.ChangeElem_Panel{ background: url(../images/shibu_g_bar.gif) repeat-x top rgba(37,11,11,0.80);} 
#tab2_con.ChangeElem_Panel{ background: url(../images/shibu_s_bar.gif) repeat-x top rgba(37,11,11,0.80);}
#tab3_con.ChangeElem_Panel{ background: url(../images/shibu_t_bar.gif) repeat-x top rgba(37,11,11,0.80);}
    

#tab1_con,
#tab2_con,
#tab3_con{ position: relative;} 
    
#tab1_con .g,
#tab2_con .s,
#tab3_con .t{width:363px; height:505px; position: absolute; top:15px; left:5px;} 
    
    #tab1_con .g{background: url(../images/shibu_g_bk.png) no-repeat;}
    #tab2_con .s{background: url(../images/shibu_s_bk.png) no-repeat;}
    #tab3_con .t{background: url(../images/shibu_t_bk.png) no-repeat;} 
    
#tab1_con .midashi,
#tab2_con .midashi,
#tab3_con .midashi{width:130px; height:377px; position: absolute; top:30px; left:180px;}   

    #tab1_con .midashi{background: url(../images/shibu_g_midashi.png) no-repeat;}
    #tab2_con .midashi{background: url(../images/shibu_s_midashi.png) no-repeat;}
    #tab3_con .midashi{background: url(../images/shibu_t_midashi.png) no-repeat;}
    
#tab1_con .text,
#tab2_con .text{font-size: 16px; line-height: 1.5em; color: #FFF;
    position: absolute; top:95px; left:340px; width:410px;}  
#tab3_con .text{font-size: 16px; line-height: 1.5em; color: #FFF;
    position: absolute; top:80px; left:340px; width:410px;}  
    
#tab1_con .text span,
#tab2_con .text span,
#tab3_con .text span{color: #FAC126;}
    
#tab1_con .img_p,
#tab2_con .img_p,
#tab3_con .img_p{width:510px; height: 466px; position: absolute;}
    
    #tab1_con .img_p{background: url(../images/shibu_g_p.png) no-repeat; top:53px; right:40px;}
    #tab2_con .img_p{background: url(../images/shibu_s_p.png) no-repeat; top:53px; right:40px;}
    #tab3_con .img_p{background: url(../images/shibu_t_p.png) no-repeat; top:38px; right:40px;}
    
/*----*/
   
.hyo_box{position: absolute; top:445px; left:32px; width: 1196px; min-height: 258px;
    background: linear-gradient(#BD9C59,#91672F 20%,#91672F); border-radius: 10px; padding: 0 5px 10px;}
.hyo01,.hyo02,.hyo03{width: 375px; padding-top: 46px; float: left; margin: 0 10px;} 
    
.hyo01{background: url(../images/shibu_h01.png) no-repeat center top;} 
.hyo02{background: url(../images/shibu_h02.png) no-repeat center top;}
    
#tab1_con .hyo03{background: url(../images/shibu_h03_g.png) no-repeat center top;}
#tab2_con .hyo03{background: url(../images/shibu_h03_s.png) no-repeat center top;}
#tab3_con .hyo03{background: url(../images/shibu_h03_t.png) no-repeat center top;} 
    
.hyo_box span{color: #FFFFFF; font-size: 14px;}    
    
.ChangeElem_Panel table{ width: 100%; text-align: center;}
.ChangeElem_Panel th{
text-align: center;
  height: 40px;
  line-height: 40px;
  color: #FFF;
    font-size: 14px;
    background: #000;}
    
#tab1_con .hyo03 th{background: #438E46;}
#tab2_con .hyo03 th{background: #D26700;}
#tab3_con .hyo03 th{background: #13488D;}
    
       
.ChangeElem_Panel th span{font-size: 12px; padding-left: 2px;}   
.ChangeElem_Panel td{ height: 30px; border-bottom: 1px #91672F solid; /*font-weight: bold;*/ background-color: #FFF;}
    
  
    .hyo01 td:nth-child(1),
    .hyo02 td:nth-child(1),
    .hyo03 td:nth-child(1){font-weight: bold;}
    
    .hyo01 th:nth-child(6),
    .hyo02 th:nth-child(4){ background:#B0881B;}
    
    .hyo01 td:nth-child(6),
    .hyo02 td:nth-child(4){ background:#FCD467;}
    
#tab1_con .hyo03 th:nth-child(4){ background:#336C35;}
#tab1_con .hyo03 td:nth-child(4){ background:#A1C6A2;} 

#tab2_con .hyo03 th:nth-child(6){ background:#A04E00;}
#tab2_con .hyo03 td:nth-child(6){ background:#E8B37F;}   
    
#tab3_con .hyo03 th:nth-child(6){ background:#0C3D78;}
#tab3_con .hyo03 td:nth-child(6){ background:#86ABD6;} 
    
#tab3_con .hyo03 th:nth-child(1){width:45px;}
    	
@keyframes zoomIn2 {
  from {
      opacity: 0;
      -webkit-transform: scale3d(0, 0, .1) ;
      transform: scale3d(0, 0, .1) ;
    }
    to{
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1) ;
      transform: scale3d(1, 1, 1) ;
    }
}
@keyframes slideInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInIndex {
  from{
    opacity: 0;
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  40%{
    opacity: 0.3;
    -webkit-transform: scale3d(0.98, 0.98, 0.98);
    transform: scale3d(0.98, 0.98, 0.98);
  }
  to{
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    overflow: hidden;
  }
}	
}

/*-----------------------------------------------*/

/*sp�pcss*/

@media all and (max-width: 720px) {
    
.title_box_in{
		height: 110px;
		line-height: 110px;
	}	
/* タブ */
#rank_tab{}
#rank_tab.anime{}

.lead{text-align: center; line-height: 1.5em; padding-top: 30px; padding-bottom: 30px; color: #FFFFFF; margin: 0 auto; font-size: 24px;}
.lead .gunma{color: #69BD73;}
.lead .saitama{color: #FFA64E;}
.lead .tokyo{color: #68A8E8;}	

#rank_tab h2{}
#rank_tab h2.anime{}

#rank_tab .ChangeElem_Btn_Content{
  height: 57px;
	justify-content: center;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
#rank_tab .ChangeElem_Btn{
  width: 188px;
  height: 57px;
  margin: 0 2px;
  z-index: 1;
  cursor: pointer;
}   
#rank_tab .ChangeElem_Btn.is-active{pointer-events: none;}
#rank_tab .ChangeElem_Btn:hover{margin-top: 5px; transition: 0.2s;}
#rank_tab .ChangeElem_Btn.is-active:hover{margin-top: 0;}
#rank_tab .ChangeElem_Btn#tab1{background: url(../images/shibu_tab1b.png) no-repeat center bottom;}
#rank_tab .ChangeElem_Btn#tab2{background: url(../images/shibu_tab2b.png) no-repeat center bottom;}
#rank_tab .ChangeElem_Btn#tab3{background: url(../images/shibu_tab3b.png) no-repeat center bottom;}
#rank_tab .ChangeElem_Btn#tab1.is-active{background: url(../images/shibu_tab1a.png) no-repeat center bottom;}
#rank_tab .ChangeElem_Btn#tab2.is-active{background: url(../images/shibu_tab2a.png) no-repeat center bottom;}
#rank_tab .ChangeElem_Btn#tab3.is-active{background: url(../images/shibu_tab3a.png) no-repeat center bottom;}

#rank_tab .ChangeElem_Btn#tab1.anime{animation: slideInDown2 0.1s 0.6s ease-out both;}
#rank_tab .ChangeElem_Btn#tab2.anime{animation: slideInDown2 0.1s 0.7s ease-out both;}
#rank_tab .ChangeElem_Btn#tab3.anime{animation: slideInDown2 0.1s 0.8s ease-out both;}

#rank_tab .ChangeElem_Panel{
  width: 720px;
  margin: 0 auto 30px;
    min-height: 2300px;
}
    
#rank_tab #tab3_con.ChangeElem_Panel{
  width: 720px;
  margin: 0 auto 30px;
    min-height: 2380px;
}
    
#tab1_con.ChangeElem_Panel{ background: url(../images/shibu_g_bar.gif) repeat-x top rgba(37,11,11,0.80);}   
#tab2_con.ChangeElem_Panel{ background: url(../images/shibu_s_bar.gif) repeat-x top rgba(37,11,11,0.80);}
#tab3_con.ChangeElem_Panel{ background: url(../images/shibu_t_bar.gif) repeat-x top rgba(37,11,11,0.80);}   
     
#tab1_con,
#tab2_con,
#tab3_con{ position: relative;} 
    
#tab1_con .g,
#tab2_con .s,
#tab3_con .t{width:320px; height:1260px; position: absolute; top:15px; left:0px;} 
    
    #tab1_con .g{background: url(../images/sp_shibu_g_bk.png) no-repeat;}
    #tab2_con .s{background: url(../images/sp_shibu_s_bk.png) no-repeat;}
    #tab3_con .t{background: url(../images/sp_shibu_t_bk.png) no-repeat;} 
    
#tab1_con .midashi,
#tab2_con .midashi,
#tab3_con .midashi{width:390px; height:140px; position: absolute; top:45px; left:170px;}   

    #tab1_con .midashi{background: url(../images/sp_shibu_g_midashi.png) no-repeat;}
    #tab2_con .midashi{background: url(../images/sp_shibu_s_midashi.png) no-repeat;}
    #tab3_con .midashi{background: url(../images/sp_shibu_t_midashi.png) no-repeat;}
    
#tab1_con .text,
#tab2_con .text,
#tab3_con .text{font-size: 24px; line-height: 1.5em; color: #FFF;
    position: absolute; top:205px; left:170px; width:520px;}  
    
#tab1_con .text span,
#tab2_con .text span,
#tab3_con .text span{color: #FAC126;}
    
#tab1_con .img_p,
#tab2_con .img_p,
#tab3_con .img_p{width:518px; height: 428px; position: absolute; top:715px; left:170px;}
    
    #tab1_con .img_p{background: url(../images/sp_shibu_g_p.png) no-repeat;}
    #tab2_con .img_p{background: url(../images/sp_shibu_s_p.png) no-repeat;}
    #tab3_con .img_p{background: url(../images/sp_shibu_t_p.png) no-repeat; top:780px;}
    
/*----*/
   
.hyo_box{position: absolute; top:1165px; left:0px; width: 680px;
    background: linear-gradient(#BD9C59,#91672F 20%,#91672F); padding: 0 20px 10px;}
    
#tab3_con .hyo_box{position: absolute; top:1230px; left:0px; width: 680px;
    background: linear-gradient(#BD9C59,#91672F 20%,#91672F); padding: 0 20px 10px;}
    
.hyo01,.hyo02,.hyo03{width: 660px; padding-top: 80px; float: left; margin: 0 10px;} 
    
.hyo01{background: url(../images/sp_shibu_h01.png) no-repeat center top;} 
.hyo02{background: url(../images/sp_shibu_h02.png) no-repeat center top;}
    
#tab1_con .hyo03{background: url(../images/sp_shibu_h03_g.png) no-repeat center top;}
#tab2_con .hyo03{background: url(../images/sp_shibu_h03_s.png) no-repeat center top;}
#tab3_con .hyo03{background: url(../images/sp_shibu_h03_t.png) no-repeat center top;} 
    
.hyo_box span{color: #FFFFFF; font-size: 20px;}    
  
   
.ChangeElem_Panel table{ width: 100%; text-align: center; margin-bottom: 5px; height: 265px;}
.ChangeElem_Panel th{
text-align: center;
  height: 40px;
  line-height: 40px;
  color: #FFF;
    font-size: 26px;
    background: #000;}
    
#tab1_con .hyo03 th{background: #438E46;}
#tab2_con .hyo03 th{background: #D26700;}
#tab3_con .hyo03 th{background: #13488D;}
       
.ChangeElem_Panel th span{font-size: 20px; padding-left: 2px;}   
.ChangeElem_Panel td{ height: 30px; border-bottom: 1px #91672F solid; font-size: 28px; /*font-weight: bold;*/ background-color: #FFF;}
    
    .hyo01 td:nth-child(1),
    .hyo02 td:nth-child(1),
    .hyo03 td:nth-child(1){font-weight: bold;}
    
    .hyo01 th:nth-child(6),
    .hyo02 th:nth-child(4){ background:#B0881B;}
    
    .hyo01 td:nth-child(6),
    .hyo02 td:nth-child(4){ background:#FCD467;}
    
#tab1_con .hyo03 th:nth-child(4){ background:#336C35;}
#tab1_con .hyo03 td:nth-child(4){ background:#A1C6A2;} 

#tab2_con .hyo03 th:nth-child(6){ background:#A04E00;}
#tab2_con .hyo03 td:nth-child(6){ background:#E8B37F;}   

#tab3_con .hyo03 th:nth-child(6){ background:#0C3D78;}
#tab3_con .hyo03 td:nth-child(6){ background:#86ABD6;}   
    	
@keyframes zoomIn2 {
  from {
      opacity: 0;
      -webkit-transform: scale3d(0, 0, .1) ;
      transform: scale3d(0, 0, .1) ;
    }
    to{
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1) ;
      transform: scale3d(1, 1, 1) ;
    }
}
@keyframes slideInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInIndex {
  from{
    opacity: 0;
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  40%{
    opacity: 0.3;
    -webkit-transform: scale3d(0.98, 0.98, 0.98);
    transform: scale3d(0.98, 0.98, 0.98);
  }
  to{
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    overflow: hidden;
  }
}
		
	
}