html {
    color: #323135;
    font-family: sans-serif;
    font-size: 14px;
}

body {
    margin: 0;
}

p, li {
    line-height: 1.6;
    margin: 0;
}

.top-section-common {
    overflow: hidden;
    position: relative;
    margin-bottom: 0;
}
@media (min-width: 641px) {
    .top-section-common {
        padding-bottom: 80px;
        padding-top: 80px;
    }
}
@media (max-width: 640px) {
    .top-section-common {
        padding-bottom: 48px;
        padding-top: 48px;
    }
}

.top-section-body-common {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 1024px;
}
@media (min-width: 1025px) {
    .top-section-body-common {
        padding-left: 32px;
        padding-right: 32px;
    }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .top-section-body-common {
        padding-left: 5vw;
        padding-right: 5vw;
    }
}
@media (max-width: 640px) {
    .top-section-body-common {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.sectionText.sectionText-single {
    margin-left: auto;
    margin-right: auto;
    max-width: 360px;
    text-align: center;
}
.sectionText_title {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.4;
}
@media (max-width: 640px) {
    .sectionText_title {
        text-align: center;
    }
}
.sectionText_lead {
    margin-top: 16px;
}

@media (min-width: 641px) {
    .twoColumns {
        align-items: center;
        display: flex;
    }
}
.twoColumns_column {
    position: relative;
}
.twoColumns_column:first-child {
    flex: 1;
}
@media (min-width: 1025px) {
    .twoColumns_column:last-child {
        margin-left: 64px;
        width: 480px;
    }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .twoColumns_column:last-child {
        margin-left: 5vw;
        width: 240px;
    }
}
@media (max-width: 640px) {
    .twoColumns_column:last-child {
        margin-top: 32px;
    }
}
@media (min-width: 1025px) {
    .twoColumns_column.twoColumns_column-text {
        padding-left: 64px;
        padding-right: 64px;
    }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .twoColumns_column.twoColumns_column-text {
        padding-left: 5vw;
        padding-right: 5vw;
    }
}
@media (max-width: 640px) {
    .twoColumns_column.twoColumns_column-text {
        padding-left: 8px;
        padding-right: 8px;
    }
}
.twoColumns_column.twoColumns_column-stretch {
    align-self: stretch;
}

.heroSection {
    background-color: #ffe6bd;
}
@media (min-width: 641px) {
    .heroSection_bg {
        background: url(../img/hero-bg-particles-pc.svg) no-repeat center;
        background-size: contain;
        height: 363px;
        left: 50%;
        margin-left: -553.5px;
        margin-top: -181.5px;
        position: absolute;
        top: 50%;
        width: 1107px;
    }
}
.heroSection_image {
    margin-left: auto;
    margin-right: auto;
    max-width: 480px;
}

.heroImage {
    position: relative;
}
.heroImage::before {
    background: url(../img/hero-bg-elements.svg) no-repeat center;
    background-size: contain;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
@media (min-width: 641px) {
    .heroImage::before {
        transform: scale(1.5);
    }
}
@media (max-width: 640px) {
    .heroImage::before {
        transform: scale(1.25);
    }
}
.heroImage img {
    display: block;
    width: 100%;
}

.threeMinsSection_content {
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 641px) {
    .threeMinsSection_content {
        margin-top: 64px;
        max-width: 480px;
    }
}
@media (max-width: 640px) {
    .threeMinsSection_content {
        margin-top: 32px;
    }
}

.threeMinsImage {
    position: relative;
}
.threeMinsImage img {
    display: block;
    width: 100%;
}
.threeMinsImage_capture {
    border-radius: 8px;
    overflow: hidden;
}
.threeMinsImage_icon {
    position: absolute;
}
@media (min-width: 641px) {
    .threeMinsImage_icon {
        bottom: -16px;
        right: -32px;
        width: 132px;
    }
}
@media (max-width: 640px) {
    .threeMinsImage_icon {
        bottom: -8px;
        right: -8px;
        width: 66px;
    }
}

.lessonsSection {
    background-color: #fafafa;
}
.lessonsSection_body {
    position: relative;
}
.lessonsSection_symbols {
    opacity: 0.3;
    position: absolute;
}
@media (min-width: 1025px) {
    .lessonsSection_symbols {
        bottom: -80px;
        left: -64px;
        top: -80px;
    }
}
.lessonsSection_symbols::before {
    background: url(../img/lesson-icons.png) repeat right center;
    background-size: 240px auto;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
}
.lessonsSection_button {
    margin-top: 32px;
}
@media (max-width: 640px) {
    .lessonsSection_button {
        text-align: center;
    }
}
.lessonsSection_note {
    color: #646369;
    margin-top: 16px;
}
@media (min-width: 641px) {
    .lessonsSection_ribbon {
        bottom: -80px;
        position: absolute;
        top: -80px;
        width: 100%;
    }
}
@media (max-width: 640px) {
    .lessonsSection_ribbon {
        height: 216px;
        margin-left: -32px;
        margin-right: -32px;
    }
}

@-webkit-keyframes lessonRibbon_loop-pc {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -1716px;
    }
}

@keyframes lessonRibbon_loop-pc {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -1716px;
    }
}
@-webkit-keyframes lessonRibbon_loop-tablet {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -858px;
    }
}
@keyframes lessonRibbon_loop-tablet {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -858px;
    }
}
@-webkit-keyframes lessonRibbon_loop-sp {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -2400px 0;
    }
}
@keyframes lessonRibbon_loop-sp {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -2400px 0;
    }
}
.lessonRibbon {
    display: flex;
    height: 100%;
}
.lessonRibbon_ribbon {
    -webkit-animation-duration: 60s;
    animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    background-image: url(../img/lesson-captures-pc.png);
    background-repeat: repeat-y;
    background-size: cover;
    width: 100%;
}
@media (min-width: 1025px) {
    .lessonRibbon_ribbon {
        -webkit-animation-name: lessonRibbon_loop-pc;
        animation-name: lessonRibbon_loop-pc;
    }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .lessonRibbon_ribbon {
        -webkit-animation-name: lessonRibbon_loop-tablet;
        animation-name: lessonRibbon_loop-tablet;
    }
}
@media (max-width: 640px) {
    .lessonRibbon_ribbon {
        background-image: url(../img/lesson-captures-sp.png);
        background-repeat: repeat-x;
        -webkit-animation-name: lessonRibbon_loop-sp;
        animation-name: lessonRibbon_loop-sp;
    }
}

.qImage {
    position: relative;
}
.qImage img {
    width: 100%;
}
.qImage_capture {
    border: #cbcace solid 2px;
    border-radius: 8px;
    overflow: hidden;
}
.qImage_icon {
    bottom: -16px;
    position: absolute;
    right: -16px;
}
@media (min-width: 1025px) {
    .qImage_icon {
        width: 146px;
    }
}
@media (max-width: 1024px) {
    .qImage_icon {
        width: 73px;
    }
}

.schoolSection {
    background-color: hsl(216deg, 95%, 95%);
}
@media (max-width: 640px) {
    .schoolSection {
        padding-bottom: 148px;
    }
}
.schoolSection a {
    color: hsl(216deg, 95%, 55%);
}
.schoolSection_bg {
    background-size: contain;
    position: absolute;
}
@media (min-width: 641px) {
    .schoolSection_bg {
        background: url(../img/school-stars-pc.svg) no-repeat center;
        height: 379px;
        left: 50%;
        margin-left: -720px;
        margin-top: -189.5px;
        top: 50%;
        width: 1440px;
    }
}
@media (max-width: 640px) {
    .schoolSection_bg {
        background: url(../img/school-stars-sp.svg) no-repeat center;
        height: 250px;
        left: 50%;
        margin-left: -187.5px;
        top: 32px;
        width: 375px;
    }
}
.schoolSection_body {
    position: relative;
}
.schoolSection_capture {
    border: hsl(216deg, 85%, 20%) solid 2px;
    border-radius: 6px;
    box-shadow: 8px 8px 0 hsl(216deg, 96%, 90%);
    overflow: hidden;
}
.schoolSection_capture img {
    display: block;
    width: 100%;
}
.schoolSection_fg {
    position: absolute;
}
@media (min-width: 641px) {
    .schoolSection_fg {
        bottom: -80px;
        left: -128px;
        width: 320px;
    }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .schoolSection_fg {
        left: -48px;
        width: 160px;
    }
}
@media (max-width: 640px) {
    .schoolSection_fg {
        bottom: -148px;
        left: -32px;
        width: 160px;
    }
}
.schoolSection_fg img {
    display: block;
    width: 100%;
}

.plansSection_content {
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 641px) {
    .plansSection_content {
        margin-top: 64px;
        max-width: 768px;
    }
}
@media (max-width: 640px) {
    .plansSection_content {
        margin-top: 32px;
    }
}

@media (min-width: 641px) {
    .plans {
        display: flex;
    }
}
.plans_plan {
    border-radius: 8px;
    flex: 1;
}
.plans_plan.plans_plan-free {
    background-color: #f2f2f3;
}
.plans_plan.plans_plan-premium {
    background-color: #fff2db;
    transition: background-color 0.2s;
}
.plans_plan.plans_plan-premium:hover {
    background-color: #ffe6bd;
}
.plans_arrow {
    align-items: center;
    display: flex;
    justify-content: center;
}
@media (min-width: 641px) {
    .plans_arrow {
        margin-left: 48px;
        margin-right: 48px;
    }
}
@media (max-width: 640px) {
    .plans_arrow {
        margin-bottom: 16px;
        margin-top: 16px;
        transform: rotate(90deg);
    }
}

.plan {
    color: inherit;
    display: block;
    padding: 32px;
    text-align: center;
    text-decoration: none;
}
a.plan:focus, 
a.plan:hover {
    text-decoration: none;
}
.plan_lead {
    font-weight: bold;
}
.plan_title {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5;
}
.plan_icon {
    margin-top: 32px;
}
.plan_price {
    font-weight: bold;
    margin-top: 16px;
}
.plan_features {
    display: inline-block;
    margin-top: 32px;
    padding-left: 0.5em;
    text-align: left;
}
.plan_features li + li {
    margin-top: 0.5em;
}

.startSection {
    background: radial-gradient(circle at center, hsl(200deg, 50%, 96%), hsl(200deg, 100%, 90%));
}
.startSection::before {
    background: url(../img/hero-bg-elements.svg) no-repeat center;
    background-size: contain;
    content: "";
    position: absolute;
}
a.startSection_textLink {
    color: #323135;
    opacity: .5;
    text-decoration: underline;
}
@media (min-width: 641px) {
    .startSection::before {
        bottom: 32px;
        left: 0;
        right: 0;
        top: 32px;
    }
}
@media (max-width: 640px) {
    .startSection::before {
        bottom: 16px;
        left: -32px;
        right: -32px;
        top: 16px;
    }
}
.startSection_body {
    position: relative;
}
.startSection_content {
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 641px) {
    .startSection_content {
        margin-top: 64px;
        max-width: 480px;
    }
}
@media (max-width: 640px) {
    .startSection_content {
        margin-top: 32px;
    }
}
.startSection_buttons {
    margin-top: 32px;
    text-align: center;
}
.startSection_button + .startSection_button {
    margin-top: 16px;
}

.startVideo {
    background-color: #08415e;
    border-radius: 8px;
    display: block;
    overflow: hidden;
    position: relative;
}
.startVideo::after {
    background: url(../img/start-icon-play.svg) no-repeat center/contain;
    bottom: 0;
    content: "";
    height: 64px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    transition: transform 0.4s;
    width: 64px;
}
.startVideo:hover::after {
    transform: scale(1.2);
}
.startVideo img {
    display: block;
    opacity: 0.8;
    transition: opacity 0.4s;
    width: 100%;
}
.startVideo:hover img {
    opacity: 0.85;
}

.newLessonsSection_content {
    margin: 0 auto;
    box-sizing: border-box;
}
@media (min-width: 641px) {
    .newLessonsSection_content {
        margin-top: 64px;
        max-width: 480px;
    }
}
@media (max-width: 640px) {
    .newLessonsSection_content {
        margin-top: 32px;
        margin-left: 16px;
        margin-right: 16px;
    }
}
.newLessonsSection_content ul {
    margin: 0;
    padding: 0;
    border: 4px solid #f2f2f3;
    border-radius: 8px;
}
.newLessonsSection_content ul li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
}
.newLessonsSection_content ul li .package-icon {
    flex: 0 0 48px;
}
.newLessonsSection_content ul li .package-detail {
    flex: 1;
}
.newLessonsSection_content ul li .package-detail time {
    font-size: 13px;
    color: #646369;
}
.newLessonsSection_content ul li .package-detail .package-detail-title {
    margin: 0;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.newLessonsSection_content ul li .package-detail .package-detail-title a {
}
.newLessonsSection_content ul li .package-detail .package-detail-title .premium-label {
    flex: 0 0 64px;
}
.newLessonsSection_content .go-to-new-lessons {
    margin: 32px 0 0;
    text-align: center;
    text-decoration: underline;
    font-weight: bold;
    opacity: .5;
}
.newLessonsSection_content .go-to-new-lessons a {
    color: #323135;
}