@charset "utf-8";

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
Vertas Academyについて
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- メッセージ
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.about-message {
	display: grid;
	row-gap: 2em;
}

.about-message .img {
	width: 100%;
	object-fit: cover;
	object-position: 30% 70%;
}

@media (min-width: 768px) {
.about-message {
	grid-template-columns: calc(50% - 100px) minmax(auto, 730px);
}

.about-message .img {
	height: 700px;
}

.about-message .inner {
	padding-left: 13%;
	align-self: center;
}

.about-message .description {
	font-size: 18px;
}
}

@media (max-width: 767.9px) {
.about-message .img {
	max-height: 480px;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- 私たちが目指す未来
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.about-vision {
	background: var(--color_sub);
}

.about-vision .heading_enja {
	color: #fff;
}

.about-vision .section-description {
	color: #fff;
}

.about-vision-ul {
	display: grid;
	gap: 2em 6%;
}

.about-vision-li {
	padding: 30px var(--padding-inline);
	background: #fff;
	counter-increment: number;
}

.about-vision-li::before {
	display: block;
	margin-bottom: 0.4em;
	color: var(--color_main);
	font-size: 40px;
	font-family: var(--font_serif);
	line-height: 1;
	letter-spacing: 0.1em;
	content: counter(number, decimal-leading-zero);
}

.about-vision-li .heading-ja {
	margin-bottom: 0.7em;
	font-size: 24px;
}

.about-vision-li .description {
	font-size: 15px;
	line-height: 1.6;
}

.about-vision-li .heading-en {
	font-size: 14px;
}

.about-vision-li .heading-en::before {
	display: block;
	width: 60px;
	margin-block: 1.5em 1em;
	border-top: 1px solid;
	content: "";
}

@media (min-width: 768px) {
.about-vision-ul {
	grid-template-columns: 1fr 1fr 1fr;
}

.about-vision-li {
	padding: 40px 11%;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- 教育方針
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.about-policy-li {
	padding-block: 20px;
	border-bottom: 1px solid;
}

.about-policy-li .heading_circle {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.4em;
	align-items: center;
}

.about-policy-li .heading-en {
	font-weight: 600;
	font-size: 13px;
}

.about-policy-li .description {
	font-size: 15px;
}

@media (min-width: 768px) {
.about-policy .inner {
	display: grid;
	grid-template-columns: auto 50%;
	column-gap: 8%;;
}

.about-policy-li {
	padding-block: 40px;
}
}

@media (max-width: 767.9px) {
.about-policy {
	padding-bottom: initial;
}

.about-policy-li:first-child {
	padding-top: initial;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- Vertas Academyの特徴
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.about-feature-ul {
	margin-top: 40px;
}

.about-feature-li {
	display: grid;
	padding-block: 30px 40px;
	border-top: 1px solid;
	counter-increment: number;
	gap: 1.3em 6%;
}

.about-feature-li:last-child {
	padding-bottom: initial;
}

.about-feature-li .number {
	display: grid;
	justify-items: center;
}

.about-feature-li .number::before {
	width: 33px;
	height: 43px;
	background: url("../img/about/feature-number.svg") center center / contain no-repeat;
	content: "";
}

.about-feature-li .number::after {
	font-size: 40px;
	font-family: var(--font_serif);
	line-height: 1.2;
	letter-spacing: 0.1em;
	content: counter(number, decimal-leading-zero);
}

@media (min-width: 768px) {
.about-feature {
	display: grid;
	padding-block: initial;
	grid-template-columns: calc(50% - 100px) minmax(auto, 730px);
}

.about-feature-img {
	position: sticky;
	top: var(--header-height);
	width: 100%;
	min-height: 800px;
	object-fit: cover;
}

.about-feature .inner {
	padding-block: var(--padding-block);
	padding-left: 13%;
}

.about-feature-li {
	padding-top: 40px;
	grid-template-columns: 1fr 1fr;
}

.about-feature-li .number {
	grid-column: 1 / 3;
}
}

@media (max-width: 767.9px) {
.about-feature-img {
	display: none;
}

.about-feature-li .heading_circle {
	font-size: 24px;
}

.about-feature-li .img {
	width: 100%;
	max-height: 360px;
	object-fit: cover;
}
}