@charset "UTF-8";

/* ----------------------------------------------------------------------
    アニメーション
---------------------------------------------------------------------- */

/****************************************************
 * 左から右へ徐々に表示
 */

/* 見出し用 */
.slideOpenLeft10 {
  width: 100%;
  overflow: hidden;
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.slideOpenLeft10a {
  -webkit-animation: slideOpenLeft10 0.5s forwards;
  animation: slideOpenLeft10 0.5s forwards;
}

@-webkit-keyframes slideOpenLeft10 {
  0% { -webkit-transform: translateX(-100%) translateZ(0); }
  100% { -webkit-transform: translateX(0%) translateZ(0); }
}

@keyframes slideOpenLeft10 {
  0% { transform: translateX(-100%) translateZ(0); }
  100% { transform: translateX(0%) translateZ(0); }
}

.slideOpenLeft11 {
  width: 100%;
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.slideOpenLeft11a {
  -webkit-animation: slideOpenLeft11 0.5s forwards;
  animation: slideOpenLeft11 0.5s forwards;
}

@-webkit-keyframes slideOpenLeft11 {
  0% { -webkit-transform: translateX(100%) translateZ(0); }
  100% { -webkit-transform: translateX(0%) translateZ(0); }
}

@keyframes slideOpenLeft11 {
  0% { transform: translateX(100%) translateZ(0); }
  100% { transform: translateX(0%) translateZ(0); }
}

/* 見出し用（右→左） */
.slideOpenRight10 {
  width: 100%;
  overflow: hidden;
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.slideOpenRight10a {
  -webkit-animation: slideOpenRight10 0.5s forwards;
  animation: slideOpenRight10 0.5s forwards;
}

@-webkit-keyframes slideOpenRight10 {
  0% { -webkit-transform: translateX(100%) translateZ(0); }
  100% { -webkit-transform: translateX(0%) translateZ(0); }
}

@keyframes slideOpenRight10 {
  0% { transform: translateX(100%) translateZ(0); }
  100% { transform: translateX(0%) translateZ(0); }
}

.slideOpenRight11 {
  width: 100%;
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.slideOpenRight11a {
  -webkit-animation: slideOpenRight11 0.5s forwards;
  animation: slideOpenRight11 0.5s forwards;
}

@-webkit-keyframes slideOpenRight11 {
  0% { -webkit-transform: translateX(-100%) translateZ(0); }
  100% { -webkit-transform: translateX(0%) translateZ(0); }
}

@keyframes slideOpenRight11 {
  0% { transform: translateX(-100%) translateZ(0); }
  100% { transform: translateX(0%) translateZ(0); }
}

/****************************************************
 * 右から左へスライド
 */
.slideRL00 {
  opacity: 0;
}

.slideRL05a {
  -webkit-animation: slideRL05a 0.5s forwards;
  animation: slideRL05a 0.5s forwards;
}

@-webkit-keyframes slideRL05a {
  0% {
    -webkit-transform: translateX(50px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideRL05a {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 40% */
.slideRL04pa {
  -webkit-animation: slideRL04pa 0.5s forwards;
  animation: slideRL04pa 0.5s forwards;
}

@-webkit-keyframes slideRL04pa {
  0% {
    -webkit-transform: translateX(40%);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes slideRL04pa {
  0% {
    transform: translateX(40%);
    opacity: 0;
  }

  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

/****************************************************
 *	上から下への移動表示
 */
.drop00 {
  opacity: 0;
}

.drop05a {
  -webkit-animation: drop05 0.5s forwards;
  animation: drop05 0.5s forwards;
}

@-webkit-keyframes drop05 {
  0% {
    -webkit-transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}

@keyframes drop05 {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/****************************************************
 *	下から上への移動表示
 */
.upturn00 {
  opacity: 0;
}

.upturn05a {
  -webkit-animation: upturn00 0.5s forwards;
  animation: upturn00 0.5s forwards;
}

@-webkit-keyframes upturn00 {
  0% {
    -webkit-transform: translateY(50px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}

@keyframes upturn00 {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/****************************************************
 *	中央から表示（小から大）
 */
.zoomIn00 {
  opacity: 0;
}

.zoomIn00a {
  -webkit-animation: zoomIn00 0.5s forwards;
  animation: zoomIn00 0.5s forwards;
}

@-webkit-keyframes zoomIn00 {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0, 0, 0);
  }

  25% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 0.5;
    -webkit-transform: scale3d(0.2, 0.2, 0.2);
  }

  80% {
    opacity: 0.8;
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
  }

  90% {
    opacity: 0.9;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
  }
}

@keyframes zoomIn00 {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
  }

  25% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 0.5;
    transform: scale3d(0.2, 0.2, 0.2);
  }

  80% {
    opacity: 0.8;
    transform: scale3d(1.2, 1.2, 1.2);
  }

  90% {
    opacity: 0.9;
    transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/****************************************************
 *	回転３D（Y軸）
 */
.rotateY3d00 {
  opacity: 0;
  transform-origin: center center;
}

.rotateY3d00a {
  -webkit-animation: rotateY3d00 0.5s forwards;
  animation: rotateY3d00 0.5s forwards;
}

@-webkit-keyframes rotateY3d00 {
  0% {
    opacity: 0;
    -webkit-transform: perspective(3000px)  rotateY(90deg);
  }

  0.1% {
    opacity: 1;
    -webkit-transform: perspective(3000px)  rotateY(90deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: perspective(3000px)  rotateY(0deg);
  }
}

@keyframes rotateY3d00 {
  0% {
    opacity: 0;
    transform: perspective(3000px)  rotateY(90deg);
  }

  0.1% {
    opacity: 1;
    transform: perspective(3000px)  rotateY(90deg);
  }

  100% {
    opacity: 1;
    transform: perspective(3000px)  rotateY(0deg);
  }
}

/****************************************************
 *	フェードイン
 */
.fadeIn00 {
  opacity: 0;
}

.fadeIn00a {
  -webkit-animation: fadeIn00 0.5s forwards;
  animation: fadeIn00 0.5s forwards;
}

@-webkit-keyframes fadeIn00 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeIn00 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ----------------------------------------------------------------------
 * 	アニメーション各種調整用
---------------------------------------------------------------------- */

/* 完了時間 */
.aniDrt01 {
  -webkit-animation-duration: 0.1s;
  animation-duration: 0.1s;
}

.aniDrt02 {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.aniDrt025 {
  -webkit-animation-duration: 0.25s;
  animation-duration: 0.25s;
}

.aniDrt03 {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

.aniDrt04 {
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
}

.aniDrt05 {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

.aniDrt075 {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
}

.aniDrt10 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.aniDrt125 {
  -webkit-animation-duration: 1.25s;
  animation-duration: 1.25s;
}

.aniDrt15 {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

/* 遅延 */
.aniDly01 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.aniDly02 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.aniDly03 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.aniDly04 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.aniDly06 {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.aniDly07 {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.aniDly08 {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.aniDly09 {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

.aniDly11 {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

.aniDly12 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.aniDly13 {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}

.aniDly14 {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

.aniDly16 {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.aniDly17 {
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s;
}

.aniDly18 {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

.aniDly19 {
  -webkit-animation-delay: 1.9s;
  animation-delay: 1.9s;
}

.aniDly21 {
  -webkit-animation-delay: 2.1s;
  animation-delay: 2.1s;
}

.aniDly22 {
  -webkit-animation-delay: 2.2s;
  animation-delay: 2.2s;
}

.aniDly23 {
  -webkit-animation-delay: 2.3s;
  animation-delay: 2.3s;
}

.aniDly24 {
  -webkit-animation-delay: 2.4s;
  animation-delay: 2.4s;
}

.aniDly26 {
  -webkit-animation-delay: 2.6s;
  animation-delay: 2.6s;
}

.aniDly27 {
  -webkit-animation-delay: 2.7s;
  animation-delay: 2.7s;
}

.aniDly28 {
  -webkit-animation-delay: 2.8s;
  animation-delay: 2.8s;
}

.aniDly29 {
  -webkit-animation-delay: 2.9s;
  animation-delay: 2.9s;
}

.aniDly025 {
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

.aniDly05 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.aniDly075 {
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
}

.aniDly10 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.aniDly125 {
  -webkit-animation-delay: 1.25s;
  animation-delay: 1.25s;
}

.aniDly15 {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.aniDly175 {
  -webkit-animation-delay: 1.75s;
  animation-delay: 1.75s;
}

.aniDly20 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
