/*
	8Stance　	アニメーション

	参考サイト：http://weboook.blog22.fc2.com/blog-entry-408.html
*/


/* ###SlideupAnimation */
	/* 初期状態では visibility: hidden; opacity: 0; */
	/* 最終状態では visibility: visible; opacity: 1; */
.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes slideInUp {
  from {
/*
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
*/
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
    visibility: hidden;
	filter:			alpha(opacity=0);
	-moz-opacity:	0;
	-khtml-opacity:	0;
	opacity:		0;
  }
	50% {
	    visibility: visible;
		filter:			alpha(opacity=50);
		-moz-opacity:	0.5;
		-khtml-opacity:	0.5;
		opacity:		0.5;
  	}
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
	filter:				alpha(opacity=100);
	-moz-opacity:		1.00;
	-khtml-opacity:		1.00;
	opacity:			1.00;
  }
}

@keyframes slideInUp {
  from {
/*
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
*/
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
    visibility: hidden;
	filter:			alpha(opacity=0);
	-moz-opacity:	0;
	-khtml-opacity:	0;
	opacity:		0;
  }
	50% {
	    visibility: visible;
		filter:			alpha(opacity=50);
		-moz-opacity:	0.5;
		-khtml-opacity:	0.5;
		opacity:		0.5;
  	}
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
	filter:				alpha(opacity=100);
	-moz-opacity:		1.00;
	-khtml-opacity:		1.00;
	opacity:			1.00;
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}



/* intersect Action の css */
    /*----- フェードイン -----*/
    .inviewfadeIn {
        opacity: 0;
        transition: .8s;
    }
    
    .fadeIn {
        opacity: 1.0;
    }
 
    /*----- 上へスライド -----*/
    .inviewUp {
        transform: translate(0, 100px);
        -webkit-transform: translate(0, 100px);
        transition: .8s;
    }
    
 
    /*----- ズームイン -----*/
    .inviewzoomIn {
        transform: scale(0, 0);
        -webkit-transform: scale(0, 0);
        transition: .8s;
    }
    
    .zoomIn {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
    } 
    
    /*----- フェードインしながら上へスライド -----*/
    .inviewfadeInUp {
        opacity: 0;
        transform: translate(0, 100px);
        -webkit-transform: translate(0, 100px);
        transition: .8s;
    }
    
    .fadeInUp {
        opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
    /*----- 左から右へスライド -----*/
    .inviewLeftToRight {
        transform: translate(-100px, 0px);
        -webkit-transform: translate(-100px, 0px);
        transition: .8s;
    }
    
    /*----- 右から左へスライド -----*/
    .inviewRightToLeft {
        transform: translate(100px, 0px);
        -webkit-transform: translate(100px, 0px);
        transition: .8s;
    }
    /*----- 通常位置 -----*/
    .Normal {
        transform: translate(0, 0) !important;
        -webkit-transform: translate(0, 0) !important;
    }
	/* intersectActionの遅延動作 */
.delay-second{
	transition-delay:0.5s;
}
.delay-third{
	transition-delay:1s;
}
.delay-forth{
	transition-delay:1.5s;
}
/*---------------------------------------------------------------*/
/* ###Bxslider 微妙な移動Animation */
@keyframes zoomUp {
  0% {
/*	transform: scale(1);	/* ズームイン */
	transform: scale(1.1);	/* ズームアウト */
/*	transform: translateY(0px);	/* 下から上に移動 */
  }
  100% {
/*	transform: scale(1.1);	/* ズームイン */
	transform: scale(1);	/* ズームアウト */
/*	transform: translateY(-100px);	/* 下から上に移動 */
  }
}
	/* <li>ごとアニメーションする */
.bxslider li{
  -webkit-animation-name: zoomUp;
  animation-name: zoomUp;
  -webkit-animation-duration: 7s;
  animation-duration: 7s;

  	/* 最終形を維持 */

  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.wrapFullScreen img,
.bx-wrapper img{
	width:		100%;
/*	height:		800px;	/*  */
	object-fit:	cover;
}

@media screen and (max-width: 767px) {/* ■■■ 【ブレークポイント】 ■■■ */
		/* スマホではhoverアクションでの制御は解除 */
	.drawer-menu .drawer-dropdown > .drawer-dropdown-menu li{
	}
/*	.drawer-menu .drawer-dropdown:hover > .drawer-dropdown-menu li{			/* 2019.9.24 */
	.drawer-menu li.drawer-dropdown:hover > ul.drawer-dropdown-menu > li{		/* 直下 */
		overflow: hidden;
		height: 0;				/* CPU */
/*		transform:	scaleY(0);	/* GPU */
		border-bottom:	none;	/* 畳んだ時にかさばって表示される */

	}

	/* さらに下層@@@@@ */
	.drawer-menu li.drawer-dropdown.open > ul.drawer-dropdown-menu > li.drawer-dropdown{		/* 3階層目 */
		height:	auto;	/* こうしておかないと下層が開く領域が確保されない */
	}


		/* クリックで.openついたら表示 */
		/* display:none;　→　display:block;　での制御では　transition　が動作しないので、常時　display:block;　とする */
/*	.drawer-menu .drawer-dropdown.open > .drawer-dropdown-menu li{			/* 2019.9.24 */
	.drawer-menu > li.drawer-dropdown.open > ul.drawer-dropdown-menu > li,		/* 直下 */
	.drawer-menu > li.drawer-dropdown.open > ul.drawer-dropdown-menu > li.drawer-dropdown.open > ul.drawer-dropdown-menu > li{		/* 3階層@@@@@目 */
		overflow: visible;
/*		height: 80px;	/*  */
/*		height: 70px;	/* CPU ###SP-menu-item-height 70 */
		height: 60px;	/* CPU ###SP-menu-item-height 60 */
/*		transform:	scaleY(1);	/* GPU */
		border-bottom:	1px solid #ccc;
	}
	.drawer-menu .drawer-dropdown.open:hover > .drawer-dropdown-menu li{
	}

	.drawer-menu > li.drawer-dropdown.open > ul.drawer-dropdown-menu > li.drawer-dropdown.open > ul.drawer-dropdown-menu{		/* 3階層@@@@@目 */
		border-top:	1px solid #ccc;
	}
}