@charset "UTF-8";
.bg__img__scale {
  webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  opacity: 1;
  -webkit-transform-origin: center;
  transform-origin: center;
  opacity: 0;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.scale__down {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

/* アニメーション */
@keyframes sliding_bg_horizon {
  0% {
    left: 0;
    width: 0;
  }
  50% {
    left: 0;
    width: 100%;
  }
  51% {
    left: 0;
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}

@keyframes passing-txt {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.ttl_effect_left_rect span {
  position: relative;
  display: inline-block;
}

.ttl_effect_left_rect span {
  opacity: 0;
}

.ttl_effect_left_rect span:before {
  content: '';
  display: inline-block;
  width: 0%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.8);
}

.slideIn span {
  animation: passing-txt ease 0.95s forwards;
}

.slideIn span:before {
  -webkit-animation: sliding_bg_horizon 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation: sliding_bg_horizon 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.txt_effect_left_rect {
  position: relative;
  font-size: 164%;
  letter-spacing: 0.2rem;
  overflow: hidden;
}

.txt_effect_left_rect:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 130%;
  animation-name: sizeScale;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

.txt_effect_left_rect_delay {
  position: relative;
  font-size: 164%;
  letter-spacing: 0.2rem;
  overflow: hidden;
}

.txt_effect_left_rect_delay:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 130%;
  transition-delay: 2.5s;
  animation-name: sizeScale;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  -webkit-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

@keyframes sizeScale {
  0% {
    opacity: 100;
  }
  100% {
    left: 200%;
  }
}

.txt_effect_from_bottom {
  transform-style: preserve-3d;
  overflow: hidden;
}

.txt_effect_from_bottom .txt {
  transform: translate3d(0, 100%, 0);
  transition: 0.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.3s;
}

.txt_effect_from_bottom__active .txt {
  transform: translate3d(0, 0, 0);
}

.img_anim_rect {
  margin-bottom: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  position: relative;
}

.img_anim_rect:before {
  will-change: auto;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  z-index: 1;
  background-color: #f3f4f5;
  -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}

.img_anim_rect:after {
  will-change: auto;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  background-color: #fff;
  z-index: 2;
  -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

.img_anim_rect__active:before {
  right: 100%;
}

.img_anim_rect__active:after {
  right: 100%;
}

.img_anim_rect_to_right {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  -webkit-transform: translate3d(0, 0, 0px);
  transform: translate3d(0, 0, 0px);
}

.img_anim_rect_to_right:before {
  will-change: auto;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: #f3f4f5;
  -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}

.img_anim_rect_to_right:after {
  will-change: auto;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #fff;
  z-index: 2;
  -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

.img_anim_rect_to_right__active:before {
  left: 100%;
}

.img_anim_rect_to_right__active:after {
  left: 100%;
}

.load__img_anim_rect_to_right {
  width: 100%;
  margin-bottom: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0px);
  transform: translate3d(0, 0, 0px);
}

.load__img_anim_rect_to_right:before {
  will-change: auto;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: #f3f4f5;
  -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}

.load__img_anim_rect_to_right:after {
  will-change: auto;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #fff;
  z-index: 2;
  -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

.load__img_anim_rect_to_right__active:before {
  left: 100%;
}

.load__img_anim_rect_to_right__active:after {
  left: 100%;
}

.fade-in {
  will-change: auto;
  animation-fill-mode: forwards;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.545, 0.08, 0.52, 0.975);
  opacity: 0;
}

.fade-in-active {
  opacity: 1;
}

.anim-fade-y {
  will-change: auto;
  animation-fill-mode: forwards;
  webkit-transform: translateY(60px);
  transform: translateY(60px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.545, 0.08, 0.52, 0.975);
  position: relative;
  transition-delay: 1s;
  z-index: 1;
}

.anim-fade-y-active {
  webkit-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
}

.anim-fade-x-from-left {
  will-change: auto;
  animation-fill-mode: forwards;
  webkit-transform: translateX(-60px);
  transform: translateX(-60px);
  opacity: 0;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
  position: relative;
  z-index: 1;
}

.anim-fade-x-from-left-group {
  will-change: auto;
  animation-fill-mode: forwards;
  webkit-transform: translateX(-60px);
  transform: translateX(-60px);
  opacity: 0;
  -webkit-transition: all .5s linear;
  transition: all .5s linear;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  position: relative;
  z-index: -1;
}

.anim-fade-x-from-left-1 {
  animation-delay: 0.04s;
  transition-duration: 0.2s;
}

.anim-fade-x-from-left-2 {
  animation-delay: 0.08s;
  transition-duration: 0.4s;
}

.anim-fade-x-from-left-3 {
  animation-delay: 0.12s;
  transition-duration: 0.6s;
}

.anim-fade-x-from-left-4 {
  animation-delay: 0.16s;
  transition-duration: 0.8s;
}

.anim-fade-x-from-left-5 {
  animation-delay: 0.2s;
  transition-duration: 1s;
}

.anim-fade-x-from-left-6 {
  animation-delay: 0.24s;
  transition-duration: 1.2s;
}

.anim-fade-x-from-left-7 {
  animation-delay: 0.28s;
  transition-duration: 1.4s;
}

.anim-fade-x-from-left-8 {
  animation-delay: 0.32s;
  transition-duration: 1.6s;
}

.anim-fade-x-from-left-9 {
  animation-delay: 0.36s;
  transition-duration: 1.8s;
}

.anim-fade-x-from-left-active {
  webkit-transform: translateX(0px);
  transform: translateX(0px);
  opacity: 1;
}

.multipule {
  width: 100%;
  padding: 50px;
}

.anim-fade-x-from-left-main {
  will-change: auto;
  animation-fill-mode: forwards;
  webkit-transform: translateX(-60px);
  transform: translateX(-60px);
  opacity: 0;
  -webkit-transition: all .5s linear;
  transition: all .5s linear;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  position: relative;
  z-index: 1;
}

.anim-fade-x-from-left-main-active {
  webkit-transform: translateX(0px);
  transform: translateX(0px);
  opacity: 1;
}