body {
  background: none;
  overflow: hidden;
}
body.load {
  overflow-y: auto;
  overflow-x: hidden;
}

#loading {
  width: 100vw;
  height: 100vh;
  background-color: #ededed;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}
#loading.load {
  animation: fadeout .5s ease 0s forwards;
}
#loading .sk-cube-grid {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#loading .sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #fff;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
#loading .sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
#loading .sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
#loading .sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
#loading .sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
#loading .sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
#loading .sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
#loading .sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
#loading .sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
#loading .sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
header {
  opacity: 0;
}
header.animeon {
  animation: anim_caption .5s ease 0s forwards;
  animation-delay: .5s;
}

.index_ttl .ttl_svganime {
  height: 5.9vw;
}
@media screen and (max-width: 812px) {
  .index_ttl .ttl_svganime {
    height: 15.5vw;
  }
}
.index_ttl .ttl_svganime .line {
  height: 1.4vw;
  bottom: .95vw;
}
@media screen and (max-width: 812px) {
  .index_ttl .ttl_svganime .line {
    height: 3.7vw;
    bottom: 2.8vw;
  }
}
.index_ttl text {
  font-size: 4.2vw;
}
@media screen and (max-width: 812px) {
  .index_ttl text {
    font-size: 10.6vw;
  }
}
.index_ttl .caption {
  font-size: 1.6rem;
}
@media screen and (max-width: 812px) {
  .index_ttl .caption {
    font-size: 3.2vw;
  }
}

.mv {
  position: relative;
}
.mv .imgbox .img {
  width: auto;
  height: 100vh;
  text-align: right;
  position: relative;
}
@media screen and (max-width: 812px) {
  .mv .imgbox .img {
    width: 61.3vw;
    height: auto;
    margin-left: auto;
  }
}
.mv .imgbox .img .box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 0;
}
.mv .imgbox .img .box.active {
  animation: img_box 1s ease 0s forwards;
}
.mv .imgbox .img img {
  width: auto;
  height: 100%;
}
@media screen and (max-width: 812px) {
  .mv .imgbox .img img {
    width: 100%;
    height: auto;
  }
}
.mv .imgbox .scroll {
  position: absolute;
  bottom: 0;
  right: 44px;
}
@media screen and (max-width: 812px) {
  .mv .imgbox .scroll {
    right: 0;
  }
}
.mv .imgbox .scroll p {
  font-size: 1.3rem;
  font-style: italic;
  text-align: end;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  color: #111;
}
.mv .imgbox .scroll .arrow {
  width: 1px;
  height: 46px;
  margin: 24px auto 0;
  background-color: #111;
  position: relative;
  overflow: hidden;
}
.mv .imgbox .scroll .arrow::before {
  content: '';
  width: 1px;
  height: 46px;
  margin: 60px auto 0;
  background-color: #fff;
  position: absolute;
  top: -106px;
  left: 0;
  -webkit-animation: arrowanime 2.5s ease 0s infinite normal;
  animation: arrowanime 2.5s ease 0s infinite normal;
}
@media screen and (max-width: 812px) {
  .mv .imgbox .scroll .arrow::before {
    width: 2px;
  }
}
.mv .txtbox .ttl {
  position: absolute;
  top: 50%;
  left: 60px;
  transform: translateY(-50%);
}
@media screen and (max-width: 812px) {
  .mv .txtbox .ttl {
    left: 4vw;
    margin-top: 15vw;
  }
}
.mv .txtbox .ttl .ttl_svganime .line {
  height: 2.08vw;
  bottom: 1.7vw;
}
@media screen and (max-width: 812px) {
  .mv .txtbox .ttl .ttl_svganime .line {
    height: 4.8vw;
    bottom: 3.3vw;
  }
}
.mv .txtbox .ttl .ttl_svganime svg {
  height: 10.7vw;
}
@media screen and (max-width: 812px) {
  .mv .txtbox .ttl .ttl_svganime svg {
    height: 18.7vw;
  }
}
.mv .txtbox .ttl .ttl_svganime.box01 {
  width: 56.6vw;
}
@media screen and (max-width: 812px) {
  .mv .txtbox .ttl .ttl_svganime.box01 {
    width: 92.6vw;
  }
}
.mv .txtbox .ttl .ttl_svganime.box02 {
  width: 35.6vw;
}
@media screen and (max-width: 812px) {
  .mv .txtbox .ttl .ttl_svganime.box02 {
    width: 58.6vw;
  }
}
.mv .txtbox .ttl .ttl_svganime text {
  font-size: 7.8vw;
}
@media screen and (max-width: 812px) {
  .mv .txtbox .ttl .ttl_svganime text {
    font-size: 13.3vw;
  }
}
.mv .txtbox .ttl .caption {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: .5em;
  margin-top: 3vw;
}
@media screen and (max-width: 812px) {
  .mv .txtbox .ttl .caption {
    font-size: 2.6vw;
    line-height: 2;
    margin-top: 9.3vw;
  }
}
.mv .txtbox .ttl .caption span {
  opacity: 0;
}
.mv .txtbox .ttl .caption.active .no1 {
  animation: anim_caption .1s ease 0s forwards;
}
.mv .txtbox .ttl .caption.active .no2 {
  animation: anim_caption .1s ease 0s forwards;
  animation-delay: .1s;
}
.mv .txtbox .ttl .caption.active .no3 {
  animation: anim_caption .1s ease 0s forwards;
  animation-delay: .2s;
}
.mv .txtbox .ttl .caption.active .no4 {
  animation: anim_caption .1s ease 0s forwards;
  animation-delay: .3s;
}
.mv .txtbox .ttl .caption.active .no5 {
  animation: anim_caption .1s ease 0s forwards;
  animation-delay: .4s;
}
.mv .txtbox .ttl .caption.active .no6 {
  animation: anim_caption .1s ease 0s forwards;
  animation-delay: .5s;
}
.mv .txtbox .ttl .caption.active .no7 {
  animation: anim_caption .1s ease 0s forwards;
  animation-delay: .6s;
}
.mv .txtbox .ttl .caption.active .no8 {
  animation: anim_caption .1s ease 0s forwards;
  animation-delay: .7s;
}
.mv .txtbox .ttl .caption.active .no9 {
  animation: anim_caption .1s ease 0s forwards;
  animation-delay: .8s;
}
.mv .txtbox .ttl .caption.active .no10 {
  animation: anim_caption .1s ease 0s forwards;
  animation-delay: .9s;
}
.mv .txtbox .ttl .caption.active .no11 {
  animation: anim_caption .1s ease 0s forwards;
  animation-delay: 1.0s;
}
.mv .txtbox .ttl .caption.active .no12 {
  animation: anim_caption .1s ease 0s forwards;
  animation-delay: 1.1s;
}
.mv .txtbox .ttl .caption.active .no13 {
  animation: anim_caption .1s ease 0s forwards;
  animation-delay: 1.2s;
}
.mv .square {
  position: absolute;
  bottom: 5vw;
  right: 157vh;
  width: 13.5vw;
  height: 1.5vw;
  /*
  ul {
  	display: flex;
  	li {
  		&:nth-child(n+2) {
  			margin-left: 15px;
  			@include mq(sp) {
  				margin-left: 2vw;
  			}
  		}
  		@include mq(sp) {
  			width: 3vw;
  		}
  	}
  }
  */
}
@media screen and (max-width: 812px) {
  .mv .square {
    width: 27vw;
    height: 3vw;
    bottom: 9.6vw;
    right: 129vw;
  }
}
.mv .square img {
  width: 1.5vw;
  position: absolute;
  opacity: 0;
  right: 0;
}
@media screen and (max-width: 812px) {
  .mv .square img {
    width: 3vw;
  }
}
.mv .square img.rect01 {
  margin-right: 7.5vw;
}
@media screen and (max-width: 812px) {
  .mv .square img.rect01 {
    margin-right: 15vw;
  }
}
.mv .square img.rect01.active {
  animation: anim_square 1.2s ease-in-out 0s forwards;
  animation-delay: .4s;
}
.mv .square img.rect02 {
  margin-right: 5vw;
}
@media screen and (max-width: 812px) {
  .mv .square img.rect02 {
    margin-right: 10vw;
  }
}
.mv .square img.rect02.active {
  animation: anim_square 1.2s ease-in-out 0s forwards;
  animation-delay: .3s;
}
.mv .square img.rect03 {
  margin-right: 2.5vw;
}
@media screen and (max-width: 812px) {
  .mv .square img.rect03 {
    margin-right: 5vw;
  }
}
.mv .square img.rect03.active {
  animation: anim_square 1.2s ease-in-out 0s forwards;
  animation-delay: .2s;
}
.mv .square img.rect04.active {
  animation: anim_square 1.2s ease-in-out 0s forwards;
  animation-delay: .1s;
}

@keyframes anim_square {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0);
  }
  100% {
    opacity: 1;
    transform: translate(64vh, 0) rotate(360deg);
  }
}
@media screen and (max-width: 812px) {
  @keyframes anim_square {
    0% {
      opacity: 0;
      transform: translate(0, 0) rotate(0);
    }
    100% {
      opacity: 1;
      transform: translate(64vw, 0) rotate(360deg);
    }
  }
}
@keyframes anim_caption {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes img_box {
  0% {
    width: 100%;
  }
  60% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
@keyframes arrowanime {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  60% {
    -webkit-transform: translate3d(-50%, 106px, 0);
    transform: translate3d(-50%, 106px, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, 106px, 0);
    transform: translate3d(-50%, 106px, 0);
  }
}
.about {
  padding: 190px 0 210px;
  margin-top: -3.5vw;
  position: relative;
}
.about .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/common/bg_content.png) repeat top center;
  z-index: -1;
  opacity: 0;
}
.about .bg.active {
  animation: fadein 1s ease-out 0s forwards;
  animation-delay: 4s;
}
.about .bg:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.07;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,3c3c3c+42,000000+100&0+0,0+42,1+100 */
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(60, 60, 60, 0) 42%, black 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(60, 60, 60, 0) 42%, black 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(60, 60, 60, 0) 42%, black 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
@media screen and (max-width: 812px) {
  .about .bg {
    background: url(../img/common/bg_content_sp.png) repeat top center;
    background-size: 100%;
    opacity: 0;
  }
}
.about .bg.aos-animate {
  background-color: rgba(255, 255, 255, 0);
}
@media screen and (max-width: 812px) {
  .about {
    margin-top: -6.6vw;
    padding: 25.3vw 0 16vw;
  }
}
.about .txt:nth-child(n+2) {
  padding-top: 55px;
}
.about .txt p {
  font-size: 1.4rem;
  text-align: center;
}
@media screen and (max-width: 812px) {
  .about .txt p {
    line-height: 2;
    font-size: 3.2vw;
  }
}
.about .txt p:nth-child(n+2) {
  padding-top: 20px;
}
.about .btn_style {
  margin-top: 70px;
}
@media screen and (max-width: 812px) {
  .about .btn_style {
    margin-top: 10.6vw;
  }
}

.works {
  position: relative;
  margin-top: -5.5vw;
}
.works .index_ttl {
  width: 15.5vw;
  position: absolute;
  left: 57vw;
  top: 2.5vw;
}
@media screen and (max-width: 812px) {
  .works .index_ttl {
    width: 36.5vw;
    left: 4vw;
    top: 64.8vw;
  }
}
.works .index_ttl .caption {
  opacity: 0;
}
.works .index_ttl .caption.active {
  animation: fadeup 1s ease-out 0s forwards;
  animation-delay: 1.5s;
}
.works .index_ttl.eng {
  width: 23vw;
}
@media screen and (max-width: 812px) {
  .works .index_ttl.eng {
    width: 52vw;
  }
}
.works .slider .item {
  display: flex;
  align-items: flex-end;
}
@media screen and (max-width: 812px) {
  .works .slider .item {
    flex-direction: column;
  }
}
.works .slider .item .image {
  width: 52.8vw;
  padding: 4.2vw 0 5.8vw;
  min-height: 40vw;
  position: relative;
}
@media screen and (max-width: 812px) {
  .works .slider .item .image {
    width: 100%;
    padding: 8.3vw 4vw 10.6vw;
    min-height: auto;
  }
}
.works .slider .item .image .bg {
  width: 0;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.works .slider .item .image .bg.active {
  animation: bgright .8s ease-out 0s forwards;
  animation-delay: .5s;
}
.works .slider .item .image .inner {
  position: relative;
}
.works .slider .item .image .inner .innnerbg {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.works .slider .item .image .inner .innnerbg.active {
  animation: bgrightoff .8s ease-out 0s forwards;
}
.works .slider .item .image img {
  width: 100%;
}
.works .slider .item .text_box {
  width: 47.2vw;
  padding: 12.7vw 0 8.7vw 4.2vw;
  min-height: 45vw;
  position: relative;
  /*.slide_arrow {
  	ul {
  		display: flex;
  		align-items: center;
  		margin-top: 50px;
  		@include mq(sp) {
  			margin-top:  5.3vw;
  		}
  		li{
  			cursor: pointer;
  			&:nth-child(n+2) {
  				margin-left: 30px;
  			}
  		}
  	}
  }*/
}
@media screen and (max-width: 812px) {
  .works .slider .item .text_box {
    width: 100%;
    padding: 12vw 4vw 13.3vw;
    min-height: auto;
  }
}
.works .slider .item .text_box .bg {
  width: 0;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.works .slider .item .text_box .bg.active {
  animation: bgright .5s ease-out 0s forwards;
  animation-delay: .5s;
}
.works .slider .item .text_box .inner {
  position: relative;
  opacity: 0;
  width: 41vw;
}
.works .slider .item .text_box .inner.active {
  animation: fadeup .5s ease-out 0s forwards;
  animation-delay: 1.8s;
}
@media screen and (max-width: 812px) {
  .works .slider .item .text_box .inner {
    width: 100%;
  }
}
.works .slider .item .text_box .cat {
  background-color: #111;
  padding: 6px 15px;
  color: #fff;
  font-size: 1.3rem;
  display: inline-block;
}
@media screen and (max-width: 812px) {
  .works .slider .item .text_box .cat {
    font-size: 2.9vw;
    padding: 10px 6.6vw;
  }
}
.works .slider .item .text_box .ttl {
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: 16px;
}
@media screen and (max-width: 812px) {
  .works .slider .item .text_box .ttl {
    font-size: 3.2vw;
    margin-top: 3.2vw;
  }
}
.works .slider .item .text_box .company {
  font-size: 1.4rem;
  padding-top: 20px;
}
@media screen and (max-width: 812px) {
  .works .slider .item .text_box .company {
    font-size: 2.9vw;
    padding-top: 3.2vw;
  }
}
.works .slider .item .text_box .prev {
  position: absolute;
  left: 0;
  top: 140px;
  z-index: 1;
  cursor: pointer;
  width: 77px;
}
.works .slider .item .text_box .prev:hover {
  opacity: 0.6;
}
@media screen and (max-width: 812px) {
  .works .slider .item .text_box .prev {
    top: 26.1vw;
  }
  .works .slider .item .text_box .prev img {
    width: 15vw;
    height: 3vw;
    -webkit-backface-visibility: hidden;
  }
}
.works .slider .item .text_box .next {
  position: absolute;
  top: 140px;
  left: 120px;
  z-index: 1;
  cursor: pointer;
  width: 77px;
}
.works .slider .item .text_box .next:hover {
  opacity: 0.6;
}
@media screen and (max-width: 812px) {
  .works .slider .item .text_box .next {
    top: 26.0vw;
    left: 25vw;
  }
  .works .slider .item .text_box .next img {
    width: 15vw;
    height: 3vw;
    -webkit-backface-visibility: hidden;
  }
}
@media screen and (max-width: 812px) {
  .works .slider .item .text_box img {
    image-rendering: auto;
  }
}
.works .slider .item .text_box .btn_style {
  margin-top: 148px;
  opacity: 0;
}
.works .slider .item .text_box .btn_style.active {
  animation: fadeup .5s ease-out 0s forwards;
  animation-delay: 2s;
}
@media screen and (max-width: 812px) {
  .works .slider .item .text_box .btn_style {
    margin-top: 17.3vw;
  }
}
@media screen and (min-width: 813px) {
  .works .slider .item .text_box .btn_style a {
    margin-left: 0;
    margin-right: 0;
  }
}
.works .slider .item .slick-dots {
  bottom: auto;
  margin-top: 12px;
  opacity: 0;
}
.works .slider .item .slick-dots.active {
  animation: fadein .5s ease 0s forwards;
  animation-delay: 1.8s;
}
.works .slider .item .slick-dots li {
  width: 10px;
  height: 10px;
}
.works .slider .item .slick-dots li button {
  background-color: #fff;
  border: solid 1px #111;
  width: 10px;
  height: 10px;
}
.works .slider .item .slick-dots li button::before {
  display: none;
}
.works .slider .item .slick-dots li.slick-active button {
  background-color: #111;
}

.service {
  padding: 40px 0	80px;
  background: url(../img/common/bg_content.png) repeat top center;
}
@media screen and (max-width: 812px) {
  .service {
    padding: 4.6vw 0 10.6vw;
    background: url(../img/common/bg_content_sp.png) repeat center 47vw;
    background-size: 100%;
  }
}
.service .index_ttl {
  width: 19vw;
}
@media screen and (max-width: 812px) {
  .service .index_ttl {
    width: 44.5vw;
  }
}
.service .caption {
  opacity: 0;
}
.service .caption.active {
  animation: fadeup .8s ease-out 0s forwards;
  animation-delay: .2s;
}
@media screen and (max-width: 812px) {
  .service .caption.active {
    animation: fadeup .8s ease-out 0s forwards;
    animation-delay: .2s;
  }
}
.service .list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 84%;
  margin-left: auto;
  margin-top: 30px;
}
@media screen and (max-width: 812px) {
  .service .list {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}
.service .list .item {
  width: 19%;
  flex: none;
  position: relative;
}
@media screen and (max-width: 812px) {
  .service .list .item {
    width: 30%;
  }
}
@media screen and (max-width: 812px) {
  .service .list .item:nth-child(2n) {
    margin: 0 1.5%;
  }
}
@media screen and (max-width: 812px) {
  .service .list .item:nth-child(n+4) {
    margin-top: 6.6vw;
  }
}
.service .list .item::before {
  content: '';
  display: block;
  padding-top: 100%;
}
.service .list .item .number {
  position: absolute;
  top: -0.5em;
  left: 9px;
  z-index: 1;
  font-size: 2.0rem;
  font-weight: 900;
}
@media screen and (max-width: 812px) {
  .service .list .item .number {
    font-size: 3.7vw;
  }
}
.service .list .item .box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding-top: 23.7%;
  position: absolute;
  top: 0;
  left: 0;
}
.service .list .item .box .img {
  width: 43.1%;
  margin: 0 auto;
}
.service .list .item .box p {
  text-align: center;
  margin-top: 16.2%;
  font-size: 1.4rem;
}
@media screen and (max-width: 812px) {
  .service .list .item .box p {
    font-size: 3.2vw;
    margin-top: 12%;
  }
}
.service .list .item .box p.two {
  margin-top: 9%;
  line-height: 1.5;
}
@media screen and (max-width: 812px) {
  .service .list .item .box p.two {
    margin-top: 7%;
    line-height: 1.2;
  }
}
.service .list .item .one, .service .list .item .two, .service .list .item .three, .service .list .item .four, .service .list .item .five {
  opacity: 0;
}
.service .list .item .one.active {
  animation: fadeup .8s ease-out 0s forwards;
  animation-delay: .5s;
}
.service .list .item .two.active {
  animation: fadeup .8s ease-out 0s forwards;
  animation-delay: .8s;
}
.service .list .item .three.active {
  animation: fadeup .8s ease-out 0s forwards;
  animation-delay: 1.1s;
}
.service .list .item .four.active {
  animation: fadeup .8s ease-out 0s forwards;
  animation-delay: 1.4s;
}
.service .list .item .five.active {
  animation: fadeup .8s ease-out 0s forwards;
  animation-delay: 1.7s;
}
.service .btn_style {
  opacity: 0;
  margin-top: 50px;
}
.service .btn_style.active {
  animation: fadeup .8s ease-out 0s forwards;
  animation-delay: 2.0s;
}
@media screen and (max-width: 812px) {
  .service .btn_style {
    margin-top: 8vw;
  }
}

.contact {
  position: relative;
  padding: 80px 0 94px;
}
@media screen and (max-width: 812px) {
  .contact {
    padding: 12vw 4vw;
  }
}
.contact .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
}
.contact .bg.active {
  animation: fadeup .5s ease-out 0s forwards;
}
.contact .bg::before, .contact .bg::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.contact .bg::before {
  background: linear-gradient(135deg, #ffb41f 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 1;
}
.contact .bg::after {
  background: linear-gradient(270deg, #111111 0%, #3c3c3c 100%);
  z-index: 2;
  opacity: .85;
}
.contact .wrap {
  position: relative;
  z-index: 3;
  padding: 30px 0 60px;
}
@media screen and (max-width: 812px) {
  .contact .wrap {
    padding: 4.6vw 0 10.6vw;
  }
}
.contact .wrap .wrapbg {
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.contact .wrap .wrapbg.active {
  animation: bgright .5s ease-out 0s forwards;
  animation-delay: .3s;
}
.contact .index_ttl {
  width: 27.5vw;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 812px) {
  .contact .index_ttl {
    width: 62.5vw;
  }
}
.contact .index_ttl .caption {
  text-align: center;
  opacity: 0;
}
.contact .index_ttl .caption.active {
  animation: fadeup .8s ease-out 0s forwards;
  animation-delay: .6s;
}
.contact .discription {
  text-align: center;
  margin-top: 60px;
  font-size: 1.6rem;
  line-height: 1.5;
  opacity: 0;
}
.contact .discription.active {
  animation: fadeup .8s ease-out 0s forwards;
  animation-delay: .9s;
}
@media screen and (max-width: 812px) {
  .contact .discription {
    margin-top: 9.3vw;
    font-size: 3.2vw;
  }
}
.contact .btn_style {
  margin-top: 40px;
  opacity: 0;
}
.contact .btn_style.active {
  animation: fadeup .8s ease-out 0s forwards;
  animation-delay: 1.2s;
}
@media screen and (max-width: 812px) {
  .contact .btn_style {
    margin-top: 8vw;
  }
}

@keyframes fadeup {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bgright {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes bgrightoff {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

/*# sourceMappingURL=index.css.map */