@charset "UTF-8";
@font-face { font-family:"FontAwesome"; src:url("./fa-solid-900.woff") format("woff"); }

#topvisual{ position: relative;background: url(../images/bg_topvisual.jpg) right top no-repeat;background-size:80%;height:26vw;}
#topvisual h2{ font-size: 6vw;font-weight: bold;line-height: 1.4;position: absolute;top: 3vw;left:4vw;color: #111;line-height: 1;}
#topvisual h2 span{ font-size: 52%;}
#topvisual h3 { max-width: 300px; width: 30%; position: absolute; bottom: 2vw; left: 4vw;}
.bg01 { background: #f0f0f0;}
.bg02 { background: #dd294e; color: #fff;}
.flex { display: flex; flex-wrap: wrap;}
.flex_between { justify-content: space-between;}
.dib{display: inline-block;}
.txtS{font-size: 75%;}
.txt_center { text-align: center;}
.co01 { background: linear-gradient(transparent 80%, #ffdc00 80%);}
#footer > section:first-of-type{display: none;}
#footer > section:last-of-type{padding:0;}
ul.list-beige li a{font-weight: normal;}
.cta_btn { display: flex; flex-wrap: wrap; justify-content: center;}
.cta_btn > li { margin: 15px; max-width: calc( 50% - 30px );}
.contactSet { text-align: center;}
.contact .contactSet li { display: inline-block;}
.contact .contactSet .btn { width: 230px; margin: 10px; padding: 15px 0; font-size: 17px;}

.gnav nav { display: none;}
.subNavi { width: auto; max-width: calc( 95% - 630px ); justify-content: flex-end; align-content: center; margin: -60px calc( 295px + 2.5% ) 15px auto; top: 50px; background: none;}
.subNavi li { width: auto; padding: 0 1em; border-left: 1px solid #e2e2e2;}
.subNavi li a { padding: 0.5em;}
@media(min-width: 1000px) {
	.subNavi li a:hover { background: inherit; color: #ce442b;}
}

#bnrSlide{ padding: 15px 0;}
#bnrSlide .slickSlide > li { display:none;}
#bnrSlide .slickSlide > li:first-child { display:block; text-align:center;}
#bnrSlide .slick-slide img {padding: 0 0.3em;}

section { padding: 50px 0;}
.secttl{text-align: center;font-size: 2.5rem;line-height: 1.6;margin-bottom:50px;font-weight: bold;position: relative;}
.secttl .txtS{font-size: 60%;font-weight: normal}
.secttl:after{content:"";background: #dd294e;height:5px;width: 80px;position: absolute;bottom: -15px;left: 0;right: 0;margin: 0 auto;}
.secttl br.smt { display: none;}
.ttl_bg_pnk { background: #dd294e; text-align: center; margin-bottom: 15px; font-size: 1.375rem; padding: 0.3em; color: #fff; font-weight: 600;}

.worries { display: flex; flex-wrap: wrap; justify-content: space-between;}
.worries > li { width: 48%; margin: 1em 0; display: flex; flex-wrap: wrap; justify-content: center;}
.worries > li:nth-of-type(odd) { flex-direction: row-reverse;}
.worries > li .img_area { width: 25%;}
.worries > li .txt_area { width: 75%;}
.worries > li:nth-of-type(odd) .txt_area { padding-left: 30px;}
.worries > li:nth-of-type(even) .txt_area { padding-right: 30px;}
.worries > li .txt_area p { background: #fff; padding: 1.6em 1.8em; border-radius: 1em; position: relative; box-shadow: 3px 3px #a6c4d4;}
.worries > li .txt_area p:before { content: ""; display: block; width: 0; height: 0; position: absolute; bottom: calc( 30% - 3px ); border: solid 0.5em transparent; border-top-width: 0.8em;}
.worries > li:nth-of-type(odd) .txt_area p:before { border-right: solid 30px #a6c4d4; right: 100%;}
.worries > li:nth-of-type(even) .txt_area p:before { border-left: solid 30px #a6c4d4; left: 100%;}
.worries > li .txt_area p:after { content: ""; display: block; width: 0; height: 0; position: absolute; bottom: 30%; border: solid 0.5em transparent; border-top-width: 0.8em;}
.worries > li:nth-of-type(odd) .txt_area p:after { border-right: solid 30px #fff; right: calc( 100% - 2px );}
.worries > li:nth-of-type(even) .txt_area p:after { border-left: solid 30px #fff; left: calc( 100% - 2px );}

.feature_list { display: flex; flex-wrap: wrap; justify-content: space-between;}
.feature_list > li { width: 47%; margin-bottom: 60px; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start;}
.feature_list > li:first-of-type { width: 100%;}
.feature_list h3 { width: 100%;}
.feature_list .txt_area { width: 47%; margin: auto;}
.feature_list .txt_area.wide { width: 100%; margin: 1em 0 auto;}
.feature_list .img_area { width: 47%; margin: auto 0;}
.feature_list > li:first-of-type .img_area { text-align: right;}
.feature_list > li p { font-size: 1.2rem;}
.feature_list .f_large { font-size: 1.5rem; font-weight: bold;}
.feature_list sup { top: 0.5em;}
.features_contact { text-align: center;}
.features_contact p { display: inline-block; position: relative; padding: 1em 2em; font-size: 1.5rem; font-weight: bold; border-radius: 1em; background: rgb(255,0,85); background: linear-gradient(0deg, rgba(255,0,85,1) 0%, rgba(255,98,0,1) 100%); margin-bottom: 1em;}
.features_contact p:after { content: ""; display: block; width: 0; height: 0; position: absolute; border: solid 2em transparent; border-top: solid 1em #ff0055; border-right-width: 0.2em; top: 100%; left: 20%;}
.features_contact p small { font-weight: normal; font-size: 60%; display: block;}

.courseList > li > dl > dt.cateName { padding: 8px 10px;background: #dd294e;color: #fff;position: relative;border-bottom:1px solid #fff;}
.courseList > li > dl > dt:after { font-family: FontAwesome;content: "\f0ab";font-weight: 900;position: absolute;right: 10px;}
.courseList > li.on > dl > dt:after{ content:"\f0aa";}
.courseList .acToggle{cursor:pointer;}
.courseList > li > dl > dd{max-height:0;overflow:hidden;transition:.5s;}
.courseList > li.on > dl > dd { max-height:unset; background: rgba(203,6,75,0.10); border-bottom: 1px #fff solid;}
.courseList .inrList { padding: 10px;}
.courseList .inrList > li { background: #fff; display: flex; flex-wrap: wrap; justify-content: center; padding: 10px;}
.courseList .inrList > li:not(:last-of-type) { margin-bottom: 10px;}
.courseList .inrList .course_ttl { width: calc( 100% - 20px ); font-weight: bold; font-size: 1.375rem; border-bottom: solid 1px #dd294e; margin-bottom: 0.3em;}
.courseList .inrList li .img_area { margin: 10px; width: 240px;}
.courseList .inrList li .txt_area { margin: 10px; width: calc( 100% - 240px - 40px);}
.courseList .inrList li .txt_area .headline { font-weight: bold; color: #dd294e; font-size: 1.25rem; margin-bottom: 0.5em; line-height: 1.4;}
.courseList_sub { width: 100%; margin-top: 1em;}
.courseList_sub dt { font-weight: bold; color: #dd294e; font-size: 1.25rem; margin-bottom: 0.5em; line-height: 1.4;}
.courseList_sub dd { background: rgba(203,6,75,0.10); margin-bottom: 10px; padding: 0.8em 1em; font-size: 1.125rem;}

.flow > li { background: #fff; padding: 2em;}
.flow > li:not(:last-of-type) { margin-bottom: 70px; position: relative;}
.flow > li:not(:last-of-type):after { content: ""; display: block; width: 70px; height: 70px; background: url(../images/icon_bottomArrow.png) no-repeat center center; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);}
.flow h3 { color: #e12e57; font-weight: bold; font-size: 30px;}
.flow_ttl_line { border-bottom: solid 2px #e12e57; margin-bottom: 20px;}
.flow_ttl_line img { margin: auto 20px -2px 0;}
.flow_ttl_line.flex { justify-content: space-between; align-items: flex-end;}
.flow_ttl_line .h3_txt_s { max-width: calc( 100% - 450px ); color: #e12e57;}
.flow .txt_area { width: calc( 100% - 160px - 30px );}
.flow .txt_area dt { font-weight: bold;}
.flow .txt_area dd { margin-bottom: 1em; padding-left: 1em;}
.flow_contact { text-align: center; padding: 1em;}
.flow_contact li { margin: 10px;}
.btn_green a { display: block; border-radius: 5px;}
.btn_green a:link, .btn_green a:visited { background: #82be00; border-bottom: solid 3px #559300;}
.btn_green a:hover, .btn_green a:active { background: #5f9d07; border-bottom: solid 3px #497e00;}
.flow_contact .txt_contact br.smt { display: none;}
.flow_contact .icon, .flow_contact .txt_tel { color: #dd294e; font-size: 1.875rem; margin: auto 0.1em;}
.btn_orange a { display: block; border-radius: 5px;}
.btn_orange a:link, .btn_orange a:visited { background: #ff9000; border-bottom: solid 3px #ca7619;}
.btn_orange a:hover, .btn_orange a:active { background: #ff6c00; border-bottom: solid 3px #b96800;}
#flow02 .btn_orange { margin: 1em auto; text-align: center; width: 100%;}
#flow02 .btn_orange a { display: inline-block;}
.flow_attention { background: #F7F6EB; padding: 20px; border-radius: 10px; font-size: 0.875rem;}
.flow .txt_area .flow_attention dd { padding-left: 1.3em; text-indent: -1.3em; margin-bottom: 0.3em;}
.flow .txt_area .flow_attention dd:before { content: "\025c6"; margin-right: 0.3em;}

.secImgArea { max-width: 600px; margin: 0 auto 50px;}
#instructorArea h3 { text-align: center; font-size: 2rem; margin-bottom: 50px; font-weight: bold; color: #565656;}
.instructorList{overflow-x: auto;white-space: nowrap;-webkit-overflow-scrolling: touch;}
.instructorList li{width: 80%;max-width: 300px;display: inline-block;margin-right:20px;vertical-align: top;}
.instructorList li .imgArea{margin-bottom: 10px;}
.career{font-size: 75%;}
.instructorList dt {margin-bottom: 10px;border-bottom: 1px #aaa dotted;padding-bottom: 3px;}
.instructorList dd { white-space:normal;margin: 0;line-height: 2;}
#instructorArea .slick-dots{margin-top: 15px;}

.btnArea{width: 300px;margin: 0 auto;}
.btnArea a{background: #dd294e;display: block;text-align: center;color: #fff;padding: 10px;}
.btnArea a span{font-size: 125%;}

@media (max-width: 1250px){
	.subNavi { margin: -60px calc( 255px + 2.5% ) 15px auto;}
}

@media (max-width: 1099px){
	.subNavi { top: 25px; max-width: unset;}
}

@media (max-width: 999px){
	.secttl { font-size: 4vw; line-height: 1.5; margin-bottom: 1.4em;}
	#topvisual h2 { text-shadow: 0 0 3vw white;}
	#topvisual h3 { width: 25vw;}
	.worries > li .txt_area { width: 60%;}
	.worries > li .img_area { height: 20vw; width: auto; max-width: 40%;}
	.worries > li .img_area img { width: 100%; height: 100%; object-fit: contain;}
	#instructorArea h3 { font-size: 3vw; margin-bottom: 1em;}
}

@media (max-width: 959.999px){
	.subNavi { top: 20px; margin: -60px calc( 255px + 2.5% ) 20px auto;}
	.feature_list > li { width: 100%; margin-bottom: 6vw;}
}

@media (max-width: 799px){
	.subNavi { margin: 0; width: 100%; background: #fff; top: 68px;}
	.subNavi li { background: #f0f0f0; width: calc( 100% / 3 ); border-left: none; padding: 0;}
	.subNavi li a { padding: 15px 1%;}
	.subNavi li:not(:last-of-type) { border-right: 1px solid #fff;}
	.worries > li { width: 100%; justify-content: flex-end; margin: -1em auto;}
	.flow_ttl_line.flex { display: block; border: none;}
	.flow_ttl_line.flex h3 { border-bottom: solid 2px #e12e57; margin-bottom: 0.3em;}
	.flow_ttl_line .h3_txt_s br { display: none;}
	.flow_ttl_line .h3_txt_s small { display: inline-block;}
}

@media (max-width: 699px){
	.subNavi { top: 58px;}
	.worries > li { margin: 1em auto;}
	.worries > li .txt_area { width: 75%;}
	.worries > li .img_area { width: 25%; max-width: unset; height: auto;}
	.feature_list .f_large { font-size: 4vw;}
}

@media (max-width: 599px){
	section{ padding: 6vw 0;}
	.secttl { font-size: 5vw;}
	.secttl br.smt { display: inline;}
	#topvisual{ background: url(../images/bg_topvisual_smt.jpg) center top no-repeat; background-size: 100%; height: 78vw;}
	#topvisual h2 { font-size: 9vw; top: unset; bottom: 15vw;}
	#topvisual h3 { width: 30vw; bottom: 3vw;}
	.features_contact p { font-size: 4vw; padding: 1em;}
	.courseList .inrList li .txt_area { width: calc( 100% - 20px );}
	.courseList .inrList li .img_area { width: calc( 100% - 20px ) text-align: center;}
	.courseList_sub dd { font-size: 1rem;}
	.flow_ttl_line img { width: 7vw;}
	.flow h3 { font-size: 4vw;}
	#instructorArea h3 { font-size: 4vw;}
	.flow_contact .txt_contact br.smt { display: inline;}
}

@media (max-width: 499px){
	.secttl { font-size: 6vw;}
	.feature_list h3 { font-size: 4vw;}
	.feature_list .img_area { margin: 0;}
	.feature_list .f_large { min-height: 35vw; display: flex; flex-wrap: wrap; align-content: center; font-size: 1rem;}
	.feature_list .txt_area p:not(:first-of-type) { width: 90vw;}
	.feature_list > li p { font-size: 1rem;}
	.flow .img_area { margin: auto auto 1em;}
	.flow .txt_area { width: 100%;}
}

@media (max-width: 399px){
	.worries > li .txt_area p { padding: 1em}
	.feature_list .f_large { display: block;}
	.features_contact p { font-size: 1rem;}
	.courseList_sub dd { font-size: 0.875rem;}
	.flow h3 { font-size: 5vw;}
	.flow_ttl_line img { width: 9vw; margin-right: 3vw;}
	.flow_contact .icon, .flow_contact .txt_tel { font-size: 7vw;}
}

@media (max-width: 370px){
	.subNavi { top: 48px;}
}