@charset "UTF-8";

/* --------------------------------------------------------------------------------------
	キービジュアル
--------------------------------------------------------------------------------------- */

.key-course-details {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	margin-top: 120px;
	min-height: 440px;
	position: relative;
	z-index: 0;
}

.key-course-details::before {
	background: linear-gradient(265deg, rgba(217, 217, 217, 0.00) 16.29%, rgba(255, 255, 255, 0.50) 32.36%, #FFF 75.81%);
	content: '';
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

.key-course-details section {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
}

.key-course-details section h2 small {
	display: block;
	font-size: 18px;
	font-weight: var(--Bold);
}

.key-course-details section h2 strong {
	display: block;
	font-size: 40px;
	font-weight: var(--Bold);
	line-height: 1.5;
	margin-top: 8px;
}

.key-course-details section h2 strong .cap {
	display: block;
	font-size: 55%;
}

.key-course-details section .dotted { margin-top: 24px; }

.key-course-details section .dotted li {
	font-size: 18px;
	font-weight: var(--Bold);
}

.key-course-details section .dotted li sup { font-size: 59%;}

.key-course-details section .tags-list { margin-top: 32px; }

.key-course-details section .note {
	display: block;
	margin-top: 12px;
}

.mt { margin-top: 80px; }

@media (max-width: 1099px) {

	.key-course-details {
		background-position: center top !important;
		background-size: auto 116.751vw;
		margin-top: 0;
		min-height: 93.353vw;
	}

	.key-course-details::before {
		background: linear-gradient(
			to bottom,
			rgba(217, 217, 217, 0) 0%,
			rgba(255, 255, 255, 1) 71%
		);
	}

	.key-course-details section {
		justify-content: flex-end;
		padding-bottom: 8.955vw;
		width: calc(100% - 9.95vw);
	}

	.key-course-details section h2 small { font-size: 3.98vw; }

	.key-course-details section h2 strong {
		font-size: 6.965vw;
		margin-top: 2.488vw;
	}

	.key-course-details section h2 strong:has(.cap) { line-height: 1.4; }

	.key-course-details section .note { margin-top: 3.333vw; }

	.key-course-details section .dotted { margin-top: 5.97vw; }
	.key-course-details section .dotted li { font-size: 3.98vw; }

	.key-course-details section .tags-list { margin-top: 5.97vw; }

	.mt { margin-top: 15.94vw; }
}

@media (max-width: 768px) {
	.key-course-details { min-height: 129.353vw; }
}

/* --------------------------------------------------------------------------------------
	head‐section
--------------------------------------------------------------------------------------- */

.why-do-it-now {
	background-color: #fff;
	/* border: 3px solid var(--color-magenta); */
	border: 3px solid transparent;
	border-radius: var(--border-radius);
	margin-top: 64px;
	padding: 40px;
	position: relative;
	text-align: center;
}

.why-do-it-now::after {
	background-color: var(--color-magenta);
	bottom: -40px;
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	content: '';
	height: 40px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 160px;
}

.why-do-it-now .skill-head {
	display: inline-block;
	position: relative;
}

.why-do-it-now .skill-head::before {
	background: url(../images/course/index/balloon-why.svg) no-repeat;
	background-size: 100% auto;
	content: '';
	display: block;
	height: 83px;
	left: -133px;
	position: absolute;
	text-align: center;
	top: 10px;
	width: 122px;
}

.why-do-it-now .catch-head dt {
	border: 2px solid var(--color-magenta);
	border-radius: 100vw;
	color: var(--color-magenta);
	display: inline-block;
	font-weight: var(--Bold);
	padding: 4px 20px;
}

.why-do-it-now .catch-head dd {
	font-weight: var(--Bold);
	margin-top: 24px;
}

.why-do-it-now .catch-head dt,
.why-do-it-now .catch-head dd { font-size: 20px; }

.why-do-it-now .large-title {
	background-color: var(--color-magenta);
	border-radius: 4px;
	color: #fff;
	display: inline-block;
	margin: 24px auto auto;
	padding: 1px 42px;
	text-align: center;
}

.why-do-it-now .skill-point {
	align-items: center;
	display: flex;
	gap: 32px;
	justify-content: center;
	margin-top: 48px;
}

.why-do-it-now .image img {
	display: inline-block;
	height: 200px;
	width: 100%;
}

.why-do-it-now .main-list {
	margin-left: 16px;
	text-align: left;
}

.why-do-it-now .main-list li {
	background: url(../images/common/icon-check.svg) no-repeat left 13px;
	background-size: 22px auto;
	border-bottom: 1px solid var(--color-border);
	font-size: 18px;
	font-weight: var(--Bold);
	padding: 10px 0 10px 33px;
}

.why-do-it-now .text {
	font-size: 26px;
	font-weight: var(--Bold);
	line-height: 1.8;
	margin-top: 36px;
	text-align: center;
}

.why-do-it-now .text .color-text {
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent;
	display: inline-block;
	-webkit-text-fill-color: transparent !important;
	/* color: var(--color-magenta); */
}

.problems {
	margin-top: 80px;
	text-align: center;
}

.problems h3 {
	display: inline-block;
	font-size: 28px;
	font-weight: var(--Bold);
	position: relative;
	z-index: 0;
}

.problems h3::after {
	background: url(../images/top/text-line.png) no-repeat;
	background-size: 100% auto;
	bottom: -17%;
	content: '';
	display: block;
	height: 49%;
	left: -6px;
	position: absolute;
	width: 100%;
	z-index: -1;
}

.problems .diagram {
	background-size: 277px auto;
	height: 420px;
	margin: 32px auto auto;
	position: relative;
	width: 277px;
	z-index: 0;
}

.problems .diagram::after {
	background: url(../images/course/index/problems-illust.svg) no-repeat center bottom;
	background-size: 100% auto;
	content: '';
	display: block;
	height: 100%;
	position: relative;
	width: 100%;
	z-index: 2;
}

.problems .diagram .text {
	align-items: center;
	border-radius: 100vw;
	display: flex;
	flex-direction: column;
	font-weight: var(--Bold);
	justify-content: center;
	line-height: 1.8;
	position: absolute;
	text-align: center;
}

.problems .diagram .text.left-bottom {
	background-color: #fff;
	height: 220px;
	left: -290px;
	top: 126px;
	width: 220px;
}

.problems .diagram .text.left-top {
	background-color: var(--color-light-blue);
	height: 202px;
	left: -85px;
	top: 8px;
	width: 202px;
}

.problems .diagram .text.right-top {
	background-color: #fff;
	height: 203px;
	right: -69px;
	top: 0;
	width: 203px;
}

.problems .diagram .text.right-bottom {
	background-color: var(--color-light-blue);
	height: 229px;
	right: -299px;
	top: 96px;
	width: 229px;
}

.problems .head-title {
	color: var(--color-blue);
	margin-top: 40px;
	text-align: center;
}

.sub-head-text {
	font-size: 28px;
	font-weight: var(--Bold);
	padding-top: 90px;
	text-align: center;
}

.sub-head-text + .sub-head-text { padding-top: 34px; }

.sub-head-text.font-blue { font-size: 36px; }

@media (max-width: 1099px) {

	.why-do-it-now {
		border-width: .498vw;
		margin-top: 11.94vw;
		padding: 7.96vw 4.975vw 7.96vw;
		width: auto;
	}

	.why-do-it-now .skill-head { display: block; }

	.why-do-it-now .skill-head::before {
		background-image: url(../images/course/index/balloon-why-sp.svg);
		height: 13.109vw;
		left: -4.667vw;
		top: -10.667vw;
		width: 17.595vw;
	}

	.why-do-it-now::after {
		bottom: -9.95vw;
		height: 9.95vw;
		width: 39.801vw;
	}

	.why-do-it-now .catch-head dt,
	.why-do-it-now .catch-head dd { font-size: 3.483vw; }

	.why-do-it-now .catch-head dd { margin-top: 3.98vw; }

	.why-do-it-now .large-title {
		display: block;
		margin-top: 2.488vw;
		padding: 0;
	}

	.why-do-it-now .skill-point {
		flex-direction: column;
		gap: 0;
		margin-top: 3.98vw;
	}

	.why-do-it-now .image { width: auto; }

	.why-do-it-now .image img {
		display: inline-block;
		max-height: 33.582vw;
		width: 100%;
	}

	.why-do-it-now .main-list {
		margin-left: 0;
		margin-top: 3.98vw;
	}

	.why-do-it-now .main-list li {
		background-size: 4.353vw;
		font-size: 3.483vw;
		padding-bottom: 2.488vw;
		padding-left: 5.333vw;
		padding-top: 2.488vw;
	}

	.why-do-it-now .text {
		font-size: 4.478vw;
		line-height: 1.6;
		margin-top: 4.98vw;
	}

	.problems {
		margin-top: 12.935vw;
		text-align: center;
	}

	.problems h3 { font-size: 5.97vw; }

	.problems .diagram {
		height: 91.045vw;
		margin-top: 3.98vw;
		width: 100%;
	}

	.problems .diagram::after {
		background-position: 27.633vw bottom;
		background-size: 39.055vw auto;
	}

	.problems .diagram .text { font-size: 2.985vw; }

	.problems .diagram .text.left-bottom {
		height: 41.791vw;
		left: 0;
		top: 33.085vw;
		width: 41.791vw;
	}

	.problems .diagram .text.left-top {
		height: 35.821vw;
		left: 8.458vw;
		top: 3.98vw;
		width: 35.821vw;
		z-index: -1;
	}

	.problems .diagram .text.right-top {
		height: 39.801vw;
		right: 9.453vw;
		width: 39.801vw;
		z-index: -2;
	}

	.problems .diagram .text.right-bottom {
		height: 37.811vw;
		right: 0;
		top: 30.348vw;
		width: 37.811vw;
	}

	.problems .head-title { font-size: 5.97vw; }

	.sub-head-text {
		font-size: 4.478vw;
		padding-top: 8.97vw;
	}

	.sub-head-text + .sub-head-text { padding-top: 5.97vw; }

	.sub-head-text.font-blue { font-size: 5.97vw; }
}

/* --------------------------------------------------------------------------------------
	〜とは
--------------------------------------------------------------------------------------- */

.why-do-it-now + .what-is-skill { margin-top: 80px; }

.what-is-skill {
	background-color: #fff;
	border-radius: var(--border-radius);
	overflow: hidden;
}

.what-is-skill h3 {
	color: #fff;
	padding: 12px 0;
	text-align: center;
}

.what-is-skill .head-section {
	display: flex;
	margin: 32px 40px;
}

.what-is-skill .head-section .text dt { font-weight: var(--Bold); margin-bottom: 0.5em;}

.what-is-skill .head-section .text:nth-of-type(n+2),
.what-is-skill .head-section .text-section figure { margin-top: 32px; }

.what-is-skill .head-section .text-section figure figcaption {
	display: block;
	margin-top: 1%;
}

.what-is-skill .head-section .text-section p:nth-of-type(n+2) { margin-top: 16px; }

.what-is-skill .accordion-inner { margin: 0 32px 40px; }

.what-is-skill:has(.accordion-course .accordion-inner .image) .head-section {
	float: right;
	width: 60%;
}

.what-is-skill:has(.accordion-course .accordion-inner .image) .accordion-course {
	float: left;
	margin-left: 40px;
	margin-top: 32px;
	width: 29%;
}

.what-is-skill:has(.accordion-course .accordion-inner .image) .accordion-course .accordion-inner { margin: 0; }

.what-is-skill .accordion-course summary,
.course-list .course-column.featured .accordion-course summary { display: none; }

.what-is-skill .accordion-inner figure {
	margin-left: auto;
	margin-right: auto;
	max-width: 600px;
}

.what-is-skill .check-list {
	background-color: var(--color-pale-gray);
	border-radius: var(--border-radius);
	margin: 24px auto 0;
	padding: 24px 32px;
	position: relative;
}

.what-is-skill .check-list::after {
	background: url(../images/common/balloon-point.svg) no-repeat;
	background-size: 100% auto;
	content: '';
	display: block;
	height: 77px;
	position: absolute;
	right: 46%;
	top: -17px;
	width: 126px;
}

.what-is-skill .check-list li {
	background: url(../images/common/icon-check.svg) no-repeat left 13px;
	background-size: 22px auto;
	border-bottom: 1px solid var(--color-border);
	font-weight: var(--Bold);
	padding: 14px 0 14px 33px;
}

.what-is-skill .check-list li:last-of-type { border-bottom: none; }

.color-table-section {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.color-table-section,
.color-table-section .row,
.color-table-section .row .text { gap: 4px; }

.color-table-section .row {
	align-items: stretch;
	display: flex;
}

.color-table-section .row h4 {
	align-items: center;
	background-color: #a2a2a2;
	border-bottom-left-radius: var(--border-radius);
	border-top-left-radius: var(--border-radius);
	color: #fff;
	display: flex;
	font-weight: var(--Bold);
	justify-content: center;
	letter-spacing: 2px;
	padding: 11px 8px;
	text-align: center;
	writing-mode: vertical-rl;
}

.color-table-section .row.blue h4 { background-color: var(--color-blue); }

.color-table-section .row .text {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.color-table-section .row .text dl {
	background-color: var(--color-pale-gray);
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	padding: 14px 24px;
}

.color-table-section .row.blue .text dl { background-color: var(--color-light-blue); }

.color-table-section .row .text dt { font-weight: var(--Bold); }

@media (max-width: 1099px) {
	.what-is-skill h3 {
		font-size: 4.103vw;
		padding: 3.077vw 0;
	}

	.what-is-skill .head-section {
		flex-direction: column;
		margin: 4.975vw;
	}

	.what-is-skill .head-section .text-section p:nth-of-type(n+2) { margin-top: 4.975vw; }

	.what-is-skill .accordion-inner { margin: 0 4.975vw 4.975vw; }

	.what-is-skill .accordion-course summary,
	.course-list .course-column.featured .accordion-course summary  { display: block; }

	.what-is-skill .head-section .text:nth-of-type(n+2),
	.what-is-skill .head-section .text-section figure { margin-top: 3.98vw; }

	.what-is-skill:has(.accordion-course .accordion-inner .image) .head-section {
		float: none;
		width: auto;
	}

	.what-is-skill:has(.accordion-course .accordion-inner .image) .accordion-course {
		float: none;
		margin-left: 0;
		margin-top: 0;
		width: auto;
	}

	.what-is-skill:has(.accordion-course .accordion-inner .image) .accordion-course .accordion-inner { margin: 3.98vw 4.975vw; }

	.what-is-skill .check-list {
		margin: 3.98vw auto 0;
		padding: 2.985vw 11.443vw;
	}

	.what-is-skill .check-list::after {
		height: 13.822vw;
		right: 4.333vw;
		top: 4.333vw;
		width: 20.561vw;
	}

	.what-is-skill .check-list li {
		background-size: 4.353vw;
		font-size: 3.483vw;
		padding-bottom: 2.488vw;
		padding-left: 5.333vw;
		padding-top: 2.488vw;
	}

	.color-table-section,
	.color-table-section .row,
	.color-table-section .row .text { gap: .995vw; }

	.color-table-section .row { width: 100%; }

	.color-table-section .row h4 {
		font-size: 3.483vw;
		min-height: 22.9vw;
		padding: 0.473vw 2.234vw;
	}

	.color-table-section .row .text {
		flex: 1;
		width: auto;
	}

	.color-table-section .row .text dl { padding: 3.98vw 3.234vw; }

	.color-table-section .row .text dt { font-size: 3.483vw; }
	.color-table-section .row .text dd { font-size: 2.985vw; word-break: break-all; }
}

/* --------------------------------------------------------------------------------------
	講座一覧
--------------------------------------------------------------------------------------- */

.course-list-wrap { padding-top: 96px; }

.course-list-wrap:not(:has(.course-section:nth-of-type(1) .head-title)) { margin-top: 30px; }

.course-list-wrap .course-section:nth-of-type(n+2) { margin-top: 96px; }

.course-list-wrap .course-section .head-title { text-align: center; }

.course-list-wrap .course-section .lead-text.sub-title {
	margin-bottom: 48px;
	margin-top: 48px;
	text-align: center;
}

.course-list-wrap .course-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 30px;
}

.course-list-wrap .course-list:has(.featured) {
	align-items: center;
	display: flex;
	flex-direction: column;
}

.course-list .course-column {
	background-color: #fff;
	border-radius: var(--border-radius);
	box-shadow: 2px 2px 4px 0 rgba(179, 179, 179, 0.20);
	overflow: hidden;
	width: 100%;
}

.course-list .course-column:not(:last-of-type) {
	margin-bottom:3%;
}

/*
.course-list .course-column:nth-of-type(n+2) { margin-top: 32px; }
*/
.course-list .course-column.featured h3 {
	background: linear-gradient(90deg, #00B4DC 41.83%, #70DCF0 100%);
	color: #fff;
	padding: 24px 0;
	text-align: center;
}

.course-list .course-column.featured h3 strong {
	display: inline-block;
	position: relative;
}

.course-list .course-column.featured h3 strong::before {
	align-items: center;
	background-color: #ffde00;
	border-radius: 100vw;
	color: #ca0349;
	content: "注目";
	display: flex;
	font-size: 16px;
	height: 72px;
	justify-content: center;
	left: -89px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 72px;
}

.course-list > .sub-title{
		margin:2.5% auto 0.5em;
}
@media (min-width: 1100px) {
	.course-list > .sub-title{
		font-size:26px;
	}
}
@media (max-width: 1099px) {
	.course-list > .sub-title{
		font-size:5.25vw;
	}
}


.course-list .course-column.featured h3 span {
	display: block;
	font-size: 66%;
}

.course-list-wrap .course-list .course-column:not(.featured) h3 {
	margin-top: 32px;
	text-align: center;
}

.course-list-wrap .course-list .course-column:not(.featured) h3:has(small) { line-height: 1.3; }

.course-list-wrap .course-list .course-column:not(.featured) h3 small {
	display: inline-block;
	font-size: 16px;
}

.course-list .course-column .no-accordion { margin: 32px 80px; }

.course-list .course-column .course-text-section { margin-top: 20px; }

.course-list .course-column .course-text,
.course-list .course-column .course-head-text dd { line-height: 1.6; }

.course-list .course-column .course-text:nth-of-type(n+2),
.course-list .course-column .course-head-text:nth-of-type(n+2),
.course-list .course-column .accordion-inner .accordion-column .accordion-head + p { margin-top: 20px; }

.course-list .course-column .course-head-text dt { font-weight: var(--Bold); }

.course-list .course-column .course-head-text + .dotted {
	font-size: 80%;
	margin-top: 10px;
}

.course-list .course-column .sub-head {
	font-weight: var(--Bold);
	margin-bottom: 20px;
}

.course-list .course-column .recommendation {
	margin-top: 20px;
	width: 100%;
}

.course-list .course-column .recommendation dt {
	background-color: var(--color-blue);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-weight: var(--Bold);
	padding: 4px 8px;
}

.course-list .course-column .recommendation dd {
	background-color: var(--color-pale-gray);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
	font-size: 14px;
	padding: 12px;
}

.course-list .course-column .recommendation dd .dotted li { font-weight: var(--Bold); }
.course-list .course-column .recommendation dd .dotted li:nth-of-type(n+2) { margin-top: 4px; }

.course-list .course-column .accordion-inner { margin: auto 80px 32px; }

.course-list .course-column .accordion-inner .accordion-column:nth-of-type(n+2) { margin-top: 32px; }

.course-list .course-column .accordion-inner .accordion-column .accordion-head {
	background: var(--color-light-blue);
	border-left: 10px solid var(--color-blue);
	border-radius: 4px;
	font-weight: var(--Bold);
	padding: 10px 0 10px 16px;
}

.course-list .course-column .accordion-inner .accordion-column .image-column {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 20px 0;
}

.course-list .course-column .accordion-inner .accordion-column .image-column .image {
	max-width: 270px;
	width: 100%;
}

.course-list .course-column .accordion-inner .accordion-column .image-column .image img {
	max-width: inherit;
	width: 100%;
}

.course-list .course-column .accordion-inner .accordion-column .image-column p,
.course-list .course-column .accordion-inner .accordion-column .image-column dl {
	max-width: 68%;
	width: 100%;
}

.course-list .course-column .accordion-inner .accordion-column .image-column dt {
	font-size: 110%;
	font-weight: var(--Bold);
}

.course-list .course-column .accordion-inner .accordion-column .numbering-column {
	counter-reset: number 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.course-list .course-column .accordion-inner .accordion-column .numbering-column dl {
	background-color: var(--color-pale-gray);
	border-radius: var(--border-radius);
	padding: 18px 18px 18px 96px;
	position: relative;
}

.course-list .course-column .accordion-inner .accordion-column .numbering-column dl::before {
	color: var(--color-blue);
	content: "0" counter(number);
	counter-increment: number 1;
	font-family: var(--font-poppins);
	font-size: 40px;
	font-weight: var(--Bold);
	left: 18px;
	position: absolute;
}

.course-list .course-column .accordion-inner .accordion-column .numbering-column dt { font-weight: var(--Bold); }
.course-list .course-column .accordion-inner .accordion-column .numbering-column dd { margin-top: 6px; }

.course-list .course-column:has(.course-image) .no-accordion {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.course-list .course-column:has(.course-image) .no-accordion .course-image { max-width: 322px; }

.course-list .course-column:has(.course-image) .no-accordion .course-image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.course-list .course-column:has(.course-image) .no-accordion .course-image:has(.no-cover) { height: 100%; }

.course-list .course-column:has(.course-image) .no-accordion .course-image .no-cover {
	height: auto;
	width: auto;
}

.course-list .course-column:has(.course-image) .no-accordion .course-text-section {
	margin-top: 0;
	width: 62%;
}

.course-list .course-column .accordion-inner .lineup-list,
.course-list .course-column .accordion-inner .photo-section {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.course-list .course-column .accordion-inner .lineup-list li {
	background-color: var(--color-pale-gray);
	border-radius: 2px;
	font-weight: var(--Bold);
	padding: 8px 20px;
	width: calc(50% - 5px);
}

.course-list .course-column .accordion-inner .photo-section > div { width: calc(50% - 5px); }

.course-list .course-column .accordion-inner .banner-area.center { text-align: center; }

.course-list .course-column .course-list-tag {
	display: flex;
	margin-top: 32px;
}

.course-list .course-column .course-list-tag .tag-section { padding: 20px 32px; }

.course-list .course-column .course-list-tag .tag-section:first-of-type { padding-left: 0;}
.course-list .course-column .course-list-tag .tag-section:last-of-type { padding-right: 0;}
.course-list .course-column .course-list-tag .tag-section:not(:first-of-type) { border-left: 1px solid var(--color-border); }

.course-list .course-column .course-list-tag .tag-section dt { font-weight: var(--Bold); }

.course-list .course-column .course-list-tag .tag-section dd {
	font-size: 14px;
	margin-top: 8px;
}

.course-list .course-column .course-list-tag .tag-section dd ul {
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	gap: 8px;
	margin-top: 14px;
}

.course-list .course-column .course-list-tag .tag-section dd li a {
	background-color: var(--color-blue);
	border: 1px solid var(--color-blue);
	border-radius: 4px;
	color: #fff;
	display: block;
	font-weight: var(--Bold);
	line-height: 1;
	padding: 8px 10px;
	transition: all .3s ease-in-out;
}

@media (any-hover: hover) {

	.course-list .course-column .course-list-tag .tag-section dd li a:hover {
		background-color: #fff;
		color: var(--color-blue);
		text-decoration: none;
	}
}

.course-list .course-column .accordion-inner .accordion-column .icon-section {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
	margin-top: 20px;
}

.course-list .course-column .accordion-inner .accordion-column .icon-section .column {
	align-items: center;
	background-color: var(--color-pale-gray);
	display: flex;
	justify-content: space-between;
	padding: 16px;
	width: 49.5%;
}

.course-list .course-column .accordion-inner .accordion-column .icon-section .column .icon { width: 18%; }

.course-list .course-column .accordion-inner .accordion-column .icon-section .column dl { width: 74%; }

.course-list .course-column .accordion-inner .accordion-column .icon-section .column dt { font-weight: var(--Bold); }

.course-list .course-column .accordion-inner .accordion-column .icon-section .column dd {
	font-size: 14px;
	margin-top: 3px;
}

/*
.course-list .banner { margin-top: 42px; }
*/

@media (max-width: 1099px) {

	.course-list-wrap { padding-top: 7.96vw; }

	.course-list-wrap .course-section:nth-of-type(n+2) { margin-top: 11.94vw; }

	.course-list-wrap .course-section .lead-text.sub-title {
		margin-bottom: 7.96vw;
		margin-top: 7.96vw;
	}

	.course-list-wrap .course-section .lead-text.sub-title + .tabs-wrap { margin-top: 7.94vw; }

	.course-list .course-column.featured h3 { padding: 2.985vw 0; }

	.course-list .course-column.featured h3 strong::before {
		font-size: 2.985vw;
		height: 10.945vw;
		left: -11.667vw;
		width: 10.945vw;
	}

	.course-list-wrap .course-list .course-column:not(.featured) h3 { margin-top: 5.97vw; }
	.course-list-wrap .course-list .course-column:not(.featured) h3 small { font-size: 2.985vw; }

/*
	.course-list .course-column:nth-of-type(n+2) { margin-top: 5.97vw; }
*/

	.course-list .course-column .no-accordion { margin: 4.975vw; }

	.course-list .course-column:has(.course-image) .no-accordion { display: block; }

	.course-list .course-column:has(.course-image) .no-accordion .course-text-section {
		margin-top: 4.975vw;
		width: auto;
	}

	.course-list .course-column .course-text { font-size: 3.483vw; }

	.course-list .course-column .course-text:nth-of-type(n+2),
	.course-list .course-column .course-head-text:nth-of-type(n+2),
	.course-list .course-column .accordion-inner .accordion-column .accordion-head + p,
	.course-list .course-column .recommendation { margin-top: 4.975vw; }

	.course-list .course-column .recommendation dt {
		border-top-left-radius: .995vw;
		border-top-right-radius: .995vw;
		font-size: 2.985vw;
	}

	.course-list .course-column .recommendation dd {
		border-bottom-left-radius: .995vw;
		border-bottom-right-radius: .995vw;
		border-top-right-radius: .995vw;
		padding: 3.483vw 1.99vw;
	}

	.course-list .course-column:has(.course-image)  .accordion-course { display: flex; }

	.course-list .course-column .accordion-inner { margin: auto 4.975vw 4.975vw; }

	.course-list .course-column .accordion-inner .accordion-column:nth-of-type(n+2) { margin-top: 4.975vw; }

	.course-list .course-column .accordion-inner .accordion-column .accordion-head {
		border-radius: .995vw;
		border-width: 2.488vw;
		font-size: 3.483vw;
		padding: 1.99vw 0 1.99vw 3.98vw;
	}

	.course-list .course-column .accordion-inner .accordion-column > p { font-size: 3.483vw; }

	.course-list .course-column .accordion-inner .accordion-column .image-column { margin: 3.98vw 0; }

	.course-list .course-column .accordion-inner .accordion-column .image-column .image { max-width: 29.851vw; }

	.course-list .course-column .accordion-inner .accordion-column .image-column p,
	.course-list .course-column .accordion-inner .accordion-column .image-column dl {
		font-size: 2.985vw;
		max-width: 46.517vw;
	}

	.course-list .course-column .accordion-inner .accordion-column .image-column.image-after { flex-direction: column; }

	.course-list .course-column .accordion-inner .accordion-column .image-column.image-after .image {
		max-width: 100%;
		order: 2;
	}

	.course-list .course-column .accordion-inner .accordion-column .image-column.image-after p { max-width: 100%; }

	.course-list .course-column .accordion-inner .lineup-list {
		gap: .995vw;
		margin-top: 3.98vw;
	}

	.course-list .course-column .accordion-inner .lineup-list li {
		border-radius: 0.498vw;
		font-size: 2.985vw;
		padding: .995vw 4.975vw;
		width: 100%;
	}

	.course-list .course-column .sub-head { margin-bottom: 4.975vw; }

/*
	.course-list .banner {margin-top: 7.96vw; }
*/

	.course-list .course-column .accordion-inner .accordion-column .numbering-column {
		gap: .995vw;
		margin-top: 3.98vw;
	}

	.course-list .course-column .accordion-inner .accordion-column .numbering-column dl { padding: 1.99vw 1.99vw 1.99vw 17.91vw; }

	.course-list .course-column .accordion-inner .accordion-column .numbering-column dl::before {
		font-size: 7.96vw;
		left: 3.483vw;
	}

	.course-list .course-column .accordion-inner .accordion-column .numbering-column dd {
		font-size: 3.183vw;
		margin-top: .995vw;
	}

	.course-list .course-column .course-list-tag {
		flex-direction: column;
	}

	.course-list .course-column .course-list-tag .tag-section {
		border-top: 1px solid var(--color-border);
		padding: 3.98vw 0 4.975vw;
	}

	.course-list .course-column .course-list-tag .tag-section:not(:first-of-type) { border-left: none; }

	.course-list .course-column .accordion-inner .accordion-column .icon-section {
		gap: .995vw;
		margin-top: 3.98vw;
	}

	.course-list .course-column .accordion-inner .accordion-column .icon-section .column {
		padding: 2.985vw  2.985vw  2.985vw 4.975vw;
		width: 100%;
	}

	.course-list .course-column .accordion-inner .accordion-column .icon-section .column .icon { width: 9.92vw; }

	.course-list .course-column .accordion-inner .accordion-column .icon-section .column dl { width: 56.219vw; }

	.course-list .course-column .accordion-inner .accordion-column .icon-section .column dd {
		font-size: 2.985vw;
		margin-top: .995vw;
	}
}


/* --------------------------------------------------------------------------------------
	関連講座一覧
--------------------------------------------------------------------------------------- */

.related-courses { margin-top: 96px; }

.related-courses .head-title {
	margin-bottom: 30px;
	text-align: center;
}

.major-benefits-wrap { margin-top: 56px; }

.bg-cobalt-blue.slide-banner {
	padding-bottom: 88px;
	padding-top: 110px;
}

.with-banner { margin-top: 42px; }

.with-banner .with-banner-head dt {
	font-size: 20px;
	font-weight: var(--Bold);
	text-align: center;
}

.with-banner .with-banner-head dd {
	margin: 14px auto 0;
	max-width: 76%;
}

@media (max-width: 1099px) {

	.related-courses { margin-top: 11.94vw; }

	.related-courses .head-title { margin-bottom: 7.96vw; }

	.major-benefits-wrap { margin-top: 11.94vw; }

	.with-banner { margin-top: 7.96vw; }

	.with-banner .with-banner-head dt { font-size: 3.98vw; }

	.with-banner .with-banner-head dd {
		margin-top: 2.488vw;
		max-width: 100%;
	}

	.bg-cobalt-blue.slide-banner {
		padding-bottom: 11.94vw;
		padding-top: 11.94vw;
	}
}

/* --------------------------------------------------------------------------------------
	通学orオンラインが選べる
--------------------------------------------------------------------------------------- */

.how-do-you-commute {
	background-color: var(--color-pale-gray);
	padding-bottom: 56px;
	padding-top: 100px;
}

.how-do-you-commute .large-title {
	display: inline-block;
	position: relative;
}

.how-do-you-commute .large-title::before {
	background: url(../images/course/index/ballon-furthermore.svg) no-repeat;
	background-size: 100% auto;
	content: '';
	display: block;
	height: 68px;
	left: -116px;
	position: absolute;
	top: -5px;
	width: 100px;
}

.how-do-you-commute-list { margin-top: 42px; }

.how-do-you-commute-list .column { background-color: #fff; }
.how-do-you-commute-list .column:nth-of-type(n+2) { margin-top: 24px; }

.how-do-you-commute-list .column h3 {
	background-color: var(--color-magenta);
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	color: #fff;
	line-height: 1;
	padding: 16px 0;
	text-align: center;
}

.how-do-you-commute-list .column h3 small { font-size: 12px; }

.how-do-you-commute-list .column .column-content {
	padding: 32px;
	text-align: center;
}

.how-do-you-commute-list .column .column-content .dotted {
	display: inline-block;
	text-align: left;
}

.how-do-you-commute-list .column .column-content .dotted li { font-weight: var(--Bold); }
.how-do-you-commute-list .column .column-content .dotted li:nth-of-type(n+2) { margin-top: 4px; }

.how-do-you-commute-list .column .column-content:has(.banner-image) {
	align-items: center;
	display: flex;
	justify-content: center;
}

.how-do-you-commute-list .column .column-content .banner-image {
	margin-right: 28px;
	max-width: 322px;
}

.how-do-you-commute .banner-area {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin-top: 32px;
}

@media (max-width: 1099px) {

	.how-do-you-commute { padding: 15.92vw 4.975vw 11.94vw; }

	.how-do-you-commute .large-title { font-size: 5.97vw; }

	.how-do-you-commute .large-title::before {
		height: 12.189vw;
		left: -11.67vw;
		top: -10.667vw;
		width: 17.413vw;
	}

	.how-do-you-commute-list .column:nth-of-type(n+2) { margin-top: 5.97vw; }

	.how-do-you-commute-list .column h3 { padding: 2.985vw 0; }

	.how-do-you-commute-list .column h3 small { font-size: 2.985vw; }

	.how-do-you-commute-list .column .column-content { padding: 4.975vw; }

	.how-do-you-commute-list .column .column-content .dotted { display: block; }

	.how-do-you-commute-list .column .column-content .dotted li { font-size: 3.483vw; }

	.how-do-you-commute-list .column .column-content:has(.banner-image) { display: block; }

	.how-do-you-commute-list .column .column-content .banner-image {
		margin-bottom: 4.975vw;
		margin-right: 0;
		max-width: 100%;
	}

	.how-do-you-commute .banner-area { margin-top: 7.96vw; }
}

/* --------------------------------------------------------------------------------------
	よくある質問
--------------------------------------------------------------------------------------- */

.faq-wrap {
	padding-bottom: 56px;
	padding-top: 56px;
}

.faq-wrap .large-title { text-align: center; }

@media (max-width: 1099px) {

	.faq-wrap { padding: 11.94vw 4.975vw; }
}

/* --------------------------------------------------------------------------------------
	accordion-section
--------------------------------------------------------------------------------------- */

.accordion-section { margin-top: 96px; }

.image-layout-section {
	background-color: #fff;
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	border-top: 1px solid var(--color-border);
	margin-top: 0;
	padding: 0;
}

.image-layout-section.circle-design {
	border-top: none;
	margin-top: 32px;
}

.image-layout-section .image-column {
	align-items: center;
	border-bottom: 1px solid var(--color-border);
	display: flex;
	justify-content: space-between;
	padding: 32px 48px;
	text-align: left;
	width: auto;
}

.image-layout-section .image-column:last-of-type { border-bottom: none; }

.image-layout-section .image-column .thumbnail { width: 9%; }

.image-layout-section .image-column .head-text { width: 87%; }

.image-layout-section .image-column .head-text dt {
	font-size: 20px;
	font-weight: var(--Bold);
}

.image-layout-section .image-column .head-text dd {
	line-height: 1.6;
	margin-top: 6px;
}

.image-layout-section:not(:has(> .image-column:nth-of-type(2))) { display: inline-flex; }

.image-layout-section:not(:has(> .image-column:nth-of-type(2))) .image-column {
	border-right: none;
	width: 100%;
}


@media (max-width: 1099px) {

	.course-section .accordion-section { margin-top: 7.96vw; }

	.image-layout-section,
	.image-layout-section:not(:has(> .image-column:nth-of-type(2))) { display: block; }

	.image-layout-section .image-column {
		padding: 3.98vw 4.975vw;
		width: auto;
	}

	.image-layout-section .image-column .thumbnail { width: 17.91vw; }

	.image-layout-section .image-column .head-text { width: 56.194vw; }

	.image-layout-section .image-column .head-text dt { font-size: 3.483vw; }

	.image-layout-section .image-column .head-text dd {
		font-size: 3.483vw;
		margin-top: .99vw;
	}

	.image-layout-section:not(:has(> .image-column:nth-of-type(2))) .image-column { border-bottom: none !important; }
}

/* --------------------------------------------------------------------------------------
	head-main-section
--------------------------------------------------------------------------------------- */

.head-main-section {
	margin-top: 80px;
	text-align: center;
}

.head-main-section .text {
	margin-top: 20px;
	text-align: left;
}

.short-card-section {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 30px;
	text-align: left;
}

.short-card-section .column {
	background-color: #fff;
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	padding: 20px 24px;
	width: 100%;
}

.short-card-section .column .head {
	align-items: center;
	display: flex;
	min-height: 56px;
}

.short-card-section .column .head dd {
	font-weight: var(--Bold);
	margin-left: 12px;
}

.short-card-section .column .dotted { margin-top: 16px; }

.main-text-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 30px;
	position: relative;
	text-align: left;
}

.main-text-section:has(.image) {
	min-height: 200px;
	padding-right: 420px;
}

.main-text-section .text:first-child { margin-top: 0; }

.main-text-section .image {
	max-width: 400px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}

.main-text-section .text dt { font-weight: var(--Bold); }

.main-text-section .text dd { margin-top: 10px; }

@media (max-width: 1099px) {

	.head-main-section { margin-top: 15.94vw; }

	.head-main-section .text {
		font-size: 3.483vw;
		margin-top: 4.975vw;
	}

	.short-card-section {
		flex-wrap: wrap;
		gap: .995vw;
		margin-top: 5.96vw;
	}

	.short-card-section .column {
		padding: 3.98vw 2.488vw;
		width: 44.527vw;
	}

	.short-card-section .column .head { min-height: 9.333vw; }

	.short-card-section .column .head dt {
		max-width: 9.95vw;
		width: 100%;
	}

	.short-card-section .column .head dd {
		font-size: 3.483vw;
		margin-left: 1.99vw;
	}

	.short-card-section .column .dotted {
		font-size: 2.985vw;
		margin-top: 2.488vw;
	}

	.main-text-section { margin-top: 5.96vw; }

	.main-text-section:has(.image) { padding-right: 0; }

	.main-text-section .image {
		margin-top: 4.975vw;
		max-width: 100%;
		position: relative;
		right: auto;
		top: auto;
		transform: none;
	}
}

/* --------------------------------------------------------------------------------------
	関連講座一覧
--------------------------------------------------------------------------------------- */

.related-courses .course-short-accordion {
	border-top: 1px solid var(--color-border);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	margin-top: 0;
}

.related-courses .banner-area {
	display: flex;
	gap: 24px;
	justify-content: center;
	margin-top: 42px;
}

@media (max-width: 1099px) {
	.related-courses .banner-area {
		flex-wrap: wrap;
		gap: 3.98vw;
		margin-top: 7.96vw;
	}
}

/* --------------------------------------------------------------------------------------
	lineup-photo-section
--------------------------------------------------------------------------------------- */

.lineup-photo-section {
	margin-top: 120px;
	text-align: center;
}

.lineup-photo-section .sub-title {
	display: inline-block;
	position: relative;
}

.lineup-photo-section .sub-title::before {
	background: url(../images/course/index/ballon-furthermore.svg) no-repeat;
	background-size: 100% auto;
	content: '';
	display: block;
	height: 68px;
	left: -67px;
	position: absolute;
	top: -58px;
	width: 100px;
}

.photo-gallery-section { margin-top: 20px; }

.photo-gallery-section .column {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.photo-gallery-section .column:nth-of-type(n+2) { margin-top: 8px; }

@media (max-width: 1099px) {

	.head-main-section { margin-top: 15.94vw; }

	.head-main-section .text {
		font-size: 3.483vw;
		margin-top: 4.975vw;
	}

	.lineup-photo-section { margin-top: 18.851vw; }

	.lineup-photo-section .sub-title::before {
		height: 12.783vw;
		left: -5.667vw;
		top: -9.667vw;
		width: 18.578vw;
	}

	.photo-gallery-section { margin-top: 3.98vw; }
	.photo-gallery-section .column { gap: 1.99vw; }
	.photo-gallery-section .column:nth-of-type(n+2) { margin-top: 1.99vw; }
}

/* --------------------------------------------------------------------------------------
	banner-section-wrap
--------------------------------------------------------------------------------------- */

.banner-section-wrap {
	display: flex;
	justify-content: center;
	margin-top: 64px;
}

.banner-section-wrap > div { max-width: 614px; }

@media (max-width: 1099px) {

	.banner-section-wrap { margin-top: 11.94vw; }
}

/* --------------------------------------------------------------------------------------
	開発者の声
--------------------------------------------------------------------------------------- */

.developers-voice {
	background-color: #fff;
	border-radius: var(--border-radius);
	margin-top: 64px;
	padding: 32px 80px;
}

.developers-voice .sub-title { text-align: center; }

.developers-voice .developers-section {
	margin-top: 32px;
	overflow: hidden;
	position: relative;
}

.developers-voice .developers-section .thumbnail {
	border-radius: var(--border-radius);
	float: left;
	height: 250px;
	margin-bottom: 24px;
	margin-right: 32px;
	overflow: hidden;
	width: 250px;
}

.developers-voice .developers-section .thumbnail img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.developers-voice .developers-section .developers-profile {
	align-items: center;
	display: flex;
	gap: 16px;
}

.developers-voice .developers-section .developers-profile dt {
	font-size: 24px;
	font-weight: var(--Bold);
}

.developers-voice .developers-section .text { margin-top: 16px; }

.developers-voice .course-list .course-column .accordion-inner { margin: 32px 0 0; }

.developers-voice .developers-section .accordion-developers {
	display: block;
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition: opacity 300ms ease-in-out;
}

.developers-voice .developers-section .accordion-developers[open] {
	height: auto;
	opacity: 1;
}

.developers-voice .developers-section .details-btn {
	background: url(../images/common/icon-more.svg) no-repeat right center;
	cursor: pointer;
	display: block;
	font-weight: var(--Bold);
	margin-left: auto;
	margin-top: 20px;
	padding-right: 19px;
	width: fit-content;
}

@media (max-width: 1099px) {

	.developers-voice {
		margin-top: 11.94vw;
		padding: 7.96vw 4.975vw;
	}

	.developers-voice .developers-section { margin-top: 2.612vw; }

	.developers-voice .developers-section .thumbnail {
		height: 19.9vw;
		margin-bottom: 0;
		margin-right: 3.98vw;
		width: 19.9vw;
	}

	.developers-voice .developers-section .thumbnail img {
		height: auto;
		left: 50%;
		max-width: inherit;
		object-fit: cover;
		object-position: center top;
		position: relative;
		transform: translateX(-50%);
		width: 166%;
	}

	.developers-voice .developers-section .developers-profile {
		align-items: flex-start;
		flex-direction: column;
		gap: .995vw;
		height: 19.9vw;
		justify-content: center;
	}

	.developers-voice .developers-section .developers-profile dt { font-size: 3.483vw; }
	.developers-voice .developers-section .developers-profile dd { font-size: 2.985vw; }

	.developers-voice .developers-section .text {
		font-size: 3.483vw;
		margin-top: 3.98vw;
	}

	.developers-voice .developers-section .details-btn {
		background-size: 3.483vw auto;
		font-size: 2.985vw;
		margin-top: 3.98vw;
		padding-right: 4.33vw;
	}
}

/* --------------------------------------------------------------------------------------
	before-after
--------------------------------------------------------------------------------------- */

.course-detail-wrap:has( + .before-after-wrap) {padding-bottom: 100px; }

.before-after-wrap {
	background-color: #fff;
	padding-bottom: 56px;
	padding-top: 56px;
}

.before-after-wrap:not(:has(.inner)) {
	background-color: transparent;
	padding-bottom: 0;
}

.before-after-wrap .head-title { text-align: center; }

.before-after-wrap .head-title small {
	display: block;
	font-size: 18px;
}

.before-after-wrap .head-lead-text {
	font-weight: var(--Bold);
	margin-bottom: 24px;
	text-align: center;
}

.before-after-wrap .text {
	margin-top: 32px;
	text-align: center;
}

.before-after-wrap .text.sub-title { font-size: 20px; }

.before-after-section-wrap { margin-top: 40px; }

.before-after-wrap .before-after-section {
	display: flex;
	gap: 73px;
	justify-content: center;
	margin: 32px auto 0;
	text-align: center;
}

.before-after-section-wrap .before-after-section { margin-top: 20px; }

.before-after-wrap .before-after-section dl {
	position: relative;
	width: 100%;
}

.before-after-wrap .before-after-section dl:first-of-type::after {
	aspect-ratio: 36/17;
	background-color: var(--color-blue);
	clip-path: polygon(100% 50%, 0 0, 0 100%);
	content: '';
	display: block;
	height: 62px;
	position: absolute;
	right: -53px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
}

.before-after-wrap .before-after-section dt {
	background-color: var(--color-border);
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	color: #fff;
	padding: 8px 0;
}

.before-after-wrap .before-after-section dl:last-of-type dt { background-color: var(--color-blue); }

.before-after-wrap .before-after-section dd {
	background-color: #fff;
	border-bottom: 1px solid var(--color-border);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	border-left: 1px solid var(--color-border);
	border-right: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	height: calc(100% - 64px);
	justify-content: center;
	padding: 32px 24px;
}

.before-after-wrap .before-after-section dd:has(.diagram) { justify-content: flex-start; }

.before-after-wrap .before-after-section dl:last-of-type dd {
	border-color: var(--color-blue);
	color: var(--color-blue);
}

.before-after-wrap .before-after-section dd h3 {
	font-size: 18px;
	font-weight: var(--Bold);
}

.before-after-wrap .before-after-section dd .diagram {
	margin: auto auto 22px;
	max-width: 60%;
}

.before-after-wrap .image-colum-section { margin-top: 48px; }

.before-after-wrap .image-colum-section h4 { text-align: center; }

.before-after-wrap .image-colum-section .image-colum-inner {
	counter-reset: number 0;
	display: flex;
	flex-wrap: wrap;
	gap: 32px 16px;
	justify-content: space-between;
	margin-top: 32px;
}

.before-after-wrap .image-colum-section .image-colum-inner .column {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	width: 32%;
}

.before-after-wrap .image-colum-section .image-colum-inner .column .image img {
	max-width: 80px;
	width: 100%;
}

.before-after-wrap .image-colum-section .image-colum-inner .column dl {
	font-size: 15px;
	max-width: 260px;
	width: 100%;
}

.before-after-wrap .image-colum-section .image-colum-inner .column dt {
	display: flex;
	flex-direction: column;
	font-weight: var(--Bold);
}

.before-after-wrap .image-colum-section.case-study .image-colum-inner .column dt::before {
	background-color: var(--color-blue);
	border-radius: 4px;
	color: #fff;
	content: '事例' counter(number);
	counter-increment: number 1;
	display: inline-block;
	font-size: 12px;
	line-height: 1;
	margin-bottom: 6px;
	padding: 4px 6px;
	width: fit-content;
}

.before-after-wrap .image-colum-section .image-colum-inner .column dd { margin-top: 6px; }

.before-after-wrap .head-text {
	margin-top: 48px;
	text-align: center;
}

.before-after-wrap .numbering-column {
	counter-reset: number 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 32px;
}

.before-after-wrap .numbering-column dt {
	display: flex;
	flex-direction: column;
	font-size: 20px;
	font-weight: var(--Bold);
	justify-content: center;
	min-height: 40px;
	padding-left: 56px;
	position: relative;
}

.before-after-wrap .numbering-column dt::before {
	color: var(--color-light-blue);
	content: "0" counter(number);
	counter-increment: number 1;
	font-family: var(--font-poppins);
	font-size: 40px;
	font-weight: var(--Bold);
	left: 0;
	line-height: 1;
	position: absolute;
}

.before-after-wrap .numbering-column dd { margin-top: 16px; }

.before-after-wrap .numbering-column dd:has(.image) {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.before-after-wrap .numbering-column dd:has(.image) .image { width: 28%; }
.before-after-wrap .numbering-column dd:has(.image) p { width: 69%; }

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

.before-after-wrap .check-list {
	background-color: var(--color-pale-gray);
	border-radius: var(--border-radius);
	margin: 48px auto;
	padding: 24px 32px;
}

.before-after-wrap .check-list li {
	background: url(../images/common/icon-check.svg) no-repeat left 13px;
	background-size: 22px auto;
	border-bottom: 1px solid var(--color-border);
	font-size: 18px;
	font-weight: var(--Bold);
	padding: 14px 0 14px 33px;
}

.before-after-wrap .check-list li:last-of-type { border-bottom: none; }

.before-after-wrap .diagram-section {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 0;
	justify-content: space-between;
	margin-top: 48px;
}

.before-after-wrap .diagram-section .image { width: 49%; }

@media (max-width: 1099px) {

	.course-detail-wrap:has( + .before-after-wrap) { padding-bottom: 15.174vw; }

	.before-after-wrap { padding: 11.94vw 4.975vw; }

	.before-after-wrap:not(:has(.inner)) {
		padding-left: 0;
		padding-right: 0;
	}

	.before-after-wrap .head-title small {
		font-size: 3.98vw;
		margin-bottom: 1.99vw;
	}

	.before-after-wrap .text {
		margin-top: 5.97vw;
		text-align: left;
	}

	.before-after-wrap .text.sub-title {
		font-size: 3.98vw;
		text-align: center;
	}

	.before-after-section-wrap { margin-top: 7.96vw; }

	.before-after-wrap .before-after-section {
		gap: 7.271vw;
		margin-top: 5.97vw;
	}

	.before-after-section-wrap .before-after-section { margin-top: 3.98vw; }

	.before-after-wrap .before-after-section dt {
		line-height: 1.3;
		padding: 1.244vw 0;
	}

	.before-after-wrap .before-after-section dd {
		height: calc(100% - 7.96vw);
		padding: 3.98vw 2.985vw;
	}

	.before-after-wrap .before-after-section dd h3 { font-size: 3.68vw; }

	.before-after-wrap .before-after-section dd .diagram {
		margin-bottom: 1.99vw;
		margin-top: 0;
		max-width: 100%;
	}

	.before-after-wrap .before-after-section dd p {
		font-size: 2.985vw;
		text-align: left;
	}

	.before-after-wrap .before-after-section dl:first-of-type::after {
		height: 6.965vw;
		right: -5.367vw;
		width: 2.736vw;
	}

	.before-after-wrap .image-colum-section { margin-top: 7.96vw; }

	.before-after-wrap .image-colum-section .image-colum-inner {
		flex-direction: column;
		gap: 3.98vw;
		margin-top: 5.97vw;
	}

	.before-after-wrap .image-colum-section .image-colum-inner .column {
		align-items: center;
		gap: 0;
		width: auto;
	}

	.before-after-wrap .image-colum-section .image-colum-inner .column .image img { max-width: 14.93vw; }

	.before-after-wrap .image-colum-section .image-colum-inner .column dl {
		font-size: 3.483vw;
		max-width: 70.333vw;
	}

	.before-after-wrap .image-colum-section.case-study .image-colum-inner .column dt::before {
		border-radius: .498vw;
		font-size: 2.488vw;
		margin-bottom: .995vw;
		padding: .924vw 1.244vw;
	}

	.before-after-wrap .image-colum-section .image-colum-inner .column dd { margin-top: .995vw; }

	.before-after-wrap .head-text { margin-top: 9.453vw; }

	.before-after-wrap .numbering-column {
		gap: 7.96vw;
		margin-top: 7.96vw;
	}

	.before-after-wrap .numbering-column dt {
		font-size: 4.478vw;
		min-height: inherit;
		padding-left: 12.94vw;
	}

	.before-after-wrap .numbering-column dt::before { font-size: 7.96vw; }

	.before-after-wrap .numbering-column dd { margin-top: 3.98vw; }

	.before-after-wrap .numbering-column dd:has(.image) {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.before-after-wrap .numbering-column dd:has(.image) .image {
		margin-top: 3.98vw;
		order: 2;
		width: auto;
	}

	.before-after-wrap .numbering-column dd:has(.image) p {
		order: 1;
		width: auto;
	}

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

	.before-after-wrap .check-list {
		margin: 5.97vw auto;
		padding: 2.985vw 4.975vw;
	}

	.before-after-wrap .check-list li {
		background-size: 4.353vw;
		font-size: 3.483vw;
		padding-bottom: 2.488vw;
		padding-left: 5.333vw;
		padding-top: 2.488vw;
	}

	.before-after-wrap .diagram-section {
		gap: 1.99vw 0;
		margin-top: 7.96vw;
	}

	.before-after-wrap .diagram-section .image { width: 100%; }
}

/* --------------------------------------------------------------------------------------
	Photoshop、Illustrator専用セクション
--------------------------------------------------------------------------------------- */

.course-detail-wrap:has(+ .design-skills-wrap) { padding-bottom: 64px; }

.design-skills-wrap {
	padding-bottom: 96px;
	padding-top: 96px;
}

.design-skills-wrap .head-title { text-align: center; }

.design-skills-wrap .text-section { margin-top: 48px; }

.design-skills-wrap .text-section p:nth-of-type(n+2) { margin-top: 24px; }

.design-skills-wrap .recommended-for { margin-top: 48px; }

.design-skills-wrap .reason-wrap { margin-top: 48px; }

.design-skills-wrap .reason-wrap .reason-section { margin-top: 32px; }

.design-skills-wrap .reason-wrap .reason-column {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.design-skills-wrap .reason-wrap .reason-column:nth-of-type(n+2) { margin-top: 38px; }

.design-skills-wrap .reason-wrap .reason-column section { width: 59%; }

.design-skills-wrap .reason-wrap .reason-column section .text { margin-top: 16px; }

.design-skills-wrap .reason-wrap .reason-column .image { width: 38%; }

.design-skills-wrap .image-colum-section {
	counter-reset: number 0;
	display: flex;
	flex-wrap: wrap;
	gap: 32px 16px;
	justify-content: space-between;
	margin-top: 32px;
}

.design-skills-wrap .image-colum-section .column {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	width: 32%;
}

.design-skills-wrap .image-colum-section .column .image {
	max-width: 80px;
	width: 100%;
}

.design-skills-wrap .image-colum-section .column dl {
	font-size: 15px;
	max-width: 260px;
	width: 100%;
}

.design-skills-wrap .image-colum-section .column dt { font-weight: var(--Bold); }

.design-skills-wrap .image-colum-section .column dd { margin-top: 6px; }

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

@media (max-width: 1099px) {

	.design-skills-wrap { padding: 11.94vw 4.975vw; }

	.design-skills-wrap .text-section { margin-top: 5.97vw; }

	.design-skills-wrap .text-section p:nth-of-type(n+2) { margin-top: 2.975vw; }

	.design-skills-wrap .recommended-for { margin-top: 5.97vw; }

	.design-skills-wrap .reason-wrap { margin-top: 9.95vw; }

	.design-skills-wrap .reason-wrap .reason-section { margin-top: 5.96vw; }

	.design-skills-wrap .reason-wrap .reason-column { flex-direction: column; }

	.design-skills-wrap .reason-wrap .reason-column:nth-of-type(n+2) { margin-top: 7.96vw; }

	.design-skills-wrap .reason-wrap .reason-column section {
		display: contents;
		width: 100%;
	}

	.design-skills-wrap .reason-wrap .reason-column section h3 { order: 1; }

	.design-skills-wrap .reason-wrap .reason-column section .text {
		margin-top: 3.98vw;
		order: 3;
	}

	.design-skills-wrap .reason-wrap .reason-column .image {
		margin-top: 3.98vw;
		order: 2;
		width: 100%;
	}

	.design-skills-wrap .image-colum-section {
		flex-direction: column;
		gap: 3.98vw;
		margin-top: 3.98vw;
	}

	.design-skills-wrap .image-colum-section .column {
		align-items: center;
		gap: 0;
		width: auto;
	}

	.design-skills-wrap .image-colum-section .column .image { max-width: 19.9vw; }

	.design-skills-wrap .image-colum-section .column dl {
		font-size: 3.483vw;
		max-width: 66.169vw;
	}

	.design-skills-wrap .image-colum-section .column dd { margin-top: .995vw; }

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


/* --------------------------------------------------------------------------------------
	タブ切り替え
--------------------------------------------------------------------------------------- */

.head-title + .tabs-wrap { margin-top: 30px; }

/* --------------------------------------------------------------------------------------
	Excelページ
--------------------------------------------------------------------------------------- */

.course-excel-list { margin-top: 48px; }

.course-excel-list > h2 {
	margin-bottom: 30px;
	text-align: center;
}

.course-excel-list section {
	border-radius: var(--border-radius);
	overflow: hidden;
}

.course-excel-list section:nth-of-type(n+2) { margin-top: 38px; }

.course-excel-list section h3 {
	background: linear-gradient(90deg, #00B4DC 41.83%, #70DCF0 100%);
	box-shadow: 2px 2px 4px 0 rgba(179, 179, 179, 0.20);
	color: #fff;
	padding: 24px 0;
	text-align: center;
}

.course-excel-list section .no-accordion {
	align-items: center;
	background-color: #fff;
	box-shadow: 2px 2px 4px 0 rgba(179, 179, 179, 0.20);
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	padding: 32px 80px;
}

.course-excel-list section .no-accordion dl {
	order: 2;
	width: 62%;
}

.course-excel-list section .no-accordion dt {
	font-size: 18px;
	font-weight: var(--Bold);
}

.course-excel-list section .no-accordion dd { margin-top: 8px; }

.course-excel-list section .no-accordion .image {
	max-width: 322px;
	order: 1;
}

.course-excel-list section .related-courses { margin-top: 6px; }

.course-excel-list section .course-excel-details > .accordion-plus {
	display: flex;
	flex-direction: column;
}

.course-excel-list section .course-excel-details > .accordion-plus > summary {
	box-shadow: 2px 2px 4px 0 rgba(179, 179, 179, 0.20);
	margin-top: 6px;
	order: 2;
	text-align: center;
}

.course-excel-list section .course-excel-details > .accordion-plus[open] > summary { font-size: 0; }

.course-excel-list section .course-excel-details > .accordion-plus[open] > summary::after {
	content: "閉じる";
	font-size: 18px;
}

.course-excel-list section .course-excel-details > .accordion-plus > .accordion-content > .accordion-inner {
	background-color: transparent;
	margin-top: 0;
	padding: 0;
}

.course-excel-list section .course-excel-details > .accordion-plus .accordion-inner summary {
	background-position: calc(100% - 20px) center;
	box-shadow: 2px 2px 4px 0 rgba(179, 179, 179, 0.20);
	padding-left: 20px;
	padding-right: 50px;
}

.course-excel-list section .banner-area {
	background-color: #fff;
	border-radius: var(--border-radius);
	box-shadow: 2px 2px 4px 0 rgba(179, 179, 179, 0.20);
	margin-top: 6px;
	padding: 24px 0;
}

@media (max-width: 1099px) {

	.course-excel-list > h2 { margin-bottom: 7.96vw; }

	.course-excel-list section:nth-of-type(n+2) { margin-top: 7.96vw; }

	.course-excel-list section h3 { padding: 3.98vw; }

	.course-excel-list section .no-accordion {
		flex-direction: column;
		margin-top: .995vw;
		padding: 7.96vw 4.975vw;
	}

	.course-excel-list section .no-accordion dl {
		order: 1;
		width: auto;
	}

	.course-excel-list section .no-accordion dt { font-size: 3.483vw; }
	.course-excel-list section .no-accordion dd { margin-top: 3.975vw; }

	.course-excel-list section .no-accordion .image { margin-top: 4.975vw; }

	.course-excel-list section .banner-area {
		margin-top: .995vw;
		padding-bottom: 5.97vw;
		padding-top: 5.97vw;
		margin-bottom: 0;
	}

	.course-excel-list section .course-excel-details > .accordion-plus > summary {
		justify-content: center;
		margin-top: .995vw;
	}

	.course-excel-list section .course-excel-details > .accordion-plus[open] > summary::after { font-size: 3.98vw; }
}

/* --------------------------------------------------------------------------------------
	実践CASE
--------------------------------------------------------------------------------------- */

.practical-case {
	background-color: var(--color-pale-gray);
	padding-bottom: 64px;
	padding-top: 64px;
}

.practical-case .box {
	display: flex;
	justify-content: space-between;
}

.practical-case .case-column { padding: 10px 24px; }

.practical-case .case-column:first-of-type { padding-left: 0; }
.practical-case .case-column:last-of-type { padding-right: 0; }
.practical-case .case-column:nth-of-type(n+2) { border-left: 1px solid var(--color-border); }

.practical-case .case-column .head {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.practical-case .case-column .head .image { width: 17.6%; }

.practical-case .case-column .head dl {
	font-size: 14px;
	width: 77.9%;
}

.practical-case .case-column .head dt { font-weight: var(--Bold); }
.practical-case .case-column .head dd { margin-top: 4px; }

.practical-case .case-column .diagram {
	margin-top: 24px;
	max-height: 153px;
	overflow: hidden;
}

.practical-case .case-column .diagram img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.practical-case .case-column .color-text {
	background: url(../images/course/business/excel/icon-check.svg) no-repeat left 5px;
	font-weight: var(--Bold);
	margin-top: 15px;
	padding-left: 25px;
}

@media (max-width: 1099px) {

	.practical-case { padding: 4.975vw; }

	.practical-case .box {
		flex-direction: column;
	}

	.practical-case .case-column { padding: 5.97vw 0; }
	.practical-case .case-column:first-of-type { padding-top: 0; }
	.practical-case .case-column:last-of-type { padding-bottom: 0; }

	.practical-case .case-column:nth-of-type(n+2) {
		border-left: none;
		border-top: 1px solid var(--color-border);
	}

	.practical-case .case-column .head dl { font-size: 2.985vw; }
	.practical-case .case-column .head dd { margin-top: .995vw; }

	.practical-case .case-column .diagram {
		margin-top: 6.219vw;
		max-height: inherit;
	}

	.practical-case .case-column .color-text {
		background-position-y: .333vw;
		margin-top: 3.98vw;
		padding-left: 6.333vw;
	}
}

/* --------------------------------------------------------------------------------------
	Microsoft365講座で学べるラインナップ
--------------------------------------------------------------------------------------- */

.lineup-content-wrap { margin-top: 96px; }

.lineup-content-wrap .accordion-plus summary,
.lineup-content-wrap .accordion-plus .accordion-content {
	box-shadow: 2px 2px 4px 0 rgba(179, 179, 179, 0.20);
	overflow: hidden;
}

.lineup-content-wrap .accordion-plus .accordion-inner {
	margin-top: 0;
	padding: 0;
}

.lineup-content-wrap .accordion-plus section h3 {
	background-color: var(--color-light-blue);
	font-weight: var(--Bold);
	padding: 16px 20px;
	width: 100%;
}

.lineup-content-wrap .accordion-plus section:nth-of-type(n+2) { border-top: 1px solid var(--color-border); }

.lineup-content-wrap .accordion-plus section .column-list {
	display: flex;
	justify-content: space-between;
}

.lineup-content-wrap .accordion-plus section .column {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 24px 32px;
	width: 100%;
}

.lineup-content-wrap .accordion-plus section .column .image,
.lineup-content-wrap .accordion-plus section .column .zoom-image {
	position: relative;
	width: 110px;
}

.lineup-content-wrap .accordion-plus section .column .zoom-image { cursor: pointer; }

.lineup-content-wrap .accordion-plus section .column .zoom-image::after {
	background: url(../images/common/icon-zoom.svg) no-repeat;
	background-size: 100% auto;
	bottom: -12px;
	content: '';
	display: block;
	height: 34px;
	position: absolute;
	right: -12px;
	width: 34px;
}

.lineup-content-wrap .accordion-plus section .column .zoom-image .circle-design { height: 110px; }

.lineup-content-wrap .accordion-plus section .column .image img,
.lineup-content-wrap .accordion-plus section .column .zoom-image .circle-design img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.lineup-content-wrap .accordion-plus section .column dl { width: calc(100% - 138px); }

.lineup-content-wrap .accordion-plus section .column dt { font-weight: var(--Bold); }
.lineup-content-wrap .accordion-plus section .column dd { margin-top: 4px; }

@media (max-width: 1099px) {

	.lineup-content-wrap { margin-top: 11.94vw; }

	.lineup-content-wrap .accordion-plus section h3 { padding: 1.99vw 4.975vw; }

	.lineup-content-wrap .accordion-plus section .column-list { flex-direction: column; }

	.lineup-content-wrap .accordion-plus section .column {
		border-top: 1px solid var(--color-border);
		padding: 3.98vw 4.975vw;
	}

	.lineup-content-wrap .accordion-plus section .column .image,
	.lineup-content-wrap .accordion-plus section .column .zoom-image { width: 17.91vw; }

	.lineup-content-wrap .accordion-plus section .column .zoom-image .circle-design { height: 17.91vw; }

	.lineup-content-wrap .accordion-plus section .column .zoom-image::after {
		bottom: -2.667vw;
		height: 5.97vw;
		right: -2.667vw;
		width: 5.97vw;
	}

	.lineup-content-wrap .accordion-plus section .column dl { width: 56.706vw; }
}



.course-list-wrap .customize-area { margin-block: 3em; text-align: center;}
.course-list-wrap .customize-area p { margin-top: 2em;}
.course-list-wrap .customize-area + .banner-area { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center;}
.course-list-wrap .customize-area .sub-title {color:var(--color-blue);}


/* 関連講座 */
.related-courses ul{

}
.related-courses li{
	margin-bottom:6px;
}
.related-courses li a{
	background: #fff;
	border-radius: var(--border-radius);
	font-size: 18px;
	font-weight: var(--Bold);
	padding: 16px 50px 16px 20px;
	display:block;
	color:var(--color-text);
	position:relative;
}
.related-courses li a:after{
	content: '';
	display: block;
	right: 23px;
	position: absolute;
	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	width: 100%;
	z-index: 1;
	border-bottom: 2px solid var(--color-magenta);
	border-right: 2px solid var(--color-magenta);
	content: '';
	display: block;
	height: 8px;
	margin-left: 4px;
	transform: rotate(-45deg);
	transition: all .3s ease-in-out;
	width: 8px;
	top:45%;
}
.related-courses li a:hover{
	text-decoration:none;
}



.course-excel-details .image{
	max-width: 322px;
}
.course-excel-details .accordion-plus .accordion-inner p{
    width: 60%;
}
.course-excel-details .related-courses .course-short-accordion{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.course-excel-details .course-table{
    width: 100%;
}

@media (max-width: 1099px) {
	.course-excel-details .accordion-plus .accordion-inner p{width: 100%;}
	.course-excel-details .image{width: 90%;}
	.related-courses li a{font-size:3.483vw;}

}



.main-text-section{
	background-color: #fff;
    border-radius: var(--border-radius);
    padding: 4% 5%;
}
.main-text-section .text dt{
    color: var(--color-blue);
}