@charset "UTF-8";

/* CSS Document */

/* ==========================================================
   drawer-nav（ハンバーガーメニュー）
   PC(960px以上)は非表示。960px未満で表示。
   ※960px以上で見た目が変化しないため 1199px の区切りは省略
   ========================================================== */
.drawer-nav {
	display: none;
}

/* ドロワー開閉ボタン（ハンバーガー） */
.drawer-nav__btn {
	position: fixed;
	top: 14px;
	right: 20px;
	z-index: 200;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	background: var(--c-ink);
	cursor: pointer;
}
.drawer-nav__btn-icon,
.drawer-nav__btn-icon::before,
.drawer-nav__btn-icon::after {
	content: "";
	display: block;
	width: 22px;
	height: 1px;
	background: var(--c-paper);
	transition: transform .25s ease, opacity .25s ease;
}
.drawer-nav__btn-icon { position: relative; }
.drawer-nav__btn-icon::before {
	position: absolute;
	left: 0;
	top: -7px;
}
.drawer-nav__btn-icon::after {
	position: absolute;
	left: 0;
	top: 7px;
}

/* ドロワー本体 */
.drawer-nav__content {
	position: fixed;
	inset: 0;
	z-index: 190;
	background: var(--c-ink);
	color: var(--c-paper);
	opacity: 0;
	visibility: hidden;
	transform: translateX(4%);
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
	overflow-y: auto;
}
.drawer-nav__content.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}

.drawer-nav__wrapper {
	padding-top: 96px;
	padding-bottom: 64px;
}

/* 閉じるボタン */
.drawer-nav__close-btn {
	position: absolute;
	top: 14px;
	right: 20px;
	width: 48px;
	height: 48px;
	cursor: pointer;
}
.drawer-nav__close-btn::before,
.drawer-nav__close-btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 1px;
	background: var(--c-paper);
}
.drawer-nav__close-btn::before { transform: translate(-50%, -50%) rotate(45deg); }
.drawer-nav__close-btn::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* リンク一覧 */
.drawer-nav__box {
	display: flex;
	gap: 0;
}
.drawer-nav__column {
	flex: 1;
}
.drawer-nav__item {
	border-bottom: 1px solid rgba(245,242,236,0.14);
}
.drawer-nav__link {
	display: block;
	padding: 22px 4px;
	font-family: var(--f-jp-serif);
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0.06em;
	color: var(--c-paper);
	transition: color .2s ease;
}
.drawer-nav__link:hover { color: var(--c-gold-soft); }
.drawer-nav__link .num {
	font-family: var(--f-mono);
	font-size: 10px;
	color: var(--c-gold);
	margin-right: 12px;
	vertical-align: super;
}

/* アコーディオン（子メニューを持つ項目用・本サイトは未使用だが型として保持） */
.drawer-nav__parent {
	position: relative;
}
.accordion-btn {
	position: absolute;
	top: 14px;
	right: 4px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	cursor: pointer;
}
.accordion-btn-icon,
.accordion-btn-icon::after {
	content: "";
	display: block;
	width: 12px;
	height: 1px;
	background: var(--c-paper);
}
.accordion-btn-icon { position: relative; }
.accordion-btn-icon::after {
	position: absolute;
	left: 0;
	top: 0;
	transform: rotate(90deg);
	transition: opacity .2s ease;
}
.accordion-btn.is-open .accordion-btn-icon::after { opacity: 0; }
.accordion__box {
	overflow: hidden;
}
.drawer-nav__children-item {
	border-top: 1px solid rgba(245,242,236,0.1);
}
.drawer-nav__children-link {
	display: block;
	padding: 14px 4px 14px 24px;
	font-size: 14px;
	color: rgba(245,242,236,0.75);
}
.drawer-nav__children-link:hover { color: var(--c-gold-soft); }


/******************************************************

タブレットの設定 768px~959pxの場合に適用
子メニューは常時展開・段組みは横並び

*******************************************************/
@media screen and (max-width: 959px){
	.drawer-nav { display: block; }

	.drawer-nav__box {
		gap: 40px;
	}
	.drawer-nav__children {
		display: block;
	}
}


/******************************************************

SPの設定 767px以下の場合に適用
子メニューはアコーディオン式・段組みは縦1列

*******************************************************/
@media screen and (max-width: 767px){
	.drawer-nav__box {
		flex-direction: column;
		gap: 0;
	}
	.drawer-nav__children {
		display: none;
	}
	.drawer-nav__children.is-open {
		display: block;
	}
}