/* テキストスタイリッシュ表示 */
/* 左から右 */
.active .txet_from_left,
.active .txet_from_top,
.active .txet_from_right {
  position: relative;
  display: inline-block;
  -webkit-animation: txet_from 2.8s linear forwards;
  animation: txet_from 2.8s linear forwards;
}

@keyframes txet_from {
  0% {
    visibility: hidden;
  }

  60% {
    visibility: hidden;
    ;
  }

  70% {
    visibility: visible;
  }

  100% {
    visibility: visible;
  }
}

.active .txet_from_left:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  right: 100%;
  background: #0b0a09;
  animation: from_left 2.5s forwards cubic-bezier(.4, .01, 0, .99);
  z-index: 100;
  visibility: visible;
}

@keyframes from_left {
  0% {
    left: 0;
    right: 100%;
  }

  60% {
    left: 0;
    right: 100%;
  }

  70% {
    left: 0;
    right: 0;
  }

  90% {
    left: 0;
    right: 0;
  }

  100% {
    left: 100%;
    right: 0;
  }
}

/* 上から下 */
.active .txet_from_top:after {
  content: '';
  display: block;
  position: absolute;
  top: -100%;
  bottom: 100%;
  left: 0;
  right: 0;
  background: #0b0a09;
  animation: from_bottom 2.5s forwards cubic-bezier(.4, .01, 0, .99);
  z-index: 100;
  visibility: visible;
}

@keyframes from_bottom {
  0% {
    top: 0;
    bottom: 100%;
  }

  60% {
    top: 0;
    bottom: 100%;
  }

  70% {
    top: 0;
    bottom: 0;
  }

  90% {
    top: 0;
    bottom: 0;
  }

  100% {
    top: 100%;
    bottom: 0;
  }
}

/* 右から左 */
.active .txet_from_right:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  right: -100%;
  background: #0b0a09;
  animation: from_right 2.5s forwards cubic-bezier(.4, .01, 0, .99);
  z-index: 100;
  visibility: visible;
}

@keyframes from_right {
  0% {
    left: 100%;
    right: 0;
  }

  60% {
    left: 100%;
    right: 0;
  }

  70% {
    left: 0;
    right: 0;
  }

  90% {
    left: 0;
    right: 0;
  }

  100% {
    left: 0;
    right: 100%;
  }
}

/* 未来へ */
#message_area .inner .txt_box>div.active>.txt2 span,
#message_area .inner .txt_box>div.active>.txt2 span:after {
  animation-delay: 0.2s;
}

/* DaiQへ */
#message_area .inner .txt_box>div.active>.txt3 span,
#message_area .inner .txt_box>div.active>.txt3 span:after {
  animation-delay: 0.4s;
}

/* 年の */
#history_area .inner.ttl .txt_box.active>p.txt3 span,
#history_area .inner.ttl .txt_box.active>p.txt3 span:after {
  animation-delay: 0.2s;
}

/* 歴史 */
#history_area .inner.ttl .txt_box.active>p.txt4 span,
#history_area .inner.ttl .txt_box.active>p.txt4 span:after {
  animation-delay: 0.4s;
}

/* 大久自動車販売 */
#history_area .inner.ttl .txt_box.active>p.txt2 span,
#history_area .inner.ttl .txt_box.active>p.txt2 span:after {
  animation-delay: 0.6s;
}

/* #history_area .last */
#history_area .inner.enkaku .last {
  transition: all .8s;
  outline: none;
}

#history_area .inner.enkaku .last.active {
  position: relative;
  -webkit-animation: last_ani 2s linear forwards;
  animation: last_ani 2s linear forwards;
  transition: all 1s;
}

@keyframes last_ani {
  0% {
    filter: none;
  }

  60% {}

  70% {
    background-color: #ffffff;
  }

  100% {
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.6));
    background-color: #ffffff;
  }
}

#history_area .inner.enkaku .last::before,
#history_area .inner.enkaku .last::after {
  content: '';
  position: absolute;
  z-index: 2;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  box-sizing: content-box;
  border-radius: 15px;
}

#history_area .inner.enkaku .last::before {
  top: -5px;
  left: -5px;
}

#history_area .inner.enkaku .last::after {
  bottom: -5px;
  right: -5px;
}

#history_area .inner.enkaku .last.active {}

#history_area .inner.enkaku .last.active::before,
#history_area .inner.enkaku .last.active::after {
  width: 100%;
  height: 100%;
}

#history_area .inner.enkaku .last.active::before {
  border-bottom-color: #ffffff;
  border-left-color: #ffffff;
  transition: height .5s, width .5s .5s;
}

#history_area .inner.enkaku .last.active::after {
  border-top-color: #ffffff;
  border-right-color: #ffffff;
  transition: height .5s, width .5s .5s;
}


#history_area .inner.enkaku .last.active figure.slide-in,
#history_area .inner.enkaku .last.active p.slide-in {
  -webkit-animation: slide-in 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1s;
  animation: slide-in 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1s;
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes slide-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* message_areaの長文 */
.slide-in-bottom.active {
  -webkit-animation: slide-in-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-in-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}



/* circle 項目 */
#carlife_area .inner .circle_wrap.active .circle ul li {
  -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

#carlife_area .inner .circle_wrap.active .circle ul li.hanbai {}

#carlife_area .inner .circle_wrap.active .circle ul li.seibi {
  animation-delay: 0s;
}

#carlife_area .inner .circle_wrap.active .circle ul li.syaken {
  animation-delay: 0.2s;
}

#carlife_area .inner .circle_wrap.active .circle ul li.bankin {
  animation-delay: 0.4s;
}

#carlife_area .inner .circle_wrap.active .circle ul li.kaitori {
  animation-delay: 0.6s;
}

#carlife_area .inner .circle_wrap.active .circle ul li.carcare {
  animation-delay: 0.8s;
}

#carlife_area .inner .circle_wrap.active .circle ul li.coating {
  animation-delay: 1.0s;
}

#carlife_area .inner .circle_wrap.active .circle ul li.support {
  animation-delay: 1.2s;
}

#carlife_area .inner .circle_wrap.active .circle ul li.lord_service {
  animation-delay: 1.4s;
}

#carlife_area .inner .circle_wrap.active .circle ul li.hoken {
  animation-delay: 1.5s;
}

@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}


/* 共通　上からふわっと表示 */
.slide-top {
  opacity: 0;
}

.slide-top.active {
  -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(-30%);
    transform: translateY(-30%);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-top {
  0% {
    -webkit-transform: translateY(-30%);
    transform: translateY(-30%);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}