@charset "UTF-8";

/*------------------------------------------------------------mainphoto*/
.mainimage {
    background: url(../img/index_img/mainimg_sp.jpg) center center no-repeat;
    background-size: cover;
    border-radius: 60px 60px 0 0;
    height: calc(90vh - var(--header-h));
    position: relative;

    @media (width <= 360px) {
        height: calc(100vh - var(--header-h));
    }

    @media (width >=992px) {
        background: url(../img/index_img/mainimg.jpg) center center no-repeat;
        background-size: cover;
        height: calc(100vh - var(--header-h));
        border-radius: 100px 100px 0 0;
    }

}

.catch {
    position: absolute;
    inset: auto auto 40px 20px;
    text-align: left;
    font-weight: var(--font-ja-weight-bold);
    font-size: 2.2rem;

    .tx_line {
        background-color: rgba(255, 255, 255, 1);
    }

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

    @media (width <= 360px) {
        font-size:1.8rem;
        inset: auto auto 20px 16px;
    }

    @media (width >= 768px) {
        inset: auto auto var(--section-bottom) var(--container-pd);
        font-size: clamp(2.8rem,32vw/13.66,3.2rem);
    }
}

/*service ------------------------------------------------------------*/
.service_wrap {
    background: url(../img/index_img/service_bg_sp.jpg) center center no-repeat;
    background-size: cover;
    text-align: left;

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

.service_list {
    width:100%;
    border-radius: var(--inner-radius);
    box-shadow: var(--box-shadow);
    background: rgba(255, 255, 255, 0.9);
    padding: 16px clamp(20px, 32vw/13.66, 32px);
    margin-bottom: 1em;

    &>li {
        font-size: var(--font-l);
        line-height: 1.4;
        padding-block: 0.6em;
        padding-left: 1.4em;
        position: relative;

        &::before {
            content: "\eb85";
            font-family: remixicon !important;
            font-style: normal;
            display: block;
            position: absolute;
            left: 0;
            top: 0.35em;
            color: var(--maincolor);
            font-size: 1.2em;
        }
    }

    &>li:not(:last-child) {
        border-bottom: 1px solid var(--maincolor);
    }

    @media (width >= 768px) {
        width: min(68%, 800px);
    }
}

.service_note {
    display: flex;
    flex-direction: column;
    border: 3px solid var(--maincolor);
    background: var(--bg-white);
    width: min(100%, var(--inner-container-size));
    border-radius: var(--inner-radius);
    margin-inline: auto;
    margin-top: 40px;
    overflow: hidden;

    text-align: left;

    &>dt,
    &>dd {
        padding: 0.8em 1.2em;
        line-height: 1.4;
    }

    &>dt {
        background: var(--maincolor);
        color: var(--light-tx-color);
        font-size: var(--font-l);
    }

    &>dd {
        font-size: var(--font-l);
    }

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

        &>dt,
        &>dd {
            padding: 1em 1.2em;
        }
    }
}

/*map ------------------------------------------------------------*/
.service_map {
    overflow: hidden;
    border: 3px solid var(--maincolor);
    border-radius: var(--base-radius);
    width: min(100%, var(--inner-container-size));
    margin: 1em auto 0;
}

/*=======================================
更新プログラム(TOP完結)フォーマット
=======================================*/
#news02 {
    width: 100%;
    height: 320px;
    overflow-y: auto;
    padding: 16px;

    border-radius: var(--inner-radius);
    background: #fff;

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

.newsbox {
    display: flow-root;
    text-align: left;

    [class^="phbox_"] {
        margin-bottom: 24px;
    }

    .news_text_area {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .newstitle {
        border-left: 8px solid var(--maincolor);
        line-height: 1.4;
        padding: 0.2em 0 0.2em 0.8em;
        margin-bottom: 0.6em;
        font-weight: var(--font-ja-weight-bold);
        font-size: var(--font-l);

        &>span {
            display: block;
            color: var(--maincolor);
            font-size: var(--font-s);
            font-weight: var(--font-ja-weight);
        }
    }

    @media (width >=768px) {
        .newstitle {
            &>span {
                display: inline-block;
                margin-right: 1.4em;
            }
        }
    }

    .phbox_left,
    .phbox_right {
        :is(img) {
            border-radius: var(--inner-radius);
        }
    }

}