@charset "UTF-8";



body{

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

    color: var(--text-color);

    text-align: justify;

    word-break: break-all; 

    text-justify: inter-ideograph;

    text-justify: inter-character;

    word-wrap: break-word;

    overflow-wrap: break-word;

}



.u-link{

    cursor: pointer;

}

a,

.u-link{

    transition: var(--link-transition);

}

a:hover,

.u-link:hover{

    opacity: var(--link-hover-opacity);

}



.u-br-sp,

.u-text-sp{

    display: none;

}

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

    .u-br-pc,

    .u-text-pc{

        display: none;

    }

    .u-br-sp,

    .u-text-sp{

        display: inline;

    }

}



.js-hidden,

.js-hidden-child{

    opacity: 0;

    transition: opacity 0.5s ease-in-out;

}

.js-hidden.js-visible{

    opacity: 1;

}

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

    .js-hidden-parent.js-visible .js-hidden-child{

        opacity: 1;

    }

    .js-hidden-child:nth-child(1){

        transition-delay: 0.15s;

    }

    .js-hidden-child:nth-child(2) {

        transition-delay: 0.3s;

    }

    .js-hidden-child:nth-child(3) {

        transition-delay: 0.45s;

    }

    .js-hidden-child:nth-child(4) {

        transition-delay: 0.6s;

    }

    .js-hidden-child:nth-child(5) {

        transition-delay: 0.75s;

    }

}

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

    .js-hidden-child.js-visible{

        opacity: 1;

    }

}



/*-------------------------

    layout

-------------------------*/

.l-wrapper{

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

}

.l-wrapper-medium{

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

}

.l-wrapper-narrow{

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

}

.l-wrapper-fv{

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

}

.l-wrapper,

.l-wrapper-medium,

.l-wrapper-narrow,

.l-wrapper-fv{

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

    margin: 0 auto;

}

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

    .l-wrapper,

    .l-wrapper-medium,

    .l-wrapper-narrow,

    .l-wrapper-fv{

        width: 100%;

        max-width: none;

    }

    .l-wrapper-sp{

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

        margin: 0 auto;

    }

}



.l-contents{

    width: 100%;

}



.l-header{

    width: 100%;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 9999;

    transform: translateY(-100%);

    transition: transform 0.5s ease-in-out;

}

.l-header.is-top{

    transform: none;

}

.l-header.is-fixed{

    transform: none;

}

.l-header:not(.is-open){

    box-shadow: 0 calc(2 * var(--px)) calc(4 * var(--px)) rgba(0, 0, 0, 0.1);

}

.l-header__main{

    background: #fff;

}

.l-header__overlay{

    display: none;

    width: 100%;

    height: 100%;

    background: #000;

    opacity: 0.8;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 100;

}

.l-header__company{

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

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

    padding: calc(6.5 * var(--px)) calc(10 * var(--px)) calc(12.5 * var(--px)) calc(10 * var(--px));

}

.l-header__company-wrapper{

    display: flex;

    justify-content: flex-end;

}

.l-header__company-logo{

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

}

.l-header__wrapper{

    display: flex;

    align-items: center;

    justify-content: space-between;

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

}

.l-header__logo{

    display: block;

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

    flex-shrink: 0;

}

.l-header__logo img,

.l-header__company-logo img{

    width: 100%;

    height: auto;

}

.l-header__nav-button{

    display: flex;

    align-items: center;

}

.l-header__button{

    display: flex;

    align-items: center;

    justify-content: center;

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

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

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

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

    background: var(--button-color);

    font-weight: 600;

    transition: all 0.3s ease-in-out;

    border: calc(2 * var(--px)) solid var(--button-color);

    color: #fff;

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

}

.l-header__button:hover{

    opacity: 1;

    color: var(--button-color);

    background: #fff;

}

.l-header__button--regist{

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

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

    background: var(--cv-color);

}

.l-header__button--regist:hover{

    color: var(--cv-color);

}

.l-header__menu,

.l-header__sp-nav{

    display: none;

}

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

    .l-header__company{

        padding: 0;

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

        display: flex;

        align-items: center;

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

    }

    .l-header__wrapper{

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

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .l-header__company-logo {

        width: 40.147%;

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

    }

    .l-header__main{

        display: flex;

        align-items: center;

    }

    .l-header__logo{

        display: block;

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

        margin: 0 auto;

    }

    .l-header__nav-button{

        display: none;

    }

    .l-header__sp-nav{

        display: flex;

    }

    .l-header__sp-nav-item{

        width: 25%;

        border-right: 1px solid #fff;

    }

    .l-header__sp-nav-item:last-child{

        border-right: none;

    }

    .l-header__sp-nav-link{

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

        display: flex;

        align-items: center;

        justify-content: center;

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

        line-height: 1.4;

        text-align: center;

        font-weight: 600;

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

        border-bottom: calc(2 * var(--px)) solid var(--gray-color);

        transition: var(--link-transition);

    }

    .l-header__sp-nav-link.is-active{

        border-bottom-color: var(--brand-color);

    }

}



.l-nav{

    display: flex;

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

    white-space: nowrap;

}

.l-nav__item{

    font-weight: 600;

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

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

}

.l-nav__item:last-child{

    margin-right: 0;

}

.l-nav__link{

    cursor: pointer;

    display: block;

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

    position: relative;

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

    font-weight: 600;

}

.l-nav__link::after {

    background: #000;

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

    content: "";

    height: 1px;

    left: 0;

    position: absolute;

    transform: scale(0, 1);

    transform-origin: right top;

    transition: transform .3s;

    width: 100%;

}

.l-nav__item:hover .l-nav__link::after,

.l-nav__link.is-active::after{

    transform-origin: left top;

    transform: scale(1, 1);

}

.l-nav__sub{

    display: none;

    position: absolute;

    left: 0;

    top: 100%;

    width: 100%;

    border-top: 1px solid var(--gray-color-dark);

    background: #fff;

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

}

.l-nav__sub-list{

    display: flex;

    flex-wrap: wrap;

}

.l-nav__sub-item{

    width: calc(20% - calc(12 * var(--px)));

    text-align: center;

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

}

.l-nav__sub-item:nth-child(5n){

    margin-right: 0;

}

.l-nav__sub-item:nth-child(n+6){

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

}

.l-nav__sub-link:hover{

    opacity: 1;

}

.l-nav__sub-item--subject:nth-child(1) .l-nav__sub-link{

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

}

.l-nav__sub-item--subject:nth-child(2) .l-nav__sub-link {

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

}

.l-nav__sub-item--subject:nth-child(3) .l-nav__sub-link {

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

}

.l-nav__sub-item--subject:nth-child(4) .l-nav__sub-link {

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

}

.l-nav__sub-item--subject:nth-child(5) .l-nav__sub-link {

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

}

.l-nav__sub-link{

    display: block;

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

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

    position: relative;

    transition: var(--link-transition);

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

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

    overflow: hidden;

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

}

.l-nav__sub-link:hover::after {

    transform-origin: left top;

    transform: scale(1, 1);

}

.l-nav__sub-img{

    height: 0;

    padding-top: 65.218%;

    overflow: hidden;

    position: relative;

}

.l-nav__sub-img img{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: var(--link-transition);

}

.l-nav__sub-img .l-nav__sub-img__svg{

    background: var(--button-color);

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

}

.l-nav__sub-img .l-nav__sub-img__svg img{

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

    object-fit: contain;

    position: static;

}

.l-nav__sub-link:not(.l-nav__sub-link--comingsoon):hover .l-nav__sub-img img{

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

}

.l-nav__sub-text{

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

    display: flex;

    align-items: center;

    justify-content: center;

}

.l-nav__sub-link.l-nav__sub-link--comingsoon{

    position: relative;

}

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

    .l-nav{

        display: none;

    }

}



.l-main{

    padding-top: calc(130 * var(--px));

}

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

    .l-main{

        padding-top: calc(120 * var(--px));

    }

}



.l-sp-nav{

    display: none;

}

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

    .l-sp-nav{

        padding-top: calc(120 * var(--px));

        min-height: 100vh;

        min-height: 100svh;

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

        position: relative;

        top: 0;

        z-index: 9998;

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

    }

    .l-sp-nav__main{

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

    }

    .l-sp-nav__main-item{

        display: none;

    }

    .l-sp-nav__sub{

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

    }

    .l-sp-nav__sub-item + .l-sp-nav__sub-item{

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

    }

    .l-sp-nav__sub-link{

        display: flex;

        align-items: center;

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

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

        font-weight: 600;

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

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

        position: relative;

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

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

        overflow: hidden;

    }

    .l-sp-nav__sub-link::after{

        content: '\f054';

        color: var(--brand-color);

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

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

        font-weight: 600;

        position: absolute;

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

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

    }

    .l-sp-nav__sub-link[target='_blank']::after {

        content: '\f08e';

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

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

    }

    .l-sp-nav__sub-item--subject:nth-child(1) .l-sp-nav__sub-link{

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

    }

    .l-sp-nav__sub-item--subject:nth-child(1) .l-sp-nav__sub-link::after{

        color: var(--philosophy-color);

    }

    .l-sp-nav__sub-item--subject:nth-child(2) .l-sp-nav__sub-link{

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

    }

    .l-sp-nav__sub-item--subject:nth-child(2) .l-sp-nav__sub-link::after{

        color: var(--science-color);

    }

    .l-sp-nav__sub-item--subject:nth-child(3) .l-sp-nav__sub-link{

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

    }

    .l-sp-nav__sub-item--subject:nth-child(3) .l-sp-nav__sub-link::after{

        color: var(--money-color);

    }

    .l-sp-nav__sub-item--subject:nth-child(4) .l-sp-nav__sub-link{

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

    }

    .l-sp-nav__sub-item--subject:nth-child(4) .l-sp-nav__sub-link::after{

        color: var(--english-color);

    }

    .l-sp-nav__sub-item--subject:nth-child(5) .l-sp-nav__sub-link{

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

    }

    .l-sp-nav__sub-item--subject:nth-child(5) .l-sp-nav__sub-link::after{

        color: var(--programming-color);

    }

    .l-sp-nav__close{

        background: var(--button-color);

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

        margin: 0 auto;

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

        display: flex;

        align-items: center;

        justify-content: center;

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

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

    }

    .l-sp-nav__close-icon{

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

        color: #fff;

    }

    .l-sp-nav__close-text{

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

        color: #fff;

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

        font-weight: 600;

    }

    .l-sp-nav__sub-link-img{

        width: 16vw;

        margin-right: 4vw;

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

        overflow: hidden;

    }

    .l-sp-nav__sub-link-img__svg{

        height: calc(16vw * 0.65218);

        background: var(--button-color);

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .l-sp-nav__sub-link-img img{

        width: 100%;

        height: auto;

    }

    .l-sp-nav__sub-link-img .l-sp-nav__sub-link-img__svg img{

        width: auto;

        height: calc(16vw * 0.65218 * 0.55);

    }

}



.l-cta__link{

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

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

    cursor: pointer;

}

.l-cta__link::before{

    content: "";

    width: 100%;

    height: 100%;

    background: url(../img/common/footer_CTA.jpg) center / 100% 100% no-repeat;

    position: absolute;

    top: 0;

    left: 0;

    transition: var(--link-transition);

}

.l-cta__link:hover{

    opacity: 1;

}

.l-cta__link:hover::before{

    transform: scale(1.1);

}

.l-cta__wrapper{

    text-align: center;

    position: relative;

    z-index: 1;

}

.l-cta__text-subject{

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

    font-weight: 600;

}

.l-cta__title{

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

    font-weight: 600;

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

}

.l-cta__title::before{

    content: "";

    display: block;

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

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

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

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

}

.l-cta__text-member{

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

    font-weight: 600;

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

}

.l-cta__button{

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

}

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

    .l-cta__link{

        height: auto;

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

    }

    .l-cta__link::before{

        background-size: cover;

    }

    .l-cta__text-subject{

        font-weight: 600;

    }

    .l-cta__title{

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

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

    }

    .l-cta__title::before{

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

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

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

    }

    .l-cta__text-member{

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

    }

    .l-cta__button{

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

    }

}



.l-footer-mirai{

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

    border-top: 1px solid var(--gray-color-light);

    border-bottom: 1px solid var(--gray-color-light);

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

}

.l-footer-mirai__logo{

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

    margin: 0 auto;

}

.l-footer-mirai__logo img{

    width: 100%;

    height: auto;

}

.l-footer-mirai__sns{

    display: flex;

    justify-content: center;

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

}

.l-footer-mirai__sns-link{

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--brand-color);

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

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

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

    background: #fff;

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

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

}

.l-footer-mirai__sns-item{

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

}

.l-footer-mirai__sns-item:last-child{

    margin-right: 0;

}

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

    .l-footer-mirai{

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

    }

    .l-footer-mirai__logo{

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

    }

    .l-footer-mirai__logo img{

        width: 100%;

        height: auto;

    }

    .l-footer-mirai__sns{

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

    }

    .l-footer-mirai__sns-link{

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

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

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

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

    }

    .l-footer-mirai__sns-item{

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

    }

}



.l-footer__menu{

    display: flex;

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

}

.l-footer__menu-group{

    width: 25%;

}

.l-footer__menu-title{

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

    font-weight: 600;

}

.l-footer__menu-list{

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

}

.l-footer__menu-item{

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

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

}

.l-footer__menu-link{

    position: relative;

}

.l-footer__menu-link::before{

    color: var(--brand-color);

    content: '\f054';

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

    font-weight: 600;

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

}

.l-footer__menu-link[target='_blank'] .l-footer__menu-text::after,

.l-footer__menu-link.is-blank .l-footer__menu-text::after {

    color: var(--brand-color);

    content: '\f08e';

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

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

    font-weight: 600;

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

}

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

    .l-footer__menu-link--comingsoon{

        opacity: 0.5;

    }

    .l-footer__menu-link--comingsoon::after{

        display: none !important;

    }

}

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

    .l-footer__menu{

        display: block;

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

    }

    .l-footer__menu-group{

        width: 100%;

        border-bottom: 1px solid var(--gray-color);

    }

    .l-footer__menu-group:first-child{

        border-top: 1px solid var(--gray-color);

    }

    .l-footer__menu-title{

        display: block;

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

        font-weight: 600;

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

        position: relative;

    }

    .l-footer__menu-title::before{

        position: absolute;

        content: '\2b';

        font-weight: 600;

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

        color: var(--brand-color);

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

        position: absolute;

        left: auto;

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

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

    }

    .l-footer__menu-title.is-open::before{

        content: '\f068';

    }

    .l-footer__menu-list{

        display: none;

        padding: calc(6 * var(--px)) calc(15 * var(--px)) 0;

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

    }

    .l-footer__menu-item{

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

    }

    .l-footer__menu-item:first-child{

        margin-top: 0;

    }

    .l-footer__menu-link{

        display: block;

        font-weight: 600;

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

        position: relative;

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

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

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

        overflow: hidden;

    }

    .l-footer__menu-link::before{

        content: '\f054';

        color: var(--brand-color);

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

        position: absolute;

        left: auto;

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

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

        margin-right: 0;

    }

    .l-footer__menu-link[target='_blank']::before,

    .l-footer__menu-link.is-blank::before {

        content: '\f08e';

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

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

    }

    .l-footer__menu-link::after,

    .l-footer__menu-link[target='_blank'] .l-footer__menu-text::after,

    .l-footer__menu-link.is-blank .l-footer__menu-text::after{

        display: none;

    }

    .l-footer__menu-item--subject:nth-child(1) .l-footer__menu-link{

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

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

    }

    .l-footer__menu-item--subject:nth-child(1) .l-footer__menu-link::before{

        color: var(--philosophy-color);

    }

    .l-footer__menu-item--subject:nth-child(2) .l-footer__menu-link{

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

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

    }

    .l-footer__menu-item--subject:nth-child(2) .l-footer__menu-link::before{

        color: var(--science-color);

    }

    .l-footer__menu-item--subject:nth-child(3) .l-footer__menu-link{

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

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

    }

    .l-footer__menu-item--subject:nth-child(3) .l-footer__menu-link::before{

        color: var(--money-color);

    }

    .l-footer__menu-item--subject:nth-child(4) .l-footer__menu-link{

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

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

    }

    .l-footer__menu-item--subject:nth-child(4) .l-footer__menu-link::before{

        color: var(--english-color);

    }

    .l-footer__menu-item--subject:nth-child(5) .l-footer__menu-link{

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

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

    }

    .l-footer__menu-item--subject:nth-child(5) .l-footer__menu-link::before{

        color: var(--programming-color);

    }

}



.l-footer-wao{

    background: #fff;

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

}

.l-footer-wao .l-footer__menu-list{

    display: flex;

    justify-content: center;

    margin-top: 0;

}

.l-footer-wao .l-footer__menu-item{

    margin: 0;

}

.l-footer-wao .l-footer__menu-item:not(:first-child){

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

}

.l-footer-wao__copy{

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

    text-align: center;

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

}

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

    .l-footer-wao{

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

    }

    .l-sp-btn + .l-footer .l-footer-wao{

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

    }

    .l-footer-wao .l-footer__menu-list{

        display: block;

        margin: 0;

    }

    .l-footer-wao .l-footer__menu-item{

        width: 100%;

    }

    .l-footer-wao .l-footer__menu-item:nth-child(n+2){

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

    }

    .l-footer-wao .l-footer__menu-link{

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

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

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

    }

    .l-footer-wao .l-footer__menu-link::before{

        top: calc(9 * var(--px));

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

    }

    .l-footer-wao__copy{

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

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

    }

}



.l-sp-btn{

    display: none;

}

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

    .l-sp-btn{

        width: 100%;

        z-index: 999;

        position: fixed;

        bottom: 0;

        left: 0;

        background: #fff;

        display: flex;

        justify-content: space-between;

    }

    .l-sp-btn__item{

        width: calc(50%  - 0.5px);

    }

    .l-sp-btn__item:only-child{

        width: 100%;

    }

    .l-sp-btn__link{

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

        display: flex;

        align-items: center;

        justify-content: center;

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

        color: #fff;

        font-weight: 600;

    }

    .l-sp-btn__item:first-child .l-sp-btn__link:not(.l-sp-btn__link--custom){

        background: var(--button-color);

    }

    .l-sp-btn__item:last-child .l-sp-btn__link:not(.l-sp-btn__link--custom){

        background: var(--cv-color);

    }

}



/*-------------------------

    component

-------------------------*/

.c-breadcrumb{

    border-bottom: 1px solid var(--gray-color-light);

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

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

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

    background: #fff;

    position: relative;

    z-index: 1;

}

.c-breadcrumb__list{

    display: flex;

    flex-wrap: wrap;

}

.c-breadcrumb__item{

    flex-shrink: 0;

    max-width: 100%;

}

.c-breadcrumb__item:not(:last-child)::after{

     content: ">";

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

}

.c-breadcrumb__link{

    color: var(--brand-color);

    text-decoration: underline;

    text-underline-offset: calc(3 * var(--px));

}

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

    .c-breadcrumb{

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

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

    }

    .c-breadcrumb__item:not(:last-child)::after{

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

    }

    .c-breadcrumb__link{

        text-underline-offset: calc(1 * var(--px));

    }

}



.c-button{

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

}

.c-button.is-small{

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

}

.c-button__link {

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto;

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

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

    text-align: center;

    text-decoration: none;

    color: #fff;

    background: var(--button-color);

    position: relative;

    border: 2px solid var(--button-color);

    transition: var(--link-transition);

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

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

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

}

.c-button__link:hover{

    opacity: 1;

}

.c-button__link.is-member{

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

    background: var(--cv-color);

    color: #fff;

}

.c-button.is-small .c-button__link {

    margin-left: 0;

}

.c-button__link:not(.is-member):hover{

    background: #fff;

    color:  var(--button-color);

}

.c-button__link.is-member:hover,

.l-cta__link:hover .c-button__link{

    background: #fff;

    color: var(--cv-color);

}

.c-button__link::after{

    content: '\f054';

    color: #fff;

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

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

    font-weight: 600;

    position: absolute;

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

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

    transition: var(--link-transition);

}

.c-button__link.is-back::after{

    content: '\f053';

    right: auto;

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

}

.c-button__link.is-member::after{

    color: #fff;

}

.c-button__link[target="_blank"]::after,

.c-button__link.is-blank::after{

    content: '\f08e';

}

.c-button__link:not(.is-member):hover::after,

.l-cta__link:hover .c-button__link::after{

    color: var(--button-color);

}

.c-button__link.is-member:hover::after,

.l-cta__link:hover .c-button__link.is-member::after{

    color: var(--cv-color);

}

.c-button__text {

    position: relative;

}

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

    .c-button{

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

    }

    .c-button.is-small{

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

    }

    .c-button__link {

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

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

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

    }

    .c-button.is-small .c-button__link {

        width: 100%;

    }

}



.c-section-title {

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

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 600;

}

.c-section-title-small{

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

}

.c-section-title::before{

    content: "";

    display: inline-block;

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

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

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

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

    flex-shrink: 0;

}

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

    .c-section-title {

        line-height: 1.35;

        justify-content: flex-start;

        align-items: flex-start;

        height: auto;

    }

    .c-section-title::before{

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

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

        margin: calc(5 * var(--px)) calc(12 * var(--px)) 0 0;

    }

}



.c-page-title{

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

    position: relative;

    z-index: 1;

}

.c-page-title__wrapper{

    display: flex;

    align-items: center;

    justify-content: center;

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

}

.c-page-title__title{

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

    font-weight: 600;

    position: relative;

    z-index: 1;

    text-align: center;

}

.c-page-title__title-sub{

    display: block;

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

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

    font-weight: normal;

}

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

    .c-page-title__wrapper{

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

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

    }

    .c-page-title__img{

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

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

        flex-shrink: 0;

    }

    .c-page-title__title{

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

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

        flex-grow: 1;

    }

    .c-page-title__title-sub{

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

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

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

    }

}



.c-guide{

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

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

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

}

.c-guide__list{

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

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

}

.c-guide__item{

    width: calc(20% - calc(12 * var(--px)));

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

    flex-wrap: wrap;

}

.c-guide__item:nth-child(5n),

.c-guide__item:last-child{

    margin-right: 0;

}

.c-guide__item:nth-child(-n+5){

    margin-top: 0;

}

.c-guide__img{

    background: var(--button-color);

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

    display: flex;

    align-items: center;

    justify-content: center;

}

.c-guide__img img{

    width: auto;

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

}

.c-guide__link{

    display: block;

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

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

    position: relative;

    transition: var(--link-transition);

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

    font-weight: 600;

    text-align: center;

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

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

    overflow: hidden;

}

.c-guide__link:hover{

    opacity: 1;

}

.c-guide__img{

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

    overflow: hidden;

}

.c-guide__img img{

    transition: var(--link-transition);

}

.c-guide__link:hover .c-guide__img img{

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

}

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

    .c-guide__list{

        display: block;

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

    }

    .c-guide__item,

    .c-guide__item:nth-child(4n),

    .c-guide__item:nth-child(-n+4),

    .c-guide__item:last-child{

        width: 100%;

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

    }

    .c-guide__item:first-child{

        margin-top: 0;

    }

    .c-guide__link{

        display: flex;

        align-items: center;

        padding-bottom: 0;

    }

    .c-guide__link::after {

        content: '\f054';

        color: var(--brand-color);

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

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

        font-weight: 600;

        position: absolute;

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

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

        transition: var(--link-transition);

    }

    .c-guide__img{

        width: 27.028%;

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

        margin-bottom: 0;

    }

    .c-guide__img img{

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

    }

    .c-guide__text{

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

    }

}



.c-stream-table{

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

    width: 100%;

}

.c-stream-table__day{

    background: var(--gray-color);

    color: #fff;

    display: block;

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

    margin: 0 auto;

    text-align: center;

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

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

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

}

.c-stream-table__day.is-active{

    background: var(--brand-color);

}

.c-stream-table td{

    font-size: 0;

    border-bottom: dashed 1px var(--gray-color-dark);

    border-right: dashed 1px var(--gray-color-dark);

}

.c-stream-table__tbody tr:first-child td{

    border-top: dashed 1px var(--gray-color-dark);

}

.c-stream-table__thead th{

    width: 18%;

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

}

.c-stream-table__thead th:first-child{

    width: 10%;

}

.c-stream-table__tbody td{

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

    vertical-align: middle;

}

.c-stream-table__tbody td:last-child{

    border-right: none;

}

.c-stream-table__subject{

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

    display: inline-block;

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

    font-weight: 600;

    text-align: center;

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

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

    position: relative;

}

.c-stream-table__subject + .c-stream-table__subject{

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

}

.c-stream-table__subject:only-child{

    width: 100%;

}

.c-stream-table__subject.is-philosophy{

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

}

.c-stream-table__subject.is-science{

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

}

.c-stream-table__subject.is-money{

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

}

.c-stream-table__tbody th{

    position: relative;

}

.c-stream-table__time{

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

    font-weight: 600;

    position: absolute;

    top: calc(-7 * var(--px));

    left: 0;

}

.c-stream-table__subject-level::before{

    content: " ";

}

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

    .c-stream-table{

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

    }

    .c-stream-table__day{

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

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

        padding: calc(6 * var(--px)) calc(3 * var(--px));

    }

    .c-stream-table__tbody td{

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

    }

    .c-stream-table__subject{

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

    }

    .c-stream-table__subject + .c-stream-table__subject{

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

    }

    .c-stream-table__time{

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

    }

    .c-stream-table__thead th{

        width: 17%;

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

    }

    .c-stream-table__thead th:first-child{

        width: 15%;

    }

    .c-stream-table__subject{

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

    }

    .c-stream-table__subject-level{

        display: block;

    }

    .c-stream-table__subject-level::before{

        display: none;

    }

}



.c-news-list__item{

    border-top: 1px solid var(--gray-color);

}

.c-news-list__item:last-child{

    border-bottom: 1px solid var(--gray-color);

}

.c-news-list__link{

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

    display: flex;

    align-items: center;

    position: relative;

}

.c-news-list__link::after {

    content: '\f054';

    color: var(--brand-color);

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

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

    font-weight: 600;

    position: absolute;

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

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

    transition: var(--link-transition);

}

.c-news-list__link[target='_blank']::after {

    content: '\f08e';

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

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

}

.c-news-list__date{

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

    white-space: nowrap;

    flex-shrink: 0;

}

.c-news-list__icon{

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

    background: var(--brand-color);

    color: #fff;

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

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

    white-space: nowrap;

    flex-shrink: 0;

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

}

.c-news-list__icon + .c-news-list__icon{

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

}

.c-news-list__title{

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

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

    font-weight: 600;

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

}

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

    .c-news-list__link{

        padding: calc(13 * var(--px)) calc(35 * var(--px)) calc(13 * var(--px)) 0;

        transition: none;

        flex-wrap: wrap;

    }

    .c-news-list__link::after {

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

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

    }

    .c-news-list__icon{

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

        padding: calc(4 * var(--px)) calc(9 * var(--px));

    }

    .c-news-list__icon + .c-news-list__icon{

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

    }

    .c-news-list__title{

        width: 100%;

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

    }

}



.c-faq-list{

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

}

.c-faq-list__item{

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

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

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

}

.c-faq-list__item:nth-child(n+2){

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

}

.c-faq-list__question{

    display: flex;

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

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

    font-weight: 600;

}

.c-faq-list--small .c-faq-list__question{

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

}

.c-faq-list__question::before{

    content: "Q.";

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

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

    color: var(--brand-color);

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

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

    line-height: 1;

    white-space: nowrap;

}

.c-faq-list--small .c-faq-list__question::before{

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

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

}

.c-faq-list__answer{

    display: flex;

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

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

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

}

.c-faq-list--small .c-faq-list__answer{

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

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

}

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

    .c-faq-list{

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

    }

    .c-faq-list__item{

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

    }

    .c-faq-list__question{

        position: relative;

    }

    .c-faq-list__question.is-accordion{

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

    }

    .c-faq-list__question::before{

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

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

        margin: calc(2 * var(--px)) calc(5 * var(--px)) 0 0;

    }

    .c-faq-list--small .c-faq-list__question::before{

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

    }

    .c-faq-list__question.is-accordion::after{

        position: absolute;

        content: '\2b';

        font-weight: 600;

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

        color: var(--brand-color);

        position: absolute;

        left: auto;

        right: 0;

        top: calc(50% - calc(13.5 * var(--px)) + 5px);

    }

    .c-faq-list__question.is-open::after{

        content: '\f068';

    }

    .c-faq-list__question.is-accordion + .c-faq-list__answer{

        display: none;

    }

}



.c-leadout-button{

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

}

.c-leadout-button__wrapper{

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

    display: flex;

    align-items: center;

    flex-direction: column;

    position: relative;

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

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

    overflow: hidden;

}

.c-leadout-button__wrapper::before{

    content: "";

    width: 100%;

    height: 100%;

    background: var(--brand-color);

    opacity: 0.1;

    position: absolute;

    top: 0;

    left: 0;

    z-index: -1;

}

.c-leadout-button__wrapper::before{

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

}

.c-leadout-button__text{

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

    text-align: center;

    display: flex;

}

.c-leadout-button.is-member .c-leadout-button__wrapper::before{

    background: var(--cv-color);

}

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

    .c-leadout-button__wrapper{

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

    }

    .c-leadout-button__text{

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

        text-align: left;

    }

    .c-leadout-button__text::before{

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

    }

    .c-leadout-button__button{

        width: 100%;

    }

}



.c-comingsoon::after{

    content: "COMING SOON";

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

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

    letter-spacing: 2px;

    color: #fff !important;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0,0,0,0.7);

    position: absolute;

    top: 0;

    left: 0;

    z-index: 10;

    font-weight: 600;

}



.c-line-modal{

    display: none;

    width: 100%;

    height: 100%;

    z-index: 10000;

    backdrop-filter: blur(5px);

    position: fixed;

    top: 0;

    left: 0;

}

.p-details-english__container,

.c-line-modal__bg{

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

}

.c-line-modal__bg{

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

}

.p-details-english__container{

    display: flex;

    align-items: center;

    justify-content: center;

}

.c-line-modal__wrapper{

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

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

    margin: 0 auto;

    overflow: hidden;

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

}

.c-line-modal__head{

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

}

.c-line-modal__head-close{

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

    position: relative;

    z-index: 1;

    margin: 0 0 0 auto;

    cursor: pointer;

    transition: var(--link-transition);

}

.c-line-modal__head-close img{

    width: 100%;

    height: auto;

}

.c-line-modal__head-close:hover{

    opacity: var(--link-hover-opacity);

}

.c-line-modal__content{

    background: #fff;

    position: relative;

    z-index: 1;

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

    overflow: hidden;

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

}

.c-line-modal__main{

    display: flex;

    align-items: center;

    justify-content: center;

}

.c-line-modal__main-text{

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

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

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

}

.c-line-modal__qr{

    text-align: center;

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

}



.c-pager{

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

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

}

.c-pager__link.is-prev::before,

.c-pager__link.is-next::before{

    color: var(--brand-color);

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

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

    font-weight: 600;

}

.c-pager__link.is-prev::before{

    content: '\f053';

}

.c-pager__link.is-next::before{

    content: '\f054';

}

.c-pager__link{

    display: flex;

    align-items: center;

    justify-content: center;

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

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

    color: #000;

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

    font-weight: 600;

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

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

}

.c-pager__link.is-dot{

    background: none;

}

.c-pager__item:not(:first-child){

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

}

.c-pager__link.is-active{

    background: var(--button-color);

    color: #fff;

    box-shadow: none;

}

.c-pager__link.is-active:hover{

    opacity: 1;

}

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

    .c-pager{

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

    }

    .c-pager__item{

        width: calc((100% / 9) - (40px / 9));

    }

    .c-pager__item:not(:first-child){

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

    }

    .c-pager__link{

        aspect-ratio: 1 / 1;

        width: auto;

        height: auto;

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

    }

    .c-pager__link.is-prev::before,

    .c-pager__link.is-next::before{

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

    }

}



.c-blog-link{

    display: block;

    height: 100%;

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

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

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

}

.c-blog-link__image{

    width: 100%;

    height: 0;

    padding-top: 61.805%;

    position: relative;

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

    overflow: hidden;

}

.c-blog-link__image img{

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    object-fit: contain;

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

}

.c-blog-link__category{

    display: flex;

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

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

}

.c-blog-link__category-icon{

    width: var(--fs-tiny-text);

    height: var(--fs-tiny-text);

    border-radius: var(--fs-tiny-text);

    margin: calc(4 * var(--px)) calc(5 * var(--px)) 0 0;

    flex-shrink: 0;

}

.c-blog-link__title{

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

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

    font-weight: 600;

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

}

.c-blog-link__category,

.c-blog-link__image + .c-blog-link__title{

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

}

.c-blog-link__time{

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

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

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

    color: var(--gray-color-darker);

}

.c-blog-link__time::before{

    content: '\f073';

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

    font-weight: 600;

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

}

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

    .c-blog-link__title{

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

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

    }

    .c-blog-link__category-icon{

        margin: calc(2 * var(--px)) calc(4 * var(--px)) 0 0;

    }

}

.c-shorts-modal {

    display: none;

    position: fixed;

    inset: 0;

    z-index: 10000;

    width: 100%;

    height: 100%;

    backdrop-filter: blur(5px);

}

.c-shorts-modal__bg {

    position: absolute;

    inset: 0;

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

}

.c-shorts-modal__wrapper {

    width: 100vw;

    height: 100dvh;

    display: flex;

    justify-content: center;

    align-items: center;

}

.c-shorts-modal__wrapper-in {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    overflow: hidden;

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

    height: min(100svh, 760px);

    width: calc(min(100svh, 760px) * (360 / 760));

    padding: clamp(0px, calc(60 / 760 * 100svh), 60px) 0;

    box-sizing: border-box;

}

.c-shorts-modal__iframe {

    width: 100%;

    height: 100%;

    border: none;

    object-fit: cover;

    border-radius: inherit;

}

.c-shorts-modal__close {

    position: absolute;

    right: 0;

    top: clamp(0px, calc(20 / 760 * 100svh), 20px);

    width: clamp(0px, calc(24 / 760 * 100svh), 24px);

    height: clamp(0px, calc(24 / 760 * 100svh), 24px);

    cursor: pointer;

    transition: var(--link-transition);

    z-index: 2;

}

.c-shorts-modal__close:hover {

    opacity: var(--link-hover-opacity);

}

.c-shorts-modal__close img {

    width: 100%;

    height: auto;

    vertical-align: top;

}

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

    /* スマホ（～767px）： 幅414pxの端末でちょうどよく見える 310×641pxを基準に調整 */

    .c-shorts-modal__wrapper-in {

        height: min(100svh, 641px);

        width: calc(min(100svh, 641px) * (310 / 641));

        padding: clamp(0px, calc(45 / 641 * 100svh), 45px) 0;

    }

    .c-shorts-modal__close {

        width: clamp(0px, calc(18 / 641 * 100svh), 18px);

        height: clamp(0px, calc(18 / 641 * 100svh), 18px);

        top: clamp(0px, calc(15 / 641 * 100svh), 15px);

    }

}

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

    /* 小型スマホ（～413px）： 幅375pxの端末でちょうどよく見える 280×588pxを基準に調整 */

    .c-shorts-modal__wrapper-in {

        height: min(100svh, 588px);

        width: calc(min(100svh, 588px) * (280 / 588));

        padding: clamp(0px, calc(45 / 588 * 100svh), 45px) 0;

    }

    .c-shorts-modal__close {

        width: clamp(0px, calc(18 / 588 * 100svh), 18px);

        height: clamp(0px, calc(18 / 588 * 100svh), 18px);

        top: clamp(0px, calc(15 / 588 * 100svh), 15px);

    }

}