@charset "UTF-8";
:root {
    --index-p-lh: 2.4;
}
/*------------------------------------------------------------mainphoto*/
.mainimage {
    position: relative;
    .catch {
        position: absolute;
        z-index: 11;
        top: 50%;
        transform: translateY(-50%);
        padding-top: var(--header-h);
        padding-left: max(4.685vw, 24px);
    }
    .slide_bg img {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 10;
        height: 100%;
        width: min(36.6vw, 560px);
    }

    .swiper-container,
    .swiper-slide {
        height: 60svh;
        width: 100vw;
    }
    .swiper-slide {
        &.slide01 {
            background: url(../img/index_img/slide01.jpg) center center no-repeat;
            background-size: cover;
        }

        &.slide02 {
            background: url(../img/index_img/slide02.jpg) center center no-repeat;
            background-size: cover;
        }
        &.slide03 {
            background: url(../img/index_img/slide03.jpg) center center no-repeat;
            background-size: cover;
        }
    }

    @media (width >= 1200px) {
        .swiper-container,
        .swiper-slide {
            height: 100svh;
        }
    }
}

.catch {
    text-align: left;
    .catch_tx {
        font-weight: 700;
        color: var(--base-tx-color);
        line-height: 1.4;
        font-size: clamp(3.2rem, 60vw/13.66, 6rem);
        text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 4px #fff;
        letter-spacing: 0.05em;
    }
    .en_tx {
        margin-top: 1em;
        font-weight: 700;
        color: var(--maincolor);
        line-height: 1.2;
        font-size: clamp(1.4rem, 24vw/13.66, 2.4rem);
    }
}

/* --------------------------
intro
--------------------------*/
.intro {
    position: relative;
    z-index: 5;
    padding-top: var(--section-top);
    padding-bottom: var(--section-bottom);
    background: url(../img/common_img/dark_bg_shape.png) top var(--section-top) center no-repeat;
    background-size: 100% auto;

    &::before {
        content: "";
        display: block;
        background: url(../img/common_img/dark_bg.png);
        width: 100vw;
        height: calc(100% - clamp(200px, 500vw/19.2, 500px));
        position: absolute;
        inset: auto 0 0;
        z-index: -1;
        pointer-events: none;
    }

    .title01 {
        .ja_tx {
            font-size: clamp(3.2rem, 60vw/13.66, 6rem);
        }
        .en_tx + .ja_tx {
            margin-top: 1.2rlh;
        }
    }
    .cts_p {
        line-height: var(--index-p-lh);
        text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 8px #fff;
    }

    @media (width >= 992px) {
        display: flex;
    }
}

.intro_txt_area {
    padding-left: var(--container-pd);
    padding-right: var(--container-pd);
    padding-bottom: clamp(24px, 32vw/13.66, 32px);
    position: relative;
    z-index: 2;
    .intro_tx {
        text-align: left;
    }
    @media (width >= 992px) {
        width: 50%;
        padding-bottom: 0;
        .intro_tx {
            width: 100%;
            max-width: calc(var(--container-max) / 2);
            margin-left: auto;
            padding-left: 1.7em;
        }
    }
}

.intro_img_area {
    position: relative;
    padding-bottom: min(10.98vw, 150px);

    .intro_img01 {
        width: 58%;
        height: auto;
        margin-left: auto;
        position: relative;
        z-index: 10;
        border-radius: var(--base-radius) 0 0 var(--base-radius);
        overflow: hidden;

        & > img {
            width: 100%;
            height: auto;
        }
    }
    .intro_img02 {
        width: 73.66%;
        height: auto;
        position: absolute;
        inset: auto auto 0 0;
        border-radius: 0 var(--base-radius) var(--base-radius) 0;
        overflow: hidden;

        & > img {
            width: 100%;
            height: auto;
        }
    }

    @media (width >= 992px) {
        width: 50%;
        .intro_img01 {
            width: 64.86%;
        }
        .intro_img02 {
            width: 82.284%;
            inset: auto auto 0 calc(clamp(80px, 140vw/19.2, 140px) * -1);
            border-radius: var(--base-radius);
        }
    }
}

/* --------------------------
works
--------------------------*/
.works {
    background: var(--bg-color02);
    position: relative;
    z-index: 10;
    &::before {
        content: "";
        display: block;
        background: url(../img/common_img/bg_shape.png) center top no-repeat;
        background-size: 100% auto;
        position: absolute;
        inset: 0 0 auto;
        z-index: -1;
        width: 100vw;
        height: 400px;
    }
    &::after {
        content: "";
        display: block;
        background: var(--bg-color01);
        width: 100vw;
        height: calc(100% - 380px);
        position: absolute;
        inset: auto 0 0;
        z-index: -2;
    }
}

.works_list {
    --works-list-gap: clamp(24px, 32vw/13.66, 32px);

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(32px, 40vw/13.66, 40px) var(--works-list-gap);

    & > li {
        width: calc(50% - var(--works-list-gap) / 2);
    }

    .works_img_tx {
        font-weight: 700;
        color: var(--subcolor);
        margin-top: 0.6em;
    }

    :is(img) {
        width: 100%;
        height: auto;
        border-radius: var(--base-radius);
    }

    @media (width >= 768px) {
        & > li {
            width: calc(100% / 3 - var(--works-list-gap) * 2 / 3);
        }
    }
    @media (width >= 1200px) {
        & > li {
            width: calc(25% - var(--works-list-gap) * 3 / 4);
        }
    }
}

/* --------------------------
news
--------------------------*/
.news {
    position: relative;
    z-index: 5;
    background: url(../img/common_img/dark_bg_shape.png) top center no-repeat;
    background-size: 100% auto;

    &::before {
        content: "";
        display: block;
        background: url(../img/common_img/dark_bg.png);
        width: 100vw;
        height: calc(100% - clamp(200px, 500vw/19.2, 500px));
        position: absolute;
        inset: auto 0 0;
        z-index: -1;
        pointer-events: none;
    }

    .section {
        max-width: var(--container-max-s);
    }
}

/*=======================================
更新プログラム(連動)フォーマット
=======================================*/
#news01 {
    --news-day-space:1.6em;

    width: 100%;
    text-align: left;

    & > dl {
        display: flex;
        flex-direction: column;
        gap:8px var(--news-day-space);
        border-bottom: 1px solid color-mix(in srgb, var(--subcolor), transparent 50%);
        padding:0 2px 1.6em;

        & > dt,
        & > dd {
            line-height: 1;
            font-size: var(--font-m);
        }

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

        .newstitle {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            & > a {
                text-decoration: none;
                color: var(--base-tx-color);
                transition: 0.2s;
                &:hover {
                    opacity: 0.8;
                }
            }
        }

        & + dl {
            margin-top: 1.6em;
        }

        @media (width >= 768px) {
            flex-direction: row;
            & > dt {
                width: 6em;
            }
            & > dd {
                width: calc(100% - 6em - var(--news-day-space));
            }
        }
    }
}