@charset "utf-8";

/* ========================================================
	reserve-medical.css => 受診予約受付
======================================================== */

.page-reserve {
	margin-bottom: 180px;
}
@media screen and (max-width: 768px) {
	.page-reserve {
		margin-bottom: 80px;
	}
}
.fz-reserve {
	font-size: 2rem;
	line-height: 2;
	letter-spacing: 0.06em;
}
@media screen and (max-width: 768px) {
	.fz-reserve {
		font-size: 1.9rem;
		line-height: calc(32 / 19);
	}
}

.o-heading {
	line-height: 1.4;
}
@media screen and (min-width: 769px) and (max-width: 1279px), print {
	.l-contents {
		width: 96%;
		padding-left: 0;
		padding-right: 0;
	}
}


/* reserve_index
============================================================================================================ */
.reserve_index_btn {
	display: flex;
	justify-content: center;
	gap: min(60px, calc(60 / 700 * 100%));
	margin-top: 60px;
}
.reserve_index_btn li {
	width: 320px;
}
.reserve_index_btn a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 110px;
	height: 380px;
	border: 4px solid #A4D4F5;
	text-align: center;
	font-weight: 500;
	line-height: 1.5;
	transition: opacity .3s ease-in-out;
}
.reserve_index_btn a .arrow {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 56px;
	margin-inline: auto;
	width: 80px;
	height: 80px;
	border-radius: 100%;
}
.reserve_index_btn a .arrow::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	margin-block: auto;
	left: calc(50% - 5px);
	width: 15px;
	height: 25px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.reserve_index_btn a.general {
	background: #A4D4F5;
	font-size: 5rem;
}
.reserve_index_btn a.general .arrow {
	background: #fff;
}
.reserve_index_btn a.general .arrow::after {
	background: #A4D4F5;
}
.reserve_index_btn a.univ {
	background-color: #fff;
	font-size: 4.2rem;
	line-height: calc(52 / 42);
}
.reserve_index_btn a.univ .arrow {
	background: #A4D4F5;
}
.reserve_index_btn a.univ .arrow::after {
	background: #fff;
}
@media screen and (max-width: 768px) {
	.reserve_index_btn {
		flex-direction: column;
		align-items: center;
		gap: 25px;
		margin-top: 50px;
	}
	.reserve_index_btn li {
		width: calc(240 / 375 * 100vw);
	}
	.reserve_index_btn a {
		padding-bottom: 80px;
		height: 285px;
	}
	.reserve_index_btn a .arrow {
		bottom: 40px;
		transform-origin: 50% 100%;
		transform: scale(calc(60 / 80));
	}
	.reserve_index_btn a.general {
		font-size: 3.6rem;
	}
	.reserve_index_btn a.univ {
		font-size: 2.9rem;
	}
}


.reserve_index_link {
	margin-top: 100px;
	border-bottom: 1px solid;
}
.reserve_index_link a {
	position: relative;
	display: block;
	padding: 10px 10px 10px 50px;
	transition: opacity .3s ease-in-out;
}
.reserve_index_link a::before {
	content: "";
	position: absolute;
	content: "";
	position: absolute;
	top: 50%;
	left: 20px;
	width: 12px;
	height: 12px;
	border-top: 3px solid;
	border-right: 3px solid;
	transform-origin: 100% 0;
	transform: rotate(45deg);
}
.reserve_index_link a span {
	display: inline-block;
}
@media (hover) {
}
@media screen and (max-width: 768px) {
	.reserve_index_link {
		margin-top: 40px;
	}
}



/* form
============================================================================================================ */
.reserve_form_lead {
	padding-bottom: 60px;
	border-bottom: 1px solid #E5E5E5;
}
.reserve_form_lead dt {
	margin-top: 50px;
	margin-bottom: 0.8em;
	font-size: 2.4rem;
	line-height: 1.5;
	font-weight: 500;
	color: #308EBF;
}
@media screen and (max-width: 768px) {
	.reserve_form_lead {
		padding-bottom: 50px;
	}
	.reserve_form_lead dt {
		margin-top: 30px;
		font-size: 2.2rem;
	}
}

#form {
	padding-top: 80px;
}
@media screen and (max-width: 768px) {
	#form {
		padding-top: 50px;
	}
}

.form_title {
	margin-bottom: 50px;
	text-align: center;
	font-weight: 500;
	font-size: 3.5rem;
	line-height: 1.2;
}
.form_title::after {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	margin: 20px auto 0;
	background: #a4d4f5;
	box-shadow: -12px 0 0 #a4d4f5, 12px 0 0 #a4d4f5;
}
@media screen and (max-width: 768px) {
	.form_title {
		font-size: 2.8rem;
	}
}

.form_head {
	margin-top: 0.8em;
	& + .form_head {
		margin-top: 0.8em;
	}
	.-red {
		color: #EB3333;
	}
	a {
		color: #005EAD;
		text-decoration: underline;
		@media (hover) {
			&:hover {
				text-decoration: none;
			}
		}
	}
}

.form_contents {
	position: relative;
	margin-top: 30px;
	font-size: 2.2rem;
	line-height: 1.6;
	font-weight: 400;
	@media screen and (max-width: 768px) {
		font-size: 1.9rem;
		line-height: calc(32 / 19);
	}

	h3 {
		margin-bottom: 40px;
		padding: 10px 20px;
		background-color: #a4d4f5;
		color: #fff;
		font-size: 2.4rem;
		font-weight: 500;
		line-height: 1.5;
		&:not(:first-child) {
			margin-top: 60px;
		}
		@media screen and (max-width: 768px) {
			margin-bottom: 20px;
			padding: 3px 15px 5px;
			font-size: 2.2rem;
		}
	}
}
.form_item {
	@media screen and (min-width: 1100px), print {
		display: flex;
		align-items: start;
		gap: 30px;
		dt {
			position: relative;
			width: 230px;
			flex-shrink: 0;
			display: flex;
			min-height: 8rem;
			justify-content: end;
			align-items: center;
			text-align: right;
			white-space: nowrap;
		}
		dd {
			flex-grow: 1;
		}
	}
	&:not(:last-child) {
		margin-bottom: 4rem;
	}
	dt {
		display: flex;
		align-items: center;
		gap: 15px;
		font-size: 2.2rem;
		font-weight: 500;
		line-height: 1.5;
		@media screen and (max-width: 1099px) {
			margin-bottom: 0.8rem;
		}
		@media screen and (max-width: 768px) {
			font-size: 2rem;
			margin-bottom: 0.8rem;
		}
		.hissu {
			display: inline-block;
			padding: 0.1rem 0.8rem .2rem;
			background-color: #EA3333;
			color: #fff;
			font-size: 1.7rem;
			line-height: 1.3;
			border-radius: 2px;
			@media screen and (max-width: 768px) {
				font-size: 1.6rem;
				line-height: 1.2;
			}
		}
	}
	.birth {
		display: flex;
		align-items: center;
		gap: 20px;
		@media screen and (max-width: 768px) {
			gap: .5rem;
		}
	}
	.flex {
		display: flex;
		gap: 50px;
		@media screen and (max-width: 768px) {
			flex-direction: column;
			gap: 10px;
		}
		ul {
			flex-wrap: nowrap;
			flex-shrink: 0;
			& + * {
				flex-grow: 1;
			}
		}
	}

	.h_checkbox ul {
		display: flex;
		flex-wrap: wrap;
		gap: 50px;
	}
	.v_checkbox ul {
		@media screen and (min-width: 769px), print {
			padding-top: 14px;
			label {
				height: auto;
				padding: 8px 0;
			}
		}
	}
	.radio_text {
		@media screen and (min-width: 769px), print {
			display: flex;
			gap: 2rem;
			margin-bottom: 1rem;
			.text {
				flex-grow: 1;
			}
		}
	}
}
.appointment_date_notes {
	padding: 22px 0;
	font-size: 2rem;
	@media screen and (max-width: 768px) {
		padding: 0 0 15px;
		font-size: 1.8rem;
	}
	.-red {
		color: #EB3333;
	}
}
.wait {
	display: none;
	max-width: 550px;
	padding: 0 1.5em;
	align-items: center;
	height: 8rem;
	background-color: #eee;
	opacity: 0.5;
	&.-show {
		display: flex;
		& + * {
			position: absolute !important;
			left: -9999px !important;
			top: -9999px !important;
		}
	}
	@media screen and (max-width: 768px) {
		height: 7rem;
		padding: 0 1em;
		line-height: 1.3;
	}
}
.appointment_date {
	margin-top: 25px;
	display: flex;
	align-items: center;
	gap: 30px;
	span {
		flex-shrink: 0;
	}
	@media screen and (max-width: 768px) {
		margin-top: 20px;
		flex-direction: column;
		gap: 10px;
		align-items: start;
	}
}
.appointment_time_select {
	max-width: 550px;
	@media screen and (max-width: 768px) {
	}
}
.calender_wrap {
	max-width: 550px;
	font-weight: 500;
	line-height: 1.5;
	.calender_item {
		background-color: #fff;
		border: 1px solid #E5E5E5;
		.ym {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 74px;
			background-color: #FAFAFA;
			border-bottom: 1px solid #E5E5E5;
			font-size: 2.2rem;
		}
		.table_wrap {
			padding: 5px;
		}
		table {
			width: 100%;
			table-layout: fixed;
			border-spacing: 2px;
			border-collapse: separate;
			thead {
				th {
					padding-bottom: 5px;
					font-weight: 500;
					text-align: center;
				}
			}
			tbody {
				td {
					background-color: #FAFAFA;
					border: 1px solid #E5E5E5;
					height: 60px;
					text-align: center;
					vertical-align: middle;
					cursor: pointer;
					&:empty {
						background-color: #fff;
						border-color: #fff;
						cursor: default;
						pointer-events: none;
					}
					&.disabled,
					&.past {
						color: #ccc;
						cursor: default;
						pointer-events: none;
					}
					&.holiday {
						background-color: #FDC6C6;
						color: #fff;
						cursor: default;
						pointer-events: none;
					}
					&.is-active {
						background-color: #0B82D3;
						color: #fff;
					}
				}
			}
		}
		@media screen and (max-width: 768px) {
			.ym {
				height: 48px;
				font-size: 1.9rem;
			}
			.table_wrap {
				padding: 3px;
			}
			table {
				thead {
					th {
						padding-bottom: 3px;
						font-size: 1.7rem;
					}
				}
				tbody {
					td {
						height: 46px;
					}
				}
			}
		}
	}
	.swiper-button-prev,
	.swiper-button-next {
		position: absolute;
		top: 0;
		width: 90px;
		height: 74px;
		margin: 0;
		&::after {
			content: "";
			display: block;
			width: 16px;
			height: 20px;
			background-color: #000;
			clip-path: polygon(0 0, 100% 50%, 0 100%);
		}
		&.swiper-button-disabled {
			opacity: 0.1;
		}
		@media screen and (max-width: 768px) {
			width: 50px;
			height: 48px;
			&::after {
				width: 9px;
				height: 12px;
			}
		}
	}
	.swiper-button-prev {
		left: 0;
		&::after {
			transform: scaleX(-1);
		}
	}
	.swiper-button-next {
		right: 0;
	}
}

.form_contents:has(input[type="radio"][name="kind"][value="その他"]:checked) .kind_other_hide {
	display: none;
}

.privacy_check {
	margin-top: 60px;
	text-align: center;
	label {
		width: fit-content;
		height: auto;
		margin-inline: auto;
		a {
			color: #005EAD;
			text-decoration: underline;
			@media (hover) {
				&:hover {
					text-decoration: none;
				}
			}
		}
	}
	@media screen and (max-width: 768px) {
		margin-top: 50px;
		label {
			text-align: left;
		}
	}
}

.form_btn {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 60px;
	text-align: center;
	gap: 35px;
	@media screen and (max-width: 768px) {
		margin-top: 50px;
		gap: 30px;
	}
	button {
		position: relative;
		width: 620px;
		height: 100px;
		background-color: #A4D4F5;
		border-radius: 50px;
		cursor: pointer;
		font-size: 2.8rem;
		font-weight: 500;
		&::before {
			content: "";
			position: absolute;
			top: 50%;
			right: 50px;
			width: 14px;
			height: 14px;
			border-top: 3px solid;
			border-right: 3px solid;
			transform-origin: 100% 0;
			transform: rotate(45deg);
		}
		&.-back {
			width: 400px;
			height: 60px;
			background-color: #BEC3C5;
			color: #fff;
			font-size: 2.2rem;
			&::before {
				right: auto;
				left: 30px;
				width: 12px;
				height: 12px;
				border-left: 3px solid;
				border-right: 0;
				transform-origin: 0 0;
				transform: rotate(-45deg);
			}
		}
		@media screen and (max-width: 768px) {
			width: 100%;
			height: 80px;
			font-size: 2.1rem;
			&:not(.-back)::before {
				right: 30px;
				width: 10px;
				height: 10px;
				border-top: 2px solid;
				border-right: 2px solid;
			}
			&.-back {
				width: 84%;
				height: 50px;
				font-size: 1.9rem;
				&::before {
					left: 30px;
					width: 12px;
					height: 12px;
					border-left: 3px solid;
					border-right: 0;
					transform-origin: 0 0;
					transform: rotate(-45deg);
				}
			}
		}
		@media (hover) {
			transition: opacity .3s ease-in-out;
			&:hover {
				opacity: 0.7;
			}
		}
	}
}
.-confirm {
	.form_contents {
		h3 {
			margin-bottom: 0;
			&:not(:first-child) {
				margin-top: 0;
			}
		}
	}
	.form_item {
		&:not(:last-child) {
			margin-bottom: 0;
			border-bottom: 1px solid #E5E5E5;
		}
		.hissu {
			display: none;
		}
	}
	@media screen and (min-width: 769px), print {
		.form_item {
			align-items: stretch;
			gap: 0;
			dt {
				@media screen and (min-width: 1100px), print {
					width: 250px;
					min-height: 8.5rem;
				}
				justify-content: start;
				padding: 15px 0 15px 20px;
				text-align: left;
				font-size: 2.2rem;
				font-weight: 500;
				line-height: 1.5;
				background-color: #fafafa;
			}
			dd {
				min-height: 8.5rem;
				display: flex;
				align-items: center;
				padding: 15px 40px;
				font-size: 2.2rem;
				line-height: 1.5;
			}
		}
	}
	@media screen and (max-width: 768px) {
		.form_item {
			dt {
				margin-bottom: 0;
				padding: 6px 10px;
				background-color: #fafafa;
			}
			dd {
				padding: 12px 10px 15px;
			}
		}
	}
}
.form_contents {
	:where(input, select, textarea, button) {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		max-width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		border-radius: 0;
		vertical-align: middle;
		font-family: inherit;
		font-weight: inherit;
		font-feature-settings: inherit;
		outline: none;
		font-size: 100%;
	}

	input[type=text],
	input[type=email],
	input[type=tel],
	input[type=number],
	input[type=date],
	input[type=url],
	textarea,
	select {
		width: 100%;
		height: 8rem;
		padding: 0 1.5em;
		background-color: #FAFAFA;
		border: 1px solid #E5E5E5;
		color: var(--color-base);
		transition: box-shadow .2s, border .2s;
		font-weight: 400;
		font-size: 2.2rem;
		@media screen and (max-width: 768px) {
			font-size: 1.9rem;
			height: 7rem;
			padding: 0 1em;
		}
		&:focus:not([readonly]) {
			border-color: #66afe9;
			outline: 0;
			box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,0.8);
		}
		&:disabled {
			background-color: #ddd;
			opacity: .5;
		}
		&.-size1 {
			width: 28rem;
			@media screen and (max-width: 768px) {
				width: 100%;
			}
		}
	}
	input[type=date] {
		width: auto;
	}
	textarea {
		height: 210px;
		padding: 1em 1.5em;
		@media screen and (max-width: 768px) {
			padding: 1em;
		}
	}
	.select_wrap {
		position: relative;
		display: block;
		width: fit-content;
		&::before {
			content: "";
			position: absolute;
			top: 50%;
			right: 20px;
			width: 10px;
			height: 10px;
			border-bottom: 3px solid #000;
			border-right: 3px solid #000;
			transform-origin: 100% 0;
			transform: rotate(45deg);
			pointer-events: none;
			@media screen and (max-width: 768px) {
				right: 8px;
				width: 8px;
				height: 8px;
				border-bottom: 2px solid #000;
				border-right: 2px solid #000;
			}
		}
	}
	.select_wide .select_wrap {
		width: 100%;
	}
	select {
		line-height: 7.8rem;
		padding: 0 5rem 0 1em;
		@media screen and (max-width: 768px) {
			line-height: 6.8rem;
			padding: 0 3rem 0 1.5rem;
		}
	}
	button:disabled {
		opacity: 0.3;
	}
	button[aria-disabled="true"] {
		position: relative;
		pointer-events: none;
	}
	&:has(.uploader__list li) button[aria-disabled="true"] {
		opacity: .3;
	}
	::placeholder {
		color: #BEC3C6;
	}

	input[type=checkbox],
	input[type=radio] {
		position: absolute;
		width: 2rem;
		height: 2rem;
	}
	label {
		position: relative;
		display: flex;
		align-items: center;
		gap: 10px;
		height: 8rem;
		@media screen and (max-width: 768px) {
			height: auto;
			padding: 1rem 0;
		}
		:is(input[type=radio], input[type=checkbox]) {
			& + span {
				position: relative;
				padding-left: 3.6rem;
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -1.8rem;
					width: 3.6rem;
					height: 3.6rem;
					background-color: #FAFAFA;
					border: 1px solid #E5E5E5;
				}
				&::after {
					content: "";
					position: absolute;
					opacity: 0;
					transition: opacity .1s;
				}
			}
			&:checked + span::after {
				opacity: 1;
			}
		}
		input[type=radio] + span {
			&::before {
				border-radius: 100%;
			}
			&::after {
				left: 50%;
				top: 50%;
				width: 2.4rem;
				height: 2.4rem;
				transform: translate(-50%,-50%);
				background-color: #0B82D3;
				border-radius: 100%;
			}
		}
		input[type=checkbox] + span {
			margin-right: 1rem;
			&::after {
				left: 1.1rem;
				top: calc(50% - 1.6rem);
				width: 1.5rem;
				height: 2.6rem;
				border-right: 0.5rem solid #0B82D3;
				border-bottom: 0.5rem solid #0B82D3;
				transform: rotate(45deg);
			}
		}
	}
}

.form_error {
	text-align: center;
	color: #f00;
	font-weight: 500;
	ul {
		margin-top: 2rem;
		padding: 2rem;
		border: 1px solid #f00;
		line-height: 2;
		li::before {
			content: "・";
		}
	}
	@media screen and (max-width: 768px) {
		text-align: left;
	}
}
.field_err {
	margin-top: 1rem;
	font-size: 1.8rem;
	line-height: 1.6;
	color: #f00;
	font-weight: 500;
	@media screen and (max-width: 768px) {
		font-size: 1.6rem;
	}
}


.fin_contents {
	.reserve_number {
		background-color: #FAFAFA;
		border-top: 1px solid #E5E5E5;
		border-bottom: 1px solid #E5E5E5;
		padding: 30px;
		text-align: center;
		margin-bottom: 40px;
		font-size: 2.8rem;
		font-weight: 500;
		line-height: 1.5;
		strong {
			color: #EA3333;
		}
		@media screen and (max-width: 768px) {
			margin-bottom: 30px;
			padding: 20px;
			font-size: 2.6rem;
		}
	}
	dl {
		margin-top: 1em;
		dt {
			font-weight: 500;
		}
	}
	.back_btn {
		margin-top: 100px;
		@media screen and (max-width: 768px) {
			margin-top: 60px;
		}
		a {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 400px;
			height: 60px;
			margin-inline: auto;
			border-radius: 30px;
			background-color: #A4D4F5;
			color: #fff;
			font-size: 2.2rem;
			font-weight: 500;
			line-height: 1.5;
			transition: opacity .3s ease-in-out;
			&::before {
				content: "";
				position: absolute;
				top: 50%;
				right: 30px;
				width: 8px;
				height: 8px;
				border-top: 2px solid;
				border-right: 2px solid;
				transform-origin: 100% 0;
				transform: rotate(45deg);
			}
			@media screen and (max-width: 768px) {
				width: 84%;
				height: 50px;
				font-size: 1.9rem;
			}
		}
	}
}