body{max-width:2560px;}

#main{
position:relative;
width:100%;
color:#141936;
/*background:linear-gradient(to bottom,  #fffff2 0%,#fffff2 80%,#fdca00 80%,#fdca00 100%);*/
background:#fffff2;
font-family:"Noto Sans JP", sans-serif;
z-index:2;}
#main img{width:100%;}

#main::after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:120vh;
background-image:url(/game/jubeat/unit/teaser/img/top/bg.jpg);
background-size:100% auto;
background-position:top center;
background-repeat:no-repeat;}
#main.fixed::after{position:fixed;}
@media screen and (min-width:2561px){
#main::after{top:-5%;}
#main.fixed::after{max-width:2560px; top:0; left:calc(50% - 1280px);}}
@media screen and (min-width:1921px) and (max-width:2560px){#main::after{top:-2%;}}
@media screen and (min-width:981px) and (max-width:1920px){#main::after{background-size:auto;}}
@media screen and (max-width:980px){#main::after{top:7%; background-size:110% auto; background-position:top left 10%;}}
@media screen and (max-width:680px){#main::after{background-size:130% auto;}}
@media screen and (max-width:480px){#main::after{top:4%; background-size:170% auto;}}

#main-inner{
position:relative;
width:100%;
max-width:1200px;
padding:70px 20px;
margin:0 auto;
z-index:3;}
@media screen and (max-width:1200px){#main-inner{padding:40px 20px;}}
@media screen and (max-width:480px){#main-inner{padding:40px 10px;}}

#main-inner #bg{pointer-events:none;}
@media screen and (min-width:1241px){
#main-inner #bg{
position:fixed;
top:90px;
left:calc(50% - 600px);
width:100%;
max-width:1200px;
height:calc(100vh - 130px);
background-image:url(/game/jubeat/unit/teaser/img/top/cube.png) , url(/game/jubeat/unit/teaser/img/top/cube.png) , url(/game/jubeat/unit/teaser/img/top/side_l.png) , url(/game/jubeat/unit/teaser/img/top/side_r.png);
background-size:54px  auto , 54px  auto , 20px auto , 20px auto;
background-position:top left 20px , bottom right 20px , center left 20px , center right 20px;
background-repeat:no-repeat , no-repeat , no-repeat , no-repeat;
border-left:1px solid;
border-right:1px solid;}
#main.fixed #bg{top:40px; height:calc(100vh - 80px);}
#main.fixed #bg.btm{height:calc(100vh - 230px);}}
@media screen and (max-width:1240px){
#main-inner #bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(/game/jubeat/unit/teaser/img/top/cube.png) , url(/game/jubeat/unit/teaser/img/top/cube.png);
background-size:54px  auto , 54px  auto;
background-position:top 20px left 20px , top 20px right 20px;
background-repeat:no-repeat , no-repeat;}}
@media screen and (max-width:640px){#main-inner #bg{background-size:38px  auto , 38px  auto; background-position:top 10px left 10px , top 10px right 10px;}}
@media screen and (max-width:370px){#main-inner #bg{background-size:30px  auto , 30px  auto;}}

#main-inner h2{
display:block;
width:100%;
font-family:"Gravitas One", serif;
font-size:clamp(2.25rem, 1.068rem + 5.91vw, 5.5rem);/*88-36*/
line-height:100%;
border-bottom:2px solid;
margin:0 auto 50px;}
@media screen and (min-width:1241px){#main-inner h2{width:calc(100% - 140px);}}
@media screen and (max-width:640px){#main-inner h2{margin:0 auto 30px;}}
@media screen and (max-width:480px){#main-inner h2{margin:0 auto 20px;}}

ul#top li{position:relative; width:100%; margin:0 auto;}
ul#top li:nth-child(1){width:80%; max-width:470px;}
ul#top li:nth-child(2){max-width:900px; margin:40px auto 10px;}
ul#top li:nth-child(3){max-width:820px;}
ul#top li:nth-child(3)::after{
display:block;
content:"";
position:absolute;
top:10px;
left:0;
width:100%;
height:calc(100% - 2px);
background-image:url(/game/jubeat/unit/teaser/img/top/top_dot.png);
background-position:top center;
z-index:4;}
ul#top li:nth-child(3) p{position:relative; width:100%; background:#fff; text-align:center; border:1px solid; padding:20px 0; z-index:5;}
ul#top li:nth-child(3) p img{width:80%;}
@media screen and (max-width:680px){ul#top li:nth-child(3)::after{background-size:5px auto;}}
@media screen and (max-width:480px){
ul#top li:nth-child(3) p{padding:10px 0;}
ul#top li:nth-child(3) p img{width:90%;}}

ul#about{position:relative; width:100%; max-width:600px; margin:150px auto;}
ul#about li:nth-child(1){position:relative;}
ul#about li:nth-child(2){position:absolute; top:0; left:0; animation:2.5s fuwafuwa infinite; pointer-events:none;}
@media screen and (max-width:980px){ul#about{margin:80px auto;}}
@media screen and (max-width:640px){ul#about{margin:50px auto;}}

/*アニメーション*/
@keyframes fuwafuwa{
  0%, 100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
}

@media screen and (min-width:1241px){#news{width:calc(100% - 140px);}}
#news{margin:0 auto 100px;}
#news *{width:100%;}
#news > *{
display:block;
color:#141936;
background:#fffff2;
font-size:clamp(0.813rem, 0.744rem + 0.34vw, 1rem);/*16-13*/
padding:10px;
border:2px solid;
margin:0 auto;}
#news > a{transition:.2s ease;}
#news > a:hover{color:#009f7f;}
#news > * + *{margin-top:50px;}
#news > * > ul{display:flex; flex-direction:column;}
#news > * > ul > li:nth-child(1){order:3; text-align:right; border-top:2px dashed; padding:10px 20px 0;}
#news > * > ul > li:nth-child(2){order:1; background:#888; border:1px solid;}
#news > * > ul > li:nth-child(3){order:2; padding:0 20px; margin:20px auto;}
#news > div > ul > li a{color:#009f7f; text-decoration:underline;}
#news > div > ul > li a:hover{text-decoration:none;}
@media screen and (max-width:640px){#news > * + *{margin-top:20px;}}

.link{
display:block;
max-width:440px;
color:#141936;
text-align:center;
font-size:clamp(0.938rem, 0.869rem + 0.34vw, 1.125rem);/*18-15*/
font-weight:700;
line-height:1.5rem;
margin:0 auto;
transition:.2s ease;}
.link:hover{color:#009f7f;}
.link:hover > div{box-shadow:0 5px 0 #009f7f;}
.link + .link{margin-top:50px;}
.link > div{max-width:200px; background:#fffff2; aspect-ratio:1 / 1; border:2px solid; border-radius:10px; box-shadow:0 5px 0 #141936; margin:0 auto 20px;}
.link > div img{border-radius:8px; transition:.2s ease; filter:brightness(100%);}
.link:hover > div img{filter:brightness(120%); opacity:.7;}
@media screen and (max-width:640px){.link + .link{margin-top:20px;}}