/* CSS Document */

@charset "UTF-8";

/*チェックボックス等は非表示に*/
.nav-unshown {
	display: none;
}

/*----------------------------------------------------------------------
オーバーレイ
-----------------------------------------------------------------------*/
#nav-close {
	display: none; /*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0; /*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #312828;
	opacity: 0;
	transition: .4s ease-in-out;
}

/*----------------------------------------------------------------------
ナビゲーション
-----------------------------------------------------------------------*/
#nav-content {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000; /*最前面に*/
	height: 100%;
	padding: 3vw 6vw 3vw 3vw;
	background-color: #FFF;
	transition: .4s ease-in-out; /*滑らかに表示*/
	transform: translateX(105%); /*左に隠しておく*/
	overflow: auto;
	direction: rtl;
}

#nav-content ul {
	direction: ltr;
}

#nav-content ul li {
	border-bottom: 1px solid #E4E4E4;
	font-size: 1rem;
	line-height: 1.5em;
	color: var(--primary-text-color);
	letter-spacing: 0.03em;
}
#nav-content ul li.button, #nav-content ul li.open {
	padding: 12px 0px;
	cursor: pointer;
}
#nav-content ul li.button::after, #nav-content ul li.open.active::after {
	content: "\f107";
	margin-left: 0.75em;
	font-family: "Line Awesome Free";
	font-weight: 900;
	color: #9B9B9B;
	text-shadow: 1px 0px;
}
#nav-content ul li.open::after, #nav-content ul li.button.active::after {
	content: "\f106";
	margin-left: 0.75em;
	font-family: "Line Awesome Free";
	font-weight: 900;
	color: #9B9B9B;
	text-shadow: 1px 0px;
}

#nav-content ol li {
	list-style: none;
}
#nav-content ul li > ol li:last-of-type {
	border-bottom: 1px solid #E4E4E4;
}

#nav-content ul li a {
	display: block;
	padding: 12px 0px;
	font-weight: 400;
	text-decoration: none;
}

#nav-content ol li a, #nav-content ol li.button {
	padding-left: 1.2em;
}

#nav-content ol li ol li a {
	padding-left: 2.4em;
}

#nav-content a:visited {
	color: var(--primary-text-color);
}

/*----------------------------------------------------------------------
メニューボタン
-----------------------------------------------------------------------*/
#nav-open {
	display: inline-block;
	position: fixed;
	top: 30px;
	right: 30px;
	padding: 16px 6px;
	z-index: 1001;
	cursor: pointer;
	user-select: none;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span {
	height: 2px;
	width: 35px;
	background-color: transparent;
	position: relative;
	display: block;
	transition: all .2s ease-in-out;
}
#nav-open span:before {
	top: -8px;
	visibility: visible;
}
#nav-open span:after {
	top: 8px;
}
#nav-open span:before, #nav-open span:after {
	height: 2px;
	width: 43px;
	background-color: #576174;
	position: absolute;
	content: "";
	transition: all .2s ease-in-out;
}

#nav-open:hover span:before, #nav-open:hover span:after {
	background: var(--primary-text-color);
}

@media screen and (max-width: 680px) {
	#nav-open {
		top: -1px;
		right: 14px;
		transform: scale(0.9) translateY(50%);
	}
}

/*----------------------------------------------------------------------
チェックが入ったら展開
-----------------------------------------------------------------------*/
#nav-input:checked ~ #nav-close {
	display: block; /*カバーを表示*/
	opacity: .4;
}

#nav-input:checked ~ #nav-open:hover span, #nav-input:checked ~ #nav-open span {
	background: transparent;
}
#nav-input:checked ~ #nav-open span:before {
	width: 35px;
	transform: rotate(45deg) translate(7px, 4px);
}
#nav-input:checked ~ #nav-open span:after {
	width: 35px;
	transform: rotate(-45deg) translate(7px, -4px);
}

#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(-0%);
	transform: translateX(-0%); /*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0,0,0,.23);
}

@media screen and (max-width: 1000px) {
	#nav-input:checked ~ #nav-open {
		z-index: 4000;
	}
}

/*----------------------------------------------------------------------
オーバーレイ
-----------------------------------------------------------------------*/
@media screen and (min-width: 900px) {
	#nav-content {
		width: 600px;
	}
}

@media screen and (max-width: 736px) {
	#nav-content ul small {
		display: block;
		font-size: 0.875rem;
		font-weight: 400;
	}
}

@media screen and (max-width: 680px) {
	#nav-content {
		width: 82%;
		margin-top: 66px;
		padding: 30px 20px;
	}
}

/*----------------------------------------------------------------------
2022_0226追加
-----------------------------------------------------------------------*/
#nav-content ul {
	margin-bottom: 120px;
}

/*----------------------------------------------------------------------
2023_0922追加
-----------------------------------------------------------------------*/
#nav-open span {
	height: 5px;
}