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

#page_admission {
	.link_button {
		a {
			padding: 1em 3em;
			border-radius: 9999px;
			color: #fff;
			font-weight: bold;
			gap: 0.5em;
			display: inline-flex;
			align-items: center;
			background-color: #fd992a;
			text-decoration: none;
			box-shadow: 0 0.3em	0 0 #e27700;
			@media screen and (max-width: 768px) {
				padding: 1em;
			}
			&:after {
				content: '';
				width: 2em;
				height: 2em;
				background-image: url("../images/admission/arrow.svg");
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
			}
		}
	}
	.main_visual {
		height: calc(1135 / 2555 * 100vw);
		background-image: url("../images/admission/main_bg.avif");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		@media screen and (max-width: 768px) {
			height: 70vw;
		}
		.message-1 {
			font-size: 2vw;
			font-weight: bold;
			margin-top: 0;
			@media screen and (max-width: 768px) {
				font-size: 3.5vw;
			}
		}
		.message-2 {
			font-size: 3.5vw;
			font-weight: bold;
			color: #fd992a;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 0.1em;
			margin-top: 0;
			@media screen and (max-width: 768px) {
				font-size: 6vw;
			}
			span {
				display: inline-block;
				border-bottom: 0.4vw solid #fdd32a;
				line-height: 1.5em;
			}
		}
		.link_button {
			margin-bottom: 0;
			a {
				font-size: 1.5vw;
				@media screen and (max-width: 768px) {
					font-size: 3vw;
					padding: 1em;
				}
			}
		}
	}
	.intro {
		background-color: #fff3e7;
		padding: 3em 1em;
		.anchor {
			max-width: 870px;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			gap: 2em;
			p {
				flex: 1;
				margin: 0;
			}
			a {
				border: 2px solid var(--main_color);
				padding: 1em;
				color: #000;
				text-decoration: none;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 1em;
				background-color: #fff;
				border-radius: 0.5em;
				&:after {
					content: '';
					width: 1em;
					height: 1em;
					background-image: url("../images/admission/arrow2.svg");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
				}
				&:hover {
					background-color: var(--main_color);
					opacity: 1;
					color: #fff;
					&:after {
						background-image: url("../images/admission/arrow2-hover.svg");
					}
				}
			}
			@media screen and (max-width: 768px) {
				flex-direction: column;
				gap: 1em;
			}
		}
	}
	#section_about {
		max-width: 870px;
		margin-left: auto;
		margin-right: auto;
		background-color: #fff;
		border: 2px solid var(--main_color);
		border-radius: 1em;
		padding: 2em 4em;
		box-sizing: border-box;
		margin-top: 2em;
		@media screen and (max-width: 768px) {
			padding: 1em;
		}
		.title {
			text-align: center;
			color: var(--main_color);
			margin-top: 0;
		}
		.message {
			line-height: 2em;
		}
		.point {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 3em;
			list-style-type: none;
			padding-left: 0;
			@media screen and (max-width: 768px) {
				flex-direction: column;
				gap: 1em;
				align-items: stretch;
				margin: 0 2em;
			}
			li {
				flex: 1;
				@media screen and (max-width: 768px) {
					display: flex;
					align-items: center;
				}
				.image {
					padding-top: 100%;
					position: relative;
					margin: 0;
					border-radius: 50%;
					background-color: #e6e6e6;
					overflow: hidden;
					@media screen and (max-width: 768px) {
						width: 100px;
						padding-top: 100px;
					}
				}
				img {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					object-fit: contain;
					box-sizing: border-box;
					padding: 1.5em;
					@media screen and (max-width: 768px) {
						padding: 0.5em;
					}
				}
				.name {
					text-align: center;
					line-height: 1.6em;
					font-weight: bold;
					@media screen and (max-width: 768px) {
						flex: 1;
					}
				}
			}
		}
	}
	.section-title {
		position: relative;
		font-size: calc( 32 / var(--root-font-size) * 1rem );
		display: inline-block;
		background: linear-gradient(transparent 50%, #E1F0FF 50%);
		&:before {
			content: '';
			display: block;
			border-bottom: 3px solid #0074df;
			width: 52px;
			position: absolute;
			top: -1em;
			left: 0;
		}
		@media screen and (max-width: 768px) {
			font-size: calc( 20 / var(--root-font-size) * 1rem );
		}
	}
	#merit {
		max-width: 1000px;
		padding: 0 1em;
		margin: 3em auto;
		background-image: url("../images/admission/merit-bg.svg");
		background-position: right top;
		background-size: 30% auto;
		background-repeat: no-repeat;
		.message {
			max-width: 20em;
			line-height: 1.8em;
		}
		ul {
			list-style-type: none;
			padding-left: 0;
			background-image: url("../images/admission/merit.png");
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			padding-top: 42%;
			position: relative;
			margin-top: -3em;
			@media screen and (max-width: 768px) {
				margin-top: 0;
				padding-top: calc(100% + 2em);
				background-position: top center;
				display: flex;
				flex-direction: column;
				gap: 1em;
			}
			li {
				position: absolute;
				@media screen and (max-width: 768px) {
					position: static;
					display: flex;
					flex-direction: column;
					gap: 0.5em;
				}
			}
			p {
				margin: 0;
			}
			.wrap {
				position: relative;
			}
		}
		.title_wrap {
			border-radius: 50%;
			width: 8em;
			height: 8em;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1.3em;
			box-sizing: border-box;
			padding: 0.5em;
			text-align: center;
			position: relative;
			z-index: 2;
			font-weight: bold;
			@media screen and (max-width: 768px) {
				border-radius: 0;
				width: 100%;
				height: auto;
				position: static;
				display: flex;
				align-items: stretch;
				padding: 0.5em 0;
				font-size: calc( 18 / var(--root-font-size) * 1rem );
				br {
					display: none;
				}
			}
		}
		.title {
			@media screen and (max-width: 768px) {
				flex: 1;
				padding: 0.5em;
			}
		}
		.number {
			position: absolute;
			top: -1em;
			left: 7em;
			@media screen and (max-width: 768px) {
				display: none;
			}
			img {
				width: 10em;
				height: auto;
			}
		}
		.text {
			position: absolute;
			left: 8.5em;
			top: 2.5em;
			width: 10em;
			@media screen and (max-width: 768px) {
				width: 100%;
				position: static;
				line-height: 1.8em;
				padding: 0.5em 0.5em 0;
				box-sizing: border-box;
			}
			span {
				line-height: 1.5em;
				font-size: calc( 14 / var(--root-font-size) * 1rem );
			}
		}
		.point-1 {
			top: -17%;
			left: calc(50% - 4em);
			.title_wrap {
				background-color: #ff6060;
			}
		}
		.point-2, .point-5 {
			top: 30%;
		}
		.point-2 {
			right: 23%;
			.title_wrap {
				background-color: #fd9d49;
			}
		}
		.point-3, .point-4 {
			top: 85%;
		}
		.point-3 {
			top: 85%;
			right: 30.5%;
			.title_wrap {
				background-color: #6ad056;
			}
		}
		.point-4 {
			left: 30.5%;
			.title_wrap {
				background-color: #49adfe;
			}
		}
		.point-5 {
			left: 23%;
			.title_wrap {
				background-color: #bb63de;
			}
		}
		.point-4, .point-5 {
			.number {
				right: 7em;
				left: auto;
			}
			.text {
				right: 8.5em;
				left: auto;
			}
		}
		.number_sp {
			display: none;
			@media screen and (max-width: 768px) {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 5em;
				border-right: 1px solid #fff;
				gap: 0.2em;
			}
			.point_number {
				font-size: calc( 24 / var(--root-font-size) * 1rem );
			}
		}
	}
	#service {
		background-color: #daeeff;
		margin-top: 10em;
		padding-top: calc(136 / 2560 * 100vw);
		position: relative;
		padding-bottom: 3em;
		@media screen and (max-width: 768px) {
			margin-top: 3em;
		}
		.message {
			line-height: 1.8em;
		}
		&:before {
			content: '';
			height: calc(136 / 2560 * 100vw);
			display: block;
			background-color: #fff;
			background-image: url("../images/admission/service-top.png");
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
		.wrap {
			max-width: 800px;
			padding: 0 1em;
			margin: 3em auto;
			background-image: url("../images/admission/service-bg.svg");
			background-position: right top;
			background-size: 30% auto;
			background-repeat: no-repeat;
		}
		.items {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 2em;
			margin-top: 3em;
			@media screen and (max-width: 768px) {
				grid-template-columns: repeat(1, 1fr);
			}
		}
		dl {
			background-color: #fff;
			border: 2px solid var(--main_color);
			border-radius: 1em;
			padding: 1em 2em;
			margin: 0;
			display: flex;
			flex-direction: column;
			gap: 1em;
			min-height: 10em;
			background-repeat: no-repeat;
			background-position: right 1em bottom 1em;
			background-size: 15% auto;
		}
		.service-1 {
			background-image: url("../images/admission/service-1.png");
		}
		.service-2 {
			background-image: url("../images/admission/service-2.png");
		}
		.service-3 {
			background-image: url("../images/admission/service-3.png");
		}
		.service-4 {
			background-image: url("../images/admission/service-4.png");
		}
		dt {
			&:before {
				content: '●';
				margin-right: 1em;
				color: var(--main_color);
			}
		}
		dd {
			font-weight: bold;
			margin-left: 1em;
		}
	}
	#join {
		text-align: center;
		margin: 3em 1em;
		.title {
			line-height: 1.8em;
		}
	}
	#membership-fee {
		margin: 3em 1em;
		.section-title {
			background: none;
		}
		.wrap {
			max-width: 800px;
			padding: 3em;
			margin-left: auto;
			margin-right: auto;
			background-color: #fae7d1;
			border-radius: 1em;
			background-image: url("../images/admission/membership-fee.svg");
			background-position: right top 1em;
			background-size: 60% auto;
			background-repeat: no-repeat;
			box-sizing: border-box;
			@media screen and (max-width: 768px) {
				padding: 1em;
			}
		}
		.plan {
			display: flex;
			gap: 2em;
			margin-bottom: 2em;
			@media screen and (max-width: 768px) {
				flex-direction: column;
				gap: 1em;
			}
			dl {
				margin: 0;
				overflow: hidden;
				border-radius: 1em;
				font-weight: bold;
				text-align: center;
				flex: 1;
				font-size: calc( 24 / var(--root-font-size) * 1rem );
			}
			dt {
				padding: 1em;
			}
			dd {
				background-color: #fff;
				padding: 1em 1em 1.5em;
				margin-left: 0;
				display: flex;
				flex-direction: column;
				gap: 0.5em;
				p {
					margin: 0;
				}
			}
			.price {
				font-size: calc( 48 / var(--root-font-size) * 1rem );
			}
		}
		.corporation dt {
			background-color: #fd992a;
		}
		.individual dt {
			background-color: #FDD32A;
		}
		.qualification {
			margin-top: 2em;
			background-color: #fff;
			border-radius: 1em;
			padding: 2em;
			.title {
				text-align: center;
				margin-top: 0;
			}
			p {
				line-height: 1.8em;
				margin-bottom: 0;
			}
		}
	}
	#flow {
		background-color: #fff3e7;
		padding: 3em 1em;
		margin-top: 3em;
		.wrap {
			max-width: 800px;
			margin-left: auto;
			margin-right: auto;
			background-image: url("../images/admission/flow-bg.svg");
			background-position: right top;
			background-size: 20% auto;
			background-repeat: no-repeat;
		}
		.message {
			line-height: 1.8em;
		}
		.section-flow {
			margin-top: 3em;
			display: flex;
			gap: 1em;
			flex-direction: column;
		}
		.title {
			border-radius: 0.5em;
			background-color: #fff;
			padding: 0.5em 1em;
			border: 1px solid var(--main_color);
			display: flex;
			align-items: center;
			gap: 0.5em;
			line-height: 1.8em;
			&:before {
				content: '';
				width: 1.5em;
				height: 1.5em;
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
			}
		}
		#flow-1 {
			.title {
				&:before {
					background-image: url("../images/admission/flow-1.png");
				}
			}
		}
		#flow-2 {
			.title {
				&:before {
					background-image: url("../images/admission/flow-2.png");
				}
			}
		}
		#flow-3 {
			.title {
				&:before {
					background-image: url("../images/admission/flow-3.png");
				}
			}
		}
		.step {
			background-color: #fff;
			border-radius: 0.5em;
			padding: 0.5em;
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: 2em;
			&:after {
				content: '▼';
				color: var(--main_color);
				position: absolute;
				bottom: -2em;
				left: calc(50% - 0.5em);
			}
			&:last-of-type {
				margin-bottom: 0;
				&:after {
					display: none;
				}
			}
		}
		.count {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			gap: 0.5em;
			width: 6em;
			text-align: center;
			span {
				line-height: 1em;
			}
		}
		.number {
			font-size: calc( 30 / var(--root-font-size) * 1rem );
		}
		.text {
			flex: 1;
			border-left: 2px solid var(--main_color);
			padding-left: 1em;
		}
		.link_button {
			a {
				padding: 0.5em 2em;
			}
			&.icon_doc-w {
				a {
					gap: 2em;
					&:after {
						width: 1em;
						height: 1em;
						background-image: url("../images/admission/icon_doc-w.png");
					}
				}
			}
		}
	}
	#faq {
		margin: 3em auto;
		padding: 0 1em;
		max-width: 800px;
		background-image: url("../images/admission/faq.svg");
		background-position: right top;
		background-size: 15% auto;
		background-repeat: no-repeat;
		.title {
			border-radius: 0.5em;
			background-color: #fff;
			padding: 0.5em 1em;
			border: 1px solid var(--main_color);
			display: flex;
			align-items: center;
			gap: 0.5em;
			&:before {
				content: '';
				width: 1em;
				height: 1em;
				background-color: var(--main_color);
				border-radius: 50%;
				font-weight: normal;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		dl {
			margin-bottom: 2em;
		}
		dt {
			background-color: #F4F4F4;
			background-image: url("../images/admission/faq-arrow.svg");
			background-position: right 0.5em center;
			background-size: 1em auto;
			background-repeat: no-repeat;
			padding: 0.5em 1em;
			padding-right: 2em;
			display: flex;
			align-items: center;
			gap: 0.5em;
			cursor: pointer;
			p {
				margin: 0;
				flex: 1;
				line-height: 1.8em;
			}
			&:before {
				content: '？';
				width: 1.5em;
				height: 1.5em;
				background-color: var(--main_color);
				border-radius: 50%;
				font-weight: normal;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		dd {
			margin: 0;
			padding: 0 1em 1em;
			line-height: 1.8em;
			display: none;
			p:last-of-type {
				margin-bottom: 0;
			}
		}
		.image {
			text-align: center;
			img {
				max-width: 476px;
				height: auto;
			}
		}
	}
}
footer {
	.footer-contact-admission {
		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;
		p {
			margin: 0;
		}
		.wrap {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			background-color: #fff;
			padding: 1em 2em;
			border: 3px solid var(--main_color);
			box-sizing: border-box;
			margin-left: auto;
			margin-right: auto;
			max-width: 800px;
			@media screen and (max-width: 768px) {
				padding: 1em;
			}
		}
		.title {
			margin: 0;
			line-height: 1.8em;
			text-align: center;
			font-size: calc( 24 / var(--root-font-size) * 1rem );
		}
		.message {
			line-height: 1.8em;
			margin-left: 2em;
			margin-right: 2em;
			@media screen and (max-width: 768px) {
				margin-left: 0;
				margin-right: 0;
			}
		}
		.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( 18 / var(--root-font-size) * 1rem );
			@media screen and (max-width: 768px) {
				flex-direction: column;
			}
			.num {
				font-size: calc( 18 / 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;
					font-size: 1em;
					&:before {
						content: '';
						width: 1em;
						height: 1em;
						background-image: url("../images/footer/tel-2.png");
						background-repeat: no-repeat;
						background-size: contain;
						background-position: center;
					}
				}
			}
		}
		.button {
			display: flex;
			gap: 2em;
			@media screen and (max-width: 768px) {
				flex-direction: column;
				gap: 1em;
			}
		}
		.link {
			flex: 1;
			a {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background-color: var(--main_color);
				border-radius: 9999px;
				padding: 1em 1em;
				gap: 0.5em;
				text-decoration: none;
				font-size: calc( 18 / var(--root-font-size) * 1rem );
				&:after {
					content: '';
					width: 1em;
					height: 1em;
					background-image: url("../images/footer/arrow.svg");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
				}
			}
			&.pdf_link {
				a {
					&:after {
						background-image: url("../images/admission/pdf.png");
				}
			}
		}
	}
}