@charset "UTF-8";
body{
  position: relative;
  margin: auto;
  padding: 0;
  font-size: 0;
  font-family:sans-serif;
  }

#top,#first{
  display: block;
  position: relative;
  overflow: hidden;
}

#title_area{
  width: 100%;
  height: 30%;
}
#enter_msg{
  position: absolute;
  bottom: 20%;
  width: 270px;
  margin: auto;
  left:0;
  right: 0;
  height: 60px;
  font-size: 16px;
  text-align: center;
  box-sizing: border-box;
  padding: 5px 0px;
  background-color: white;
  border-radius: 25% 75% 7% 93% / 75% 23% 77% 25% ;
}
#triangle_mark{
  position: absolute;
  margin: auto;
  left:0;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
}
#top_btn{
  width: 100%;
  height: 100%;
  z-index: 18;
}

#prologue {
  box-sizing: border-box;
}


.hidden_h{
  font-size: 0;
}
#title_copy{
  width: 100%;
  max-width: 620px;
  margin: auto;
  height: 30vh;
}

.contents_block{
  display: block;
  position: relative;
  margin: auto;
  width: 100%;
  height: auto;
  font-size: 16px;
  box-sizing: border-box;
/*
  border: solid 1px black;
*/
}

.contents_block p{
  line-height: 180%;
}

.contents_block h2{
  line-height: 40px;

}

.img_box{
  display: block;
  position: relative;
  margin: auto;
  width: 90%;
  height: 250px;
  box-sizing: border-box;
}
.qr_img_box{
  display: block;
  position: relative;
  margin: auto;
  width: 150px;
  height: 150px;
}

.img_box img,.qr_img_box img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}


.text_box{
  display: block;
  position: relative;
  margin: auto;
  width: 95%;
  max-width: 620px;
  box-sizing: border-box;
  padding: 40px 20px;
}

.cat_box{
  position: relative;
  margin: auto;
  width: 40vmin;
  max-width: 250px;
  height: 40vmin;
  max-height: 250px;
  border-radius: 50%;
  overflow: hidden;
  background-color: black;
}

.cat_box img{
  display: inline-block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cat_box_title{
  text-align: center;
  font-size: 30px;
  line-height: 50px;
  width: 100%;
  height: 50px;
  font-weight: 700;
  color: white;
}

.exp_box{
  border-radius: 90% 10% 89% 11% / 6% 89% 11% 94%  ;
  width: 95%;
  max-width: 420px;
  margin: auto;
  margin-top: 25px;
  height: auto;
  box-sizing: border-box;
  padding: 10px 20px;
  background-color: white;
}





/*loader*/

#before_load{
  background-color: maroon;
  z-index: 200;

}
#first_loader{
  display: block;
  width: 100%;
  height: 25px;
  text-align: center;
  font-size: 0;
}
#first_loader div{
  display: inline-block;
  width: 25px;
  height: 25px;
  font-size: 20px;
  color: white;
  line-height: 25px;
  animation-name: loader_act;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
#first_loader div:nth-child(1){
  animation-delay: 0s;
}
#first_loader div:nth-child(2){
  animation-delay: 0.2s;
}
#first_loader div:nth-child(3){
  animation-delay: 0.4s;
}
#first_loader div:nth-child(4){
  animation-delay: 0.6s;
}
#first_loader div:nth-child(5){
  animation-delay: 0.8s;
}
#first_loader div:nth-child(6){
  animation-delay: 1s;
}
#first_loader div:nth-child(7){
  animation-delay: 1.2s;
}
#first_loader div:nth-child(8){
  animation-delay: 1.4s;
}



@keyframes loader_act {
  0%{
    background-color: inherit;
    color: white;
  }
  100%{
    background-color: white;
    color: black;
  }
}


.flyer{
  display: block;
  position: relative;
  width: 90%;
  height: 30vh;
  object-fit: contain;
  object-position: center;
  margin: auto;
}


.prof_img{
  width: 100%;
  height: 50vmax;
  max-height: 300px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: auto;
  box-sizing: border-box;
}

.youtube_frame{
  display: block;
  width: 100%;
  height: 300px;
}

.kiseki_list{
  font-size: 14px;
}
.nagare_list li{
  margin-bottom: 24px;
}
.eigyoujikan_box{
  padding: 0px 15px;
}
.ms999_icon_img{
  display: block;
  margin: auto;
  width: 100px;
  height: 100px;
  object-fit: contain;
  object-position: center;
}

.banner_img{
  display: block;
  position: relative;
  margin: auto;
  width: 100%;
  height: auto;
  max-height: 125px;
  object-fit: contain;
  object-position: center;
}


#bg_3{
  position: fixed;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top:0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  z-index: -5;  
}

#bg_3_shine{
  width: 100%;
  height: 100%;
}


#maku{
  display: none;
}