@charset "UTF-8";

/*------------------------------------------------------------mainphoto*/
.mainimage {
    width: 100%;
    height: calc(100svh - var(--header-contact-h-sp));

    .swiper-container,
    .swiper-wrapper,
    .swiper-slide {
        width: 100%;
        height: 100%;
    }

    .swiper-container {
        position: relative;
    }

    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }

    @media (width >=768px) {
        height: calc(100svh - var(--header-contact-h-md));
    }

    @media (width >=1366px) {
        height: calc(100svh - var(--header-contact-h-pc));

        .swiper-button-prev,
        .swiper-button-next {
            display: block;
            color: #fff;
        }

    }
}

.catch {
    position: absolute;
    text-align: left;
    font-weight: 900;
    color: var(--light-tx-color);
    text-shadow: 0px 2px 7px rgba(0, 0, 0, 0.8);
    font-size: clamp(2.8rem, 52vw/19.2, 5.2rem);
    line-height: 1.73;
    z-index: 10;
    left: 20px;
    top: 60px;
    transition: 0.2s;

    @media (width >=768px) {
        left: 50px;
        top: auto;
        bottom: 80px;
    }

    @media (width >=1440px) {
        bottom: 15%;
        left: 10%;
    }
}


.swiper-slide {
    &.slide01 {
        background: url(../img/index_img/slide01_sp.jpg) center center no-repeat;
        background-size: cover;
    }

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

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

    @media (width >=768px) {
        &.slide01 {
            background: url(../img/index_img/slide01_pc.jpg) center center no-repeat;
            background-size: cover;
        }

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

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

/*=======================================
greeting
=======================================*/
.greeting_cotainer{
    position: relative;
    z-index: 2;

    @media (width >= 992px) {
        &::after{
            content: "";
            display: block;
            width: 100%;
            height:var(--section-bottom) ;
            background: var(--bg-color01);
            position: absolute;
            z-index: -2;
            inset: auto 0 0 0;
        }
    }
}
.greeting{
    text-align: left;
    margin-bottom: 40px;
    .title01{
        color: var(--maincolor);
    }
    .cts_p{
        line-height: 2.2;
    }
    @media (width >= 992px) {
        margin-bottom: 0;
        .cts_p{
            width: 52%;
            margin-right: auto;
            padding-bottom: calc(var(--section-bottom) * 2);
        }
    }
}

.greeting_ph{
    margin-inline: calc(var(--container-pd) * -1);
    &>img{
        width: 100%;
        height: auto;
    }

    @media (width >= 992px) {
        width: 54.9%;
        height: 100%;
        margin-inline:0;
        position: absolute;
        z-index: -1;
        right: 0;
        top: calc(var(--section-top) / 2);
        border-radius: var(--base-radius) 0 0 var(--base-radius);
        overflow: hidden;
        &>img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

/*=======================================
features
=======================================*/
.features {
    display: flex;
    flex-direction: column;
    gap: 24px;
    counter-reset: number 0;

    &>li {
        list-style: none;

    }

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

        .features_item {
            width: calc(50% - 15px);
        }
    }

}

.features_item {
    background: var(--bg-white);
    border-radius: var(--inner-radius);
    padding: 20px;
    text-align: left;
    position: relative;
    z-index: 2;

    .cts_p {
        font-size: clamp(1.4rem, 17vw/13.66, 1.7rem);
    }

    &::before {
        counter-increment: number 1;
        content: counter(number);
        font-weight: 900;
        line-height: 1;
        position: absolute;
        font-size: clamp(10rem, 150vw/7.68, 15rem);
        z-index: -1;
        pointer-events: none;
        color: var(--bg-color01);
        top: -4px;
        left: 20px;
    }

    &::after {
        content: "";
        width: 60%;
        height: auto;
        aspect-ratio: 25/23;
        display: block;
        margin-inline: auto;
    }

    &:nth-child(1) {
        &::after {
            background: url(../img/index_img/service_img01.png) center center no-repeat;
            background-size: cover;
        }
    }

    &:nth-child(2) {
        &::after {
            background: url(../img/index_img/service_img02.png) center center no-repeat;
            background-size: cover;
        }
    }

    &:nth-child(3) {
        &::after {
            background: url(../img/index_img/service_img03.png) center center no-repeat;
            background-size: cover;
        }
    }

    &:nth-child(4) {
        &::after {
            background: url(../img/index_img/service_img04.png) center center no-repeat;
            background-size: cover;
        }
    }

    &:nth-child(5) {
        &::after {
            background: url(../img/index_img/service_img05.png) center center no-repeat;
            background-size: cover;
        }
    }

    &:nth-child(6) {
        &::after {
            background: url(../img/index_img/service_img06.png) center center no-repeat;
            background-size: cover;
        }
    }



    @media (width >=768px) {
        padding: 40px 30px;
    }

    @media (width >=992px) {
        .cts_p {
            padding-right: 40%;
        }

        &::after {
            content: "";
            width: 38%;
            position: absolute;
            z-index: -2;
            right: 20px;
            bottom: 20px;
        }

    }
}


/*=======================================
service
=======================================*/
.service {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.service_group {
    display: flex;
    flex-direction: column;
    gap: 24px 30px;

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

.service_title {
    @media (width >=768px) {
        flex: 0 1 calc(100% / 3 - 30px);
    }
}

.service_ti_group {
    border-block: 1px solid var(--white);
    color: var(--light-tx-color);
    padding-block: 0.8em;
    text-align: left;

    .service_ti {
        font-weight: 900;
        font-size: clamp(2rem, 36vw/13.66, 3.6rem);
        line-height: 1.4;
        margin-bottom: 0.4em;
    }

    .service_subti {
        font-size: var(--font-base);
    }

    @media (width >=768px) {
        padding-block: 1.5em;
    }
}

.service_item_area {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;

    @media (width >=768px) {
        gap: 28px 30px;
        flex: 2;
    }

}

.service_item {
    width: 100%;
    overflow: hidden;
    border-radius: var(--inner-radius);
    background: var(--bg-white);

    &>a {
        display: block;
        text-decoration: none;
        color: var(--base-tx-color);
        padding-bottom: clamp(18px, 30vw/7.68, 30px);


        &:hover {
            .service_img {
                overflow: hidden;

                :is(img) {
                    transform: scale(1.05);
                    filter: brightness(0.5);
                }
            }

            .more_btn {
                background: var(--maincolor);
                color: var(--light-tx-color);
            }
        }
    }

    .service_img {
        width: 100%;
        height: auto;
        aspect-ratio: 180 / 109;
        margin-bottom: 18px;

        :is(img) {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: 0.2s;
        }
    }

    .title02 {
        color: var(--maincolor);
    }

    .cts_p {
        padding-inline: clamp(18px, 30vw/7.68, 30px);
    }

    .more_btn {
        margin-top: 18px;
        margin-inline: clamp(18px, 30vw/7.68, 30px);
    }

    @media (width >=768px) {
        width: calc(50% - calc(30px / 2));
    }
}

.more_btn {
    text-decoration: none;
    background: var(--bg-white);
    color: var(--maincolor);
    border: 1px solid var(--maincolor);
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1em 0.5em 1.4em;
    border-radius: var(--btn-radius);
    transition: 0.2s;
    font-size: clamp(1.4rem, 18vw/13.66, 1.8rem);
    white-space: nowrap;

    &::after {
        font-family: 'Material Symbols Outlined';
        font-weight: normal;
        font-style: normal;
        line-height: 1;
        content: "\e5e1";
        display: inline-block;
    }
}


/*=======================================
top_link
=======================================*/
.top_link_list {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 10px;

    &>li {
        width: calc(50% - 5px);
    }


    @media (width >=1200px) {
        gap: 28px 30px;

        &>li {
            width: calc(25% - calc(30px * 3 / 4));

        }
    }

}

.top_link_item {
    background: var(--maincolor);
    color: var(--light-tx-color);
    border-radius: var(--inner-radius);

    .more_btn {
        margin-top: 18px;
    }

    &>a {
        text-decoration: none;
        color: var(--light-tx-color);
        display: block;
        height: 100%;
        padding: 14px;
        transition: 0.2s;

        &:hover {
            opacity: 0.8;

            .more_btn {
                background: var(--subcolor);
            }
        }

        @media (width >=768px) {
            padding: clamp(18px, 30vw/7.68, 30px);
        }
    }

}


/*=======================================
更新プログラム(連動)フォーマット
=======================================*/
.news_wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: left;

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

.news_title_area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .button_primary {
        width: min(48%, 200px);

        &>a {
            font-size: clamp(1.4rem, 18vw/13.66, 1.8rem);
        }

    }

    @media (width >=992px) {
        width: 262px;
        flex-direction: column;
        gap: clamp(24px, 50vw/19.2, 50px);
        justify-content: flex-start;
        align-items: flex-start;

        .button_primary {
            width: 200px;
        }
    }

}

.news_article_area {
    background: var(--bg-white);
    border-radius: var(--base-radius);
    padding: 20px;

    @media (width >=992px) {
        padding: clamp(30px, 60vw/19.2, 60px);
        width: calc(100% - 262px - 30px);
    }
}

#news01 {
    --mews-day-space: 16px;

    width: 100%;
    text-align: left;

    &>dl {
        display: flex;
        flex-direction: column;
        gap: 8px var(--mews-day-space);
        &>dt{
            font-weight: 700;
        }
        &>dt,
        &>dd {
            line-height: 1;
        }

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

            &>a{
                color: var(--base-tx-color);
                text-decoration: none;
                transition: 0.2s;
                &:hover{
                  opacity: 0.8;
                }
            }
        }

        &+dl {
            margin-top: 10px;
            padding-top:10px;
            border-top: 1px solid var(--subcolor);
        }

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

            &+dl {
                margin-top:clamp(24px, 40vw/19.2, 40px);
                padding-top: clamp(24px, 40vw/19.2, 40px);
            }

            &>dt {
                width: 6em;
            }

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

}