@charset "UTF-8";
@import url("root.css");


/***************************************
---------------- MENU----------------
***************************************/
#menu-btn-check,
.menu-btn {
	display: none;
}


ul#page_link {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 50px;
	max-width: var(--container-width);
	margin: auto;
	list-style: none;
	justify-content: center;
	li a {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: inherit;
		align-items: center;
		justify-content: center;
		transition: 0s;
		color: #fff;
		font-size: clamp(18px, 2vw, 24px);
	}
	> li {
		width: 16.6666666667%;
		height: inherit;
		display: flex;
		align-items: center;
		position: relative;
	}
	> li.has-child {
		position: relative;
		.menu-dropdown {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			z-index: 1;
			li {
				width: 100%;
				a {
					padding: 10px 0;
					display: block;
					width: 100%;
					text-align: center;
					color: #fff;
					font-size: 1.6rem;
					background: var(--base-color01);
				}
			}
		}
	}
	> li.has-child > a {
		position: relative;
		padding-right: 0.5rem;
		.menu-dropdown-toggle {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: auto;
			right: 0.5rem;
			margin: auto;
			width: 30px;
			height: 30px;
			transition: 0.3s;
			transform: rotate(0deg);
			padding: 0 !important;
			i { font-size: 1rem;}
		}
	}
}
body:not(.home) .navigation ul#page_link {
	padding-top: 10px;
}


	ul#page_link > li.has-child > a {
		padding-right: 15px;
		position: relative;
		z-index: 1;
	}
	ul#page_link > li.has-child .menu-dropdown {
		display: none;
		position: static;
		top: unset;
		left: unset;
		width: 100%;
		z-index: unset;
	}
	html.touch-enabled ul#page_link li.has-child > a.is-open .menu-dropdown-toggle {
		transform: rotate(180deg);
	}

	.menu-btn {
		position: fixed;
		top: 0;
		right: 0;
		display: flex;
		width: 80px;
		aspect-ratio: 1/1;
		justify-content: center;
		align-items: center;
		z-index: 90;
		color: #fff;
		cursor: pointer;
		background: var(--base-color01);
	}
@media (max-width: 767px) {
	.menu-btn { width:60px; }
} 


	.menu-btn span.bar,
	.menu-btn span.bar:before,
	.menu-btn span.bar:after {
		content: "";
		display: block;
		height: 3px;
		width: 34px;
		border-radius: 3px;
		background-color: #fff;
		position: absolute;
	}

	.menu-btn span.bar:before { top: -10px; }
	.menu-btn span.bar { top: 50%; }
	.menu-btn span.bar:after { top: 10px; }

	#menu-btn-check:checked ~ .menu-btn span.bar {
		background-color: transparent;
	}

	#menu-btn-check:checked ~ .menu-btn span.bar::before {
		top: 0;
		transform: rotate(45deg);
	}

	#menu-btn-check:checked ~ .menu-btn span.bar::after {
		top: 0;
		transform: rotate(-45deg);
	}

	.navigation {
		width: min(100%,500px);
		height: calc(100% - 80px);
		position: fixed;
		top: 80px;
		right: -500px;
		z-index: 80;
		background: var(--base-color01);
		transition: all 0.5s;
	}
@media (max-width: 767px) {
	.navigation {
		top: 60px;
		height: calc(100% - 60px);
	}
} 



	.navigation ul#page_link {
		padding: 10px 25px 0;
		height: auto;
	}

	.navigation ul#page_link > li {
		width: 100%;
		margin: 0;
		border-bottom: solid 1px #fff;
		list-style: none;
	}

	.navigation ul#page_link li:not(:last-of-type)::after {
		content: none;
	}

	.navigation ul#page_link > li a {
		padding: 1em 0;
	}

	.navigation ul#page_link > li a span {
		padding: 0 0 5px;
	}

	.navigation ul#page_link > li:before,
	.navigation ul#page_link > li:last-of-type:after {
		content: none;
	}

	.navigation ul#page_link > li a:hover,
	.navigation ul#page_link > li span:hover {
		background: none;
		opacity: 0.8;
	}

	#menu-btn-check:checked ~ .navigation {
		right: 0; /*メニューを画面内へ*/
	}

	.navigation li.has-child .menu-dropdown {
		position: static;
		background: none;
		width: calc(100% - 2px);
		opacity: 1;
		transition: none;
		display: none;
	}

	.navigation li.has-child {
		flex-wrap: wrap;
	}

	.phone_num.sp-only {
		width: 90%;
		text-align: center;
		max-height: unset;
		margin: 30px auto;
		display: block;
	}

	.phone_num.sp-only a {
		color: #fff;
	}

	.phone_num p {
		font-size: 1.6rem;
		background: none;
		margin-top: 20px;
	}
	.home .home_nav {
		display: none;
	}
	.sp_nav {
		display: flex;
		width: 120px;
		margin-right: 60px;
	}


/*
アイコン追加
*/

ul#page_link {
	> li > a {
		transition: .5s;
	}
	> li > a:hover {
		color: #fff;
		background: var(--base-color01);
	}
	.nav_home a::before {
		content: "";
		display: block;
		width: auto;
		height: 1.75em;
		aspect-ratio: 1/1;
		margin-right: .5em;
		background: url(../img/nav01.svg) no-repeat center center/contain;
	}
	.nav_news a::before {
		content: "";
		display: block;
		width: auto;
		height: 1.75em;
		aspect-ratio: 1/1;
		margin-right: .5em;
		background: url(../img/nav02.svg) no-repeat center center/contain;
	}
	.nav_work > a::before {
		content: "";
		display: block;
		width: auto;
		height: 1.75em;
		aspect-ratio: 1/1;
		margin-right: .5em;
		background: url(../img/nav03.svg) no-repeat center center/contain;
	}
	.nav_about a::before {
		content: "";
		display: block;
		width: auto;
		height: 1.75em;
		aspect-ratio: 1/1;
		margin-right: .5em;
		background: url(../img/nav04.svg) no-repeat center center/contain;
	}
	.nav_contact a::before {
		content: "";
		display: block;
		width: auto;
		height: 1.75em;
		aspect-ratio: 1/1;
		margin-right: .5em;
		background: url(../img/nav05.svg) no-repeat center center/contain;
	}
}
