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

/*
■共用：ハンバーガーメニュー


■ページの初期位置設定
ドロアーメニューを開く際、ページ全体を左に動かすため。
ページ全体を可動式にする
------------------------------------------*/
#page{
	/*padding-top: 50px;*/
	position: relative;
	z-index: 2;
	left: 0;
	background: #fff;
	-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	     -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	        transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			/* easeInOutExpo */

	-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	     -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			/* easeInOutExpo */
}


/*ドロアーメニューの設定
------------------------------------------*/
#drawernav{
	position: fixed;
	top: 0;
	right: -240px;
	width: 240px;
	height: 100%;
	background: #84c9a1;
	color: #fff;
	z-index: 100;
	padding-top: 8em;
	-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	     -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	        transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			/* easeInOutExpo*/ 

	-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	     -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
			 /* easeInOutExpo */
}
#drawernav ul{
	list-style: none;
	padding: 0;
	}
	#drawernav ul li a{
		color: #fff;
		display: block;
		padding: 20px 20px;
		text-decoration: none;
		-webkit-transition: all 0.3s;
           -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
             -o-transition: all 0.3s;
                transition: all 0.3s;
	}



/*ハンバーガーメニューバー設定
------------------------------------------*/
#drawer-menu{
	text-align: center;
    background-color: #fff;
    position: relative;
    border-bottom: solid 1px #ddd;
}

/*
ハンバーガーメニューバーを固定しない。
画面スクロールで移動する。
------------------------------------------*/
#humberger{
	display: block;
    position: absolute;
    top: .5em;
    right: 0;
    z-index: 9999;
    width: 30px;
    height: 40px;
    padding: 17px 10px 0px;
    cursor: pointer;
}


/*ハンバーガーメニューのアイコンバー
（ドロアーメニュー：初期位置・収束）
------------------------------------------*/
.icon-bar{
	height: 4px;
	background: #ccc;
	display: block;
	margin-bottom: 6px;
	-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	     -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	        transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
			 /* easeInOutExpo */

	-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	     -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			/* easeInOutExpo */
}


/*
------------------------------------------*/
.fixed-content{
	right: inherit;
	width: 100%;
	z-index: 2;
	-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	     -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	        transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			 /*easeInOutExpo */

	-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	     -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			/* easeInOutExpo */
}


/*ドロアーメニュー以外をクリック＆タッチした際の判定スイッチ
（初期位置：画面の下へ移動）
------------------------------------------*/
#overlay{
	z-index:-1;
	opacity: 0;
	background: #000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	     -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	        transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

	-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	     -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
}


/**
* ドロワー開放時のスタイル
**/

/*
ハンバーガーメニューバーの設定
ドロアーメニュー展開時、ハンバーガーメニューバーを固定する。
------------------------------------------*/
body.drawer-opened #drawer-menu{
	position:static;
}
body.drawer-opened #humberger{
	position:fixed;
	top: .5em;
}


/*
ドロアーメニュー展開時
ページ全体を左へ移動
------------------------------------------*/
body.drawer-opened #page{
	/*left: -15rem;*/
	left: 0;
}
body.drawer-opened .fixed-content{
	left: 0;
}
body.drawer-opened #drawernav{
	right: 0;
}



/*ハンバーガーメニューのアイコンバー
（ドロアーメニュー：展開）
------------------------------------------*/
body.drawer-opened #humberger .icon-bar{
	background: #fff;
    margin-bottom: 4px;
	}
	body.drawer-opened #humberger :nth-child(1){
		transform:translate(0,8px) rotate(45deg);
		-webkit-transform:translate(0,8px) rotate(45deg);
	}
	body.drawer-opened #humberger :nth-child(2){
		transform:translate(-20px ,0);
		-webkit-transform:translate(-20px ,0);
		opacity:0;
	}
	body.drawer-opened #humberger :nth-child(3){
		transform:translate(0,-8px) rotate(-45deg);
		-webkit-transform:translate(0,-8px) rotate(-45deg);
	}


/*ドロアーメニュー以外をクリック＆タッチした際の判定スイッチ
（初期位置：画面の上へ移動）
------------------------------------------*/
body.drawer-opened #overlay{
	z-index: 9999;
	opacity: 0.3;
	left: -240px;
}


#tablet-----------------------------------------{}
/*@media only screen and (min-width: 767px) {*/
@media print, screen and (min-width: 767px) {
/*
スマホサイスの時は、常にレイヤー状態で浮かせてあるので、
ＰＣサイズ表示では、グローバルメニューの<a>タグが無効されてしまう。
そのため、ＰＣサイズ表示では「#page」のpositionを無効化が必要。
※スマホの時は、グローバルメニューもレイヤー状態なので<a>タグが有効。
*/
#page{
	position:static;
}


#drawer-menu {
    background: -moz-linear-gradient(tbottom, #f1f2f3, #FFF 20%);
    background: -webkit-linear-gradient(bottom, #f1f2f3, #FFF 20%);
    background: linear-gradient(to top, #e8e8e1, #FFF 20%);
}

/*
------------------------------------------*/
#drawer-menu img{
	width:160px;
	vertical-align: bottom;
}


#drawernav{
    width: 100%;
    position:static;
    background-color: inherit;
    padding: 0;
    font-size: small;
}
#drawernav ul{
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
	-webkit-justify-content: space-around;
            justify-content: space-around;
}

#drawernav ul li{
	width:25%;
    text-align: center;
	border-left: solid 1px #ddd;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	
	}
	#drawernav ul li:last-child{
		border-right: solid 1px #ddd;
	}
	
#drawernav ul li a {
    font-size: medium;
	color:#333;
}

#humberger{
	display:none;
}

}


# PC -------------------------------------------{}
@media only screen and (min-width: 920px) {

/*
------------------------------------------*/


#drawernav ul li a:hover {
	background-color:#8db41a;
	color:#fff;
	text-shadow: 1px 0 2px #aaa;
	-webkit-text-shadow: 1px 0 2px #aaaa;
}


}