@charset "UTF-8";

/* --------------------------------------------------------------------------------------
	コース一覧
--------------------------------------------------------------------------------------- */

.school-index-wrap,
.school-online-wrap { padding-bottom: 64px; }

.online-wrap {
	background-color: #fff;
	border-radius: var(--border-radius);
	margin-top: 64px;
	overflow: hidden;
}

.online-wrap .sub-title {
	background-color: var(--color-blue);
	color: #fff;
	padding: 12px 0;
	text-align: center;
}

.online-wrap .online-content { margin: 32px 40px; }

.online-wrap .online-content .online-head {
	align-items: center;
	display: flex;
	justify-content: center;
}

.online-wrap .online-content .banner-image {
	margin-right: 28px;
	max-width: 322px;
}

.online-wrap .online-content .dotted {
	display: inline-block;
	text-align: left;
}

.online-wrap .banner-area {
	margin-top: 48px;
	text-align: center;
}

.online-wrap .accordion-course summary { display: none; }

@media (max-width: 1099px) {

	.breadcrumb {
		padding-left: 4.975vw;
		padding-right: 4.975vw;
	}

	.school-index-wrap,
	.school-online-wrap { padding-bottom: 14.925vw; }

	.online-wrap { margin: 10.448vw 4.975vw auto; }

	.online-wrap .online-content { margin: 4.975vw; }

	.online-wrap .online-content .online-head { display: block; }

	.online-wrap .online-content .banner-image {
		margin-bottom: 4.975vw;
		margin-right: 0;
		max-width: 100%;
	}

	.online-wrap .online-content .dotted { display: block; }

	.online-wrap .online-content .dotted li { font-size: 3.483vw; }

	.online-wrap .banner-area { margin-top: 7.96vw; }

	.online-wrap .accordion-course summary { display: block; }
}

/* --------------------------------------------------------------------------------------
	オンラインで学ぶ
--------------------------------------------------------------------------------------- */

.online-lead {
	margin-bottom: 48px;
	margin-top: 96px;
	text-align: center;
}

.online-lead span {
	display: inline-block;
	position: relative;
	z-index: 0;
}

.online-lead span::after {
	background: url(../images/common/recommended-text-line.png) no-repeat;
	background-size: 100% auto;
	bottom: -1px;
	content: '';
	display: block;
	height: 19px;
	left: -6px;
	position: absolute;
	width: 100%;
	z-index: -1;
}

.online-details-content{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(auto-fill, subgrid);
	margin-top: 96px;
	row-gap: 24px;
}

.online-details-content section {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	row-gap: 0;
	width: 94%;
}

.online-details-content section h3 {
	align-items: center;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	font-size: 18px;
	font-weight: var(--Bold);
	justify-content: center;
	text-align: center;
}

.online-details-content section .image-text { margin-top: 16px; }

.online-details-content section .image-text .image { max-height: 180px; }

.online-details-content section .image-text p {
	font-size: 14px;
	margin-top: 10px;
}

.school-online-wrap .flow {
	margin-top: 64px;
	text-align: center;
}

.school-online-wrap .flow .diagram {
	margin: 36px auto 0;
	max-width: 80%;
}

.school-online-wrap .banner-area {
	margin-top: 48px;
	text-align: center;
}

.skill-content {
	padding-bottom: 100px;
	padding-top: 100px;
}

@media (max-width: 1099px) {

	.online-lead {
		margin-bottom: 5.97vw;
		margin-top: 11.94vw;
	}

	.recommended-for {
		margin-left: 4.975vw;
		margin-right: 4.975vw;
	}

	.online-details-content {
		display: block;
		margin: 14.925vw 4.975vw 0;
	}

	.online-details-content section {
		display: block;
		width: auto;
	}

	.online-details-content section:nth-of-type(n+2) { margin-top: 7.96vw; }

	.online-details-content section h3 {
		display: block;
		font-size: 4.478vw;
	}

	.online-details-content section .image-text { margin-top: 3.98vw; }

	.online-details-content section .image-text .image { max-height: inherit; }

	.online-details-content section .image-text p {
		font-size: 3.483vw;
		margin-top: 3.98vw;
	}

	.school-online-wrap .flow {
		margin-top: 7.96vw;
		padding-left: 4.975vw;
		padding-right: 4.975vw;
	}

	.school-online-wrap .flow .diagram {
		margin-top: 3.98vw;
		max-width: 100%;
	}

	.school-online-wrap .banner-area { margin-top: 10.448vw; }

	.skill-content { padding: 9.95vw 4.975vw; }
}