@charset "utf-8";

.pc_only {
	display: none !important;
}

/* WPツールバー非表示 */
#wpadminbar {
	display: none !important;
}

/* ヘッダー */
header {
	z-index: 8;
}
/* 固定ヘッダー */
.header_fixed {
	justify-content: space-between;
	z-index: 8;

	.sp_link {
		display: flex;

		& li {
			height: 64rem;
			display: grid;
			place-content: center;

			& span {
				font-size: 10rem;
				font-weight: 700;
				display: inline-block;
				position: relative;

				&::before {
					content: '';
					width: 16rem;
					height: 16rem;
					margin-inline: auto;
					position: absolute;
					inset: 0;
				}
			}
		}
		& .tel_btn {
			width: 64rem;

			& span {
				line-height: 1.8;
				padding-top: 19rem;

				&::before {
					background-color: var(--green-4);
					-webkit-mask: url(/images/common/tel.svg) no-repeat center / 100% auto;
					mask: url(/images/common/tel.svg) no-repeat center / 100% auto;
				}
			}
		}
		& .reserve_btn {
			width: 110rem;

			& span {
				line-height: 1.5;
				padding-top: 18rem;

				&::before {
					background: url(/images/common/calender.svg) no-repeat center / 100% auto;
				}
			}
		}
	}
	&.scroll-up {
		translate: 0 -100%;
	}
	&.bg_gre4 .head_logo {
		filter: var(--img-white);
	}
}

/* 固定ヘッダー_電話ボタンモーダル */
.modal_window {
	margin: 128rem auto 0;
	position: relative;
}
.modal_list_wrap a {
	position: relative;

	&::after {
		content: '';
		width: 15rem;
		height: 5rem;
		border-right: var(--border-green-4);
		border-bottom: var(--border-green-4);
		margin-block: auto;
		position: absolute;
		inset: 0 auto;
		right: 12rem;
		transform: skew(45deg);
	}
}

/* フローティングメニュー */
.floating {
	display: none;
	position: fixed;
	inset: auto 0 0;
	z-index: 10;
}
.float_menu_list {
	height: 72rem;
	display: grid;
	grid-template-columns: repeat(5, 1fr);

	& a,
	& .btn_trigger {
		display: grid;
		place-content: center;
		gap: 6rem;

		& .fc_bla {
			font-size: 10rem;
			font-weight: 700;
			line-height: 1.8;
		}
	}
	& a {
		height: 72rem;

		& img {
			margin-inline: auto;
		}

		&.active span {
			color: var(--orange);
		}
		&.active img {
			filter: invert(53%) sepia(34%) saturate(1210%) hue-rotate(334deg) brightness(92%) contrast(90%);
		}
	}
	& li:nth-child(1) img {
		width: 22rem;
	}
	& li:nth-child(2) img {
		width: 17rem;
	}
	& li:nth-child(3) img {
		width: 19rem;
	}
	& li:nth-child(4) img {
		width: 26rem;
	}
	/* ハンバーガーアイコン */
	& .hamb_icon {
		width: 24rem;
		height: 19rem;
		margin-inline: auto;
		position: relative;

		& span {
			height: 1.5rem;
			background-color: var(--green-1);
			position: absolute;

			&:nth-child(1) {
				inset: auto 0;
			}
			&:nth-child(2) {
				margin-block: auto;
				inset: 0;
			}
			&:nth-child(3) {
				inset: auto 0 0;
			}
		}
	}
	/* アニメーション */
	.menu-open .hamb_icon {
		span:nth-of-type(1),
		span:nth-of-type(3) {
			margin-block: auto;
			inset: 0;
		}
		span:nth-of-type(1) {
			rotate: 45deg;
		}
		span:nth-of-type(2) {
			background: transparent;
		}
		span:nth-of-type(3) {
			rotate: -45deg;
		}
	}
}

/* グロナビ_スライドメニュー */
.gnav {
	width: 100vw;
	height: 100vh;
	background: var(--green-4);
	line-height: 1.5;
	padding: 94rem 32rem 152rem;
	position: fixed;
	inset: 0;
	top: -100vh;
	overflow-y: scroll;
	z-index: 9;

	.menuOpen & {
		top: 0;
	}

	& .sp_logo {
		width: 142rem;
		filter: var(--img-white);
		position: absolute;
		top: 12rem;
		left: 12rem;
	}

	& .ttl_icon {
		font-size: 16rem;
		padding-block: 24rem;

		/* SPのみアコーディオン */
		&.sp-acc {
			position: relative;

			&::before,
			&::after {
				content: '';
				width: 20rem;
				height: 1px;
				background-color: var(--white);
				margin-block: auto;
				position: absolute;
				inset: 0 auto;
				right: 0;
			}
			&::before {
				rotate: -90deg;
			}
			&.open::before {
				background-color: transparent;
				rotate: 0deg;
			}
		}
	}
	/* リンク矢印 */
	.nav_menu > a,
	.nav_menu_list a,
	.sub_menu a:not([target="_blank"]) {
		display: block;
		position: relative;

		&::after {
			content: '';
			width: 15rem;
			height: 5rem;
			border-right: var(--border-white);
			border-bottom: var(--border-white);
			margin-block: auto;
			position: absolute;
			inset: 0 auto;
			right: 0;
			transform: skew(45deg);
			transform-origin: right bottom;
		}
	}
	& .nav_menu + .nav_menu .ttl_icon {
		border-top: var(--border-green-1);
	}
	& .nav_menu a:last-of-type .ttl_icon {
		border-bottom: var(--border-green-1);
	}
	& ul a {
		font-weight: 400;
		display: block;
	}
	& .nav_menu_list {
		padding-bottom: 32rem;
		display: none;

		& li + li {
			margin-top: 12rem;
		}
		& a {
			font-size: 14rem;
			padding-block: 14rem;
		}
	}
	& .sub_menu {
		margin-top: 32rem;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 32rem;

		& a {
			border-bottom: var(--border-green-1);
			padding-block: 16rem;

			& span {
				font-size: 12rem;
				display: block;
			}
		}
	}
	& .btn {
		width: 338rem;
		height: 72rem;
		margin-top: 48rem;

		& span {
			background-size: 20rem;
			font-size: 16rem;
			font-weight: 700;
			padding-left: 28rem;
		}
	}
	& .sns_list {
		margin-top: 32rem;
		justify-content: center;
		gap: 32rem;
	}
}

/* クリニックページ_電話番号リンク下線 */
.clinic_info td a[href^="tel:"] {
	border-bottom: var(--border-green-4);
}