@media (max-width: 1024px){


		.nav-open-wrap{
			position:fixed;
			right:5px;
			top:15px;
			z-index: 1002;
		}

		#nav-open {
			position: relative;
			width: 40px;
			height: 30px;
			cursor: pointer;
		}

		/* 線の共通スタイル */
		#nav-open span,
		#nav-open span::before,
		#nav-open span::after {
			position: absolute;
			height: 3px;
			width: 25px;
			border-radius: 3px;
			background: #000;
			display: block;
			content: '';
			transition: all 0.4s ease;
		}

		/* HOMEだけ線の色を変える　*/
		/*.home #nav-open span,
		.home #nav-open span::before,
		.home #nav-open span::after {
			background: #000;
		}*/


		/* 中央の線 */
		#nav-open span {
			top: 10px;
			left: 7px;
		}

		/* 上の線 */
		#nav-open span::before {
			content: '';
			bottom: 8px;
		}

		/* 下の線 */
		#nav-open span::after {
			content: '';
			bottom: -8px;
		}

		/* メニューが開いた時のスタイル */
		#nav-open.active span {
			background: transparent; /* 中央線を消す */
		}

		#nav-open.active span::before {
			transform: rotate(45deg);
			bottom: 0;
		}

		#nav-open.active span::after {
			transform: rotate(-45deg);
			bottom: 0;
		}


		/* ナビ　本体　*/
		#nav-content {
			position: fixed;
			top: 0;
			right: 0;
			width: 80%;
			max-width: 300px;
			height: 100%;
			background:#EEF5F5;
			color: #000;
			z-index: 1001;
			transform: translateX(100%);
			transition: transform 0.4s ease;
			box-shadow: -4px 0 10px rgba(0,0,0,0.2);
			padding: 2em 1em;
		}

		/*　ナビのデザイン　*/	
		/* color */
		#nav-content ul.sp-nav > li > a {
			color: #333;
		}
		#nav-content ul.sp-nav ul.sub-menu li a {
			color: #333;
		}
		#nav-content ul.sp-nav ul.sub-menu li a:hover {
			color: #333;
		}	

		/* 表示時にスライドイン */
		#nav-content.open {
			transform: translateX(0);
		}

		#nav-content ul.sp-nav {
			padding: 2em 1em;
		}

		#nav-content ul.sp-nav {
			list-style: none;
			padding: 0;
			margin: 0;
		}



		#nav-content ul.sp-nav > li {
			display: block;
			border-bottom: 1px solid #555;
			margin-bottom: 0.5em;
		}

		#nav-content ul.sp-nav > li > a {
			display: block;
			text-decoration: none;
			font-size: 1.1rem;
			padding: 0.8em 0;
			transition: background 0.3s ease;
		}


		#nav-content ul.sp-nav > li > a:hover {
			background: rgba(255, 255, 255, 0.1);
			padding-left: 0.5em;
		}

		/* サブメニュー（ドロップダウン） */
		#nav-content ul.sp-nav ul.sub-menu {
			padding-left: 1em;
			margin-top: 0.5em;
			background: rgba(255, 255, 255, 0.05);
			border-radius: 6px;
		}

		#nav-content ul.sp-nav ul.sub-menu li a {
			font-size: 0.95rem;
			padding: 0.5em 0;
			display: block;
			transition: color 0.3s ease;
		}

		#nav-content ul.sp-nav ul.sub-menu li a:hover {}



		/*　背景オーバーレイ　*/
		#nav-overlay {
			position: fixed;
			top: 0; left: 0;
			width: 100%; height: 100%;
			background: rgba(0, 0, 0, 0.6);
			z-index: 1000;
			display: none;
		}
		#nav-overlay.active {
			display: block;
		}

	
}