@charset "UTF-8";
/* CSS Document */

html {
    font-size: 62.5%;
}

html.is-fixed {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 1.6rem;
    color: var(--c_black);
    line-height: 1;
    overflow-x: hidden;
    /* 横スクロール防止 */
}

/* common */
.flexbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

.br-pc {
    display: block;
}

.br-sp {
    display: none;
}

.main-contents {
    width: 100%;
    margin-inline: auto;
    overflow: hidden;
}


.container {
    width: 100%;
    margin-inline: auto;
    margin-block-start: 10rem;
}

@media screen and (min-width: 1400px) {
    html {
        font-size: 62.5%;
    }
}

@media screen and (max-width: 767px) {
    html {
        font-size: 62.5%;
    }

    .br-pc {
        display: none;
    }

    .br-sp {
        display: block;
    }

    .main-contents {
        width: 100%;
        overflow: hidden;
    }

    .container {
        width: 100%;
        margin-inline: auto;
        margin-block-start: 8rem;
    }
}

/* 基本の見出しＨ２ */

.heading-lv2 {
    margin: auto;
    text-align: center;
    position: relative;
    font-size: 2.8rem;
    font-weight: bold;
    display: block;
    line-height: 1.5;
    margin-block-end: 6rem;
}

.heading-lv2::before {
    content: "";
    width: 50px;
    height: 4px;
    border-radius: 2px;
    background-color: #208E73;
    position: absolute;
    bottom: -2rem;
    left: 0;
    right: 0;
    margin: auto;
}

@media screen and (max-width: 768px) {
    .heading-lv2 {
        margin: auto;
        text-align: center;
        position: relative;
        font-size: 26px;
        font-weight: bold;
        display: block;
        margin-bottom: 60px;
    }
}


/* 基本の見出しＨ３ */
.heading-lv3 {
    font-size: 20px;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .heading-lv3 {
        font-size: 18px;
        font-weight: bold;
    }
}

/**************************************************
eyecatch
**************************************************/
.eyecatch {
    position: relative;
    width: 100%;
    height: 50rem;
    background: url(/images/ukeoi_mv.jpg) no-repeat center center / cover;
    object-fit: cover;
    margin: 0 auto;
    margin-block-start: 8rem;
}

.eyecatch-inner {
    width: 96rem;
    height: 100%;
    margin-inline: auto;
}

.eyecatch-textbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
}


.eyecatch-lead {
    font-size: 2.3rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding-block-end: 1.6rem;
    display: block;
    letter-spacing: .1rem;
    text-shadow: 0 0 6px rgb(0, 0, 0, 0.3);
}

.heading-lv1 {
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 0.03rem;
    line-height: 1.3;
    text-align: center;
    width: 100%;
    margin-block-end: 2rem;
    text-shadow: 0 0 6px rgb(0, 0, 0, 0.3);
}

.eyecatch-cta {
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-block: 2rem;
    margin-inline: auto;
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-block: 2rem;
    margin-inline: auto;
}

.eyecatch-cta li:first-of-type {
    margin-inline-end: 3rem;
}

@media screen and (max-width: 767px) {
    .eyecatch {
        width: 100%;
        height: 68rem;
        background: url(/images/ukeoi_mv_sp.jpg) no-repeat center center / cover;
        margin-block-start: 6rem;
    }

    .eyecatch-inner {
        width: 100%;
        height: 100%;
        margin-inline: auto;
    }

    .eyecatch-textbox {
        width: 100%;
        margin-inline: auto;
        display: inline-block;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        top: 43%;
    }

    .eyecatch-lead {
        font-size: 1.8rem;
        font-weight: bold;
        color: #fff;
        text-align: center;
        padding-block-end: 1rem;
        display: block;
        letter-spacing: .1rem;
    }

    .heading-lv1 {
        font-size: 3rem;
        font-weight: bold;
        letter-spacing: 0.05em;
        line-height: 1.5;
        text-align: center;
        width: 100%;
    }

    .eyecatch-cta {
        width: 94%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-block: 1rem;
        margin-inline: auto;
    }

    .eyecatch-cta li:first-of-type {
        margin-inline-end: 1rem;
    }
}


/**************************************************
introduction
**************************************************/
.introduction {
    width: 100%;
    margin: auto;
    text-align: center;
    padding-block-end: 8rem;
}

.introduction p {
    font-size: 1.6rem;
    line-height: 2;
}

@media screen and (max-width: 767px) {
    .introduction {
        width: 90%;
        margin: auto;
        text-align: center;
        padding-block-end: 6rem;
    }
}


/**************************************************
contract-work
**************************************************/
.contract-work {
    width: 100%;
    margin: auto;
    text-align: center;
    padding-block: 8rem;
    background-color: #EAF5E9;
}

.contract-work .flexbox {
    width: 78rem;
    margin: auto;
    display: flex;
    margin-block: 4rem;
}

.contract-work .flexbox li {
    width: calc(100% / 2 - 1.5rem);
    margin: auto;
    margin-inline-end: 3rem;
    padding: 2rem 2rem;
    background-color: #fff;
    box-sizing: border-box;
}

.contract-work .flexbox li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.contract-work .flexbox li:nth-child(2n) {
    margin-inline-end: 0rem;
}

.contract-work .flexbox li p {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    padding-block-start: 1rem;
}


@media screen and (max-width: 767px) {
    .contract-work {
        padding-block: 6rem;
    }

    .contract-work .heading-lv2 {
        width: 90%;
    }

    .contract-work p {
        width: 90%;
        margin: auto;
    }

    .contract-work .flexbox {
        width: 100%;
        margin: auto;
        display: flex;
        margin-block: 4rem;
    }

    .contract-work .flexbox {
        width: 90%;
        margin: auto;
        display: flex;
        margin-block: 4rem;
    }

    .contract-work .flexbox li {
        width: 100%;
        margin: auto;
        margin-inline: auto;
        padding: 1.6rem 1.6rem;
        background-color: #fff;
        box-sizing: border-box;
        margin-block-end: 3rem;
    }

    .contract-work .flexbox li:nth-child(2n) {
        margin-inline-end: auto;
        margin-block-end: 0rem;
    }
}

/**************************************************
.merit
**************************************************/

.merit {
    width: 100%;
    padding-block: 8rem;
}

.merit ul {
    width: 98rem;
    margin-inline: auto;
}

.merit ul li {
    width: calc(100% / 3 - 2rem);
}

.merit ul li img {
    width: 100%;
}

.merit ul li span {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.5;
    margin-block-start: 1rem;
    margin-block-end: .8rem;
    text-align: center;
}

.merit ul li p {
    font-size: 1.6rem;
    line-height: 1.5;
    text-align: justify;
}

@media screen and (max-width: 767px) {
    .merit {
        width: 100%;
        padding-block: 6rem;
    }

    .merit ul {
        width: 90%;
        margin-inline: auto;
    }

    .merit ul li {
        width: 90%;
        margin-inline: auto;
        margin-block-end: 3rem;
    }
}

/**************************************************
.step 
**************************************************/

.step {
    width: 100%;
    margin-inline: auto;
    padding-block: 10rem;
    text-align: center;
    background-color: #EAF5E9;
}

.step_inner {
    width: 78rem;
    margin-inline: auto;
    background-color: #fff;
    padding: 6rem 3rem 6rem;
    border-radius: 8px;
}

.step_inner img {
    width: 80%;
    text-align: center;
}

.flow05 {
    max-width: 80%;
    margin: 0 auto;
    padding-block-start: 2rem;
}

.flow05>li {
    list-style-type: none;
    position: relative;
    padding-left: 6rem;
}

.flow05>li:not(:last-child) {
    padding-bottom: 2rem;
}

.flow05>li .icon05 {
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    border-radius: 100vh;
    display: inline-block;
    background: #2F8A74;
    color: #fff;
    position: absolute;
    left: 0;
}

.flow05>li:not(:last-child)::before {
    content: '';
    background: #c3c3c3;
    width: 1px;
    height: 100%;
    position: absolute;
    top: calc(50% - -30px);
    left: 19px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.flow05>li dl {
    text-align: left;
}


.flow05>li dl dt {
    font-size: 20px;
    font-weight: 600;
    color: #2F8A74;
}

.flow05>li dl dd {
    margin-left: 0;
}

@media screen and (max-width: 767px) {
    .step {
        width: 100%;
        padding-block: 6rem;
    }

    .step_inner {
        width: 90%;
        margin-inline: auto;
        background-color: #fff;
        padding: 3rem 2rem;
        border-radius: 8px;
    }

    .step_inner img {
        width: 85%;
        text-align: center;
    }

    .flow05 {
        max-width: 100%;
        margin: 0 auto;
        padding-block-start: 2rem;
        margin-inline: 0;
    }

    .flow05>li {
        list-style-type: none;
        position: relative;
        padding-left: 5rem;
    }

    .flow05>li dl dt {
        font-size: 18px;
        font-weight: 600;
        color: #2F8A74;
    }

}


/**************************************************
.recommend
**************************************************/

.recommend {
    width: 100%;
    margin-inline: auto;
    padding-block: 10rem;
}

.recommend-inner {
    width: 98rem;
    margin-inline: auto;
    display: flex;
}

@media screen and (max-width: 768px) {
    .recommend {
        width: 100%;
        margin-inline: auto;
        padding-block: 6rem;
    }

    .recommend-inner {
        width: 90%;
        margin-inline: auto;
        display: flex;
    }
}

.recommend-list {
    width: 68rem;
    background-color: #F8F8F8;
    border-radius: 8px;
    padding: 3rem 4rem 5rem;
    margin-inline: auto;
}

@media screen and (max-width: 768px) {
    .recommend-list {
        width: 100%;
        margin-inline: auto;
        display: block;
        padding: 2rem 1rem 3rem;
    }
}

.recommend-list li {
    font-size: 1.8rem;
    line-height: 1.8;
    letter-spacing: 0;
    font-weight: bold;
    position: relative;
    padding: 1.6rem 0 1.6rem 7rem;
    border-bottom: 1px dashed #CBCBCB;
}

@media screen and (max-width: 768px) {
    .recommend-list li {
        font-size: 1.6rem;
        line-height: 1.8;
        letter-spacing: 0;
        font-weight: bold;
        position: relative;
        padding: 1.6rem 2rem 1.6rem 5rem;
        border-bottom: 1px dashed #CBCBCB;
    }
}

.recommend-list li::before {
    content: "";
    width: 26px;
    height: 24px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMyMDhFNzMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI5IDExIDEyIDE0IDIyIDQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIxIDEydjdhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJWNWEyIDIgMCAwIDEgMi0yaDExIj48L3BhdGg+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 20px;
    left: 28px
}

@media screen and (max-width: 768px) {
    .recommend-list li::before {
        content: "";
        width: 26px;
        height: 24px;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMyMDhFNzMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI5IDExIDEyIDE0IDIyIDQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIxIDEydjdhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJWNWEyIDIgMCAwIDEgMi0yaDExIj48L3BhdGg+PC9zdmc+");
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 20px;
        left: 8px
    }
}

/**************************************************
.contact 
**************************************************/

.contact {
    width: 100%;
    background-color: #2f8974;
    padding-block: 10rem;
}

@media screen and (max-width: 768px) {
    .contact {
        width: 100%;
        background-color: #2f8974;
        padding-block: 8rem;
    }
}

.contact_inner {
    width: 98rem;
    margin-inline: auto;
}

@media screen and (max-width: 768px) {
    .contact_inner {
        width: 90%;
        margin-inline: auto;
    }
}

.contact h2 {
    color: #fff;
    font-size: 2.8rem;
    text-align: center;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .contact h2 {
        color: #fff;
        font-size: 2.3rem;
        text-align: center;
        font-weight: bold;
    }
}

.contact_inner ul {
    width: 100%;
    display: flex;
}

.contact_inner ul li {
    width: calc(100% / 2);
    text-align: center;
    padding-block-start: 3rem;
}

@media screen and (max-width: 767px) {
    .contact_inner ul li {
        width: 100%;
        text-align: center;
        padding-block-start: 5rem;
        padding-inline-start: 1rem;
    }
}

.contact_inner ul li p {
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    margin-block-end: 1rem;
    letter-spacing: .05rem;
}

.contact_inner ul li .tel-link {
    position: relative;
    color: #fff;
    font-size: 3.2rem;
    font-weight: bold;
    margin-block-end: 1.2rem;
    letter-spacing: .1rem;
}

.contact_inner ul li .tel-link .fa-phone:before {
    font-size: 2.8rem;
    padding-inline-end: .8rem;
    line-height: 1;
}

@media screen and (max-width: 767px) {
    .contact_inner ul li .tel-link {
        position: relative;
        color: #fff;
        font-size: 3.2rem;
        font-weight: bold;
        margin-block-end: 2rem;
    }
}

.contact_inner ul li .note-text {
    font-size: 1.4rem;
    margin-block-start: 1rem;
    font-weight: normal;
}

.form-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 29rem;
    height: 5rem;
    margin: 0 auto;
    background-color: #F79A03;
    border-radius: 35px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
}

.form-btn span {
    display: flex;
    align-items: center;
    gap: 0.8rem; /* アイコンと文字の間隔 */
}

.mail-icon {
    display: inline-block;
    width: 2.1rem;
    height: 2rem;
    background-image: url(/images/mail-icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/**************************************************
.ukeoi-detail
**************************************************/

.ukeoi-detail {
    width: 100%;
    background-color: #F8F8F8;
    margin-inline: auto;
    padding-block: 8rem;
}

.detail_list {
    width: 68rem;
    background-color: #fff;
    border-radius: 8px;
    padding: 1.6rem 4rem 1.6rem;
    margin-inline: auto;
    display: flex;
}

@media screen and (max-width: 767px) {
    .detail_list {
        width: 90%;
        background-color: #fff;
        border-radius: 8px;
        padding: 1.6rem 2rem 1.6rem;
        margin-inline: auto;
        display: flex;
    }
}

.detail_list dt {
    width: 120px;
    font-size: 18px;
    line-height: 27px;
    vertical-align: top;
    padding: 20px 0;
    font-weight: bold;
}

@media screen and (max-width: 767px) {
    .detail_list dt {
        width: 100px;
        font-size: 18px;
        line-height: 27px;
        vertical-align: top;
        padding: 20px 0;
        font-weight: bold;
    }
}

.detail_list dd {
    width: calc(100% - 12rem);
    font-size: 18px;
    line-height: 27px;
    vertical-align: top;
    padding: 20px 0;
}


@media screen and (max-width: 767px) {
    .detail_list dd {
        width: calc(100% - 10rem);
        font-size: 18px;
        line-height: 27px;
        vertical-align: top;
        padding: 20px 0;
    }
}

/**************************************************
.question
**************************************************/

.question {
    width: 100%;
    background-color: #EAF5E9;
    padding-block: 10rem;
}

@media screen and (max-width: 767px) {
    .question {
        width: 100%;
        background-color: #EAF5E9;
        padding-block: 6rem;
    }
}

.question_inner {
    width: 78rem;
    margin-inline: auto;
}

@media screen and (max-width: 1080px) {
    .question_inner {
        width: 90%;
        margin-inline: auto;
    }
}

@media screen and (max-width: 767px) {
    .question_inner {
        width: 90%;
        margin-inline: auto;
    }
}

.question h2 {
    font-size: 2.8rem;
    text-align: center;
    font-weight: bold;
}

.question_topic {
    padding: 0;
    margin-top: 1.6rem;
    border-radius: 10px;
    background-color: #fff;
}

.question_topic:first-of-type {
    margin-top: 40px;
}

.question_topic dt {
    position: relative;
    padding: 2.4rem 5rem 2.4rem 4rem;
    font-size: 1.8rem;
    line-height: 1.3;
    font-weight: bold;
    color: #2F8A74;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 10px;
}

@media screen and (max-width: 767px) {
    .question_topic dt {
        position: relative;
        padding: 2rem 5rem 2rem 2rem;
        font-size: 1.6rem;
        font-weight: bold;
        color: #2F8A74;
        cursor: pointer;
        display: flex;
        align-items: center;
        border-radius: 10px;
    }

}

.question_topic dt span {
    background-color: #2F8A74;
    font-size: 1.8rem;
    color: #fff;
    text-align: center;
    border-radius: 1.8rem;
    line-height: 3.6rem;
    min-width: 3.6rem;
    font-weight: bold;
    margin-inline-end: 1rem;
}

.question_topic dt::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 2.4rem;
    width: 1.6rem;
    height: 0.3rem;
    /*縦線に*/
    transform: rotate(90deg);
    background: #2F8A74;
    transition: all .3s ease-in-out;
    border-radius: 10px;
}

.question_topic dt::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 2.4rem;
    /*横線*/
    width: 1.6rem;
    height: 0.3rem;
    background: #2F8A74;
    transition: all .2s ease-in-out;
    border-radius: 10px;
}

.question_topic dt.show::before {
    transform: rotate(180deg);
}

.question_topic dt.show::after {
    opacity: 0;
}

.question_topic dd {
    display: none;
    padding: 0 5rem 2.4rem 4rem;
    line-height: 1.8;
    border-radius: 10px;
}

/**************************************************
レスポンシブ
**************************************************/