@charset "utf-8";
@keyframes pre_flow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes pre_flow_img {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
#prologue {
  width: 101%;
  height: 100%;
  top: 0;
  position: fixed;
  z-index: 9999;
  background-color: #fff;
  background-image: url("../img/prologue.jpg");
  background-position: top right;
  background-size: cover;
  font-family: "yu-mincho-pr6", YuMincho, "Yu Mincho", sans-serif;
}
#prologue div {
  /* width: 100%; */
  position: absolute;
  opacity: 1;
  transition: 1s;
  /* cursor: pointer; */
  overflow: hidden;
}
.pre_hidden {
  opacity: 0 !important;
  pointer-events: none;
}
.pre_hidden2 {
  opacity: 0 !important;
  pointer-events: none;
}
.pre0_box,
.pre1_box,
.pre2_box,
.pre3_box,
.pre4_box {
  width: 100%;
  height: 100vh;
  position: relative;
}
.pre0_box {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .pre0_box_2 {
  top: 50%;
  left: 50%;
}
.pre0_box_2_sp {
  top: 50%;
  transform: translateY(-50%);
} */
.pre0,
.pre1,
.pre2,
.pre3 {
  overflow: hidden;
}
.pre0_1,
.pre0_1_sp {
  position: static !important;
  max-width: 1920px;
  width: 82.4%;
  /* top: 39%; */
  /* left: 10%; */
  z-index: 11;
  overflow: hidden;
  margin: 0 auto;
}
/* .pre0_1_sp {
  position: absolute!important;
  max-width: 715px;
  width: 100%;
  z-index: 10;
  overflow: hidden;
  top: 50%;
  left: 0;
  margin-bottom: 10px;
} */
.pre1_1 {
  position: static !important;
  max-width: 1030px;
  width: 82.4%;
  /* top: 39%; */
  /* left: 10%; */
  z-index: 10;
  overflow: hidden;
  margin-bottom: 20px;
}
.pre1_1_sp {
  position: static !important;
  max-width: 715px;
  width: 100%;
  z-index: 10;
  overflow: hidden;
  top: 0;
  left: 0;
  margin-bottom: 10px;
}
.pre1_1_2_sp {
  position: static !important;
  max-width: 315px;
  width: 44%;
  z-index: 10;
  overflow: hidden;
  bottom: 0;
  left: 0;
  margin-bottom: 50px;
}
.pre1_2_sp {
  position: static !important;
  max-width: 640px;
  width: 89.5%;
  z-index: 10;
  overflow: hidden;
  top: 0;
  left: 0;
  margin-bottom: 10px;
}
.pre1_2_2_sp {
  position: static !important;
  max-width: 610px;
  width: 85.3%;
  z-index: 10;
  overflow: hidden;
  bottom: 0;
  left: 0;
}
.pre1_2 {
  position: static !important;
  max-width: 1250px;
  width: 100%;
  top: 51%;
  /* left: 10%; */
  z-index: 10;
  overflow: hidden;
}

.pre1_box {
  display: flex;
  justify-content: center;
}
.pre1_box_2 {
  position: relative;
  max-width: 1250px;
  width: 90%;
  height: auto;
  /* transform-origin: center; */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.pre1_box_2_sp {
  position: relative;
  width: 98%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pre1_box_3_sp {
  position: relative;
  width: 100%;
  height: 100px;
  bottom: 20%;
}
.pre2_box_2 {
  position: relative;
  width: 80%;
  height: 100vh;
  left: 50%;
  transform: translateX(-50%);
}
.pre2_box_3_sp {
  position: relative;
  width: 98%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pre2_box_4_sp {
  position: relative;
  width: 100%;
  height: auto;
  top: 52%;
}
.pre3_box_2 {
  position: relative;
  width: 100%;
  height: 100vh;
  /* left: 50%;
  transform: translateX(-50%); */
}
@media screen and (max-width: 1100px) {
  .pre2_box_2 {
    width: 90%;
  }
}
.pre2_box_3 {
  max-width: 1000px;
  width: 90%;
  height: auto;
  /* position: absolute; */
  position: relative;
  left: 50%;
  /* top: 41%; */
  top: 50%;
  transform: translate(-50%, -50%);
}
.pre3_box_3 {
  max-width: 1115px;
  width: 90%;
  height: auto;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.pre3_box_3 .flex_area {
  position: static !important;
  max-width: 930px;
  width: 83.5%;
  height: auto;
  margin: 40px 0 auto auto;
}
.pre3_box_3_sp {
  position: relative;
  max-width: 715px;
  width: 100%;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 35px;
}
/* @media screen and (max-width:1430px) {
  .pre3_box_2 {
     width: 90%;
  }
  .pre3_box_3 {
    width: 65%;
  }
} */
.pre2_box_3 .flex_area {
  position: static !important;
  width: 100%;
  height: auto;
}
.pre2_box_3 .flex_area .pre2_1 {
  position: static !important;
  max-width: 200px;
  width: 19.25%;
  /* top: 41%; */
  /* left: 10%; */
  z-index: 9;
}
.pre2_box_3_sp .flex_area {
  position: static !important;
  width: 100%;
  height: auto;
  margin-bottom: 50px;
}
.pre2_box_3_sp .flex_area .pre2_1_sp {
  position: static !important;
  max-width: 200px;
  width: 27.95%;
  z-index: 9;
}
.pre2_box_3 .flex_area .pre2_2 {
  position: static !important;
  max-width: 360px;
  width: 35%;
  /* top: 41%; */
  /* left: 19.25%; */
  z-index: 9;
}
.pre2_box_3_sp .pre2_2_sp {
  position: static !important;
  max-width: 360px;
  width: 50.3%;
  z-index: 9;
}
.pre2_3 {
  position: static !important;
  max-width: 760px;
  width: 71.5%;
  top: 62.4%;
  left: 30%;
  z-index: 9;
  margin: 20px 0 auto auto;
}
.pre2_box_3_sp .pre2_3_sp {
  position: static !important;
  max-width: 345px;
  width: 48.2%;
  /* top: 0;
  left: 0; */
  z-index: 9;
}
.pre2_box_3_sp .pre2_3_2_sp {
  position: static !important;
  max-width: 415px;
  width: 58%;
  margin: 20px 0 auto auto;
  z-index: 9;
}
.pre3_1 {
  position: static !important;
  max-width: 370px;
  width: 33.2%;
  top: 37.99%;
  /* left: 18%; */
  z-index: 8;
}
.pre3_1_sp {
  position: static !important;
  max-width: 370px;
  width: 51.9%;
  top: 41%;
  /* left: 18%; */
  z-index: 8;
  margin-bottom: 15px;
}
.pre3_2 {
  position: static !important;
  max-width: 215px;
  width: 23.1%;
  /* top: 52%;
  left: 40%;
  transform: translateX(-100%); */
  z-index: 8;
}
.pre3_box_3_sp .pre3_2_sp {
  position: static !important;
  max-width: 215px;
  width: 30%;
  z-index: 9;
  margin-bottom: 10px;
}
.pre3_3 {
  position: static !important;
  max-width: 715px;
  width: 76.9%;
  /* top: 52%;
  left: 40%; */
  z-index: 8;
}
.pre3_box_3_sp .pre3_3_sp {
  position: static !important;
  max-width: 715px;
  width: 100%;
  z-index: 9;
}
.pre4_box {
  z-index: 15;
}
.pre_pc .pre4 {
  position: absolute;
  max-width: 30%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pre_sp .pre4 {
  position: absolute;
  max-width: 60%;
  width: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* @keyframes pre_flow1-1-1 {
  0% {
      transform: translateX(-100%);
  }
  9.1% {
    transform: translateX(-90%);
  }
  15.2% {
    transform: translateX(-90%);
  }
  66.7% {
    transform: translateX(-31%);
  }
  72.8% {
    transform: translateX(-31%);
  }
  100% {
      transform: translateX(0);
  }
} */
@keyframes pre_flow1-1-1 {
  0% {
    transform: translate(-50%);
    opacity: 0;
    filter: blur(5px);
  }
  10% {
    transform: translate(-20%);
  }
  20% {
    transform: translate(0%);
  }
  50% {
    filter: blur(0px);
  }
  100% {
    opacity: 1;
  }
}
@keyframes pre_flow1-1-2 {
  0% {
    transform: translate(50%);
  }
  10% {
    transform: translate(20%);
  }
  20% {
    transform: translate(0%);
  }
  100% {
  }
}
.pre_pc .pre1-1 {
  animation-name: pre_flow1-1-1;
  animation-duration: 2s;
  animation-timing-function: linear;
}
.pre_pc .pre1-1 img {
  animation-name: pre_flow1-1-2;
  animation-duration: 2s;
  animation-timing-function: linear;
}
/* @keyframes pre_flow1-1-2 {
  0% {
      transform: translateX(100%);
  }
  9.1% {
    transform: translateX(90%);
  }
  15.2% {
    transform: translateX(90%);
  }
  66.7% {
    transform: translateX(31%);
  }
  72.8% {
    transform: translateX(31%);
  }
  100% {
      transform: translateX(0);
  }
} */
/* @keyframes pre_flow1-1-1_sp {
  0% {
      transform: translateX(-100%);
  }
  13.6% {
    transform: translateX(-85%);
  }
  22.7% {
    transform: translateX(-85%);
  }
  100% {
      transform: translateX(0);
  }
} */
/* @keyframes pre_flow1-1-1_sp {
  0% {
    transform: translate(-50%);
    opacity: 0;
    filter: blur(5px);
  }
  10% {
    transform: translateX(-85%);
  }
  20% {
    transform: translateX(-85%);
  }
  50% {

  }
  100% {
      transform: translateX(0);
  }
} */
.pre_sp .pre1-1 {
  animation-name: pre_flow1-1-1;
  animation-duration: 1.4s;
  animation-timing-function: linear;
}
/* @keyframes pre_flow1-1-2_sp {
  0% {
      transform: translateX(100%);
  }
  13.6% {
    transform: translateX(85%);
  }
  22.7% {
    transform: translateX(85%);
  }
  100% {
      transform: translateX(0);
  }
} */
.pre_sp .pre1-1 img {
  animation-name: pre_flow1-1-2;
  animation-duration: 1.4s;
  animation-timing-function: linear;
}
.pre_sp .pre1-1-2 {
  animation-name: pre_flow1-1-1;
  /* animation-duration: 1.26s; */
  animation-duration: 1.2s;
  animation-timing-function: linear;
}
.pre_sp .pre1-1-2 img {
  animation-name: pre_flow1-1-2;
  /* animation-duration: 1.26s; */
  animation-duration: 1.2s;
  animation-timing-function: linear;
}
/* @keyframes pre_flow1-2-1 {
  0% {
      transform: translateX(-100%);
  }
  13.3% {
    transform: translateX(-83%);
  }
  17.7% {
    transform: translateX(-83%);
  }
  24.4% {
    transform: translateX(-74.5%);
  }
  28.8% {
    transform: translateX(-74.5%);
  }
  48.8% {
    transform: translateX(-48.5%);
  }
  53.2% {
    transform: translateX(-48.5%);
  }
  62.1% {
    transform: translateX(-37%);
  }
  66.5% {
    transform: translateX(-37%);
  }
  86.5% {
    transform: translateX(-11%);
  }
  90.9% {
    transform: translateX(-11%);
  }
  100% {
      transform: translateX(0);
  }
} */
@keyframes pre_flow1-2-1 {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}
.pre_pc .pre1-2 {
  animation-name: pre_flow1-2-1;
  /* animation-duration: 6.3s; */
  /* animation-duration: 4.36s; */
  animation-duration: 1.2s;
  animation-timing-function: linear;
  filter: blur(0px);
}
@keyframes pre_flow1-2-2 {
  /* 0% {
      transform: translateX(100%);
  }
  13.3% {
    transform: translateX(83%);
  }
  17.7% {
    transform: translateX(83%);
  }
  24.4% {
    transform: translateX(74.5%);
  }
  28.8% {
    transform: translateX(74.5%);
  }
  48.8% {
    transform: translateX(48.5%);
  }
  53.2% {
    transform: translateX(48.5%);
  }
  62.1% {
    transform: translateX(37%);
  }
  66.5% {
    transform: translateX(37%);
  }
  86.5% {
    transform: translateX(11%);
  }
  90.9% {
    transform: translateX(11%);
  }
  100% {
      transform: translateX(0);
  } */
}
.pre_pc .pre1-2 img {
  animation-name: pre_flow1-2-2;
  /* animation-duration: 6.3s; */
  animation-duration: 4.36s;
  animation-timing-function: linear;
}
/* @keyframes pre_flow1-2-1_sp {
  0% {
      transform: translateX(-100%);
  }
  27.3% {
    transform: translateX(-66.7%);
  }
  36.4% {
    transform: translateX(-66.7%);
  }
  50.3% {
    transform: translateX(-50%);
  }
  59.5% {
    transform: translateX(-50%);
  }
  100% {
      transform: translateX(0);
  }
} */
.pre_sp .pre1-2 {
  animation-name: pre_flow1-2-1;
  /* animation-duration: 3.08s; */
  animation-duration: 1s;
  animation-timing-function: linear;
}
/* @keyframes pre_flow1-2-2_sp {
  0% {
      transform: translateX(100%);
  }
  27.3% {
    transform: translateX(66.7%);
  }
  36.4% {
    transform: translateX(66.7%);
  }
  50.3% {
    transform: translateX(50%);
  }
  59.5% {
    transform: translateX(50%);
  }
  100% {
      transform: translateX(0);
  }
} */
.pre_sp .pre1-2 img {
  animation-name: pre_flow1-2-2;
  /* animation-duration: 3.08s; */
  animation-duration: 1s;
  animation-timing-function: linear;
}
/* @keyframes pre_flow1-2-2-1_sp {
  0% {
      transform: translateX(-100%);
  }
  19% {
    transform: translateX(-76.5%);
  }
  28.6% {
    transform: translateX(-76.5%);
  }
  71.4% {
    transform: translateX(-23.5%);
  }
  81% {
    transform: translateX(-23.5%);
  }
  100% {
      transform: translateX(0);
  }
} */
.pre_sp .pre1-2-2 {
  animation-name: pre_flow1-2-1;
  /* animation-duration: 2.94s; */
  animation-duration: 1s;
  animation-timing-function: linear;
}
/* @keyframes pre_flow1-2-2-2_sp {
  0% {
      transform: translateX(100%);
  }
  19% {
    transform: translateX(76.5%);
  }
  28.6% {
    transform: translateX(76.5%);
  }
  71.4% {
    transform: translateX(23.5%);
  }
  81% {
    transform: translateX(23.5%);
  }
  100% {
      transform: translateX(0);
  }
} */
.pre_sp .pre1-2-2 img {
  animation-name: pre_flow1-2-2;
  /* animation-duration: 2.94s; */
  animation-duration: 1s;
  animation-timing-function: linear;
}
@keyframes pre_flow2-1-1 {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}
.pre2-1 {
  animation-name: pre_flow2-1-1;
  /* animation-duration: 1s; */
  animation-duration: 1s;
  animation-timing-function: linear;
}
@keyframes pre_flow2-1-2 {
  0% {
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.pre2-1 img {
  animation-name: pre_flow2-1-2;
  /* animation-duration: 1s; */
  animation-duration: 1s;
  animation-timing-function: linear;
}
.pre2-2 {
  animation-name: pre_flow;
  /* animation-duration: 1.5s; */
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
}
@keyframes pre_flow2-2-2 {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.pre2-2 img {
  animation-name: pre_flow2-2-2;
  /* animation-duration: 1.5s; */
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
}
.pre2-3 {
  animation-name: pre_flow;
  /* animation-duration: 4s; */
  animation-duration: 3s;
  animation-timing-function: ease-out;
}
@keyframes pre_flow2-3-2 {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.pre2-3 img {
  animation-name: pre_flow2-3-2;
  /* animation-duration: 4s; */
  animation-duration: 3s;
  animation-timing-function: ease-out;
}
.pre_sp .pre2-3 {
  animation-name: pre_flow;
  animation-duration: 1.75s;
  animation-timing-function: linear;
}
.pre_sp .pre2-3 img {
  animation-name: pre_flow2-3-2;
  animation-duration: 1.75s;
  animation-timing-function: linear;
}
.pre_sp .pre2-3-2 {
  animation-name: pre_flow;
  animation-duration: 2.25s;
  animation-timing-function: ease-out;
}
@keyframes pre_flow2-3-2 {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/* .pre2-3 img {
    animation-name: pre_flow2-3-2;
    animation-duration: 4s;
    animation-timing-function: ease-out;
} */
.pre_sp .pre2-3-2 img {
  animation-name: pre_flow2-3-2;
  animation-duration: 2.25s;
  animation-timing-function: ease-out;
}
@keyframes pre_flow3-1-1 {
  0% {
    transform: translateX(-10%);
  }
  100% {
    transform: translateX(0);
  }
}
.pre3-1 {
  animation-name: pre_flow3-1-1;
  /* animation-duration: 2s; */
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
}
@keyframes pre_flow3-1-2 {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
.pre3-1 img {
  animation-name: pre_flow3-1-2;
  /* animation-duration: 2s; */
  animation-duration: 1.5s;
  animation-timing-function: linear;
}
@keyframes pre_flow3-2-2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.pre3-2 img {
  animation-name: pre_flow3-2-2;
  /* animation-duration: 2s; */
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
}
@keyframes pre_flow3-3-2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.pre3-3 img {
  animation-name: pre_flow3-3-2;
  /* animation-duration: 2s; */
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
}

.curtain {
  background: linear-gradient(
    to top right,
    rgba(255, 255, 255, 1) 33%,
    rgba(255, 255, 255, 0) 66%,
    rgba(255, 255, 255, 0)
  );
  background-size: 300% 300%;
  background-position: left 0% bottom 0%;
}
@keyframes curtain {
  0% {
    background-position: left 100% bottom 100%;
  }
  100% {
    background-position: left 0% bottom 0%;
  }
}
.curtain {
  animation-name: curtain;
  animation-duration: 2s;
  animation-timing-function: linear;
}
@keyframes pre_flow4-1-1 {
  0% {
    max-width: 28%;
  }
  100% {
    max-width: 30%;
  }
}
@keyframes pre_flow0-1-1 {
  0% {
    max-width: 75%;
  }
  100% {
    max-width: 85%;
  }
}
/* .pre_pc .pre0-1 {
    animation-name: pre_flow0-1-1;
    animation-duration: 2s;
    animation-timing-function: ease-out;
} */
.pre_pc .pre4-1 {
  animation-name: pre_flow4-1-1;
  animation-duration: 2s;
  animation-timing-function: ease-out;
}
@keyframes pre_flow4-1-2 {
  0% {
    opacity: 0.7;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
/* .pre_pc .pre0-1 img, */
.pre_pc .pre4-1 img {
  animation-name: pre_flow4-1-2;
  animation-duration: 2s;
  animation-timing-function: linear;
}
@keyframes pre_flow4-1-1_sp {
  0% {
    max-width: 56%;
  }
  100% {
    max-width: 60%;
  }
}
@keyframes pre_flow0-1-1_sp {
  0% {
    max-width: 70%;
  }
  100% {
    max-width: 85%;
  }
}
/* .pre_sp .pre0-1 {
    animation-name: pre_flow0-1-1_sp;
    animation-duration: 2s;
    animation-timing-function: ease-out;
} */
.pre_sp .pre4-1 {
  animation-name: pre_flow4-1-1_sp;
  animation-duration: 2s;
  animation-timing-function: ease-out;
}
/* .pre_sp .pre0-1 img, */
.pre_sp .pre4-1 img {
  animation-name: pre_flow4-1-2;
  animation-duration: 2s;
  animation-timing-function: linear;
}
#skip {
  width: 400px;
  height: 150px;
  z-index: 9999;
  margin: 0 auto auto 95%;
  padding: 50px 50px 50px 50px;
  opacity: 0.3 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: block;
  left: -50px;
}
#skip:hover {
  opacity: 0.6 !important;
}
@media screen and (max-width: 700px) {
  #skip {
    margin: 0 auto auto 90%;
  }
}