@charset "UTF-8";

/* バーガーメニュー */

.header_wraper {
	display: block;
	}
.burger_wraper {
	float: right;

}	

	


div.NavMenu{
			position: fixed;	/*表示位置を固定*/
			z-index: 99999;		/*重ね順を変更*/
			top: 0;		/*表示位置を指定*/		
			left: 0;	/*表示位置を指定*/
			background: #fff;/*背景を白にする*/
			color: #000;	/*文字色を黒にする*/
			text-align: left;		/*テキストを中央揃え*/
			width: 100%;	/*全幅表示*/
			transform: translateY(-100%);	/*ナビを上に隠す*/
			transition: all 0.6s;	/*アニメーションの時間を指定*/
			
		}

div.NavMenu ul{
			font-family: 'Roboto', sans-serif;
			font-family: 'M PLUS Rounded 1c', sans-serif;
			background: #fff;	/*背景をグレーにする*/

			width: 100%;	
			margin: 0 auto;
			padding: 0;
		}

		div.NavMenu ul li{
			font-size: 1.1em;
			list-style-type: none;
			padding: 0;
			width: 100%;
			border-bottom: 1px dotted #333;	

		}

		div.NavMenu ul li:last-child{
			padding-bottom: 0;
			border-bottom: none;	/*最後のメニュー項目のみ下線を消す*/
		}

div.NavMenu ul li a{
			font-family: 'Roboto', sans-serif;
			font-family: 'M PLUS Rounded 1c', sans-serif;
			display: block;		/*クリックできる領域を広げる*/
			color: #000;
			padding: 0.5em 3%;
		}
		
		div.NavMenu.active{
			transform: translateY(0%);		/*ナビを表示する*/
		}

		.Toggle {
		    display: block;
		    position: fixed;    /* bodyに対しての絶対位置指定 */
		    right: 5%!important;
		    top: 10px!important;;
		    width: 50px;
		    height: 50px;
		    cursor: pointer;
		    z-index: 999999;
		}

		.Toggle span {
			font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
		    display: block;
		    position: absolute;
		    width: 38px;
		    border-bottom: solid 4px #fff;
		    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
		    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
		    transition: .35s ease-in-out;			/*変化の速度を指定*/
		    left: 6px;
			font-size: 8px;
			letter-spacing: 0.1em;
		    z-index: 999999;
		}

		.Toggle span:nth-child(1) {
		    top: 9px;
		}
		 
		.Toggle span:nth-child(2) {
		    top: 18px;
		}
		 
		.Toggle span:nth-child(3) {
		    top: 27px;
		}
		 
		/* 最初のspanをマイナス45度に */
		.Toggle.active span:nth-child(1) {
		    top: 18px;
		    left: 6px;
		    -webkit-transform: rotate(-45deg);
		    -moz-transform: rotate(-45deg);
		    transform: rotate(-45deg);
		}
		 
		/* 2番目と3番目のspanを45度に */
		.Toggle.active span:nth-child(2),
		.Toggle.active span:nth-child(3) {
		    top: 18px;
		    -webkit-transform: rotate(45deg);
		    -moz-transform: rotate(45deg);
		    transform: rotate(45deg);
		}




		#fade{
			display: none;
		}
  /*ハンバーガーボタン*/

    .icon-animation {
      width: 44px;
      height: 44px;
      display: block;
      cursor: pointer;
      float: right;
      position: absolute;
      right: .2rem;
      text-align: center;
      top: .1rem;
    }

    .icon-animation span {
      width: 39px;
      height: 1px;
      display: block;
      background: #666;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -25px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    .icon-animation .top {
      -webkit-transform: translateY(-13px);
      -ms-transform: translateY(-13px);
      transform: translateY(-13px);
    }

    .icon-animation .bottom {
      -webkit-transform: translateY(13px);
      -ms-transform: translateY(13px);
      transform: translateY(13px);
    }

    .is-open .middle {
      background: rgba(51, 51, 51, 0);
    }

    .is-open .top {
      -webkit-transform: rotate(-45deg) translateY(0px);
      -ms-transform: rotate(-45deg) translateY(0px);
      transform: rotate(-45deg) translateY(0px);
    }

    .is-open .bottom {
      -webkit-transform: rotate(45deg) translateY(0px);
      -ms-transform: rotate(45deg) translateY(0px);
      transform: rotate(45deg) translateY(0px);
    }
@-moz-document url-prefix() {
.Toggle span {
			font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
		    display: block;
		    position: absolute;
		    width: 35px;
		    border-bottom: solid 4px #fff;
		    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
		    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
		    transition: .35s ease-in-out;			/*変化の速度を指定*/
		    left: 6px;
			font-size: 8px;
			letter-spacing: 0.3em;
		    z-index: 999999;
		}
}
_::-webkit-full-page-media, _:future, :root .Toggle span {
			font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
		    display: block;
		    position: absolute;
		    width: 35px;
		    border-bottom: solid 4px #fff;
		    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
		    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
		    transition: .35s ease-in-out;			/*変化の速度を指定*/
		    left: 6px;
			font-size: 8px;
			letter-spacing: 0.2em;
		    z-index: 999999;
		}