@charset "utf-8";

/*--- 標準のスライド設定 ---*/
.box {width: 400px;height: 450px;margin: 0 0 2% 0;overflow: hidden;float: right;}
.box-slide {width: 100%;height: auto;margin: 0 0 2% 0;overflow: hidden;}
.box .boxInner {width: inherit;height: inherit;font-size: 1.5em;text-align: center;color: #555;opacity: 0;}
.box-slide .boxInner {width: inherit;height: inherit;font-size: 1.5em;text-align: center;color: #555;opacity: 0;}

.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: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: #ceb345;z-index: 2;}

@keyframes play {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes maskOut {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(101%);
  }
}


/*--- メイン画像のスライド設定 ---*/
.isPlay-top {animation-name: play-top; animation-duration: .5s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative; opacity: 1 !important;}
.isPlay-top:before {animation-name: maskOut-top; 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: #ceb345;}
@keyframes play-top {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes maskOut-top {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

@media screen and (max-width:600px){
#lead .box {height: 350px;}

}