@charset "UTF-8";

body {
	font-family: 'Noto Sans JP', sans-serif;
}

:root {
	letter-spacing: 6%;
	line-height: 1.6;
}


/* ヘッダー */
.header {
	width: 100%;
	padding: 15px 5vw 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}

.header::after {
	content: "";
	width: 100%;
	height: 15px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #410905;
}

.header__inner {
	width: 100%;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header__title {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	color: #aeaeae;
	letter-spacing: 0%;
}

.header__tittle--left {
	font-size: 32px;
	font-family: Bellefair;
	line-height: 1;
}

.header__tittle--right {
	font-size: 12px;
	font-family: Bellefair;
	line-height: 1;
	transform: translateY(-30%);
}

.header__hum-btn {
	width: 64px;
	aspect-ratio: 1/1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	background-color: transparent;
}

.header__hum-btn>* {
	width: 45px;
	height: 1px;
	background-color: #aeaeaeff;
}


/* ハンバーガーメニュー */
.hum-menu {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background-color: #00000029;
	position: fixed;
	z-index: 110;
	top: 0;
	left: 0;
	transform: translateY(100%);
	opacity: 0;
	transition: all ease .6s;
}

.hum-menu.active {
	transform: translateY(0);
	opacity: 1;
}

.hum-menu__overlay {
	flex: 1;
	height: 100%;
}

.hum-menu__inner {
	width: 50%;
	height: 100%;
	background-color: #410905;
	padding: 0 min(80px, 10%) 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.hum-menu__inner::before {
	content: "";
	background: url(https://wp.naria.me/wp-content/uploads/2026/06/hum-menu-dec.webp);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 462px;
	height: 575px;
	position: absolute;
	transform: rotate(-15deg);
	opacity: .5;
	bottom: 67px;
	right: -164px;
	filter: grayscale(100%);
}

.hum-menu__btn {
	position: absolute;
	top: 15px;
	right: 5vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 64px;
	aspect-ratio: 1/1;
	background-color: transparent;
	padding: 5px;
	scale: 1;
	transition: all ease-in-out .3s;
}

.hum-menu__btn:hover {
	scale: 1.2;
}

.hum-menu__btn-icon--01,
.hum-menu__btn-icon--02 {
	width: 40px;
	height: 1px;
	background-color: #eae9e9ff;
}

.hum-menu__btn-icon--01 {
	transform: rotate(20deg);
}

.hum-menu__btn-icon--02 {
	transform: rotate(-20deg);
}

.hum-menu__nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
}

.hum-menu__li-top-cover {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hum-menu__top-text {
	color: #fff;
	font-family: 'Bellefair';
	font-size: 36px;
	line-height: 1.5;
	letter-spacing: 0;
	padding: 8px 0;
	display: block;
	position: relative;
	overflow: hidden;
}

.hum-menu__top-text::before {
	content: "";
	width: 100%;
	height: 1px;
	background-color: #fff;
	position: absolute;
	bottom: 10%;
	left: 0;
	transform: translateX(-100%);
	transition: all .3s ease-in-out;
}

.hum-menu__top-text:hover::before {
	content: "";
	width: 100%;
	height: 1px;
	transform: translateX(0);
}

.hum-menu__li-bottom-cover {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.hum-menu__bottom-text {
	color: #fff;
	font-family: 'Bellefair';
	font-size: 28px;
	line-height: 1.5;
	letter-spacing: 0;
}


/* フッター */
.footer {
	width: 100%;
	padding: 88px 3vw 104px;
	display: flex;
	justify-content: center;
	position: relative;
}

.footer::after {
	content: "";
	width: 100%;
	height: 28px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #410905;
}

.footer__inner {
	width: 1280px;
}

.footer__text-cover {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
}

.footer__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: #505050ff;
	font-family: 'Bellefair', 'Noto Sans JP';
	line-height: 1.4;
	width: fit-content;
}

.footer__title--main {
	font-size: 64px;
}

.footer__title--sub {
	letter-spacing: .15em;
	font-size: 16px;
}

.footer__nav-inner {
	display: flex;
	gap: 8px 24px;
}

.footer__nav-text {
	padding: 10px 0;
	font-size: 20px;
	font-family: 'Bellefair', 'Noto Sans JP';
	letter-spacing: .05em;
	line-height: normal;
	color: #505050ff;
	position: relative;
	overflow: hidden;
	display: block;
	width: fit-content;
}

.footer__nav-text::before {
	content: "";
	width: 100%;
	height: 1px;
	background-color: #505050ff;
	position: absolute;
	bottom: 15%;
	left: 0;
	transform: translateX(-100%);
	transition: all .3s ease-in-out;
}

.footer__nav-text:hover::before {
	transform: translateX(0);
}

.footer__bottom-cover {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.footer__copyright {
	color: #505050ff;
	font-size: 14px;
	letter-spacing: .05em;
	line-height: 1.75;
	font-family: 'Bellefair', 'Noto Sans JP';
}

.footer__sns {
	display: flex;
	align-items: center;
	gap: 50px;
}

.footer__sns-icon {
	font-size: 24px;
	color: #505050ff;
	scale: 1;
	transition: all .3s ease;
}

.footer__sns-icon:hover {
	scale: 1.1;
	color: #410905;
}



@media(max-width:540px) {

	/* ボタン */
	.btn {
		position: relative;
		padding: 8px 10px 8px 10px;
	}


	.btn-text {
		font-size: 14px;
	}

	.btn__icon-cover {
		position: absolute;
		right: 10px;
	}


	/* ヘッダー */
	.header__tittle--left {
		font-size: 28px;
		color: #616161;
	}

	.header__tittle--right {
		display: none;
	}

	.header__hum-btn {
		width: 56px;
		gap: 8px;
	}

	.header__hum-btn>* {
		width: 40px;
		background-color: #6c6c6cff;
	}


	/* ハンバーガーメニュー */
	.hum-menu__inner {
		width: 95%;
	}

	.hum-menu__inner::before {
		width: 271px;
		height: 368px;
		bottom: -120px;
		right: -73px;
	}

	.hum-menu__btn {
		top: 10px;
	}

	.hum-menu__nav {
		gap: 40px;
	}

	.hum-menu__top-text {
		font-size: 28px;
	}

	.hum-menu__bottom-text {
		font-size: 20px;
	}



	/* フッター */
	.footer {
		padding: 56px 3vw 30px;
	}

	.footer__text-cover {
		gap: 0;
	}

	.footer__title--main {
		font-size: 48px;
		line-height: 1;
		color: #6c6c6c;
	}

	.footer__title--sub {
		letter-spacing: .15em;
		font-size: 10px;
		font-family: 'Outfit';
		color: #d5c5a4;
		letter-spacing: .05em;
	}

	.footer__nav {
		margin-top: 16px;
	}

	.footer__nav-inner {
		flex-direction: column;
		gap: 16px;
	}

	.footer__bottom-cover {
		margin: 60px 0 30px;
	}

	.footer__sns {
		gap: 10px;
	}
}