@charset "utf-8";
.box {
  width: 100%;
  margin: 0 0 2% 0;
  overflow: hidden;
}

.box .boxInner {
  width: inherit;
  height: inherit;
  line-height: 200px;
  font-size: 1.5em;
  text-align: center;
  background-color: #fff;
  opacity: 0;
}

/*「boxInner」をスライドインする*/
@keyframes play {
  from {
    transform: translateX(100%);
  }
  
  to {
    transform: translateX(0);
  }
}

/*マスク要素をスライドアウトする*/
@keyframes maskOut {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(-100%);
  }
}
/*「boxInner_02」をスライドインする*/
@keyframes play_02 {
  from {
    transform: translateX(-100%);
  }
  
  to {
    transform: translateX(0);
  }
}

/*//マスク要素をスライドアウトする*/
@keyframes maskOut_02 {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(100%);
  }
}

/*//スライドインを動作するclass*/
.isPlay {
  animation-name: play;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}

/*//isPlayの疑似要素にマスクとマスクを外すアニメーションを設定 */
.isPlay:before {
  animation-name: maskOut;
  animation-duration: .5s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #dc3545;
}
.isPlay_02 {
  animation-name: play_02;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}

/*//isPlayの疑似要素にマスクとマスクを外すアニメーションを設定 */
.isPlay_02:before {
  animation-name: maskOut_02;
  animation-duration: .5s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #17a2b8;
  /*background-color: #ffc107;*/
}
.isPlay_03 {
  animation-name: play;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}

/*//isPlayの疑似要素にマスクとマスクを外すアニメーションを設定 */
.isPlay_03:before {
  animation-name: maskOut;
  animation-duration: .5s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #ffc107;
/*background-color: #28a745;*/
}
.isPlay_04 {
  animation-name: play_02;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}

/*//isPlayの疑似要素にマスクとマスクを外すアニメーションを設定 */
.isPlay_04:before {
  animation-name: maskOut_02;
  animation-duration: .5s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #28a745;
}




/* fadein 
.fadein {
  opacity: 1;
  animation-name: fadeout;
  animation-duration: 8s;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}*/
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*ボックススライドイン*/
.img-container{
    overflow: hidden;
    position: relative;
    transition:all .5s .3s ease; 
}
 
.img-container__img{
    display: block;
    opacity: 0;
    position: relative;
    transition:all .5s .3s ease; 
}
 
.img-container:before{
    background: #28a745;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transform: translateX(-110%);
    transition:all .8s 0s ease; 
    width: 100%;
}
 
.text-container{
    opacity: 0;
    transition: all .8s .5s ease;
}
 
/*アニメーションするプロパティ*/
.img-container.active img{
    opacity: 1;
}
 
.img-container.active .photograph_svg {
    opacity: 1;
}
.img-container.active:before{
    transform: translateX(100%);
}
 
.text-container.active{
    opacity: 1;
}