@charset "utf-8";


/* フェードイン：位置固定
---------------------------------------------------------- */
.fadeIn:not(.et-legacy *):not(.tw-body *) {
  animation-name: fadeInAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* 下から */
.fadeUp:not(.et-legacy *):not(.tw-body *) {
  animation-name: fadeUpAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* 上から */
.fadeDown:not(.et-legacy *):not(.tw-body *) {
  animation-name: fadeDownAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* 左から */
.fadeLeft:not(.et-legacy *):not(.tw-body *) {
  animation-name: fadeLeftAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* 右から */
.fadeRight:not(.et-legacy *):not(.tw-body *) {
  animation-name: fadeRightAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定
---------------------------------------------------------- */
.fadeInTrigger:not(.et-legacy *):not(.tw-body *),
.fadeUpTrigger:not(.et-legacy *):not(.tw-body *),
.fadeDownTrigger:not(.et-legacy *):not(.tw-body *),
.fadeLeftTrigger:not(.et-legacy *):not(.tw-body *),
.fadeRightTrigger:not(.et-legacy *):not(.tw-body *),
.flipDownTrigger:not(.et-legacy *):not(.tw-body *),
.flipLeftTrigger:not(.et-legacy *):not(.tw-body *),
.flipLeftTopTrigger:not(.et-legacy *):not(.tw-body *),
.flipRightTrigger:not(.et-legacy *):not(.tw-body *),
.flipRightTopTrigger:not(.et-legacy *):not(.tw-body *),
.rotateXTrigger:not(.et-legacy *):not(.tw-body *),
.rotateYTrigger:not(.et-legacy *):not(.tw-body *),
.rotateLeftZTrigger:not(.et-legacy *):not(.tw-body *),
.rotateRightZTrigger:not(.et-legacy *):not(.tw-body *),
.zoomInTrigger:not(.et-legacy *):not(.tw-body *),
.zoomOutTrigger:not(.et-legacy *):not(.tw-body *),
.blurTrigger:not(.et-legacy *):not(.tw-body *),
.smoothTrigger:not(.et-legacy *):not(.tw-body *),
.bgappearTrigger:not(.et-legacy *):not(.tw-body *),
.bgUDextendTrigger:not(.et-legacy *):not(.tw-body *),
.bgDUextendTrigger:not(.et-legacy *):not(.tw-body *),
.bgRLextendTrigger:not(.et-legacy *):not(.tw-body *),
.bgLRextendTrigger:not(.et-legacy *):not(.tw-body *) {
  opacity: 0;
}


/* 回転
---------------------------------------------------------- */

/* 下へ */
.flipDown:not(.et-legacy *):not(.tw-body *) {
  animation-name: flipDownAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes flipDownAnime {
  from {
    transform: perspective(2500px) rotateX(100deg);
    opacity: 0;
  }
  to {
    transform: perspective(2500px) rotateX(0);
    opacity: 1;
  }
}


/* 左へ */
.flipLeft:not(.et-legacy *):not(.tw-body *) {
  animation-name: flipLeftAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
  perspective-origin: left center;
  opacity: 0;
}
@keyframes flipLeftAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0;
  }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop:not(.et-legacy *):not(.tw-body *) {
  animation-name: flipLeftTopAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes flipLeftTopAnime {
  from {
    transform: translate(-20px,80px) rotate(-15deg);
    opacity: 0;
  }
  to {
    transform: translate(0,0) rotate(0deg);
    opacity: 1;
  }
}


/* 右へ */
.flipRight:not(.et-legacy *):not(.tw-body *) {
  animation-name: flipRightAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
  perspective-origin: right center;
  opacity: 0;
}
@keyframes flipRightAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
    opacity: 0;
  }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}


/* 右上へ */
.flipRightTop:not(.et-legacy *):not(.tw-body *) {
  animation-name: flipRightTopAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes flipRightTopAnime {
  from {
    transform: translate(-20px,80px) rotate(25deg);
    opacity: 0;
  }
  to {
    transform: translate(0,1) rotate(0deg);
    opacity: 1;
  }
}


/* X 軸（縦へ） */
.rotateX:not(.et-legacy *):not(.tw-body *) {
  animation-name: rotateXAnime;
  animation-duration: 3.0s;
  animation-fill-mode: forwards;
}
@keyframes rotateXAnime {
  from {
    transform: rotateX(270deg);
    opacity: 0;
  }
  to {
    transform: rotateX(360deg);
    opacity: 1;
  }
}


/*　Y軸（横へ） */
.rotateY:not(.et-legacy *):not(.tw-body *) {
  animation-name: rotateYAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
}
@keyframes rotateYAnime {
  from {
    transform: rotateY(0);
    opacity: 0;
  }
  to {
    transform: rotateY(-360deg);
    opacity: 1;
  }
}


/* Z 軸（左へ） */
.rotateLeftZ:not(.et-legacy *):not(.tw-body *) {
  animation-name: rotateLeftZAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
}
@keyframes rotateLeftZAnime {
  from{
    transform: rotateZ(0);
    opacity: 0;
  }
  to{
    transform: rotateZ(-360deg);
    opacity: 1;
  }
}


/*　Z 軸（右へ） */
.rotateRightZ:not(.et-legacy *):not(.tw-body *) {
  animation-name: rotateRightZAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
}
@keyframes rotateRightZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0;
  }
  to {
    transform: rotateZ(360deg);
    opacity: 1;
  }
}


/* ZOOM
---------------------------------------------------------- */

/* 拡大 */
.zoomIn:not(.et-legacy *):not(.tw-body *) {
  animation-name: zoomInAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
}
@keyframes zoomInAnime {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}


/* 縮小 */
.zoomOut:not(.et-legacy *):not(.tw-body *) {
  animation-name: zoomOutAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
}
@keyframes zoomOutAnime {
  from {
    transform: scale(1.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}


/* ぼかしから出現 */
.blur:not(.et-legacy *):not(.tw-body *) {
  animation-name: blurAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
}
@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}


/* Smooth in
---------------------------------------------------------- */

/* 滑らかに出現 */
.smooth:not(.et-legacy *):not(.tw-body *) {
  animation-name: smoothAnime;
  animation-duration: 2.0s;
  animation-fill-mode: forwards;
  transform-origin: left;
  opacity: 0;
}
@keyframes smoothAnime {
  from {
    transform: translate3d(0, 100%, 0) skewY(12deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) skewY(0);
    opacity:1;
  }
}


/* 枠線が伸びて出現
---------------------------------------------------------- */

.lineTrigger:not(.et-legacy *):not(.tw-body *) {
  position: relative; /* 枠線が書かれる基点*/
  opacity: 0;
}
.lineTrigger.lineanime:not(.et-legacy *):not(.tw-body *) {
  animation-name: lineAnimeBase;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}
@keyframes lineAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;  
  }
}


/* 上下線 */
.lineTrigger:not(.et-legacy *):not(.tw-body *)::before,
.lineTrigger:not(.et-legacy *):not(.tw-body *)::after {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: #333;/* 枠線の色*/
}


/* 左右線 */
.line2:not(.et-legacy *):not(.tw-body *)::before,
.line2:not(.et-legacy *):not(.tw-body *)::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0;
  background: #333;/* 枠線の色*/
}


/* 上線 */
.lineTrigger:not(.et-legacy *):not(.tw-body *)::before {
  top:0;
  left:0;
}
.lineTrigger.lineanime:not(.et-legacy *):not(.tw-body *)::before {
  animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}


/* 右線 */
.line2:not(.et-legacy *):not(.tw-body *)::before { 
  top: 0;
  right: 0;
}

.lineTrigger.lineanime .line2:not(.et-legacy *):not(.tw-body *)::before {
  animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}


/* 下線 */
.lineTrigger:not(.et-legacy *):not(.tw-body *)::after { 
  bottom: 0;
  right: 0;
}

.lineTrigger.lineanime:not(.et-legacy *):not(.tw-body *)::after {
  animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}


/* 左線 */
.line2:not(.et-legacy *):not(.tw-body *)::after { 
  bottom: 0;
  left: 0;
}

.lineTrigger.lineanime .line2:not(.et-legacy *):not(.tw-body *)::after {
  animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}
@keyframes lineAnime {
  0% {width:0%;}
  100%{width:100%;}
}
@keyframes lineAnime2 {
  0% {height:0%;}
  100%{height:100%;}
}


/* 枠線内側の要素 */
.lineTrigger.lineanime .lineinappear:not(.et-legacy *):not(.tw-body *) {
  animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;/*初期値を透過0にする*/ 
}
@keyframes lineInnerAnime {
  0% {opacity:0;}
  100% {opacity:1;}
}



/* 背景色が伸びて出現
---------------------------------------------------------- */

/* 背景色が伸びて出現（共通）*/
.bgextend:not(.et-legacy *):not(.tw-body *) {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity: 0;
}
@keyframes bgextendAnimeBase {
  from {
    opacity:0;
  }
  to {
    opacity:1;  
  }
}


/* 中の要素 */
.bgappear:not(.et-legacy *):not(.tw-body *) {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* 左から */
.bgLRextend:not(.et-legacy *):not(.tw-body *)::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}


/* 右から */
.bgRLextend:not(.et-legacy *):not(.tw-body *)::before {
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0);
  }
  50% {
    transform-origin: right;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: left;
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}


/* 下から */
.bgDUextend:not(.et-legacy *):not(.tw-body *)::before {
  animation-name: bgDUextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}


/* 上から */
.bgUDextend:not(.et-legacy *):not(.tw-body *)::before {
  animation-name: bgUDextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime {
  0% {
    transform-origin: top;
    transform: scaleY(0);
  }
  50% {
    transform-origin: top;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: bottom;
  }
  100% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}


/* バウンド */
.bounce.active:not(.et-legacy *):not(.tw-body *) {
  animation-duration: 1.5s;
  animation-fill-mode: both;
  animation-name: bounce;
  transform-origin: center bottom;
}
@keyframes bounce {
  100%,
  60%,
  30%,
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-30px);
  }
  40% {
    transform: translateY(-15px);
  }
}


/* 点滅 */
.flash.active:not(.et-legacy *):not(.tw-body *) {
  animation-duration: 2.0s;
  animation: flash 1.0s;
}
@keyframes flash {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


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

/* アニメーションの回数を決めるCSS*/
.count2:not(.et-legacy *):not(.tw-body *) {  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite:not(.et-legacy *):not(.tw-body *) {  
  animation-iteration-count: infinite;/*無限ループ*/
}


/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05:not(.et-legacy *):not(.tw-body *) {  
  animation-delay: 0.5s;
}

.delay-time1:not(.et-legacy *):not(.tw-body *) {  
  animation-delay: 1.0s;
}

.delay-time15:not(.et-legacy *):not(.tw-body *) {  
  animation-delay: 1.5s;
}

.delay-time2:not(.et-legacy *):not(.tw-body *) {  
  animation-delay: 2.0s;
}

.delay-time25:not(.et-legacy *):not(.tw-body *) {  
  animation-delay: 2.5s;
}


/* アニメーション時間差表示*/
.fade01:not(.et-legacy *):not(.tw-body *) {animation-delay: 0.3s;}
.fade02:not(.et-legacy *):not(.tw-body *) {animation-delay: 0.8s;}
.fade03:not(.et-legacy *):not(.tw-body *) {animation-delay: 1.3s;}


/* アニメーション自体が変化する時間差を決めるCSS*/
.change-time05:not(.et-legacy *):not(.tw-body *) {  
  animation-duration: 0.5s;
}
.change-time1:not(.et-legacy *):not(.tw-body *) {  
  animation-duration: 1.0s;
}
.change-time15:not(.et-legacy *):not(.tw-body *) {  
  animation-duration: 1.5s;
}
.change-time2:not(.et-legacy *):not(.tw-body *) {  
  animation-duration: 2.0s;
}
.change-time25:not(.et-legacy *):not(.tw-body *) {  
  animation-duration: 2.5s;
}
.change-time3:not(.et-legacy *):not(.tw-body *) {  
  animation-duration: 3.0s;
}
.change-time35:not(.et-legacy *):not(.tw-body *) {  
  animation-duration: 3.5s;
}
.change-time4:not(.et-legacy *):not(.tw-body *) {  
  animation-duration: 4.0s;
}
.change-time45:not(.et-legacy *):not(.tw-body *) {  
  animation-duration: 4.5s;
}