@charset "utf-8";

/*----------------------------------------------------------------
 /category/ under
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/
.section{
	max-width: 900px;
}
/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
#message .sign small{
	font-size: 85.745%;
	font-weight: var(--font-weight-m);
}
#message .sign strong{
	font-size: 107.142857%;
	font-weight: var(--font-weight-m);
}


#course .course-list{
	--item-gap: 30px;
	display				: flex;
	flex-direction		: column;
	flex-wrap			: wrap;
	gap					: var(--item-gap);
}
#course .course-list li{
	flex				: 0 0 calc(calc(100% - calc(calc(var(--item-count) - 1)) * var(--item-gap)) / var(--item-count));
}
@media screen and (min-width: 769px) {
#course .course-list{
	--item-count: 2;
	flex-direction		: row;
}
}

#course .course-item{
	--item-gap: 10px;
	display				: flex;
	flex-direction		: column;
	flex-wrap			: wrap;
	gap					: var(--item-gap);
}
#course .course-item .image{
	padding: 0 0 10px 0;
}
#course .course-item .image img{
	border-radius: var(--border-radius);
}

#course .course-item dt{
	font-weight: var(--font-weight-m);
	color: var(--main-color);
	line-height: 1.4;
	font-size: 112.5%;
}
#course .course-item .text{
	line-height: 1.7142;
}
#course .course-item .link{
	text-align: right;
}
#course .global .course-item{
	background: var(--base-color);
	padding: var(--item-padding);
	border-radius: var(--border-radius);
}
@media screen and (min-width: 1150px) {
#course .global .course-item{
	--item-padding: 20px;
}
}

#flow .image img{
	border: 1px solid var(--sub-color);
	border-radius: var(--border-radius);
}

#flow .flow-list{
	--item-gap: 10px;
	display				: flex;
	flex-direction		: column;
	flex-wrap			: wrap;
	gap					: var(--item-gap);
	position: relative;
}
#flow .flow-list li:not(:last-child)::after{
	content: "";
	display: block;
	background: url(../images/course-arrow.png) center top /contain no-repeat;
	width: 35px;
	height: 20px;
}

#flow .flow-item{
	--item-gap: 10px;
	display				: flex;
	flex-direction		: column;
	flex-wrap			: wrap;
	gap					: var(--item-gap);
	align-items: flex-start;
}
#flow .flow-item dt{
	background: var(--base-color);
	color: var(--main-color);
}
#flow .select .flow-item dt{
	background: transparent;
	border: 1px solid var(--main-color);
}
@media screen and (max-width: 768px) {
#flow .flow-item dt{
	line-height: 1.5;
	padding: 0 1em;
	border-radius: 0.25em;
}
#flow .flow-list li:not(:last-child)::after{
	margin: 10px auto;
}
}
@media screen and (min-width: 769px) {
#flow .flow-item{
	--item-width: 75px;
	--item-gap: 20px;
	flex-direction		: row;
	flex-wrap: wrap;
	gap: var(--item-gap);
}
#flow .flow-item dt{
	flex: 0 0 var(--item-width);
	width: var(--item-width);
	height: var(--item-width);
	display: grid;
	place-content: center;
	text-align: center;
	line-height: 1.2;
	font-size: 112.5%;
	border-radius: calc(var(--item-width) / 2);
}
#flow .flow-item dd{
	flex: 0 0 calc(100% - var(--item-width) - var(--item-gap));
	padding: 10px 0 0 0;
}
#flow .flow-list li:not(:last-child)::after{
	margin: 20px 10px 10px 18px;
}
}