@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;}
.top-image h1.logo{position:relative; width:100%; z-index:2;}
.top-image h1.logo img{display:block; max-width:320px; margin:0 auto;}
@media screen and (max-width:500px){
.top-image h1.logo img{max-width:300px;}
}
.ev-top{position:relative; margin-bottom:500px;}

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

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

@media screen and (max-width:500px){
#sun{width:320px; font-size:10px; margin:0 auto;}
#sun > .day{top:24px; left:82px;}
#sun > .last{top:30px; left:29%;}
#sun > .total{top:30px; left:35%;}
#sun > .result{top:30px; left:35%;}
}
/*結果発表*/
.result-img{margin:0 5px;}
/*
=========================
ランウェイランキング
=========================
*/
#ev{position:absolute; top:0;}
#ev > .on{position:relative;}
#ev .ev_image{
background-image:url(../img/top/ranking_event/ev_text_top.webp);
background-size:100% auto;
background-repeat:no-repeat;
background-position:top;
}
/*ここ確認する*/
#ev .ev03{position:relative; top:-100px;}

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

/*
=======
3位
=======
*/
#ev > .on p.no3{
position: absolute;
width:150px;
height:167px;
background-size:50%;
background-repeat:no-repeat;
bottom:128px;
right:200px;
/*transform: rotate(-20deg);*/
z-index:3;
}
@media screen and (max-width:500px){
#ev > .on p.no3{
background-size:35%;
bottom:34px;
right:87px}
}
/*
=======
4位
=======
*/
#ev > .on p.no4{
position: absolute;
width:150px;
height:167px;
background-size:50%;
background-repeat:no-repeat;
bottom:128px;
right:127px;
transform:rotate(-20deg);
} 
@media screen and (max-width:500px){
#ev > .on p.no4{
background-size:30%;
bottom:45px;
right:16px;}
}           
/*
=======
5位
=======
*/
#ev > .on p.no5{
position: absolute;
width:150px;
height:167px;
background-size:50%;
background-repeat:no-repeat;
bottom:128px;
left:284px;
transform:rotate(-10deg);
}  
@media screen and (max-width:500px){
#ev > .on p.no5{
background-size:30%;
bottom:34px;
left:199px}
}           
/*
=======
6位
=======
*/
#ev > .on p.no6{
position: absolute;
width:150px;
height:167px;
background-size:50%;
background-repeat:no-repeat;
bottom:128px;
right:-20px;
transform:rotate(10deg);
}
@media screen and (max-width:500px){
#ev > .on p.no6{
background-size:28%;
bottom:16px;
right:-62px;}
}           
/*
=======
7位
=======
*/
/*
#ev > .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){
#ev > .on p.no7{
background-size:25%;
top:274px;
right:133px;}
} 
*/
/*
=========================
cos
=========================
*/   
.cos ul.card{
display:flex;
justify-content:flex-start;
align-items:center;
flex-wrap:wrap;
margin:10px 0;
} 
.cos ul.card li{
width:calc(100% / 3);
padding:2px;
}
.cos ul.card li a{display:block;}
.cos ul.card li a:hover{opacity:.7;}

.cos ul.card li a > p{
background-color:#f9de7b;
height:45px;
font-size:10px; 
font-weight:bold; 
line-height:1.2;
margin:5px;
padding:5px;
}
@media screen and (max-width:420px){
.cos ul.card li{
width:calc(100% / 2);
}
.cos ul.card li a > p{
height:40px;
}
}
@media screen and (max-width:320px){
.cos ul.card li a > p{
height:48px;
}
}
/*
=========================
explanation
=========================
*/
.explanation{
position:relative;
background-image:url(../img/top/back_sand.webp);
background-size:100% auto;
background-repeat:no-repeat;
margin-top:90px;
aspect-ratio: 980 / 1781;
}

.explanation p.logo.small{
position: absolute;
/*max-width:50%;*/
top:-80px;
left:0;
right:0;
}
.explanation p.logo.small > img{
display:block; 
max-width:300px;
margin:0 auto;
}

.explanation.no2{
position:relative;
background-image:url(../img/top/back_sand02.webp);
background-size:100% auto;
background-repeat:no-repeat;
margin-top:45px;
aspect-ratio: 980 / 2900;
}

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