@charset "utf-8";

/*hamburgerメニュー*/
@media screen and (max-width: 768px) {
	#hamburger{
		transition:all 1s;
		width:50px;
		height:50px;
		border-radius:50px;
		background:#fac070;
		position:fixed;
		right:5px;
		top:5px;
		z-index:9999;
	}
	#hamburger span{
		width:30px;
		height:3px;
		border-radius:3px;
		background:#fff;
		position:absolute;
	}
	#hamburger span:nth-child(1){
		transition:all 0.4s;
		right:10px;
		top:15px;
	}
	#hamburger span:nth-child(2){
		transition:all 0.4s;
		right:10px;
		top:23px;
	}
	#hamburger span:nth-child(3){
		transition:all 0.4s;
		right:10px;
		top:31px;
	}
	.open span:nth-child(1){
		top:17px;
		transform:translateY(8px) rotate(45deg);
	}
	.open span:nth-child(3){
		transform:translateY(-8px) rotate(-45deg);
	}
	.open span:nth-child(2){
		top:17px;
		opacity:0;
	}

	nav {
		transition:all 0.8s;
		width:100%;
		height:100%;
		position:fixed;
		right:-100%;
		top:0;
		opacity:0.9;
		background:#efb194;
	}
	nav ul{
		display:none;
	}
	.openburger{
		z-index:9999;
	}
	.opennav{
		z-index:999;
		transform:translateX(-100%);
	}
	.opennav ul{
		display:block;
	}
	.opennav ul li{
		line-height:1em;
		padding:20px;
		font-size:14px;
		font-weight:bold;
		color:#000;
		letter-spacing:0.05em;
		width:100vw;
		background: linear-gradient(#efb194, #f8c5ac);
	}
	.opennav ul li:hover{
		background:white;
	}
	.eigo{
		font-size:9px;
	}

}


@media screen and (max-width: 390px) {
	#hamburger{
		transition:all 1s;
		width:50px;
		height:50px;
		background:#efb194;
		position:fixed;
		right:5px;
		top:5px;
		z-index:9999;
	}
	#hamburger span{
		width:30px;
		height:2px;
		background:#fff;
		position:absolute;
	}
	#hamburger span:nth-child(1){
		transition:all 0.2s;
		right:10px;
		top:15px;
	}
	#hamburger span:nth-child(2){
		right:10px;
		top:23px;
	}
	#hamburger span:nth-child(3){
		trandition:all 0.2s;
		right:10px;
		top:31px;
	}


	.open span:nth-child(1){
		top:17px;
		transform:translateY(8px) rotate(45deg);
	}
	.open span:nth-child(3){
		transform:translateY(-8px) rotate(-45deg);
	}
	.open span:nth-child(2){
		top:17px;
		opacity:0;
	}

	nav {
		transition:all 0.8s;
		width:100%;
		height:100%;
		position:fixed;
		right:-100%;
		top:0;
		background:#faa;
		opacity:0.8;
	}
	nav ul{
		display:none;
	}
	.openburger{
		z-index:9999;
	}
	.opennav{
		transform:translateX(-100%);
	}
	.opennav ul{
		display:block
	}
	.opennav ul li{
		line-height:1em;
		padding:20px;
		font-size:14px;
		font-weight:bold;
		color:#000;
		letter-spacing:0.05em;
		width:100vw;
		background: linear-gradient(#efb194, #f8c5ac);
	}
	.opennav ul li:hover{
		background:white;
	}
	.eigo{
		font-size:9px;
	}
}

/*ここまでhamburgerメニュー*/