html,body,main{
  min-height: 100%;
  height: 100%;
  font-size: 62.5%;
}
main{
  width:100vw;
  position:relative;
  display: block;
  overflow:hidden;
}
#fv{
  height: 100%;
  display: flex;
  position:relative;
}
#loop,#intro.off{
  display: none;
}
#loop.on{
  display: block;
}
#intro-sp,#loop-sp{
  display: none;
}
.svgAnim{
  padding: 3rem;
  /* margin: auto; */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
#cn-kv-pc{
  width: 100%;
}
#cn-kv-sp{
  display: none;
}
#cn-icons{
  position: relative;
  z-index: 1;
}
#icon_link .cls-2,
#icon_link .sp-cls-4,
#ts{
  fill:#ffffff;
  fill-opacity:1;
}
#ts *,#mail *{
  cursor: pointer;
  fill-opacity:1;
  stroke-opacity:1;
}
#icon_form .cls-4,
#icon_form .sp-cls-6,
#mail{
  fill:#ffffff;
}
.btn{
  cursor: pointer;
}
#icon_link:hover .cls-2,
#icon_link:hover .sp-cls-4,
#ts:hover{
  fill:#00bd9f;
  stroke:#ffffff;
  fill-opacity:1;
}
#icon_form:hover .cls-4,
#icon_form:hover .sp-cls-6,
#mail:hover,#mail:hover *{
  fill:#00bd9f;
  stroke:#ffffff;
}
#l1,#r1,#l2,#r2,
#l1 *,#r1 *,#l2 *,#r2 *,
#l1 + *,#r1 + *,#l2 + *,#r2 + *{
  cursor: pointer;
  fill-opacity:1;
  fill:white;
}
#l1:hover *,#r1:hover *,#l2:hover *,#r2:hover *{
  fill:#00bd9f;
}
#r2 + g,#r2 + g *{
  fill-opacity:1;
  fill:white;
}
#r2 + g,#r2:hover + g *{
  fill:white;
}
.modal{
  position:absolute;
  top:0;
  width:50vw;
  height:100%;
  align-items: center;
  justify-content: center;
  padding: 8% 10%;
  transition: all 0.5s;
  visibility: hidden;
}
.modal.on{
  visibility: visible;
}
.modal .bg{
  width:100%;
  height:100%;
  background:#00bd9f;
  position:absolute;
  left:0;
  top:0;
  z-index:0;
}
.modal .inner{
  position:relative;
  z-index:1;
  background: white;
  width: 100%;
  height:100%;
  padding: 20%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  font-family: "urw-din", sans-serif;
  font-weight: 500;
  font-style: normal;
}
pre{
  font-family: "urw-din", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.modal .inner h3{
  font-size: 2.8rem;
  margin-bottom: 1.8rem;
}
.modal .inner h3 span{
	    font-size: 1.2rem;
    margin-left: 0.6rem;
}
.modal .inner p{
  font-size: 1.4rem;
}
.modal .inner .head,
.modal .inner .foot,
.modal .inner h3,
#contact .wpcf7{
  width:100%;
}
.modal .inner .foot{
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 1.6rem 0;
  margin-top: 3.2rem;
}
.modal .inner .foot pre{
  font-size: 1.2rem;
}
.modal .inner .foot h2{
  font-size: 1.8rem;
}
.modal .inner .foot .link{
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.7rem;
}
.modal .inner .foot .link:hover{
  opacity:0.5;
}
.modal .inner .foot .link:last-child,
#contact.modal form p:last-child{
  margin-bottom:0;
}
.modal .inner .close.btn{
  position: absolute;
  width: 4rem;
  height: 4rem;
  right: -2rem;
  top: -2rem;
  background: #00bd9f;
  border: 1px solid #ffffff;
  border-radius: 4rem;
  cursor: pointer;
}
.modal .inner .close.btn:before,
.modal .inner .close.btn:after{
  content: '';
  position: absolute;
  width: 1.6rem;
  height: 1px;
  background: white;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.modal .inner .close.btn:before{
  transform: rotate(45deg);
}
.modal .inner .close.btn:after{
  transform: rotate(-45deg);
}
.modal .inner .close.btn:hover{
  background: #ffffff;
  border-color: #00bd9f;
}
.modal .inner .close.btn:hover::before,
.modal .inner .close.btn:hover::after{
  background: #00bd9f;
}
.modal p.copyrights,.modal p.policy{
  text-align: center;
  color: white;
  font-family: "urw-din", sans-serif;
  position: relative;
  margin-top: 1rem;
}
.modal p.policy{
  margin-top:2rem;
  font-size:1.2rem;
  cursor:pointer;
}
.modal p.policy:hover{
  color:silver;
}
.insta-icon{
  width:1.8rem;
  height:auto;
}
#about.modal{
  left:-50vw;
}
#contact.modal{
  right:-50vw;
}
#privacypolicy.modal{
  bottom: -100dvh;
  width: 100%;
  top: inherit;
}
#privacypolicy.modal.on{
  bottom:0;
  z-index:1;
}
#privacypolicy.modal .inner{
  padding:8%;
}
#privacypolicy.modal .wp-block-columns{
  overflow:auto;
}
#privacypolicy.modal .wp-block-columns .wp-block-column:first-child{
  padding-right: 3.2rem;
}
#privacypolicy.modal .wp-block-columns .wp-block-column:last-child{
  padding-left: 3.2rem;
}
#privacypolicy.modal .inner h2{
  font-size:1.1rem;
  margin-bottom: 0.5em;
}
#privacypolicy.modal .inner p{
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 1rem;
}
#privacypolicy.modal .inner ul{
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 1rem;
  list-style: disc;
  padding-left:1rem;
}
#crews.modal{
  top: -100dvh;
  width: 100%;
}
#crews.modal.on{
  top:0;
  z-index:1;
}
#crews.modal .inner{
  padding: 8rem;
}
#crews.modal h3{
  text-align: center;
}
.swiper{
  width: 100%;
  padding: 4.5rem 0px;
	overflow-y: visible;
}
.swiper-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  overflow: hidden;
}
.swiper-slide p{
  text-align: center;
  margin-top: 1em;
}
.modal .inner .swiper-slide p{
	font-size: 1.1rem;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
  top: 0;
  bottom: inherit;
}
.swiper-pagination-bullet-active{
  background: #00bd9f;
}
.swiper-cover-next,.swiper-cover-prev{
  position: absolute;
  top: 0;
  height: 85%;
  width: 50%;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  z-index: 1;
  cursor: pointer;
}
.swiper-cover-next{
  right: 0;
}
.swiper-cover-prev{
  left: 0;
}
#about.modal.on{
  left:0;
}
#contact.modal{
	
}
.form-wrap{
	position:relative;
}
#contact.modal.on{
  right:0;
}
#contact.modal p{
  margin-bottom: 1.8rem;
}
#contact.modal p:has(.submit-btn){
	position: absolute;
    bottom: -24px;
    width: max-content;
    left: 0;
    right: 0;
    margin: auto;
    height: max-content;
}
#contact.modal input{
  border-bottom:1px solid #000000;
  padding: 0.8rem 0;
  width:100%;
}
#contact.modal input.submit-btn{
  background-image: url("../../../../uploads/2024/02/send.svg");
  background-size: contain;
  background-repeat: no-repeat;
  border:none;
  color: transparent;
}
#contact.modal input.submit-btn:hover{
  opacity:0.5;
}
#contact.modal textarea{
  padding: 0.8rem 0;
  height: 10rem;
  max-width: 100%;
  line-height: 1.5;
}
#contact .wpcf7{
  overflow:scroll;
}
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
  border:none;
}
.wpcf7-not-valid-tip{
  font-size: 1rem;
  margin-top: 0.5rem;
}
input,
textarea,
input:focus,
textarea:focus{
  outline:none;
}
label.select select{
  vertical-align:baseline;
}
.wpcf7-spinner{
  display: block;
  margin: 2rem auto 0 auto;
}
.grecaptcha-badge{
  right: -70vw!important;
}
@media screen and (max-width: 768px){
  #cn-kv-sp{
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  #intro-sp,#loop-sp.on{
    display: block;
  }
  #cn-kv-pc,#loop,#intro,#loop.on,#loop-sp,#intro-sp.off{
    display:none;
  }
  .svgAnim{
    padding: 1rem;
  }
  .modal{
    width:100vw;
    padding: 18% 10%;
  }
  #about.modal{
    left: 0;
    top: -100vh;
  }
  #contact.modal{
    right: 0;
    bottom: -100vh;
    top: inherit;
  }
  #about.modal.on{
    top:0;
  }
  #contact.modal.on{
    bottom:0;
  }
  .modal .inner .close.btn{
    width: 3rem;
    height: 3rem;
    right: -1rem;
    top: -1rem;
  }
  #privacypolicy.modal .wp-block-columns .wp-block-column:first-child,
  #privacypolicy.modal .wp-block-columns .wp-block-column:last-child{
    padding:0;
  }
  #privacypolicy.modal .wp-block-columns{
    height: 100%;
    overflow: scroll;
  }
  #crews.modal .inner{
    padding: 3rem;
  }
  .swiper-cover-next, .swiper-cover-prev{
    display: none;
  }
}
@media screen and (max-width: 390px){
	.modal .inner h3 span{
		display:block;
		margin-left:0;
		margin-top:1em;
	}
	.modal .inner{
		    padding: 12%;
	}
}