@charset "utf-8";

/*モーションCSS*/
#Maincontents{
overflow: hidden; 
}

.inner{padding:20px 5px 40px!important;}

.bottom_in{
  transform:translateY(60px);/*タイミングここで調整*/
  opacity:0;
  transition:opacity 0.4s,transform 0.2s;
}

.right_in{
  transform:translateX(300px);
  opacity:0;
  transition:opacity 1s,transform 0.4s;
}

.left_in{
  transform:translateX(-300px);
  opacity:0;
  transition:opacity 1s,transform 0.4s;
}

.top_slide{
  transform:translateY(100px);
  transition:0.5s;
}

.right_slide{
  transform:translateX(-210px);
  transition:0.5s;
}

.left_slide{
  transform:translateX(210px);
  transition:0.5s;
}

.in{
  opacity:1;
  transform:translateX(0);
  transform:translateY(0);
}

.in_mb{
  opacity:1;
  transform:translateX(0);
  transform:translateY(0);
}


.poyoyon{
  animation: poyoyon 4s infinite;
}
 
@keyframes poyoyon {
0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
25%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  30% {
    transform: scale(0.99, 0.9) translate(0, 5px);
  }
  33% {
    transform: scale(1.01, 1.0) translate(0, 8px);
  }
 35% {
    transform: scale(0.98, 1.01) translate(0, -8px);
  }
  38% {
    transform: scale(1.0, 0.99) translate(0, 5px);
  }
  40% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}

/*テキストfadein調整*/
.fadein{
        animation: fadein 2s;
    }

@keyframes fadein {
  0% {opacity:0;transform:translateY(20px);} 
  90% {opacity:0;transform:translateY(20px);} 
  100% {opacity:1;transform:translateY(0);} 
}

/*中大画像fadein調整*/
.bottom_in_auto{
        animation: bottom_in_auto 0.6s;
    }


@keyframes bottom_in_auto {
  0% {transform:translateY(400px);} 
  50% {transform:translateY(400px);} 
  100% {transform:translateY(0);}  
}


/*モーションCSS*/

.chuo_ranking_wrap{
	overflow: hidden; 
	background:#191970;
	padding:40px 0 480px;
	position:relative;
	min-height:calc(100vh - 150px);
}

.chuo_ranking_wrap p{
	color:#fff;
	width:90%;
	max-width:700px;
	margin:0 auto;
	text-shadow: #000 1px 1px 2px;
	z-index:10;
	position:absolute;
	top:260px;
	left:0;
	right:0;
	line-height:260%;
}

h1 img{
	width:95%;
	max-width:1000px;
	margin:20px auto 0;
	display:block;
}

.chuo_img{
	width:900px;
	height:810px;
	background:url(/common_d/connect/future/chuo_ranking/chuo.png) center/contain no-repeat;
	position:absolute;
	bottom:-180px;
	left:0;
	right:0;
	margin:auto;
	z-index:0;
}

.boy{
	width:20%;
	padding-top:20%;
	background:url(/common_d/connect/future/chuo_ranking/boy.png) center/contain no-repeat;
	position:absolute;
	bottom:100px;
	left:8%;
}

.girl{
	width:20%;
	padding-top:20%;
	background:url(/common_d/connect/future/chuo_ranking/girl.png) center/contain no-repeat;
	position:absolute;
	bottom:100px;
	right:4%;
}

.madamada{
	width:100%;
	padding-top:30%;
	margin:0 auto 30px;
	background:url(/common_d/connect/future/chuo_ranking/madamada.png) center/contain no-repeat;
}

.place_up{
	margin-top:-100px;
}

.chuo_ranking_grid,.chuo_ranking_grid2{
	width:100%;
	display: grid;
    justify-content: center;
	column-gap: 20px;
	row-gap: 30px;
	overflow: hidden;
	padding-top:30px;
	margin-bottom:20px;
}


.chuo_ranking_grid{
	grid-template-rows:50px 100px 100px 100px 100px 50px 50px 100px 50px 50px 50px 50px 50px 50px 10px;/*行のトラックの高さ*/
	grid-template-columns:50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px auto;/*列のトラックの幅*/
}

.chuo_ranking_grid2{
	grid-template-rows:20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px ;/* 行のトラックの高さ*/
	grid-template-columns:50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px auto;/*列のトラックの幅*/
}
    


.chuo_ranking_grid > div{
	background-color: #ecf4e3;
	border-radius:10px;
	padding:20px 30px 30px 30px;
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.1));
	display: flex;
	flex-direction: column; /* ★ポイント★ */
	align-items: flex-end;
	position:relative;
}

.chuo_ranking_grid2 > div{
	background-color: #ecf4e3;
	border-radius:10px;
	padding:20px 30px 30px 30px;
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.1));
	display: flex;
	flex-direction: column; /* ★ポイント★ */
	align-items: flex-end;
	position:relative;
}

/*ブルー背景枠*/
.box1_info,.box2_info,.box3_info,.box6_info,.box9_info,.box14_info,.box17_info{
	background: #00a0e9;
	color:#fff;
	padding:10px;
	font-size:0.8em;
	position:relative;
	word-break:break-all;
    line-height: 1.6;

}

/*ブルー背景枠のchechアイコン右つき*/
.box1_info:after,.box3_info:after,.box6_info:after,.box17_info:after{
	content:"";
	width:50px;
	height:50px;
	background:url(/common_d/connect/future/chuo_ranking/check_r.png) center/contain no-repeat;
	position:absolute;
	top:-30px;
	right:-30px;
}

/*ブルー背景枠のchechアイコン左つき*/
.box2_info:after,.box4_info:after,.box5_info:after,.box8_info:after,.box9_info:after,.box14_info:after{
	content:"";
	width:50px;
	height:50px;
	background:url(/common_d/connect/future/chuo_ranking/check_l.png) center/contain no-repeat;
	position:absolute;
	top:-30px;
	left:-30px;
}

/*-------------ランキング枠-------------*/
.box1 {
	grid-row: 2 / 4;
	grid-column: 1 / 7;
    z-index:10;
    background:url(/common_d/connect/future/chuo_ranking/1.png) left 20px bottom 10px/200px no-repeat;

}

.box2 {
	grid-row: 2 / 4;
	grid-column: 10 / 16;
    z-index:10;
	background:url(/common_d/connect/future/chuo_ranking/2.png) left 20px bottom 10px/200px no-repeat;
}

.box2 .source {
    margin-right: 100px;
}

.box1 .number, .box2 .number{
	margin-top:0!important;
}


.box3 {
	grid-row:4 / 6;
	grid-column: 1 / 5;
	z-index:10;
    background: url(/common_d/connect/future/chuo_ranking/5.png) left 20px bottom 10px/160px no-repeat;
}

.box4_23 {
	grid-row:4 / 6;
	grid-column: 8 / 12;
	z-index:10;
}


.box5_23 {
	grid-row:4 / 6;
	grid-column: 12 / 16;
	z-index:10;
}

.box5 {
	grid-row: 9 / 12;
	grid-column: 10 / 16;
    background:url(/common_d/connect/future/chuo_ranking/10.png) left 20px bottom 10px/130px no-repeat;
}


.box6 {
	grid-row: 6 / 9;
	grid-column: 1 / 5;
	z-index:10;
	margin-right:20px;
    background:url(/common_d/connect/future/chuo_ranking/6.png) left 20px bottom 10px/160px no-repeat;
}


.box9 {
    grid-row: 6 / 9;
    grid-column: 11 / 16;
    background:url(/common_d/connect/future/chuo_ranking/9.png) left 20px bottom 10px/180px no-repeat;
    z-index: 10;
}



.box11 {
	grid-row: 9 / 12;
	grid-column: 1 / 5;
    background:url(/common_d/connect/future/chuo_ranking/11.png) left 20px bottom 10px/120px no-repeat;
}


.box12 {
	grid-row: 9 / 12;
	grid-column: 5 / 10;
    background:url(/common_d/connect/future/chuo_ranking/12.png) left 20px bottom 10px/140px no-repeat;
}



.box14 {
	grid-row: 7 / 13;
	grid-column: 12 / 16;
	z-index:10;
    background:url(/common_d/connect/future/chuo_ranking/2026_new2.png) left 30px top 80px/90px no-repeat;
}

.box14_info {
grid-row: 7 /13;
    grid-column: 9 / 13;
    z-index: 5;
    padding: 10px 50px 0 10px;
    line-height: 1.5;
    letter-spacing: 0.6px;
    margin:20px 10px 0 0;
}

.box14_info .mboff {
    display: inline;
}

.box17 {
    grid-row: 25 / 31;
    grid-column: 4 / 11;
    z-index: 10;
    background:url(/common_d/connect/future/chuo_ranking/17.png) left 20px center 10px/160px no-repeat;
}


.box17_info{
    grid-row: 25 / 32;
    grid-column: 10 / 15;
    padding: 20px 10px 0 60px;
    z-index: 5;
    margin: 10px -30px 60px 0px;
    line-height: 1.5;
}

.box17 > div {
	display:flex;
	justify-content:space-between;
	}

.box17_1 {
	width:45%;
	display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
    background:url(/common_d/connect/future/chuo_ranking/17_2.png) left 10px bottom 0/120px no-repeat;
}

.box17_2 {
	width:48%;
	display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
}


.box17_1 .source {
    bottom: -35px;
	left:-30px;
	}


.box17_2 h2 .sfont17{
	font-size:0.9em;
}



.box26 {
	grid-row: 13 / 19;
	grid-column: 1 / 9;
	z-index:10;
    background:url(/common_d/connect/future/chuo_ranking/2026_new5.png) left 100px top 50px/280px no-repeat;
}


.box27 {
	grid-row: 19 / 25;
	grid-column: 1 / 5;
	z-index:10;
	background:url(/common_d/connect/future/chuo_ranking/31.png) left 20px bottom 10px/200px no-repeat;
}

.box27 .number{
    margin-top:0;
}


.box28 {
    grid-row: 25 / 30;
    grid-column: 6 / 11;
	z-index:10;
	background:url(/common_d/connect/future/chuo_ranking/18.png) left 5px bottom 10px/130px no-repeat;
}



.box29 {
    grid-row: 12 / 15;
    grid-column: 1 / 6;
	z-index:10;
	background:url(/common_d/connect/future/chuo_ranking/29.png) left 20px bottom 10px/150px no-repeat;
}


.box30 {
    grid-row: 12 / 15;
    grid-column: 6 / 12;
    z-index: 10;
    background: url(/common_d/connect/future/chuo_ranking/30.png) left 20px bottom 10px/150px no-repeat;
}

.box31 {
    grid-row: 1 / 7;
    grid-column: 1 / 8;
	z-index:10;
    display:inherit!important;
    flex-direction: row!important;
    align-items: flex-start!important;
}


.box32 {
    grid-row: 1 / 7;
    grid-column: 5 / 9;
	z-index:10;
}

.box33 {
    grid-row: 1 / 7;
    grid-column: 9 / 16;
    z-index: 10;
    display:inherit!important;
    flex-direction: row!important;
    align-items: flex-start!important;
}

.box31 > div,
.box33 > div{
    display:flex;
    flex-direction: row!important;
    justify-content:flex-end;
}

.ta_right{text-align: right;}

.box31 > div div,
.box33 > div div,
.box41 > div div{
    width:50%;
    text-align: center;
}

.box31 > div div p,
.box33 > div div p,
.box41 > div div p{
     text-align: center;
    color:#00a0e9;    
}


.box34 {
    grid-row: 25 / 30;
    grid-column: 1 / 6;
    z-index: 10;
	background:url(/common_d/connect/future/chuo_ranking/26.png) left 20px bottom 10px/200px no-repeat;	
}

.box35 {
    grid-row: 19 / 25;
    grid-column: 1 / 6;
	z-index:10;
    background:url(/common_d/connect/future/chuo_ranking/2026_new3.png) left 20px bottom 50px/160px no-repeat;
}

.box36 {
    grid-row: 7 / 13;
    grid-column: 1 / 6;
	z-index:10;
}

.box37 {
    grid-row: 7 / 13;
    grid-column: 6 / 11;
	z-index:10;
}


.box38 {
    grid-row: 19 / 25;
    grid-column: 6 / 11;
	z-index:10;
    background:url(/common_d/connect/future/chuo_ranking/13.png) left 20px bottom 10px/150px no-repeat;
}


.box39 {
    grid-row: 19 / 25;
    grid-column: 11 / 16;
	z-index:10;
    background:url(/common_d/connect/future/chuo_ranking/22.png) left 20px bottom 10px/120px no-repeat;
}

.box39 .number{
    margin-top:60px;
}


.box40 {
    grid-row: 25 / 30;
    grid-column: 11 / 16;
    background:url(/common_d/connect/future/chuo_ranking/40_2025.png) left 20px bottom 0/150px no-repeat;
}

.box41 {
    grid-row: 7 / 13;
    grid-column: 1 / 8;
    z-index: 10;
    display:inherit!important;
    flex-direction: row!important;
    align-items: flex-start!important;
    background:url(/common_d/connect/future/chuo_ranking/2026_new1.png) left 20px top 100px/150px no-repeat;
}

.box41 > div{
    display:flex;
    flex-direction: row!important;
    justify-content:flex-end;
}
 

.box41 td {
	text-align: center;
    line-height:1.4;
}

.box41 .padding-r{
	padding-right:40px;
}

.box42 {
	grid-row: 13 / 19;
	grid-column: 9 / 16;
	z-index:10;
    background:url(/common_d/connect/future/chuo_ranking/2026_new4.png) left 100px top 100px/160px no-repeat;
}


/*-------------モーションブルー枠-------------*/

.box1_info{
  	grid-row: 1 / 2;
  	grid-column: 1 / 4;
	margin-bottom:-30px;
	z-index:100;
}



.box2_info{
  	grid-row: 2 / 4;
  	grid-column: 8 / 11;
	margin:5px;
    padding-right: 55px;
	z-index:5;
}



.box3_info{
	grid-row: 5/ 6;
	grid-column: 5 / 8;
	margin-left:-20px;
	z-index:5;
	margin-top:10px;
	margin-right:15px;
}


.box6_info {
    grid-row: 6 / 8;
    grid-column: 4 / 7;
    padding: 10px 10px 0 40px;
    z-index: 5;
    margin-top: 20px;
}


.box9_info {
    grid-row: 8 / 8;
    grid-column: 9 / 11;
    z-index: 5;
    margin: -10px -30px 10px 0;
    text-align: inherit!important;
}






/*----------------ランキングh2見出し-------------*/

.chuo_ranking_grid h2,.chuo_ranking_grid2 h2{
	font-size:1.1em;
	color:#00a0e9;
	flex-grow: 1; /* ★ポイント★ */
	width:100%;
}

.chuo_ranking_grid h2 span,.chuo_ranking_grid2 h2 span{
	font-size:1.3em;
}


.chuo_ranking_grid li h2,.chuo_ranking_grid2 li h2 span{
	font-size:1.4em;
	color:#00a0e9;
	margin-right:3px;
}

/*----------------ランキング数字-------------*/
.number{
	display:inline-block;
	margin-top:30px;
	color:#00a0e9;
	font-size:2em;
	font-weight:bold;
	background:-webkit-linear-gradient(bottom, #ffe100 15px, transparent 16px);
	background:-o-linear-gradient(bottom, #ffe100 15px, transparent 16px);
	background:linear-gradient(to top, #ffe100 15px, transparent 16px);


}
.number span{
	font-size:3.1em;
	margin-right:3px;
}

/*----------------ランキング人数-------------*/
.details{
	text-align:right;
	color:#00a0e9;
    line-height: 1.2;
}

/*----------------ランキング出典-------------*/
.source{
	color:#777;
	width:95%;
	font-size:0.6em;
	position:absolute;
	bottom:8px;
	left:0;
	right:0;
	margin:auto;
	line-height:1;
	letter-spacing:0.03em;
	word-break:break-all;
    text-align: right;
    font-feature-settings: "palt";
}

/*----------------注釈-------------*/
.note_txt{
	color:#777;
	font-size:0.7em;
	line-height: 150%;
	text-align: right;
}

/*----------------人数-------------*/
.ab{
	position:absolute;
	bottom:8px;
	right:5px;
}


/*----------------隙間埋め-------------*/
.img_univ{
	background: url(/common_d/connect/future/chuo_ranking/img1.png) center/contain no-repeat;
  	grid-row:12 / 15;
  	grid-column: 13 / 16;
}

.img_baseball{
	background: url(/common_d/connect/future/chuo_ranking/img2.png) center/contain no-repeat;
	grid-row: 5 / 7;
	grid-column: 1 / 4;
}

.img_soccer{
	display:none;
}

.img_pen3{
	background: url(/common_d/connect/future/chuo_ranking/img3.png) center/contain no-repeat;
	grid-row: 2 / 4;
	grid-column: 7 / 7;
}

.img_pen4{
	background: url(/common_d/connect/future/chuo_ranking/img4.png) center/contain no-repeat;
    grid-row: 4 / 4;
    grid-column: 5 / 8;
}
.img_pen5{
	background: url(/common_d/connect/future/chuo_ranking/img4.png) center/contain no-repeat;
	grid-row: 3 / 4;
    grid-column:5 / 8;
}

.img_pen6{
	background: url(/common_d/connect/future/chuo_ranking/img6.png) center/contain no-repeat;
	grid-row: 15 / 16;
	grid-column:1 / 4;
}

.img_pen7{
	background: url(/common_d/connect/future/chuo_ranking/img3.png) center/contain no-repeat;
    grid-row: 7 / 9;
    grid-column: 7 / 8;
}

.img_pen8{
	background: url(/common_d/connect/future/chuo_ranking/img3.png) center/contain no-repeat;
    grid-row:  2 / 7;
    grid-column: 8 / 9;
}

.img_pen9{
	display:none;
}

.img_good{
	display:none;
}

.txt_small {
	font-size:0.9em;
}

.txt_blue {
	color:#00a0e9;
}





/* ==========================================================================================

for タブレット
========================================================================================== */

@media all and (max-width: 1024px ) and (min-width: 600px ) {

/*----------------ランキング数字-------------*/
.number{
	margin-top:10px;
}

h1 img {
    margin: 0 auto;
}

.chuo_ranking_wrap {
    padding: 40px 0 360px;
    min-height: 300px;
}
    
.chuo_ranking_wrap p {
    top: 180px;
    line-height: 220%;
}

.chuo_img{
	width:700px;
	height:630px;
	bottom:-180px;
}
    
    
.girl{
    right: -20px;
	bottom:40px;
}
.boy{
    left: 2%;
	bottom:40px;
}
    
.chuo_ranking_grid {
	grid-template-rows:50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;/*行のトラックの高さ*/
	grid-template-columns:50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;/*列のトラックの幅*/
}
    
.chuo_ranking_grid2 {
    grid-template-rows: 20px 20px 100px 100px 50px 20px 100px 20px 50px 100px 20px 20px 50px 20px 20px 20px 20px 20px 100px 20px 20px 100px 20px;	
    grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
}


.number span {
    font-size: 2.3em;
}


.box1 {
	grid-row: 2 / 5;
	grid-column: 1 / 5;
}

.box2 {
	grid-row: 2 / 5;
	grid-column: 7 / 11;
}
    

.box2_info{
  	grid-row: 2 / 5;
  	grid-column: 5 / 8;
  	margin-left:10px;
}


.box3 {
  	grid-row:5 / 8;
  	grid-column: 1 / 5;
}
    


.box3_info{
	grid-row: 5/ 8;
	grid-column: 5 / 7;
}
    
    
.box4_23 {
    grid-row: 5 / 8;
    grid-column: 7 / 11;
}

.img_pen7 {
    display: none;
}   

    
.box5 {
	grid-row: 14 / 17;
	grid-column: 4 / 8;
    background: url(/common_d/connect/future/chuo_ranking/10.png) left 20px bottom 10px/120px no-repeat;
}
    
    
    
.box5_23 {
    grid-row: 8 / 11;
    grid-column: 1 / 4;
}
    
    
.box6 {
    grid-row: 8 / 11;
    grid-column: 4 / 8;
    z-index: 10;
    margin-right: 20px;
    background: url(/common_d/connect/future/chuo_ranking/6.png) left 20px bottom 10px/160px no-repeat;
}
    
.box6_info {
    grid-row: 8 / 10;
    grid-column: 7 / 11;
    padding: 10px 10px 0 40px;
    margin:20px 30px 0 0;
}
    
    
    
.box9 {
    grid-row: 11 / 14;
    grid-column: 3 / 8;
    background: url(/common_d/connect/future/chuo_ranking/9.png) left 20px bottom 10px/160px no-repeat;
    z-index: 10;
}
    
 
.box9_info {
    grid-row: 11 / 13;
    grid-column: 1 / 4;
    z-index: 5;
    margin: 10px 0 0 30px;
    text-align: inherit!important;
    padding: 10px 50px 10px 10px;
}
      
.box11 {
    grid-row: 11 / 14;
    grid-column: 8 / 11;
    background: url(/common_d/connect/future/chuo_ranking/11.png) left 20px bottom 10px/120px no-repeat;
}
    

.box12 {
    grid-row: 14 / 17;
    grid-column: 1 / 4;
    background: url(/common_d/connect/future/chuo_ranking/12.png) left 0 bottom 10px/140px no-repeat;
}
    
    
 .box14 {
    grid-row: 10 / 13;
    grid-column: 6 / 11;
    z-index: 10;
    background: url(/common_d/connect/future/chuo_ranking/2026_new2.png) left 50px top 60px / 80px no-repeat;
} 
    
  
.box14_info {
    grid-row: 10 / 13;
    grid-column: 1 / 7;
    z-index: 5;
    padding: 10px 50px 0 10px;
    line-height: 1.6;
    letter-spacing: normal;
    margin: 20px 10px 0 30px;
}
    
.box17 {
    grid-row: 21 / 26;
    grid-column: 5 / 11;
    z-index: 10;
    background: url(/common_d/connect/future/chuo_ranking/17.png) left 20px center 10px/160px no-repeat;
}
    
.box17_1 {
    background: url(/common_d/connect/future/chuo_ranking/17_2.png) left 0 bottom 10px/120px no-repeat;
}
    
.box17_2 {
    background: none;
}
    
.box17_info {
    grid-row: 21 / 26;
    grid-column: 2 / 5;
    padding: 20px 30px 20px 10px;
    z-index: 5;
    margin: 10px -40px 30px -45px;
}
    
    
.box17_info:after {
    content: "";
    width: 50px;
    height: 50px;
    background: url(/common_d/connect/future/chuo_ranking/check_l.png) center/contain no-repeat;
    position: absolute;
    top: -30px;
    right: 250px;
}
    
.box26 {
    grid-row: 13 / 17;
    grid-column: 1 / 6;
    z-index: 10;
    background: url(/common_d/connect/future/chuo_ranking/2026_new5.png) left 20px top 45px / 200px no-repeat;
}


    
.box27 {
    grid-row: 13 / 16;
    grid-column: 6 / 11;
    background: url(/common_d/connect/future/chuo_ranking/31.png) left 20px bottom 10px/150px no-repeat;
}
  
    
.box28 {
    grid-row: 23 / 26;
    grid-column: 1 / 6;
    z-index: 10;
    background: url(/common_d/connect/future/chuo_ranking/18.png) left 40px bottom 5px/120px no-repeat;
}
 
 .box29 {
    grid-row: 14 / 17;
    grid-column: 8 / 11;
    z-index: 10;
    background: url(/common_d/connect/future/chuo_ranking/29.png) left 5px bottom 20px/100px no-repeat;
}   

    

 .box30 {
    grid-row: 17 / 21;
    grid-column: 1 / 7;
    z-index: 10;
    background: url(/common_d/connect/future/chuo_ranking/30.png) left 20px bottom 10px/130px no-repeat;
}   

    
.madamada {
    width: 100%;
    padding-top: 0;
    margin: 0 auto 30px;
    background: url(/common_d/connect/future/chuo_ranking/madamada.png) center/contain no-repeat;
    height: 300px;
}   
 
.box31 {
    grid-row: 1 / 4;
    grid-column: 1 / 9;
}
    
.box32 {
    grid-row: 1 / 4;
    grid-column: 6 / 11;
}    
    
.box33 {
    grid-row: 4 / 7;
    grid-column: 3 / 11;
    z-index: 10;
    display: inherit!important;
    flex-direction: row!important;
    align-items: flex-start!important;
} 

.img_univ {
    background: url(/common_d/connect/future/chuo_ranking/img1.png) center/contain no-repeat;
    grid-row: 17 / 21;
    grid-column: 8 / 11;
}    
    
.box34 {
    grid-row: 20 / 23;
    grid-column: 6 / 11;
    z-index: 10;
    background: url(/common_d/connect/future/chuo_ranking/26.png) left 20px bottom 0px / 160px no-repeat;
}
    
    
.box35 {
    grid-row: 17 / 20;
    grid-column: 1 / 6;
    background: url(/common_d/connect/future/chuo_ranking/2026_new3.png) left 20px bottom 20px / 160px no-repeat;
}
    
.chuo_ranking_grid2 .box33 h2,.chuo_ranking_grid2 .box35 h2 {
 font-feature-settings: "palt";
}
    

 .box36 {
    grid-row: 10 / 13;
    grid-column: 6 / 11;
	z-index:10;
}

.box37 {
    grid-row: 13 / 16;
    grid-column: 1 / 6;
	z-index:10;
}


.box38 {
    grid-row: 17 / 20;
    grid-column: 6 / 11;
	z-index:10;
    background:url(/common_d/connect/future/chuo_ranking/13.png) left 20px bottom 10px/120px no-repeat;
}


.box39 {
    grid-row: 20 / 23;
    grid-column: 1 / 6;
	z-index:10;
    background:url(/common_d/connect/future/chuo_ranking/22.png) left 20px bottom 10px/120px no-repeat;
}
    
.box39 .number {
    margin-top: 30px;
}


.box40 {
    grid-row: 23 / 26;
    grid-column: 6 / 11;
    background:url(/common_d/connect/future/chuo_ranking/40_2025.png) left 20px bottom 0/120px no-repeat;
}
	
.box41 {
    grid-row: 7 / 10;
    grid-column: 1 / 9;
}
	
.box42 {
  	grid-row:13 / 17;
    grid-column: 6 / 11;
    background: url(/common_d/connect/future/chuo_ranking/2026_new4.png) left 50px top 80px / 120px no-repeat;
}

.box42 .source {
    bottom: 1px;
}
    

.img_baseball{
  	grid-row:5 / 12;
  	grid-column: 1 / 4;
}


.img_univ{
	display:block;
}


.img_soccer{
  	grid-row:7 / 10;
  	grid-column: 9 / 11;
	background: url(/common_d/connect/future/chuo_ranking/img25.png) center/contain no-repeat;
	z-index: 10;
	display:block;
}
    
.img_pen4 {
	display:none;
}
    
.img_pen5 {
	display:none;
}

.img_pen8 {
    grid-row: 4 / 7;
    grid-column: 1 / 2;
}
	
.img_good{
  	grid-row:1 / 4;
  	grid-column: 9 / 11;
	background: url(/common_d/connect/future/chuo_ranking/img5.png) center/contain no-repeat;
	z-index: 10;
	display:block;
}
   

}/*タブレットここまで*/


/* =============================================

for スマホ
============================================= */


@media all and (max-width: 599px ) {

.right_slide{
  transform:translateX(-160px);
  transition:0.5s;
}

.left_slide{
  transform:translateX(160px);
  transition:0.5s;
}

.in{
  opacity:1;
  transform:translateX(0);
  transform:translateY(0);
}

.in_mb{
  opacity:1;
  transform:translateX(0);
  transform:translateY(0);
}

.poyoyon{
  animation: poyoyon 4s infinite;
}
 
@keyframes poyoyon {
0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
25%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  30% {
    transform: scale(0.99, 0.9) translate(0, 5px);
  }
  33% {
    transform: scale(1.01, 1.0) translate(0, 8px);
  }
 35% {
    transform: scale(0.98, 1.01) translate(0, -8px);
  }
  38% {
    transform: scale(1.0, 0.99) translate(0, 5px);
  }
  40% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}


.chuo_ranking_grid,.chuo_ranking_grid2 {
    padding-top: 100px;
    padding-left: 20px;
    justify-content: normal;
}

.chuo_ranking_grid{
	grid-template-rows:20px 20px 20px 20px 30px 30px 30px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;/*行のトラックの高さ*/
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr auto;/*列のトラックの幅*/
}


.chuo_ranking_grid2{
	grid-template-rows:20px auto;
	grid-template-columns:50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px auto;/*列のトラックの幅*/
}
       
.number{
	margin-top:10px;
    font-size: 1.5em;
}
    
.number span {
    font-size: 2.7em;
}
    
.chuo_ranking_grid h2,.chuo_ranking_grid2 h2 {
    flex-grow: 0;
    margin-bottom:20px;
    line-height:1.3;
    font-size:1em;
    letter-spacing: -0.01em;
}
    
.chuo_ranking_grid > div {
    padding: 10px;
}

.chuo_ranking_grid2 > div {
    padding: 10px;
}


.chuo_ranking_wrap {
    padding: 20px 0 360px;
    min-height:calc(100vh - 350px);
}

h1 img {
    width: 100%;
}
	
.chuo_img {
    width: 90%;
    height:0;
	padding-top:81%;
	bottom: -50px;
}

.chuo_ranking_wrap p {
    margin: 0 auto;
	top:120px;
	font-size:0.9em;
    line-height:1.7;
}

.girl {
    width: 50%;
    height:0;
	padding-top:50%;
    bottom: 0;
    right: -50px;
}

.boy {
    width: 50%;
    height:0;
	padding-top:50%;
	bottom: 0;
    left:-50px;
}


.madamada {
    width: 100%;
    padding-bottom: 20px;
    margin-top: -20px;
    background: url(/common_d/connect/future/chuo_ranking/madamada.png) center/cover no-repeat;
}


.box1 {
  	grid-row: 1 / 5;
  	grid-column: 1 / 7;
    z-index: 10;
}
    
.box1_info {
    grid-row: 1 / 3;
    grid-column: 3 / 5;
    z-index: 1;
    padding: 10px 10px 0 60px;
    margin: 10px -55px -30px 0;
}
    
    
.box1_info:after {
    content: "";
    width: 40px;
    height: 40px;
    background: url(/common_d/connect/future/chuo_ranking/check_r.png) center/contain no-repeat;
    position: absolute;
    top: -20px;
    right: -20px;
}
    

.box2 {
  	grid-row: 5 / 9;
  	grid-column: 3 / 7;
    z-index: 10;
    background: url(/common_d/connect/future/chuo_ranking/2.png) left 5px bottom 10px/120px no-repeat;
}

.box2 .source {
    margin-right: auto;
}
    
.box2_info:after {
    width: 40px;
    height: 40px;
    top: -28px;
    left: -20px;
}

.box2_info {
    grid-row: 5 / 9;
    grid-column: 1 / 4;
    z-index: 0;
    padding: 10px 40px 0 10px;
    line-height: 1.5;
}
 
.box3 {
  	grid-row:9 / 13;
  	grid-column: 1 / 5;
    background:url(/common_d/connect/future/chuo_ranking/5.png) left 10px bottom 10px/110px no-repeat;
}

.box3_info {
    grid-row: 9/ 13;
    grid-column: 4 / 7;
    margin: 10px 15px 0 30px;
    padding: 10px 10px 0 20px;
    line-height: 1.4;
}

.box3_info:after{
    width: 40px;
    height: 40px;
    top: -25px;
    right: -20px;
}
    
 .box4_23 {
    grid-row: 13 / 17;
    grid-column: 1 / 4;
}   

 .box5_23 {
    grid-row: 13 / 17;
    grid-column: 4 / 7;
}
    

.box5_info{
	grid-row: 27 / 28;
    grid-column: 1 / 6;
    padding: 10px 10px 0 20px;
    margin: 10px 10px -30px 30px;
}

.box5 {
    grid-row: 29/ 33;
    grid-column: 1 / 4;
    background: url(/common_d/connect/future/chuo_ranking/10.png) left 0px bottom 20px/100px no-repeat;
}

.box5 .number{
	margin-top:-10px;
}

.box5 .details {
    margin-bottom: 20px;
}

.box6_info {
    grid-row: 17 / 21;
    grid-column: 4 / 7;
    padding: 10px 10px 0 30px;
    margin: 10px 20px 0 20px;
}


.box6 {
    grid-row: 17 / 21;
    grid-column: 1 / 5;
    margin-right: 0px;
}
    
.box6_info:after{
    width: 40px;
    height: 40px;
    top:-20px;
    right:-20px;
}
    
    
.box9 {
    grid-row: 21 / 25;
    grid-column: 3 / 7;
    background: left 0px bottom -10px;
}
    

.box9_info {
    grid-row: 21 / 25;
    grid-column: 1 / 4;
    margin: 10px 30px 0 20px;
}
  
.box9_info:after {
    content: "";
    width: 40px;
    height: 40px;
    top: -25px;
    left: -25px;
}
    
.box11 {
    grid-row: 25 / 29;
    grid-column: 1 / 4;
    background: url(/common_d/connect/future/chuo_ranking/11.png) left 20px bottom 10px/100px no-repeat;
}
    
.box12 {
    grid-row: 25 / 29;
    grid-column: 4 / 7;
    background: url(/common_d/connect/future/chuo_ranking/12.png) left -10px bottom 10px/100px no-repeat;
}

.box14_info {
    grid-row: 14 / 19;
    grid-column: 1 / 4;
    margin: 10px 45px 0 10px;
    padding: 10px;
}

.box14_info .mboff {
    display: none;
}

.box14 {
    grid-row: 14 / 19;
    grid-column: 3 / 6;
    z-index: 10;
    background: url(/common_d/connect/future/chuo_ranking/2026_new2.png) left 30px top 50px / 80px no-repeat;
}

.box14 h2{
    margin-bottom:90px;
}
  
.box14_info:after {
    width: 40px;
    height: 40px;
    top: -25px;
    right: -22px;
}
 
.box17_info {
    grid-row: 43/ 47;
    grid-column: 2 / 6;
    margin: 10px 20px -20px -30px;
    padding: 10px;
    line-height: 1.4;
}
    
.box17_info:after {
    width: 40px;
    height: 40px;
    top: -25px;
    right: -21px;
}


.box17 {
    grid-row: 46 / 50;
    grid-column: 1 / 6;
    margin-top: 20px;
    margin-right: 0;
    display: block!important;
}

.box17 > div {
	padding:0;
	display:block!important;
	}

.box17_1{
    width:100%;
    background:none;
    }
    
.box17_1 h2{
    margin-bottom:0;
    }

.box17_2{
    width:100%;
    background:url(/common_d/connect/future/chuo_ranking/17_2.png) left 10px bottom 10px/50px no-repeat;
    }
    
.box17_2 h2{
    margin-bottom:0;
    }


.box26{
	grid-row: 19 / 23;
	grid-column: 1 / 6;
	z-index:10;
    background: url(/common_d/connect/future/chuo_ranking/2026_new5.png) left 30px top 30px / 180px no-repeat;
}

.box27 {
	grid-row: 31 / 35;
	grid-column: 1 / 6;
    background: url(/common_d/connect/future/chuo_ranking/31.png) left 20px bottom 10px/120px no-repeat;
}
    

.box28 {
    grid-row: 31 / 35;
    grid-column: 1 / 4;
    background:url(/common_d/connect/future/chuo_ranking/18.png) left 20px bottom 10px/90px no-repeat;
}
    
.box28 h2{
margin-bottom:0;
}

.box28 .number{
margin-top:15px;
}


.box29 {
    grid-row: 29 / 33;
    grid-column: 4 / 7;
    background: url(/common_d/connect/future/chuo_ranking/29.png) left 10px bottom 50px/100px no-repeat;
}  
    
.box30 {
    grid-row: 33 / 37;
    grid-column: 1 / 7;
    background: url(/common_d/connect/future/chuo_ranking/30.png) left 20px bottom 10px/100px no-repeat;
    margin-bottom: 20px;
}
    
.box31 {
    grid-row: 1 / 5;
    grid-column: 1 / 6;
}
    
.box31 h2,.box32 h2{
margin-bottom:0;
}

.box31 .number,
.box33 .number,
.box41 .number {
    margin-bottom: 10px;
}

.box26 .source,
.box31 .source,
.box33 .source {
    bottom: 3px;
}
.box32 {
    grid-row: 4 / 8;
    grid-column: 1 / 6;
}
    
.box33 {
    grid-row: 5 / 9;
    grid-column: 1 / 6;
    z-index: 10;
    display: inherit!important;
    flex-direction: row!important;
    align-items: flex-start!important;
}
    
.box33 h2{
    margin-bottom:0;
}
    
.box34 {
    grid-row: 23 / 27;
    grid-column: 1 / 4;
	background:url(/common_d/connect/future/chuo_ranking/26.png) left 20px top 40px/100px no-repeat;
}
   
.box34 h2{
    margin-bottom:40px;
}
 
.box35 {
    grid-row: 23 / 27;
    grid-column: 4 / 6;
    z-index: 10;
    background: url(/common_d/connect/future/chuo_ranking/20.png) left 20px top 40px/90px no-repeat;
}
    
.box35 h2{
    margin-bottom:40px;
}
    
    
.box35 .number{
    margin-top:-10px;
}
    
    
    
.box36 {
    grid-row: 11 / 14;
    grid-column: 1 / 6;
}
    
.box36 h2{
    margin-bottom:0;
}
    
.box36 .number{
    margin-top:-10px;
}
    
.box37 {
    grid-row: 14 / 17;
    grid-column: 1 / 6;
}
    
.box37 h2{
    margin-bottom:0;
}
    
.box38 {
    grid-row: 27 / 31;
    grid-column: 1 / 3;
    z-index: 10;
    background: url(/common_d/connect/future/chuo_ranking/13.png) left 5px bottom 20px/70px no-repeat;
}
    
.box39 {
    grid-row: 27 / 31;
    grid-column: 3 / 6;
    z-index: 10;
    background: url(/common_d/connect/future/chuo_ranking/22.png) left 10px bottom 15px/70px no-repeat;
}
    
.box39 .number {
    margin-top: 30px;
}
    
.box40 {
    grid-row: 31 / 35;
    grid-column: 4 / 6;
    background: url(/common_d/connect/future/chuo_ranking/40.png) left 0 bottom 10px/80px no-repeat;
}
    
.box40 .number{
    margin-top:10px;
}
	
.box41 {
    grid-row: 9 / 14;
    grid-column: 1 / 6;
}

.box41 h2 {
    margin-bottom: 0;
}
	
.box41 p br {
    display: none;
}	

.note_txt{
	color:#777;
	font-size:0.7em;
	line-height: 150%;
	text-align: left;
}

.img_good,.img_pen5,.img_pen4,.img_pen3,.img_soccer,.img_baseball,.img_univ{
	display:none;
}

}/*スマホここまで*/




@media (max-width: 280px){
.chuo_ranking_grid {
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    grid-template-columns: 50px 50px 50px;
}
    
.chuo_ranking_wrap p {
    line-height: 1.6;
}
    
.box2_info {
    margin: 10px -40px -45px -40px;
    padding: 10px 40px 0 10px;
    text-align: left;
}
    
.box17_info {
    margin: 10px 0 -20px -30px;
    padding: 10px 0 0 10px;
    text-align: left;
    line-height: 1.4;
}
    
.box14_info {
    margin: 0 30px -30px 0;
}
    
}