@charset "utf-8";

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  background:linear-gradient(180deg,
    #FFF41F 0%, #FFD32C 12%, #FFB13A 25%, #FF9049 37%, #FE7E6E 50%,
    #FC729E 62%, #FA67CE 75%, #F960EB 87%, #F960EB 100%);
  background-repeat:no-repeat;
  
}

.wrap{
  container-type:inline-size;
  width:100%;
  max-width:480px;          
  margin:0 auto;
}

.stage{
  position:relative;
  --u:0.37037037cqw;        
  --dy:1.6;                
  --ls:0.0;                

  --pb:30;                 
  padding-bottom:calc(var(--pb) * var(--u));
}

.bg{
  display:block;
  width:100%;
  height:calc(1567.75 * var(--u));
  object-fit:cover;
  object-position:top;
}

.t{
  position:absolute;
  margin:0;
  white-space:nowrap;
  left:calc(var(--x) * var(--u));
  top:calc((var(--y) + var(--dy)) * var(--u));
  transform:translate(-50%, -100%);
  font-family:"M PLUS Rounded 1c", sans-serif;
  font-weight:700;
  font-size:calc(var(--s) * var(--u));
  letter-spacing:calc(var(--ls) * var(--u));
  line-height:1;
  color:#580322;
}

.hit{
  position:absolute;
  display:block;
  -webkit-tap-highlight-color:transparent;
}
.hit-top{
  left:calc(22 * var(--u));  top:calc(256 * var(--u));
  width:calc(226 * var(--u)); height:calc(35 * var(--u));
}
.hit-line{
  left:calc(22 * var(--u));  top:calc(1522 * var(--u));
  width:calc(226 * var(--u)); height:calc(38 * var(--u));
}
