@charset "UTF-8";
.f_exl { color: #00bd63;}
.f_ppt { color: #f34b4b;}
.f_wrd { color: #4864e4;}
.f_ai { color: #ffa21a;}
.f_ps { color: #04a7d6;}
.f_jwc { color: #e616b0;}
.sh1 { text-align: center; font-size: 2.7rem; font-weight: bold; margin-bottom: 30px;}
.sp { display:none;}
.cta ul.flex { justify-content: center;}
.cta ul.flex li { margin: 1em;}
.txt_center { text-align: center;}
.txt_notes{margin-top: 2em;font-size: 85%;}
.txt_notes li{padding-left: 1em;text-indent: -1em;}


#topvisual { background: none; height: auto; text-align: center;}
#topvisual > ul { position: static; width: 100%; justify-content: space-between; max-width: 1100px; margin: 50px auto 0;}
#topvisual > ul li, #topvisual > ul li:first-of-type, #topvisual > ul li:last-of-type { width: 24%; position: static; text-align: center; border: none; background: none;}
#topvisual > ul li img { display: block; width: 85%; margin: auto; max-width: 150px;}
#topvisual > ul li p { font-size: 2rem; color: #555; display: inline-block; background: linear-gradient(transparent 60%, yellow 0%); line-height: 1;}
#topvisual .lesson_info { width: 94vw; max-width: 540px; margin: 50px auto 50px; text-align: left; border: double 7px #efefef; padding: 1.5em;}
#topvisual .lesson_info dt { font-weight: bold; font-size: 0.875rem;}
#topvisual .lesson_info dt:not(:first-of-type) { margin-top: 0.8em;}
#topvisual .lesson_info dt::before { content: "\025a0"; margin-right: 0.3em; color: #cb064b;}
#topvisual .lesson_info dd { font-size: 1.25rem; padding-left: 1rem;}
#topvisual ul.slick-slider { position: relative; top: unset; left: unset;}
#topvisual .slick-slide { position: static; border: none; background: none; padding :0;}
#topvisual ul.slick-dots li, #topvisual ul.slick-dots li:first-of-type, #topvisual ul.slick-dots li:last-of-type { position: relative; border: none; background: none; padding: 0; top: unset; left: unset;}


#resultsec .flex { align-items: center; justify-content: center;}
#resultsec .txt_area .flex{justify-content: flex-start;}
.result_list {width: 55%; margin-right: 5%;}
.result_list li { font-size: 1.5rem; width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
.result_list li:not(:last-of-type) { margin-bottom: 0.8em;}
.result_list li .num { display: flex; align-items: center; justify-content: center; width: 1.6em; aspect-ratio: 1 / 1; line-height: 1; background: rgb(223,23,93); background: linear-gradient(135deg, rgba(223,23,93,1) 50%, rgba(203,6,75,1) 50%); color: #fff;}
.result_list li .txt { max-width: calc( 100% - 1.6em - 0.5em ); margin-left: 0.5em;}
#resultsec .img_area { width: 40%; max-width: 300px;}
.result_list.provisional{max-width:300px;margin: 0 auto;}
.result_list.provisional li{background: rgba(203,6,75,0.15);padding: 0.25em;}
.flex.resultset{align-items: center;justify-content: center;flex-direction: row-reverse;}
.resultset .imgArea{width: 40%; max-width: 300px;}
.resultset .txt_area{width: 60%;max-width: 400px;}
.resultset .txt_area li:not(:last-of-type){margin-bottom: 1em;}
.resultset .icon_area{width: 80px;height: 80px;margin-right: 20px;}
.resultset .icon_area img{object-fit: contain;width: 100%;height: 100%;}
.resultset .manzokudo dt{background: none;border: none;margin: 0 0.25em 0 0;padding: 0;text-align: left;font-size: 2rem;color: #333;line-height: 1;font-weight: bold;}
.resultset .manzokudo dd{font-size: 2.5rem;font-weight: bold;}
.resultset .co01{background: linear-gradient(transparent 80%, #ffdc00 80%);}

.comparison_table { max-width: 840px; margin: 50px auto auto;}
.comparison_table h3 { font-weight: bold; background: #cb064b; text-align: center; color: #fff; font-size: 1.25rem; padding: 0.3em;}
.comparison_table table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; background: #efefef;}
.comparison_table table th, .comparison_table table td { padding: 20px;}
.comparison_table table thead th { text-align: center; background: rgba(203,6,75,0.2);}
.comparison_table table thead th.aviva { font-weight: bold; font-size: 130%; color: #cb064b;}
.comparison_table table tbody tr:nth-of-type(odd) { background: #f7f7f7;}
.comparison_table table tbody th { text-align: left; background: rgba(255,255,255,0.6); font-size: 130%;}
.comparison_table table tbody td { text-align: center; font-size: 3rem; background: rgba(255,255,255,0.6);}
.comparison_table table tbody td .mono { font-family: ui-monospace;}
.comparison_table table tbody td.aviva { font-size: 3.25rem;background: rgba(203,6,75,0.1);}


#charmArea { background: #f0f0f0;}
#charmArea .inner { background: #fff; padding:50px; max-width:1100px; margin-bottom: 30px;}
.charm_list li { width: 48%; margin-top:50px;}
.charm_list li:nth-of-type(-n+2) { margin-top: 0;}
.charm_list dt { background: rgba(203,6,75,0.10);text-align: center;border-bottom: 2px #CB064B solid;margin-bottom: 15px;font-size:1.7rem;padding:12px 0 10px;color: #676767;font-weight: 600;}
.charm_list dd .txt_area { width:55%;font-size:1.2rem;line-height: 1.8;}
.charm_list dd .img_area { width: 40%;}
.charm_list.flex { justify-content: space-between;}
.charm_list dd { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}



#instructorArea .sh3 { margin-top: 50px;}
#instructorArea .manager { flex-direction: row-reverse; justify-content: space-between;}
#instructorArea .manager .txt_area { width: calc( 75% - 4em ); min-width: calc( 100% - 300px - 4em );}
#instructorArea .manager .txt_area h4 { font-size: 1.25rem; border-bottom: solid 1px #ccc; padding-bottom: 0.5em; margin-bottom: 0.8em;}
#instructorArea .manager .txt_area p { line-height: 2;}
#instructorArea .manager .img_area { width: 25%; max-width: 300px; margin-bottom: auto; box-shadow: -40px 40px 0 rgba(203,6,75,0.10);}
#instructorArea .w100 { width: 94vw; margin: auto;}
#instructorArea .w100 .sh3 { margin: 80px auto; position: relative;}
#instructorArea .w100 .sh3::after { content: ""; display: block; width: 0; height: 0; position: absolute; top: 120%; left: 50%; transform: translateX( -50% ); border: solid 80px transparent; border-top: solid 40px #fae5ec;}
.instructorList { text-align: center;}
#instructorArea h3.instructor_name { font-size: 1.5rem; margin-bottom: 0.5em;}
#instructorArea .career { display: inline-block;}
.instructorList li { padding-bottom: 1em; margin-right: 2em;}
.instructorList li:last-of-type { margin-right: 0;}
.instructorList p { text-align: left;white-space: normal;}
.right{text-align:right;}
#instructorArea .sh3 .course_memo{display: block;line-height: 1.2;font-size: 15px;}


#voiceArea { background: #f0f0f0;}
#voiceArea .w100 { width: 94vw; margin: auto; max-width: unset; padding: 0;}
.voiceList {overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; display: flex; flex-wrap: nowrap;}
.voiceList li { white-space: normal; text-align: left; flex-shrink: 0; max-width: calc( 33% - 2em ); width: 400px; display: block;background: #fff; padding: 1.5em; margin-right: 2em; vertical-align: top; padding-bottom: 1em;}
.voiceList .slick-dots{margin-top: 1em;}
.voiceList .slick-dots li{background:none;}
.voiceList li:last-of-type { margin-right: 0;}
.voiceList .img_box { text-align: center; margin-bottom: 1em;}
.voiceList .course { padding-bottom: 0.5em; border-bottom: dotted 1px currentColor; margin-bottom: 0.8em;}
.voiceList h4 { font-weight: bold; color: #cb064b; margin-bottom: 0.5em;}
.voiceList .c_mrk { background: linear-gradient(transparent 70%, yellow 0%);}



@media (max-width: 1099px){
	.subNavi.noPC { display: flex;}
	#topvisual > ul { justify-content: center;}
	#topvisual > ul li, #topvisual > ul li:first-of-type, #topvisual > ul li:last-of-type { width: calc( 25% - 6vw ); margin: 0 2vw;}
	#topvisual > ul li img { width: auto; max-width: 100%; margin-bottom: 10px;}
	.voiceList li { max-width: 300px; width: 80%;}
}

@media (max-width: 999px){
	#topvisual > ul li p { font-size: 1.5rem;}
	.result_list { width:62%;margin-right: 3%;}
	#resultsec .img_area{width: 35%;}
	.charm_list dt { font-size: 1.5rem; padding: 0.2em 0.2em 0;}
}

@media (max-width: 899px){
	#topvisual ul.slick-dots { top: unset; left: unset; bottom: unset;}
}

@media (max-width: 799px){
	#topvisual > ul { margin: 4vw auto;}
	#topvisual .lesson_info { margin-bottom: 4vw;}
	.comparison_table { margin-top: 4vw;}
	.comparison_table table th, .comparison_table table td { padding: 10px;}
	.comparison_table table tbody td { font-size: 2rem; line-height: 1;}
	.comparison_table table tbody td.aviva { font-size: 2.5rem;}
	#charmArea .inner { padding: 4vw;}
	.charm_list li { width: 100%;}
	.charm_list li, .charm_list li:nth-of-type(-n+2) { margin-top: 4vw;}
	.charm_list dt { font-size: 1.25rem;}
	#instructorArea .manager .txt_area { width: 100%; order: 2;}
	#instructorArea .manager .img_area { width: 50%; order: 1; margin: auto auto 1em; box-shadow: -10vw 10vw 0 rgba(203,6,75,.05);}
	#resultsec .flex.resultset{justify-content: space-between;}
}

@media (max-width: 699px){
	.cta ul.flex { justify-content: space-between; padding: 0 4vw;}
	.cta ul.flex li { margin: 0; width: calc( 50% - 0.5em );}
	#topvisual > ul li img { margin-bottom: 0;}
	#topvisual > ul li p { font-size: 1.25rem;}
	#topvisual .lesson_info dd { font-size: 1.125rem;}
	.result_list li { font-size: 1.25rem;}
	.comparison_table table tbody th { font-size: 1rem;}
	.resultset .manzokudo dd{font-size:5.8vw;line-height: 1.4;}
	.resultset .manzokudo dt{font-size: 4.8vw;}
	.resultset .icon_area{ width:11vw;height:11vw;margin-right: 10px;}
}

@media (max-width: 599px){
	.sp { display:block;}
	.pc { display:none;}
	#topvisual > ul li, #topvisual > ul li:first-of-type, #topvisual > ul li:last-of-type { font-size: 16px;}
	#topvisual > ul li p { font-size: 1rem;}
	.result_list li { font-size: 1.125rem;}
	.comparison_table table tbody td { font-size: 1.5rem;}
	.comparison_table table tbody td.aviva { font-size: 1.875rem;}
	.courseList dt.cateName{padding: 10px 35px 10px 10px;}
	.courseList .inrList li{padding: 10px 25px 10px 10px;}
	.open .courseList .subCate.acToggle{padding: 10px 0 8px;}
	.courseList .inrList.inbox li li{padding: 10px 0 10px 10px;}
	#pickupArea ul.pickupBox > li dl.pickupList > dt{height: 60px;}
	#instructorArea .sh3 .course_memo{font-size: 14px;}
	#instructorArea .sh3{font-size: 1.25rem;}
	.resultset .txt_area li:not(:last-of-type){margin-bottom: 0.5em;}
}

@media (max-width: 499px){
	#topvisual > ul li, #topvisual > ul li:first-of-type, #topvisual > ul li:last-of-type { width: calc( 25% - 10px ); margin: 0 5px;}
	.comparison_table table th, .comparison_table table td { padding: 5px;}
	.comparison_table table thead th, .comparison_table table tbody th { font-size: 0.875rem;}
	.comparison_table table tbody td { font-size: 1rem;}
	.comparison_table table thead th.aviva, .comparison_table table tbody td.aviva { font-size: 1.125rem;}
	.comparison_table table tbody th .dib { display: inline;}
	.charm_list dt { font-size: 1.1rem;}
	#resultsec .flex{justify-content: inherit;}
}

@media (max-width: 399px){
	.cta ul.flex li { margin: 0.5em auto; width: 200px;}
	#topvisual > ul li p { font-size: 0.85rem;}
	#topvisual .lesson_info { padding: 1em; border-width: 4px;}
	#topvisual .lesson_info dd { font-size: 1rem;}
	.result_list { width: 100%; max-width: unset;}
	.result_list li .txt .dib { display: inline;}
	.result_list.provisional{max-width:280px;}
	#resultsec .img_area { width: 60%; margin-top: 1em;}
	.comparison_table table thead th.aviva, .comparison_table table thead th, .comparison_table table tbody th { font-size: 0.7rem;}
	.charm_list dd .txt_area { font-size: 0.85rem;}
}




#topvisual .main_visual { position: relative;}
#topvisual .main_visual .txt_area .catchcopy { position: absolute; top: 25%; left: calc( 50% - 400px ); max-width: 15em; text-align: left; font-size: 30px; color: #fff; font-weight: bold; line-height: 1.4; text-shadow: 0 0 0.7em black; font-family: serif; font-weight: bold;}
#topvisual .main_visual .txt_area .catchcopy em { font-weight: bold; font-size: 200%;}
#topvisual .main_visual .txt_area h1 { top: calc( 25% + 150px ); left: calc( 50% - 680px ); position: absolute; max-width: 8em; text-align: left; letter-spacing: -0.05em; font-size: 120px; font-family: 'Arial',sans-serif; color: #fff; line-height: 1; font-weight: bold; text-shadow: 0 0 0.2em black;}
#topvisual .main_visual .txt_area h1 .area_name { font-family: 'メイリオ', Meiryo,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;}

#about_cloudschool { background: #f0f0f0;}
#about_cloudschool .sh3 { text-align: center; font-size: clamp( 1.25rem, 3vw, 2rem ); margin: 50px auto; font-weight: bold; color: #565656;}
#about_cloudschool .support_image { background: #fff; position: relative; text-align: center; margin-bottom: clamp( 1.5em, 4vw, 3em );}
#about_cloudschool .support_image img { margin-bottom: -1.5em;}
#about_cloudschool .support_image figcaption { color: #fff; display: inline-block; font-weight: bold; line-height: 1; padding: 0.5em 0.8em;}
#about_cloudschool .support_image .customer_position { position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% ); max-width: 48%;}
#about_cloudschool .support_image .customer_position figcaption { background: #ec4780; font-size: 150%;}
#about_cloudschool .aviva_position ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
#about_cloudschool .aviva_position ul li { max-width: 28%; position: relative;}
#about_cloudschool .aviva_position01 { margin: 0 10% auto 0;}
#about_cloudschool .aviva_position02 { margin: 0 0 auto 10%;}
#about_cloudschool .aviva_position03 { margin: auto 10% 0 0;}
#about_cloudschool .aviva_position04 { margin: auto 0 0 10%;}
#about_cloudschool .aviva_position ul li::before { content: "●●●●●"; letter-spacing: 0.3em; color: rgba(236,71,128,0.4); position: absolute;}
#about_cloudschool .aviva_position01::before { right: -3em; top: 50%; transform: rotate( 15deg );}
#about_cloudschool .aviva_position02::before { left: -3em; top: 50%; transform: rotate( -15deg );}
#about_cloudschool .aviva_position03::before { right: -3em; bottom: 50%; transform: rotate( -15deg );}
#about_cloudschool .aviva_position04::before { left: -3em; bottom: 50%; transform: rotate( 15deg );}
#about_cloudschool .aviva_position img { display: block; margin: auto auto -1.5em; border-radius: 50%;}
#about_cloudschool .aviva_position figcaption { background: #ffe6ee; color: #e4296a;}

#about_cloudschool .cloudschool_features li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#about_cloudschool .cloudschool_features li:nth-of-type(even) { flex-direction: row-reverse;}
#about_cloudschool .cloudschool_features li .img_area { width: 35%;}
#about_cloudschool .cloudschool_features li .txt_area { width: calc( 65% - 2em ); margin: 1.5em 0; padding: 1.5em 2em; background: #fff; border-radius: 2em; position: relative;}
#about_cloudschool .cloudschool_features li .txt_area::after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 1.5em 3em 0.5em; position: absolute; bottom: 2em;}
#about_cloudschool .cloudschool_features li:nth-of-type(odd) .txt_area::after { right: 100%; border-color: transparent #fff transparent transparent;}
#about_cloudschool .cloudschool_features li:nth-of-type(even) .txt_area::after { left: 100%; border-color: transparent transparent transparent #fff;}
#about_cloudschool .cloudschool_features li .txt_area p { font-weight: bold; font-size: 120%; color: #333;}
#about_cloudschool .cloudschool_features li .txt_area p .c_mrk { background: linear-gradient(transparent 70%, yellow 0%);}

.lesson_info { width: 94vw; max-width: 540px; margin: 50px auto 50px; text-align: left; border: double 7px #efefef; padding: 1.5em;}
.lesson_info dt { font-weight: bold; font-size: 0.875rem;}
.lesson_info dt:not(:first-of-type) { margin-top: 0.8em;}
.lesson_info dt::before { content: "\025a0"; margin-right: 0.3em; color: #cb064b;}
.lesson_info dd { font-size: 1.25rem; padding-left: 1rem;}

.about_fit-lesson h3 + p { text-align: center; font-size: 120%; margin-bottom: 1em;}
.fit-lesson_chart { margin: 2em auto 1em;}
.fit-lesson_chart table { width: 100%; table-layout: fixed;}
.fit-lesson_chart table th, .fit-lesson_chart table td { padding: 0.8em; border: solid 1px #999; vertical-align: top;}
.fit-lesson_chart thead th { text-align: center; font-weight: bold; background: #555; color: #fff;}
.fit-lesson_chart tbody th { font-weight: bold; background: #ddd;}
.fit-lesson_chart td { text-align: center; background: #fff;}
.fit-lesson_chart td .img_area img { display: inline-block; width: 80%; border-radius: 50%; margin-bottom: 0.8em;}
.fit-lesson_chart td .txt_area { text-align: left;}
.fit-lesson_chart br.sp { display: none;}
.fit-lesson_chart table tbody tr:not(:last-of-type) td{vertical-align: middle;}

@media(max-width: 1699px) {
	#topvisual .main_visual .txt_area .catchcopy { left: 27%; font-size: clamp( 10px, 1.75vw, 30px );}
	#topvisual .main_visual .txt_area h1 { left: 11%; top: calc( 25% + 10vw ); font-size: clamp( 40px, 8vw, 120px );}
}

@media(max-width: 800px) {
	#about_cloudschool .support_image figure { margin: 3vw;}
	#about_cloudschool .support_image .customer_position { max-width: unset;}
	#about_cloudschool .support_image .customer_position img { max-width: 60vw;}
	#about_cloudschool .aviva_position ul li { max-width: 35%;}
	#about_cloudschool .aviva_position01 { margin: 0 auto 15vw 0;}
	#about_cloudschool .aviva_position02 { margin: 0 0 15vw auto;}
	#about_cloudschool .aviva_position03 { margin: 15vw auto 0 0;}
	#about_cloudschool .aviva_position04 { margin: 15vw 0 0 auto;}
	#about_cloudschool .aviva_position01::before { right: -1em; top: 75%; transform: rotate( 45deg );}
	#about_cloudschool .aviva_position02::before { left: -1em; top: 75%; transform: rotate( -45deg );}
	#about_cloudschool .aviva_position03::before { right: -1em; bottom: 75%; transform: rotate( -45deg );}
	#about_cloudschool .aviva_position04::before { left: -1em; bottom: 75%; transform: rotate( 45deg );}
}

@media(max-width: 600px) {
	#about_cloudschool .aviva_position ul li::before { display: none;}
	#about_cloudschool .cloudschool_features li { padding: clamp( 0.8em, 3vw, 1.5em ); background: #fff; margin-bottom: 1em;}
	#about_cloudschool .cloudschool_features li .img_area { width: 70%; text-align: center; margin: auto;}
	#about_cloudschool .cloudschool_features li .txt_area { width: 100%; margin: 0.8em 0 0; padding: 0; background: none; position: static;}
	#about_cloudschool .cloudschool_features li .txt_area::after { display: none;}
	.lesson_info dd { font-size: 1.125rem;}
	.fit-lesson_chart { overflow-x: scroll;}
	.fit-lesson_chart table { white-space: nowrap; table-layout: unset;}
	.fit-lesson_chart table th, .fit-lesson_chart table td { padding: 0.3em;}
	.fit-lesson_chart td .img_area img { width: clamp( 100px, 18vw, 100px ); margin-bottom: 0.3em;}
	.fit-lesson_chart br.sp { display: inline;}
	.fit-lesson_chart thead th.sticky, .fit-lesson_chart tbody th.sticky { position: sticky; top: 0; left: 0; background: none; border: 1px solid transparent;}
	.fit-lesson_chart .sticky::before { content: ""; position: absolute; top: 0; left: 0; width: calc( 100% + 2px ); height: 100%; border: 1px solid #999; box-sizing: content-box; margin-top: -1px; margin-left: -1px; z-index: -1;}
	.fit-lesson_chart thead th::before { background: #555;}
	.fit-lesson_chart tbody th::before { background: #ddd;}
}

@media(max-width: 500px) {
	#topvisual .main_visual .txt_area .catchcopy { left: 0; right: 0; max-width: unset; text-align: center; font-size: clamp( 10px, 4vw, 24px ); line-height: 1.2;}
	#topvisual .main_visual .txt_area h1 { top: unset; bottom: 36%; left: 5%; font-size: 12vw; line-height: 1.2;}
}
@media(max-width: 350px) {
	#about_cloudschool .support_image .customer_position figcaption { font-size: 16px;}
	#about_cloudschool .aviva_position figcaption { font-size: 12px;}
}





#topvisual .main_visual { position: relative;}
#topvisual .main_visual .txt_area { position: absolute; bottom: clamp( 10px, 4vw, 40px ); right: 0; padding: clamp( 10px, 4vw, 40px ) clamp( 20px, 5vw, 60px ); background: rgba(255,166,47,0.6); font-size: clamp( 14px, 2.5vw, 36px );}
#topvisual .main_visual .txt_area h1 { font-size: 220%; color: #fff; line-height: 1.2; letter-spacing: 0.05em; margin-bottom: 0.3em;}
#topvisual .main_visual .txt_area h2 { position: static; font-size: 100%; text-shadow: none; font-weight: normal; letter-spacing: 0.1em;}

#about_cloudschool { background: #f0f0f0;}
#about_cloudschool .sh3 { text-align: center; font-size: clamp( 1.25rem, 3vw, 2rem ); margin: 50px auto; font-weight: bold; color: #565656;}
#about_cloudschool .support_image { background: #fff; position: relative; text-align: center; margin-bottom: clamp( 1.5em, 4vw, 3em );}
#about_cloudschool .support_image img { margin-bottom: -1.5em;}
#about_cloudschool .support_image figcaption { color: #fff; display: inline-block; font-weight: bold; line-height: 1; padding: 0.5em 0.8em;}
#about_cloudschool .support_image .customer_position { position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% ); max-width: 48%;}
#about_cloudschool .support_image .customer_position figcaption { background: #ec4780; font-size: 150%;}
#about_cloudschool .aviva_position ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
#about_cloudschool .aviva_position ul li { max-width: 28%; position: relative;}
#about_cloudschool .aviva_position01 { margin: 0 10% auto 0;}
#about_cloudschool .aviva_position02 { margin: 0 0 auto 10%;}
#about_cloudschool .aviva_position03 { margin: auto 10% 0 0;}
#about_cloudschool .aviva_position04 { margin: auto 0 0 10%;}
#about_cloudschool .aviva_position ul li::before { content: "●●●●●"; letter-spacing: 0.3em; color: rgba(236,71,128,0.4); position: absolute;}
#about_cloudschool .aviva_position01::before { right: -3em; top: 50%; transform: rotate( 15deg );}
#about_cloudschool .aviva_position02::before { left: -3em; top: 50%; transform: rotate( -15deg );}
#about_cloudschool .aviva_position03::before { right: -3em; bottom: 50%; transform: rotate( -15deg );}
#about_cloudschool .aviva_position04::before { left: -3em; bottom: 50%; transform: rotate( 15deg );}
#about_cloudschool .aviva_position img { display: block; margin: auto auto -1.5em; border-radius: 50%;}
#about_cloudschool .aviva_position figcaption { background: #ffe6ee; color: #e4296a;}

#about_cloudschool .cloudschool_features li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#about_cloudschool .cloudschool_features li:nth-of-type(even) { flex-direction: row-reverse;}
#about_cloudschool .cloudschool_features li .img_area { width: 35%;}
#about_cloudschool .cloudschool_features li .txt_area { width: calc( 65% - 2em ); margin: 1.5em 0; padding: 1.5em 2em; background: #fff; border-radius: 2em; position: relative;}
#about_cloudschool .cloudschool_features li .txt_area::after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 1.5em 3em 0.5em; position: absolute; bottom: 2em;}
#about_cloudschool .cloudschool_features li:nth-of-type(odd) .txt_area::after { right: 100%; border-color: transparent #fff transparent transparent;}
#about_cloudschool .cloudschool_features li:nth-of-type(even) .txt_area::after { left: 100%; border-color: transparent transparent transparent #fff;}
#about_cloudschool .cloudschool_features li .txt_area p { font-weight: bold; font-size: 120%; color: #333;}
#about_cloudschool .cloudschool_features li .txt_area p .c_mrk { background: linear-gradient(transparent 70%, yellow 0%);}

.lesson_info { width: 94vw; max-width: 540px; margin: 50px auto 50px; text-align: left; border: double 7px #efefef; padding: 1.5em;}
.lesson_info dt { font-weight: bold; font-size: 0.875rem;}
.lesson_info dt:not(:first-of-type) { margin-top: 0.8em;}
.lesson_info dt::before { content: "\025a0"; margin-right: 0.3em; color: #cb064b;}
.lesson_info dd { font-size: 1.25rem; padding-left: 1rem;}



@media(min-width: 1720px) {
	#topvisual .main_visual .txt_area { right: calc( 50% - 860px );}
}

@media(max-width: 800px) {
	#about_cloudschool .support_image figure { margin: 3vw;}
	#about_cloudschool .support_image .customer_position { max-width: unset;}
	#about_cloudschool .support_image .customer_position img { max-width: 60vw;}
	#about_cloudschool .aviva_position ul li { max-width: 35%;}
	#about_cloudschool .aviva_position01 { margin: 0 auto 15vw 0;}
	#about_cloudschool .aviva_position02 { margin: 0 0 15vw auto;}
	#about_cloudschool .aviva_position03 { margin: 15vw auto 0 0;}
	#about_cloudschool .aviva_position04 { margin: 15vw 0 0 auto;}
	#about_cloudschool .aviva_position01::before { right: -1em; top: 75%; transform: rotate( 45deg );}
	#about_cloudschool .aviva_position02::before { left: -1em; top: 75%; transform: rotate( -45deg );}
	#about_cloudschool .aviva_position03::before { right: -1em; bottom: 75%; transform: rotate( -45deg );}
	#about_cloudschool .aviva_position04::before { left: -1em; bottom: 75%; transform: rotate( 45deg );}
}

@media(max-width: 600px) {
	#about_cloudschool .aviva_position ul li::before { display: none;}
	#about_cloudschool .cloudschool_features li { padding: clamp( 0.8em, 3vw, 1.5em ); background: #fff; margin-bottom: 1em;}
	#about_cloudschool .cloudschool_features li .img_area { width: 70%; text-align: center; margin: auto;}
	#about_cloudschool .cloudschool_features li .txt_area { width: 100%; margin: 0.8em 0 0; padding: 0; background: none; position: static;}
	#about_cloudschool .cloudschool_features li .txt_area::after { display: none;}
	.lesson_info dd { font-size: 1.125rem;}
}

@media(max-width: 500px) {
	#topvisual .main_visual .txt_area { font-size: clamp( 14px, 5vw, 24px ); left: 0;}
	#topvisual .main_visual .txt_area h1, #topvisual .main_visual .txt_area h2 { text-shadow: 0 0 0.3em #8a581c;}
	#topvisual .main_visual .txt_area h1 { text-align: left; font-size: 250%; letter-spacing: 0;}
}
@media(max-width: 350px) {
	#topvisual .main_visual .txt_area h2 { letter-spacing: 0;}
	#about_cloudschool .support_image .customer_position figcaption { font-size: 16px;}
	#about_cloudschool .aviva_position figcaption { font-size: 12px;}
}