:root {
	--root-font-size: 16;
	--main_color: #e27700;
}
a {
	color: #323232;
}

body {
	/*font-family: "Noto Sans JP", sans-serif;*/
	font-family: sans-serif;
	a:hover {
		opacity: 0.5;
	}
}

.breadcrumb {
	max-width: 1200px;
	padding: 1em;
	margin-top: 2em;
	margin-left: auto;
	margin-right: auto;
	font-size: calc( 14 / var(--root-font-size) * 1rem );
}

.page_title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-size: calc( 24 / var(--root-font-size) * 1rem );
	font-weight: normal;
	&:before {
		content: '';
		width: 58px;
		height: 38px;
		background-image: url("../images/header/page_title.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
}

header {
	position: relative;
	@media screen and (max-width: 768px) {
		border-bottom: 1px solid #323232;
	}
	.wrap {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1em;
		gap: 2em;
		@media screen and (max-width: 768px) {
			padding: 0.5em;
		}
	}
	.logo {
		margin: 0;
		flex: 1;
		img {
			width: 100%;
			max-width: 360px;
			height: auto;
		}
	}
	.sp_menu {
		display: none;
		@media screen and (max-width: 768px) {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2.5em;
			height: 2.5em;
			cursor: pointer;
			box-sizing: border-box;
			border: 1px solid var(--main_color);
			border-radius: 0.5em;
			margin: 0;
			img {
				vertical-align: top;
				width: 2em;
				height: 2em;
			}
		}
	}
	nav {
		flex: 3;
		@media screen and (max-width: 768px) {
			position: absolute;
			top: calc(100% + 1px);
			right: 0;
			background-color: #fff;
			z-index: 100;
			transform: scaleY(0);
			transform-origin: top center;
			transition-property: transform;
			transition-duration: 0.3s;
		}
		.nav_menu {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 1em;
			@media screen and (max-width: 768px) {
				flex-direction: column;
				align-items: stretch;
				gap: 0;
			}
			p {
				margin: 0;
				@media screen and (max-width: 768px) {
					border-bottom: 1px solid #323232;
				}
			}
			a {
				text-decoration: none;
				display: flex;
				align-items: center;
				gap: 0.5em;
				@media screen and (max-width: 768px) {
					padding: 1em;
					width: 100%;
					box-sizing: border-box;
				}
				&:before {
					width: 1em;
					height: 1em;
					content: '';
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
				}
			}
			.about a:before {
				background-image: url("../images/header/about.png");
			}
			.application a:before {
				background-image: url("../images/header/application.png");
			}
			.certificate a:before {
				background-image: url("../images/header/certificate.png");
			}
			.admission {
				a {
					background-color: var(--main_color);
					color: #fff;
					display: flex;
					align-items: center;
					gap: 0.5em;
					padding: 1em;
					border-radius: 0.5em;
					&:before {
						display: none;
					}
					&:after {
						width: 1em;
						height: 1em;
						content: '';
						background-size: contain;
						background-repeat: no-repeat;
						background-position: center;
						background-image: url("../images/header/arrow.png");
					}
					@media screen and (max-width: 768px) {
						border-radius: 0;
					}
				}
			}
		}
	}
	#sp_menu_toggle {
		display: none;
		&:checked + nav {
			transform: scaleY(1);
		}
	}
}
.globalmenu_header_bottom {
	@media screen and (max-width: 768px) {
		display: none;
	}
}
.globalmenu_header_menu {
	display: none;
	@media screen and (max-width: 768px) {
		display: block;
	}
	#globalmenu {
		padding: 1em;
		border-bottom: 1px solid #323232;
	}
}


footer {
	.footer-contact {
		padding: 1em;
		box-sizing: border-box;
		min-height: calc(458/1280*100vw);
		background-image: url("../images/footer/sub-footer.svg");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center bottom;
		margin-top: 5em;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		p {
			margin: 0;
		}
		.wrap {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			background-color: #fff;
			padding: 1em 2em;
			border-radius: 1em;
			border: 1px solid var(--main_color);
		}
		section {
			display: flex;
			flex-direction: column;
			gap: 1em;
		}
		.title {
			margin: 0;
			font-weight: normal;
			font-size: calc( 24 / var(--root-font-size) * 1rem );
		}
		.sub-title {
			margin: 0;
			font-size: calc( 16 / var(--root-font-size) * 1rem );
		}
		.tel {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 1em;
			font-size: calc( 14 / var(--root-font-size) * 1rem );
			@media screen and (max-width: 768px) {
				flex-direction: column;
			}
			.num {
				font-size: calc( 24 / var(--root-font-size) * 1rem );
				@media screen and (max-width: 768px) {
					font-size: calc( 18 / var(--root-font-size) * 1rem );
				}
				a {
					text-decoration: none;
					display: flex;
					gap: 0.2em;
					font-weight: bold;
					align-items: center;
					&:before {
						content: '';
						width: 1em;
						height: 1em;
						background-image: url("../images/footer/tel.svg");
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
					}
				}
			}
		}
		.link {
			a {
				display: inline-flex;
				align-items: center;
				color: #fff;
				background-color: var(--main_color);
				border-radius: 9999px;
				padding: 0.5em 1em;
				gap: 0.5em;
				text-decoration: none;
				font-size: calc( 18 / var(--root-font-size) * 1rem );
				&:after {
					content: '';
					width: 2em;
					height: 2em;
					background-image: url("../images/footer/arrow.svg");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
				}
			}
		}
	}
	.footer-content {
		background-color: #fef7f0;
		padding: 3em 1em;
		.wrap {
			max-width: 1000px;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			gap: 3em;
			@media screen and (max-width: 768px) {
				flex-direction: column;
			}
		}
		.about {
			flex: 1;
			.logo {
				margin-top: 0;
				img {
					max-width: 100%;
					height: auto;
				}
			}
			.address {
				p {
					margin: 0.3em;
				}
			}
			.links {
				display: flex;
				flex-direction: column;
				gap: 2em;
				margin-top: 2em;
				@media screen and (max-width: 768px) {
					flex-direction: row;
					gap: 1em;
					margin-top: 1em;
				}
				p {
					margin: 0;
				}
				a {
					text-decoration: none;
					display: flex;
					align-items: center;
					border: 1px solid var(--main_color);
					color: var(--main_color);
					background-color: #fff;
					padding: 1em;
					border-radius: 0.5em;
					width: 100%;
					box-sizing: border-box;
					gap: 0.5em;
					&:before {
						content: '';
						width: 1.5em;
						height: 1.5em;
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
					}
					&:hover {
						background-color: var(--main_color);
						color: #fff;
						opacity: 1;
					}
				}
				.admission {
					a {
						&:before {
							background-image: url("../images/front-page/admission-on.png");
						}
						&:hover:before {
							background-image: url("../images/front-page/admission.png");
						}
					}
				}
				.mail {
					a {
						&:before {
							background-image: url("../images/front-page/mail.png");
						}
						&:hover:before {
							background-image: url("../images/front-page/mail-on.png");
						}
					}
				}
			}
		}
		nav {
			flex: 3;
			column-count: 3;
			@media screen and (max-width: 768px) {
				column-count: 2;
			}
			.menu {
				break-inside: avoid;
				margin-bottom: 2em;
			}
			.main {
				font-weight: bold;
				margin-top: 0;
				font-size: calc( 15 / var(--root-font-size) * 1rem );
				a {
					color: var(--main_color);
					text-decoration: none;
				}
			}
			ul {
				font-size: calc( 13 / var(--root-font-size) * 1rem );
				list-style-type: none;
				padding-left: 0.5em;
				border-left: 3px solid #0074DF;
				line-height: 1.4em;
			}
			li {
				a {
					text-decoration: none;
					&:before {
						content: '-';
					}
				}
			}
		}
	}
	.copyright {
		color: #fff;
		background-color: var(--main_color);
		text-align: center;
		margin: 0;
		padding: 0.5em;
	}
	.pagetop {
		display: none;
		p {
			margin: 0;
			position: fixed;
			right: 50px;
			bottom: 50px;
			width: 5em;
			height: 5em;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #fff;
			cursor: pointer;
			background-color: var(--main_color);
			border-radius: 0.5em;
			@media screen and (max-width: 768px) {
				width: 3em;
				height: 3em;
				right: 20px;
			}
		}
		img {
			width: 2.5em;
			height: 2.5em;
			@media screen and (max-width: 768px) {
				width: 1.5em;
				height: 1.5em;
			}
		}
		span {
			font-size: calc( 12 / var(--root-font-size) * 1rem );
			@media screen and (max-width: 768px) {
				display: none;
			}
		}
	}
}

.nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin-top: 3em;
	.page-numbers {
		border: 1px solid var(--main_color);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.5em;
		height: 1.5em;
		border-radius: 50%;
		text-decoration: none;
		box-sizing: border-box;
	}
	.current {
		width: 2em;
		height: 2em;
		background-color: var(--main_color);
		color: #fff;
	}
}

#globalmenu {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 1em;
	padding-right: 1em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	list-style-type: none;
	position: relative;
	@media screen and (max-width: 768px) {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
	.mainmenu {
		flex: 1;
		&:hover {
			.mainmenu_wrap > a {
				background-color: var(--main_color);
				color: #fff;
				img {
					transform: scale(1.1);
				}
				.on {
					opacity: 1;
				}
			}
		}
		&:first-of-type .submenu {
			border-radius: 0 0.5em 0.5em 0.5em;
		}
		&:last-of-type .submenu {
			border-radius: 0.5em 0 0.5em 0.5em;
		}
	}
	.mainmenu_wrap {
		padding-top: 100%;
		position: relative;
		margin: 0;
		@media screen and (max-width: 768px) {
			padding-top: 0;
		}
		a {
			transition-property: all;
			transition-duration: 0.3s;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			border: 2px solid var(--main_color);
			border-radius: 0.5em;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			gap: 0.4em;
			box-shadow: 0.2em 0.2em 0.2em 0 rgba(0,0,0,0.25);
			z-index: 3;
			background-color: #fff;
			@media screen and (max-width: 768px) {
				position: static;
				flex-direction: row;
				justify-content: flex-start;
				padding: 0.2em;
			}
			&:hover {
				opacity: 1;
			}
		}
		p {
			margin: 0;
		}
		.image {
			width: 55%;
			display: block;
			@media screen and (max-width: 768px) {
				width: 10%;
			}
		}
		.image_wrap {
			display: block;
			padding-top: 100%;
			position: relative;
			@media screen and (max-width: 768px) {
				padding: 0;
			}
		}
		img {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			transition-property: all;
			transition-duration: 0.3s;
			@media screen and (max-width: 768px) {
				position: static;
			}
			&.on {
				opacity: 0;
				@media screen and (max-width: 768px) {
					display: none;
				}
			}
		}
		.name {
			font-size: clamp(1px, 1vw, 13px);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			height: 2.4em;
			line-height: 1.4em;
			@media screen and (max-width: 768px) {
				text-align: left;
				height: auto;
				font-size: calc( 14 / var(--root-font-size) * 1rem );
				br {
					display: none;
				}
			}
		}
	}
	.has_submenu {
		.mainmenu_wrap:after {
			position: absolute;
			content: '';
			top: calc(100% - 0.5em);
			left: 0;
			width: 100%;
			height: 1em;
			background-color: #fff;
			box-sizing: border-box;
			border: 2px solid var(--main_color);
			border-bottom: none;
			z-index: 2;
			transform-origin: bottom center;
			transition-property: all;
			transition-duration: 0.3s;
			opacity: 0;
			@media screen and (max-width: 768px) {
				display: none;
			}
		}
		&:hover {
			.mainmenu_wrap:after {
				opacity: 1;
			}
			.submenu {
				opacity: 1;
				pointer-events: auto;
			}
		}
	}
	.submenu {
		position: absolute;
		top: calc(100% + 0.5em - 2px);
		left: 0;
		width: calc(100% - 2em);
		border: 2px solid var(--main_color);
		background-color: #fff;
		gap: 0.4em;
		box-shadow: 0.5em 0.5em 0.5em 0 rgba(0,0,0,0.25);
		box-sizing: border-box;
		list-style-type: none;
		border-radius: 0.5em;
		padding: 2em;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1em;
		font-weight: bold;
		margin: 0 1em;
		box-sizing: border-box;
		transform-origin: top center;
		transition-property: all;
		transition-duration: 0.3s;
		opacity: 0;
		pointer-events: none;
		@media screen and (max-width: 768px) {
			pointer-events: auto;
			opacity: 1;
			position: static;
			grid-template-columns: repeat(2, 1fr);
			margin-top: -0.5em;
			padding: 0.5em;
			padding-top: 1em;
			gap: 0.5em;
		}
		li {
			flex: 1;
			font-size: clamp(1px, 1.2vw, 15px);
			@media screen and (max-width: 768px) {
				font-size: calc( 14 / var(--root-font-size) * 1rem );

			}
		}
		a {
			color: var(--main_color);
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: 0.5em;
			&:before {
				content: '';
				width: 1em;
				height: 1em;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				background-image: url("../images/front-page/submenu.svg");
				@media screen and (max-width: 768px) {
					content: '○';
					background: none;
				}
			}
			&:hover {
				text-decoration: underline;
				&:before {
					background-image: url("../images/front-page/submenu-on.svg");
				}
			}
		}
	}
}