/*	===============================================================
	● ヘッダ/フッターCSSファイル
	---------------------------------------------------------------
	Release 2025.04.28                               Powerd by TDR
	=============================================================== */

	/*============================
		ヘッダ/グローバルメニュー
	============================*/
	header
	{
		width: 100%;
		text-align: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		height: 65px;
		box-shadow: 0px 10px 15px rgba(0, 0, 0, .1);
		background: var(--main_color);
	}
	header h1
	{
		width: 100%;
		height: 100%;
		max-width: 800px;
		margin: auto;
		padding: 8px;
		position: relative;
		z-index: 100;
	}
	header h1 img
	{
		height: 100%;
		object-fit: contain;
	}

	nav 
	{
		display: block;
		position: fixed;
		top: 0;
		left: -300px;
		bottom: 0;
		width: 300px;
		background: var(--main_color);
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transition: all .5s;
		z-index: 101;
		opacity: 0;
	}
	.open nav 
	{
		left: 0;
		opacity: 1;
	}
	nav .inner 
	{
		padding: 25px;
	}
	nav .inner ul 
	{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	nav .inner ul li 
	{
		position: relative;
		margin: 0;
		border-bottom: 1px solid #fff;
	}
	nav .inner ul li a 
	{
		display: block;
		color: #fff;
		font-size: 14px;
		padding: 1em;
		text-decoration: none;
		transition-duration: 0.2s;
	}
	nav .inner ul li a:hover 
	{
		background: #fff;
		color:var(--main_color);
	}
	@media screen and (max-width: 767px) 
	{
		header
		{
			height: 50px;
		}
		nav 
		{
			left: -220px;
			width: 220px;
		}
	}
	/*============
	.toggle_btn
	=============*/
	.btn_g_navi 
	{
		display: block;
		position: fixed;
		top: 20px;
		left: 30px;
		width: 30px;
		height: 30px;
		transition: all .5s;
		cursor: pointer;
		z-index: 101;
	}
	.open .btn_g_navi 
	{
		left: 330px;
	}
	.btn_g_navi span 
	{
		display: block;
		position: absolute;
		left: 0;
		width: 50px;
		height: 2px;
		background-color: #fff;
		border-radius: 4px;
		transition: all .5s;
	}
	.btn_g_navi span:nth-child(1) 
	{
		top: 3px;
	}
	.btn_g_navi span:nth-child(2) 
	{
		top: 14px;
		width: 40px;
	}
	.btn_g_navi span:nth-child(3) 
	{
		bottom: 3px;
		width: 30px;
	}
	.open .btn_g_navi span 
	{
		background-color: #fff;
	}
	.open .btn_g_navi 
	{
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	.open .btn_g_navi span:nth-child(1), .open .btn_g_navi span:nth-child(3) 
	{
		width: 16px;
	}
	.open .btn_g_navi span:nth-child(1) 
	{
		-webkit-transform: translate(-1px,4px) rotate(-45deg);
		transform: translate(-1px,4px) rotate(-45deg);
	}
	.open .btn_g_navi span:nth-child(3) 
	{
		-webkit-transform: translate(-1px,-4px) rotate(45deg);
		transform: translate(-1px,-4px) rotate(45deg);
	}

	@media screen and (max-width: 768px) 
	{
		.btn_g_navi 
		{
			display: block;
			position: fixed;
			top: 10px;
			left: 10px;
			width: 30px;
			height: 30px;
			transition: all .5s;
			cursor: pointer;
			z-index: 101;
		}
		.btn_g_navi span 
		{
			width: 40px;
		}
		.btn_g_navi span:nth-child(2) 
		{
			width: 30px;
		}
		.btn_g_navi span:nth-child(3) 
		{
			width: 20px;
		}
		.open .btn_g_navi 
		{
			left: 250px;
		}
	}
	/*============
	#mask
	=============*/
	#mask {
		display: none;
		transition: all .5s;
	}
	.open #mask {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: .8;
		z-index: 100;
		cursor: pointer;
	}




	footer
	{
		background: #c2a560;
	}
	footer .container
	{
		margin: auto;
		padding:35px 30px 20px;
	}
	.ft_navi
	{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap:10px 40px;
	}
	.ft_navi a
	{
		color:#fff;
		text-decoration: underline;
		font-size: 1.7rem;
	}

	footer > p
	{
		text-align: center;
		color: #fff;
		font-size: 1.5rem;
		padding: 0px 0 10px 0;
	}

	@media screen and (max-width: 768px) 
	{
		footer .container
		{
			padding-bottom:30px;
		}
		footer > p
		{
			font-size: 1.2rem;
		}
		.ft_navi a
		{
			font-size: 1.4rem;
		}
	}