@charset "UTF-8";


body{
margin:0;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight:900;
}

/* top */

.top{
    position: relative;
    background-image: url(../img/SL-050222-50080-03.webp);
    background-size: cover;
    padding: 150px 0 30px 20px;
    overflow: hidden;
    /* border-radius: 50px; */
    /* max-width: 1200px; */
    /* margin: 50px auto; */
    
}

.top::after {
  content: "";
  position: absolute;
  inset: 0px;               /* ← 四つ角との隙間 */
  background: rgba(255,255,255,0.90);
  z-index: 1;
}

.top > * {
  position: relative;
  z-index: 2;
}


.top-inner{
    position: relative;
    /* background-image: url(../img/SL-050222-50080-03.webp); */
    /* background-size: 100% 100%; */
max-width:1200px;
margin:auto;

display:flex;
justify-content: space-around;
align-items:center;
/* border-radius: 40px; */
padding:30px 0px 320px 20px;
overflow: hidden;
}

.top-inner::after {
  content: "";
  position: absolute;
  inset: 0px;               /* ← 四つ角との隙間 */
  /* background: rgba(255,255,255,0.80); */
  z-index: 1;
}

.top-inner > * {
  position: relative;
  z-index: 2;
}

/* 左 */

.top-left{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 80px;
    margin-bottom: -550px;
}
.left1{
max-width: 520px;
width: 100%;
}

.left2{
max-width:450px;
width: 100%;
}



/* 右 */

.top-right{
position:relative;
max-width:440px;
width: 100%;
}


.right-bg{
width:100%;
}


/* PC */

.pc-wrap{
position:absolute;
bottom: -50px;
left:20px;
}


.pc{
max-width:310px;
width: 100%;
}


/* PC画面 */

.pc-screen{

position:absolute;

top:10px;
left:9px;

width:292px;
height:159px;

overflow:hidden;

}


.screen{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

opacity:0;
transition:opacity 1s;

}

.screen.active{
opacity:1;
}



/* medal */

.medal{

position:absolute;

top:-80px;
right:-120px;

width:180px;

animation:shine 6s infinite;

}

@keyframes shine{

0%{filter:brightness(1);}
96%{filter:brightness(1);}
98%{filter:brightness(2.5);}
100%{filter:brightness(1);}

}


/* accent */

.accent{

position:absolute;

top:-120px;
right:-130px;

width:90px;

animation:pop 3s infinite;

}

.character{
    position: absolute;
    bottom: -40px;
    right: -40px;
}
.character img{
    width: 300px;
}

@keyframes pop{

0%{transform:scale(1);}
50%{transform:scale(1.2);}
100%{transform:scale(1);}

}
@media (max-width:1200px){


/* medal */

.medal{

position:absolute;

top:-50px;
right:-110px;

width:140px;

animation:shine 6s infinite;

}

.accent{

position:absolute;

top:-75px;
right:-120px;

width:60px;

animation:pop 3s infinite;

}
.top-inner{
    position: relative;
    background-size: 100% 100%;
max-width:1200px;
margin:auto;

display:flex;
justify-content: space-around;
align-items:center;
border-radius: 40px;
gap: 40px;
padding:30px 20px 290px;
overflow: hidden;
}


}
@media (max-width:768px){

    .top{
    background-image: url(../img/SL-050222.webp);
    padding: 10px;
    max-width: 1200px;
    /* margin: 50px 10px; */
}

.top-inner{
flex-direction:column-reverse;
gap:120px;
padding:160px 10px 160px;

}

.top-left{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 50px;
    margin-bottom: 0px;
}

.left2{
    content: url(../img/top_detail_res.webp);
    max-width: 280px;
}


.character{
    position: absolute;
    bottom: -25px;
    right: -25px;
}
.character img{
    width: 200px;
}

.top-right{
position:relative;
max-width:300px;
width: 100%;
}

.pc-wrap{
position:absolute;
bottom: -90px;
left:10px;
}
.right-bg{
width:80%;
}


.pc{
max-width:310px;
width: 100%;
}


/* PC画面 */

.pc-screen{

position:absolute;

top:9px;
left:8px;

width:274px;
height:148px;

overflow:hidden;

}


.screen{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

opacity:0;
transition:opacity 1s;

}
/* medal */

.medal{
position:absolute;
top:-70px;
left: -30px;
width:120px;
animation:shine 6s infinite;

}
.accent{
position:absolute;
top:-90px;
left: 40px;
width:60px;
animation:pop 3s infinite;

}

}