@charset "UTF-8";
/*-----------------------*/

/* ナビゲーション */

/*-----------------------*/
/* コンテナ */
#nav__wrapper,
#nav__inner{
	height: 100%;
	display: flex;
	align-items: center;
}
/* ナビアイテム */
#header .nav__item{
	height: 100%;
}
#header .nav__item > a{
	height: 100%;
	padding: 0 2.3em;

	font-size: calc(14rem/16);
	font-family: var(--alphabet);
	letter-spacing: 0.2em;
	color: var(--color-white);

	display: flex;
	align-items: center;
	justify-content: center;

	transition: opacity .2s var(--linear);
}
#header .nav__item:last-of-type{
	background-color: var(--color-white);
	height: 100%;
}
#header .nav__item:last-of-type > a{
	height: 100%;
	padding: 0 4em;
	font-size: calc(14rem/16);
	font-family: var(--alphabet);
	letter-spacing: 0.2em;
	color: var(--color-bk);
	background-color: var(--color-white);
	border: solid 1px var(--color-white);

	display: flex;
	align-items: center;
	justify-content: center;

	transition: background-color .2s var(--linear),
	color .2s var(--linear),
	opacity .2s var(--linear);
}
/* 区切り線 */
#header .nav__item{
	position: relative;
}
#header .nav__item::before{
	content: "";
	display: block;
	width: 1px;
	height: 40%;
	background-color: var(--color-main-pale);

	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
#header .nav__item:last-of-type:before{
	content: none;
}
/* hover設定 */
@media(any-hover:hover){
	.nav__item > a:hover,
	.nav__item > a:focus{
		opacity: 0.7;
	}
	#header .nav__item:last-of-type > a:hover,
	#header .nav__item:last-of-type > a:focus{
		opacity: 1;
		color: var(--color-white);
		background-color: var(--color-main);
	}
}
/* current */
body#index #nav__inner li.js-current-target--index > a,
body.js-current-service #nav__inner li.js-current-target--service > a,
body.js-current-about #nav__inner li.js-current-target--about > a,
body.js-current-company #nav__inner li.js-current-target--company > a
{
	opacity: 0.7;
}
body.js-current-contact #nav__inner li.js-current-target--contact > a
{
	opacity: 1;
	color: var(--color-white);
	background-color: var(--color-main);
}
/* -------------------- */
/* バーガーボタン */
/*----------------------*/
/* オープンボタン */
#nav-open-button{
	width: 64px;
	height: auto;
	align-self: stretch;
	display: none;

	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: 7px 0;

	transform-origin: center center;
}
#nav-open-button .nav-open-button__line{
	display: block;
	width: 48%;
	height: 2px;
	background-color: var(--color-white);
	transition: transform .2s var(--easeOutSine);
}
/* クローズボタン */
#nav-close-button{
	width: 64px;
	height: 64px;
	display: none;

	justify-content: center;
	flex-direction: column;
	align-items: center;

	transition: opacity .4s var(--easeOutSine);
	transform-origin: center center;
}
.nav-close-button__inner{
	width: 100%;
	height: 100%;
	background-color:  transparent;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	position: relative;
}
.nav-close-button__line{
	width: 40%;
	height: 2px;
	border-radius: 1px;
	background-color: var(--color-white);

	position: absolute;
	top: 50%;
	left: 50%;
}
.nav-close-button__line.-top{
	transform: translate(-50%,-50%);
}
.nav-close-button__line.-bottom{
	transform: translate(-50%,-50%);
}



/*-------------------------------*/

/* Tablet 959px */

/*------------------------------*/
@media(max-width: 959px){
	/* -------------------- */
	/* バーガーボタン */
	#nav-open-button,
	#nav-close-button{
		display: flex;
	}
	#nav-close-button{
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
	}
	/* ナビゲーション コンテナ */
	/* ナビアイテム */
	#nav__wrapper,
	#nav__inner{
		display: none;
		padding: 104px 0;
		width: calc(320rem / 16);
		max-width: calc(100% - 14vw);
		height: 100%;
		min-height: 100vh;

		position: fixed;
		top: 0;
		right: 0;
		z-index: 1;
	}
	#nav__inner{
		overflow: auto;
		background-color: var(--color-main);
	}
	#nav__inner .nav__item{
		width: 100%;
		height: auto;
	}
	#nav__inner .nav__item > a{
		width: 100%;
		padding: calc(24rem/16) min(4vw, calc(64rem/16));
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	#nav__inner .nav__item:last-of-type{
		width: calc(100% - calc(min(4vw, calc(64rem/16))*2));
		height: auto;
		margin: 0 auto;
		margin-top: calc(24rem/16);
	}
	#nav__inner .nav__item:last-of-type > a{
		width: 100%;
		padding: 1.5em min(4vw, calc(64rem/16));

		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* 区切り線 削除 */
	#header .nav__item::before{
		content: none;
	}
	/* カバー */
	#nav__wrapper.is-open #nav__cover{
		width: 100%;
		height: 100vh;
		min-height: 100vh;
		min-height: var(--height-100vh);
		background-color: rgba(0, 0, 0, .2);
		backdrop-filter: blur(6px) saturate(110%);

		position: fixed;
		top: 0;
		left: 0;
		z-index: -9;
		cursor: pointer;
	}
	/* オープン/クローズアニメーション */
	/*------------------*/
	/* オープン */
	/*------------------*/
	body.nav-open{
		overflow: hidden;
	}
	#nav__wrapper.is-open,
	#nav__wrapper.is-open #nav__inner{
		display: block;
	}
	/* ボタン アニメーション */
	body.nav-open #nav-open-button .nav-line-icon.-top{
		transform: rotate(-45deg);
	}
	body.nav-open #nav-open-button .nav-line-icon.-bottom{
		transform: rotate(45deg);
	}
	body.nav-open #nav-open-button .nav-line-icon.-center{
		opacity: 0;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav-close-button__line.-top{
		animation-name: nav-close-icon-top;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav-close-button__line.-bottom{
		animation-name: nav-close-icon-bottom;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	@keyframes nav-close-icon-top {
		from{
			transform: translate(-50%,-50%) rotate(0);
			opacity: 0;
		}
		to{
			transform: translate(-50%,-50%) rotate(-45deg);
			opacity: 1;
		}
	}
	@keyframes nav-close-icon-bottom {
		from{
			transform: translate(-50%,-50%) rotate(0);
			opacity: 0;
		}
		to{
			transform: translate(-50%,-50%) rotate(45deg);
			opacity: 1;
		}
	}
	/* ナビ アニメーション */
	#nav__wrapper.is-open[aria-hidden="false"] #nav__inner{
		animation-name: navOpen;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	@keyframes navOpen{
		from{
			opacity: 0;
		}
		to{
			opacity: 1;
		}
	}
	#nav__wrapper.is-open[aria-hidden="false"] #nav__cover{
		animation-name: coverOpen;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	@keyframes coverOpen{
		from{
			background-color: rgba(0, 0, 0, 0);
			backdrop-filter: blur(0px) saturate(100%);
		}
		to{
			background-color: rgba(0, 0, 0, .2);
			backdrop-filter: blur(6px) saturate(110%);
		}
	}
	/* ナビゲーションリストのアニメーション */
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item{
		animation-name: navItemSlide;
		animation-duration: .6s;
		animation-delay: .4s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: both;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item:nth-child(2){
		animation-delay: .45s;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item:nth-child(3){
		animation-delay: .5s;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item:nth-child(4){
		animation-delay: .55s;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item:nth-child(5){
		animation-delay: .6s;
	}
	@keyframes navItemSlide{
		from{
			opacity: 0;
			transform: translateY(10px);
		}
		to{
			opacity: 1;
			transform: translateY(0);
		}
	}
	/*------------------*/
	/* クローズ */
	/*------------------*/
	/* ボタン アニメーション */
	#nav__wrapper[aria-hidden="true"] .nav-close-button__line.-top{
		animation-name: nav-close-icon-top-is-close;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	#nav__wrapper[aria-hidden="true"] .nav-close-button__line.-bottom{
		animation-name: nav-close-icon-bottom-is-close;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	#nav__wrapper[aria-hidden="true"] #nav-close-button{
		opacity: 0;
	}
	@keyframes nav-close-icon-top-is-close {
		from{
			transform: translate(-50%,-50%) rotate(-45deg);
		}
		to{
			transform: translate(-50%,-50%) rotate(0);
			opacity: 0;
		}
	}
	@keyframes nav-close-icon-bottom-is-close {
		from{
			transform: translate(-50%,-50%) rotate(45deg);
		}
		to{
			transform: translate(-50%,-50%) rotate(0);
			opacity: 0;
		}
	}
	/* ナビ アニメーション */
	#nav__wrapper[aria-hidden="true"] #nav__inner{
		animation-name: navClose;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	@keyframes navClose{
		from{
			opacity: 1;
		}
		to{
			opacity: 0;
		}
	}
	#nav__wrapper[aria-hidden="true"] #nav__cover{
		animation-name: coverClose;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	@keyframes coverClose{
		from{
			background-color: rgba(0, 0, 0, .2);
			backdrop-filter: blur(6px) saturate(110%);
		}
		to{
			background-color: rgba(0, 0, 0, 0);
			backdrop-filter: blur(0px) saturate(100%);
		}
	}
}



/*-------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){
	/* バーガーボタン */
	#nav-open-button{
		width: 48px;
		gap: 5px 0;
	}
	#nav-close-button{
		width: 48px;
		height: 48px;
	}
	/* ナビゲーション コンテナ */
	/* ナビアイテム */
	#nav__wrapper,
	#nav__inner{
		padding: 80px 0;
	}
}