@charset "UTF-8";



:root{

    --message-delay: 0.25s;

    --underline-delay: 0.75s;

}



.p-fv{

    position: relative;

    overflow: hidden;

    padding-bottom: var(--section-margin-top);

}

.p-fv__video{

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    z-index: -1;

    pointer-events: none;

}

.p-fv__video::before{

    content: "";

    width: 100%;

    height: 100%;

    z-index: 1;

    position: absolute;

    top: 0;

    left: 0;

    transition: var(--link-transition);

}

.p-fv__video[data-state="2"]::before{

    background: rgba(255,255,255,0.9);

}

.p-fv__video video{

    width: 100%;

    height: 100%;

    object-fit: cover;

    position: absolute;

    top: 0;

    left: 0;

}

.p-fv__contents{

    height: calc(100vh - calc(130 * var(--px)));

    display: flex;

    justify-content: center;

    align-items: flex-end;

    padding: calc(50 * var(--px)) 0;

}

.p-fv__message{

    background: rgba(255, 255, 255, 0.8);

    border-radius: var(--radius-base);

    box-shadow: var(--shadow-base);

    padding: calc(50 * var(--px));

    font-weight: 600;

    text-align: center;

    opacity: 0;

    transition: all 0.5s ease-in-out var(--message-delay);

    text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.8), -1px 1px 5px rgba(255, 255, 255, 0.8), 1px -1px 5px rgba(255, 255, 255, 0.8), -1px -1px 5px rgba(255, 255, 255, 0.8);

}

.p-fv.js-visible .p-fv__message{

    opacity: 1;

}

.p-fv__message-title{

    font-size: calc(52 * var(--px));

}

.p-fv__message-title + .p-fv__message-title{

    margin-top: calc(25 * var(--px));

}

.p-fv__message-title__point{

    color: #cb1a14;

}

.p-fv__message-title-text{

    position: relative;

}

.p-fv__message-title-text::before{

    content: "";

    position: absolute;

    bottom: 10%;

    left: 0;

    width: 0;

    height: 25%;

    background: #fff21a;

    transition: all 0.5s ease-in-out var(--underline-delay);

}

.p-fv.js-visible .p-fv__message-title-text::before{

    width: 100%;

}

.p-fv__message-title-text-inner{

    position: relative;

    z-index: 1;

}

.p-fv__slider{

    margin-top: calc(50 * var(--px));

}

.p-fv__slider .swiper{

    overflow: visible;

}

.p-fv__slider img{

    width: 100%;

    height: auto;

}

.p-fv__slider .swiper-slide{

    background: #fff;

    border-radius: var(--radius-base);

    overflow: hidden;

}

.p-fv__slider .swiper-pagination-bullets.swiper-pagination-horizontal{

    bottom: calc(-30 * var(--px));

    display: flex;

    align-items: center;

    justify-content: center;

}

.p-fv__slider .swiper-pagination-bullet{

    width: calc(14 * var(--px));

    height: calc(14 * var(--px));

    opacity: 1;

    margin: 0 calc(8 * var(--px)) !important;

    box-shadow: var(--shadow-light);

    background: var(--gray-color-dark);

}

.p-fv__slider .swiper-pagination-bullet-active{

    background: var(--button-color);

}

.p-fv__slider.is-disabled{

    margin-bottom: calc(20 * var(--px));

}

.p-fv__slider .swiper-button-prev,

.p-fv__slider .swiper-button-next{

    width: calc(60 * var(--px));

    height: calc(60 * var(--px));

    color: #fff;

    top: auto;

    bottom: calc(50% - calc(30 * var(--px)));

    border-radius: calc(30 * var(--px));

    background: var(--button-color);

    box-shadow: var(--shadow-base);

    margin: 0;

}

.p-fv__slider .swiper-button-prev::after,

.p-fv__slider .swiper-button-next::after{

    font-weight: bold;

    transform: scale(0.5);

    transform-origin: center center;

}

.p-fv__slider .swiper-button-prev{

    left: calc(-40 * var(--px));

}

.p-fv__slider .swiper-button-next{

    right: calc(-40 * var(--px));

}

@media screen and (max-width: 767px) {

    .p-fv{

        position: relative;

        padding-bottom: calc(60 * var(--px));

    }

    .p-fv::before{

        content: "";

        width: 100%;

        height: 100%;

        position: fixed;

        top: 0;

        left: 0;

        background: var(--gray-color-lighter);

        z-index: -1;

    }

    .p-fv__video{

        position: relative;

        height: 100vw;

    }

    .p-fv__video{

        width: 177.778%;

        left: -38.889%;

    }

    .p-fv__video::before{

        display: none;

    }

    .p-fv__contents{

        width: calc(100% - calc(40 * var(--px)));

        height: auto;

        display: block;

        padding: 0;

        margin: calc(-75 * var(--px)) auto 0;

        position: relative;

        z-index: 1;

    }

    .p-fv__message{

         padding: calc(20 * var(--px));

    }

    .p-fv__message-title{

        font-size: calc(25 * var(--px));

    }

    .p-fv__message-title + .p-fv__message-title{

        margin-top: calc(10 * var(--px));

    }

    .p-fv__slider .swiper-pagination-bullet{

        width: calc(10 * var(--px));

        height: calc(10 * var(--px));

        margin: 0 calc(7 * var(--px)) !important;

    }

    .p-fv__slider{

        width: 75%;

        margin-top: calc(30 * var(--px));

    }

    .p-fv__slider .swiper-button-prev,

    .p-fv__slider .swiper-button-next{

        width: calc(40 * var(--px));

        height: calc(40 * var(--px));

        bottom: calc(50% - calc(20 * var(--px)));

    }

    .p-fv__slider .swiper-button-prev::after,

    .p-fv__slider .swiper-button-next::after{

        transform: scale(0.35);

    }

    .p-fv__slider .swiper-button-next{

        right: calc(-30 * var(--px));

    }

    .p-fv__slider .swiper-button-prev{

        left: calc(-30 * var(--px));

    }

    .p-fv__slider .swiper-pagination-bullets.swiper-pagination-horizontal{

        bottom: calc(-25 * var(--px));

    }

}



.p-about__wrapper{

    background: rgba(255,255,255,0.9);

    backdrop-filter: blur(10px);

    padding: calc(75 * var(--px)) 0 0;

    border-radius: var(--radius-base);

    box-shadow: var(--shadow-base);

    position: relative;

    overflow: hidden;

}

.p-about__wrapper::after{

    content: "";

    width: 100%;

    height: 110px;

    background: var(--gray-color-light);

    position: absolute;

    bottom: 0;

    left: 0;

}

.p-about__text{

    font-size: var(--fs-small-title);

    line-height: var(--lh-base);

    text-align: center;

}

.p-about__text + .p-about__text{

    margin-top: var(--text-margin-top);

}

.p-about__logo{

    text-align: center;

    margin-top: calc(30 * var(--px));

    padding-bottom: calc(10 * var(--px));

}

.p-about__logo  img{

    width: 100%;

    height: auto;

    max-width: calc(315 * var(--px));

}

.p-about__button{

    display: flex;

    justify-content: center;

}

.p-about__button .c-button__link{

    margin: 0;

}

.p-about__button .p-about__button-event{

    background: var(--important-button-color);

    border-color: var(--important-button-color);

    margin-left: calc(30 * var(--px));

}

.p-about__button .p-about__button-event:hover,

.p-about__button .p-about__button-event:hover::after{

    color: var(--important-button-color);

}

.p-about__image{

    margin: calc(50 * var(--px)) auto 0;

    position: relative;

    z-index: 1;

    padding-bottom: calc(25 * var(--px));

    text-align: center;

}

.p-about__image img{

    width: calc(568 * var(--px));

    height: auto;

}

.p-about__image:before,

.p-about__image:after{

    content: "";

    width: calc(290 * var(--px));

    height: calc(232 * var(--px));

    background: url(../img/index/about_dot.png) center top / cover no-repeat;

    position: absolute;

    bottom: 0;

}

.p-about__image:before{

    left: 0;

}

.p-about__image:after{

    right: 0;

    transform: scale(-1, 1);

}

@media screen and (max-width: 767px) {

    .p-about__wrapper{

        padding: calc(30 * var(--px)) calc(20 * var(--px)) 0;

    }

    .p-about__wrapper::after{

        height: 55px;

    }

    .p-about__text{

        font-size: var(--fs-base);

        line-height: var(--lh-base);

        text-align: left;

    }

    .p-about__logo{

        width: calc(200 * var(--px));

        margin: calc(20 * var(--px)) auto 0;

        padding-bottom: calc(5 * var(--px));

    }

    .p-about__logo  img{

        max-width: none;

    }

    .p-about__button{

        display: block;

    }

    .p-about__button .c-button__link{

        width: 100%;

        margin: 0 auto;

    }

    .p-about__button .p-about__button-event{

        margin: calc(15 * var(--px)) auto 0;

    }

    .p-about__image{

        margin-top: calc(25 * var(--px));

        padding-bottom: calc(12 * var(--px));

    }

    .p-about__image img{

        width: 100%;

    }

    .p-about__image:before,

    .p-about__image:after{

        display: none;

    }

}



.p-learning{

    background: var(--gray-color-light);

    margin-top: calc(100 * var(--px));

    padding: var(--section-margin-top) 0;

}

.p-learning__list{

    margin-top: calc(40 * var(--px));

}

.p-learning__item{

    display: flex;

    align-items: center;

    background: #fff;

    padding: calc(50 * var(--px));

    border-radius: var(--radius-base);

    box-shadow: var(--shadow-base);

}

.p-learning__item:nth-child(n+2){

    margin-top: calc(50 * var(--px));

}

.p-learning__main{

    flex-grow: 1;

    padding-right: calc(60 * var(--px));

}

.p-learning__head{

    display: flex;

    align-items: center;

}

.p-learning__number{

    width: calc(54 * var(--px));

    height: calc(54 * var(--px));

    background: url(../img/common/title-decoration.svg) center top / cover no-repeat;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    color: #fff;

    text-shadow: var(--shadow-text);

}

.p-learning__number01{

    font-size: calc(11 * var(--px));

    font-weight: 600;

}

.p-learning__number02{

    font-size: calc(28 * var(--px));

    font-family: var(--number-font-family);

    font-weight: 600;

    margin-top: calc(2 * var(--px));

}

.p-learning__title{

    margin-left: calc(15 * var(--px));

}

.p-learning__title01{

    display: block;

    font-size: var(--fs-base);

}

.p-learning__title02{

    display: block;

    font-size: var(--fs-large-title);

    font-weight: 600;

    margin-top: calc(10 * var(--px))

}

.p-learning__text{

    margin-top: calc(20 * var(--px));

    font-size: var(--fs-base);

    line-height: var(--lh-base);

}

.p-learning__image{

    width: calc(400 * var(--px));

    flex-shrink: 0;

    border-radius: var(--radius-base);

    overflow: hidden;

}

.p-learning__image img{

    width: 100%;

    height: auto;

}

@media screen and (max-width: 767px) {

    .p-learning{

        margin-top: calc(50 * var(--px));

    }

    .p-learning__list{

        display: block;

        margin-top: calc(25 * var(--px));

    }

    .p-learning__item{

        width: 100%;

        display: block;

        padding: calc(30 * var(--px)) calc(20 * var(--px));

    }

    .p-learning__main{

        padding-right: 0;

    }

    .p-learning__number{

        width: calc(44 * var(--px));

        height: calc(44 * var(--px));

        background-size: cover;        

    }

    .p-learning__number01{

        font-size: calc(10 * var(--px));

    }

    .p-learning__number02{

        font-size: calc(24 * var(--px));

    }

    .p-learning__title{

        margin-left: calc(12 * var(--px));

    }

    .p-learning__title01{

        font-size: var(--fs-small-text);

    }

    .p-learning__title02{

        margin: calc(7 * var(--px)) 0 0;

    }

    .p-learning__item:nth-child(n+2){

        margin-top: calc(30 * var(--px));

    }

    .p-learning__image{

        width: 100%;

        margin-top: calc(20 * var(--px));

    }

}



.p-bg-white{

    background: #fff;

    position: relative;

}



.p-subject{

    padding-top: var(--section-margin-top);

}

.p-subject__list{

    display: flex;

    flex-wrap: wrap;

    margin-top: calc(40 * var(--px));

}

.p-subject__item{

    width: 31.25%;

    margin: 3.125% 3.125% 0 0;

}

.p-subject__link{

    border-radius: var(--radius-base);

    overflow: hidden;

    display: block;

    height: 100%;

    background: var(--philosophy-color-lighter);

    transition: var(--link-transition);

    box-shadow: var(--shadow-light);

}

.p-subject__link--comingsoon{

    position: relative;

}

.p-subject__link:hover{

    opacity: 1;

}

.p-subject__item:nth-child(3n){

    margin-right: 0;

}

.p-subject__img{

    height: 0;

    padding-top: 62.163%;

    position: relative;

    overflow: hidden;

}

.p-subject__link:not(.p-subject__link--comingsoon):hover img {

    transform: var(--image-zoom-transform);

}

.p-subject__img img{

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    object-fit: cover;

    transition: var(--link-transition);

}

.p-subject__item:nth-child(-n+3){

    margin-top: 0;

}

.p-subject__title{

    font-size: var(--fs-title);

    line-height: var(--lh-tighter);

    font-weight: 600;

    position: relative;

}

.p-subject__item:nth-child(2) .p-subject__link{

    border-color: var(--science-color);

    background: var(--science-color-lighter);

}

.p-subject__item:nth-child(3) .p-subject__link{

    border-color: var(--money-color);

    background: var(--money-color-lighter);

}

.p-subject__item:nth-child(4) .p-subject__link{

    border-color: var(--english-color);

    background: var(--english-color-lighter);

}

.p-subject__item:nth-child(5) .p-subject__link{

    border-color: var(--programming-color);

    background: var(--programming-color-lighter);

}

.p-subject__text{

    font-size: var(--fs-base);

    line-height: var(--lh-tight);

    margin-top: calc(10 * var(--px));

}

.p-subject__details{

    padding: calc(25 * var(--px)) calc(17 * var(--px));

}

@media screen and (max-width: 767px) {

    .p-subject__list{

        display: block;

        margin-top: calc(25 * var(--px));

    }

    .p-subject__item{

        width: 100%;

        margin: 0;

    }

    .p-subject__item:nth-child(n+2){

        margin-top: calc(20 * var(--px));

    }

    .p-subject__details {

        padding: calc(20 * var(--px)) calc(15 * var(--px));

    }

}



.p-shorts{

    padding-top: var(--section-margin-top);

}

.p-shorts .swiper{

    margin-top: calc(30 * var(--px));

    overflow: visible;

}

.p-shorts .swiper-slide{

    height: auto;

}

.p-shorts__link{

    display: block;

    height: 0;

    padding-top: 177.778%;

    position: relative;

    border-radius: var(--radius-base);

    box-shadow: var(--shadow-base);

    overflow: hidden;

}

.p-shorts__link::before {

    content: '\f04b';

    width: calc(50 * var(--px));

    height: calc(50 * var(--px));

    border-radius: calc(25 * var(--px));

    background: var(--play-color);

    color: #fff;

    font-size: calc(20 * var(--px));

    font-family: var(--icon-font-family);

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: center;

    position: absolute;

    top: calc(50% - (25 * var(--px)));

    left: calc(50% - (25 * var(--px)));

    z-index: 1;

}

.p-shorts__image{

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    object-fit: cover;

}

@media screen and (min-width: 768px){

    .p-shorts .swiper-wrapper{

        justify-content: center;

    }

    .p-shorts .swiper-slide{

        width: calc((288 / 1200) * 100%);

        margin-right: calc((16 / 1200) * 100%);

        transition-property: opacity;

    }

    .p-shorts .swiper-slide:last-child{

        margin-right: 0;

    }

    .p-shorts .swiper-pagination,

    .p-shorts .swiper-button-prev,

    .p-shorts .swiper-button-next{

        display: none;

    }

}

@media screen and (max-width: 767px){

    .p-shorts{

        overflow: hidden;

    }

    .p-shorts__main.is-disabled{

        padding-bottom: calc(10 * var(--px));

    }

    .p-shorts__main:not(.is-disabled){

        overflow: hidden;

        margin: 0 calc(-20 * var(--px)) 0;

        padding-bottom: calc(30 * var(--px));

    }

    .p-shorts__main .swiper{

        width: 52.8vw;

        margin-top: calc(25 * var(--px));

    }

    .p-shorts .swiper-slide{

        opacity: 1;

    }

    .p-shorts .swiper-button-prev,

    .p-shorts .swiper-button-next{

        width: calc(40 * var(--px));

        height: calc(40 * var(--px));

        top: auto;

        bottom: calc(50% - calc(20 * var(--px)));

        color: #fff;

        border-radius: calc(30 * var(--px));

        background: var(--button-color);

        box-shadow: var(--shadow-base);

        margin: 0;

    }

    .p-shorts .swiper-button-prev::after,

    .p-shorts .swiper-button-next::after{

        font-weight: bold;

        transform: scale(0.35);

        transform-origin: center center;

    }

    .p-shorts .swiper-button-prev{

        left: calc(-30 * var(--px));

    }

    .p-shorts .swiper-button-next{

        right: calc(-30 * var(--px));

    }

    .p-shorts .swiper-pagination-bullets.swiper-pagination-horizontal{

        bottom: calc(-30 * var(--px));

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .p-shorts .swiper-pagination-bullet{

        width: calc(10 * var(--px));

        height: calc(10 * var(--px));

        margin: 0 calc(7 * var(--px)) !important;

        opacity: 1;

        box-shadow: var(--shadow-light);

        background: var(--gray-color-dark);

    }

    .p-shorts .swiper-pagination-bullet-active{

        background: var(--button-color);

    }

}



.p-blog{

    padding-top: var(--section-margin-top);

}

.p-blog .swiper{

    margin-top: calc(30 * var(--px));

    overflow: visible;

}

.p-blog .swiper-slide{

    height: auto;

}

@media screen and (min-width: 768px){

    .p-blog .swiper-wrapper{

        justify-content: center;

    }

    .p-blog .swiper-slide{

        width: calc((288 / 1200) * 100%);

        margin-right: calc((16 / 1200) * 100%);

        transition-property: opacity;

    }

    .p-blog .swiper-slide:last-child{

        margin-right: 0;

    }

    .p-blog .swiper-pagination,

    .p-blog .swiper-button-prev,

    .p-blog .swiper-button-next{

        display: none;

    }

}

@media screen and (max-width: 767px){

    .p-blog{

        overflow: hidden;

    }

    .p-blog__main.is-disabled{

        padding-bottom: calc(10 * var(--px));

    }

    .p-blog__main:not(.is-disabled){

        overflow: hidden;

        margin: 0 calc(-20 * var(--px)) 0;

        padding-bottom: calc(30 * var(--px));

    }

    .p-blog__main:not(.is-disabled) .swiper{

        width: 75%;

        margin-top: calc(25 * var(--px));

    }

    .p-blog .swiper-slide{

        opacity: 1;

    }

    .p-blog .swiper-button-prev,

    .p-blog .swiper-button-next{

        width: calc(40 * var(--px));

        height: calc(40 * var(--px));

        top: auto;

        bottom: calc(50% - calc(20 * var(--px)));

        color: #fff;

        border-radius: calc(30 * var(--px));

        background: var(--button-color);

        box-shadow: var(--shadow-base);

        margin: 0;

    }

    .p-blog .swiper-button-prev::after,

    .p-blog .swiper-button-next::after{

        font-weight: bold;

        transform: scale(0.35);

        transform-origin: center center;

    }

    .p-blog .swiper-button-prev{

        left: calc(-30 * var(--px));

    }

    .p-blog .swiper-button-next{

        right: calc(-30 * var(--px));

    }

    .p-blog .swiper-pagination-bullets.swiper-pagination-horizontal{

        bottom: calc(-30 * var(--px));

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .p-blog .swiper-pagination-bullet{

        width: calc(10 * var(--px));

        height: calc(10 * var(--px));

        margin: 0 calc(7 * var(--px)) !important;

        opacity: 1;

        box-shadow: var(--shadow-light);

        background: var(--gray-color-dark);

    }

    .p-blog .swiper-pagination-bullet-active{

        background: var(--button-color);

    }

}



.p-news{

    padding-top: var(--section-margin-top);

}

.p-news .c-news-list{

    margin-top: calc(30 * var(--px));

}

@media screen and (max-width: 767px) {

    .p-news .c-news-list{

        margin-top: calc(25 * var(--px));

    }

}



.p-event{

    margin-top: var(--section-margin-top);

    padding: var(--section-margin-top) 0;

    background: var(--section-yellow-color);

}

.p-event__list{

    display: flex;

    flex-wrap: wrap;

    margin-top: calc(40 * var(--px));

}

.p-event__list:not(:has(.p-event__item:nth-child(3))) {

    justify-content: center;

}

.p-event__item{

    width: 31.25%;

    margin: 3.125% 3.125% 0 0;

    background: #fff;

}

.p-event__item:nth-child(3n),

.p-event__item:last-child{

    margin-right: 0;

}

.p-event__item:nth-child(-n+3){

    margin-top: 0;

}

.p-event__link{

    border-radius: var(--radius-base);

    overflow: hidden;

    display: block;

    box-shadow: var(--shadow-light);

}

.p-event img{

    width: 100%;

    height: auto;

}

@media screen and (max-width: 767px) {

    .p-event__list{

        display: block;

        margin-top: calc(25 * var(--px));

    }

    .p-event__item,

    .p-event__item:nth-child(3n),

    .p-event__item:last-child,

    .p-event__item:nth-child(-n+3){

        width: 100%;

        margin: 0;

    }

    .p-event__item:nth-child(n+2){

        margin-top: calc(20 * var(--px));

    }

}



.p-faq{

    padding-top: var(--section-margin-top);

}