@charset "utf-8";
/* CSS Document */

/* ▼▼▼メインのみ▼▼▼ */
/* 動く背景 (mask_fadeIn) の定義 */
@keyframes mask_fadeIn {
  0% {
    transform: scaleX(0);
    transform-origin: 0 0;
  }
  45% {
    transform: none;
    transform-origin: 0 0;
  }
  50% {
    transform: none;
    transform-origin: 100% 0;
  }
  100% {
    transform: scaleX(0);
    transform-origin: 100% 0;
  }
}

.is-fadeIn {
  position: relative;
  overflow: hidden;
}

.is-fadeIn:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  transform: scaleX(0);
  animation: mask_fadeIn 1.0s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

.BgRed {
	position: relative;
  overflow: hidden;
}

.BgRed:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #d0382b;
  transform: scaleX(0);
  animation: mask_fadeIn 1.0s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

.BgBlue {
	position: relative;
  overflow: hidden;
}

.BgBlue:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #005daa;
  transform: scaleX(0);
  animation: mask_fadeIn 1.0s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

/* ▼▼▼メイン以外▼▼▼ */

/*BLACK*/
.motion-txt-blk {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding:10px;
}
.motion-txt-blk:after {
  content: '';
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #000;
  transform: translate3d(-101%, 0, 0);
}
.js-scroll.show .motion-txt-blk:after {
  transition-property: transform, opacity;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(0, 0, 0);
}
.js-scroll.done .motion-txt-blk:after {
  transition-property: transform;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(103%, 0, 0);
}
.motion-txt-blk .motion-inner {
  display: inline-block;
  opacity: 0;
	width: 100%
}
.js-scroll.done .motion-txt-blk .motion-inner {
  opacity: 1;
}

/*BROWN*/
.motion-txt-brw {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding:10px;
}
.motion-txt-brw:after {
  content: '';
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #601113;
  transform: translate3d(-101%, 0, 0);
}
.js-scroll.show .motion-txt-brw:after {
  transition-property: transform, opacity;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(0, 0, 0);
}
.js-scroll.done .motion-txt-brw:after {
  transition-property: transform;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(103%, 0, 0);
}
.motion-txt-brw .motion-inner {
  display: inline-block;
  opacity: 0;
}
.js-scroll.done .motion-txt-brw .motion-inner {
  opacity: 1;
}

/*RED*/
.motion-txt-red {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding:10px;
}
.motion-txt-red:after {
  content: '';
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #d0382b;
  transform: translate3d(-101%, 0, 0);
}
.js-scroll.show .motion-txt-red:after {
  transition-property: transform, opacity;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(0, 0, 0);
}
.js-scroll.done .motion-txt-red:after {
  transition-property: transform;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(103%, 0, 0);
}
.motion-txt-red .motion-inner {
  opacity: 0;
}
.js-scroll.done .motion-txt-red .motion-inner {
  opacity: 1;
}

/*BLUE*/
.motion-txt-blu {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.motion-txt-blu:after {
  content: '';
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #f2f2f2;
  transform: translate3d(-101%, 0, 0);
}
.js-scroll.show .motion-txt-blu:after {
  transition-property: transform, opacity;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(0, 0, 0);
}
.js-scroll.done .motion-txt-blu:after {
  transition-property: transform;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(103%, 0, 0);
}
.motion-txt-blu .motion-inner {
  display: inline-block;
  opacity: 0;
}
.js-scroll.done .motion-txt-blu .motion-inner {
  opacity: 1;
}