/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
}

@media (min-width: 600px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 480px) {
}

@media (min-width: 481px) and (max-width:767px) {
}

@media (min-width: 768px) and (max-width:959px) {
}

@media (min-width: 960px) {
}


@media (max-width: 767px) {
}

@media (min-width: 768px) {
}

/* ---------------------------------------- common */

main { padding: 6em 0 0; }
section { margin: 0 0 6em; }

/* ---------------------------------------- greeting */

#greeting { padding: 0 1em; }
#greeting .inner {
	background: var( --skin-color );
	padding: 3em 1em;
	border-radius: 1em;
}
#greeting .inner .inside {
	max-width: 900px;
	margin: 0 auto;
}
#greeting h3 {
	color: var( --orange-color );
	line-height: 1.4;
	text-align: center;
	margin: 0 0 .25em;
}
#greeting h4 {
	line-height: 1.4;
	text-align: center;
/* 	margin: 0 0 1.5em; */
}
#greeting p {
	font-weight: 400;
}

@media (max-width: 767px) {

	#greeting h3 { font-size: var( --sp-h3 ); }
	#greeting h4 { font-size: var( --sp-h4 ); }

}

@media (min-width: 768px) {

	#greeting h3 { font-size: var( --pc-h3 ); }
	#greeting h4 { font-size: var( --pc-h4 ); }

}

/* ---------------------------------------- info */

#info { padding: 0 2em; }
#info .inside {
	display: flex;
	justify-content: center;
}
#info h3 {
	color: var( --orange-color );
	line-height: 1.4;
	text-align: center;
	margin: 0 0 1em;
}
#info .inside ul li { margin: 0 0 1em; }
#info .inside ul li a { 
	line-height: 1.6; 
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#info .inside ul li a:hover { color: var( --orange-color ); }
#info .inside ul li a p{ font-size: var(--pc-h4);}
#info .pagelink { margin: 2em 0 0; }

@media (max-width: 767px) {

	#info h3 { font-size: var( --sp-h3 ); }

}

@media (min-width: 768px) {

	#info h3 { font-size: var( --pc-h3 ); }
	#info .inside ul li a {
		display: flex;
		align-items: center;
	}
	#info .inside ul li a time { width: 8em; }
	#info .inside ul li a p { width: calc( 100% - 8em ); }
}

/* ---------------------------------------- course */

#course { padding: 0 2em; }
#course h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var( --orange-color );
	line-height: 1.4;
	text-align: center;
	margin: 0 0 2em;
}
#course h3 img { margin: 0 .5em 0 0; }
#course ul {
	display: flex;
	flex-wrap: wrap;
	
}
#course ul li { position: relative; }
#course ul li .accepting {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4.8em;
	aspect-ratio: 1;
	color: #fff;
	background: var( --orange-color );
	border-radius: 100%;
	position: absolute;
	top: -1em;
	left: -1.5em;
}
#course ul li a { 
	display: block;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#course ul li a:hover { opacity: .5; }
#course ul li a img { vertical-align: text-top; }
#course ul li a figcaption { 
	line-height: 1,4;
	margin: .5em 0 0;
}
#course .pagelink { margin: 3em 0 0; }

@media (max-width: 767px) {

	#course h3 { font-size: var( --sp-h3 ); }

}

@media (min-width: 768px) {

	#course h3 { font-size: var( --pc-h3 ); }

}

@media (max-width: 480px) {

	#course ul { 
		justify-content: center;
		gap: 6em 10%; 
	}
	#course ul li { width: 90%; }

}

@media (min-width: 481px) and (max-width:767px) {

	#course ul { gap: 4em 10%; }
	#course ul li { width: 45%; }

}

@media (min-width: 768px) and (max-width:959px) {

	#course ul { gap: 5em 10%; }
	#course ul li { width: 45%; }

}

@media (min-width: 960px) {

	#course ul { gap: 6em 10.5%; }
	#course ul li { width: 26.333333333%; }

}

/* ---------------------------------------- access */

#access { padding: 0 1em; }
#access .inner {
	background: var( --skin-color );
	padding: 2em 1em 3em;
	border-radius: 1em;
}

#access h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var( --orange-color );
	line-height: 1.4;
	text-align: center;
	margin: 0 0 1.5em;
}
#access h3 img { margin: 0 .5em 0 0; }
#access .inside p { line-height: 1.4; }
#access .inside p + p { margin: 1em 0 0; }

@media (max-width: 767px) {

	#access h3 { font-size: var( --sp-h3 ); }
	#access .inside p { font-size: var( --sp-h3 ); }
	#access .inside { text-align: center; }
	#access .inside figure { margin: 0 0 2em; }

}

@media (min-width: 768px) {

	#access h3 { font-size: var( --pc-h3 ); }
	#access .inside {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 2em;
		max-width: 980px;
		margin: 0 auto;
	}
	#access .inside figure { width: 48%; }
	#access .inside p { font-size: var( --pc-h3 ); }

}

/* ---------------------------------------- inquiry */

#inquiry {
	background: var( --orange-color );
	padding: 3em 1em;
}
#inquiry h3 {
	color: #fff;
	text-align: center;
	margin: 0 0 1em;
}
#inquiry .inside {
	background: #fff;
	text-align: center;
	line-height: 1.6;
	padding: 2em 1em;
	border-radius: 1.5em;
}
#inquiry .inside h4 { margin: 0 0 1em; }
#inquiry .inside p { margin: 1em 0 0; }
#inquiry .inside ul { line-height: 1.2; }

@media (max-width: 767px) {

	#inquiry h3 { font-size: var( --sp-h3 ); }
	#inquiry .inside h4,
	#inquiry .inside p { font-size: clamp(1rem, 0.821rem + 0.89vw, 1.25rem); }
	#inquiry .inside ul { font-size: clamp(1.375rem, 0.659rem + 3.58vw, 2.375rem); }
	#inquiry .inside ul a { display: block; }
}

@media (min-width: 768px) {

	#inquiry h3 { font-size: var( --pc-h3 ); }
	#inquiry .inside h4,
	#inquiry .inside p { font-size: var( --pc-h3 ); }
	#inquiry .inside ul { font-size: clamp(2.375rem, 1.455rem + 1.92vw, 3rem); }
	#inquiry .inside ul a { pointer-events: none; }

}