@charset "UTF-8";

/* ------------------------------------------- */
/* root */
/* ------------------------------------------- */
:root {
	--default-text-color: #000;
	--logo-color: #2C7039;
}

/* --------------------------------------------------------------- */
/* reset start */
/* --------------------------------------------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	background: transparent;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
video {
	display: block;
}

ul,
li,
ol,
dl {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

a {
	display: inline-block;
	margin: 0;
	padding: 0;
	color: var(--default-text-color);
	text-decoration: none;
}

/* @media (hover: hover) and (pointer: fine) {
	a:hover {
		text-decoration: none;
	}
} */

del {
	text-decoration: line-through;
}

abbr[title],
dfn[title] {
	border-bottom: 0.1rem dotted;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

*,
*:after,
*:before {
	-webkit-appearance: none;
	word-break: break-all;
	box-sizing: border-box;
}

video {
	filter: contrast(1);
}

img {
	width: 100%;
}

/* --------------------------------------------------------------- */
/* reset end */
/* --------------------------------------------------------------- */

/* タブレット(1081px以上)のみ非表示 */
@media print,
screen and (min-width: 1080.01px) {
	.tab-off {
		display: none !important;
	}
}

/* PC(768px以上)のみ非表示 */
@media print,
screen and (min-width: 767.01px) {
	.pc-off {
		display: none !important;
	}
}

/* スマホのみ非表示 */
@media screen and (max-width: 767px) {
	.sp-off {
		display: none !important;
	}
}

@media screen and (max-width: 767px) {
	a[href^="tel:"] {
		color: var(--default-text-color);
	}
}

@media screen and (min-width: 767.01px) {
	a[href^="tel:"] {
		pointer-events: none;
		text-decoration: none;
	}
}

html {
	font-size: 62.5%;
	letter-spacing: 0;
	font-family: "Noto Sans JP", sans-serif;
	-webkit-text-size-adjust: none;
	font-feature-settings: "palt";

	@media screen and (min-width: 1080.01px) and (max-width: 1919.99px) {
		font-size: calc(10 / 1919 * 100 * 1vw);
	}

	/* あまりにも文字サイズが小さくなった場合 */
	@media screen and (min-width: 767.01px) and (max-width: 1080px) {
		font-size: calc(12 / 1920 * 100 * 1vw);
	}

	/* スマホ用（デザインサイズが375の場合） */
	@media screen and (max-width: 767px) {
		font-size: calc(10 / 393 * 100 * 1vw);
	}
}

body {
	font-size: 1.6rem;
	line-height: 1;
	overflow: auto;

	@media screen and (max-width: 767px) {
		font-size: 1.4rem;
	}
}

img {
	display: block;
	max-width: 100%;
	height: auto;
	vertical-align: top;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	@media screen and (max-width: 767px) {
		/* スマホ画像長押し禁止対策 */
		pointer-events: none;
	}
}


/* ------------------------------------------- */
/* 印刷用の設定 */
/* ------------------------------------------- */
@media print {
	html {
		font-size: calc(10 / 1919 * 100 * 14px);
	}

	body {
		-webkit-print-color-adjust: exact;
		position: relative;
		width: 1400px;
		zoom: 70%;
	}
}

@page {
	size: A4;
	margin: 10mm;
}

/* ------------------------------------------- */
/* デバッグ用：スクロールバーを0pxに
/* ------------------------------------------- */
.deve body {
	--sb-track-color: #ddd;
	--sb-thumb-color: #000;
	--sb-size: 0;
	/* scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); */
	overflow-x: hidden;
}

.deve body::-webkit-scrollbar {
	width: var(--sb-size);
}

.deve body::-webkit-scrollbar-track {
	background: var(--sb-track-color);
	border-radius: 1px;
}

.deve body::-webkit-scrollbar-thumb {
	background: var(--sb-thumb-color);
	border-radius: 1px;
}

/* --------------------------------------------------------------- */
/* wrapper */
/* --------------------------------------------------------------- */
#wrapper {
	padding-top: 0.01rem;
	overflow: clip;
}

.menu-active {
	overflow: hidden;
}

/* --------------------------------------------------------------- */
/* header */
/* --------------------------------------------------------------- */
#header {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 500;
	padding-left: 8rem;
	height: 13rem;
	background-color: transparent;

	@media screen and (max-width: 767px) {
		padding-left: 1rem;
		padding-right: 1rem;
		height: 7.2rem;
	}

	@media print {
		position: relative;
	}

	.logomark {
		margin-bottom: 0.3rem;
		/* #2C7039 */
		filter: invert(36%) sepia(26%) saturate(1072%) hue-rotate(80deg) brightness(90%) contrast(85%);

		&.philosophy,
		&.single-story {
			/* #fff */
			/* filter: invert(100%) sepia(22%) saturate(2070%) hue-rotate(262deg) brightness(111%) contrast(101%); */
			filter: invert(100%);
		}

		@media screen and (max-width: 767px) {
			&.philosophy {
				filter: invert(36%) sepia(26%) saturate(1072%) hue-rotate(80deg) brightness(90%) contrast(85%);
			}
		}



		& a {
			display: flex;
			align-items: center;
			transition: ease 0.3s opacity;

			@media (hover: hover) and (pointer: fine) {
				&:hover {
					opacity: 0.6;
				}
			}


			& img {
				width: 32.3rem;

				@media screen and (max-width: 767px) {
					width: 23.2rem;
				}
			}
		}


	}

	.header-inner {
		position: fixed;
		right: 0;
		top: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 2.1rem;
		height: 13rem;

		@media screen and (max-width: 767px) {
			padding-right: 1rem;
			height: 7.2rem;
		}

		@media print {
			position: relative;
		}
	}

	.header-menu {
		display: flex;
		align-items: center;
		gap: 2.9rem;

		@media screen and (max-width: 767px) {
			position: absolute;
			top: 1.1rem;
			right: 1rem;
			flex-direction: column-reverse;
			gap: 1.9rem;
		}

		.btn-area {
			display: flex;
			align-items: center;
			gap: 2.2rem;

			@media screen and (max-width: 767px) {
				flex-direction: column;
				gap: 1.6rem;
			}

			.contact,
			.login {
				& a {
					display: flex;
					align-items: center;
					gap: 0.8rem;
					padding: 1.5rem 2.9rem;
					font-style: normal;
					font-weight: 600;
					font-size: 1.6rem;
					/* line-height: 1.2rem; */
					border-radius: 5rem;
					transition: ease 0.3s background-color, ease 0.3s color;

					&::before {
						content: "";
						display: inline-block;
						width: 2.4rem;
						height: 2.4rem;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						transition: ease 0.3s filter;
					}

					@media screen and (max-width: 767px) {
						display: inline-block;
						padding: 0;
						border-radius: 0;
						width: 2.4rem;
						height: 2.4rem;
						background-size: 100% 100%;
						background-repeat: no-repeat;

						& span {
							display: none;
						}

						&::before {
							display: none;
						}
					}
				}
			}

			.contact {
				& a {
					color: #000;
					border: 2px solid #000;
					background-color: #fff;

					&::before {
						background-image: url("../img/parts/icon-mail.svg");
					}

					@media (hover: hover) and (pointer: fine) {
						&:hover {
							color: #fff;
							background-color: #000;

							&::before {
								filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
							}
						}
					}

					@media screen and (max-width: 767px) {
						background-color: none;
						border: none;
						background-image: url("../img/parts/icon-mail.svg");
						background-color: transparent;

						&::before {
							background-image: none;
						}
					}
				}
			}

			.login {
				& a {
					color: #fff;
					background-color: var(--logo-color);
					border: 2px solid var(--logo-color);

					&::before {
						background-image: url("../img/parts/icon-people.svg");
						filter: invert(93%) sepia(10%) saturate(0%) hue-rotate(324deg) brightness(106%) contrast(101%);
					}

					@media (hover: hover) and (pointer: fine) {
						&:hover {
							color: var(--logo-color);
							background-color: #fff;

							&::before {
								filter: invert(30%) sepia(68%) saturate(423%) hue-rotate(80deg) brightness(100%) contrast(89%);
							}
						}
					}

					@media screen and (max-width: 767px) {
						background-color: transparent;
						border: none;
						background-image: url("../img/parts/icon-people.svg");

						&::before {
							filter: none;
						}
					}
				}
			}
		}
	}

	/* メニューボタン */
	.menu-btn {
		position: relative;
		background-color: #000;
		border-radius: 50%;
		width: 8.8rem;
		height: 8.8rem;
		/* display: none; */
		/* top: 0;
		right: 0; */
		z-index: 501;

		/* @media screen and (max-width: 767px) {
			display: block;
		} */

		@media screen and (max-width: 767px) {
			width: 4.4rem;
			height: 4.4rem;
		}

		&:after {
			/* content: "MENU"; */
			content: "";
			position: absolute;
			left: 50%;
			bottom: 1.1rem;
			color: #fff;
			font-weight: 500;
			letter-spacing: 0.05em;
			font-size: 1.1rem;
			transform: translateX(-50%);
			white-space: nowrap;
		}

		& a {
			position: relative;
			width: 8.8rem;
			height: 8.8rem;
			vertical-align: top;
			transition: ease 0.25s all;

			@media screen and (max-width: 767px) {
				width: 4.4rem;
				height: 4.4rem;
			}

			& span {
				position: absolute;
				left: 50%;
				top: 50%;
				display: block;
				margin-left: -1.8rem;
				width: 3.4rem;
				height: 0.2rem;
				background: #fff;
				border-radius: 0.3rem;

				@media screen and (max-width: 767px) {
					margin-left: -0.9rem;
					width: 1.7rem;
					height: 0.2rem;
				}

				&:before,
				&:after {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background: #fff;
					border-radius: 0.3rem;
					transition: ease 0.25s all;
				}

				&:before {
					margin-top: -1.1rem;
				}

				@media screen and (max-width: 767px) {
					&:before {
						margin-top: -0.5rem;
					}
				}

				&:after {
					margin-top: 1.1rem;
				}

				@media screen and (max-width: 767px) {
					&:after {
						margin-top: 0.5rem;
					}
				}
			}
		}
	}
}

.nav-back {
	position: fixed;
	z-index: 500;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.nav {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 100%;
	z-index: 500;
	display: flex;
	justify-content: center;
	width: 108rem;
	pointer-events: none;
	transition: left 0.3s ease;
	overflow-y: auto;
	background-color: #F2F4EF;
	border-radius: 8rem 0 0 0;

	@media screen and (min-width: 768px) and (max-width: 1025px) {
		display: block;
		padding: 15rem 8rem 0;
		width: 67rem;
		height: 100svh;
	}

	@media screen and (max-width: 767px) {
		display: block;
		padding: 7.9rem 4.1rem 0;
		width: 34.3rem;
		height: 100svh;
		border-radius: 5rem 0 0 0;
	}

	.nav-wrapper {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;

		@media screen and (min-width: 768px) and (max-width: 1025px) {
			flex-direction: column-reverse;
		}

		@media screen and (max-width: 767px) {
			flex-direction: column-reverse;
		}

		>div {
			width: 100%;
		}
	}



	.common-site-map {
		justify-content: center;
		padding-bottom: 7.1rem;

		@media screen and (min-width: 768px) and (max-width: 1025px) {
			padding-bottom: 8rem;
		}

		@media screen and (max-width: 767px) {
			padding-bottom: 5rem;
		}
	}

	.btn-area {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2rem;

		@media screen and (min-width: 768px) and (max-width: 1025px) {
			flex-direction: column;
			margin-bottom: 5rem;
			gap: 3rem;
		}

		@media screen and (max-width: 767px) {
			flex-direction: column;
			margin-bottom: 4.9rem;
			gap: 1.4rem;
		}

		.contact,
		.login {
			@media screen and (min-width: 768px) and (max-width: 1025px) {
				width: 100%;
			}

			@media screen and (max-width: 767px) {
				width: 100%;
			}

			& a {
				display: flex;
				align-items: center;
				gap: 0.9rem;
				padding: 2rem 3.8rem;
				font-style: normal;
				font-weight: 600;
				font-size: 2rem;
				/* line-height: 1.5rem; */
				border-radius: 8rem;
				transition: ease 0.3s background-color, ease 0.3s color;

				@media screen and (min-width: 768px) and (max-width: 1025px) {
					justify-content: center;
					gap: 2rem;
					width: 100%;
				}

				@media screen and (max-width: 767px) {
					justify-content: center;
					gap: 0.7rem;
					padding: 1.4rem 1rem;
					width: 100%;
					font-size: 1.4rem;
				}


				&::before {
					content: "";
					display: inline-block;
					width: 2.8rem;
					height: 2.8rem;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					transition: ease 0.3s filter;
				}


				@media screen and (max-width: 767px) {
					&::before {
						width: 2.1rem;
						height: 2.1rem;
					}
				}
			}
		}

		.contact {
			& a {
				color: #000;
				border: 2px solid #000;
				background-color: #fff;

				&::before {
					background-image: url("../img/parts/icon-mail.svg");
				}

				@media (hover: hover) and (pointer: fine) {
					&:hover {
						color: #fff;
						background-color: #000;

						&::before {
							filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
						}
					}
				}
			}
		}

		.login {
			& a {
				color: #fff;
				background-color: var(--logo-color);
				border: 2px solid var(--logo-color);

				&::before {
					background-image: url("../img/parts/icon-people.svg");
					filter: invert(93%) sepia(10%) saturate(0%) hue-rotate(324deg) brightness(106%) contrast(101%);
				}

				@media (hover: hover) and (pointer: fine) {
					&:hover {
						color: var(--logo-color);
						background-color: #fff;

						&::before {
							filter: invert(30%) sepia(68%) saturate(423%) hue-rotate(80deg) brightness(100%) contrast(89%);
						}
					}
				}
			}
		}
	}
}

/* } */

.menu-active {
	#header {
		.menu-btn {

			/* position: fixed; */
			& a {

				/* background-color: #fff; */
				& span {
					background-color: transparent;

					&:before {
						margin-top: 0;
						transform: rotate(45deg);
						-webkit-transform: rotate(45deg);
					}

					&:after {
						margin-top: 0;
						transform: rotate(-45deg);
						-webkit-transform: rotate(-45deg);
					}
				}
			}
		}

		.nav-back {
			opacity: 0.25;
			pointer-events: auto;
		}

		.nav {
			left: calc(100% - 108rem);
			pointer-events: auto;

			@media screen and (min-width: 768px) and (max-width: 1025px) {
				left: calc(100% - 67rem);
			}

			@media screen and (max-width: 767px) {
				left: calc(100% - 34.3rem);
			}
		}

		/* } */
	}
}

/* ipad用設定 */

.view-ipad {
	.nav {
		display: block;
		padding: 15rem 8rem 0;
		width: 67rem;
		height: 100svh;

		.nav-wrapper {
			flex-direction: column-reverse;
		}

		.common-site-map {
			padding-bottom: 8rem;
		}

		.btn-area {
			flex-direction: column;
			margin-bottom: 5rem;
			gap: 3rem;

			.contact,
			.login {
				width: 100%;

				& a {
					justify-content: center;
					gap: 2rem;
					width: 100%;
				}
			}
		}
	}

	/* } */

	&.menu-active {
		#header {

			.nav {
				left: calc(100% - 67rem);
			}

			/* } */
		}
	}
}

/* --------------------------------------------------------------- */
/* common-site-map */
/* --------------------------------------------------------------- */

.common-site-map {
	display: flex;
	gap: 8rem;

	.list {
		.list-title {
			margin-bottom: 2.6rem;
			font-style: normal;
			font-weight: 500;
			font-size: 2.2rem;
			line-height: 2.4rem;
			letter-spacing: 0.05em;
			color: #8F8F8F;
		}

		.main-list {
			>li {
				&:not(:last-child) {
					margin-bottom: 2rem;
				}

				& a {
					width: 100%;

					&[href] {
						font-style: normal;
						font-weight: 400;
						font-size: 1.6rem;
						line-height: 2.4rem;
						letter-spacing: 0.05em;
						color: #000000;
						transition: ease 0.3s opacity;

						@media (hover: hover) and (pointer: fine) {
							&:hover {
								opacity: 0.6;
							}
						}
					}


				}

				.sub-list-title {
					margin-bottom: 0.8rem;
					font-style: normal;
					font-weight: 400;
					font-size: 1.6rem;
					line-height: 2.4rem;
					letter-spacing: 0.05em;
					color: #8F8F8F;
				}

				.sub-list {
					>li {
						&:not(:last-child) {
							margin-bottom: 0.8rem;
						}

						& a::before {
							content: "ー";
							display: inline-block;
							margin-right: 1rem;
							color: #B9B9B9;
						}
					}
				}
			}
		}
	}
}

/* タブレット用設定 */

@media screen and (min-width: 768px) and (max-width: 1025px) {
	.common-site-map.header-nav {
		flex-direction: column;
		gap: 6rem;

		.list {
			.list-title {
				margin-bottom: 4rem;
				font-size: 2.8rem;
			}

			.main-list {
				>li {
					&:not(:last-child) {
						margin-bottom: 3rem;
					}

					& a {
						&[href] {
							font-size: 2.8rem;
						}


					}

					.sub-list-title {
						margin-bottom: 3rem;
						font-size: 2.8rem;
					}

					.sub-list {
						>li {
							&:not(:last-child) {
								margin-bottom: 3rem;
							}

							& a::before {
								margin-right: 1.6rem;
							}
						}
					}
				}
			}
		}
	}
}

/* ipad用設定 */

.view-ipad {
	.common-site-map.header-nav {
		flex-direction: column;
		gap: 6rem;

		.list {
			.list-title {
				margin-bottom: 4rem;
				font-size: 2.8rem;
			}

			.main-list {
				>li {
					&:not(:last-child) {
						margin-bottom: 3rem;
					}

					& a {
						&[href] {
							font-size: 2.8rem;
						}


					}

					.sub-list-title {
						margin-bottom: 3rem;
						font-size: 2.8rem;
					}

					.sub-list {
						>li {
							&:not(:last-child) {
								margin-bottom: 3rem;
							}

							& a::before {
								margin-right: 1.6rem;
							}
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width: 767px) {

	.common-site-map,
	.common-site-map.header-nav {
		flex-direction: column;
		gap: 6rem;

		.list {
			.list-title {
				margin-bottom: 2.6rem;
				font-size: 1.8rem;
			}

			.main-list {
				>li {
					&:not(:last-child) {
						margin-bottom: 1.6rem;
					}

					& a {
						font-size: 1.4rem;
					}

					.sub-list-title {
						margin-bottom: 1.3rem;
						font-size: 1.4rem;
					}

					.sub-list {
						>li {
							&:not(:last-child) {
								margin-bottom: 1.6rem;
							}

							& a::before {
								margin-right: 1.2rem;
							}
						}
					}
				}
			}
		}
	}
}

/* --------------------------------------------------------------- */
/* breadcrumbs */
/* --------------------------------------------------------------- */
#breadcrumbs {
	padding: 5.2rem 0;

	@media screen and (max-width: 767px) {
		padding: 1.8rem 0;
	}

	&.association,
	&.exam,
	&.faq,
	&.privacy,
	&.commercial,
	&.sitemap {
		background: #F2F4EF;
	}

	& ol {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		row-gap: 2rem;

		@media screen and (max-width: 767px) {
			row-gap: 1.4rem;
		}
	}

	& li {
		position: relative;
		margin-right: 2.8rem;
		font-style: normal;
		font-weight: 600;
		font-size: 1.6rem;
		line-height: 100%;
		color: #000000;

		& span {
			font-size: 1.6rem;
		}

		@media screen and (max-width: 767px) {
			font-size: 1.2rem;

			& span {
				font-size: 1.2rem;
			}
		}

		&:first-child {


			&::before {
				content: "";
				display: inline-block;
				margin-bottom: -0.2rem;
				margin-right: 0.4rem;
				width: 1.6rem;
				height: 1.6rem;
				background-image: url("../img/parts/bread-home.svg");
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			@media screen and (max-width: 767px) {
				& a {
					margin-bottom: 0.3rem;
				}

				&::before {
					margin-bottom: -0.3rem;
				}
			}
		}


		&:last-child {
			margin-right: 0;
			font-weight: 400;
			color: #707070;

			&:after {
				display: none;
			}
		}

		&:after {
			content: "";
			position: absolute;
			right: -2.5rem;
			top: calc(50% - 0.6rem);
			z-index: 0;
			display: inline-block;
			width: 1.6rem;
			height: 1.6rem;
			background-image: url("../img/parts/arrow-up-s-line.svg");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			transform: rotate(-90deg);

			&:last-child:after {
				display: none;
			}
		}
	}

	& a {
		text-decoration-line: underline;
		text-decoration-style: dotted;
		text-underline-offset: 0.3em;

		@media (hover: hover) and (pointer: fine) {
			&:hover {
				text-decoration: none;
			}
		}
	}
}

/* --------------------------------------------------------------- */
/* container */
/* --------------------------------------------------------------- */
#container {}

/* --------------------------------------------------------------- */
/* page-fv */
/* --------------------------------------------------------------- */
#page-fv {

	&.type-text {
		margin-top: 13rem;

		@media screen and (max-width: 767px) {
			margin-top: 7.2rem;
		}

		.title {
			padding: 17.6rem 5rem 19.3rem 12rem;

			@media screen and (max-width: 767px) {
				padding: 4.9rem 2.4rem 5.7rem;
			}

			.eng {
				margin-bottom: 1.5rem;
				font-family: 'Alexandria';
				font-style: normal;
				font-weight: 500;
				font-size: 10rem;
				line-height: 100%;
				letter-spacing: 0.05em;
				color: #000000;

				@media screen and (max-width: 767px) {
					font-size: 3.4rem;
				}
			}

			.jp {
				font-style: normal;
				font-weight: 700;
				font-size: 3rem;
				line-height: 3.6rem;
				letter-spacing: 0.05em;
				color: #000000;

				@media screen and (max-width: 767px) {
					font-size: 1.4rem;
					line-height: 1.7rem;
				}
			}
		}

		&.association,
		&.exam,
		&.faq,
		&.privacy,
		&.commercial,
		&.sitemap {
			background-color: #F2F4EF;
		}

		&.page404 {
			.title {
				padding: 10rem 5rem 5rem 12rem;

				@media screen and (max-width: 767px) {
					padding: 4.9rem 2.4rem 5.7rem;
				}

				.eng {
					font-size: 8rem;
					letter-spacing: 0;

					@media screen and (max-width: 767px) {
						font-size: 2.8rem;
					}
				}
			}
		}
	}

	&.type-page {
		position: relative;
		padding-top: 13rem;
		padding-bottom: 10rem;

		@media screen and (max-width: 767px) {
			padding-top: 7.2rem;
			padding-bottom: 4rem;
		}

		&::before {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
			display: block;
			width: 84rem;
			height: 64.6rem;
			border-radius: 0 0 18rem 0;
		}

		@media screen and (max-width: 767px) {
			&::before {
				width: 28.8rem;
				height: 24rem;
				border-radius: 0 0 6.4rem 0;
			}
		}

		.title {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			position: absolute;
			bottom: 25.8rem;
			left: 8rem;
			z-index: 5;

			@media screen and (max-width: 767px) {
				bottom: 6rem;
				left: 1.2rem;
			}

			.eng {
				display: block;
				margin-bottom: 1.5rem;
				padding: 2.4rem;
				font-family: 'Alexandria';
				font-style: normal;
				font-weight: 500;
				font-size: 10rem;
				line-height: 100%;
				letter-spacing: 0.05em;
				color: #000000;
				background-color: #fff;

				@media screen and (max-width: 767px) {
					margin-bottom: 0.7rem;
					padding: 1.2rem;
					font-size: 4.6rem;
				}
			}

			.jp {
				display: inline-block;
				padding: 2.4rem;
				font-style: normal;
				font-weight: 700;
				font-size: 3rem;
				line-height: 3.6rem;
				letter-spacing: 0.05em;
				color: #000000;
				background-color: #fff;

				@media screen and (max-width: 767px) {
					padding: 1.2rem;
					font-size: 1.4rem;
					line-height: 1.7rem;
				}
			}
		}

		.fv-img {
			position: relative;
			z-index: 2;
			margin: 0 0 0 auto;
			width: 156rem;
			aspect-ratio: 156 / 88;
			border-radius: 18rem 0 0 0;
			overflow: hidden;

			@media screen and (max-width: 767px) {
				width: 35rem;
				aspect-ratio: 350 / 328;
				border-radius: 4rem 0 0 0;
			}

			& img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	&.type-story {
		position: relative;
		z-index: 2;
		padding-top: 19.9rem;
		padding-left: 8rem;

		@media screen and (max-width: 767px) {
			padding-top: 8.6rem;
			padding-left: 2.4rem;
		}

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 15rem;
			z-index: 1;
			display: block;
			background-color: #00AC8C;
		}

		@media screen and (max-width: 767px) {
			&::before {
				bottom: 6.6rem;
			}
		}

		.title {
			position: relative;
			z-index: 2;
			margin-bottom: 5.1rem;

			@media screen and (max-width: 767px) {
				padding-right: 6rem;
				margin-bottom: 1.3rem;
			}

			.jp {
				font-family: 'Yu Gothic', 'Noto Sans JP';
				font-style: normal;
				font-weight: 700;
				font-size: 6rem;
				line-height: 150%;
				letter-spacing: 0.1em;
				color: #FFFFFF;

				@media screen and (max-width: 767px) {
					font-size: 2rem;
					line-height: 140%;
					letter-spacing: 0.04em;
				}
			}
		}

		.fv-img {
			position: relative;
			z-index: 2;
			width: 100%;
			aspect-ratio: 184 / 88;
			border-radius: 18rem 0 0 0;
			overflow: hidden;

			@media screen and (max-width: 767px) {
				aspect-ratio: 369 / 328;
				border-radius: 3.6rem 0 0 0;
			}

			& img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	&.type-curriculum {
		position: relative;
		margin-top: 13rem;

		@media screen and (max-width: 767px) {
			margin-top: 7.2rem;
		}

		.title {
			position: relative;
			z-index: 2;
			width: 100%;
			height: auto;
			aspect-ratio: 192 / 80;
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 1.5rem;
			padding-left: 12rem;
			padding-right: 12rem;

			@media screen and (max-width: 767px) {
				aspect-ratio: 393 / 250;
				padding-left: 2.4rem;
				padding-right: 1.2rem;
			}

			.eng {
				font-family: 'Alexandria';
				font-style: normal;
				font-weight: 500;
				font-size: 10rem;
				line-height: 100%;
				letter-spacing: 0.05em;
				color: #000000;

				@media screen and (max-width: 767px) {
					font-size: 3.4rem;
				}
			}

			.jp {
				font-style: normal;
				font-weight: 700;
				font-size: 3rem;
				line-height: 36px;
				letter-spacing: 0.05em;
				color: #000000;

				@media screen and (max-width: 767px) {
					font-size: 1.4rem;
					line-height: 1.7rem;
				}
			}
		}


		.fv-img {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: -8rem;
			z-index: 1;
			border-radius: 18rem 0 0 0;
			overflow: hidden;

			@media screen and (max-width: 767px) {
				bottom: -1rem;
				border-radius: 3.6rem 0 0 0;
			}

			& img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}


	&.type-philosophy {
		position: relative;

		.title {
			position: absolute;
			z-index: 1;
			bottom: 27.8rem;
			right: 15.7rem;
			text-align: center;

			@media screen and (max-width: 767px) {
				bottom: 10.2rem;
				right: 2.1rem;
			}

			.jp {
				display: inline-block;
				font-family: 'Yu Gothic', 'Noto sans JP';
				font-style: normal;
				font-weight: 700;
				font-size: 7.2rem;
				line-height: 11.5rem;
				letter-spacing: 0.05em;
				text-align: left;
				color: #FFFFFF;

				@media screen and (max-width: 767px) {
					font-size: 2.88rem;
					line-height: 4.6rem;
				}
			}
		}


		.fv-img {
			width: 100%;

			@media screen and (max-width: 767px) {
				aspect-ratio: 393 / 512;
				overflow: hidden;

				& img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
	}

}


/* --------------------------------------------------------------- */
/* contents */
/* --------------------------------------------------------------- */
#contents {}

/* --------------------------------------------------------------- */
/* contents template-curriculum-page */
/* --------------------------------------------------------------- */
#contents.template-curriculum-page {
	padding-bottom: 12rem;

	@media screen and (max-width: 767px) {
		padding-bottom: 8rem;
	}

	.common-curriculum-tabs {
		padding-bottom: 12rem;

		@media screen and (max-width: 767px) {
			padding-bottom: 5rem;
		}

		.wrapper {
			display: flex;
			gap: 7.8rem;

			@media screen and (max-width: 767px) {
				width: 100%;
				gap: 0;
			}

			.tab {
				position: relative;
				z-index: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: calc((100% - 7.8rem) / 2);
				padding: 4.6rem 5.2rem;
				cursor: pointer;
				background-color: #fff;
				border-radius: 2rem;
				transition: ease 0.3s transform;

				@media screen and (max-width: 767px) {
					width: 50%;
					border-radius: 0.48rem;
					padding: 1.1rem;
				}

				@media (hover: hover) and (pointer: fine) {
					&:hover {
						transform: scale(1.08);
					}

					&.active:hover {
						transform: none;
					}
				}



				.name-area {
					position: relative;
					z-index: 3;
					display: flex;
					align-items: center;
					gap: 2rem;

					@media screen and (max-width: 767px) {
						gap: 0.8rem;
					}

					.icon {
						flex-shrink: 0;
						width: 8.8rem;
						height: 8.8rem;

						@media screen and (max-width: 767px) {
							width: 2.8rem;
							height: 2.8rem;
						}
					}

					.main {
						font-style: normal;
						font-weight: 700;
						font-size: 2.8rem;
						line-height: 160%;
						letter-spacing: 0.05em;
						color: #000;

						@media screen and (max-width: 767px) {
							font-size: 1.2rem;
						}
					}
				}

				.arrow {
					position: relative;
					z-index: 3;
					flex-shrink: 0;
					width: 5.2rem;
					height: 5.2rem;
					transform: rotate(90deg);
					filter: invert(26%) sepia(89%) saturate(741%) hue-rotate(214deg) brightness(92%) contrast(95%);

					@media screen and (max-width: 767px) {
						width: 1.5rem;
						height: 1.5rem;
					}
				}

				&.active {
					background-color: #4D45A7;

					&::before {
						content: "";
						position: absolute;
						left: calc(50% - 3rem);
						bottom: -2.7rem;
						z-index: 2;
						display: block;
						width: 6rem;
						height: 4.2rem;
						background-image: url("../img/parts/curriculum_detail.svg");
						background-size: 100% 100%;
						background-repeat: no-repeat;
					}

					@media screen and (max-width: 767px) {
						&::before {
							left: calc(50% - 1rem);
							bottom: -1.145rem;
							width: 2rem;
							height: 1.84rem;
							background-image: url("../img/parts/sp_curriculum_detail.svg");
						}
					}

					.name-area {
						.main {
							color: #fff;
						}
					}

					.arrow {
						filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(105deg) brightness(110%) contrast(101%);
					}
				}
			}
		}
	}


	.inner-contents {
		display: none;
		pointer-events: none;

		&.active {
			display: block;
			pointer-events: auto;
		}
	}



}


/* --------------------------------------------------------------- */
/* common-story-archive */
/* --------------------------------------------------------------- */
.common-story-archive {
	.card {
		width: 44rem;

		@media screen and (max-width: 767px) {
			width: 28.5rem;
		}

		& a {
			display: block;

			@media (hover: hover) and (pointer: fine) {
				&:hover {
					.card-wrapper {
						.img {
							transform: scale(1.08);
						}
					}
				}
			}


		}

		.card-wrapper {
			position: relative;
			aspect-ratio: 44 / 64;
			border-radius: 100rem 100rem 0 0;
			overflow: hidden;

			@media screen and (max-width: 767px) {
				aspect-ratio: 28.5 / 41.4;
			}

			.img {
				width: 100%;
				height: 100%;
				transition: ease 0.3s transform;


				& img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.card-info {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 10.6rem 2.6rem 3.3rem;
				width: 100%;
				aspect-ratio: 440 / 339;
				background: linear-gradient(180deg, rgba(63, 161, 134, 0) 0%, rgba(63, 161, 134, 0.8) 100%);

				@media screen and (max-width: 767px) {
					padding: 6.8rem 1.7rem 2.3rem;
					aspect-ratio: 28.5 / 22;
				}

				.base {
					.tags {
						display: flex;
						align-items: center;
						gap: 1rem;
						margin-bottom: 1.6rem;

						@media screen and (max-width: 767px) {
							gap: 0.6rem;
							margin-bottom: 1rem;
						}

						.place {
							padding: 0.1rem 1.2rem;
							border-radius: 10rem;
							background-color: #fff;
							font-style: normal;
							font-weight: 600;
							font-size: 1.4rem;
							line-height: 2.4rem;
							color: #000000;

							@media screen and (max-width: 767px) {
								padding: 0.5rem 0.7rem;
								font-size: 1rem;
								line-height: 100%;
							}
						}

						.license {
							font-style: normal;
							font-weight: 700;
							font-size: 1.6rem;
							line-height: 2.8rem;
							letter-spacing: 0.05em;
							color: #FFFFFF;

							@media screen and (max-width: 767px) {
								font-size: 1.2rem;
								line-height: 1.8rem;
							}
						}
					}

					.list-text {
						font-style: normal;
						font-weight: 700;
						font-size: 2.2rem;
						line-height: 160%;
						letter-spacing: 0.05em;
						color: #FFFFFF;

						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
						}
					}
				}

				.list-name {
					font-family: 'Alexandria';
					font-style: normal;
					font-weight: 500;
					font-size: 1.8rem;
					line-height: 100%;
					letter-spacing: 0.05em;
					color: #FFFFFF;

					@media screen and (max-width: 767px) {
						font-size: 1.2 rem;
					}
				}

				.card-link {
					position: absolute;
					bottom: 2.6rem;
					right: 3.4rem;
					z-index: 2;
					width: 3.2rem;
					height: 3.2rem;
					filter: invert(100%) sepia(22%) saturate(2070%) hue-rotate(262deg) brightness(111%) contrast(101%);

					@media screen and (max-width: 767px) {
						bottom: 1.8rem;
						right: 2.2rem;
						width: 2.1rem;
						height: 2.1rem;
					}
				}
			}
		}
	}
}

/* --------------------------------------------------------------- */
/* footer */
/* --------------------------------------------------------------- */
#footer {
	padding-bottom: 6rem;
	background: linear-gradient(to bottom, #fff 0%, #fff 9.4rem, #F2F4EF 9.4rem, #F2F4EF 100%);

	@media screen and (max-width: 767px) {
		padding-bottom: 3.2rem;
	}

	&.association,
	&.exam,
	&.faq,
	&.privacy,
	&.commercial,
	&.sitemap {
		background: #F2F4EF;
	}

	.contact {
		padding-top: 7.8rem;
		padding-bottom: 5.7rem;
		margin-bottom: 6.6rem;
		width: 100%;
		background: #000000;
		border-radius: 3rem;

		@media screen and (max-width: 767px) {
			padding-top: 3.6rem;
			padding-bottom: 3.5rem;
			margin-bottom: 4.2rem;
		}

		.text {
			.main {
				margin-bottom: 2.6rem;
				font-style: normal;
				font-weight: 700;
				font-size: 3.4rem;
				line-height: 2rem;
				text-align: center;
				letter-spacing: 0.05em;
				color: #FFFFFF;

				@media screen and (max-width: 767px) {
					margin-bottom: 1.2rem;
					font-size: 2rem;
				}
			}

			.sub {
				margin-bottom: 2.9rem;
				font-style: normal;
				font-weight: 700;
				font-size: 1.8rem;
				line-height: 180%;
				text-align: center;
				letter-spacing: 0.05em;
				color: #FFFFFF;

				@media screen and (max-width: 767px) {
					margin-bottom: 1.9rem;
					font-size: 1.4rem;
				}
			}
		}

		.btn {
			text-align: center;

			& a {
				display: inline-flex;
				align-items: center;
				gap: 1rem;
				padding: 1.8rem 8.3rem;
				border-radius: 8rem;
				background-color: #fff;
				font-style: normal;
				font-weight: 600;
				font-size: 2rem;
				color: #000000;
				border: 0.2rem solid #fff;
				transition: ease 0.3s color, ease 0.3s background-color;

				@media screen and (max-width: 767px) {
					gap: 0.6rem;
					padding: 1.3rem 6.9rem;
					font-size: 1.4rem;
					line-height: 2rem;
				}

				&::before {
					content: "";
					display: inline-block;
					width: 2.4rem;
					height: 2.4rem;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					background-image: url("../img/parts/icon-mail.svg");
					transition: ease 0.3s filter;
				}

				@media (hover: hover) and (pointer: fine) {
					&:hover {
						background-color: #000;
						color: #fff;

						&::before {
							filter: invert(100%) sepia(0%) saturate(7478%) hue-rotate(222deg) brightness(110%) contrast(99%);
						}
					}
				}
			}
		}
	}

	.contents {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5.2rem;

		@media screen and (max-width: 767px) {
			margin-bottom: 2.7rem;
		}

		.left {
			.logo {
				margin-bottom: 2.5rem;

				@media screen and (max-width: 767px) {
					margin-bottom: 1.5rem;
				}

				& a {
					width: 32.3rem;

					@media screen and (max-width: 767px) {
						width: 24rem;
					}
				}
			}

			.text {
				.name {
					margin-bottom: 0.8rem;

					.sub {
						font-style: normal;
						font-weight: 600;
						font-size: 1.6rem;
						line-height: 160%;
						letter-spacing: 0.05em;
						color: #000000;

						@media screen and (max-width: 767px) {
							font-size: 1.2rem;
						}
					}

					.main {
						font-style: normal;
						font-weight: 600;
						font-size: 1.8rem;
						line-height: 160%;
						letter-spacing: 0.05em;
						color: #000000;

						@media screen and (max-width: 767px) {
							font-size: 1.6rem;
						}
					}
				}

				.address {
					font-style: normal;
					font-weight: 400;
					font-size: 1.6rem;
					line-height: 160%;
					letter-spacing: 0.05em;
					color: #000000;

					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
					}
				}
			}
		}

		.right {
			padding-top: 2.6rem;
			padding-right: 0.7rem;
		}
	}

	.copyright {
		text-align: left;

		& small {
			font-style: normal;
			font-weight: 400;
			font-size: 1.6rem;
			line-height: 180%;
			letter-spacing: 0.05em;
			color: #000000;

			@media screen and (max-width: 767px) {
				font-size: 1.4rem;
			}
		}
	}

	.pageup {
		/* position: fixed; */
		position: absolute;
		/* right: 24rem; */
		right: 0;
		/* bottom: 4.6rem; */
		bottom: -1.4rem;
		z-index: 50;
		width: 6.4rem;
		height: 6.4rem;
		background-image: url("../img/parts/pageup.svg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		transition: ease 0.3s bottom;

		@media (hover: hover) and (pointer: fine) {
			&:hover {
				/* bottom: 6.4rem; */
				bottom: 0;
			}
		}

		@media screen and (max-width: 767px) {
			right: 2.4rem;
			bottom: 3.2rem;
			width: 4.4rem;
			height: 4.4rem;
		}
	}
}

/* ------------------------------------------- */
/* inner config */
/* ------------------------------------------- */
.inner {
	position: relative;
	z-index: 1;
	margin: 0 auto;

	@media screen and (max-width: 767px) {
		width: calc(100% - 4.2rem);
	}
}

.w960 {
	max-width: 96rem;
}

.w1080 {
	max-width: 108rem;
}

.w1200 {
	max-width: 120rem;
}

.w1440 {
	max-width: 144rem;
}

/* ------------------------------------------- */
/* align */
/* ------------------------------------------- */
.tar {
	text-align: right;
}

.tal {
	text-align: left;
}

.tac {
	text-align: center;
}

/* --------------------------------------------------------------- */
/* common parts */
/* --------------------------------------------------------------- */

/* ------------------------------------------- */
/* common-area */
/* ------------------------------------------- */
.common-area {}

/* ------------------------------------------- */
/* common-title */
/* ------------------------------------------- */
.common-title {}

/* type01 */
.common-title.type-eng {

	.eng {
		font-family: 'Alexandria';
		font-style: normal;
		font-weight: 500;
		font-size: 6.4rem;
		line-height: 100%;
		letter-spacing: 0.05em;
		color: #000000;

		@media screen and (max-width: 767px) {
			font-size: 3.8rem;
		}
	}

	.jp {
		font-style: normal;
		font-weight: 700;
		font-size: 2.4rem;
		line-height: 2.9rem;
		letter-spacing: 0.05em;
		color: #000000;

		@media screen and (max-width: 767px) {
			font-size: 1.6rem;
			line-height: 1.9rem;
		}
	}

	&.type01 {
		display: flex;
		align-items: center;
		gap: 5.3rem;

		@media screen and (max-width: 767px) {
			flex-direction: column;
			align-items: flex-start;
			gap: 1.2rem;
		}
	}

	&.type02 {
		.eng {
			margin-bottom: 1.5rem;

			@media screen and (max-width: 767px) {
				margin-bottom: 1.2rem;
			}
		}
	}

	&.color-fff {

		.eng,
		.jp {
			color: #fff;
		}
	}

	&.with-underline {
		padding-bottom: 5.2rem;
		border-bottom: 1px solid #000;

		@media screen and (max-width: 767px) {
			padding-bottom: 2rem;
		}
	}

}

@media screen and (max-width: 767px) {
	#contents.fv-type-text {
		.common-title.type-eng {
			&.type02 {
				.eng {
					font-size: 3rem;
					margin-bottom: 0.8rem;
				}

				.jp {
					font-size: 1.2rem;
				}
			}
		}
	}
}



.common-title.type-jp {
	.jp {
		font-style: normal;
		font-weight: 600;
		font-size: 3.2rem;
		line-height: 160%;
		letter-spacing: 0.05em;
		color: #000000;

		@media screen and (max-width: 767px) {
			font-size: 1.8rem;
		}
	}

	&.type01 {
		.jp {
			font-style: normal;
			font-weight: 700;
			font-size: 2.4rem;
			line-height: 2.9rem;
			letter-spacing: 0.05em;
			color: #000000;

			@media screen and (max-width: 767px) {
				font-size: 1.8rem;
				line-height: 2.4rem;
			}
		}
	}

	&.with-underline {
		padding-bottom: 2.5rem;
		border-bottom: 1px solid #000;

		@media screen and (max-width: 767px) {
			padding-bottom: 2rem;
		}
	}
}

/* ------------------------------------------- */
/* common-btn */
/* ------------------------------------------- */
.common-btn {}

.common-btn.type-school {
	display: flex;
	width: 38.1rem;
	min-height: 6.2rem;
	border-radius: 10rem;
	border: 0.2rem solid #000;
	overflow: hidden;

	@media screen and (max-width: 767px) {
		width: 34.5rem;
		min-height: 5.5rem;
	}

	.select-area {
		position: relative;
		flex-grow: 1;

		&::before {
			content: "";
			position: absolute;
			right: 2.4rem;
			top: calc(50% - 1.2rem);
			z-index: 1;
			display: inline-block;
			width: 2.4rem;
			height: 2.4rem;
			background-image: url("../img/parts/arrow-up-s-line.svg");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			pointer-events: none;
		}

		@media screen and (max-width: 767px) {
			&::before {
				right: 1.1rem;
				top: calc(50% - 1.1rem);
				width: 2.1rem;
				height: 2.1rem;
			}
		}

		& select {
			padding: 1.5rem 2.4rem;
			width: 100%;
			font-style: normal;
			font-weight: 500;
			font-size: 1.6rem;
			line-height: 3rem;
			letter-spacing: 0.05em;
			color: #000000;
			border: none;
			cursor: pointer;
			outline: none;
			background-color: #fff;
			transition: ease 0.3s background-color;

			@media screen and (min-width: 768px) {
				@media (hover: hover) and (pointer: fine) {
					&:hover {
						background-color: #e7e7e7;
					}
				}
			}


			@media screen and (max-width: 767px) {
				padding: 1.4rem 2.4rem;
				font-size: 1.4rem;
				line-height: 2.63rem;
			}

			&:focus {
				border: none;
				outline: none;
				/* background-color: #fff; */
			}

			& option {
				background-color: #fff;
			}
		}
	}



	& a {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 12rem;
		font-style: normal;
		font-weight: 600;
		font-size: 1.6rem;
		line-height: 3rem;
		text-align: center;
		letter-spacing: 0.05em;
		color: #FFFFFF;
		background-color: #000;
		border-left: 0.2rem solid #000;
		transition: ease 0.3s background-color, ease 0.3s color;

		@media screen and (max-width: 767px) {
			@media screen and (max-width: 767px) {
				width: 10.5rem;
				font-size: 1.4rem;
				line-height: 2.63rem;
			}
		}

		&[href="#"] {
			pointer-events: none;
		}

		@media (hover: hover) and (pointer: fine) {
			&:hover {
				color: #000;
				background-color: #fff;
			}
		}
	}
}

/* ------------------------------------------- */
/* common-select */
/* ------------------------------------------- */
.common-select {}

/* ------------------------------------------- */
/* common-list */
/* ------------------------------------------- */
.common-list {}

/* ------------------------------------------- */
/* common-text */
/* ------------------------------------------- */
.common-text-area.type-curriculum {
	display: flex;
	gap: 4rem;

	@media screen and (max-width: 767px) {
		flex-direction: column;
		gap: 2rem;
	}

	.main {
		flex-shrink: 0;
		width: 56.5rem;
		font-style: normal;
		font-weight: 600;
		font-size: 3.4rem;
		line-height: 160%;
		letter-spacing: 0.05em;
		color: #000000;

		@media screen and (max-width: 767px) {
			width: 100%;
			font-size: 1.6rem;
		}
	}

	.sub {
		flex-grow: 1;
		font-style: normal;
		font-weight: 400;
		font-size: 1.8rem;
		line-height: 200%;
		letter-spacing: 0.05em;
		color: #000000;

		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
		}

		& p {
			font-style: normal;
			font-weight: 400;
			font-size: 1.8rem;
			line-height: 200%;
			letter-spacing: 0.05em;
			color: #000000;

			@media screen and (max-width: 767px) {
				font-size: 1.4rem;
			}

			&:not(:last-child) {
				margin-bottom: 3.6rem;
			}

			@media screen and (max-width: 767px) {
				&:not(:last-child) {
					margin-bottom: 2.8rem;
				}
			}
		}
	}
}

/* ------------------------------------------- */
/* common-table */
/* ------------------------------------------- */
.common-table {
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;

	& p {
		margin-bottom: 2rem;

		&:last-child {
			margin-bottom: 0;
		}
	}
}

/* table-scroll */
@media screen and (max-width: 767px) {
	.table-scroll {
		position: relative;
		padding-bottom: 2rem;
		overflow-x: scroll;

		&:after {
			content: "←";
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 1;
			margin-left: -1.5rem;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			width: 3rem;
			height: 3rem;
			border-radius: 1.5rem;
			border: 0.1rem solid #000;
			animation: arrowtable 2s infinite forwards;
		}

		.common-table {
			width: 80rem;
		}
	}
}

@keyframes arrowtable {
	50% {
		opacity: 1;
		right: 0;
	}

	100% {
		opacity: 0;
		right: 100%;
	}
}

/* ------------------------------------------- */
/* アニメーション用 */
/* ------------------------------------------- */
/*
.moveFlag {
	position: relative;
	top: -5rem;
	opacity: 0;
	transition: ease 0.5s top, ease 0.5s opacity;
}
.moveFlag.on {
	top: 0;
	opacity: 1;
}
@media print {
	.moveFlag {
		top: 0;
		opacity: 1;
	}
}
*/

/* --------------------------------------------------------------- */
/*  margin padding */
/* --------------------------------------------------------------- */
.mb0 {
	margin-bottom: 0rem !important;
}

.mb10 {
	margin-bottom: 1rem !important;
}

.mb20 {
	margin-bottom: 2rem !important;
}

.mb30 {
	margin-bottom: 3rem !important;
}

.mb40 {
	margin-bottom: 4rem !important;
}

.mb50 {
	margin-bottom: 5rem !important;
}

.mb60 {
	margin-bottom: 6rem !important;
}

.mb70 {
	margin-bottom: 7rem !important;
}

.mb80 {
	margin-bottom: 8rem !important;
}

.mb90 {
	margin-bottom: 9rem !important;
}

.mb100 {
	margin-bottom: 10rem !important;
}

@media screen and (max-width: 767px) {
	.mb10 {
		margin-bottom: 0.5rem !important;
	}

	.mb20 {
		margin-bottom: 1rem !important;
	}

	.mb30 {
		margin-bottom: 1.5rem !important;
	}

	.mb40 {
		margin-bottom: 2rem !important;
	}

	.mb50 {
		margin-bottom: 2.5rem !important;
	}

	.mb60 {
		margin-bottom: 3rem !important;
	}

	.mb70 {
		margin-bottom: 3.5rem !important;
	}

	.mb80 {
		margin-bottom: 4rem !important;
	}

	.mb90 {
		margin-bottom: 4.5rem !important;
	}

	.mb100 {
		margin-bottom: 5rem !important;
	}
}

.mt0 {
	margin-top: 0rem !important;
}

.mt10 {
	margin-top: 1rem !important;
}

.mt20 {
	margin-top: 2rem !important;
}

.mt30 {
	margin-top: 3rem !important;
}

.mt40 {
	margin-top: 4rem !important;
}

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

.mt60 {
	margin-top: 6rem !important;
}

.mt70 {
	margin-top: 7rem !important;
}

.mt80 {
	margin-top: 8rem !important;
}

.mt90 {
	margin-top: 9rem !important;
}

@media screen and (max-width: 767px) {
	.mt10 {
		margin-top: 0.5rem !important;
	}

	.mt20 {
		margin-top: 1rem !important;
	}

	.mt30 {
		margin-top: 1.5rem !important;
	}

	.mt40 {
		margin-top: 2rem !important;
	}

	.mt50 {
		margin-top: 2.5rem !important;
	}

	.mt60 {
		margin-top: 3rem !important;
	}

	.mt70 {
		margin-top: 3.5rem !important;
	}

	.mt80 {
		margin-top: 4rem !important;
	}

	.mt90 {
		margin-top: 4.5rem !important;
	}

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

.pb0 {
	padding-bottom: 0 !important;
}

.pb10 {
	padding-bottom: 1rem !important;
}

.pb20 {
	padding-bottom: 2rem !important;
}

.pb30 {
	padding-bottom: 3rem !important;
}

.pb40 {
	padding-bottom: 4rem !important;
}

.pb50 {
	padding-bottom: 5rem !important;
}

.pb60 {
	padding-bottom: 6rem !important;
}

.pb70 {
	padding-bottom: 7rem !important;
}

.pb80 {
	padding-bottom: 8rem !important;
}

.pb90 {
	padding-bottom: 9rem !important;
}

.pb100 {
	padding-bottom: 10rem !important;
}

@media screen and (max-width: 767px) {
	.pb10 {
		padding-bottom: 0.5rem !important;
	}

	.pb20 {
		padding-bottom: 1rem !important;
	}

	.pb30 {
		padding-bottom: 1.5rem !important;
	}

	.pb40 {
		padding-bottom: 2rem !important;
	}

	.pb50 {
		padding-bottom: 2.5rem !important;
	}

	.pb60 {
		padding-bottom: 3rem !important;
	}

	.pb70 {
		padding-bottom: 3.5rem !important;
	}

	.pb80 {
		padding-bottom: 4rem !important;
	}

	.pb90 {
		padding-bottom: 4.5rem !important;
	}

	.pb100 {
		padding-bottom: 5rem !important;
	}
}

.pt0 {
	padding-top: 0 !important;
}

.pt10 {
	padding-top: 1rem !important;
}

.pt20 {
	padding-top: 2rem !important;
}

.pt30 {
	padding-top: 3rem !important;
}

.pt40 {
	padding-top: 4rem !important;
}

.pt50 {
	padding-top: 5rem !important;
}

.pt60 {
	padding-top: 6rem !important;
}

.pt70 {
	padding-top: 7rem !important;
}

.pt80 {
	padding-top: 8rem !important;
}

.pt90 {
	padding-top: 9rem !important;
}

.pt100 {
	padding-top: 10rem !important;
}

@media screen and (max-width: 767px) {
	.pt10 {
		padding-top: 0.5rem !important;
	}

	.pt20 {
		padding-top: 1rem !important;
	}

	.pt30 {
		padding-top: 1.5rem !important;
	}

	.pt40 {
		padding-top: 2rem !important;
	}

	.pt50 {
		padding-top: 2.5rem !important;
	}

	.pt60 {
		padding-top: 3rem !important;
	}

	.pt70 {
		padding-top: 3.5rem !important;
	}

	.pt80 {
		padding-top: 4rem !important;
	}

	.pt90 {
		padding-top: 4.5rem !important;
	}

	.pt100 {
		padding-top: 5rem !important;
	}
}

/* ------------------------------------------- */
/* pagination */
/* ------------------------------------------- */
.single-post-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 7rem;

	@media screen and (max-width: 767px) {
		margin-top: 3.5rem;
	}

	.back {
		margin: 0 8.3rem;

		@media screen and (max-width: 767px) {
			margin: 0 1rem;
		}
	}

	.prev,
	.next {
		width: 14rem;

		@media screen and (max-width: 767px) {
			width: 4.6rem;
		}

		& a {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			width: 100%;
			height: 4.6rem;
			font-weight: 500;
			text-decoration: underline;
			letter-spacing: 0.08rem;
			color: #000;
			box-sizing: border-box;

			@media screen and (max-width: 767px) {
				padding: 0;
				font-size: 0;
				color: transparent;
			}

			@media (hover: hover) and (pointer: fine) {
				&:hover {
					text-decoration: none;
				}
			}

			&:after {
				content: "";
				position: absolute;
				top: 50%;
				margin-top: -2.3rem;
				display: block;
				width: 4.6rem;
				height: 4.6rem;
				border-radius: 2.3rem;
				background-color: #2987d9;
			}

			@media (hover: hover) and (pointer: fine) {
				&:hover:after {
					background-color: #2987d9;
				}
			}

			@media screen and (max-width: 767px) {
				.&:after {
					width: 4.8rem;
					height: 4.8rem;
					margin-top: -2.4rem;
					border-radius: 0;
				}
			}

			&:before {
				content: "";
				position: absolute;
				top: 50%;
				z-index: 1;
				margin-top: -0.4rem;
				display: block;
				width: 0.8rem;
				height: 0.8rem;
				border-top: 0.2rem solid #fff;
				box-sizing: border-box;
				transition: ease 0.25s border;
			}
		}
	}

	.prev {
		& a {
			padding-left: 7.3rem;

			&:after {
				left: 0;
			}

			&:before {
				left: 2.2rem;
				border-left: 0.2rem solid #fff;
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}

			@media (hover: hover) and (pointer: fine) {
				&:hover:before {
					border-left-color: #fff;
				}
			}
		}
	}

	.next {
		& a {
			padding-right: 7.3rem;

			&:after {
				right: 0;
			}

			&:before {
				right: 2.2rem;
				border-right: 0.2rem solid #fff;
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}
		}
	}
}

/* navigation pagination */
.navigation.pagination {
	margin: 7rem 0 0;

	@media screen and (max-width: 767px) {
		margin: 3rem 0 0;
	}

	.disable {
		display: none;
	}

	.nav-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;

		@media screen and (max-width: 767px) {
			position: relative;
			padding-bottom: 3rem;
		}
	}

	.pager {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin: 0 0.8rem;
		width: 6.4rem;
		height: 6.4rem;
		font-family: "Noto Sans JP", "Alexandria", sans-serif;
		font-weight: bold;
		font-size: 2rem;
		letter-spacing: 0.08em;
		color: #000;
		background: #fff;
		text-decoration: none;
		transition: ease 0.25s all;
		/* border-radius: 0.4em; */
		border: 0.2rem solid #000;
		border-radius: 50%;

		@media screen and (max-width: 767px) {
			width: 4.8rem;
			height: 4.8rem;
			font-size: 1.4rem;
		}

		@media (hover: hover) and (pointer: fine) {
			&:hover {
				color: #fff;
				background: #000;
				border-color: #000;
			}
		}
	}

	.pager.current {
		color: #fff;
		font-weight: bold;
		background: #000;
		border-color: #000;
	}

	.next,
	.prev {
		@media screen and (max-width: 767px) {
			/*position: absolute;*/
			/*bottom: 0;*/
			/*width: 48%;*/
			/*height: 4rem;*/
		}

		& a {
			position: relative;
			display: block;
			width: 6.4rem;
			height: 6.4rem;
			font-size: 0;

			@media screen and (max-width: 767px) {
				width: 4.8rem;
				height: 4.8rem;
			}

			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				display: inline-block;
				width: 100%;
				height: 100%;
				background-image: url("../img/parts/icon-pagenation.svg");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				opacity: 1;
				transition: ease 0.3s opacity;
			}

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				display: inline-block;
				width: 100%;
				height: 100%;
				background-image: url("../img/parts/icon-pagenation-active.svg");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				opacity: 0;
				transition: ease 0.3s opacity;
			}

			@media (hover: hover) and (pointer: fine) {
				&:hover {
					&::after {
						opacity: 0;
					}

					&::before {
						opacity: 1;
					}
				}
			}

		}
	}

	.prev {

		& a {
			transform: rotate(180deg);
		}

		@media screen and (min-width: 767.01px) {
			margin-right: 0.8rem;
		}

		@media screen and (max-width: 767px) {
			margin-right: 1rem;
		}
	}

	.next {
		@media screen and (min-width: 767.01px) {
			margin-left: 0.8rem;
		}

		@media screen and (max-width: 767px) {
			margin-left: 1rem;
			/*right: 0;*/
		}
	}
}

/* ------------------------------------------- */
/* wordpress パスワードフォーム調整用 */
/* ------------------------------------------- */

.post-password-form {
	padding: 100px 30px;
	line-height: 1.8;
	text-align: center;
}