@charset "UTF-8";

/*------------------------------------------------------------mainphoto*/
.mainimg_wrap {
    position: relative;
    z-index: 1;
    background: url(../img/index_img/main_ph.jpg) 26% center no-repeat;
    background-size: cover;
    width: 100%;
    height: 80svh;
    overflow: clip;

    @media (width >=768px) {
        height: calc(100vh - var(--header-h));
        min-height: 640px;
        background: url(../img/index_img/main_ph.jpg) center center no-repeat;
    background-size: cover;
    }

    /*catch*/
    .mainimg_catch {
        position: absolute;
        inset: 1rem -1rem auto auto;
        z-index: 10;
        animation: catch-animation 1.8s ease-in-out infinite alternate-reverse;
        transition: 0.4s;

        :is(img) {
            width: 30vw;
            min-width: 220px;
            height: auto;
            transition: 0.4s;
        }

        @media (width >=768px) {
            inset: -2rem var(--container-pd) auto auto;
        }

        @media (width <=360px) {
            :is(img) {
                min-width: initial;
                width: 160px;
            }
        }
    }

    .mainimg_sub_catch {
        position: absolute;
        inset: auto auto 40px var(--container-pd);
        text-align: left;
        font-size: clamp(1.5rem, 1.159rem + 1.45vw, 2.25rem);
        color: var(--light-tx-color);
        -webkit-text-stroke: 4px var(--maincolor);
        text-stroke: 4px var(--maincolor);
        paint-order: stroke;
        z-index: 11;

        @media (width <=360px) {
            inset: auto auto 24px var(--container-pd);
        }
    }

    /*blob*/
    [class^="main_blob0"] {
        position: absolute;

        :is(img) {
            height: auto;
            transition: 0.4s;
        }


        @media (width <=360px) {
            :is(img) {
                min-width: initial !important;
                width: 160px !important;
            }
        }
    }

    .main_blob01 {
        :is(img) {
            width: 40vw;
            min-width: 240px;
        }

        animation: fluffy-animation01 1.8s ease-in-out infinite alternate-reverse;
        inset:-16.2vw auto auto -6.7vw;
        z-index: 1;
    }

    .main_blob02 {
        :is(img) {
            width: 39.9vw;
            min-width: 240px;
        }

        animation: fluffy-animation02 1.8s ease-in-out infinite alternate-reverse;
        inset: -11.8vw -7.7vw auto auto;
        z-index: 2;
    }

    .main_blob03 {
        :is(img) {
            width: 32.3vw;
            min-width: 300px;
        }

        inset:12vw auto auto -248px;
        z-index: 6;

        @media (width >=768px) {
            inset: 50% auto auto -248px;
            transform: translateY(-53%);
        }
    }

    .main_blob04 {
        :is(img) {
            width: 31.3vw;
            min-width: 200px;

        }

        inset: auto -18vw 10vw auto;
        z-index: 5;

        @media (width >=768px) {
            inset: 50% -18vw auto auto;
            transform: translateY(-40%);
        }
    }

    .main_blob05 {
        :is(img) {
            width: 30vw;
            min-width: 200px;
        }

        animation: fluffy-animation01 1.8s ease-in-out infinite alternate-reverse;
        inset: auto auto -2vw -6.1vw;
        z-index: 4;
    }

    .main_blob06 {
        :is(img) {
            width: 30.2vw;
            min-width: 200px;
        }

        animation: fluffy-animation02 1.8s ease-in-out infinite alternate-reverse;
        inset: auto -5.4vw -11.1vw auto;
        z-index: 3;
    }


}

@keyframes catch-animation {
    0% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(4px);
    }
}

@keyframes fluffy-animation01 {
    0% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(6px);
    }
}

@keyframes fluffy-animation02 {
    0% {
        transform: translateY(6px);
    }

    100% {
        transform: translateY(-6px);
    }
}

/*nav制御*/
@media (width>=768px) {
    .sub_menu {
        inset: auto auto calc(var(--header-h) - 2.5rem) 50%;
        transform: translateX(-50%);
    }

    .is-stuck {
        .sub_menu {
            inset: calc(var(--header-h) - 2.5rem) auto auto 50%;
            transform: translateX(-50%);
        }
    }
}

/*=======================================
greeting
=======================================*/
.greeting_body {
    .section {
        padding-top: 0;
    }
}

.greeting_area {
    padding-top: clamp(5rem, 3.295rem + 7.27vw, 8.75rem);
    position: relative;
    z-index: 5;
}

.greeting_lines {
    position: absolute;
    z-index: 2;
    top: clamp(3.125rem, 1.705rem + 6.06vw, 6.25rem);
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 240px;
    text-align: right;

    &>img {
        width: clamp(7.5rem, 3.608rem + 16.61vw, 16.063rem);
        height: auto;
        margin-right: calc(clamp(2.5rem, 1.534rem + 4.12vw, 4.625rem) * -1);
        animation: catch-animation 1.8s ease-in-out infinite alternate-reverse;
    }

    @media (width >=768px) {
        max-width: none;
        width: 588px;
    }
}

.greeting_ph_wrap {
    width: 80%;
    max-width: 240px;
    margin-inline: auto;
    position: relative;
    z-index: 1;

    @media (width >=768px) {
        max-width: none;
        width: 588px;
    }
}

.greeting_ph {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.greeting_ti_group {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 0.273rem + 0.97vw, 1rem);
    margin-block: clamp(1rem, 0.318rem + 2.91vw, 2.5rem);
    position: relative;
    z-index: 1;

    .greeting_ti {
        font-size: clamp(1.5rem, 0.818rem + 2.91vw, 3rem);
        font-weight: 800;
    }

    .en_img {
        order: -1;

        &>img {
            width: 39.53vw;
            max-width: 541px;
            min-width: 240px;
            height: auto;
        }
    }
}

.greeting_tx {
    line-height: 1.6;
    font-size: var(--font-base);
    position: relative;
    z-index: 1;

    &+.greeting_tx {
        margin-top: 1rem;
    }
}

[class^="greeting_blob"] {
    position: absolute;

    :is(img) {
        height: auto;
        transition: 0.4s;
    }
}

.greeting_blob01 {
    :is(img) {
        width: 36vw;
        min-width: 160px;
        max-width: 493px;
    }

    inset: 5.6vw auto auto 3.8vw;
    animation: fluffy-animation02 1.8s ease-in-out infinite alternate-reverse;
    z-index: -2;

    @media (width <=460px) {
        inset: 5.6vw auto auto 0;
    }
}

.greeting_blob02 {
    :is(img) {
        width: 22vw;
        min-width: 120px;
        max-width: 295px;
    }

    inset: 12.3vw 1.4vw auto auto;
    animation: fluffy-animation02 1.8s ease-in-out infinite alternate-reverse;
    z-index: -1;
}

.greeting_blob03 {
    :is(img) {
        width: 24.5vw;
        min-width: 120px;
        max-width: 335px;
    }

    inset: 33.7vw auto auto 3.5vw;
    animation: fluffy-animation01 1.8s ease-in-out infinite alternate-reverse;
    z-index: -1;

    @media (width <=460px) {

        inset: 46vw auto auto 3.5vw;
    }
}

.greeting_blob04 {
    :is(img) {
        width: 36vw;
        min-width: 160px;
        max-width: 488px;
    }

    inset: 26.4vw 4.4vw auto auto;
    animation: fluffy-animation01 1.8s ease-in-out infinite alternate-reverse;
    z-index: -2;

    @media (width <=460px) {
        inset: 52vw 0 auto auto;
    }
}

/*=======================================
news
=======================================*/
.news_body {
    background: var(--season-color);

    margin-top: var(--moyou-height);
    padding-bottom: var(--moyou-height);

    .section {
        margin-top: calc(var(--moyou-height) * -1);
        padding-block: 0;
    }

    &::before {
        content: "";
        display: block;
        height: var(--moyou-height);
        width: 100vw;
        margin-inline: calc(var(--container-pd) * -1);
        transform: translateY(calc(calc(var(--moyou-height) - 1px) * -1));
    }

    &::after {
        content: "";
        display: block;
        height: var(--moyou-height);
        width: 100vw;
        margin-inline: calc(var(--container-pd) * -1);
        background: url(../img/common_img/bg_white.png) center center no-repeat;
        background-size: cover;
        transform: translateY(calc(var(--moyou-height) + 1px));
    }
}

/*season 制御*/
.season_summer {
    .news_body {
        &::before {
            background: url(../img/common_img/season/bg_summer.png) center center no-repeat;
            background-size: cover;
        }
    }
}

.season_spring {
    .news_body {
        &::before {
            background: url(../img/common_img/season/bg_spring.png) center center no-repeat;
            background-size: cover;
        }
    }
}

.season_winter {
    .news_body {
        &::before {
            background: url(../img/common_img/season/bg_winter.png) center center no-repeat;
            background-size: cover;
        }
    }
}

/*更新プログラム(連動)フォーマット---------------*/
#news01 {
    --mews-day-space: 16px;

    width: 100%;
    max-width: 960px;
    margin-inline: auto;
    text-align: left;

    background: var(--bg-white);
    border-radius: var(--base-radius);
    padding: clamp(1.5rem, 0.818rem + 2.91vw, 3rem) clamp(1.25rem, 0.682rem + 2.42vw, 2.5rem);

    position: relative;
    z-index: 1;



    &>dl {
        display: flex;
        flex-direction: column;
        gap: 8px var(--mews-day-space);
        border-bottom: 2px solid var(--season-color);
        padding: 1rem 0.5rem;

        :is(a) {
            text-decoration: none;
            color: var(--base-tx-color);
            transition: 0.2s;

            &:hover {
                opacity: 0.8;
                text-decoration: underline;
            }
        }

        &>dt {
            font-family: var(--font-en);
            font-weight: var(--font-en-weight);
            color: var(--subcolor);
        }

        &>dt,
        &>dd {
            line-height: 1;
        }

        .newstitle {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }


        @media (width >=768px) {
            flex-direction: row;
            padding: 2rem 1rem;

            &>dt {
                width: 6em;
            }

            &>dd {
                width: calc(100% - 6em - var(--mews-day-space));
            }
        }
    }
}

.news_title_group {
    position: relative;
    z-index: 2;

    .news_title {
        font-size: clamp(1.5rem, 1.239rem + 1.12vw, 2.075rem);
        font-weight: 800;
        position: relative;
        z-index: 2;
    }

    .en_tx {
        font-size: clamp(1.125rem, 0.841rem + 1.21vw, 1.75rem);
        position: relative;
        z-index: 2;
    }

    &::after {
        content: "";
        width: clamp(18.75rem, 13.636rem + 21.82vw, 30rem);
        height: auto;
        aspect-ratio: 480/70;
        display: block;
        position: absolute;
        z-index: 1;
        inset: auto auto calc(clamp(2rem, 1.489rem + 2.18vw, 3.125rem) * -1) 50%;
        transform: translateX(-50%);
    }
}

/*season設定*/
.season_summer {
    .news_title_group {
        &::after {
            background: url(../img/common_img/season/ti_parts_summer.png) center center no-repeat;
            background-size: cover;
        }
    }
}

.season_winter {
    .news_title_group {
        &::after {
            background: url(../img/common_img/season/ti_parts_winter.png) center center no-repeat;
            background-size: cover;
        }
    }
}

.season_spring {
    .news_title_group {
        &::after {
            background: url(../img/common_img/season/ti_parts_spring.png) center center no-repeat;
            background-size: cover;
        }
    }
}

.news_more_btn {
    position: absolute;
    z-index: 2;
    right: calc(clamp(0.625rem, -0.227rem + 3.64vw, 2.5rem) * -1);
    bottom: calc(clamp(0.625rem, 0.341rem + 1.21vw, 1.25rem) * -1);

    &>a {
        width: clamp(2.5rem, 1.307rem + 5.09vw, 5.125rem);
        height: auto;
        aspect-ratio: 82/76;
        background: url(../img/common_img/blob/btn_blob.svg) center center no-repeat;
        background-size: cover;
        color: var(--light-tx-color);
        font-family: var(--font-en);
        font-weight: var(--font-en-weight);
        text-decoration: none;
        display: grid;
        place-items: center;
        font-size: clamp(1rem, 0.773rem + 0.97vw, 1.5rem);
        transition: 0.2s;

        &:hover {
            opacity: 0.8;
            text-decoration: none;
        }
    }
}

/*=======================================
school
=======================================*/
.school_body {
    padding-bottom: var(--moyou-height);
}

.school_banner_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px 40px;

    @media (width >=768px) {
        flex-direction: row;


        &>li {
            flex: 1;
        }
    }
}

.school_banner {
    :is(a){
        text-decoration: none;
        transition: 0.4s;
        .school_banner_title{
            color: var(--base-tx-color);
        }

        &:hover{
            opacity: 0.8;
        }
    }

    .en_tx{
        font-size: clamp(2rem, 1.338rem + 2.83vw, 3.75rem);
        white-space: nowrap;
    }

    @media (width <=768px) {
        width: min(100%,320px);
        margin-inline: auto;
    }
}
.school_ph_wrap {
    width: 100%;
    margin-inline: auto;
}
.school_ph {
    overflow: visible;
}
.school_banner_title{
    transform: translateY(-1rem);
    position: relative;
    z-index: 5;
    font-size:clamp(1.125rem, 0.983rem + 0.61vw, 1.5rem);
    font-weight: 800;
    white-space: nowrap;
    margin-bottom: 1rem;
    .more_btn{
        position: absolute;
        z-index: 2;
        top: 70%;
        right: 0;

        @media (width <= 768px) {
            top: 50%;
            right:1.5rem;
        }
        @media (width >= 1200px) {
            top: 50%;
            transform: translateY(-50%);
        }
    }

    &::after{
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        right:0;
        transform : translate(-50%,-50%);
        z-index: -1;
        height: auto;
    }
}

/*season*/
.summer_school{
    animation: fluffy-animation02 1.8s ease-in-out infinite alternate-reverse;
    .en_tx{
        color: var(--summer-color);
    }
    .school_banner_title{
        &::after{
            background: url(../img/index_img/summer_ti.svg) center center no-repeat;
            background-size: cover;
            aspect-ratio: 265/104;
            width: clamp(15rem, 14.409rem + 2.52vw, 16.563rem);
        }
    }
}

.winter_school{
    animation: fluffy-animation01 1.8s ease-in-out infinite alternate-reverse;
    .en_tx{
        color: var(--winter-color);
    }
    .school_banner_title{
        &::after{
            background: url(../img/index_img/winter_ti.svg) center center no-repeat;
            background-size: cover;
            aspect-ratio: 277/112;
            width: clamp(15rem, 14.125rem + 3.73vw, 17.313rem);
        }
    }
}

.spring_school{
    animation: fluffy-animation02 1.8s ease-in-out infinite alternate-reverse;
    .en_tx{
        color: var(--spring-color);
    }
    .school_banner_title{
        &::after{
            background: url(../img/index_img/spring_ti.svg) center center no-repeat;
            background-size: cover;
            aspect-ratio: 289/97;
            width: clamp(15rem, 13.841rem + 4.94vw, 18.063rem);
        }
    }
}
.school_contact_btn{
    margin-bottom: 2rem;
}