@charset "utf-8";

/*~~*/

/*
COMMON
*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media all and (max-width: 7680px) {
	/*
    */
	header #navi {
		transition: all 0.6s;
		overflow-y: auto;
		padding-top: 50px;
		width: 100%;
		/*height: 100vh;*/
		height: auto;
		z-index: 200;
		top: 0;
		right: -100%;
		background-color: rgba(240, 240, 231, 0.95);
		position: fixed;
	}

	header .nav_btn {
		width: 44px;
		height: 44px;
		z-index: 300;
		top: 55px;
		right: 7px;
		cursor: pointer;
		position: absolute;
	}

	header .top_nav_btn {
		width: 44px;
		height: 40px;
		z-index: 300;
		top: 10px;
		right: 15px;
		cursor: pointer;
		position: absolute;
		/*background-color: rgba(243, 143, 44, 0.8);*/
		/*background-color: rgba(0, 0, 0, 0.7);*/
		/*border-radius: 5px;*/
	}

	.hamburger_line {
		transition: all 0.6s;
		width: 25px;
		height: 2px;
		left: 10px;
		background-color: #000;
		position: absolute;
	}

	.hamburger_line1 {
		top: 10px;
	}
	.hamburger_line2 {
		top: 18px;
	}
	.hamburger_line3 {
		top: 27px;
	}

	.nav_bg {
		opacity: 0;
		transition: all 0.6s;
		width: 100vw;
		/*height: 100vh;*/
		z-index: 100;
		top: 0;
		left: 0;
		visibility: hidden;
		background-color: #000;
		cursor: pointer;
		position: fixed;
	}

	/*アイコンのスペース*/
	#nav-open {
		display: inline-block;
		width: 30px;
		height: 22px;
		vertical-align: middle;
	}

	/* 表示された時用のCSS */
	.nav_open header #navi {
		right: 0;
	}

	.nav_open .nav_bg {
		opacity: 0.8;
		visibility: visible;
	}

	.nav_open .hamburger_line1 {
		transform: rotate(45deg);
		top: 20px;
	}

	.nav_open .hamburger_line2 {
		width: 0;
		left: 50%;
	}

	.nav_open .hamburger_line3 {
		transform: rotate(-45deg);
		top: 20px;
	}
	.wrapper {
		width: 100%;
		padding: 10px;
	}

	#nav-drawer {
		position: relative;
	}

	nav ul {
		display: flex;
		flex-direction: column;
	}

	nav li {
		border-bottom: 1px solid #000;
		padding: 10px;
	}

	nav li:first-child {
		border-top: 2px solid #000;
	}
	nav li:nth-of-type(5) {
		border-bottom: 2px solid #000;
	}
	nav li:nth-of-type(11) {
		border-bottom: 2px solid #000;
	}
	/*
    */
}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media all and (max-width: 768px) {
	header #navi {
		height: 100vh;
	}
	header #navi ul {
		margin-top: -100px;
	}

}