@charset "UTF-8";

main {
    background: var(--square-grid-background);
}

.line-length {
    max-width: 70ch;
    margin: auto;
}

.mission {
    background: url(./square-bg.8140370a.svg) top 39px right -50vw/auto no-repeat;
}
@media (min-width: 640px) {
    .mission {
        background-size: clamp(0px, 30%, 550px);
        background-position: top calc(50% + 20px) left clamp(0px, 110%, 50% + 800px);
    }
}

.mission h2.en {
    margin-bottom: 36px;
}
@media (min-width: 1024px) {
    .mission h2.en {
        margin-bottom: 100px;
    }
}

.mission .p-big {
    margin-bottom: 24px;
}
@media (min-width: 1024px) {
    .mission .p-big {
        margin-bottom: 48px;
    }
}

.mission .images {
    margin-bottom: 90px;
}
@media (min-width: 1024px) {
    .mission .images {
        margin-bottom: 0;
    }
}

.mission .images img {
    height: auto;
    margin: auto;
}
@media (min-width: 1024px) {
    .mission .images img {
        width: 85%;
    }
}

.whats-different-grid {
    gap: var(--column-gap);
    margin-top: 24px;
}
@media (min-width: 640px) {
    .whats-different-grid {
        margin-top: 48px;
    }
    .whats-different-grid .improve-communication {
        grid-column-end: span 2;
        grid-row-end: span 2;
    }
}
@media (min-width: 1024px) {
    .whats-different-grid {
        margin-top: 80px;
    }
    .whats-different-grid .improve-communication {
        grid-column-start: 1;
    }
    .whats-different-grid .foreign-teachers {
        grid-column-end: span 2;
    }
    .whats-different-grid .early-is-better,
    .whats-different-grid .creativity-and-fun {
        grid-column-end: span 2;
    }
}
@media (min-width: 1440px) {
    .whats-different-grid .improve-communication {
        grid-column-start: auto;
    }
    .whats-different-grid .early-is-better,
    .whats-different-grid .creativity-and-fun {
        grid-column-end: auto;
    }
}

.whats-different-grid li {
    --padding: 24px;
    display: flex;
    flex-direction: column;
    padding: var(--padding);
    border-radius: 2rem;
    background-image: linear-gradient(#f8fbff 0.05%, #ecf9ff 12.95%, #ecf9ff 80.73%, #d7f6fa);
}

.whats-different-grid li h5 {
    min-height: calc((2px + 2ex + 2px) * 2);
}

.improve-communication img {
    width: calc(100% + var(--padding) * 2);
    flex-grow: 2;
    max-width: none;
    height: auto;
    margin: calc(var(--padding) * -1);
    margin-top: 24px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: bottom;
    object-position: bottom;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
}

.foreign-teachers a {
    align-self: center;
    margin-top: 12px;
    margin-bottom: -24px;
}

.foreign-teachers a > img {
    width: 75px;
}

section.code-benefits {
    background-image: linear-gradient(180deg, #FFFFFF 2%, #FAF9FF 50%, #FAF9FF 100%);
}

.code-benefits-grid {
    gap: 24px;
}
@media (min-width: 1024px) {
    .code-benefits-grid {
        row-gap: 0px;
        column-gap: 48px;
    }
}
@media (min-width: 1440px) {
    .code-benefits-grid {
        row-gap: 48px;
        column-gap: 84px;
    }
}

@media (min-width: 1024px) {
    .code-benefits-grid > img {
        grid-column: 3/5;
        grid-row: 3/5;
    }
}

.code-benefits-grid > p {
    grid-column: 1/-1;
    margin-bottom: 24px;
}

.code-benefits-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (min-width: 1024px) {
    .code-benefits-grid li {
        align-items: start;
    }
}

.code-benefits-grid .icon {
    margin-bottom: 6px;
    margin-left: -5px;
}

.code-benefits-grid p {
    max-width: 35ch;
}
@media (min-width: 640px) {
    .code-benefits-grid p {
        max-width: 35ch;
        text-align: center;
        margin-bottom: 48px;
    }
}
@media (min-width: 1024px) {
    .code-benefits-grid p {
        text-align: left;
        max-width: auto;
    }
}

.code-benefits-grid .programming-illustration {
    display: none;
}
@media (min-width: 1024px) {
    .code-benefits-grid .programming-illustration {
        display: initial;
        grid-row: span 2;
    }
}

@media (min-width: 1440px) {
    .why-english h2 {
        margin-bottom: 60px;
    }
}

@media (min-width: 640px) {
    .why-english-image {
        grid-row-end: span 2;
    }
}
@media (min-width: 1024px) {
    .why-english-image {
        grid-row-end: span 4;
    }
}

.why-english li {
    align-self: start;
    display: grid;
    grid-template-columns: min-content auto;
    column-gap: 16px;
    margin-bottom: calc(2 * var(--flow-space));
}
@media (min-width: 1440px) {
    .why-english li {
        margin-bottom: 36px;
    }
}

.why-english li h5 {
    margin-top: 6px;
    margin-bottom: calc(0.5 * var(--flow-space));
}

.why-english li img {
    --size: 36px;
    width: var(--size);
    min-width: var(--size);
    height: var(--size);
    grid-row: 1/3;
}

.our-team {
    overflow: hidden;
}

.team-container {
    position: relative;
    padding: 48px var(--side-gap);
    background-image: url(./dots-left.80523bb7.png), url(./dots-right.31d89805.png);
    background-position: left 16px top, right 16px top;
    background-repeat: repeat-y, repeat-y;
    background-size: 120px;
}
@media (min-width: 640px) {
    .team-container {
        margin: 0;
        background-size: auto;
    }
}

.team-container .circles {
    position: absolute;
}

.team-container .aqua-circle {
    top: 48%;
    right: -20px;
}

.team-container .purple-circles {
    top: 35%;
    left: -30px;
}

.team-container .yellow-circle {
    top: 65%;
    right: -50px;
}

.team-container .red-circle {
    bottom: 5%;
    left: 90px;
}

@media (min-width: 1440px) {
    .team-container ul {
        row-gap: 64px;
    }
}

.team-container figure {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
}

.team-container figure img {
    height: auto;
    margin-bottom: 14px;
    border-radius: 50%;
}

.team-container figcaption p {
    opacity: 1;
}

.school-profile .summary-table {
    border-color: #f9c427;
}
@media (min-width: 1024px) {
    .school-profile .summary-table {
        margin: 0 -48px;
    }
}

@media (min-width: 640px) {
    .school-profile .summary-table th {
        white-space: nowrap;
    }
}

.school-profile .summary-table img {
    padding: 12px 0;
}