/* ---------------------------------------------------------

   Opening Animation

--------------------------------------------------------- */

.openani {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20000;
  pointer-events: none;
}


/* ---------------------------------------------------------

   Base

--------------------------------------------------------- */

.openani-base {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 20000;

  /* 1.5秒後に非表示 */
  animation: openaniBaseHide 0s linear 1.5s forwards;
}

@keyframes openaniBaseHide {
  to {
    visibility: hidden;
  }
}


/* ---------------------------------------------------------

   Left Box

--------------------------------------------------------- */

.openani-leftbox {
  position: fixed;
  top: 0;
  left: 0;

  width: 50%;
  height: 100%;

  background: #000000;
  z-index: 21200;

  transform-origin: top left;
  transform: scaleY(0) scaleX(1);

    animation: openaniLeft 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}


/* ---------------------------------------------------------

   Right Box

--------------------------------------------------------- */

.openani-rightbox {
  position: fixed;
  right: 0;
  bottom: 0;

  width: 50%;
  height: 100%;

  background: #cf0033;
  z-index: 21100;

  transform-origin: bottom right;
  transform: scaleY(0) scaleX(1);

    animation: openaniRight 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}


/* ---------------------------------------------------------

   Logo

--------------------------------------------------------- */

.openani-logo {
  position: fixed;

  top: 50%;
  left: 50%;

  width: 25%;
  height: auto;

  z-index: 21500;

  transform: translate(-50%, -50%);

  /* 2.5秒で瞬間的に非表示 */
  animation: openaniLogoHide 0s linear 2.5s forwards;
}

.openani-logo img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes openaniLogoHide {
  to {
    visibility: hidden;
  }
}


/* ---------------------------------------------------------

   Left Animation

   0.0 - 1.0秒：停止
   1.0 - 1.5秒：上 → 下へ展開
   1.5 - 2.5秒：停止
   2.5 - 3.0秒：左方向へ縮小

--------------------------------------------------------- */

@keyframes openaniLeft {

  /* 0秒 */
  0% {
    transform: scaleY(0) scaleX(1);
  }

  /* 1秒：ここから勢いよく展開 */
  33.333% {
    transform: scaleY(0) scaleX(1);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* 1.5秒 */
  50% {
    transform: scaleY(1) scaleX(1);
  }

  /* 2.5秒：ここから勢いよく縮小 */
  83.333% {
    transform: scaleY(1) scaleX(1);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* 3秒 */
  100% {
    transform: scaleY(1) scaleX(0);
  }
}


/* ---------------------------------------------------------

   Right Animation

   0.0 - 1.0秒：停止
   1.0 - 1.5秒：下 → 上へ展開
   1.5 - 2.5秒：停止
   2.5 - 3.0秒：右方向へ縮小

--------------------------------------------------------- */

@keyframes openaniRight {

  /* 0秒 */
  0% {
    transform: scaleY(0) scaleX(1);
  }

  /* 1秒：ここから勢いよく展開 */
  33.333% {
    transform: scaleY(0) scaleX(1);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* 1.5秒 */
  50% {
    transform: scaleY(1) scaleX(1);
  }

  /* 2.5秒：ここから勢いよく縮小 */
  83.333% {
    transform: scaleY(1) scaleX(1);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* 3秒 */
  100% {
    transform: scaleY(1) scaleX(0);
  }
}


/* ---------------------------------------------------------

   Mobile
   768px以下

--------------------------------------------------------- */

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

  .openani-logo {
    width: 60%;
  }

}