@charset "utf-8";

:root {
	--subColor: #4ecfeb;
	--lineColor: #53e8f9;
}



.addtoany_content {
	margin-top: 5rem !important;
}

body {
	background: url(../../img/pages/admission/ao.png), var(--subColor);
}


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

		section {
			border-radius: .7rem;
			background: white;
			padding: 1.5rem;

			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 3;
			gap: 0;

			figure {
				figcaption {
					margin: 1.5em auto 0 auto;
					inline-size: fit-content;
					margin-inline: auto;
					text-align: left;
					font-weight: 500;
					font-size: 1.1em;
				}
			}

			p {
				text-align: left;
				margin: 1em auto 0 auto;
			}

			aside {
				margin: 1rem auto 0 auto;
				display: flex;
				justify-content: end;
				flex-wrap: wrap;
				gap: .2em .5em;
				width: 100%;

				a {
					color: rgb(var(--mainColor));
					display: inline-block;
					font-weight: 400;
					text-decoration: underline;
					text-underline-offset: .2em;

					&::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 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z"/></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 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z"/></svg>');
						mask-size: contain;
						mask-repeat: no-repeat;

						height: 1em;
						width: 1em;
						margin: 0 0 0 .3em;
						vertical-align: -1px;
					}

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

	>p {
		color: white;
		margin: 2em auto 0 auto;
		font-size: 1.2em;
		font-weight: 500;

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

	@media print {
		>div {
			section {
				border: 2px solid #4ecfeb;

				figure {
					img {
						width: 120px;
					}
				}

				aside {
					display: none;
				}
			}
		}

		>p {
			color: rgb(var(--baceFontColor));
		}
	}
}

#touroku_flow {
	position: relative;

	&::after {
		content: url(../../img/pages/admission/woman_point.png);
		position: absolute;
		top: -30px;
		right: 3rem;
	}

	> div:nth-of-type(1) {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
		gap: 1.5rem;
		section {
			border-radius: .7rem;
			background: white;
			padding: 2rem;
			background: #f4fde6;
			figure {
				figcaption {
					font-size: 1.2em;
					margin: 1.5rem auto 0 auto;
					inline-size: fit-content;
					margin-inline: auto;
					text-align: left;
					font-weight: 500;
				}
			}
			p {
				text-align: left;
				margin: .7em auto 0 auto;
				font-weight: 400;
			}
			aside {
				font-size: .9em;
				margin: .5em auto 0 auto;
				text-align: left;
			}
		}
	}

	> div:nth-of-type(2) {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
		gap: 2rem;
		margin: 2rem auto 0 auto;

		> aside {
			border: 1px solid #856943;
			background: #ffffe6;
			border-radius: .5em;
			padding: 1.5rem;
			h4 {
				font-size: 1.1em;
				font-weight: 500;
				text-align: left;

				&::before {
					content: "■";
					font-size: .8em;
					margin: 0 .3em 0 0;
					vertical-align: 1px;
				}
			}
			p {
				margin: .5em auto 0 auto;
				text-align: left;
			}
			> div {
				display: grid;
				grid-template-columns: 1fr 200px;
				gap: 1rem;
			}
		}
	}

	@media print {
		>div:nth-of-type(1) {
			>*+* {
				border-top: 1px solid silver;
			}

			section {
				display: grid;
				grid-template-columns: 1fr 2fr;
				gap: 2rem;
				padding: 0;
				align-items: center;
				border-radius: 0;

				figure {
					display: flex;
					flex-direction: column-reverse;

					img {
						width: 100px;
						margin: 1rem auto 0 auto;
					}
				}
			}
		}
	}

	@media (max-width: 800px) {
		> div:nth-of-type(2) {
			> aside{
				> div{
					grid-template-columns: 1fr;
				}
			}
		}
		&::after {
			display: none;
		}
	}
}

#uketuke {

	/*入退館時における受付業務*/
	section {
		display: grid;
		grid-template-columns: 17em 1fr;
		align-items: center;
		border-top: 1px solid silver;
		background: white;

		h4 {
			font-size: 1.2rem;
			font-weight: 500;
			inline-size: fit-content;
			margin-inline: auto;
			text-align: left;
			color: rgb(var(--mainColor));
		}

		>* {
			padding: 1.5em;
		}

		p {
			text-align: left;

			span,
			a {
				background: var(--subColor);
				display: inline-block;
				padding: .1em .3em 0 .3em;
				border-radius: .3em;
				font-weight: 500;
				margin: 0 .3em;
				border: 1px solid white;
				color: white;
			}

			a {
				background: rgb(var(--mainColor));

				&:hover {
					opacity: .75;
				}
			}
		}

		&:first-of-type {
			border-radius: .7rem .7rem 0 0;
			border-top: none;
		}

		&:last-of-type {
			border-radius: 0 0 .7rem .7rem;
		}
	}

	@media print {
		section {
			>* {
				padding: 1.5em 0;
			}
		}
	}

	@media (max-width: 800px) {
		section {
			display: block;

			h4 {
				inline-size: auto;
				padding: 1.5em 1.5em 0 1.5em;
			}
		}
	}
}

#original {
	/*オリジナルデザインのカード作成*/
	position: relative;
	scroll-margin-top: 110px;

	&::after {
		content: url(../../img/pages/admission/designer.png);
		position: absolute;
		right: 2rem;
		top: -2rem;
	}

	> div {
		display: grid;
		grid-template-columns: 400px 1fr;
		gap: 2rem;

		figure {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1rem;
		}

		>div {
			text-align: left;

			>*+* {
				margin-top: .7rem;
			}

			strong {
				font-weight: 500;
			}

			aside {
				font-size: .9em;
			}
		}
	}

	@media (max-width: 1000px) {
		&::after {
			display: none;

		}

		>div {
			display: block;

			figure {
				width: min(400px, 100%);
				margin: 0 auto;
			}

			>div {
				margin: 1rem auto 0 auto;
			}
		}
	}
}