/*===============================================================================
buttons
================================================================================*/
.course-buttons{
	--count: 1;
	--gap: .5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap);
	max-width: var(--width-sm);
	margin-inline: auto;
	margin-bottom: var(--g-sec--md);
}
@media (min-width: 768px){
	.course-buttons{
		--count: 3;
	}
}
.course-buttons__link{
	--icon-c: var(--c-main);
	--icon-w: .8em;
	--icon-h: .8em;
	display: flex;
	align-items: center;
	gap: .2em;
	justify-content: space-between;
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
	max-width: 26rem;
	margin-inline: auto;
	padding: 1.2em;
	text-align: center;
	border: 1px solid var(--c-dark);
	outline-color: transparent;
	background: var(--c-light);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
	color: var(--c-dark);
	transition: var(--ani-t--normal) ease-out;
}
.course-buttons__link:is(:hover, :focus){
	border-color: var(--c-main);
	outline: 3px solid var(--c-main);
	outline-offset: -4px;
	color: var(--c-main);
}
/* icon */
.course-buttons__icon{
	width: 4.7em;
}
/* arrow */
.course-buttons__arrow{
	content: "";
	border-style: solid;
	border-width: var(--icon-h) 0 var(--icon-h) var(--icon-w);
	border-color: transparent transparent transparent var(--icon-c);
	transition: var(--ani-t--normal) ease-out;
}
.course-buttons__link:is(:hover, :focus) .course-buttons__arrow{
	transform: translateX(1.2em);
}



/*===============================================================================
section
================================================================================*/
.course__details{
	margin-bottom: var(--g-sec--md);
}
.course__section:not(:last-of-type){
	margin-bottom: var(--g-sec--md);
}
.course__section{
	scroll-margin-top: var(--scroll-position);
	padding: var(--g-sec--md) 1rem;
	background: var(--c-light);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
}
.course__container{
	max-width: var(--width-sm);
	margin-inline: auto;
}

.course__title{
	margin-bottom: var(--g-sec--xs);
	padding: .4em;
	text-align: center;
	border: 1px solid var(--c-dark);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
}
.course__title.--syougakusei{
	background: var(--c-syougakusei);
}
.course__title.--chugakusei{
	background: var(--c-chu1);
}
.course__title.--koukousei{
	background: var(--c-koukousei);
}


/*===============================
* course info
* =================================*/
.course-info{
	margin-bottom: var(--g-sec--xs);
}
.course-info table{
	margin-bottom: 0;
}
.course-info :is(th, td){
	padding: 1.5rem clamp(1rem, -0.071rem + 2.86vw, 2.5rem);
	border-color: var(--c-dark);
	font-size: 1rem;
}
.course-info th{
	width: 18%;
	min-width: 7em;
	text-align: center;
	background: var(--c-blue--lightest);
	font-weight: var(--fw-md);
}
.course-info td{
	background: var(--c-light);
}
.course-info__time{
	display: flex;
	flex-wrap: wrap;
	gap: 0 .5rem;
}



/*===============================================================================
course price
================================================================================*/
.course-price__title{
	margin-bottom: 2rem;
	padding: .4em;
	text-align: center;
	border: 1px solid var(--c-dark);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
}
.course-price__table table{
	margin-bottom: 0;
}
.course-price__table :is(th, td){
	padding: 1.5rem clamp(1rem, -0.071rem + 2.86vw, 2.5rem);
	text-align: center;
	border-color: var(--c-dark);
}
.course-price__table th{
	width: 12%;
	background: var(--c-blue--lightest);
}
.course-price__table td{
	background: var(--c-light);
}



/*===============================================================================
message
================================================================================*/
.course-message{
	padding: var(--g-sec--md) 1rem;
	background: var(--c-light);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
}
.course-message__container{
	--count: 1;
	--gap: var(--g-sec--sm);
	--media-width: 62%;
	--body-width: calc( 200% - var(--media-width) );
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5rem var(--gap);
	max-width: var(--width-sm);
	margin-inline: auto;
}
@media (min-width: 600px){
	.course-message__container{
		--count: 2;
		--media-width: 71%;
	}
}

.course-message__image{
	width: calc( ( var(--media-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
	margin-inline: auto;
}
.course-message__content{
	width: calc( ( var(--body-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.course-message__text:not(:last-of-type){
	margin-bottom: 1rem;
}
.course-message__text span{
	text-decoration-thickness: 3px;
	text-decoration-skip-ink: none;
	text-decoration-color: #ffaaaa;
	text-decoration-line: underline;
}