/*
	8Stance　	アニメーション

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

	/* 下層メニューのアニメーション */
	/* 
		display:none;　→　display:block;　での制御では　transition　が動作しないので、常時　display:block !important;　とする 
		PCでは　hover　で動作　→　.open動作を無効化する
		スマホでは click による .open 切り替えで動作　→　hover動作を無効化する
		transitionは数値プロパティ（height）に有効なので、親要素　.drawer-dropdown-menu　を対象にすると、
		メニュー項目に変更があった場合はここの数値も修正しなければならない。
		これを回避するために、メニュ項目 .drawer-dropdown-menu li をアニメーション対象要素とすればよい。
		.drawer-dropdown-menu li の　border　の表示・非表示も制御すること。

	*/
.drawer-menu .drawer-dropdown > .drawer-dropdown-menu{
	display:	block !important;
}
	/* .drawer-dropdown-menu にアニメーション指定すると、項目数が変わるとheightの値も修正しなければならない。 */
	/* .drawer-dropdown-menu li に指定すれば、その必要はない */
.drawer-menu > .drawer-dropdown > .drawer-dropdown-menu > li,
.drawer-menu > li.drawer-dropdown.open > ul.drawer-dropdown-menu > li.drawer-dropdown > ul.drawer-dropdown-menu > li{		/* 3階層@@@@@目 */
	/* アコーデオン */
	overflow: hidden;
	height: 0;
	border-bottom:	none;	/* borderが見えているので消去 */

	/* フェード */
/*
	visibility: hidden;
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
	opacity:0;
*/

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	transition:all 0.5s ease;
}
.drawer-menu .drawer-dropdown:hover > .drawer-dropdown-menu > li{
/*	display:	block;	/*  */

	/* アコーデオン */
	overflow: visible;
	height: 40px;
	border-bottom:	1px solid #ccc;

	/* フェード */
/*
	visibility: visible;
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity:1.0;
	opacity:1.0;
*/
}
	/* 2階層目 animation */
aside#nav_menu-6  ul#menu-under-menu > li.menu-item > ul.sub-menu > li.menu-item{
	/* アコーデオン */
	overflow: hidden;
	height: 0;
	border-bottom:	none;	/* borderが見えているので消去 */

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	transition:all 0.5s ease;
}
aside#nav_menu-6  ul#menu-under-menu > li.menu-item:hover > ul.sub-menu > li.menu-item{
	/* アコーデオン */
	overflow: visible;
	height: 44px;
	border-bottom:	1px solid #ccc;
}

/* ###SlideupAnimation */
	/* 初期状態では visibility: hidden; opacity: 0; */
	/* 最終状態では visibility: visible; opacity: 1; */
.inviewExecuteSlideup{
    visibility: hidden;
	filter:			alpha(opacity=0);
	-moz-opacity:	0;
	-khtml-opacity:	0;
	opacity:		0;
}
.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;
}

/* 左からスライドイン Scitech-Inview-App.js::invewDetectLeftSlidein */
.invewDetect{
    -webkit-transition: all 1.0s linear;
    -moz-transition: 	all 1.0s linear;
    -o-transition: 		all 1.0s linear;
	transition: 		all 1.0s linear;

	filter:			alpha(opacity=0);
	-moz-opacity:	0;
	-khtml-opacity:	0;
	opacity:		0;
}
.LeftSlidein{
	-webkit-transform: translateX(-50px);
	transform: translateX(-50px); 
}
.RightSlidein{
	-webkit-transform: translateX(50px);
	transform: translateX(50px); 
}
.SlideinFinal{

	/* ★　このtransformが実行されるとiPhone/iPadでは右にスキマ発生 */
	-webkit-transform: 	none;
	transform: 			none; 

	filter:				alpha(opacity=100);
	-moz-opacity:		1.00;
	-khtml-opacity:		1.00;
	opacity:			1.00;
}



@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;
	}
}