@charset "utf-8";

/* 下層とTOPのスクロール後とメニューを開いているとき */
:root {
	--logo-white-on: 0;
	--header-height: 6.5rem;
	--header-bg: var(--beige_00);
	--header-menu-color: var(--logo_brown);
	--header-btn-bg: transparent;
		--border-bottom: 1px solid var(--beige_line);
}

/* topページの最上部にいるかつメニューを開いていない場合 */
.frontpage:not(.js_header_move, .header_on) {
	--logo-white-on: 1;
	--header-bg: transparent;
	--header-menu-color: var(--logo_brown);
		--border-bottom: 1px solid transparent;
}

.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;
	align-items: center;
	display: flex;
	align-items: center;
	height: var(--header-height);
	background: var(--header-bg);
	transition: background 0.5s;
		border-bottom: var(--border-bottom);
}

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

.l_header_logo {
	position: relative;
	z-index: 1000;
	width: 29.3rem;

	a {
		display: block;
		position: relative;

		img {
			opacity: calc(1 - var(--logo-white-on) * 1);
			transition: var(--default-transition);
		}

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background: url(../images/logo_white.svg) center / 100% no-repeat;
			transition: var(--default-transition);
			opacity: var(--logo-white-on);
		}
	}
}

.l_header_btn_wrap {
	position: fixed;
	z-index: 1000;
	width: 6.5rem;
	aspect-ratio: 1/1;
	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);
}

.l_header_btn {
	display: flex;
	align-items: center;
	width: 3rem;
	aspect-ratio: 30/13;
	justify-content: center;
	position: relative;
	cursor: pointer;
}

.l_header_btn:before {
	content: '';
	display: block;
	position: absolute;
	top: calc(50% - 0.5px);
	left: 0;
	width: 100%;
	height: 1px;
	z-index: 1;
	background: var(--header-menu-color);
	transition: var(--default-transition);
}

.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;
	text-align: center;
	position: relative;
	font-size: 1.2rem;
	letter-spacing: 0.04em;
	font-family: var(--font-en);

	span {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	em {
		opacity: 0;
	}
}

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

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

	.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) {
	:root {
		--header-height: 8rem;
	}

	.frontpage:not(.js_header_move, .header_on) {
		--header-height: 10rem;	
		--header-bg: transparent;
	}

	.frontpage:has(.l_nav_item_lv01:hover) {
		--border-bottom: 1px solid var(--beige_line);
		--header-bg: transparent;
		--header-bg: var(--beige_00);
		--logo-white-on: 0;
	}

	body:has(.l_nav_item_lv01:hover) {
		.l_header_bg {
			opacity: 1;
		}
	}

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

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

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

	.l_header_logo {
		width: 44.2rem;
	}

	.l_header_top {
		padding-left: 0;
	}

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

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

		&:hover {
			.l_nav_ttl_lv01_in {
				color: var(--gold);
			}
		}
	}

	.l_nav_ttl_lv01 {
		text-decoration: none;

		.l_nav_ttl_lv01_in {
			font-size: 1.6rem;
			opacity: 1 !important;
			cursor: pointer;
			text-decoration: none;
			padding: 2.7rem 1rem 2.6rem;
			line-height: 1.6;
			font-weight: 600;
			display: flex;
			min-height: var(--header-height);
			align-items: center;
			transition: var(--default-transition);

			span {
				letter-spacing: 0.1em;
			}
		}

		.l_nav_item_lv01:not(:has(.l_nav_sub_lv01)) & {
			padding-right: 0;

			.l_nav_ttl_lv01_in {
				width: 100%;
			}
		}
	}

	.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_lv02
	++++++++++++++++++++++++++++*/
	.l_nav_sub_lv01 {
		width: 100%;
		padding: 3.4rem 3rem 3.9rem 3rem;
		position: absolute;
		top: calc(100% + 1px);
		left: 0;
		transition: 0.5s;
		max-width: none;
		opacity: 0;
		pointer-events: none;
		background: var(--beige_00);
		position: absolute;
	}

	.l_nav_lv02 {
		--gap-col: 2rem;
		--gap-row: 0rem;
		--col: 3;
		position: relative;
		z-index: 10;
		max-width: 110rem;
		margin: 0 auto;
		padding-left: 29.5rem;
		min-height: 16rem;
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap-row) var(--gap-col);
		align-items: flex-start;
		align-content: flex-start;

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
			width: 24rem;
			height: 16rem;
			z-index: 1;
			background: var(--url) center / cover no-repeat;
			border-radius: 0.5rem;
		}

		&.pc_col02 {
			--col: 2;
		}

		.l_nav_item_lv01.treatment & {
			--url: url(../images/nav_treatment.jpg);
		}

		.l_nav_item_lv01.feature & {
			--url: url(../images/nav_feature.jpg);
		}

		.l_nav_item_lv01.special & {
			--url: url(../images/nav_special.jpg);
		}

		.l_nav_item_lv01.symptoms & {
			--url: url(../images/nav_symptoms.jpg);
		}

		.l_nav_item_lv01.disease & {
			--url: url(../images/nav_disease.jpg);
		}

		.l_nav_item_lv01.clinic & {
			--url: url(../images/nav_clinic.jpg);
		}
	}

	.l_nav_item_lv02 {
		width: calc(100% / var(--col) - var(--gap-col) * (var(--col) - 1) / var(--col));
	}

	.l_nav_ttl_lv02 {
		--arrow-url: url(../images/icon_arrow02.svg);
		--arrow-color: #887635;
		--arrow-size: 0.5rem;
		--circle-bg-color: #B0A36933;
		--circle-border-color: transparent;
		--circle-size: 2.2rem;
		--circle-height: var(--circle-size);
		position: relative;
		display: flex;
		align-items: center;
		padding: 1.2rem 3.2rem 1.1rem 0;
		font-size: 1.6rem;
		text-decoration: none;
		border-bottom: 1px solid var(--logo_gold);
		color: var(--logo_brown);
		line-height: 1.6;

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 0;
			width: var(--circle-size);
			height: var(--circle-height);
			-webkit-mask: var(--arrow-url) center / var(--arrow-size) no-repeat;
			mask: var(--arrow-url) center / var(--arrow-size) no-repeat;
			background: var(--arrow-color);
			z-index: 2;
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 0;
			width: var(--circle-size);
			height: var(--circle-height);
			z-index: 1;
			border: 1px solid var(--circle-border-color);
			border-radius: 50%;
			background: var(--circle-bg-color);
		}
	}

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

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

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

...................................
===cariier===cariier===cariier===*/
@media screen and (max-width: 600px) {
	.l_header {
		left: 0 !important;
	}

	.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;
		padding: 0;
		background: var(--beige_00);
	}

	.l_header_nav {
		width: 100%;
		margin-top: 0;
		flex-direction: column;
		display: flex;
		gap: 0;
		margin-bottom: 3rem;
	}

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

	/*-----------------------------
	l_nav_lv01
	-----------------------------*/
	.l_nav_lv01 {}

	.l_nav_item_lv01 {
		--url: url(../images/nav_home_sp.jpg);
		position: relative;
		cursor: pointer;
		border-bottom: 1px solid var(--beige_line);
		isolation: isolate;

		&.treatment {
			--url: url(../images/nav_treatment_sp.jpg);
		}

		&.feature {
			--url: url(../images/nav_feature_sp.jpg);
		}

		&.special {
			--url: url(../images/nav_special_sp.jpg);
		}

		&.symptoms {
			--url: url(../images/nav_symptoms_sp.jpg);
		}

		&.disease {
			--url: url(../images/nav_disease_sp.jpg);
		}

		&.clinic {
			--url: url(../images/nav_clinic_sp.jpg);
		}
	}

	.l_nav_item_lv01:first-of-type {
		/* border-top: 1px solid var(--beige_line); */
	}

	.l_nav_ttl_lv01 {
		text-decoration: none;
		position: relative;
		width: 100%;

		.l_nav_ttl_lv01_in {
			text-decoration: none;
			display: flex;
			flex-direction: column;
			gap: 0.3rem;
			width: fit-content;
			padding: 2.2rem 0 2.2rem 9.7rem;

			&:before {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				left: 2rem;
				transform: translateY(-50%);
				width: 6.5rem;
				height: 5rem;
				z-index: 1;
				background: var(--url) center / cover no-repeat;
				border-radius: 0.5rem;
			}
		}

		.txt01 {
			letter-spacing: 0.12em;
			line-height: 1.6;
			font-size: 1.6rem;
			font-weight: 600;
			color: var(--logo_brown);
		}

		&::before {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 2rem;
			width: 2.4rem;
			aspect-ratio: 1/1;
			background: url(../images/icon_arrow.svg) center / 1rem no-repeat;
			z-index: 1;
			transition: var(--default-transition);
			opacity: 0;
		}

		&::after {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 2rem;
			width: 2.4rem;
			aspect-ratio: 1/1;
			border-radius: 50%;
			background: #B0A36933;
			z-index: -1;
			opacity: 0;
			
		}

		.l_nav_item_lv01.on &:before {
			transform: translateY(-50%) rotate(180deg);
		}

		.l_nav_item_lv01:has(.l_nav_lv02) &:before,
		.l_nav_item_lv01:has(.l_nav_lv02) &:after {
			opacity: 1;
		}
	}

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

	/*-----------------------------
	.l_nav_lv02
	-----------------------------*/
	.l_nav_lv02 {
		background: var(--beige_01);
		border-radius: 0;
		padding: 1rem 2rem 2rem;
		display: grid;
		gap: 0 1.5rem;

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

	.l_nav_ttl_lv02 {
		--arrow-url: url(../images/icon_arrow02.svg);
		--arrow-color: #887635;
		--arrow-size: 0.4rem;
		--circle-bg-color: #B0A36933;
		--circle-border-color: transparent;
		--circle-size: 1.8rem;
		--circle-height: var(--circle-size);
		position: relative;
		display: flex;
		align-items: center;
		padding: 1rem 2.8rem 0.9rem 0;
		font-size: 1.3rem;
		text-decoration: none;
		border-bottom: 1px solid var(--logo_gold);
		color: var(--logo_brown);
		line-height: 1.6;
		height: 100%;

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 0;
			width: var(--circle-size);
			height: var(--circle-height);
			-webkit-mask: var(--arrow-url) center / var(--arrow-size) no-repeat;
			mask: var(--arrow-url) center / var(--arrow-size) no-repeat;
			background: var(--arrow-color);
			z-index: 2;
		}

		&:after {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 0;
			width: var(--circle-size);
			height: var(--circle-height);
			z-index: 1;
			border: 1px solid var(--circle-border-color);
			border-radius: 50%;
			background: var(--circle-bg-color);
		}
	}

	/* 
	jsで開閉するためのdiv
	使用する場合はjsのコメントアウトも外す
	 */
	/* .l_nav_sub_lv02 {
		display: none;
	} */
	/*++++++++++++++++++++++++++++
	l_nav_lv03
	++++++++++++++++++++++++++++*/
	.l_nav_item_lv03 {}

	.l_nav_ttl_lv03 {}

	/*-----------------------------
	l_header_bnr
	-----------------------------*/
	.l_header_bnr_item {
		--icon-url: url(../images/icon_web.svg);
		width: 26rem;
		height: 7.4rem;
		border-radius: 0.4rem;
		padding: 1rem 1.8rem 1rem 4.6rem;
		color: #fff;
		font-size: 1.6rem;
		letter-spacing: 0.08em;
		/* margin-top: 1.6rem; */
		margin: 0 auto;
		position: relative;
		text-decoration: none;
		border-radius: 3.7rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.l_header_bnr_item+.l_header_bnr_item {
		margin-top: 1rem;
	}

	.l_header_bnr_item:before {
		content: '';
		display: block;
		position: absolute;
		width: 2.8rem;
		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: #fff;
		left: 1.8rem;
		top: 50%;
		transform: translateY(-50%);
	}

	.l_header_bnr_item span {
		line-height: 1;
		font-size: 1.1rem;
	}

	.l_header_bnr_item em {
		line-height: 1;
		font-size: 1.5rem;
		font-weight: 500;
		letter-spacing: 0.1em;
		margin-top: 0.8rem;
	}
}