/*
	sakai　	アニメーション

	参考サイト：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 .drawer-dropdown > .drawer-dropdown-menu .mdd_inner{
	/* アコーデオン */
/*	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{	/* hover時のアニメ */
.drawer-menu .drawer-dropdown.open > .drawer-dropdown-menu .mdd_inner{		/* click時のアニメ */
/*	display:	block;	/*  */

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

	/* フェード */
/*
	visibility: visible;
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity:1.0;
	opacity:1.0;
*/
}
/*---------------------------------------------------------------*/
/* ###SlideupAnimation */
.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);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@media screen and (max-width: 1100px) {
	/* メガメニューの高さ変更 */
	.drawer-menu .drawer-dropdown.open > .drawer-dropdown-menu .mdd_inner{		/* click時のアニメ */
		max-height: 311px;
	}
	.drawer-menu .drawer-dropdown.open > .drawer-dropdown-menu .mdd_inner.forAnimeTech{		/* click時のアニメ */
		max-height: 622px;
	}
}
/*@media screen and (max-width: 767px) {/* ■■■ 【ブレークポイント】 ■■■ */
@media screen and (max-width: 895px) {/* ■■■ 【ブレークポイント】 ■■■ */

	/* スマホでは下層メニューのheightでアニメーションする */


	
		/* mdd_innerのheightアニメーションは無効化する */
		/* これをしておかないと、閉じる時にアニメーション動作しない */
	.drawer-menu .drawer-dropdown > .drawer-dropdown-menu .mdd_inner{


		/* heightでアニメーション */
		/* max-heightでアニメーションの方が高さ自動的にしてくれるのでいいが、アニメがカクカク */
		height:		0px;
		height:		auto;
		/* max-heightでの制御は無効とする */
		max-height: none !important;

		/* アニメーション無効化 */
	    -webkit-transition: none 0 ease;
	    -moz-transition: none 0 ease;
	    -o-transition: none 0 ease;
		transition: none 0 ease;

	    -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.open > .drawer-dropdown-menu .mdd_inner{		/* click時のアニメ */

		padding:	20px 0px;;

		/* 【重要】この要素の高さ関連をデフォルトに設定して、height関連のアニメーションを無効化する */

		/* height:360px;を無効化 */
		height:		130px;
		/* max-heightでの制御は無効とする */
		max-height: none !important;

		border-top:		1px solid #ccc;
	}







/* ▼ 二段重ねのドロップダウンオープン */


		/* ▼ ###TechHeadlineAnimation */
		
	.drawer-menu .drawer-dropdown .nav_megamenu2 .nav_megamenu_ttl2{
		width:			100%;
		display:		block !important;	/* 常時表示 */
		text-align:		left;
		line-height:	70px;
		padding:		0px !important;		/* padding */
		padding-left:	30px !important;	/* padding */
		margin:			0px !important;
		background-color:	#e3f3f3;
	}
	.nav_megamenu_list_technology .menu_global_child .menu-item a{
		padding-left:	50px !important;
	}
		/* ▲ ###TechHeadlineAnimation */






		/* メニュー個別の高さでアニメーションさせる */
		.drawer-menu .drawer-dropdown .nav_megamenu2 .nav_megamenu_ttl2,	/* ###TechHeadlineAnimation */
	.drawer-menu .drawer-dropdown > .drawer-dropdown-menu li{
		height: 0;				/* CPU */
/*		transform:	scaleY(0);	/* GPU */
		border-bottom:	none;	/* 畳んだ時にかさばって表示される */
	    -webkit-transition: all 0.5s ease;
	    -moz-transition: all 0.5s ease;
	    -o-transition: all 0.5s ease;
		transition:all 0.5s ease;
	}

		/* スマホではhoverアクションでの制御は解除 */
	.drawer-menu .drawer-dropdown:hover > .drawer-dropdown-menu li{
		overflow: hidden;
		height: 0;				/* CPU */
/*		transform:	scaleY(0);	/* GPU */
		border-bottom:	none;	/* 畳んだ時にかさばって表示される */
	}

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

/* ▲ 二段重ねのドロップダウンオープン */









		/* メニュー項目の外殻のスペースは除去 */
	.drawer-menu .drawer-dropdown .drawer-dropdown-menu .mdd_inner .nav_megamenu_list_technology,
	.drawer-menu .drawer-dropdown .drawer-dropdown-menu .mdd_inner .nav_megamenu_list,
	.drawer-menu .drawer-dropdown .drawer-dropdown-menu .mdd_inner .nav_megamenu_list_bussiness{
		padding:	0px;
	}

	.drawer-menu .drawer-dropdown.open:hover > .drawer-dropdown-menu li{
	}
	.drawer-menu .drawer-dropdown.open:hover > .drawer-dropdown-menu .first li:last-child{
		border-bottom: 1px solid #ccc !important;
	}
}
@media screen and (max-width: 480px) {
	.drawer-menu .drawer-dropdown.open > .drawer-dropdown-menu .mdd_inner{		/* click時のアニメ */
		height:		320px;
	}
}