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

	/*============================
		ヘッダ/グローバルメニュー
	============================*/
	header
	{
		z-index: 99;
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 80px;
		background: var(--main_color);
		padding: 0px 30px 0;
		box-shadow: 0px 10px 15px rgba(0, 0, 0, .1);
	}
	header .container
	{
		margin: 0 auto 0px;
		padding:0px 0px;
		max-width: 1200px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap:50px;
	}
	header .container > a
	{
		text-decoration: none;
		max-width:450px;
		width: 60%;
		height: 100%;
		flex: 0 1 auto;
		border: none;
		display: flex;
		align-items: center;
	}
	header h1.logo
	{
		width:100%;
		height: auto;
		display: flex;
		gap:5px;
		align-items: center;
		font-size:2rem;
		font-weight: 700;
		padding:0;
		margin:0;
	}
	header h1.logo p
	{
		color:#fff;
		padding:0;
		margin:0;
	}

	@media screen and (max-width: 768px)
	{
		header
		{
			height: 50px;
		}
		header .container > a
		{
			width:fit-content;
			height:auto;
			margin:auto;
		}
		header h1.logo
		{
			max-width:calc(100% - 60px );
			margin:0 auto;
		}
		header h1.logo p
		{
			line-height: 1;
		}
	}
	.btn_g_navi
	{
		display: none;
	}
	header .g_navi
	{
		width: calc(100% - 40%);
	}
	header .g_navi .global
	{
		width: 100%;
		flex: 0 1 auto;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: wrap;
		gap:3px 20px;
		line-height: 1.3;
	}
	header .g_navi .global li > a
	{
		text-decoration: none;
		color: #fff;
		font-size: 1.5rem;
		font-weight: 400;
		white-space: nowrap;
	}
	header .g_navi .global li > a:hover
	{
		opacity: 0.6;
	}
	header .g_navi .global li > a.active
	{
		color: var(--main_color3);
	}

	@media screen and (max-width: 768px)
	{
		.btn_g_navi
		{
			display: block;
			position: fixed;
			font-weight: bold;
			font-size: 1rem;
			z-index: 2000;
			width: 50px;
			height: 50px;
			top: 0px;
			left: 0px;
			transition: .5s;
			margin: 0 0 0 auto;
			cursor: pointer;
			transition: .3s ease-out;
			background: var(--main_color);
		}
		.btn_g_navi p
		{
			margin: 0 auto;
			cursor: pointer;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 20px;
    		height: 15px;
		}
		.btn_g_navi p span
		{
			background: #fff;
			height: 2px;
			width: 100%;
			left: 0;
			position: absolute;
		}
		.btn_g_navi p span:first-child
		{
			top: 0;
			transition: .3s;
		}
		.btn_g_navi p span:last-child
		{
			bottom: 0;
			transition: .3s;
		}
		
		.btn_g_navi.active
		{
			background: none;
		}
		.btn_g_navi.active p span:first-child
		{
			transform: translate(-50%, -50%) rotate(45deg);
			top: 50%;
			left: 50%;
		}
		.btn_g_navi.active p span:last-child
		{
			transform: translate(-50%, -50%) rotate(-45deg);
			top: 50%;
			left: 50%;
		}

		header .g_navi
		{
			width: 100vw;
			position: fixed;
			top: 50px;
			left: -120%;
			height: calc(100vh - 50px);
			min-width: 50vw;
			width: 100%;
			transition: all .5s;
			overflow: auto;
			-webkit-overflow-scrolling: touch;
			padding: 30px 8% 50px 8%;
			z-index: 1000;
			transition: .3s;
			border-top:1px solid var(--main_color2);
			background-image: url(../images/common/ft_logo.svg);
			background-color: var(--main_color2);
			background-position: right bottom;
			background-size: 500px ;
			background-repeat: no-repeat;
		}
		header .g_navi .global
		{
			margin: 0 auto;
			position: relative;
			margin: 0 auto 40px;
			text-align: center;
		}
		header .g_navi .global li
		{
			width: 100%;
			border: none;
			padding: 0;
			background: transparent;
			margin-bottom: 15px;
			position: relative;
			z-index: 9;
			flex: 0 1 auto;
		}
		header .g_navi .global li::before
		{
			content: "";
			width: 1.3em;
			height: 1.3em;
			position: absolute;
			top: 50%;
			left: 0%;
			transform: translate(0, -50%);
			background-color: var(--main_color);
			mask-repeat: no-repeat;
			mask-position: center;
			mask-size: contain;
		}
		header .g_navi .global li a
		{
			font-size: 1.8rem;
			width: 100%;
			height: 100%;
			letter-spacing: .05em;
			display: block;
			padding: 0 3% 0 1.5em;
			line-height: 50px;
			background: none;
			font-weight: bold;
			border: none;
			color: var(--main_color);
			text-align: left;
			border-bottom: solid 1px var(--main_color);
		}
		header .g_navi .global li a::after
		{
			content: "\f0a9";
			font-weight: 900;
			font-family: "Font Awesome 6 Free";
			position: absolute;
			top: 50%;
			right: 2%;
			transform: translate(0,-50%);
			transition: .3s ease-out;
		}

		header .g_navi.active
		{
			left: 0;
		}
	}

	footer
	{
		background-image: url(../images/common/ft_logo.svg);
		background-color: var(--main_color);
		background-position: right bottom;
		background-size: 500px ;
		background-repeat: no-repeat;
	}
	footer .container
	{
		padding-bottom:50px;
	}
	.ft_wrap
	{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap:120px;
	}
	.ft_wrap .ft_info
	{
		width:35%;
		max-width: 300px;
	}
	.ft_wrap .ft_info img
	{
		width:100%;
	}
	.ft_wrap .ft_navi
	{
		margin-top: 30px;
		width:calc(65% - 120px);
		display: flex;
		flex-wrap: wrap;
		gap:50px;
	}
	.ft_wrap .ft_navi ul
	{
		display: flex;
		flex-direction: column;
		gap:10px;
	}
	.ft_wrap .ft_navi a
	{
		color:#fff;
		text-decoration: none;
		font-size: 1.7rem;
	}

	footer > p
	{
		text-align: center;
		background: #fff;
		color: var(--main_color);
		font-size: 1.5rem;
		margin: 0px 0 0 0;
		padding: 5px 0;
	}

	@media screen and (max-width: 768px) 
	{
		footer .container
		{
			padding-bottom:30px;
		}
		.ft_wrap
		{
			display: block;
		}
		.ft_wrap .ft_info
		{
			width:100%;
		}
		.ft_wrap .ft_navi
		{
			margin-top: 0px;
			width:100%;
			display: block;
		}
		.ft_wrap .ft_navi ul
		{
			gap:10px;
		}
		.ft_wrap .ft_navi ul.ft_navi_r
		{
			margin-top:10px;
		}
		.ft_wrap .ft_navi a
		{
			font-size:1em
		}
	}