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


nav{
	position: absolute;
    top: 50%;
	right: 40px;
    transform: translateY(-50%);
	transition: none;
}
nav li{
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	margin-right: 50px;
}
nav li a{
	transition: 0.3s;
	padding: 10px 0;
}
nav li a:hover{
	color: #41a4dd
}
nav li.privacy{
	display: none;
}
nav li.contact{
	margin-right: 0;
}
nav li.contact a{
	background: #313131 url("../img/icon_mail.png") no-repeat center left 20px;
	background-size: 20px auto;
	display: inline-block;
	padding: 16px 40px 16px 50px;
	border-radius: 40px;
	color: #fff;
	transition: 0.3s;
}
nav li.contact a:hover{
	background-color: #41a4dd;
}

@media screen and (max-width: 1280px) {

	nav{
		position: fixed;
		top: 0;
		right: 0;
		transform: translateX(100%);
		display: block;
		width: 100%;
		height: 100vh;
		background:rgba(255,255,255,1);
		transition: 0.5s ease;
		padding: 140px 40px 40px 40px;
	}
	nav.active{
		transform: translateX(0%);
	}

	nav li{
		display: block;
		font-size: 18px;
		padding: 0;
		margin-right: 0;
		text-align: center;
	}
	nav li a{
		display:inline-block;
		transition: 0.3s;
		padding: 15px 0;
		
	}
	nav li.privacy{
		display: block;
	}
	nav li.contact{
		padding: 40px 0;
		margin-right: 0;
	}


	/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
	.openbtn{
		/*ボタン内側の基点となるためrelativeを指定。
		追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
		position: fixed;
		right: 40px;
		top: 30px;
		background:#313131;
		cursor: pointer;
		width: 60px;
		height:60px;
		border-radius: 50%;
		z-index: 9999;
	}

	/*ボタン内側*/
	.openbtn span{
		display: inline-block;
		transition: all .4s;/*アニメーションの設定*/
		position: absolute;
		left: 18px;
		height: 3px;
		border-radius: 2px;
		background: #fff;
	  }


	.openbtn span:nth-of-type(1) {
		top:20px;	
		width: 45%;
	}

	.openbtn span:nth-of-type(2) {
		top:28px;
		width: 35%;
	}

	.openbtn span:nth-of-type(3) {
		top:36px;
		width: 20%;
	}

	/*activeクラスが付与されると線が回転して×になる*/

	.openbtn.active span:nth-of-type(1) {
		top: 23px;
		left: 21px;
		transform: translateY(6px) rotate(-135deg);
		width: 30%;
	}

	.openbtn.active span:nth-of-type(2) {
		opacity: 0;
	}

	.openbtn.active span:nth-of-type(3){
		top: 35px;
		left: 21px;
		transform: translateY(-6px) rotate(135deg);
		width: 30%;
	}
}
@media screen and (max-width: 560px) {
	nav{
		padding: 100px 40px 40px 40px;
	}
	.openbtn{
		right: 10px;
		top: 10px;
		width: 55px;
		height: 55px;
	}
		/*ボタン内側*/
	.openbtn span{
		left: 16px;
	  }


	.openbtn span:nth-of-type(1) {
		top:19px;	
	}

	.openbtn span:nth-of-type(2) {
		top:27px;
	}

	.openbtn span:nth-of-type(3) {
		top:35px;
	}

	/*activeクラスが付与されると線が回転して×になる*/

	.openbtn.active span:nth-of-type(1) {
		top: 20px;
		left: 19px;
	}
	.openbtn.active span:nth-of-type(3){
		top: 32px;
		left: 19px;
	}
}