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

.flex_center { display: flex; flex-wrap: wrap; justify-content: center;}
.flex_between { display: flex; flex-wrap: wrap; justify-content: space-between;}
.txt_center { text-align: center;}
.large { font-size: 130%;}
.bullet { position: relative; padding-left: 1.3em;}
.bullet::after { content: "・"; position: absolute; left: 0; top: 0;}

#topvisual { background: url(../images/bg_topvisual.jpg) center top no-repeat; background-size: cover; height: 35vw; padding: 3vw; position: relative;}
#topvisual h1 {font-weight: bold; font-size: 6vw;text-shadow: 0 0 0.05em #fff, 0 0 0.5em #e6f2fb;text-align: center;line-height: 1;color: #121212;}
#topvisual .catch{text-align: center;color: #fff;font-size: 2.5vw;letter-spacing: 2px;text-shadow: 0 0 0.05em #222, 0 0 0.5em #222;font-weight: bold; }
.bg_gradient { background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5032387955182073) 15%, rgba(255,255,255,1) 30%); position: relative; margin-top: -12vw; padding-top: 12vw; padding-bottom: 0;}
#topvisual ul li:first-of-type, #topvisual ul li:last-of-type{width: 24%;}
#topvisual ul li{position:relative;width: 24%;text-align: center;font-size: 1.9vw;border:none;}
#topvisual ul li:after{content:"";border: 1px #fff solid;width: 100%;height: 100%;display: block;position: absolute;top: 2px;left: 2px;}
#topvisual ul li:last-of-type{top: inherit;left: inherit;}
#topvisual ul {display: flex;justify-content: space-between;flex-wrap: wrap;margin: 0 auto;top: inherit;left: 0;right: 0;width: 90vw;bottom: 3vw;}
.list_rcmd { width: 92vw; max-width: 540px; margin: auto; font-size: 1.25rem;}
.list_rcmd li { position: relative; padding-left: 1.3em;}
.list_rcmd li::before, .list_rcmd li::after { content: ""; position: absolute; left: 0; top: 0;}
.list_rcmd li::before { content: "\025a1";}
.list_rcmd li::after { content: "\02713";}
.sec_courseOutline .ah1 { font-size: 4rem; text-align: center; font-weight: bold; line-height: 1; margin-bottom: 3rem; background: #cb064b; color: #fff; padding: 0.5em;}
.sec_courseOutline .ah1 span { font-size: 60%;}
.sec_courseOutline ul.flex_between > li { width: calc( ( 100% - 8em ) / 5 );}
.sec_courseOutline ul.flex_between > li dt { font-weight: bold; aspect-ratio: 1 / 1; border-radius: 5%; margin-bottom: 0.6em; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; padding: 0.8em 0.1em 0.6em; line-height: 1.2;}
.app_sheets dt { color: #719032; background: #ebf1de url(../images/app_sheets_icon.png) no-repeat center top 1.2em; background-size: 60%;}
.app_drive dt { color: #25829a; background: #dbeef4 url(../images/app_drive_icon.png) no-repeat center top 1.2em; background-size: 60%;}
.app_slide dt { color: #c4681b; background: #fdeada url(../images/app_slide_icon.png) no-repeat center top 1.2em; background-size: 60%;}
.app_form dt { color: #593e7a; background: #e6e0ec url(../images/app_form_icon.png) no-repeat center top 1.2em; background-size: 60%;}
.app_document dt { color: #295a93; background: #dce6f2 url(../images/app_document_icon.png) no-repeat center top 1.2em; background-size: 60%;}

#box01 .flex_between .img_area{width: 40%;}
#box01 .flex_between .txt_area{width: 55%;}
#box01 .flex_between{flex-direction: row-reverse;align-items: center;margin-bottom: 3em;}
#box01 h3{font-size: 1.8rem;font-weight: bold;margin-bottom: 0.5em;line-height: 1.4;}
#box01 .img_area p{text-align: center;font-size: 110%;line-height: 1.3;}
#box01 .img_area .txt_s{font-size:80%;}
#box01 .img_set h3{text-align: center;}

#box02 .step_list{}
#box02 .step_list li{flex-direction: row-reverse;;align-items: center;}
#box02 .step_list li:not(:last-of-type){margin-bottom: 3em;}
#box02 .flex_between .img_area{width: 30%;}
#box02 .flex_between .txt_area{width: 65%;}
#box02 .step_list li:first-of-type img{border: 1px #ccc solid;}
#box02 .step_list li h3{font-size: 1.7rem;background: #006cb8;color: #fff;margin-bottom: 0.75em;padding: 0.25em 0.5em;line-height: 1.4;}
#box02 .step{padding-right: 0.5em;border-right: 1px #fff solid;margin-right: 0.5em;font-weight: bold;color: #fff462;}

.txt_area p:not(:first-of-type){margin-top: 0.75em;}
.txt_b{font-weight: bold;}
.note{font-size: 90%;padding-left: 1em;text-indent: -1em;display: block;}

@media (max-width: 1099px){
	.sec_courseOutline .ah1 { font-size: 4rem;}
	.sec_textbook .txt_area .large { font-size: 1.5rem;}
	#box02 .step_list li h3{font-size: 1.2rem;display: flex;}
	#box02 .step{display: block;width: 4em;display: flex;align-items: center;}
}

@media (max-width: 999px){
	.sec_courseOutline .ah1 { font-size: 6vw;}
	.sec_courseOutline ul.flex_between { max-width: 800px; margin: auto;}
	.sec_courseOutline ul.flex_between > li { width: 100%; margin: 0 auto 2em;}
	.sec_courseOutline ul.flex_between > li dl { display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row-reverse; align-items: center;}
	.sec_courseOutline ul.flex_between > li dt { width: 30%; font-size: 2.5vw;}
	.sec_courseOutline ul.flex_between > li dd { width: calc( 70% - 2em ); font-size: 1.25rem;}
	.sec_textbook .textbook_features { max-width: 800px; margin: auto;}
	.sec_textbook .textbook_features > li { width: 100%; margin: 2em auto 0; align-items: center; justify-content: space-between;}
	.sec_textbook .feature01 .img_area, .sec_textbook .feature02 .img_area, .sec_textbook .feature03 .img_area { width: 30%; border-radius: 50%;}
	.sec_textbook .txt_area { width: calc( 70% - 2em ); font-size: 1.25rem;}
}

@media (max-width: 899px){
	#box01 h3, #box02 .step_list li h3{font-size: 1.2rem;}
	#box01 h3{text-align: center;}
}

@media (max-width: 599px){
	#topvisual { background: url(../images/bg_topvisual_smt.jpg) center center no-repeat; background-size: cover; aspect-ratio: 16 / 15; height: auto;margin-bottom: 20vw;}
	#topvisual h1 {position: absolute;top: 34%;color: #fff; transform: none; bottom: 0; left: 0; max-width: 100%; font-size: 11vw; padding: 0.5em 0.5em 2em; line-height: 1.2;text-shadow: 0 0 0.3em #222;}
	#topvisual .catch{font-size: 5vw;letter-spacing: 1px;text-align: left;position: absolute;top: 32%;}
	.bg_gradient { margin-top: -20vw; padding-top: 10vw;}
	.sec_courseOutline .ah1 { font-size: 7vw;}
	.sec_textbook .secttl + p { background: #cb064b; color: #fff; font-size: 1.25rem;}
	#topvisual ul li:first-of-type, #topvisual ul li:last-of-type, #topvisual ul li{width: 49%;margin-bottom: 0.5em;}
	#topvisual ul li{font-size: 4vw;background: #CB064B;color: #fff;}
	#topvisual ul{width: 94vw;bottom: -20vw;}
	#box01 .flex_between .txt_area, #box01 .flex_between .img_area, #box02 .flex_between .txt_area, #box02 .flex_between .img_area{width:100%;}
	#box01 .flex_between:first-of-type .img_area{max-width: 350px;margin: 0 auto;}
	#box01 .flex_between .txt_area{margin-bottom: 1.5em;}
	#box02 .flex_between .img_area{width: 80%;margin: 1em auto 0;}
	#topvisual ul li:after{content:inherit;}
}

@media (max-width: 499px){
	.sec_courseOutline ul.flex_between > li dt { width: 40%; font-size: 3.5vw;}
	.sec_courseOutline ul.flex_between > li dd { font-size: 1.125rem; width: calc( 60% - 1.5em );}
	.sec_textbook .txt_area { font-size: 1rem; width: calc( 60% - 1.5em );}
	.sec_textbook .feature01 .img_area, .sec_textbook .feature02 .img_area, .sec_textbook .feature03 .img_area { width: 40%;}
}

@media (max-width: 399px){
	.secttl {font-size: 1.125rem; letter-spacing: -0.05em;}
	.sec_courseOutline ul.flex_between > li dd { font-size: 1rem;}
	.sec_textbook .txt_area { font-size: 0.875rem;}
	.sec_textbook .txt_area .large { font-size: 1.125rem;}
	#box01 h3, #box02 .step_list li h3{font-size: 1rem;}
}



.course_detail {
	margin-bottom: 40px;
	padding: 50px;
	background: #eaf8ed;
}

#course04 h3 {
	background: #30bb54 url(/lp/excel/images/add210203/icon_course04.png) no-repeat center right 80% / 90px;
}

.course_detail h3 span {
	font-size: 70%;
	display: block;
	text-align: center;
	font-weight: normal;
	margin-top: 10px;
}
.course_detail h3 span.dib{
    font-size: 100%;
    font-weight: bold;
    margin-top: 0;
}

.course_detail .offer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	background: #666;
	padding: 2px;
	align-items: center;
	margin: 0 auto 20px;
}

.course_detail .offer dt {
	width: 200px;
	text-align: center;
	color: #fff;
	font-weight: bold;
}

#course04 .offer dt { color: #7cdf95;}
#course03 .offer dt { color: #f99e78;}
#course02 .offer dt { color: #d7dcef;}

.course_detail .offer dd {
	background: #fff;
	padding: 20px 30px;
	width: calc( 100% - 200px );
	margin: auto;
}

.course_detail .offer dd li{
	padding-left: 1.3em;
	text-indent: -1.3em;
	font-weight: bold;
}

.course_detail .offer dd li:not(:last-of-type){
	margin-bottom: 0.5em;
}

.course_outline{
    margin-bottom: 1em;
}

.course_detail .offer dd li:before{
	/*content: "\2611";*/
	margin-right: 0.3em;
	font-family: "FAregular";
	content: '\f14a';
	font-weight: 400;
}
.course_detail .example1 {
	padding: 30px;
	margin-bottom: 30px;
	border: 3px #fff solid;
}

#course04 .example1 { background: rgb( 48 187 84 / 10% );}
#course03 .example1 { background: #fbdac8;}
#course02 .example1 { background: #d7dcef;}

.course_detail .example1 dt, .course_detail .example1 dd {
	margin: 0;
}

.course_detail .example1 dt {
	font-weight: bold;
	margin-bottom: 0.5em;
}

.course_detail .example1 dt:before { content: "＜";}
.course_detail .example1 dt:after { content: "＞";}

.course_detail .example2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.course_detail .example2 > li {
	width: calc( ( 100% - 80px ) / 3 );
}

.course_detail .example2 .img_area {
	background: #fff; 
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	position: relative;
	overflow: hidden;
	margin-bottom: 0.5em;
}

#course02.course_detail .example2 .img_area {
    min-height: 180px;
    aspect-ratio: unset;
}

.course_detail .example2 .img_area img {
	width: 100%;
	position: absolute;
  top: 50%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
}

.course_detail .example2 .txt_area {
	margin: 0;
}

.course_detail .example2 .txt_area dt {
	font-weight: bold;
	font-size: 18px;
	color: #30bb54;
}

#course04.course_detail .example2 .txt_area dt {color: #30bb54;}
#course03.course_detail .example2 .txt_area dt {color: #de5d24;}
#course02.course_detail .example2 .txt_area dt {color: #3142ad;}


.course_detail h3 {
    color: #fff;
    padding: 30px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 30px;
}

#course03{background: #ffebe2;}
#course02{background: #eef0ff;}

#course04 h3 {
    background: #30bb54 url(/lp/excel/images/add210203/icon_course04.png) no-repeat center right 80% / 90px;
}
#course03 h3 {
    background: #de5d24 url(../images/icon_course_pp.png) no-repeat center right 80% / 90px;
}
#course02 h3 {
    background: #3142ad url(../images/icon_course_wo.png) no-repeat center right 80% / 90px;
}

.course_detail h4{
    text-align: center;
    margin-bottom: 20px;
    color: #fff;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
}

#course04.course_detail h4{
    background: rgb( 48 187 84 / 60% );
}
#course03.course_detail h4{
    background:#f99e78;
}
#course02.course_detail h4{
    background:#777eca;
}



@media (max-width: 799px){
	.course_detail { padding: 5vw;}
	.course_detail h3, .study_style h3 { font-size: 24px;}
	.course_detail .offer dt { width: 100%;padding: 0.25em;}
	.course_detail .offer dd { width: 100%; padding: 20px;}
	.course_detail .example2 > li { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;align-items: center;}
	.course_detail .example2 > li:not(:last-of-type) { margin-bottom: 20px;}
	.course_detail .example2 > li .img_area { width: 30vw;padding: 2px;}
	.course_detail .example2 > li .txt_area { width: calc( 100% - 30vw - 30px );}
	.course_detail .example2 .img_area { aspect-ratio: unset; position: static;}
	.course_detail .example2 .img_area img { position: static; transform: none;}
	#course02.course_detail .example2 .img_area {min-height: inherit;}
}
@media (max-width: 499px){
	.course_detail .example1{padding: 15px;}
	.course_detail .example2 .img_area{height: auto;overflow: inherit;}
	.course_detail .example2 .img_area img{position: static;-webkit-transform:inherit;transform: inherit;}
	.course_detail h3{padding:3.5vw  2.5vw;}

}
@media (max-width: 399px){
	.course_detail .example2 > li .img_area { width: 95%;margin:0 auto 0.5em;}
	.course_detail .example2 > li .txt_area { width: 100%;}
	.course_detail h3, .study_style h3{font-size: 22px;margin-bottom: 15px;}
	.course_detail{padding: 3vw;}

}


section.contact * { text-align: center;}

section.contact .btn_set {
	grid-gap: 10px 3vw;
	justify-content: center;
	margin-block: 2em;
}

section.contact .btn {
	text-align: center;
	cursor: pointer;
	display: block;
	-webkit-transition: all .3s;
	transition: all .3s;
	border-radius: 5px;
	line-height: 1;
	max-width: 400px;
	width: 100%;
	padding: 1em;
	letter-spacing: .2em;
	font-size: 17px
}

section.contact .btn--request {
	border-bottom: 2px solid #09807c;
	background-color: #12b5b0;
	color: #fff;
}

section.contact .btn--reserve {
	border-bottom: 2px solid #a80057;
	background-color: #e6006f;
	color: #fff;
}

@-webkit-keyframes shine {
100% {left:100%}
}
@keyframes shine {
100% {left:100%}
}

@media (min-width:769px) {
	section.contact .btn--request:hover { background-color: #14c8c2}
	section.contact .btn--reserve:hover { background-color: #ff1083}
	section.contact .btn--contact { display: inline-block; width: 280px; padding: 15px 0; letter-spacing: .1em; font-size: 22px}
	section.contact .shine { position: relative; overflow: hidden}
	section.contact .shine::before { position: absolute; z-index: 1; top: 0; left: -55%; width: 50%; height: 100%; content: ''; -webkit-transform: skewX(-25deg); transform: skewX(-25deg); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0, rgba(255,255,255,.3) 100%)}
	section.contact .shine:hover::before { -webkit-animation: shine .7s; animation: shine .7s}
}