@charset "utf-8";

.frontpage.header_on,
.frontpage.js_header_move,
:root {
	--header-height: 6.4rem;
	--header-bg: #fff;
	--header-menu-color: var(--gold_03);
	--header-btn-bg: transparent;
	--logo-padding: 0 0 0.6rem 1.2rem;
	--logo-size: 14.1rem;
}

.frontpage {
	--header-height: 8rem;
	--header-bg: transparent;
	--logo-padding: 0.2rem 0 0.7rem 1.2rem;
	--logo-size: 17.3rem;
}

.l_header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	transition: background 0.3s;
	width: 100%;
	display: flex;
}

.l_header_inner {
	width: 100%;
	position: relative;
	z-index: 101;
	height: var(--header-height);
	background: var(--header-bg);
	transition: background 0.5s;
	display: flex;
	align-items: center;
}

.l_header_top {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
}

.l_header_logo {
	position: relative;
	z-index: 1000;
	padding: var(--logo-padding);
	width: fit-content;
}

.l_header_logo a {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	text-decoration: none;

	.txt {
		font-size: 0.9rem;
		letter-spacing: 0.08em;
		line-height: 1.4;
		font-weight: 500;

		span {
			color: var(--gold_02);
		}
	}

	img {
		width: var(--logo-size);
	}
}

.l_header_content {
	display: flex;
}

.l_header_access {
	--icon-url: url(../images/icon_map.svg);
	--icon-color: var(--gold_03);
	--icon-size: 2.4rem;
	position: relative;
	right: 0;
	top: 0;
	width: 6.6rem;
	aspect-ratio: 66/64;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* justify-content: center; */
	text-decoration: none;
	border-left: 1px solid rgba(144, 131, 98, 0.5);
	padding-top: 1rem;
}

.l_header_access:before {
	content: '';
	display: block;
	position: relative;
	width: var(--icon-size);
	aspect-ratio: 1/1;
	z-index: 1;
	-webkit-mask: var(--icon-url) center / 100% no-repeat;
	mask: var(--icon-url) center / 100% no-repeat;
	background: var(--icon-color);
}

.l_header_access span {
	color: var(--gold_03);
	font-size: 1rem;
	letter-spacing: 0.08em;
	line-height: 1.6;
	font-weight: 500;
	margin-top: 0.3rem;
}

.l_header_btn_wrap {
	position: relative;
	z-index: 1000;
	width: 6.6rem;
	aspect-ratio: 66/64;
	cursor: pointer;
	right: 0;
	top: 0;
	display: flex;
	align-items: center;
	/* justify-content: center; */
	flex-direction: column;
	padding-bottom: 0;
	background: var(--header-btn-bg);
	transition: var(--default-transition);
	border-left: 1px solid rgba(144, 131, 98, 0.5);
	padding-top: 1.8rem;
}

.l_header_btn {
	display: flex;
	align-items: center;
	width: 4rem;
	aspect-ratio: 40/8;
	justify-content: center;
	position: relative;
	cursor: pointer;
}

.l_header_btn span {
	width: 100%;
	height: 100%;
	position: relative;
}

.l_header_btn span:before,
.l_header_btn span:after {
	transition: var(--default-transition);
	content: "";
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	z-index: 1;
	background: var(--header-menu-color);
}

.l_header_btn span:before {
	top: 0;
}

.l_header_btn span:after {
	bottom: 0;
}

.l_header_btn_txt {
	display: block;
	position: relative;
	color: var(--gold_03);
	font-size: 1rem;
	letter-spacing: 0.08em;
	line-height: 1.6;
	font-weight: 500;
	width: 100%;
	margin-top: 1.1rem;
	text-align: center;
}

.l_header_btn_txt span {
	position: absolute;
	width: 100%;
	left: 0;
	opacity: 1;
	transition: var(--default-transition);
}

.l_header_btn_txt em {
	opacity: 0;
	transition: var(--default-transition);
}

/*-----------------------------
	m_cta
	-----------------------------*/
.m_cta {
	padding: 2.5rem 1.5rem;
	background: var(--lightbeige_02);
}

.m_cta_btn {
	--txt01-color: var(--beige_02);
	--txt02-color: #fff;
	--icon01-url: url(../images/icon_calendardots.svg);
	--icon01-color: #fff;
	--icon01-bg: var(--gold_02);
	--arrow-url: url(../images/icon_arrow.svg);
	--arrow-color: #fff;
	--arrow-bg: rgba(255, 255, 255, 0.2);
	background: var(--gold_03);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 6.7rem;
	text-decoration: none;
	margin-top: 1rem;
	position: relative;
	border-radius: 0.8rem;
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.12);
	margin-top: 1.2rem;

	.txt01 {
		font-size: 1.2rem;
		letter-spacing: 0.08em;
		color: var(--txt01-color);
		line-height: 1;

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			left: 1.4rem;
			transform: translateY(-50%);
			width: 3.8rem;
			aspect-ratio: 1/1;
			z-index: 1;
			border-radius: 1rem;
			background: var(--icon01-bg);
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			left: 1.9rem;
			transform: translateY(-50%);
			width: 2.8rem;
			aspect-ratio: 1/1;
			z-index: 1;
			-webkit-mask: var(--icon01-url) center / 100% no-repeat;
			mask: var(--icon01-url) center / 100% no-repeat;
			background: var(--icon01-color);
		}
	}

	.txt02 {
		font-size: 1.6rem;
		letter-spacing: 0.16em;
		color: var(--txt02-color);
		line-height: 1;
		margin-top: 0.5rem;

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			right: 1.4rem;
			transform: translateY(-50%);
			width: 2.2rem;
			aspect-ratio: 1/1;
			z-index: 1;
			border-radius: 1rem;
			background: var(--arrow-bg);
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			right: 1.8rem;
			transform: translateY(-50%);
			width: 1.4rem;
			aspect-ratio: 1/1;
			z-index: 1;
			-webkit-mask: var(--arrow-url) center / 100% no-repeat;
			mask: var(--arrow-url) center / 100% no-repeat;
			background: var(--arrow-color);
		}
	}

	&.m_cta_line {
		--icon01-url: url(../images/icon_chat.svg);
		--icon01-bg: rgba(255, 255, 255, 0.3);
		background: var(--green-00);
	}

	&.m_cta_interview {
		--txt01-color: var(--gold_02);
		--txt02-color: var(--gold_03);
		--icon01-url: url(../images/icon_clipboad.svg);
		--icon01-color: var(--gold_03);
		--icon01-bg: var(--lightbeige_02);
		--arrow-color: var(--gold_03);
		--arrow-bg: var(--grayge_00);
		background: #fff;
		border: 1px solid rgba(144, 131, 98, 0.5);
	}

	&.m_cta_bus {
		--txt01-color: var(--gold_02);
		--txt02-color: var(--blue_01);
		--icon01-url: url(../images/icon_bus.svg);
		--icon01-color: var(--blue_01);
		--icon01-bg: rgba(54, 130, 181, 0.2);
		--arrow-color: var(--gold_03);
		--arrow-bg: var(--grayge_00);
		background: #fff;
		border: 1px solid rgba(144, 131, 98, 0.5);
	}
}

.l_header_fixed {
	position: fixed;
	z-index: 100;
	padding-top: var(--header-height);
	left: 0;
	top: 0;
	width: 100%;
	transition: transform 0.3s ease-in;
	transform: translateX(100%);

	.l_header_fixed_inner {
		height: calc(100vh - var(--header-height));
		height: calc(100dvh - var(--header-height));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-y: contain;
		transition: opacity 0.3s 0.3s linear;
		background: var(--lightgeige);
	}

	.l_header_nav {
		width: 100%;
		margin-top: 0;
		flex-direction: column;
		display: flex;
		gap: 0;
		padding: 2rem 1.5rem 2.5rem;
	}

	.list_parent {
		display: flex;
		flex-direction: column;
	}

	/*-----------------------------
	l_nav_lv01
	-----------------------------*/
	.l_nav_lv01 {
		display: grid;
		gap: 1rem;
	}

	.l_nav_item_lv01 {
		position: relative;
		cursor: pointer;
		background: #fff;
		border-radius: 1rem;
		padding: 1.5rem;
	}

	.l_nav_item_lv01:last-of-type {
		border-bottom: 0;
	}

	.l_nav_ttl_lv01 {
		text-decoration: none;
		position: relative;
		width: 100%;
		display: block;
		cursor: pointer;

		.l_nav_ttl_lv01_btn {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 0;
			width: 3rem;
			height: 4.2rem;
			z-index: 1;
			border-left: 1px solid rgba(144, 131, 98, 0.3);
			opacity: 1;

			&:before,
			&:after {
				content: "";
				display: block;
				position: absolute;
				top: 50%;
				right: 0;
				width: 1.8rem;
				height: 1px;
				z-index: 1;
				background: var(--gold_03);
				opacity: 1;
				transform: translateY(-50%);
				transition: 0.5s;
			}

			&:before {
				transform: rotate(-90deg);
			}

			.l_nav_item_lv01.on &:before {
				transform: rotate(0deg);
			}
		}

		.l_nav_ttl_lv01_in {
			padding: 0 0 0.4rem 5.8rem;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			text-decoration: none;
			width: fit-content;

			&:not(a) {
				.ja {
					&::before {
						display: none;
					}

					&::after {
						display: none;
					}
				}
			}

			&:before {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 0.5rem;
				width: 3.6rem;
				aspect-ratio: 1/1;
				z-index: 1;
				-webkit-mask: var(--url) center / 100% no-repeat;
				mask: var(--url) center / 100% no-repeat;
				background: var(--gold_02);
			}

			&:after {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 0;
				width: 4.6rem;
				aspect-ratio: 1/1;
				z-index: 0;
				background: var(--lightgeige);
				border-radius: 1rem;
			}
		}

		.ja {
			--icon-color: var(--gold_03);
			--icon-url: url(../images/icon_arrow.svg);
			font-family: var(--font-min);
			color: var(--black_logo);
			font-size: 1.6rem;
			letter-spacing: 0.12em;
			line-height: 1.6;
			font-weight: 500;
			position: relative;
			padding-right: 2.4rem;

			&::before {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				right: 0.3rem;
				width: 1.2rem;
				aspect-ratio: 1/1;
				z-index: 2;
				-webkit-mask: var(--icon-url) center / 100% no-repeat;
				mask: var(--icon-url) center / 100% no-repeat;
				background: var(--icon-color);
				transform: translateY(-50%);
			}

			&::after {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				right: 0;
				width: 1.8rem;
				aspect-ratio: 1/1;
				z-index: 1;
				border-radius: 50%;
				border: 1px solid rgba(144, 131, 98, 0.5);
				transform: translateY(-50%);
			}

			br {
				display: none;
			}
		}

		.en {
			font-family: var(--font-en);
			color: var(--gold_02);
			font-size: 1.4rem;
			letter-spacing: 0.04em;
			line-height: 1;
			font-weight: 400;
		}
	}

	/* jsで開閉するためのdiv */
	.l_nav_sub_lv01 {
		display: none;
	}

	/*-----------------------------
		.l_nav_lv02
		-----------------------------*/
	.l_nav_sub_lv02 {
		display: none;
	}

	.l_nav_lv02:has(.l_nav_sub_lv02) {
		padding: 1.5rem 0.5rem 0.5rem;
		border-top: 1px solid var(--gold_03);
		margin-top: 1.6rem;
		display: grid;
		gap: 1.5rem;

		.l_nav_ttl_lv02 {
			position: relative;
			display: block;
			padding: 1.2rem 3.4rem 1.2rem 1.2rem;
			color: var(--gold_03);
			font-size: 1.5rem;
			line-height: 1.6;
			font-weight: 500;
			background: rgba(235, 230, 220, 0.8);
			border-radius: 0.5rem;

			&:before,
			&:after {
				content: "";
				display: block;
				position: absolute;
				top: 50%;
				right: 1.2rem;
				width: 1.4rem;
				height: 1px;
				z-index: 1;
				background: var(--gold_03);
				/* opacity: 0; */
				transform: translateY(-50%);
				transition: 0.5s;
			}

			&:before {
				transform: rotate(-90deg);
			}

			.l_nav_item_lv02.on &:before {
				transform: rotate(0deg);
			}

			span {
				letter-spacing: 0.12em;

				&:before {
					content: '';
					display: block;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 1.2rem;
					width: 2.2rem;
					height: 2.4rem;
					z-index: 1;
					border-left: 1px solid rgba(144, 131, 98, 0.3);
					/* opacity: 0; */
				}
			}
		}
	}

	/* 
		jsで開閉するためのdiv
		使用する場合はjsのコメントアウトも外す
		 */
	/* .l_nav_sub_lv02 {
			display: none;
		} */
	/*++++++++++++++++++++++++++++
		l_nav_lv03
		++++++++++++++++++++++++++++*/
	.l_nav_lv02:not(:has(.l_nav_sub_lv02)) {
		padding: 1.5rem 0.5rem 0.5rem;
		border-top: 1px solid var(--gold_03);
		margin-top: 1.6rem;

		.rec {
			padding: 0.2rem 0.4rem;
			border-radius: 0.4rem;
			background: var(--gold_02);
			color: #fff;
			font-size: 1.2rem;
			letter-spacing: 0.12em;
			line-height: 1.4;
			margin-left: 0.8rem;
		}
	}

	.l_nav_ttl_lv03,
	.l_nav_lv02:not(:has(.l_nav_sub_lv02)) .l_nav_ttl_lv02 {
		--icon-url: url(../images/icon_arrow.svg);
		--icon-color: var(--gold_03);
		--icon-size: 1.2rem;
		--circle-size: 1.8rem;
		--circle-color: var(--grayge_00);
		--circle-top: 1.4rem;
		position: relative;
		display: flex;
		align-items: center;
		padding: 1.2rem 0 1.2rem 2.6rem;
		font-size: 1.4rem;
		text-decoration: none;
		line-height: 1.4;
		border-bottom: 1px solid rgba(144, 131, 98, 0.3);

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: calc(0.3rem + var(--circle-top));
			left: 0.3rem;
			width: var(--icon-size);
			aspect-ratio: 1/1;
			-webkit-mask: var(--icon-url) center / 100% no-repeat;
			mask: var(--icon-url) center / 100% no-repeat;
			background: var(--icon-color);
			z-index: 2;
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			top: var(--circle-top);
			left: 0;
			width: var(--circle-size);
			aspect-ratio: 1/1;
			z-index: 1;
			border-radius: 0.7rem;
			background: var(--circle-color);
		}
	}

	.l_nav_item_lv03 {}

	.l_nav_ttl_lv03 {}
}

/*++++++++++++++++++++++++++++
	状態系
	++++++++++++++++++++++++++++*/
/* header_on */
.header_on {
	.l_header_btn span:before {
		top: 50%;
		transform: translateY(-50%) rotate(15deg);
	}

	.l_header_btn span:after {
		bottom: 50%;
		transform: translateY(50%) rotate(-15deg);
	}

	.l_header_btn em {
		opacity: 0;
	}

	.l_header_btn:before {
		opacity: 0;
	}

	.l_header_fixed_inner {
		opacity: 1;
		pointer-events: auto;
	}

	.l_header_fixed {
		transform: translateX(0);
	}

	.l_header_btn_txt span {
		opacity: 0;
	}

	.l_header_btn_txt em {
		opacity: 1;
	}
}

/*===cariier===cariier===cariier===
...................................

-------------------------- PC

...................................
===cariier===cariier===cariier===*/
@media screen and (min-width: 601px) {

	.frontpage.header_on,
	.frontpage.js_header_move,
	:root {
		--header-height: 11.6rem;
		--logo-size: 28.2rem;
		--logo-padding: 0;
	}

	.frontpage {
		--logo-size: 28.2rem;
		--header-height: 11.6rem;
		--logo-padding: 0;
	}

	.l_header {
		min-width: var(--tb-breakpoint);
	}

	.l_header_bg {
		position: fixed;
		z-index: 99;
		width: 100%;
		height: 100%;
		background: #00000033;
		transition: var(--default-transition);
		opacity: 0;
		pointer-events: none;

		body:has(.l_nav_item_lv01:hover) & {
			opacity: 1;
			pointer-events: auto;
		}
	}

	.l_header_inner {
		padding: 0 0 0 2rem;
	}

	body:has(.l_nav_item_lv01:hover) {
		.l_header_inner {
			background: #fff;
		}
	}

	.l_header_logo a {
		gap: 1.6rem;

		.txt {
			font-size: 1.7rem;
		}
	}

	.l_header_access {
		--icon-size: 3.6rem;
		width: 11rem;
		height: 8.6rem;
		aspect-ratio: auto;
		padding-top: 1.3rem;

		span {
			font-size: 1.7rem;
			margin-top: 0.6rem;
		}
	}

	.l_header_btn_wrap {
		width: 11rem;
		height: 8.6rem;
		aspect-ratio: auto;
		background: transparent;
		padding-top: 2.9rem;
	}

	.l_header_btn {
		width: 5rem;
		aspect-ratio: 50/11;
	}

	.l_header_btn_txt {
		font-size: 1.7rem;
		margin-top: 1.5rem;
	}

	/*-----------------------------
	m_cta
	-----------------------------*/
	.m_cta {
		padding: 4rem;
		max-width: 118rem;
		margin: 4rem auto 0;
		display: flex;
		gap: 4rem;
		border-radius: 1rem;

		.m_cta_block {
			display: grid;
			gap: 1.5rem;
			grid-template-columns: repeat(2, 1fr);
			flex: 1
		}

		.m_cta_tel {
			--txt01-bg: #fff;
			--txt01-color: var(--gold_03);
			--txt02-color: var(--black_logo);
			--txt03-color: var(--gold_03);
			--txt04-color: var(--gold_03);
			--icon01-url: url(../images/icon_phonecall.svg);
			--icon01-color: var(--gold_03);
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			width: 40.5rem;

			.txt01 {
				font-size: 2rem;
				color: var(--txt01-color);
				background: var(--txt01-bg);
				line-height: 1;
				padding: 0.9rem 1.6rem;
				border-radius: 3rem;
			}

			.txt02 {
				position: relative;
				font-size: 3.4rem;
				letter-spacing: 0;
				color: var(--txt02-color);
				font-family: var(--font-num);
				line-height: 1;
				margin-top: 1.6rem;
				font-weight: 600;
				padding: 0.1rem 0 0.1rem 4.4rem;

				&:after {
					content: '';
					display: block;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
					width: 3.6rem;
					aspect-ratio: 1/1;
					z-index: 1;
					-webkit-mask: var(--icon01-url) center / 100% no-repeat;
					mask: var(--icon01-url) center / 100% no-repeat;
					background: var(--icon01-color);
				}
			}

			.txt03 {
				font-size: 1.9rem;
				letter-spacing: 0.08em;
				color: var(--txt03-color);
				line-height: 1;
				margin-top: 1.2rem;
			}

			.txt04 {
				margin-top: 2rem;
				border-top: 1px solid #9083624D;
				padding-top: 1.5rem;
				font-size: 1.8rem;
				letter-spacing: 0.12em;
				line-height: 1.5;
				color: var(--txt04-color);
			}
		}
	}

	.m_cta_btn {
		height: 9rem;
		margin-top: 0;
		padding-left: 1.8rem;

		&:hover {
			opacity: 1;
		}

		.txt01 {
			font-size: 1.6rem;

			&:before {
				left: 1.4rem;
				width: 4.6rem;
			}

			&:after {
				left: 1.9rem;
				width: 3.6rem;
			}
		}

		.txt02 {
			font-size: 2rem;
			margin-top: 0.8rem;

			&:before {
				right: 1.4rem;
				width: 2.8rem;
			}

			&:after {
				right: 1.9rem;
				width: 1.8rem;
			}
		}

		&.m_cta_web {
			&:hover {
				--icon01-color: #fff;
				--icon01-bg: #FFFFFF4D;
				--arrow-color: var(--gold_03);
				--arrow-bg: #fff;
				background: var(--gold_02);
			}
		}

		&.m_cta_line {
			&:hover {
				background: var(--green-01);
				--arrow-bg: #fff;
				--arrow-color: var(--green-00);
			}
		}

		&.m_cta_interview {
			&:hover {
				--txt01-color: var(--beige_02);
				--txt02-color: #fff;
				--icon01-color: #fff;
				--icon01-bg: #FFFFFF4D;
				--arrow-color: var(--gold_03);
				--arrow-bg: #fff;
				background: var(--beige_03);
				border: 1px solid var(--beige_03);
			}
		}

		&.m_cta_bus {
			&:hover {
				--txt01-color: var(--beige_02);
				--txt02-color: #fff;
				--icon01-color: #fff;
				--icon01-bg: #FFFFFF4D;
				--arrow-color: var(--blue_01);
				--arrow-bg: #fff;
				background: var(--blue_01);
				border: 1px solid var(--blue_01);
			}
		}

		&.m_cta_bus02 {
			flex-direction: row-reverse;
			grid-column: span 2;
			height: 7.4rem;

			.txt02 {
				margin-top: 0;
				margin-right: 2rem;
			}
		}
	}

	/*-----------------------------
	l_header_fixed
	-----------------------------*/
	.l_header_fixed {
		position: absolute;
		z-index: 100;
		padding-top: var(--header-height);
		left: 0;
		top: 0;
		width: 100%;
		transition: transform 0.3s ease-in;
		transform: translateX(100%);

		.l_header_fixed_inner {
			padding-bottom: 5rem;
		}

		.l_header_nav {
			max-width: 118rem;
			margin: 0 auto;
			padding: 3.2rem 0 0;
		}

		/*-----------------------------
	l_nav_lv01
	-----------------------------*/
		.l_nav_lv01 {
			gap: 2.5rem;
		}

		.l_nav_item_lv01 {
			position: relative;
			cursor: auto;
			background: #fff;
			border-radius: 1rem;
			padding: 3rem 3.5rem;
		}

		.l_nav_item_lv01:last-of-type {
			border-bottom: 0;
		}

		.l_nav_ttl_lv01 {
			width: fit-content;

			&:not(a) {
				cursor: auto;
			}

			&:before,
			&:after {
				display: none;
			}

			.l_nav_ttl_lv01_in {
				width: fit-content;
				padding: 0.4rem 0 0.4rem 9.7rem;

				&:before {
					left: 1.1rem;
					width: 5.4rem;
				}

				&:after {
					width: 7.5rem;
					border-radius: 1rem;
				}
			}

			a.l_nav_ttl_lv01_in:hover {
				opacity: 1;

				.ja {
					--icon-color: #fff;
					color: var(--gold_02);

					&::after {
						border: 1px solid #90836280;
						background: var(--gold_02);
					}
				}
			}

			.ja {
				--icon-color: var(--gold_03);
				font-size: 2.6rem;
				padding-right: 3.8rem;

				&::before {
					right: 0.5rem;
					width: 1.8rem;
				}

				&::after {
					right: 0;
					width: 2.8rem;
				}
			}

			.en {
				font-size: 2rem;
				margin-top: 0.5rem;

				&:before {
					display: none;
				}
			}

			.l_nav_ttl_lv01_btn {
				display: none;
			}
		}

		/* jsで開閉するためのdiv */
		.l_nav_sub_lv01 {
			display: block;
		}

		.l_nav_sub_lv01_ttl {
			display: none;
		}

		/*-----------------------------
		.l_nav_lv02
		-----------------------------*/
		.l_nav_sub_lv02 {
			display: block;
		}

		.l_nav_lv02:has(.l_nav_sub_lv02) {
			padding: 2.5rem 0 0;
			margin-top: 3rem;
			grid-template-columns: repeat(3, 1fr);
			gap: 4rem 3rem;

			.l_nav_ttl_lv02 {
				padding: 0.9rem 1.2rem;
				font-size: 2rem;

				&:before,
				&:after {
					display: none;
				}

				span {
					&:before {
						display: none;
					}
				}
			}
		}

		/* 
		jsで開閉するためのdiv
		使用する場合はjsのコメントアウトも外す
		 */
		/*++++++++++++++++++++++++++++
		子要素がこれ以上ないナビ
		++++++++++++++++++++++++++++*/
		.l_nav_lv02:not(:has(.l_nav_sub_lv02)) {
			padding: 2.5rem 0 0;
			margin-top: 3rem;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 0 3rem;

			.rec {
				padding: 0.2rem 0.4rem;
				font-size: 1.6rem;
				margin-left: 0.8rem;
			}
		}

		.l_nav_ttl_lv03,
		.l_nav_lv02:not(:has(.l_nav_sub_lv02)) .l_nav_ttl_lv02 {
			--icon-color: var(--gold_03);
			--icon-size: 1.6rem;
			--circle-size: 2.2rem;
			--circle-color: var(--grayge_00);
			--circle-top: 1.6rem;
			padding: 1.3rem 0 1.3rem 3.4rem;
			font-size: 1.9rem;

			&:before {
				top: calc(0.3rem + var(--circle-top));
				left: 0.3rem;
			}

			&:after {
				border-radius: 0.8rem;
			}

			&:hover {
				opacity: 1;
				--icon-color: #fff;
				--circle-color: var(--gold_02);
				color: var(--gold_02);
			}
		}
	}

	/*-----------------------------
	l_header_nav_pc
	-----------------------------*/
	.l_header_content {
		align-items: center;
	}

	.l_header_nav_pc {
		display: block;

		.pc_menu_none {
			display: none !important;
		}

		/*++++++++++++++++++++++++++++
		l_nav_lv01
		++++++++++++++++++++++++++++*/
		.l_nav_lv01 {
			display: flex;
		}

		.l_nav_item_lv01 {
			--nav-gutter: 1.8rem;
		}

		.l_nav_item_lv01:hover .l_nav_ttl_lv01 {
			color: var(--main-color);
		}

		.l_nav_item_lv01:hover .l_nav_ttl_lv01:before {
			opacity: 1;
		}

		.l_nav_ttl_lv01 {
			position: relative;
			cursor: pointer;
			isolation: isolate;
			text-decoration: none;

			&:before {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 0;
				width: 1px;
				height: 8.6rem;
				z-index: 1;
				background: #90836280;
			}

			&:after {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 6rem;
				aspect-ratio: 1/1;
				z-index: -1;
				background: #E9E1C7;
				opacity: 0;
				filter: blur(7px);
				transition: var(--default-transition);
				border-radius: 50%;
			}

			.l_nav_item_lv01:last-of-type &::before {
				display: none;
			}

			.l_nav_ttl_lv01_in {
				gap: 0.8rem;
				height: 11.6rem;
				display: flex;
				justify-content: center;
				text-align: center;
				align-items: center;
				flex-direction: column;
				padding: 0 3rem 0 2.9rem;
				text-decoration: none;

				&:before {
					content: '';
					display: block;
					width: 3.2rem;
					aspect-ratio: 1/1;
					-webkit-mask: var(--url02) center / 100% no-repeat;
					mask: var(--url02) center / 100% no-repeat;
					background: var(--gold_02);
				}

				br {
					display: inline !important;
				}

				.ja {
					color: var(--black_01);
					font-size: 1.9rem;
					letter-spacing: 0.12em;
					line-height: 1.25;
					font-weight: 500;
					display: block;
				}

				.en {
					display: none !important;
				}
			}

			.l_nav_ttl_lv01_btn {
				display: none;
			}

			.l_nav_item_lv01:hover &,
			&:hover {
				&:after {
					opacity: 0.5;
				}
			}
		}

		.l_nav_sub_lv01 {
			position: absolute;
			top: 11.6rem;
			left: 0;
			width: 100%;
			background: #fff;
			border-top: 1px solid #9083624D;
			overflow-y: auto;
			max-height: calc(100vh - 11.6rem);
			transition: var(--default-transition);
			opacity: 0;
			pointer-events: none;
		}

		.l_nav_sub_lv01_ttl {
			display: flex;
			flex-direction: column;
			gap: 0.8rem;
			flex: 1;

			.ja {
				font-family: var(--font-min);
				color: var(--black_logo);
				font-size: 2.6rem;
				letter-spacing: 0.12em;
				line-height: 1.6;
				font-weight: 500;
				position: relative;
			}

			.en {
				font-family: var(--font-en);
				color: var(--gold_02);
				font-size: 2.2rem;
				letter-spacing: 0.04em;
				line-height: 1;
				font-weight: 400;
			}
		}

		/* .l_nav_item_lv01.on .l_nav_ttl_lv01:before,
		.l_nav_item_lv01.on .l_nav_sub_lv01 {
			opacity: 1;
			pointer-events: auto;
		} */
		.l_nav_item_lv01:hover .l_nav_ttl_lv01:before,
		.l_nav_item_lv01:hover .l_nav_sub_lv01 {
			opacity: 1;
			pointer-events: auto;
		}

		.l_nav_sub_lv01_in {
			max-width: 118rem;
			margin: 0 auto;
			padding: 3rem 0 4rem;
			display: flex;
		}

		.l_nav_sub_lv01_in:has(.l_nav_sub_lv02) {
			display: flex;
			flex-direction: column;

			.l_nav_sub_lv01_ttl {
				margin-bottom: 4rem;
				flex-direction: row;
				gap: 1.8rem;

				.en {
					padding-top: 0.9rem;
				}
			}
		}

		.l_nav_lv02:has(.l_nav_sub_lv02) {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 4rem 2.6rem;

			.l_nav_ttl_lv02 {
				position: relative;
				display: block;
				padding: 0.9rem 1.2rem;
				font-size: 2rem;
				color: var(--gold_03);
				line-height: 1.6;
				font-weight: 500;
				background: rgba(235, 230, 220, 0.8);
				border-radius: 0.5rem;

				span {
					letter-spacing: 0.12em;
				}
			}
		}

		.l_nav_lv02:not(:has(.l_nav_sub_lv02)) {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 0 2.6rem;
			width: 88rem;

			&.pc_menu_col02 {
				grid-template-columns: repeat(2, 1fr);
			}

			.rec {
				border-radius: 0.4rem;
				background: var(--gold_02);
				color: #fff;
				letter-spacing: 0.12em;
				line-height: 1.4;
				padding: 0.2rem 0.4rem;
				font-size: 1.6rem;
				margin-left: 0.8rem;
			}
		}

		.l_nav_ttl_lv03,
		.l_nav_lv02:not(:has(.l_nav_sub_lv02)) .l_nav_ttl_lv02 {
			--icon-url: url(../images/icon_arrow.svg);
			--icon-color: var(--gold_03);
			--icon-size: 1.6rem;
			--circle-size: 2.2rem;
			--circle-color: var(--grayge_00);
			--circle-top: 1.6rem;
			position: relative;
			display: flex;
			align-items: center;
			padding: 1.3rem 0 1.3rem 3.4rem;
			font-size: 1.9rem;
			text-decoration: none;
			line-height: 1.4;
			border-bottom: 1px solid rgba(144, 131, 98, 0.3);

			&:before {
				content: '';
				display: block;
				position: absolute;
				top: calc(0.3rem + var(--circle-top));
				left: 0.3rem;
				width: var(--icon-size);
				aspect-ratio: 1/1;
				-webkit-mask: var(--icon-url) center / 100% no-repeat;
				mask: var(--icon-url) center / 100% no-repeat;
				background: var(--icon-color);
				z-index: 2;
			}

			&:after {
				content: '';
				display: block;
				position: absolute;
				top: var(--circle-top);
				left: 0;
				width: var(--circle-size);
				aspect-ratio: 1/1;
				z-index: 1;
				border-radius: 0.8rem;
				background: var(--circle-color);
			}

			&:hover {
				opacity: 1;
				--icon-color: #fff;
				--circle-color: var(--gold_02);
				color: var(--gold_02);
			}
		}
	}
}

/*===cariier===cariier===cariier===
...................................

-------------------------- SP

...................................
===cariier===cariier===cariier===*/
@media screen and (max-width: 600px) {
	.m_cta_tel {
		--txt01-bg: var(--beige_00);
		--txt01-color: var(--gold_03);
		--txt02-color: var(--main-font-color);
		--txt03-color: var(--gold_03);
		--icon01-url: url(../images/icon_phonecall.svg);
		--icon01-color: var(--gold_02);
		--icon01-bg: var(--beige_00);
		--arrow-url: url(../images/icon_arrow.svg);
		--arrow-color: var(--gold_03);
		--arrow-bg: var(--grayge_00);
		background: #fff;
		border: 1px solid rgba(144, 131, 98, 0.5);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 9rem;
		text-decoration: none;
		margin-top: 0;
		position: relative;
		border-radius: 0.8rem;
		box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.12);

		.txt01 {
			font-size: 1.2rem;
			letter-spacing: 0.08em;
			color: var(--txt01-color);
			background: var(--txt01-bg);
			line-height: 1;
			padding: 0.4rem 1.4rem;
			border-radius: 3rem;

			&:before {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				left: 1.4rem;
				transform: translateY(-50%);
				width: 3.8rem;
				aspect-ratio: 1/1;
				z-index: 1;
				border-radius: 1rem;
				background: var(--icon01-bg);
			}

			&:after {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				left: 1.9rem;
				transform: translateY(-50%);
				width: 2.8rem;
				aspect-ratio: 1/1;
				z-index: 1;
				-webkit-mask: var(--icon01-url) center / 100% no-repeat;
				mask: var(--icon01-url) center / 100% no-repeat;
				background: var(--icon01-color);
			}
		}

		.txt02 {
			font-size: 2rem;
			letter-spacing: 0;
			color: var(--txt02-color);
			font-family: var(--font-num);
			line-height: 1;
			margin-top: 0.7rem;
			font-weight: 600;

			&:before {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				right: 1.4rem;
				transform: translateY(-50%);
				width: 2.2rem;
				aspect-ratio: 1/1;
				z-index: 1;
				border-radius: 1rem;
				background: var(--arrow-bg);
			}

			&:after {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				right: 1.8rem;
				transform: translateY(-50%);
				width: 1.4rem;
				aspect-ratio: 1/1;
				z-index: 1;
				-webkit-mask: var(--arrow-url) center / 100% no-repeat;
				mask: var(--arrow-url) center / 100% no-repeat;
				background: var(--arrow-color);
			}
		}

		.txt03 {
			font-size: 1.3rem;
			letter-spacing: 0.08em;
			color: var(--txt03-color);
			line-height: 1;
			margin-top: 0.7rem;
		}
	}

	.l_header {
		left: 0 !important;
	}

	.js_header_move {
		.l_header {
			box-shadow: 0px 0.4rem 2rem 0px #00000014;
		}
	}
}