.delighter.splash {
  transition: all 2s ease-out;
}
.delighter.splash.ended {
  background: #fff;
}
.delighter.rightA { transform:translate(-100%); opacity:0; transition: all .75s ease-out; }
.delighter.rightA.started { transform:none; opacity:1; }
.rightA{opacity:0;}
.delighter.leftA { transform:translate(100%); opacity:0; transition: all .75s ease-out; }
.delighter.leftA.started { transform:none; opacity:1; }

.delighter.bottom { transform:translatey(50px); opacity:0; transition: all .75s ease-out; }
.delighter.bottom.started { transform:none; opacity:1; }

/*子要素を下から順に表示　.turn*/
.turn > div { opacity: 0; transform: translatey(50%); transition: all .7s ease-out; }
.turn.delighter.started div { opacity: 1; transform: none; }
.turn.delighter.started div:nth-child(1) { transition: all .7s ease-out .1s; }
.turn.delighter.started div:nth-child(2) { transition: all .7s ease-out .3s; }
.turn.delighter.started div:nth-child(3) { transition: all .7s ease-out .5s; }
.turn.delighter.started div:nth-child(4) { transition: all .7s ease-out .7s; }
.turn.delighter.started div:nth-child(5) { transition: all .7s ease-out .9s; }
.turn.delighter.started li:nth-child(6) { transition: all .7s ease-out 1.1s; }
.turn.delighter.started li:nth-child(7) { transition: all .7s ease-out 1.3s; }

.delighter pre {
  display: block; transition: all 2s ease-out; opacity: 0;
  padding: 20px 0;
  width: 1px; overflow: hidden;
}
.delighter.started pre {
  max-width: 99999px; width: 100%; opacity: 1;
}
.delighter .box { transition: all 1s ease-out; }
.delighter .box:nth-child(1) { transform: translate(-100%, 0); }
.delighter .box:nth-child(2) { transform: translate(170%, -70%); }
.delighter .box:nth-child(3) { transform: translate(20%, 0%); }

.delighter.started .box:nth-child(1) { transform: translate(0, 0); }
.delighter.started .box:nth-child(2) { transform: translate(70%, -70%); }
.delighter.started .box:nth-child(3) { transform: translate(20%, -120%); }


/********************************

アニメ用
********************************/
/* 基本のスタイル */
   .test.delighter {
      transition: all .3s ease-out;
      transform: translateX(-100%);
      opacity: 0;
   }

/* スタート時のスタイル */
   .test.delighter.started {
      transform: none;
      opacity: 1;
   }

/* エンド時のスタイル */
   .test.delighter.started.ended {
      border: solid red 10px;
   }
/*********************************
英語用
**********************************/
.enTop{
  overflow: hidden;
  }
.elasticity.delighter .enTopH2{
  opacity: 0;
  transition: .9s;
  }

.elasticity.delighter.started .enTopH2{
  opacity: 1;
  }


.elasticity.delighter {
  position: relative;
  display: inline-block;

      transition: .9s;
      opacity: 0.1;
      /* background-color: aqua; */
      padding: 1em;
      box-sizing: border-box;
      transform: translateX(-20px);
      /* color: #fff; */

}

.elasticity.delighter.started {
      visibility: visible;
      opacity: 1;
      /* background-color: pink; */
      transform: translateX(0px);
  }

.elasticity.delighter.started::after {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;

      content: '';

      display: block;
      width: 100%;
      height: 100%;
      background: #2C2C2C;
      transform: scaleX(0);
      animation: labelIn 0.3s 0s ease, labelOut 0.3s 0.3s ease;
      animation-fill-mode: forwards;
  }

/*******************************
ScrollOut
*******************************/

[data-scroll] {
  transition: opacity 1s;
}
[data-scroll="in"] {
  opacity: 1;
}
[data-scroll="out"] {
  opacity: 0;
}