@charset "UTF-8";


html, body {
  min-height: 100%;
}

body {
  margin: 0;
  font-size: 18px;
  /*font-family: 'PT Sans', Verdana, sans-serif;*/
  font-family:  'Noto Sans JP', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

  background: #ffffff;
  line-height: 1.4;

  /*overflow: hidden;*/
}

.header{
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  padding: 28px 24px;
}
.header .logo{

}
.header .menu{
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  opacity: 0;
  transition: 0.2s all;
}

.gjs-dashed .menu,
.menu.is-inview{
  opacity: 1;
}

.loading{
  position: fixed;
  z-index: 3;
  inset: 0;
  /*background: #000;*/
}
.loading_panels{
  position: absolute;
  z-index: 1;
  inset: 0;
  transition: 0.8s all;
  opacity: 1;
}
.loading_panels_bg1,
.loading_panels_bg2{
  position: absolute;
  z-index: 1;
  width: 100%;
  /*height: 50%;*/
  left: 0;
  right: 0;
  background: #000;
  transition: 0.8s all;
}
.loading_panels_bg1{
  top: 0;
  bottom: 50%;
}
.loading_panels_bg2{
  top: 50%;
  bottom: 0;
}
.loading_panels.open{
  opacity: 0.95;
}
.loading_panels.open .loading_panels_bg1{
  bottom: 100%;
}
.loading_panels.open .loading_panels_bg2{
  top: 100%;
}

.loading_meter{
  display: flex;
  align-items: flex-end;
  position: absolute;
  z-index: 2;
  bottom: 30px;
  left: 30px;
  right: 30px;
}
.loading_meter_box1{
  /*width: calc(100% - 90px);*/
  width: 0;
  transition: 0.2s all;
}
.loading_meter_box2{
  width: 48px;
  text-align: right;
}
.loading_meter_progress_bar{
  display: block;
  width: 100%;
  height: 2px;
  background: #FFF;
  opacity: 0.6;
  transition: 0.2s all;
}
.loading_meter_progress_txt{
  font-size: 24px;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  line-height: 1;
  opacity: 0.6;
  color: #FFF;
  transition: 0.2s all;
}




/*** layout ***/

.flex-wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flexbox;
  display: -moz-flex;
  display: -o-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

#mv {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.mv_catch{
  position: absolute;
  z-index: 2;
  left: 100px;
  bottom: 100px;
  color: #FFF;
}
.mv_catch_ja{
  font-size: 120px;
  font-weight: 700;
  line-height: 1.666;
  line-height: 1.4;
}
.mv_catch_en{
  font-size: 48px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  line-height: 1.666;
  margin-top: 50px;
}

.mv_catch p{
  overflow: hidden;
}

.mv_catch .char{
  display: inline-block;
  transform: translateY(-120%);
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}

.mv_catch.is-inview .char{
  transform: translateY(0);
  opacity: 1;
}

.mv_line{
  position: absolute;
  z-index: 1;
  bottom: 130px;
  right: 120px;
  opacity: 0;
  transition: 0.2s all;
}
.mv_line a{
  display: block;
  transition: 0.2s all;
}
.mv_line a:hover{
  transform: scale(1.06);
}

.gjs-dashed .mv_line,
.mv_line.is-inview{
  opacity: 1;
}

.mv_clouds{
  position: absolute;
  z-index: 1;
  inset: 0;
}
.mv_clouds_parts{
  position: absolute;
  z-index: 1;
  opacity: 0.5;
}
.mv_clouds_parts img{
  max-width: 100%;
}

.mv_clouds_parts.pos1{
  /*width: 35.93%;*/
  width: 80%;
  top: 0;
  left: -6%;
  transform: translate(0, -37%);
}
.mv_clouds_parts.pos2{
  width: 58%;
  top: 0;
  left: 42%;
  transform: translate(0, -49%);
}
.mv_clouds_parts.pos3{
  width: 65%;
  top: 0;
  left: 69%;
  transform: translate(0, -13%);
}
.mv_clouds_parts.pos4{
  width: 54.84%;
  bottom: 0;
  left: -18%;
  transform: translate(0, 27%);
}
.mv_clouds_parts.pos5{
  width: 76.93%;
  bottom: 0;
  left: -13%;
  transform: translate(0, 36%);
}
.mv_clouds_parts.pos6{
  width: 76.93%;
  bottom: 0;
  left: 67%;
  transform: translate(0, 14%);
}

.mv_clouds_parts {
  will-change: transform, filter;
  pointer-events: none;
}

/* 上の雲グループ（pos1-3） */
/*.mv_clouds_parts.pos1 { filter: blur(0px);   opacity: 0.55; }
.mv_clouds_parts.pos2 { filter: blur(1px);   opacity: 0.48; }
.mv_clouds_parts.pos3 { filter: blur(2px);   opacity: 0.42; }*/

/* 下の雲グループ（pos4-6） */
/*.mv_clouds_parts.pos4 { filter: blur(0px);   opacity: 0.50; }
.mv_clouds_parts.pos5 { filter: blur(1.5px); opacity: 0.44; }
.mv_clouds_parts.pos6 { filter: blur(3px);   opacity: 0.38; }*/

/*** canvas ***/

#canvas {
  height: 100vh;
  width: 100vw;
  z-index: 10;
}

#back-to-lib-link {
  display: inline-block;
  position: fixed;
  top: 0;
  right: 0;
  padding: 0.25em 0.5em;
  background: #ee6557;
  color: white;
  text-decoration: none;
  z-index: 20;
  font-size: 0.85em;
}

#back-to-lib-link:hover {
  background: black;
}

#source-code-link {
  display: inline-block;
  position: fixed;
  bottom: 1em;
  right: 1em;
  padding: 0.25em 0.5em;
  background: #ee6557;
  color: white;
  text-decoration: none;
  z-index: 50;
}

#source-code-link:hover {
  background: black;
}

.multi-textures {
  position: absolute;
  inset: 0;
  z-index: 1;

  /*cursor: pointer;*/
  font-size: 3em;
  color: white;

  justify-content: center;
  align-items: center;
  align-content: center;

}

.multi-textures img {
  display: none;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

/*** handling errors ***/

.no-curtains .multi-textures {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-curtains .multi-textures span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3D(-50%, -50%, 0);
}

.no-curtains.image-1 .multi-textures img:nth-child(3) {
  display: block;
}

.no-curtains.image-2 .multi-textures img:nth-child(4) {
  display: block;
}

.no-curtains.image-3 .multi-textures img:nth-child(5) {
  display: block;
}

.no-curtains.image-4 .multi-textures img:nth-child(6) {
  display: block;
}


.mv_catch{
  left: 30px;
  bottom: 30px;
}
.mv_catch_ja{
  font-size: 40px;
}
.mv_catch_en{
  font-size: 20px;
  margin-top: 30px;
}
.mv_line{
  width: 100px;
  bottom: 250px;
  right: 15px;
}
.mv_line img{
  max-width: 100%;
}

.gjs-dashed .loading{
  display: none;
}
.gjs-dashed #mv{
  height: auto;
}
.gjs-dashed #mv .canvas{
  display: none;
}
.gjs-dashed .multi-textures{
  position: static;
}
.gjs-dashed .multi-textures img{
  display: block;
  width: 100%;
}
.gjs-dashed .multi-textures .data-sampler{
  display: none;
}
.gjs-dashed .mv_clouds{
  display: none;
}



/*******************************
*　サイドバー
********************************/

/* サイドバー */
.sidebar{
  position: fixed;
  z-index: 2;
  top: 50%;
  right: 0;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

/* バナー */
.sidebar_bn{
  display: block;
}
.sidebar_bn + .sidebar_bn{
  margin-top: 15px;
}
.sidebar_bn img{
  width: 40px;
  transition: 0.2s all;
}
.sidebar_bn:hover{

}
.sidebar_bn:hover img{
  transform: scale(1.05);
  filter: brightness(1.05);
}


@media (min-width:768px){

  /* サイドバー */
  .sidebar{
    top: 50%;
  }

  /* バナー */
  .sidebar_bn{
  }
  .sidebar_bn img{
    width: 60px;
  }


}
@media (min-width:1024px){

}
@media (min-width:1200px){

  /* バナー */
  .sidebar_bn{
  }
  .sidebar_bn img{
    width: auto;
  }

}



@media (max-width:767px){
  .header .menu{
    display: none;
  }
}
@media (min-width:768px){
  
  .mv_catch{
    /*left: 100px;*/
    bottom: 100px;
  }
  .mv_catch_ja{
    font-size: 60px;
  }
  .mv_catch_en{
    font-size: 36px;
  }
}
@media (min-width:1024px){
  
}
@media (min-width:1200px){
  
}
@media (min-width:1470px){
  
  .mv_catch{
    left: 100px;
    bottom: 200px;
  }

  .mv_catch_ja{
    font-size: 90px;
    /*font-size: 105px;*/
  }
  .mv_catch_en{
    font-size: 36px;
    font-size: 42px;
    margin-top: 50px;
  }
  .mv_line{
    width: 180px;
    bottom: 25px;
    right: 25px;
  }
}
@media (min-width:1720px){
  
  .mv_catch{
    /*left: 100px;*/
    /*bottom: 100px;*/
  }
  .mv_catch_ja{
    font-size: 120px;
  }
  .mv_catch_en{
    font-size: 48px;
    margin-top: 50px;
  }
  .mv_line{
    width: 200px;
  }
  
}


/*@media screen and (max-width: 1000px) {

  .multi-textures {
    font-size: 2em;
  }

}*/