.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);
}

.theme{
  height: 115vh;
  width: 100%;
  overflow:hidden;
  position: relative;
}

.theme h1{
  border-bottom: black 5px solid;
  width: 25%;
  text-align: end;
  position: absolute;
  top: 3vh;
  left: 0%;
  text-shadow: 2px 2px 0 white; 
  font-family: "Comic Sans MS", cursive;
  font-size: clamp(1.688rem, 1.247rem + 1.35vw, 2.5rem);
}

.theme_theme{
  position: absolute;
  font-size: clamp(2rem, 1.188rem + 2.5vw, 3.5rem);
  font-weight: bold;
  text-shadow: 3px 3px 0 white; 
  transform: translateX(0%) translateY(-50%);
  text-align: center;
  top: 17vh;
  width: 100%;
}

.thank{
  position: absolute;
  font-size: clamp(0.8rem, 0.529rem + 0.83vw, 1.3rem);
  font-weight: bold;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 37vh;
  text-shadow: 2px 2px 0 white; 
  font-family: "Comic Sans MS", cursive;
}

.coment{
  display:flex;
  position: absolute;
  transform: translate(0%,-50%);
  align-items: center;
  justify-content: center;
  font-size: clamp(0.7rem, 0.429rem + 0.83vw, 1.2rem);
  font-weight: bold;
  left: 17%;
  top: 44vh;
  background-image: url("hukidashi.png");
  background-size: 250px;
  width: 250px;
  height: 55px;
  z-index: 1;
}

.theme h3{
  position:absolute;
  top: 45vh;
  left:17%;
  border:salmon 2px solid;
  background-color: white;
  width: clamp(18.75rem, -1.563rem + 62.5vw, 56.25rem);
  height: auto;
  padding: 40px clamp(1.875rem, 0.859rem + 3.13vw, 3.75rem);
  box-shadow: 20px 20px 0px salmon;
  font-size: clamp(0.65rem, 0.325rem + 1vw, 1.25rem);
}

.dekamaru{
  position: absolute;
  width: 100%;
  aspect-ratio: 1/1;
  background-color: #00AEFF;
  opacity: 0.6;
  border-radius: 50%;
  left: 70%;
  top: 10%;
  transform: translate(-50%,-50%);
  z-index: -1;
}

.pamphlet{
  width:100%;
  height:25vh;
  overflow: hidden;
  position: relative;
}

.digital_pamphlet{
  position: absolute;
  transform: translate(-50%,0%);
  left: 50%;
  top: 10%;
  border: #1F76A0 3px solid;
  box-shadow: 15px 15px 0 #1F76A0;
  width: 50%;
  text-align: center;
  padding: 22px 0px;
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-size: clamp(0.7rem, 0.429rem + 0.83vw, 1.2rem);
}

.yazirusi1{
  position:absolute;
  border: black 3px solid;
  box-shadow: 7px 7px 0 #1F76A0;
  aspect-ratio: 1/1;
  border-radius: 50%;
  text-decoration: none;
  color:black;
  padding: 13px 20px;
  background-color:white;
  left: 73%;
  top: 30%;
  z-index:1;
  font-weight: bold;
  font-size: clamp(0.9rem, 0.575rem + 1vw, 1.5rem);
}

.yellow_square{
  position: absolute;
  transform: translate(-50%,-50%);
  background-color: #FFF879;
  opacity: 0.6;
  aspect-ratio: 1/1;
  top: 5%;
  left: -7%;
  width: 13%;
  transform: rotate(25deg);
}

.blue_square{
  position: absolute;
  transform: translate(-50%,-50%);
  background-color: #00AEFF;
  opacity: 0.4;
  aspect-ratio: 1/1;
  top: 5%;
  left: 5%;
  width: 7%;
  transform: rotate(75deg);
  z-index: -1;
}

.pink_square{
  position: absolute;
  transform: translate(-50%,-50%);
  background-color: #FFA1BD;
  aspect-ratio: 1/1;
  top: 5%;
  left: 96%;
  width: 10%;
  transform: rotate(45deg);
  z-index: -1;
}

.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;
}

.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: 78%;
  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%; 
  height: fit-content;
}

.ticket{
  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;
}

.time_schedule{
  width: 100%;
  height: 120vh;
  overflow: hidden;
  position: relative;
}

.time_schedule_title{
  border-bottom: black clamp(0.156rem, 0.072rem + 0.26vw, 0.313rem) solid;
  width: 29%;
  text-align: end;
  position: absolute;
  top: 5%; 
  font-family: "Comic Sans MS", cursive;
  font-size: clamp(1.25rem, 0.844rem + 1.25vw, 2rem);
  font-weight: bold;
}

.time_schedule_waku{
  position: absolute;
  border: #000000 1px solid;
  background-color: #000000;
  width: 100%;
  height: 102vh;
  top: 18%;
}

.sch1{
  position: absolute;
  width: 35%;
  height: fit-content;
}

.sch2{
  position: absolute;
  left: 50%;
  width: 35%;
  height: fit-content;
}

.saigo{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.questionnaire{
  position: absolute;
  transform: translate(-50%,0%);
  left: 50%;
  top: 5%;
  border: #1F76A0 3px solid;
  box-shadow: 15px 15px 0 #1F76A0;
  width: 50%;
  text-align: center;
  padding: 25px 0px;
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-size: clamp(1rem, 0.783rem + 0.67vw, 1.4rem);
}

.yazirusi4{
  position:absolute;
  border: black 3px solid;
  box-shadow: 7px 7px 0 #1F76A0;
  aspect-ratio: 1/1;
  border-radius: 50%;
  text-decoration: none;
  color:black;
  padding: 13px 20px;
  background-color:white;
  left: 73%;
  top: 12%;
  z-index:1;
  font-weight: bold;
  font-size: clamp(0.9rem, 0.575rem + 1vw, 1.5rem);
}

.saigo_waku{
  position: absolute;
  border: black 2px solid;
  border-radius: 30px;
  background-color: #7EDBE6;
  box-shadow: -50px 30px 0 #50A1AA;
  width: 100%;
  height: 65vh;
  top: 27%;
  left: 7%; 
}

.HP{
  position: absolute;
  top: 7.8%;
  left:10%;
  border: black 2px solid;
  border-radius: 20px;
  background-color: white;
  align-items: center;
  justify-content: center;
  color: black;
  text-decoration: none;
  font-size: clamp(0.8rem, 0.421rem + 1.17vw, 1.5rem);
  font-weight: bold;
  padding: clamp(1.625rem, 1.388rem + 0.73vw, 2.063rem) clamp(3.125rem, 0.755rem + 7.29vw, 7.5rem);
}

.LINE{
  position: absolute;
  top: 7.7%;
  left: 50%;
  border: black 2px solid;
  border-radius: 20px;
  background-color: white;
  align-items: center;
  justify-content: center;
  color: black;
  text-decoration: none;
  font-size: clamp(0.8rem, 0.421rem + 1.17vw, 1.5rem);
  font-weight: bold;
  padding: 17px clamp(3.313rem, 0.875rem + 7.5vw, 7.813rem);
}

.X{
  position: absolute;
  top: 33.5%;
  left: 10%;
  border: black 2px solid;
  border-radius: 20px;
  background-color: white;
  align-items: center;
  justify-content: center;
  color: black;
  text-decoration: none;
  font-size: clamp(0.8rem, 0.421rem + 1.17vw, 1.5rem);
  font-weight: bold;
  padding: 17px clamp(3.313rem, 0.875rem + 7.5vw, 7.813rem);
}

.Instagram{
  position: absolute;
  top: 34%;
  left: 50%;
  border: black 2px solid;
  border-radius: 20px;
  background-color: white;
  align-items: center;
  justify-content: center;
  color: black;
  text-decoration: none;
  font-size: clamp(0.8rem, 0.421rem + 1.17vw, 1.5rem);
  font-weight: bold;
  padding: 17px clamp(3rem, 0.63rem + 7.29vw, 7.375rem);
}

.kyosan{
  position: absolute;
  transform: translate(-50%,0);
  top: 55%;
  left: 45%;
  font-size: clamp(0.9rem, 0.629rem + 0.83vw, 1.4rem);
  font-weight: bold;
}

.kyosan_kigyou{
  position: absolute;
  transform: translate(-50%,0);
  top: 65%;
  left: 50%;
  font-size: clamp(0.7rem, 0.483rem + 0.67vw, 0.9rem);
}

.blue_circle3{
  position: absolute;
  transform: translate(-50%,0%);
  top: 2%;
  left: 0%;
  aspect-ratio: 1/1;
  background-color: #00AEFF;
  border-radius: 50%;
  width: 12%;

}

.yellow_circle2{
  position: absolute;
  transform: translate(-50%,0%);
  top: 17%;
  left: 3.7%;
  aspect-ratio: 1/1;
  background-color: #FFF879;
  border-radius: 50%;
  width: 5%;
}

.blue_square2{
  position: absolute;
  transform: translate(-50%,0%);
  top: 0%;
  left: 99%;
  aspect-ratio: 1/1;
  background-color: #00AEFF;
  width: 10%;
  transform: rotate(40deg);
}

.yellow_circle3{
  position: absolute;
  transform: translate(-50%,0%);
  top: 16.5%;
  left:100%;
  aspect-ratio: 1/1;
  background-color: #FFF879;
  border-radius: 50%;
  width: 5%;
}

.pink_square2{
  position: absolute;
  top: 23%;
  left: 87%;
  aspect-ratio: 1/1;
  background-color: #FFA1BD;
  width: 5%;
  transform: rotate(45deg);
  z-index: -1;
}

@media (max-width: 431px){
  .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;
  }


  .theme h1{
    width: 41vw;
    border-bottom: black 3px solid;
  }
  .theme_theme{
    width: 100vw;
    text-align: center;
  }
  .thank{
    width: 60vw;
    top: 35vh;
    text-align: center;
  }
  .coment{
    font-size: 13px;
    background-size: 180px;
    width: 180px;
    height: 40px;
    left: 3%;
    top: 44vh;
  }
  .theme h3{
    left: 5%;
    font-size: clamp(0.65rem, -0.373rem + 4.36vw, 0.8rem);
    width: clamp(13.5rem, -6.31rem + 99.05vw, 20rem);
    height: auto;
    padding: 15px 30px;
    box-shadow: 10px 10px 0px salmon;
  }

  .theme img{
    top: 80%;
  }

  .digital_pamphlet{
    box-shadow: 8px 8px 0 #1F76A0;
  }
  .yazirusi1{
    box-shadow: 4px 4px 0 #1F76A0;
  }
  .bosyu{
    width: 200px;
    top: 32%
  }
  .dantai_setsumei{
    box-shadow: 10px 10px 0 #FFD17B;
  }
  .dantaimuke{
    box-shadow: 8px 8px 0 #1F76A0;
  }
  .yazirusi3{
    box-shadow: 4px 4px 0 #1F76A0;
  }

  .talent{
    height: 100vh;
  }

  .talent_syoukai{
    width: 170px;
  }

  .syoukai{
    width: 90%;
    height: auto;
  }

  .syoukai img{
    position: relative;
    width: 55%;
    transform: translate(-50%,0);
    top: 0%;
    left: 50%;
  }
  .name{
    position: relative;
    margin: 0 auto;
    font-size: clamp(1.2rem, -0.164rem + 5.82vw, 1.4rem);
  }
  .syoukaibun{
    position: relative;
    text-align: center;
    margin-top: 15px;
    top: 0;
    left: 0%;
    font-size: clamp(0.55rem, -0.473rem + 4.36vw, 0.7rem);
    padding-right: 30px;
  }

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


  .time_schedule_title{
    width: 210px;
  }

  
  .questionnaire{
    box-shadow: 7px 7px 0 #1F76A0;
  }
  .yazirusi4{
    box-shadow: 4px 4px 0 #1F76A0;
  }
  .time_schedule{
    height: auto;
    padding: 80px 20px 90px;
  }
  .time_schedule_title{
    position: static;
    text-align: left;
    margin: 0 auto 24px;
  }
  .time_schedule_waku{
    position: static;
    width: 100%;
    height: auto;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .sch1,
  .sch2{
    position: static;
    width: 100%;
    max-width: 520px;
    height: auto;
  }

  .HP{
    padding: 1.5rem 1.2rem;
    left: 7%;
  }
  .LINE{
    padding: 1.1rem 1.4rem;
  }
  .X{
    padding: 1.1rem 1.4rem;
    left: 7%;
  }
  .Instagram{
    padding: 1.1rem 1.1rem;
  }
}