@charset "utf-8";

/*-------------------------------------
  TOP
--------------------------------------*/

/* KEY */
@keyframes scale {
  0% {
    transform: scale(1.15);
  }
  100%{
    transform: scale(1);
  }
}
.sec_topkey .slider_key .slick-slide.slick-active .ofi_wrap > img {
  animation: scale 6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}


/* KEY TEXT */
.animate_js.sec_topkey .text_key > .title > span {
  position: relative;
  transform: scaleX(0);
  transform-origin: left center;
  backface-visibility: hidden;
  transition: transform .6s .3s;
}
.animate_js.sec_topkey .text_key > .title > span:last-child {
  transition-delay: .5s;
}
.animate_js.sec_topkey .text_key > .title > span::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #f69701;
  transition: width .6s 1.2s;
}
.animate_js.sec_topkey .text_key > .title > span:last-child::before {
  transition-delay: 1.4s;
}

.scrolled.sec_topkey .text_key > .title > span {
  transform: scaleX(1);
}
.scrolled.sec_topkey .text_key > .title > span::before {
  width: 0%;
}

@keyframes title-after {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  60% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  100%{
    transform: scaleX(0);
    transform-origin: right center;
  }
}
.animate_js.sec_topkey .text_key > .title::after {
  content: '';
  display: block;
  position: absolute;
  top: -1.1em;
  left: -2.5em;
  width: 6.25em;
  height: 1em;
  background-color: #1e1109;
  transform: scaleX(0);
  backface-visibility: hidden;
}
.scrolled.sec_topkey .text_key > .title::after {
  animation: title-after 1.2s 1.8s;
}

@keyframes title-before {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    transform: rotate(0);
  }
  100%{
    opacity: 1;
    transform: rotate(-10deg);
  }
}
.animate_js.sec_topkey .text_key > .title::before {
  opacity: 0;
  transform: rotate(0);
}
.scrolled.sec_topkey .text_key > .title::before {
  animation: title-before 1.2s 2.4s both;
}

.animate_js.sec_topkey .text_key > .txt_box,
.animate_js.sec_topkey .text_key > .txt_box > p {
  opacity: 0;
  transition: opacity .4s 3.6s;
}
.animate_js.sec_topkey .text_key > .txt_box > p {
  transition-delay: 4s;
}
.scrolled.sec_topkey .text_key > .txt_box,
.scrolled.sec_topkey .text_key > .txt_box > p {
  opacity: 1;
}

.animate_js.sec_topkey .text_key > .title > span:first-child::after,
.animate_js.sec_topkey .text_key > .title > span:last-child::after {
  opacity: 0;
  transform: translateY(1em) scale(.6);
  transition: opacity.4s 4.6s, transform .4s 4.6s;
  backface-visibility: hidden;
}
.animate_js.sec_topkey .text_key > .title > span:last-child::after {
  transition-delay: 4.8s;
}
.scrolled.sec_topkey .text_key > .title > span:first-child::after,
.scrolled.sec_topkey .text_key > .title > span:last-child::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}



/* NEWS */
.animate_js.sec_news .fx_topnews {
  opacity: 0;
  transition: opacity .6s .4s;
}

.scrolled.sec_news .fx_topnews {
  opacity: 1;
}



/* CONCEPT */
.sec_concept.animate_js {
  overflow: hidden;
}
.animate_js.sec_concept::before {
  opacity: 0;
  transform: translate(6em, 0);
  transition: .8s .4s;
}
.animate_js.sec_concept::after {
  opacity: 0;
  transform: translate(-6em, 0);
  transition: .8s 1s;
}
.animate_js.sec_concept > .bdt_box {
  opacity: 0;
  transform: translate(0, 6em);
  transition: .8s 1.6s;
}

.scrolled.sec_concept::before,
.scrolled.sec_concept::after,
.scrolled.sec_concept > .bdt_box {
  opacity: 1;
  transform: translate(0, 0);
}



/* WORKS */
.animate_js.sec_works .ttl_initial {
  opacity: 0;
  transition: .6s .4s;
}
.animate_js.sec_works::before {
  opacity: 0;
  transition: .6s 1s;
}
.animate_js.sec_works .fx_works > .item {
  opacity: 0;
  transform: translate(0, 6em);
  transition: .6s 1.6s;
}
.animate_js.sec_works .fx_works > .item > a .ofi_wrap::before {
  content: '';
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #1e1109;
  transform-origin: right top;
  transition: .6s 2s;
}
.animate_js.sec_works .fx_works > .item:nth-child(2) {
  transition: .6s 2s;
}
.animate_js.sec_works .fx_works > .item:nth-child(2) > a .ofi_wrap::before {
  transition: .6s 2.4s;
}
.animate_js.sec_works .fx_works > .item:nth-child(3) {
  transition: .6s 2.4s;
}
.animate_js.sec_works .fx_works > .item:nth-child(3) > a .ofi_wrap::before {
  transition: .6s 2.8s;
}
.animate_js.sec_works .fx_works > .item:nth-child(4) {
  transition: .6s 2.8s;
}
.animate_js.sec_works .fx_works > .item:nth-child(4) > a .ofi_wrap::before {
  transition: .6s 3.2s;
}
.animate_js.sec_works::after {
  opacity: 0;
  transition: .6s 3.4s;
}
.animate_js.sec_works .btn_wrap {
  opacity: 0;
  transition: .6s 3.8s;
}

.scrolled.sec_works .ttl_initial,
.scrolled.sec_works::before {
  opacity: 1;
}
.scrolled.sec_works .fx_works > .item {
  opacity: 1;
  transform: translate(0, 0);
}
.scrolled.sec_works .fx_works > .item > a .ofi_wrap::before {
  transform: scaleX(0);
}
.scrolled.sec_works::after,
.scrolled.sec_works .btn_wrap {
  opacity: 1;
}



/* underlink */
.animate_js.sec_underlink .fx_underlink > .item {
  opacity: 0;
  transform: translate(0, 6em);
  transition: .6s .4s;
}
.animate_js.sec_underlink .fx_underlink > .item > a .ofi_wrap::before {
  content: '';
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #1e1109;
  transform-origin: right top;
  transition: .6s .8s;
}
.animate_js.sec_underlink .fx_underlink > .item:nth-child(2) {
  transition: .6s .8s;
}
.animate_js.sec_underlink .fx_underlink > .item:nth-child(2) > a .ofi_wrap::before {
  transition: .6s 1.2s;
}
.animate_js.sec_underlink .fx_underlink > .item:nth-child(3) {
  transition: .6s 1.2s;
}
.animate_js.sec_underlink .fx_underlink > .item:nth-child(3) > a .ofi_wrap::before {
  transition: .6s 1.6s;
}

.scrolled.sec_underlink .fx_underlink > .item {
  opacity: 1;
  transform: translate(0, 0);
}
.scrolled.sec_underlink .fx_underlink > .item > a .ofi_wrap::before {
  transform: scaleX(0);
}



/* BLOG */
.animate_js.sec_blog {
  overflow: hidden;
}
.animate_js.sec_blog .box_house {
  opacity: 0;
  transition: .8s .4s;
}
.animate_js.sec_blog .ttl_initial {
  opacity: 0;
  transition: .6s 1s;
}
.animate_js.sec_blog .fx_blog > .item {
  opacity: 0;
  transform: translate(-6em, 0);
  transition: .6s 1.4s;
}
.animate_js.sec_blog .fx_blog > .item:nth-child(even) {
  transform: translate(6em, 0);
}
.animate_js.sec_blog .fx_blog > .item > a .ofi_wrap::before {
  content: '';
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #1e1109;
  transform-origin: left top;
  transition: .6s 1.8s;
}
.animate_js.sec_blog .fx_blog > .item:nth-child(even) > a .ofi_wrap::before {
  transform-origin: right top;
}
.animate_js.sec_blog .fx_blog > .item:nth-child(3),
.animate_js.sec_blog .fx_blog > .item:nth-child(4) {
  transition: .6s 2.2s;
}
.animate_js.sec_blog .fx_blog > .item:nth-child(3) > a .ofi_wrap::before,
.animate_js.sec_blog .fx_blog > .item:nth-child(4) > a .ofi_wrap::before {
  transition: .6s 2.6s;
}
.animate_js.sec_blog .btn_wrap {
  opacity: 0;
  transition: .6s 3s;
}

.scrolled.sec_blog .box_house {
  opacity: 1;
}
.scrolled.sec_blog .ttl_initial {
  opacity: 1;
}
.scrolled.sec_blog .fx_blog > .item,
.scrolled.sec_blog .fx_blog > .item:nth-child(even) {
  opacity: 1;
  transform: translate(0, 0);
}
.scrolled.sec_blog .fx_blog > .item > a .ofi_wrap::before {
  transform: scaleX(0);
}
.scrolled.sec_blog .btn_wrap {
  opacity: 1;
}



/* company */
.animate_js.sec_company {
  overflow: hidden;
}
.animate_js.sec_company .fx_company > .conts {
  opacity: 0;
  transform: translate(-6em, 0);
  transition: .8s .4s;
}
.animate_js.sec_company .fx_company > .imgbox > .ofi_wrap {
  opacity: 0;
  transform: translate(0, -6em);
  transition: .8s 1s;
}
.animate_js.sec_company .fx_company > .imgbox::before {
  opacity: 0;
  transform: translate(6em, 0);
  transition: .8s 1s;
}

.scrolled.sec_company .fx_company > .conts,
.scrolled.sec_company .fx_company > .imgbox > .ofi_wrap,
.scrolled.sec_company .fx_company > .imgbox::before {
  opacity: 1;
  transform: translate(0, 0);
}



/* foot contact */
.animate_js.sec_footcontact::before,
.animate_js.sec_footcontact .wh_box,
.animate_js.sec_footcontact .ttl_initial,
.animate_js.sec_footcontact .box_contactway {
  opacity: 0;
  transition: .6s .4s;
}
.animate_js.sec_footcontact .wh_box {
  transform: translate(0, 6em);
  transition-delay: 1s;
}
.animate_js.sec_footcontact .ttl_initial {
  transition-delay: 1.6s;
}
.animate_js.sec_footcontact .box_contactway {
  transition-delay: 2s;
}

.scrolled.sec_footcontact::before,
.scrolled.sec_footcontact .wh_box,
.scrolled.sec_footcontact .ttl_initial,
.scrolled.sec_footcontact .box_contactway {
  opacity: 1;
}
.scrolled.sec_footcontact .wh_box {
  transform: translate(0, 0);
}