@charset "utf-8";

#cls * {box-sizing: border-box;}

.cls-fix {background: #1A8FF9; position: sticky; top: 0; z-index: 1; cursor: pointer;}
.cls-fix .container {display: flex; align-items: center; justify-content: center;}
.cls-fix img {display: block; height: 3rem; flex-shrink: 0;}
.cls-fix p {color: #fff; font-weight: 500; padding: 0 1rem;}
.cls-fix span {height: 1.75rem; padding: 0 1rem; flex-shrink: 0; background: #000; color: #fff; font-size: 0.875rem; border-radius: 0.25rem; display: flex; align-items: center; justify-content: center;}

.cls-top {padding-top: 4rem; background: linear-gradient(to top, #FFF179 0%, #FFF6A5 100%);}
.cls-top .container {display: flex; flex-direction: column; align-items: center;}
.cls-top strong {border: solid 1px #000; border-radius: 10rem; font-size: 0.875rem; font-weight: 400; padding: 0.5rem 1.25rem; display: flex; align-items: center; justify-content: center;}
.cls-top h3 {margin-top: 1.5rem; font-size: 4rem; font-weight: 800; line-height: 1.0; text-align: center;}
.cls-top h3 span {color: #1A8FF9;}
.cls-top p {font-size: 1.375rem; margin-top: 1rem; font-weight: 500; text-align: center;}
.cls-top img {margin-top: 1.5rem; max-width: 65%;}

.cls-step {padding: 2.5rem 0;}
.cls-step__title {padding-top: 5rem; padding-bottom: 2.5rem; display: flex; flex-direction: column; align-items: center;}
.cls-step__title span {width: 8.75rem; height: 3rem; font-size: 1.375rem; font-weight: 600; border-radius: 10rem; display: flex; align-items: center; justify-content: center;}
.cls-step__title.step1 span {background: #D0EFF5; color: #00A0C4;}
.cls-step__title.step2 span {background: #D1F0FF; color: #1A92FF;}
.cls-step__title.step3 span {background: #DDD7FC; color: #614DCC;}
.cls-step__title h5 {font-size: 2.125rem; margin-top: 2rem;}
.cls-step__cont {display: flex;}
.cls-step__cont dt {width: 30%; padding-right: 1.5rem; display: flex; flex-direction: column; align-items: flex-start;}
.cls-step__cont dt ul {width: 100%;}
.cls-step__cont dt ul li {display: flex; padding: 1.5rem; margin-bottom: 0.75rem; background: #F7F8FA; border: solid 1px #E2E8F0; border-radius: 1.25rem; flex-direction: column;}
.cls-step__cont dt ul li:last-child {margin-bottom: 0;}
.cls-step__cont dt ul li span {color: #00A0C4;}
.cls-step__cont dt ul li p {margin-top: 0.375rem;}
.cls-step__cont a {background: #00A0C4; color: #fff; margin-top: 2.5rem; padding: 1.25rem 1.5rem; border-radius: 1.25rem; display: flex; align-items: center; justify-content: center;}
.cls-step__cont dd {width: 72%;}
.cls-step__cont dd img.pc {display: block;}
.cls-step__cont dd img.mo {display: none;}

.cls-cpn {padding: 10rem 0; margin-top: 7.5rem; background: #2B2E33;}
.cls-cpn__wrap {background: url('https://img.megastudyth.com/event/2025/class/deco.png')no-repeat center center / auto 100%;}
.cls-cpn__title {font-size: 2.125rem; text-align: center; color: #fff;}
.cls-cpn__title span {color: #8DC6FF; display: block;}
.cls-cpn__box {position: relative; width: 100%; max-width: 22rem; margin: 2rem auto;}
.cls-cpn__box dd {display: flex; align-items: center; justify-content: center; position: absolute; position: absolute; left: 2%; right: 2%; bottom: 0; height: 25%;}
.cls-cpn__btn {border-radius: 10rem; width: 11.25rem; height: 2.5rem; color: #fff; display: none; align-items: center; justify-content: center;}
.cls-cpn__btn.active {background: #000; display: none;}
.cls-cpn__btn.active.on {display: flex;}
.cls-cpn__btn.disabled {background: #9A9A9A; display: none;}
.cls-cpn__btn.disabled.on {display: flex;}
.cls-cpn__btn.used {background: #005EFF; display: none;}
.cls-cpn__btn.used.on {display: flex;}
.cls-cpn__desc {margin-top: 2.5rem;}
.cls-cpn__desc h5 {text-align: center; font-size: 1rem; color: #B2B2B2; font-weight: 300;}
.cls-cpn__desc ul {display: flex; flex-direction: column; align-items: center; margin-top: 1rem;}
.cls-cpn__desc ul li {color: #B2B2B2; font-size: 0.875rem; font-weight: 200; margin-bottom: 0.25rem;}
.cls-cpn__desc ul li:last-child {margin-bottom: 0;}


@media (max-width:1280px) {
	html {font-size: 14px;}

}

@media (max-width:992px) {
	html {font-size: 12px;}

}

@media (max-width:768px) {
	.cls-fix img {height: 3.5rem;}
	.cls-fix p {font-size: 0.875rem;}
	.cls-fix span {display: none;}
	.cls-top h3 {font-size: 3rem;}
	.cls-top p {font-size: 1rem;}
	.cls-top img {max-width: 100%;}

	.cls-step {padding: 2rem 0;}
	.cls-step__title {padding-top: 2rem; padding-bottom: 2rem;}
	.cls-step__title span {width: 6rem; height: 2rem; font-size: 1rem;}
	.cls-step__title h5 {font-size: 2rem; margin-top: 1rem;}
	.cls-step__cont {flex-direction: column; padding: 0 10%;}
	.cls-step__cont dt {order: 1; width: 100%; padding-right: 0; margin-top: 2rem; align-items: center;}
	.cls-step__cont dt ul li {padding: 1rem; margin-bottom: 0.5rem; border-radius: 1rem; font-size: 0.875rem;}
	.cls-step__cont a {margin-top: 1.5rem; padding: 1rem 2rem; border-radius: 0.75rem;}
	.cls-step__cont dd {order: 0; width: 100%;}
	.cls-step__cont dd img.pc {display: none;}
	.cls-step__cont dd img.mo {display: block; margin: 0 auto;}

	.cls-cpn {padding: 5rem 0; margin-top: 3rem;}
}

@media (max-width:480px) {

}

@media (max-width:320px) {
	html {font-size: 11px;}
}