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

nav.NavMenu{
	position: fixed;	/*表示位置を固定*/
	z-index: 200;		/*重ね順を変更*/
	top: 0;		/*表示位置を指定*/		
	right: 0;	/*表示位置を指定*/
	color: #000;	/*文字色を黒にする*/
	text-align: center;		/*テキストを中央揃え*/
	width: 25%;	/*全幅表示*/
	height: 100%;
	transform: translateX(100%);	/*ナビを右に隠す*/
	transition: all 0.6s;	/*アニメーションの時間を指定*/
	background: rgba(0, 0, 0, 0.8);
	padding: 180px 30px;
}

nav.NavMenu h2{
	color: #fff;
	background-color: transparent;
	border-bottom: 0;
	font-size: 2em !important;
	font-weight: normal;
	letter-spacing: 10px;
}

nav.NavMenu ul{
	width: 100%;	
	margin: 0 auto;
	padding: 0;
}

nav.NavMenu ul li{
	font-size: 1.3em;
	font-weight: bold;
	background-color: rgba(255,255,255,1);	/*背景の色*/
	list-style-type: none;
	padding: 0;
	width: 100%;
	border-radius: 50px;
	margin-bottom: 10px;
}

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

nav.NavMenu ul li a{
	display: block;		/*クリックできる領域を広げる*/
	color: #000;
	padding: 0.6em 0;
}

nav.NavMenu.active{
	transform: translateY(0%);		/*ナビを表示する*/
}

.Toggle {
	display: block;
    position: fixed;
    right: 13px;
    top: 8px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 9999;
	box-sizing: content-box;
	background-color:#d3a46d;
	border: 2px solid #000;
    border-radius: 50%; 
/* 	    border-radius: 10%; */
    transform: rotate(45deg);
}

.Toggle span {
	display: block;
	position: absolute;
	width: 30px;
	border-bottom: solid 4px #fff;
	-webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
	-moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
	transition: .35s ease-in-out;			/*変化の速度を指定*/
	left: 10px;
	border-radius: 5px;
}

.Toggle span:nth-child(1) {
    top: 15px;
    transform: rotate(-45deg);
    left: 3%;
}

.Toggle span:nth-child(2) {
/* 	top: 24px; */
    top: 22px;
    transform: rotate(-45deg);
    left: 18%;
}

.Toggle span:nth-child(3) {
/* 	top: 33px; */
    top: 29px;
    transform: rotate(-45deg);
    left: 31%;
}

.Toggle b {
	color: #ff81a3;
	position: absolute;
	top: 42px;
	left: 15px;
	font-size: 0.9em;
}

/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
/* 	top: 22px;
	left: 10px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg); */
	top: 22px;
    left: 9px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-95deg);
}

/* 2番目と3番目のspanを45度に */
/* .Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
	top: 22px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg); */
.Toggle.active span:nth-child(2), .Toggle.active span:nth-child(3) {
    top: 22px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(0deg);
	    width: 25px;
}


#fade{
	display: none;
}
@media screen and (min-width:768px) {
	
		.Toggle{
		    top: 28px;
		    right: 30px;
	}
	.top_title {
    margin-left: 16px;
}
}
@media screen and (min-width:1024px) {
.top_title {
	width: 75% !important;
	}
	.Toggle{
		top: 47px;
	}
	
	}



@media (max-width: 768px) {
	nav.NavMenu{
		width: 100%;	/*全幅表示*/
	}
	
	nav.NavMenu ul li{
		font-size: 1em;
	}

	
	
	/*.Toggle {
		right: 10px;
	}
	
	.Toggle b {
		font-size: 0.9em;
	}*/
}