@charset "utf-8";

:root {
	--subColor: #f8f9fa;
	--lineColor: #c4d1dd;
}

body {
	background: var(--subColor);
}

#page_title {
	color: #284e8c !important;
}

:where(label):has(+ :where(textarea, input, select)) {
	display: block;
}

:where(button, input, select, textarea) {
	font-family: inherit;
	font-size: inherit;
}

input[type="checkbox"],
input[type="radio"] {
	all: revert;
}

a[href*="tel:"] {
	/*電話*/
	pointer-events: none;
	cursor: text;
	text-decoration: none;
	color: rgb(var(--baceFontColor));

	@media (max-width: 768px) {
		pointer-events: revert;
		text-decoration: revert;
		text-decoration-thickness: 1px;
	}
}

/*-----------------------------------------------------	*/
/*	for all						*/
/*-----------------------------------------------------	*/
/*** main px ***/
#tel_fax {
	margin: 1.5em auto 0 auto;

	svg {
		fill: rgb(var(--baceFontColor));
		margin: 0 .3em 0 0;
	}

	span {
		font-weight: 600;
		font-size: 1.2em;

		&:nth-of-type(1) {
			font-size: 1.2em;
			margin-right: 1em;

			a {
				font-weight: 600;
			}
		}

		&:nth-of-type(2) {
			--clamp-min: 17;
			--clamp-max: 22;
			font-size: var(--clamp);
		}
	}

	br {
		display: none;
	}

	@media (max-width: 768px) {
		span {
			&:nth-of-type(1) {
				margin-right: 0;
			}
		}

		br {
			display: block;
		}
	}
}

#contact {
	width: min(860px, calc(100% - 40px));
	margin: 30px auto 0 auto;
	border: 1px solid silver;
	padding: 2em;
	background: white;
	border-radius: .7em;

	article {
		display: grid;
		grid-template-columns: minmax(10em, 12em) 1fr;
		background-color: silver;
		/* これが線の色 */
		gap: 1px;
		/* これが線の太さ */
		border: 1px solid silver;
		border-top: 2px solid silver;

		&>* {
			background-color: white;
			/* 中身を白く塗ることで、隙間だけが線に見える */
			padding: 1.2em;
			border: none;
		}

		>*:nth-child(odd) {
			text-align: right;
			border-left: 1px solid silver;
			padding-top: calc(1.2em + .5em);
		}

		>*:nth-child(even) {
			border-right: 1px solid silver;
			text-align: left;

			aside {
				font-size: .9rem;
				margin: .3em auto 0 auto;

				&:has(+ *) {
					margin: .3em auto;
				}
			}

			aside+label {
				margin-bottom: 0;
			}

			&:has(ul) {

				/*チェックやラジオはフレックス*/
				ul {
					padding-top: .5em;
					display: flex;
					justify-content: start;
					gap: .3em 1em;
					flex-wrap: wrap;

					li:has(input) {
						input {
							width: auto;
						}
					}
				}
			}
		}

		>*:nth-last-child(1),
		>*:nth-last-child(2) {
			border-bottom: 1px solid silver;
			border-bottom: 1px solid silver;
		}

		&>*:nth-child(4n-1),
		&>*:nth-child(4n) {
			background-color: #f4f4f4;
		}

		>*:nth-child(1) {
			margin-top: 0;
		}
	}

	@media (max-width: 768px) {
		border: 0;
		padding: 0;

		article {
			grid-template-columns: 1fr;
			gap: 0;
			border-top: 1px solid gray;

			>* {
				padding: 0;
				border: none;
			}

			>*:nth-child(odd) {
				text-align: left;
				border: 1px solid silver;
				border-bottom: none;
				padding: 1.2em 1.2em 0 1.2em;
				font-weight: 400;
			}

			>*:nth-child(even) {
				border-left: 1px solid silver;
				border-right: 1px solid silver;
				padding: .5em 1.2em 1.2em 1.2em;
			}
		}
	}
}

#privacy {
	margin: 3em auto 0 auto;
	width: min(860px, 100%);
	padding: 1.5em;
	background: #efefef;
	border: 3px solid gray;
	height: 40vh;
	overflow-x: auto;
	> h3{
		font-size: 1.2em;
	}
	> p{
		margin:.5em auto 0 auto;
	}
	ul {
		margin:.5em auto 0 auto;
		li {
			h3 {
				font-size: 1.1rm;
			}
		}
	}

	@media (max-width: 1200px) {
		width: auto;
		max-width: none;
	}

	@media (max-width: 768px) {
		padding: 1.2em;
	}
}

form {
	div.g-recaptcha {
		>div {
			margin: 1.5em auto 0 auto;
		}
	}
}


.grecaptcha-badge {
	visibility: hidden;
}

.recaptcha-policy {
	margin: 1rem auto 0 auto;
	font-size: .8em;
	color: gray;
	inline-size: fit-content;
	margin-inline: auto;
	text-align: left;

	a {
		color: gray;
		text-decoration: underline;
		text-underline-offset: .2em;

		&:hover {
			text-decoration: none;
		}
	}
}