@charset "UTF-8";

@font-face {
	font-family: "Kosugi Maru";
	src: url(../fonts/KosugiMaru-Regular.ttf) format("truetype");
	font-display: swap;
}

/*------------------------------------------------------
	全般
------------------------------------------------------*/

/* --------------------------------------
PC
-------------------------------------- */
/* 非表示 */
.mobile_br {
	display: none;
}

html,
body {
	margin: auto;
	background-color: #FFF;
	color: #4C6179;
	font-size: 10px;
	font-family: 'Noto Sans JP', 'Arial', 'Meiryo', sans-serif;
}

.header_clinic_name,
.footer_clinic_name {
	font-family: "Kosugi Maru", "Noto Sans JP", "Arial", sans-serif;
}

.global_navigation {
	width: 90%;

	& ul {
		display: flex;
		justify-content: space-between;
	}

	& a {
		color: #FE6986;
		transition-duration: 0.5s;

		&:hover {
			opacity: 0.5;
		}
	}
}

.clinic_tel_address .tel,
.upper_footer_contents .tel {
	font-weight: 600;
	letter-spacing: 0.15rem;
}

/* 電話アイコン */
.clinic_tel_address .tel::before,
.upper_footer_contents .tel::before,
.mobile_clinic_description .tel::before,
.tel_container .tel::before {
	content: "";
	background: url(../img/tel_icon.png) no-repeat center / contain;
	display: inline-block;
	width: 4rem;
	aspect-ratio: 40 / 33;
	margin-right: 1.6rem;
	transform: translateY(0.3rem);
}

.main_contents_wrapper {
	margin: 0 auto;
	font-size: 1.86rem;
}

.firstview_message,
.main_contents_header {
	margin: 0 auto;
	text-align: center;
}

.firstview_message {
	margin-top: 0.9rem;
	margin-bottom: 6.7rem;
	font-size: 1.605rem;
}

.main_contents_header {
	width: 52rem;
	max-width: 100%;
	aspect-ratio: 1045 / 314;
	background: url(../img/page_title_frame.png) no-repeat center / 100% 100%;

	& h1 {
		padding: 1rem 0 1.6rem;
		font-size: 4.2rem;
		font-weight: 500;
	}

	& p {
		font-size: 1.8rem;
		text-indent: 1rem;
	}
}


/* border代替：点線 */
header .global_navigation,
.media_reviews_wrapper,
.owner_message {
	background-image: linear-gradient(to right, #000, #000 2.5px, transparent 2.5px, transparent 10px);
	background-size: 10px 2.5px;
	background-position: left bottom;
	background-repeat: repeat-x;
}



/* table Gridレイアウト */
.career_table,
.price_table {
	display: grid;
	grid-template-columns: repeat(2, fit-content(100%));
	width: fit-content;

	& tbody,
	& tr {
		display: contents;
	}

	& th,
	& td {
		display: block;
	}
}


/* ページトップボタン */
.pagetop_btn {
	width: 10rem;
	position: fixed;
	bottom: 5%;
	right: 5%;
	transition-duration: 0.5s;

	&:hover {
		cursor: pointer;
		opacity: 0.7;
	}
}



/* ----------PCレスポンシブ---------- */
@media screen and (min-width: 1921px) {

	html,
	body {
		font-size: 15px;
	}
}



@media screen and (max-width: 1350px) {
	.main_contents_wrapper {
		width: 90%;
	}
}



@media screen and (max-width: 1194px) {

	.clinic_tel_address .tel::before,
	.upper_footer_contents .tel::before {
		width: 3.5vw;
		margin-right: 1vw;
	}
}



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

	/* 表示 */
	.mobile_br {
		display: inline;
	}



	html,
	body {
		scroll-padding-top: 17vw;
	}



	.pagetop_btn {
		width: clamp(10rem, 24vw, 18.5rem);
		bottom: 2%;
		right: 4%;
	}



	.firstview_message {
		margin-top: 1.6vw;
		margin-bottom: 7.5vw;
		font-size: 3.1vw;
	}

	.main_contents_header {
		width: 100%;
		padding: 2vw 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		& h1 {
			padding: 0 0 3vw;
			font-size: 8vw;
		}

		& p {
			font-size: 3.7vw;
			text-indent: 1vw;
		}
	}
}