@charset "Shift-JIS";
/*
=================================
top.css
=================================
*/
#menu-top.menu-btn{display:block !important;}
#menu-other.menu-btn{display:none !important;}

@media screen and (min-width:1101px){#main-visual{transform:translateY(-30px);}}
@media screen and (max-width:1100px){#main-visual{padding-top:50px;}}


/*
=========================
top-image
=========================
*/
.top-image{position:relative;}
.jet-top{position:relative;}

@media screen and (max-width:500px){
.jet-top{width:320px; margin:0 auto;}
}

#sun{font-weight:bold; line-height:1.2;}
#sun > .day{position:absolute; top:6.5%; left:29%;}
#sun > .last{position:absolute; top:8%; left:31%;}
#sun > .total{position:absolute; top:8%; left:36%;}
#sun > .result{position:absolute; top:8%; left:36%;}

@media screen and (max-width:500px){
#sun{font-size:10px;}
#sun > .day{top:6%; left:27%;}
#sun > .last{top:8%; left:29%;}
#sun > .total{top:8%; left:35%;}
#sun > .result{top:8%; left:35%;}
}
/*
=========================
飛行機_ランキング
=========================
*/
#jet{position:absolute; top:0;}
#jet > .on{position:relative;}

/*
=======
1位
=======
*/
#jet > .on p.no1{
position: absolute;
width:150px;
height:167px;
background-size:50%;
background-repeat:no-repeat;
top:63px;
right:-18px;
transform:rotate(-20deg);
z-index:5;
}
@media screen and (max-width:500px){
#jet > .on p.no1{
background-size:35%;
top:32px;
right:-68px;}
}
.chara01{background-image:url(../img/top/ranking_jet/icon/01.png);}
.chara02{background-image:url(../img/top/ranking_jet/icon/02.png);}
.chara03{background-image:url(../img/top/ranking_jet/icon/03.png);}
.chara04{background-image:url(../img/top/ranking_jet/icon/04.png);}
.chara05{background-image:url(../img/top/ranking_jet/icon/05.png);}
.chara06{background-image:url(../img/top/ranking_jet/icon/06.png);}
.chara07{background-image:url(../img/top/ranking_jet/icon/07.png);}
.chara08{background-image:url(../img/top/ranking_jet/icon/08.png);}
.chara09{background-image:url(../img/top/ranking_jet/icon/09.png);}
.chara10{background-image:url(../img/top/ranking_jet/icon/10.png);}
.chara11{background-image:url(../img/top/ranking_jet/icon/11.png);}
.chara12{background-image:url(../img/top/ranking_jet/icon/12.png);}
.chara13{background-image:url(../img/top/ranking_jet/icon/13.png);}
.chara14{background-image:url(../img/top/ranking_jet/icon/14.png);}
.chara15{background-image:url(../img/top/ranking_jet/icon/15.png);}
.chara16{background-image:url(../img/top/ranking_jet/icon/16.png);}
.chara17{background-image:url(../img/top/ranking_jet/icon/17.png);}
.chara18{background-image:url(../img/top/ranking_jet/icon/18.png);}
.chara19{background-image:url(../img/top/ranking_jet/icon/19.png);}
.chara20{background-image:url(../img/top/ranking_jet/icon/20.png);}
.chara21{background-image:url(../img/top/ranking_jet/icon/21.png);}
.chara22{background-image:url(../img/top/ranking_jet/icon/22.png);}
.chara23{background-image:url(../img/top/ranking_jet/icon/23.png);}
.chara24{background-image:url(../img/top/ranking_jet/icon/24.png);}
.chara25{background-image:url(../img/top/ranking_jet/icon/25.png);}
.chara26{background-image:url(../img/top/ranking_jet/icon/26.png);}
.chara27{background-image:url(../img/top/ranking_jet/icon/27.png);}
.chara28{background-image:url(../img/top/ranking_jet/icon/28.png);}
.chara29{background-image:url(../img/top/ranking_jet/icon/29.png);}
.chara30{background-image:url(../img/top/ranking_jet/icon/30.png);}
.chara31{background-image:url(../img/top/ranking_jet/icon/31.png);}

/*
=======
2位
=======
*/
#jet > .on p.no2{
position: absolute;
width:150px;
height:167px;
background-size:50%;
background-repeat:no-repeat;
top: 83px;
right: 40px;
transform: rotate(-20deg);
z-index:4;
}
@media screen and (max-width:500px){
#jet > .on p.no2{
background-size:35%;
top:44px;
right:-30px;}
}

/*
=======
3位
=======
*/
#jet > .on p.no3{
position: absolute;
width:150px;
height:167px;
background-size:50%;
background-repeat:no-repeat;
top:88px;
right:93px;
transform: rotate(-20deg);
z-index:3;
}
@media screen and (max-width:500px){
#jet > .on p.no3{
background-size:35%;
top:56px;
right:6px;}
}
/*
=======
4位
=======
*/
#jet > .on p.no4{
position: absolute;
width:150px;
height:167px;
background-size:45%;
background-repeat:no-repeat;
top:250px;
right:164px;
transform:rotate(-20deg);
} 
@media screen and (max-width:500px){
#jet > .on p.no4{
background-size:30%;
top:156px;
right:52px;}
}           
/*
=======
5位
=======
*/
#jet > .on p.no5{
position: absolute;
width:150px;
height:167px;
background-size:45%;
background-repeat:no-repeat;
top:290px;
right:210px;
transform:rotate(-20deg);
}  
@media screen and (max-width:500px){
#jet > .on p.no5{
background-size:30%;
top:183px;
right:84px;}
}           
/*
=======
6位
=======
*/
#jet > .on p.no6{
position: absolute;
width:150px;
height:167px;
background-size:40%;
background-repeat:no-repeat;
top:354px;
right:256px;
transform:rotate(-20deg);
}
@media screen and (max-width:500px){
#jet > .on p.no6{
background-size:28%;
top:223px;
right:113px;}
}           
/*
=======
7位
=======
*/
#jet > .on p.no7{
position: absolute;
width:150px;
height:167px;
background-size:35%;
background-repeat:no-repeat;
top:429px;
right:287px;
transform:rotate(-20deg);
}
@media screen and (max-width:500px){
#jet > .on p.no7{
background-size:25%;
top:274px;
right:133px;}
}           
/*
=========================
explanation
=========================
*/
.explanation{
position:relative;
background-image:url(../img/top/back_sand.webp);
background-size:100% auto;
background-repeat:no-repeat;
margin-top:20px;
}

.explanation p.logo.small{
position: absolute;
max-width:60%;
top:-50px;
left:20%;
}

/*topの説明用画像*/
.info-img{text-align:center; margin-top:10px;}
.info-img > img{max-width:400px;}