@charset "UTF-8";
#topvisual { background: url(../images/bg_topvisual.jpg) right top no-repeat; height: 35vw; background-size: cover;}
#topvisual h2 { top: 2vw; line-height: 1.4; color: #317ad3; text-shadow: none;}
#topvisual h2 > span { font-size: 40%; display: block; width: 100%; letter-spacing: -0.05em;}
#topvisual ul { top: unset; bottom: 13vw;}
#topvisual ul li:first-of-type, #topvisual ul li:last-of-type { width: 43vw; border: none;}
#topvisual ul li { background: rgba(0,0,0,0.6); color: #fff;}
#reasonArea .lead { text-align: center; font-size: 150%; margin: 40px auto; font-weight: bold; color: #333;}
.reason_list > li { justify-content: space-between; flex-direction: row-reverse; padding: 40px 0; border-top: dashed 2px #ccc;}
.reason_list .txt_area { width: 48%; font-size: 150%;}
.reason_list .img_area { width: 48%;}
.reason_list .txt_area h3 { font-weight: bold; color: #cb064b; font-size: 130%; margin-bottom: 0.5em;}
#mainContent .mainList.flex li { width: 100%;}
#mainContent .mainList dd { justify-content: center; align-items: center; padding: 0 40px;}
#mainContent .mainList dd > div { position: static; margin: auto;}
#mainContent .mainList.flex li:not(:first-of-type) dd > div { height: auto;}
#mainContent .mainList dd .txt_area { order: 1; width: auto; max-width: 48%; margin: 0 1%;}
#mainContent .mainList dd h4 { position: static; transform: none;}
#mainContent .mainList.flex dd h4 { width: auto;}
#mainContent .mainList.flex li:not(:first-of-type) dd h4 { width: auto; font-size: 2rem;}
#mainContent .mainList dd .imgArea { position: static; order: 2; width: auto; max-width: 48%; margin: 0 1%;}
#mainContent .mainList dd .imgArea p { margin: 0;}
#mainContent .mainList dd p { order: 3; margin: 40px auto 0; font-weight: bold; font-size: 120%;}
#mainContent .mainList.flex li:first-of-type dd > div { height: auto;}
#mainContent .mainList.flex li:first-of-type .imgArea img { max-width: unset;}
.courseTtl { background: #317ad3; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 15px 20px; margin-bottom: 20px;}
.courseTtl ul { text-align: left; margin: 0 0 0 auto;}
.courseTtl ul li { display: inline-block; background: #fff; line-height: 1; padding: 0.5em; border-radius: 5px; margin: 0.3em; font-size: 80%;}
#courseArea h3 { color: #fff; margin: 0; font-size: 1.6rem;}
.courseList > li { border: solid 1px #555; padding: 40px; margin: 30px auto;}
.courseList dd { max-height: unset; transition: unset;}
dl.rcm { display: flex; flex-wrap: wrap; align-items: center; border: solid 1px #74a9eb; max-width: 800px; margin: 30px auto;}
dl.rcm dt { background: #74a9eb; font-size: 1.4rem; position: relative; color: #fff; height: 120px; width: 160px; border-radius: 0 2px 2px 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: center;}
dl.rcm dt:after { content: ""; display: block; position: absolute; border: solid 60px transparent; border-left: solid 30px #74a9eb; width: 0; height: 0; top: 50%; left: calc( 100% - 1px ); transform: translateY( -50% );}
.courseList dl.rcm dd { width: calc( 100% - 160px ); padding: 0 30px 0 60px;}
.courseList dl.rcm li { font-size: 1.2rem; margin: 0.2em 0;}
.courseList dl.rcm li:before { content: "\02022"; margin-right: 0.3em;}
.courseList h4 { font-weight: bold; border-bottom: solid 1px #999; padding-bottom: 0.3em; margin: 1em 0; font-size: 1.2rem; position: relative;}
.courseList h4:after { content: ""; position: absolute; display: block; width: 15em; height: 3px; left: 0; bottom: -2px; background: #CB064B;}
.schedule { display: flex; flex-wrap: wrap; justify-content: center;}
.schedule li { padding: 0.5em 2em; border: solid 2px #CB064B; background: #fffeef; margin: 1em 2em; position: relative; font-size: 1.1rem;}
.schedule li:not(:last-of-type):after { content: "\025b6"; color: #CB064B; position: absolute; left: calc( 100% + 1.5em ); top: 50%; transform: translateY( -50% );}
.curriculum { margin: auto auto 30px;}
.curriculum dt { text-align: center; font-weight: bold; color: #CB064B; margin: 1em auto 0.5em; font-size: 120%;}
.curriculum ul { display: flex; flex-wrap: wrap; background: #555; padding: 0.5px;}
.curriculum ul > li { width: calc( 25% - 1px ); margin: 0.5px; background: #fff; padding: 0.5em;}
dl.point { background: #efefef; padding: 20px 30px 30px;}
dl.point dt { font-weight: bold; color: #CB064B; margin: 0 auto 0.5em -40px; font-size: 120%; position: relative; padding-left: 70px;}
dl.point dt .balloon { display: block; position: absolute; color: #fff; font-size: 18px; width: 60px; height: 60px; line-height: 60px; text-align: center; border-radius: 50%; background: rgb(255,33,111); background: linear-gradient(150deg, rgba(255,33,111,1) 49%, rgba(227,23,94,1) 50%); bottom: 0; left: 0;}
dl.point dt .balloon:after { content: "\025c0"; position: absolute; color: #e3175e; line-height: 1; bottom: 0; left: 43px; transform: rotate(-25deg);}
.courseList dt:after { display: none;}
.courseList .img_area { display: flex; flex-wrap: wrap; justify-content: center; margin: 1em auto 0;}
.courseList .img_area li { width: 48%; margin: auto;}
.courseList .img_area li p { font-size: 1.4rem; font-weight: bold; line-height: 2.2; background: #f8e3ea; border-radius: 1em; padding: 1.5em 2em; color: #cb064b;}


@media (max-width: 960px) {
	#topvisual h2 > span { font-size: 50%;}
	#topvisual ul { width: 97vw;}
	#topvisual ul li:first-of-type, #topvisual ul li:last-of-type { width: auto;}
	.reason_list .txt_area { width: 56%;}
	.reason_list .img_area { width: 40%;}
	#mainContent .mainList dd { padding: 0; justify-content: space-between;}
	#mainContent .mainList.flex dd h4, #mainContent .mainList.flex li:not(:first-of-type) dd h4 { font-size: 2rem;}
	#mainContent .mainList.flex li:first-of-type .imgArea img { max-width: 100%;}
	.courseList .img_area li p { font-size: 2.5vw; padding: 1em; line-height: 1.8;}
	.courseList > li { padding: 4vw; margin: 3vw auto;}
	#courseArea h3 { font-size: 1.4rem;}
	.courseList dl.rcm li { font-size: 1.1rem;}
}

@media (max-width: 799px) {
	.reason_list .txt_area h3 { font-size: 3.5vw;}
	#mainContent .mainList.flex dd h4, #mainContent .mainList.flex li:not(:first-of-type) dd h4 { font-size: 3vw;}
	#mainContent .mainList.flex li .imgArea { width: auto;}
	#mainContent .mainList dd p { margin: 4vw auto 0;}
	.schedule li { padding: 0.5em 1em; margin: 1em;}
	.schedule li:not(:last-of-type):after { left: calc( 100% + 0.5em );}
	.curriculum ul > li { width: calc( 50% - 1px );}
	dl.rcm { margin: 1.5em auto; align-items: unset; align-content: center;}
	dl.rcm dt { font-size: 1.2rem; width: 140px; height: auto;}
	dl.rcm dt:after { border-width: 20px; border-left-width: 10px;}
	.courseList dl.rcm dd { width: calc( 100% - 140px ); padding: 1em 1em 1em 30px;}
	.courseList dl.rcm li { font-size: 1rem;}
	.schedule li:first-of-type { margin-left: 0;}
	.schedule li:last-of-type { margin-right: 0;}
}

@media (max-width: 699px) {
	#topvisual { background: url(../images/bg_topvisual_smt.jpg) center center no-repeat; background-size: cover; height: 78vw;}
	#topvisual h2 br { display: none;}
	#topvisual h2 > span { font-size: 3.5vw;}
	#topvisual ul { bottom: 2vw; width: 95%;}
	.schedule li {  writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; text-align: center; padding: 1em 2vw;}
	.schedule li:not(:last-of-type):after { left: calc( 100% + 0.3em );}
}

@media (max-width: 599px) {
	.reason_list > li { padding: 4vw 0;}
	.reason_list .txt_area { width: 100%; font-size: 1rem;}
	.reason_list .img_area { width: 80%; margin: 3vw auto 0;}
	.reason_list .txt_area h3 { font-size: 1.3rem;}
	#mainContent .mainList.flex dd h4, #mainContent .mainList.flex li:not(:first-of-type) dd h4 { font-size: 4vw;}
}

@media (max-width: 499px) {
	#reasonArea .lead { font-size: 110%;}
	#mainContent .mainList dd p { font-size: 110%;}
	#mainContent .mainList dd p { font-size: 1rem; font-weight: normal;}
	dl.rcm dt { width: 100%;}
	dl.rcm dt:after { display: none;}
	.courseTtl { padding: 0.5em 0.8em;}
	#courseArea h3 { font-size: 1.2rem; text-align: left;}
	.courseTtl ul { margin: 0 auto 0 0;}
	.courseTtl ul li { font-size: 0.875rem;}
	.courseList dl.rcm dd { width: 100%; padding: 1em;}
}

@media (max-width: 399px) {
	.schedule li { margin: 0.5em;}
	.schedule li:not(:last-of-type):after { line-height: 1; left: calc( 100% + 0.1em );}
	.curriculum ul { border: solid 1px #555; background: none;}
	.curriculum ul > li { background: none; width: 100%; margin: auto;}
	.curriculum ul > li:not(:last-of-type) { border-bottom: 1px dotted #555;}
	.courseList .img_area li { width: 80%; margin: 1% auto;}
	.courseList .img_area li p { font-size: 1rem;}
	.courseList .img_area li p br { display: none;}
}