@import"https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap";
.system .lead__intro {
	font-size: 15px;
	line-height: 1.8
}
.system .lead__intro-title {
	margin-bottom: 12px;
	font-size: 28px;
	font-size: clamp(24px, 9.7142857143px + 1.9047619048vw, 28px);
	font-weight: 700;
	line-height: 1.4
}
.system .lead__intro p {
	margin-bottom: 12px;
	font-weight: 500
}
.system .lead__intro figure {
	position: relative
}
.system .lead__intro figure::before {
	content: "";
	position: absolute;
	right: 26px;
	bottom: -26px;
	width: 93px;
	height: 112px;
	background: url(../images/merit/system/parts_write-child.png);
	background-size: cover
}
@media only screen and (max-width: 750px) {
	.system .lead__intro figure::before {
		right: 10px;
		bottom: -20px
	}
}
.system .lead .example {
	gap: 48px 40px
}
@media only screen and (max-width: 750px) {
	.system .lead .example {
		gap: 40px
	}
}
.system .lead .example-item {
	display: flex;
	flex-direction: column;
	gap: 16px
}
.system .lead .example-item dt {
	gap: 20px;
	align-items: center
}
.system .lead .example-item dt .bubble {
	flex: 1;
	min-height: calc(3.2em + 24px);
	display: grid;
	place-items: center flex-start;
	padding: 12px 16px;
	border-radius: 8px;
	background-color: #ebeff3;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	position: relative
}
.system .lead .example-item dt .bubble::before {
	content: "";
	position: absolute;
	top: calc(50% - 8px);
	left: -12px;
	border-style: solid;
	border-width: 8px 12px 8px 0;
	border-color: rgba(0, 0, 0, 0) #ebeff3 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}
.system .lead .example-item dd {
	flex: 1;
	padding: 12px;
	border: 1px solid #ff7b01;
	border-radius: 8px;
	font-size: 15px
}
.system .lead .result {
	background: url(../images/merit/system/parts-triangles_bottom_b.png) no-repeat 50% 24px/20px auto
}
.system .lead .result ul {
	padding: 24px;
	border: 1px solid #ff7b01;
	border-radius: 8px;
	background-color: #ffeeb0;
	position: relative;
	gap: 12px 16px;
	font-size: 18px;
	font-weight: 500;
	position: relative
}
.system .lead .result ul::before {
	content: "";
	position: absolute;
	top: -36px;
	right: 8px;
	width: 70px;
	height: 92px;
	background: url(../images/merit/system/illust_look-boy.png);
	background-size: cover
}
@media only screen and (max-width: 750px) {
	.system .lead .result ul::before {
		top: -48px
	}
}
.system .lead .result ul li {
	padding: 24px 16px 24px 56px;
	border-radius: 4px;
	background: #fff url(../images/merit/system/icon_check-box.svg) no-repeat 16px 50%
}
@media only screen and (max-width: 750px) {
	.system .lead .result ul li {
		background-position: 16px 24px
	}
}
.system .guidance .section__title-borderleft span, .system .classroom .section__title-borderleft span {
	display: block;
	font-size: 16px;
	margin-bottom: -4px
}
.system .guidance .section__intro-subtext, .system .classroom .section__intro-subtext {
	font-weight: 400
}
.system .guidance .step {
	gap: 23px
}
.system .guidance .step__section {
	padding: 12px 16px 32px;
	border-radius: 8px;
	background-color: #ffeeb0;
	position: relative
}
.system .guidance .step__section .section__title-bold {
	text-align: right;
	line-height: 1.8;
	margin-bottom: 4px
}
.system .guidance .step__section-num {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	margin: auto;
	background: #ff7b01;
	border-radius: 8px 0px;
	padding: 13px 7.5px 14px;
	color: #fff;
	font-size: 8px;
	line-height: 1
}
.system .guidance .step__section-num span {
	display: block;
	color: #ff7b01;
	text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff;
	font-size: 22px;
	font-style: normal;
	font-weight: 900;
	letter-spacing: 1.8px
}
.system .guidance .step__section:not(:first-child)::before {
	content: "";
	position: absolute;
	border-style: solid
}
@media only screen and (min-width: 751px) {
	.system .guidance .step__section:not(:first-child)::before {
		top: calc(50% - 9px);
		left: -15px;
		border-width: 9px 0 9px 11px;
		border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ff7b01
	}
}
@media only screen and (max-width: 750px) {
	.system .guidance .step__section:not(:first-child)::before {
		top: -15px;
		left: calc(50% - 9px);
		border-width: 11px 9px 0;
		border-color: #ff7b01 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
	}
}
.system .guidance .step__section img {
	width: 100%
}
.system .guidance .step__section-body {
	margin-top: 12px;
	font-size: 13px;
	letter-spacing: .04em;
	line-height: 1.6
}
.system .classroom-list__list {
	font-size: 15px
}
@media only screen and (min-width: 751px) {
	.system .classroom-list__list {
		grid-template-rows: repeat(2, minmax(0, 1fr));
		grid-auto-flow: column
	}
}
.system .classroom .section > .grid {
	padding-top: 15px;
	border-top: 1px solid #dadada
}