@charset "utf-8";

/*===========================================================
bogo
===========================================================*/

.en-US .course01-title-box01 {
    flex-direction: column;
}

/*===========================================================
course01
===========================================================*/

.course01 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 13rem 2.5rem 0;
}

.course01-container {
    max-width: 70rem;
    width: 100%;
    margin: 0 auto;
}

.course01-title-area {
    text-align: center;
}

.course01-title-box01 .title01 strong {
	margin: 0;
}

.course01-title-box01 {
    display: flex;
    justify-content: center;
}

.course01-title-box02 {
    margin: 3rem 0 0;
}

.course01-text-box {
    margin: 7rem 0 0;
    text-align: center;
}

/*===========================================================
course02
===========================================================*/

.course02 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 7rem 2.5rem 0;
}

.course02-container {
    max-width: 100rem;
    width: 100%;
    margin: 0 auto;
    padding: 7rem 1rem 8rem;
}

.course02-area {
    max-width: 61rem;
    width: 100%;
    margin: 0 auto;
}

.course02-title-box {
	text-align: center;
}

.course02-price-box {
    margin: 1rem 0 0;
    text-align: center;
}

.price-text {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.course02-text-area {
    margin: 5rem 0 0;
    text-align: center;
}

.course02-text-box {
    margin: 4rem 0 0;
}

.course02-text-box:first-child {
    margin: 0;
}

/*===========================================================
course03
===========================================================*/

.course03 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 12.5rem 2.5rem 0;
}

.course03-main-title-container {
    max-width: 122rem;
    width: 100%;
    margin: 0 auto;
}

.course03-main-title-area {
    max-width: 47.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.course03-main-title-area .title01 strong {
    margin-left: 0;
}

.course03-text {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.course03-frame01 {
    max-width: 167rem;
    width: 100%;
    margin: 2rem 0 0 auto;
	padding: 6rem 0 13rem;
    position: relative;
}

.course03-frame01::before {
    content: "";
    display: block;
    width: 0.1rem;
    height: 100%;
    background: var(--white);
    position: absolute;
    top: 0;
    left: 9.5%;
    margin: auto;
	z-index: -1;
}

.course03-container01 {
    max-width: 141.2rem;
    width: 84.6%;
    margin: 0 0 0 auto;
}

.course03-area01 {
    max-width: 107.2rem;
    width: 76%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.course03-img-set01 {
    max-width: 60rem;
    width: 56%;
}

.course03-img-box01 {
    max-width: 48rem;
    width: 80%;
}

.course03-img-box02 {
    max-width: 48rem;
    width: 80%;
    margin: 3rem 0 0 auto;
}

.course03-img-box03 {
    margin: 0 0 -12rem;
    max-width: 34.2rem;
    width: 32%;
}

.course03-container02 {
    max-width: 149.5rem;
    width: 90%;
    margin: 22rem 0 0 auto;
}

/* .course03-area02 {
    max-width: 84.8rem;
    width: 56.7%;
} */

.course03-area02 {
    max-width: 86.8rem;
    width: 64.3%;
}

.course03-img-box04 {
    max-width: 61rem;
    width: 72%;
}

/* .course03-img-box05 {
    max-width: 31.3rem;
    width: 37%;
    margin: -17rem 0 0 auto;
} */

.course03-img-box05 {
    max-width: 45.3rem;
    width: 52.2%;
    margin: -8rem 0 0 auto;
}


.course03-container03 {
    max-width: 167rem;
    width: 100%;
    margin: 13rem 0 0 auto;
}

.course03-area03 {
    max-width: 129rem;
    width: 78%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.course03-img-box06 {
    max-width: 62rem;
    width: 48.1%;
}

.course03-img-box07 {
    max-width: 52rem;
    width: 41%;
}

.course03-container04 {
    max-width: 143.7rem;
    width: 86.1%;
    margin: 13rem 0 0 auto;
}

.course03-area04 {
    max-width: 115.1rem;
    width: 81%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.course03-text-container {
    max-width: 61rem;
    width: 54%;
	margin: 0 0 6rem;
    padding: 7rem 1rem;
}

.course03-text-area {
	margin: 0 auto;
    max-width: 49.4rem;
    width: 100%;
}

.course-title-area {
    text-align: center;
}

.course-illust-box {
    max-width: 15.6rem;
    width: 100%;
    margin: 0 auto;
}

.course03-text-box {
    margin: 1.3rem 0 0;
    text-align: center;
}

.course03-img-box08 {
    max-width: 48.2rem;
    width: 42%;
}

/*===========================================================
course04
===========================================================*/

.course04 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
	padding: 0 1.5rem 0 0;
}

.course04-container {
    max-width: 158rem;
    width: 100%;
    margin: 0 auto 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.course04-img-box {
    max-width: 96rem;
    width: 61%;
}

.course04-text-area {
    max-width: 52.8rem;
    width: 35%;
}

.course04-text-box {
    margin: 2.2rem 0 0;
    text-align: center;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1920px) {


/*===========================================================

===========================================================*/



}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1024px) {


/*===========================================================

===========================================================*/

.course04-img-box {
	width: 56%;
}

.course04-text-area {
	width: 43%;
}

} 


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 768px) {


/*===========================================================
course01
===========================================================*/

	.course01 {
		padding: 6rem 2.5rem 0;
	}

/*===========================================================
course02
===========================================================*/

	.course02 {
		padding: 6rem 2.5rem 0;
	}

	.course02-container {
		padding: 6rem 1rem;
	}

/*===========================================================
course03
===========================================================*/

.course03-area01 {
	width: 96%;
}

.course03-area02 {
    width: 90.7%;
}

.course03-area03 {
	width: 98%;
}

.course03-container04 {
	margin: 6rem 0 0 auto;
	width: 100%;
}

.course03-area04 {
	width: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.course03-text-container {
	margin: 0;
	padding: 4rem 1rem;
	width: 100%;
}

.course03-img-box08 {
	margin: 4rem 0 0;
	width: 100%;
}

.course04 {
	padding: 0;
}

.course04-container {
	flex-direction: column;
	justify-content: center;
}

.course04-text-area {
	display: contents;
}

.course-title-area {
	order: 1;
}

.course04-img-box {
	margin: 4rem auto 0;
	width: 100%;
	order: 2;
}

.course04-text-box {
	margin: 4rem 0 0;
	padding: 0 1.5rem;
	order: 3;
}

} 


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 576px) {


/*===========================================================
course01
===========================================================*/

	.course01-title-box02 {
		margin: 1rem 0 0;
	}

	.course01-title-box01 {
		display: block;
	}

    .en-US .price-text strong {
        font-size: 2.2rem;
    }

    .course03-container01 {
        width: 100%;
    }

    .course03-img-set01 {
        width: 100%;
    }

    .course03-img-box03 {
        margin: 3rem 0 -12rem;
        width: 56%;
    }

    .course03-container02 {
        width: 100%;
    }

    .course03-img-box05 {
        width: 55%;
        margin: -5rem 0 0 auto;
    }

    .course03-area03 {
        width: 100%;
        flex-direction: column;
    }

    .course03-img-box06 {
        margin: 0 auto 0 0;
        width: 72.1%;
    }

    .course03-img-box07 {
        width: 75%;
        margin: 3rem 0 0 auto;
    }

    .course03-container03 {
        margin: 6rem 0 0 auto;
    }

    .course03-area02 {
        width: 100%;
        flex-direction: column;
    }

    .course03-area01 {
        flex-direction: column;
    }

}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 414px) {


/*===========================================================
course01
===========================================================*/

	.course01-title-margin {
		margin: 1rem 0 0;
	}

/*===========================================================
course02
===========================================================*/

    .course02-text-box .text01 {
        font-size: 1.2rem;
    }


}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */