@charset "UTF-8";
/* CSS Document */



/* ==================================
    head
    ================================== */

.nav-item a i {
    display: block;
    font-style: normal;
}
.nav-item a {
    display: flex;
    overflow: hidden;
}
@media only screen and (min-width: 961px){
	.nav-item a:hover i:first-child {
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
        -webkit-animation: nav-itemAnimation .3s cubic-bezier(.19,1,.22,1) .05s 1 normal forwards;
        animation: nav-itemAnimation .3s cubic-bezier(.19,1,.22,1) .05s 1 normal forwards;	
}
	.nav-item a:hover i:nth-child(2){
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
        -webkit-animation: nav-itemAnimation .3s cubic-bezier(.19,1,.22,1) .15s 1 normal forwards;
        animation: nav-itemAnimation .3s cubic-bezier(.19,1,.22,1) .15s 1 normal forwards;	
}
	.nav-item a:hover i:nth-child(3){
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
        -webkit-animation: nav-itemAnimation .3s cubic-bezier(.19,1,.22,1) .15s 1 normal forwards;
        animation: nav-itemAnimation .3s cubic-bezier(.19,1,.22,1) .25s 1 normal forwards;	
}
	
	.nav-item a:hover i:nth-child(4){
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
        -webkit-animation: nav-itemAnimation .3s cubic-bezier(.19,1,.22,1) .15s 1 normal forwards;
        animation: nav-itemAnimation .3s cubic-bezier(.19,1,.22,1) .35s 1 normal forwards;	
}
	
	.nav-item a:hover i:nth-child(5){
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
        -webkit-animation: nav-itemAnimation .3s cubic-bezier(.19,1,.22,1) .15s 1 normal forwards;
        animation: nav-itemAnimation .3s cubic-bezier(.19,1,.22,1) .45s 1 normal forwards;	
    }
	
	.nav-item a:hover i:nth-child(6){
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
        -webkit-animation: nav-itemAnimation .3s cubic-bezier(.19,1,.22,1) .15s 1 normal forwards;
        animation: nav-itemAnimation .3s cubic-bezier(.19,1,.22,1) .55s 1 normal forwards;	
}
	.nav-item a:hover i:nth-child(7){
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
        -webkit-animation: nav-itemAnimation .3s cubic-bezier(.19,1,.22,1) .15s 1 normal forwards;
        animation: nav-itemAnimation .3s cubic-bezier(.19,1,.22,1) .65s 1 normal forwards;	
}
	}
@-webkit-keyframes nav-itemAnimation{
	to{
		-webkit-transform:translateY(0);
		transform:translateY(0)
	}
}
@keyframes nav-itemAnimation{
	to{
		-webkit-transform:translateY(0);
		transform:translateY(0)
	}
}
/* ==================================
    mvup
    ================================== */
.mvup{
	overflow: hidden;
	display: flex;
}
#director .mvup{
	justify-content: center;
}
.mvup i{
	font-style: normal;
	display: block;
}
.mvup i {
    -webkit-transform: translate3d(0,15px,0);
    transform: translate3d(0,25px,0);
    transition: .6s cubic-bezier(.19,1,.22,1);
}
.show .mvup i:first-child{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
	transition-delay: .1s;
}
.show .mvup i:nth-child(2){
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
	transition-delay: .2s;
}
.show .mvup i:nth-child(3){
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
	transition-delay: .3s;
}
.show .mvup i:nth-child(4){
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
	transition-delay: .4s;
}
.show .mvup i:nth-child(5){
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
	transition-delay: .5s;
}
.show .mvup i:nth-child(6){
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
	transition-delay: .6s;
}
.show .mvup i:nth-child(7){
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
	transition-delay: .7s;
}
.show .mvup i:nth-child(8){
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
	transition-delay: .8s;
}
.show .mvup i:nth-child(9){
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
	transition-delay: .9s;
}
/* ==================================
    left
    ================================== */
.hide-left{
    opacity: 0;
    -webkit-transform: translate3d(30px,0,0);
    transform: translate3d(30px,0,0);
    will-change: transform;
}
.show .hide-left{
    opacity: 1;
    transition: 1s cubic-bezier(.165,.84,.44,1) .7s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}
/* ==================================
    right
    ================================== */
.hide-right {
	opacity: 0;
    -webkit-transform: translate3d(-30px,0,0);
    transform: translate3d(-30px,0,0);
    will-change: transform;
    transition: 1s cubic-bezier(.165,.84,.44,1) .7s;
}

.show .hide-right {
	opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}
/* ==================================
    順番
    ================================== */
.delay{
    opacity: 0;
    transition: .6s cubic-bezier(.39,.575,.565,1);
    -webkit-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0);
    will-change: transform;
}
.show .delay-wrap .delay:nth-child(1){
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition-delay: .4s;
}
.show .delay-wrap .delay:nth-child(2){
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition-delay: .8s;
}
.show .delay-wrap .delay:nth-child(3) {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition-delay: 1.2s;
}

.show .delay-wrap .delay:nth-child(4) {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition-delay: 1.6s;
}

	
/* ==================================
   arrow
    ================================== */	
	
.arrow a {
	transition: .3s;
}
	@media only screen and (min-width: 961px){
		.arrow a:hover::before{
			    right: -20px!important;
		}
		.arrow a:hover{
			    opacity: 0.5;
		}
		.cv-btn a:hover::before{
			right: 15px!important;
		}
}
/* ==================================
   btn
    ================================== */	
.btn-wrap a::after {
    z-index: -1;
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
	opacity: 0.5;
    transform-origin: right top;
    transform: scaleX(0);
    transition: -webkit-transform .3s ;
    transition: transform .3s ;
}
@media only screen and (min-width: 961px){
		.btn-wrap a:hover::before {
			right: 15px!important;
		}
		.btn-wrap a:hover::after {
			 z-index: 0;
    		transform-origin: left top;
    		transform: scale(1);
		}
}
/* ==================================
   under-bar
    ================================== */	
.btn-text-link{
	position: relative;
	display: inline-block;
}
.btn-text-link::after{
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background-color: #8e704a;
    transform-origin: left;
    transition: 0.4s;
}
@media only screen and (min-width: 961px){
	.btn-text-link:hover::after {
        transform: scaleX(0);
        transform-origin: right;
        transition: 0.5s;
	}
}
/* ==================================
   fade
    ================================== */	
.hide-fade{
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    transform: scale(1.3);
    transition: 1.9s !important;
    
}
.show .fade{
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}
.sticky {
    overflow: hidden;
}
/*------------------------------------------------------------
	loder
------------------------------------------------------------*/
/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	background:#8e704a;
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
	width:300px;
}

/*========= SVG操作手書き風にするためのCSS ===============*/

#mask .st1{
    fill:none;
    stroke:#fff;
    stroke-width:9;/*線の太さを指定する*/
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    stroke-dasharray: 1500; /* 線の間隔を指定する */
    stroke-dashoffset:1500; /* 線の位置を指定する */
}