@charset "UTF-8";


.mainvisual {
	background: url(../images/topvisual.jpg);
	background-position: center center;
	height: auto;
	background-size: cover;
	display: flex;
	align-items: center;
	padding: 6em 0;
	position: relative;
}

.mainvisual::after{
	content: "";
	background: rgba(0, 0, 0, .35);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.mainvisual .txt_area{
	width: 96%;
	max-width: 1500px;
	margin: auto;
	position: relative;
	z-index: 1;
}

.mainvisual h1,.mainvisual h2{
	font-weight: bold;
}


.mainvisual h1{
	margin-bottom: 3.5em;
}
.mainvisual h1 .sub_txt{
	display: block;
	width: fit-content;
	color: #fff;
	background: rgba(34, 58, 112, .7);
	padding: .25em .5em;
	text-align: left;
	font-size: clamp(1rem, 0.727rem + 1.36vw, 1.75rem);
	margin-bottom: .5em;
}
.mainvisual h1 .sub_txt .small{
	display: block;
	font-size: clamp(0.875rem, 0.648rem + 1.14vw, 1.5rem);
}

.mainvisual h1 .main_txt{
	display: block;
	color: #fff;
	text-align: left;
	font-size: clamp(2rem, 0.682rem + 6.59vw, 5.625rem);
	letter-spacing: .1em;
	line-height: 1.2;
	text-shadow: 1px 1px 10px #2581da;
}

.mainvisual h2{
	color: #fff;
	font-size: clamp(1.375rem, 0.83rem + 2.73vw, 2.875rem);
	text-shadow: 2px 2px 10px rgb(34 58 112);
}

.mainvisual ul{
	justify-content: space-between;
	width: 100%;
	max-width: 900px;
}

.mainvisual ul li{
	width: calc(100% / 3 - .75em);
	border: 4px solid #223a70;
	background: #fffef5;
	text-align: center;
	font-size: clamp(0.625rem, 0.352rem + 1.36vw, 1.375rem);
	padding: 2.5em .25em .5em;
	font-weight: bold;
	position: relative;
}


.mainvisual ul li::before{
	content: "";
	width: 12vw;
	max-width: 90px;
	min-width: 60px;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: -2.25em;
	right: 0;
	left: 0;
	margin: auto;
	background-color: #223a70;
	border-radius: 50%;
}
.mainvisual ul li::after{
	content: "";
	display: block;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: -1.25em;
	right: 0;
	left: 0;
	margin: auto;
}
.mainvisual ul li:nth-of-type(1)::after{
	background-image: url(../images/topvisual_icon01.png);
	background-size: cover;
	width: 8vw;
	max-width: 50px;
	min-width: 40px;
}
.mainvisual ul li:nth-of-type(2)::after{
	background-image: url(../images/topvisual_icon02.png);
	background-size: cover;
	width: 8vw;
	max-width: 50px;
	min-width: 40px;
}
.mainvisual ul li:nth-of-type(3)::after{
	background-image: url(../images/topvisual_icon03.png);
	background-size: cover;
	width: 8vw;
	max-width: 50px;
	min-width: 40px;
}




.secttl:after{
	background: #223a70;
}
.btnArea a{background: #223a70}

.contactArea{margin: 2.5em auto 1.5em}
.contactArea p{
	font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
	margin-bottom: 1.25em;
	text-align: center;
}


.contactArea ul{
	width: 100%;
	max-width: 800px;
	margin: auto;
	justify-content: space-between;
	flex-wrap: wrap;
}
.contactArea li{width: calc(100% / 2 - 1.5em);max-width: 460px;margin: auto;}
.contactArea li a{
	color: #fff;
  display: block;
  font-weight: bold;
  text-align:center;
  background: #CB064B;
  padding: .75em;
  border-radius: 6em;
  font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
  text-shadow: none;
  box-shadow: none;
  position: relative;
}

#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: #223a70;}
.schedule { display: flex; flex-wrap: wrap; justify-content: center;}
.schedule li { padding: 0.5em 2em; border: solid 2px #223a70; background: #fffeef; margin: 1em 2em; position: relative; font-size: 1.1rem;}
.schedule li:not(:last-of-type):after { content: "\025b6"; color: #223a70; 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: #223a70; 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: #223a70; 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, #223a70 49%, #0c1c41 50%); bottom: 0; left: 0;}
dl.point dt .balloon:after { content: "\025c0"; position: absolute; color: #0c1c41; 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: #e8f2ff; border-radius: 1em; padding: 1.5em 2em; color: #223a70;}


@media (max-width: 960px) {


.mainvisual ul li{
	padding: 3.5em .25em .5em;
}


	#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) {


.mainvisual {
	background-position: 70% center;
}

	#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) {



	.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) {


.mainvisual {padding: 3em 0;}
.mainvisual h1{margin-bottom: 2.5em}
.mainvisual ul{
	gap: 3em 0;
}
.mainvisual ul li{
	width: calc(100% / 3 - .25em);
	padding: 3.5em .25em .5em;
	border: 2px solid #223a70;
}

.mainvisual ul li::before{
	top: -3em;
}
.mainvisual ul li::after{
	top: -2em;
}



	#mainContent .mainList.flex dd h4, #mainContent .mainList.flex li:not(:first-of-type) dd h4 { font-size: 4vw;}
}


@media (max-width: 499px) {



	#mainContent .mainList dd p { font-size: 110%;}
	#mainContent .mainList dd p { font-size: 1rem; font-weight: normal;}

.contactArea li{width: 80%;}
.contactArea li:not(:last-child){margin-bottom: 1.25em}

	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, .curriculum ul > li.pcbg { display: none;}
	.curriculum ul > li.spbb{border-bottom: none;}
}

.headPC .hdrLogo{margin-top: 0;max-width: 250px;}
@media (max-width: 1250px){
	.headPC .hdrLogo{max-width:230px;}
}
@media (max-width: 959.999px){
	.headPC .hdrLogo{max-width: 100px;}
}
@media (max-width:699px){
	.headPC .hdrLogo{max-width: 100px;}
}