@charset "utf-8";

:root {}

#odyssey_list {
	margin: 3rem auto 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 2rem;

	section {
		border: 1px solid silver;
		border-radius: .5rem;
		padding-bottom: 1rem;
		overflow: hidden;

		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		gap: .7em;

		h4 {
			background: #eee;
			padding: .5em .7em;
			font-size: 1.1em;
			font-weight: 500;

			inline-size: fit-content;
			margin-inline: auto;
			text-align: left;
			width: 100%;
		}

		p {
			font-size: .9em;
			text-align: left;
			font-weight: 300;
		}

		>*+* {
			margin: 0 1rem;
			align-self: start;
		}

		ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: start;
			font-size: .9em;
			font-weight: 300;
			gap: .3em 2.5em;
			padding-left: 1.5em;

			li {
				margin: 0;
				list-style: disc;
			}
		}

		aside {
			display: flex;
			justify-content: center;
			gap: .3em .5em;
			flex-wrap: wrap;

			a {
				display: block;
				border: 1px solid silver;
				padding: .2em .5em;
				border-radius: .3em;
				color: rgb(var(--mainColor));

				&[target="_blank"] {
					&::after {
						display: inline-block;
						content: "";
						background-color: rgb(var(--mainColor));

						-webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0-201.4 201.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3 448 192c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 96C35.8 96 0 131.8 0 176L0 432c0 44.2 35.8 80 80 80l256 0c44.2 0 80-35.8 80-80l0-80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 80c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l80 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 96z"/></svg>');
						-webkit-mask-size: contain;
						mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0-201.4 201.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3 448 192c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 96C35.8 96 0 131.8 0 176L0 432c0 44.2 35.8 80 80 80l256 0c44.2 0 80-35.8 80-80l0-80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 80c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l80 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 96z"/></svg>');
						mask-size: contain;
						mask-repeat: no-repeat;

						height: .7em;
						width: .7em;

						margin: 0 0 0 .3em;
					}
				}

				&:hover {
					background: rgb(var(--mainColor));
					color: white;
					border: 1px solid rgb(var(--mainColor));

					&[target="_blank"] {
						&::after {
							background: white;
						}
					}
				}
			}
		}
	}
}

#gaiyou {
	text-align: left;
}

#onegai {
	margin: 2rem auto 0 auto;
	font-size: 1.2em;
	inline-size: fit-content;
	margin-inline: auto;
	text-align: left;
}

#juken_flow {
	ul {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
		gap: 1rem;

		>*+* {}

		li {
			border: 1px solid silver;
			padding: 1rem;
			border-radius: .5rem;

			h4 {
				text-align: left;
				font-size: 1.1em;
				font-weight: 400;
				color: rgb(var(--mainColor));

				span {
					font-size: .9em;
					background: rgb(var(--mainColor));
					color: white;
					padding: .1em .5em;
					border-radius: .3em;
					margin: 0 .5em 0 0;
					font-weight: 600;
					display: inline-block;
				}
			}

			>*+* {
				font-size: .9em;
				text-align: left;
				margin: .7em auto 0 auto;

				aside {
					font-size: .9em;
					text-align: left;
					margin: .7em auto 0 auto;
					color: red;
				}
			}
		}
	}
}


/***********************************/

.form_title {
	--clamp-max: 35;
	--clamp-min: 23;
	font-size: var(--clamp);

	span {
		font-size: .8em;
		margin: 0 .3em 0 0;
	}
}

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

	article {
		text-align: left;
		display: grid;
		grid-template-columns: 12em 1fr;
		margin: 3rem auto 0 auto;

		>* {
			padding: 1.2em;
			border-top: 1px solid silver;
		}

		>*: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;

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

				strong {
					font-weight: 500;
					color: red;
				}

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

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

				&: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(even):not(:nth-child(4n)) {
			background: #f4f4f4;
		}

		>*:nth-child(2n-1):not(:nth-child(4n-1)) {
			background: #f4f4f4;
		}

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

	@media (max-width: 768px) {
		article {
			grid-template-columns: 1fr;

			>* {
				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;
			}

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

p#doui {
	inline-size: fit-content;
	margin-inline: auto;
	text-align: left;
}

#privacy {
	margin: 0 auto;
	width: min(860px, 100%);
	padding: 1.5em;
	background: #efefef;
	border: 1px solid silver;

	/*height:40vh;
	overflow-x: auto;*/
	h4.section_title {
		font-size: 1.3em;
	}

	p {
		text-align: left;
	}

	aside {
		font-size: .9em;
		margin: .5em auto 0 auto;
		text-align: left;
		display: flex;
		justify-content: center;
		gap: .3em .5em
	}

	table {
		width: 100%;
		border: 2px solid silver;
		background: white;

		tr {

			th,
			td {
				border: 1px solid silver;
				padding: .3em .5em;
				vertical-align: middle;
			}

			th {
				text-align: left;
			}

			td {
				text-align: right;
			}

			&:first-of-type {
				th {
					text-align: center;
					background: #ecf0f9;
				}
			}
		}
	}

	ul {
		li {
			text-align: left;
			margin: 0 0 0 2em;
			list-style: disc;

			i {
				font-weight: 600;
				color: red;
				text-decoration: underline;
				text-underline-offset: .2em;
			}

			strong {
				font-weight: 600;
			}
		}
	}

	@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;
		}
	}
}