@charset "UTF-8";

/*------------------------------------------------------
	ヘッダー
------------------------------------------------------*/
/* --------------------------------------
PC
-------------------------------------- */

/* 非表示 */
.mobile_menu_btn,
.mobile_menu_container,
.mobile_clinic_description {
	display: none;
}



header {
	border-top: 1.3rem solid #FFE0E0;
	text-align: center;
	font-weight: 500;

	& * {
		margin: auto;
	}
}

.header_contents {
	max-width: 1350px;
	position: relative;
	background-color: #FFF;

	.site_name_wrapper {
		width: fit-content;
		margin-bottom: 5.5rem;
		position: relative;

		&>* {
			position: relative;
			z-index: 5;
		}
	}

	.logo {
		width: 7.8rem;
		padding-top: 2.5rem;
		margin-bottom: 1.3rem;
	}

	.english_caption {
		width: 31rem;
		margin-bottom: 0.8rem;
	}

	.header_clinic_name {
		font-size: 3.45rem;
	}

	.global_navigation {
		max-width: 78rem;
		padding-bottom: 1rem;
		font-size: 2.3rem;
		position: relative;
		z-index: 5;
	}
}

.clinic_description>*,
.clinic_tel_address>* {
	z-index: 10;
}

.clinic_description {
	width: 35rem;
	aspect-ratio: 14 / 9;
	position: absolute;
	top: 15%;
	left: 0;
	background: url(../img/header_balloon_left_illustration.png) no-repeat;
	background-size: contain;
	font-size: 1.8rem;

	& p {
		position: absolute;
		top: 19%;
		left: 32%;
		text-align: left;
		line-height: 1.7;

		&::before {
			content: "“";
			margin-left: -1.5rem;
		}

		&::after {
			content: "”";
			margin-left: -0.9rem;
		}
	}
}

.clinic_tel_address {
	width: 32rem;
	aspect-ratio: 64 / 45;
	position: absolute;
	top: 15%;
	right: 0.5%;
	background: url(../img/header_balloon_right.png) no-repeat;
	background-size: contain;
	background-position: right;

	& address {
		position: absolute;
		top: 23%;
		right: 4.5%;
		text-align: left;
	}

	.tel {
		margin-bottom: 0.5rem;
		font-size: 3.4rem;
	}

	.post_code,
	.street_address {
		font-size: 1.8rem;
		line-height: 1.65;
		text-indent: 5.5rem;
	}
}



/* ----------PCレスポンシブ---------- */
@media screen and (min-width: 1921px) {
	.header_contents {
		max-width: 2000px;
	}
}



@media screen and (max-width: 1194px) {
	.clinic_description {
		width: 29vw;
		top: 3.4vw;
		font-size: 1.5vw;

		& p::before {
			margin-left: -1.3rem;
		}

		& p::after {
			margin-left: -0.7vw;
		}
	}

	.clinic_tel_address {
		width: 27vw;
		top: 3.4vw;

		.tel {
			font-size: 2.85vw;
		}

		.post_code,
		.street_address {
			font-size: 1.55vw;
		}
	}
}



/* --------------------------------------
モバイル
-------------------------------------- */
@media screen and (max-width: 768px) {

	/* ↓表示・非表示↓ */
	.header_contents .global_navigation,
	.clinic_description,
	.clinic_tel_address {
		display: none;
	}

	.mobile_menu_btn,
	.mobile_menu_container,
	.mobile_clinic_description {
		display: block;
	}

	/* ↑表示・非表示↑ */



	header {
		border-top-width: 0;

		& * {
			margin: 0;
		}
	}



	.header_contents {
		.site_name_wrapper {
			width: 100%;
			height: clamp(3.6rem, 15.3vw, 11.7rem);
			margin: 0;
			display: flex;
			align-items: center;
			position: fixed;
			top: 0;
			z-index: 5;
			background-color: #FFF;
			border-top: 1.3vw solid #FFE0E0
		}

		.logo_wrapper {
			flex: 14.5%;
		}

		.logo {
			width: 10.5vw;
			margin: 1vw 0 0 1.6vw;
			padding: 0;
		}

		.clinic_name_wrapper {
			flex: 70.5%;
			margin-top: 1vw;
		}

		.english_caption {
			width: 48.2vw;
			margin-bottom: 1vw;
		}

		.header_clinic_name {
			text-align: left;
			font-size: 5.35vw;
		}
	}



	.mobile_menu_btn {
		flex: 15%;
		height: 100%;
		text-align: right;

		&:hover {
			opacity: 0.6;
			transition: opacity 0.1s linear;
			cursor: pointer;
		}
	}

	.mobile_menu_container {
		position: fixed;
		top: 1.3vw;
		right: -100vw;
		z-index: 10;
		width: 86%;
		height: 142vw;
		overflow-y: scroll;
		background-color: #7FB8FF;
		border-radius: 6vw;
		border-top-right-radius: 0;
		transition: right 0.2s ease-in-out;

		.tel_container {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 75vw;
			height: 13vw;
			margin: 9vw auto 5.5vw;
			background-color: #FFF;
			border-radius: 4vw;
			color: #4294F8;

			.tel_text {
				font-size: 4vw;
			}

			.tel {
				font-size: 5vw;
				font-weight: 600;

				&::before {
					background-image: url(../img/tel_icon_original.png);
					width: 6vw;
					margin: 0 2vw;
					transform: translateY(0.1vw);
					filter: brightness(0) saturate(100%) invert(47%) sepia(50%) saturate(2755%) hue-rotate(196deg) brightness(104%) contrast(94%);
				}
			}
		}
	}

	/* JS・メニュー表示用 */
	.menu_is_open {
		display: block;
		height: min(142vw, 100%);
		right: 0;
	}

	/* JS・メニューチラつき防止用 */
	.is_resize {
		transition: none;
	}

	.menu_close_btn {
		width: 15.3vw;
		aspect-ratio: 1 / 1;
		padding: 3.1vw;
		position: absolute;
		top: 0;
		right: 0;

		&:hover {
			opacity: 0.6;
			transition: opacity 0.1s linear;
			cursor: pointer;
		}

		/* 閉じるボタン・バツ印↓ */
		.close_btn_line,
		.close_btn_line::before {
			display: inline-block;
			width: 5.5vw;
			height: 0.6vw;
			position: absolute;
			border-radius: 1vw;
			background-color: #FFF;
		}

		.close_btn_line {
			top: 50%;
			right: 50%;
			transform: translateX(50%) rotate(45deg);

			&::before {
				content: "";
				top: 0;
				right: 0;
				transform: rotate(90deg);
			}
		}

		/* 閉じるボタン・バツ印↑ */
	}

	.mobile_global_navigation {
		padding: 9vw 0 0 12.3vw;
		font-size: 5vw;
		color: #FFF;

		& a {
			transition: opacity 0.1s linear;

			&:hover {
				opacity: 0.5;
			}
		}
	}

	_::-webkit-full-page-media,
	_:future,
	:root .site_map li::before {
		content: "●";
		color: #4294F8;
		margin-right: 2vw;
	}

	.site_map {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		row-gap: 6.7vw;

		& li {
			padding-left: 1.2vw;
		}

		& li::marker {
			content: "●";
			color: #4294F8;
		}

		& li:has(>ul.sub_site_map) {
			text-align: start;
		}
	}

	_::-webkit-full-page-media,
	_:future,
	:root .sub_site_map li::before {
		content: "・";
		margin-right: 1vw;
	}
	
	
	.sub_site_map {
		margin-top: 6.8vw;
		margin-left: 4vw;
		display: flex;
		flex-direction: column;
		row-gap: 6.8vw;

		& li {
			padding-left: 0;
		}

		& li::marker {
			content: "・";
		}
	}


	.mobile_clinic_description {
		width: 92%;
		margin: 17.5vw auto 0;
		padding: 1vw 0;
		background-color: #F5F5F5;
		border-radius: 2.5vw;

		& p {
			text-align: center;
			font-size: 2.93vw;
			line-height: 1.5;
		}

		.tel_container {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: auto;
			font-weight: 600;
		}

		.tel_text {
			font-size: 3.2vw;
		}

		.tel {
			padding-right: 2vw;
			font-size: 4.2vw;

			&::before {
				width: 4.3vw;
				margin: 0 1.2vw;
				transform: unset;
			}
		}
	}

}