@charset "utf-8";

/* CSS Document */


.loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  padding-bottom: 60px;
  z-index: 10099;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: #fff;
  transform-origin: center center;
  pointer-events: none;
}

.loading-box {
  position: relative;
  z-index: 2;
}

.loading-object{
  width: 100px;
  margin: 0 auto;
}
.loading-object.-character {
  height: 0;
  overflow: hidden;
  position: relative;
}
.loading-object.-character img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}


body.is-loaded .loading-object.-upper {
  animation: anim-loadingJump1 0.9s linear 1.2s 1;
}
body.is-loaded .loading-object.-character {
  animation: anim-loadingJump2 0.9s linear 1.2s 1;
  transition: height 1s cubic-bezier(.86,.38,.24,1) 0.2s;
  height: 140px;
}
body.is-loaded .loading {
  transform: scale(1.1);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 1s cubic-bezier(0.61, 1, 0.88, 1) 3s,
    opacity 1s cubic-bezier(0.61, 1, 0.88, 1) 3s,
    visibility 0s ease 4s;
}

@keyframes anim-loadingJump1 {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(0, 5px); }
  40%  { transform: translate(0, 15px); }
  50%  { transform: translate(0, 0); }
  60%  { transform: translate(0, -60px); }
  75%  { transform: translate(0, -60px); }
  85%  { transform: translate(0, 10px); }
  100% { transform: translate(0, 0); }
}
@keyframes anim-loadingJump2 {
  0%   { transform: scale(1.0, 1.0)  translate(0, 0%); }
  10%  { transform: scale(1.1, 0.95) translate(0, 5px); }
  40%  { transform: scale(1.2, 0.9)  translate(0, 10px); }
  50%  { transform: scale(1.0, 1.0)  translate(0, 0); }
  60%  { transform: scale(0.9, 1.2)  translate(0, -40px); }
  75%  { transform: scale(0.9, 1.2)  translate(0, -40px); }
  85%  { transform: scale(1.2, 0.9)  translate(0, 10px); }
  100% { transform: scale(1.0, 1.0)  translate(0, 0); }
}


/***********
homeMovieBg
************/

.homeMovieBg{
  min-height: 100%;
  min-height: 100vh;
  min-width: 100%;
  min-width: 100vw;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  opacity: 0.25;
}

.homeWrapper{
  position: relative;
  z-index: 2;
}


/***********
homeIntro
************/

.homeIntro {
  padding-top: 400px;
  padding-bottom: 4em;
  user-select: none;
}
.homeIntro-lead {
  display: flex;
  justify-self: center;
  width: clamp(480px,30vw, 1000px);
  margin: 0 auto;
}
.homeIntro-lead-item {
  padding: 0 2%;
}

@media screen and (max-width:1024px) {

  .homeIntro {
    padding-top: 250px;
  }
  .homeIntro-lead {
    width: clamp(200px,65vw, 400px);
    margin: 0 auto;
  }
}

@media screen and (max-width:834px) {

  .homeIntro {
    padding-top: 220px;
    padding-bottom: 0;
  }
}



/***********
homeWorks
************/

.homeWorks {
  padding-bottom: 10em;
}
.homeWorks-list{
  padding-top: 6em;
  min-height: 80vh;
}

@media screen and (max-width:834px) {

  .homeWorks {
    padding-bottom: 5em;
  }
  .homeWorks-list{
    padding-top: 2em;
    min-height: 40vh;
  }

}


/***********
xxxxx
************/