@charset "utf-8";

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
学習プログラム
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- メイン
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.programs-li {
	display: grid;
	counter-increment: number;
	row-gap: 3em;
}

.programs-li .text {
	padding-inline: var(--padding-inline);
}

.programs-li .number {
	width: fit-content;
	border-bottom: 1px solid;
	font-size: 14px;
	font-family: var(--font_en);
}

.programs-li .number::after {
	margin-left: 0.2em;
	font-size: 32px;
	font-family: var(--font_serif);
	line-height: 1.4;
	letter-spacing: 0.1em;
	vertical-align: middle;
	content: counter(number, decimal-leading-zero);
}

.programs-li .heading {
	margin-block: 1em 0.6em;
	font-size: 32px;
	font-family: var(--font_serif);
}

.programs-li .description {
	margin-bottom: 2.5em;
	padding-bottom: 1.5em;
	border-bottom: 1px solid;
}

.programs-li .ul {
	display: flex;
	column-gap: 2em;
	flex-flow: wrap;
}

.programs-li .target {
	display: grid;
	padding: 1em;
	background: #fff;
	gap: 0.2em 1.3em;
}

.programs-li .target::before {
	font-weight: 700;
	content: "対象者";
}

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

.programs-li:nth-child(1) .img {
	object-position: center 40%;
}

.programs-li:nth-child(2) .img {
	object-position: left 40%;
}

.programs-li:nth-child(3) .img {
	object-position: 80% 40%;
}

.programs-li:nth-child(4) .img {
	object-position: 30% 40%;
}

@media (min-width: 768px) {
.programs-li {
	align-items: center;
}

.programs-li:nth-child(2n+1) {
	grid-template-columns: calc(50% - 100px) minmax(auto, 730px);
}

.programs-li:nth-child(2n) {
	grid-template-columns: minmax(auto, 730px) calc(50% - 100px);
	justify-content: end;
}

.programs-li .text {
	padding-block: 60px;
}

.programs-li:nth-child(2n+1) .text {
	padding-left: 13%;
	order: 2;
}

.programs-li:nth-child(2n) .text {
	padding-right: 13%;
}

.programs-li .number::after {
	font-size: 40px;
}

.programs-li .heading {
	font-size: 40px;
}

.programs-li .description {
	font-size: 18px;
}

.programs-li .target {
	grid-template-columns: auto 1fr;
}

.programs-li .img {
	height: 700px;
}
}

@media (max-width: 767.9px) {
.programs-li:not(:first-child) {
	padding-top: 3em;
}

.programs-li .img {
	max-height: 480px;
}
}