body{
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  max-width: 100%;
}


.back{
  background-image:url('furasshusutorokunoirasuto.jpg');
  background-size: cover;
  background-position: center;
  height: 110vh;
  margin-top: -10vh;
  position: relative;
  overflow: hidden;
}

.content{
  position: relative;
  border-radius: 10px;
  margin-left: 20vw;
  margin-top: 0;
  margin-bottom: 0;
  font-family: "Comic Sans MS", cursive;
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

.day{
  position: absolute;
  top: 30vh;
  font-size: clamp(2.5rem, 1.654rem + 2.6vw, 4.063rem);
  font-weight: 400;
}

.universe{
  position: absolute;
  top: 47vh;
  font-size: clamp(1.875rem, 1.367rem + 1.56vw, 2.813rem);
}

.title{
  position: absolute;
  top: 45vh;
  font-size: clamp(3.75rem, 2.565rem + 3.65vw, 5.938rem);
  text-decoration: underline 4px;
  text-underline-offset:  10px;
  font-weight: normal;
}

@font-face{
  font-family: 'cmbx10';
  src: url('path-to-cmbx10-font.ttf') format('truetype');
}

.intro{
  position: absolute;
  top: 73vh;
  font-family:'cmbx10';
  font-size: clamp(1.156rem, 0.767rem + 1.2vw, 1.875rem);
}



.talent{
  width:100%;
  height: 630px;
  overflow: hidden;
  position: relative;
  animation: fadeIn linear;
  animation-timeline: view();
  animation-range: entry 0% cover 60%;
}

@keyframes fadeIn{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

.talent_syoukai{
  color: white;
  border-bottom: white clamp(0.156rem, 0.072rem + 0.26vw, 0.313rem) solid;
  width: clamp(8.75rem, -0.862rem + 29.57vw, 18.75rem);
  text-align: end;
  position: absolute;
  top: 3%; 
  font-family: "Comic Sans MS", cursive;
  font-size: clamp(0.9rem, 0.033rem + 2.67vw, 1.7rem);
  font-weight: bold;
  margin-top: 20px;
}



.syoukai{
  display: inline-block;
  position: absolute;
  border: black 3px solid;
  border-radius: 30px;
  box-shadow: -15px 23px 0 #FFA1BD;
  background-color: white;
  width: 100%;
  height: 70%;
  left: 15%;
  top: 18%;
}

.syoukai img{
  position: absolute;
  transform:translate(0,-50%) ;
  width: 25%;
  max-width: 300px;
  aspect-ratio: 3/4;
  top: 50%;
  left: 2%;
}

.name{
  position: absolute;
  top: 1%;
  left: 35%;
  font-size: clamp(1.7rem, 1.537rem + 0.5vw, 2rem);
  font-weight: bold;
  font-family: "Cinzel", serif;
}

.syoukaibun{
  position: absolute;
  top: 20%;
  left: 35%;
  font-size: clamp(0.7rem, 0.537rem + 0.5vw, 1rem);
  font-weight: bold;
  padding-right:17%; 
}

.ticket{
  position: absolute;
  top: 93%;
  left: 35%;
  font-size: clamp(0.7rem, 0.537rem + 0.5vw, 1rem);
}

.blue_circle1{
  position: absolute;
  background-color: #00AEFF;
  aspect-ratio: 1/1;
  border-radius: 50%;
  width: 38%;
  left: -5%;
  top: 0%;
  z-index: -2;
}

.yellow_circle1{
  position: absolute;
  background-color: #FFF879;
  aspect-ratio: 1/1;
  border-radius: 50%;
  width: 20%;
  left: 10%;
  top: 60%;
  z-index: -1;
}

.blue_circle2{
  position: absolute;
  background-color: #00AEFF;
  aspect-ratio: 1/1;
  border-radius: 50%;
  width: 10%;
  left: 95%;
  top: 6%;
  z-index: -1;
}

.footer_waku{
  width: 100%;
  height: 25vh;
  overflow: hidden;
  background-color: whitesmoke;
  position: relative;
}

.F_HP{
  position: absolute;
  top: 15%;
  left: 20%;
  font-size: clamp(0.688rem, 0.552rem + 0.42vw, 0.938rem);
  font-weight: bold;
  color: black;
  text-decoration: none;
}
.F_Instagram{
  position: absolute;
  top: 33%;
  left: 20%;
  font-size: clamp(0.688rem, 0.552rem + 0.42vw, 0.938rem);
  font-weight: bold;
  color: black;
  text-decoration: none;
}

.F_X{
  position: absolute;
  top: 51%;
  left: 20%;
  font-size: clamp(0.688rem, 0.552rem + 0.42vw, 0.938rem);
  font-weight: bold;
  color: black;
  text-decoration: none;
}

.F_LINE{
  position: absolute;
  top: 69%;
  left: 20%;
  font-size: clamp(0.688rem, 0.552rem + 0.42vw, 0.938rem);
  font-weight: bold;
  color: black;
  text-decoration: none;
}

.address{
  position: absolute;
  top: 30%;
  left: 65%;
  font-size: clamp(0.688rem, 0.586rem + 0.31vw, 0.875rem);
  font-weight: bold;
  color: black;
  text-decoration: none;
}

.copyright{
  position: absolute;
  transform: translate(-50%,-50%);
  top: 85%;
  left: 50%;
  font-size: clamp(0.625rem, 0.557rem + 0.21vw, 0.75rem);
  font-weight: bold;
}

.suichoku{
  position: absolute;
  transform: translate(-50%,-50%);
  background-color: gray;
  width: 0.1%;
  height: 70%;
  top: 45%;
  left: 50%;
}

@media (max-width: 430px){
  .content{
    margin-left: 8vw;
  }
  .universe{
    font-size: 1.7rem;
    width: 70vw;
    margin-right: 10vw;
    text-align: end;
  }
  .title{
    width: 75vw;
    margin-right: 17vw;
    text-align: end;
  }
  .intro{
    font-size: 1.0rem;
    top: 98vh;
    width: clamp(12rem, 12.143rem + -0.71vw, 11.953rem);
    margin-left: 30vw;
    text-align: end;
  }

  .talent{
    height: 100vh;
  }

  .talent_syoukai{
    width: 170px;
  }
  .syoukai img{
    width: 45%;
  }
  .name{
    left: 50%;
  }
  .syoukaibun{
    left: 50%;
    top: 15%;
    font-size: clamp(0.57rem, -0.316rem + 3.78vw, 0.7rem);
  }

  .ticket{
    left: 50%;
    font-size: clamp(0.4rem, -0.282rem + 2.91vw, 0.5rem);
  }

  .blue_circle1{
    width: 60%;
  }

  .F_HP{
    left: 4%;
  }
  .F_Instagram{
    left: 4%;
  } 
  .F_LINE{
    left: 4%;
  }
  .F_X{
    left: 4%;
  }
  .address{
    left: 55%;
    top: 25%;
  }
}