@charset "UTF-8";
.other-links {
    position: relative;
    margin: 0 auto;
    padding: 7.733% 0 7%;
}
.other-links__txt-float {
	display: none;
}
#load-anime .first {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  width: 100%;
  height: 100%;
  z-index: 100;
  -webkit-animation: load-anime 1000ms cubic-bezier(.77,0,.11,1) 400ms both;
          animation: load-anime 1000ms cubic-bezier(.77,0,.11,1) 400ms both;
}
#load-anime .second {
  position: fixed;
  top: 0;
  left: 0;
  background: #f3f3f3;
  width: 100%;
  height: 100%;
  z-index: 100;
  -webkit-animation: load-anime 1300ms cubic-bezier(.77,0,.11,1) 0ms both;
          animation: load-anime 1300ms cubic-bezier(.77,0,.11,1) 0ms both;
}
@keyframes load-anime {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes load-parts {
  0% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
            opacity:0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity:1;
  }
}
@keyframes load-parts-2 {
  0% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
            opacity:0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity:1;
  }
}
@keyframes load-parts-3 {
  0% {
    -webkit-transform: scale(1.06);
            transform: scale(1.06);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1));
  }
}

@media screen and (min-width: 768px){
	.header{
		animation: load-parts 600ms ease 500ms both;
	}
	.top .boxes{
		margin-top: -40px;
	}
	.top .boxes__col3{
		margin-top: 50px;
	}
	.boxes__txt{
		padding: 30px;
	}
	.mv__ttl, 
	.ttl-lower__jp, 
	.ttl-lower__en{
		animation: load-parts-2 600ms ease 200ms both;
	}
	.mv__item{
		animation: load-parts-3 800ms ease both;
	}
	.top-mv .mv__item{
		animation: none;
	}
	.gnav-list__link{
		overflow: hidden;
	}
	.gnav-list__link:before {
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	    height: 2px;
	    background: #EB4800;
	    content: '';
	    transform: scaleX(0);
	    animation: hover-slideBg-out .6s cubic-bezier(.16,.84,.44,1) 0s 1 normal forwards running;
    }
	.gnav-list__link:hover:before,
	.gnav-list__link.current:before {
	    animation: hover-slideBg-in .6s cubic-bezier(.16,.84,.44,1) 0s 1 normal forwards running;
    }
	.sec-intro__txt {
	    display: block;
	    left: -5.9%;
	    bottom: -43px;
	}
	.txt-float{
		font-size: 18vw;
	}
	.gnav-list__item{
		margin-right:3vw;
	}
	.top-mv__txt{
		width: 200px;
		font-size: 18px;
	}
	.mv:before, 
	.mv--lower:before, .mv--lower:after{
		width: 240px;
	}
	.other-links{
		overflow: hidden;
	}
	.other-links__txt-float {
		display: block;
	    bottom: -9vw;
	    left: -10vw;
	    color: #efefef;
	}
}

.gnav-list__btn {
    font-weight: bold;
}
.btn-cmn:hover{
	opacity: 1;

}
.btn-cmn span, 
.gnav-list__btn span{
	position: relative;
	
}
.gnav-list__btn{
	position: relative;
}
.btn-cmn:before, 
.gnav-list__btn:before{
	content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #FA611D;
    transform: scaleX(0);
    animation: hover-slideBg-out .6s cubic-bezier(.16,.84,.44,1) 0s 1 normal forwards running;
}
.btn-cmn.other-links__btn:before{
	background: #333;
}
.btn-cmn:hover .other-links__btn-inner{
	color: #fff;
}
.btn-cmn:hover .other-links__btn-arrow{
	fill: #fff;
}
.btn-cmn:hover:before, 
.gnav-list__btn:hover:before {
    animation: hover-slideBg-in .6s cubic-bezier(.16,.84,.44,1) 0s 1 normal forwards running;
}
@-webkit-keyframes hover-slideBg-in {
  0% {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(0);
    transform: scaleX(0)
  }
  to {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@keyframes hover-slideBg-in {
  0% {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(0);
    transform: scaleX(0)
  }
  to {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@-webkit-keyframes hover-slideBg-out {
  0% {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  to {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: scaleX(0);
    transform: scaleX(0)
  }
}

@keyframes hover-slideBg-out {
  0% {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  to {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: scaleX(0);
    transform: scaleX(0)
  }
}


.show{
	opacity: 0;
	transform: translateY(100px);
	transition: all .6s;	
}
.show.is_done{
	opacity: 1;
	transform: translateY(0);
}