@charset "utf-8";

/* ---------- fv ---------- */

.fv_flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 0 auto 0;
}

.fv_text_area {
    flex-grow: 1;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}

.fv_text_area_inner {
    padding: 10% 5%;
}

.fv_text_1 {
    font-size: 1.2em;
}

.fv_text_2 {
    margin-top: 5%;
    font-size: 1em;
}

@media screen and (min-width: 768px) {
    .fv_flex {
        flex-direction: row;
    }

    .fv_flex img {
        width: 45%;
        height: auto;
    }

    .fv_text_area {
        font-size: 0.8rem;
    }

    .fv_text_1 {
        font-size: 1.4em;
    }
}

@media screen and (min-width: 1024px) {
    .fv_text_area {
        font-size: 1rem;
    }
}

@media screen and (min-width: 1440px) {
    .fv_text_1 {
        font-size: 1.6em;
    }

    .fv_text_2 {
        font-size: 1.2em;
    }
}

@media screen and (min-width: 1920px) {}

/* ---------- 業務内容 ---------- */

.business {
    padding: 10% 5%;
    background-image: url(../img/bg.png);
    background-size: contain;
}

.business_flexbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto 0;
}

.business_flexbox_box {
    margin-top: 15%;
}

.business_flexbox_box_flex {}

.business_flexbox_box_flex_textarea {
    /* padding: 5%; */
}

.business_flexbox_box_flex_textarea_text {
    margin-top: 5%;
    font-weight: 700;
    line-height: 1.5;
}

.business_flexbox_box_flex_img {
    margin-top: 5%;
}

.vm_link {
    display: block;
    width: 50%;
    margin: 5% auto 0;
    padding: 0.5em;
    border: 2px #2C2B4F solid;
    border-radius: 30px;
    font-family: "Prompt", serif;
    font-weight: 700;
}

.vm_link_flex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: auto;
}

.vm_link img {
    width: 30%;
    height: auto;
}

@media screen and (min-width: 768px) {
    .headline_2 {
        width: 45%;
        margin: 0 auto 0 0;
    }

    .business_flexbox_box:nth-of-type(even) .headline_2 {
        margin: 0 0 0 auto;
    }

    .business_flexbox {}

    .business_flexbox_box {
        margin-top: 10%;
    }

    .business_flexbox_box_flex {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
    }

    .business_flexbox_box:nth-of-type(even) .business_flexbox_box_flex {
        flex-direction: row-reverse
    }

    .business_flexbox_box_flex_textarea {
        position: relative;
        width: 45%;
        padding: 2% 2% 0;
    }

    .business_flexbox_box_flex_img {
        width: 55%;
        margin: 0;
    }

    .vm_link {
        position: absolute;
        bottom: 0%;
        left: 50%;
        transform: translate(-50%, 0%);
        margin: 0;
    }
}

@media screen and (min-width: 1024px) {
    .business_flexbox_box_flex_textarea {
        padding: 4% 4% 0;
    }

    .vm_link {
        bottom: 15%;
        left: 50%;
    }
}

@media screen and (min-width: 1440px) {
    .business {
        padding: 10%;
    }

    .business_flexbox_box_flex_textarea {
        font-size: 1.2rem;
    }

    .vm_link {
        bottom: 25%;
        left: 50%;
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 1920px) {}

/* ---------- 外構工事 ---------- */

.exterior {
    padding: 10% 5%;
}

.exterior_flexbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 100%;
    margin: 5% auto 0;
}

.exterior_flexbox_box {
    width: 100%;
}

.exterior_flexbox_box_text {
    position: relative;
    display: block;
    width: fit-content;
    margin: 2% auto 0;
    padding-right: 2rem;
    font-weight: 700;
    color: #2C2B4F;
}

.exterior_flexbox_box_text::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    border: 0.3em solid transparent;
    border-left: 0.6em solid #2C2B4F;
}

@media screen and (min-width: 768px) {
    .exterior_flexbox {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px;
    }

    .exterior_flexbox_box {
        width: calc((100% - 24px) / 2);
    }
}

@media screen and (min-width: 1024px) {}

@media screen and (min-width: 1440px) {
    .exterior {
        padding: 10%;
    }

    .exterior_flexbox {
        gap: 48px;
        width: 90%;
    }

    .exterior_flexbox_box {
        width: calc((100% - 48px) / 2);
    }

    .exterior_flexbox_box_text {
        padding-right: 3rem;
        font-size: 1.4rem;
    }

    .exterior_flexbox_box_text::after {
        /* border: 4px solid transparent;
        border-left: 6px solid #2C2B4F; */
    }
}

@media screen and (min-width: 1920px) {}

/* ----------  ---------- */

.built {
    padding: 10% 5%;
    background-image: url(../img/bg.png);
    background-size: cover;
}

.built_flexbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto 0;
}

.built_flexbox_textarea {}

.built_flexbox_textarea_text {
    margin-top: 5%;
    font-weight: 700;
    line-height: 1.5;
}

.built_flexbox_img {
    margin-top: 5%;
}

@media screen and (min-width: 768px) {
    .built_flexbox {
        flex-direction: row;
        align-items: stretch;
        gap: 16px;
        margin: 5% auto 0;
    }

    .built_flexbox_textarea {
        position: relative;
        flex: 2;
    }

    .built_flexbox_textarea_text {
        margin: 0;
    }

    .built_flexbox_img {
        flex: 3;
        margin: 0;
    }

    .built .vm_link {
        position: initial;
        transform: translate(0, 0);
        margin: 5% auto 0;
        padding: 0.5em 1em;
    }
}

@media screen and (min-width: 1024px) {
    .built_flexbox {
        gap: 24px;
    }

    .built .vm_link {
        position: absolute;
        bottom: 15%;
        left: 50%;
        transform: translate(-50%, 0%);
        margin: 0;
    }
}

@media screen and (min-width: 1440px) {
    .built {
        padding: 10%;
    }

    .built_flexbox {
        gap: 36px;
    }

    .built_flexbox_textarea {
        font-size: 1.2rem;
    }

    .built .vm_link {
        bottom: 25%;
        left: 50%;
    }
}

@media screen and (min-width: 1920px) {
    .built_flexbox {
        gap: 48px;
    }
}

/* ---------- 施工事例 ---------- */

.works {
    padding: 10% 5%;
}

.works_text {
    margin: 5% auto 0;
    text-align: center;
    font-weight: 700;
    line-height: 1.5;
}

.works_flexbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 5% auto 0;
}

.works_flexbox_box_text {
    display: block;
    margin: 0 auto 2%;
}

@media screen and (min-width: 768px) {
    .works_flexbox {
        flex-direction: row;
        gap: 16px;
    }

    .works_flexbox_box:nth-of-type(1) {
        margin-bottom: 10%;
    }

    .works_flexbox_box:nth-of-type(2) {
        margin-top: 10%;
    }

    .works .vm_link {
        position: initial;
        transform: translate(0, 0);
        width: 24%;
        margin: 5% auto 0;
    }
}

@media screen and (min-width: 1024px) {
    .works .vm_link {
        width: 22%;
    }
}

@media screen and (min-width: 1440px) {
    .works {
        padding: 10%;
    }

    .works_text {
        font-size: 1.2rem;
    }

    .works_flexbox {
        gap: 24px;
    }

    .works_flexbox_box_text {
        font-size: 1.2rem;
    }

    .works .vm_link {
        width: 18%;
    }
}

@media screen and (min-width: 1920px) {
    .works .vm_link {
        width: 18%;
    }
}

/* ---------- 求人情報 ---------- */

.recruit {
    padding: 10% 5%;
    background-image: url(../img/recruit_bg.png);
    background-size: cover;
    background-position: right;
}

.recruit .headline_1 {
    color: #fff;
}

.recruit_text {
    margin: 5% auto 0;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.recruit_table {
    margin: 5% auto 0;
}

.recruit_table th,
.recruit_table td {
    display: block;
    padding: 0;
    border: 0;
    text-align: center;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}

.recruit .vm_link {
    border: 4px #fff solid;
    color: #fff;
}

@media screen and (min-width: 768px) {
    .recruit {
        padding: 10%;
    }

    .recruit_table th,
    .recruit_table td {
        display: table-cell;
        padding: 0.5em;
        text-align: left;
    }

    .recruit_table th {
        width: 25%;
    }

    .recruit_table td {
        width: auto;
    }

    .recruit .vm_link {
        position: initial;
        transform: translate(0, 0);
        width: 24%;
        margin: 5% auto 0;
    }
}

@media screen and (min-width: 1024px) {
    .recruit_table th {
        width: 20%;
    }

    .recruit .vm_link {
        width: 22%;
    }
}

@media screen and (min-width: 1440px) {
    .recruit_text {
        font-size: 1.3rem;
    }

    .recruit_table th,
    .recruit_table td {
        font-size: 1.2rem;
    }

    .recruit .vm_link {
        width: 18%;
    }
}

@media screen and (min-width: 1920px) {}

/* ---------- 会社概要 ---------- */

.company {
    padding: 10% 5%;
}

.company_flexbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 5% auto 0;
}

.company_table {
    width: 100%;
}

.company_table th,
.company_table td {
    display: block;
    padding: 0.5em 0;
    border: 0;
    border-bottom: 1px #000 solid;
    font-weight: 700;
}

.company .vm_link {
    position: initial;
    transform: translate(0, 0);
    display: block;
    width: 50%;
    margin: 5% auto 0;
    padding: 0.5em;
    border: 2px #2C2B4F solid;
    border-radius: 30px;
    font-family: "Prompt", serif;
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    .company {
        padding: 5% 10%;
    }

    .company_flexbox {
        flex-direction: row;
        gap: 24px;
    }

    .company_img_area {
        flex: 2;
    }

    .company_table_area {
        flex: 3;
    }

    .company_table th,
    .company_table td {
        display: table-cell;
    }

    .company_table th {
        width: 30%;
    }

    .company_table td {
        width: 70%;
    }

    .company .vm_link {
        width: 24%;
        margin: 5% auto 0;
    }
}

@media screen and (min-width: 1024px) {
    .company_table th {
        width: 25%;
    }

    .company_table td {
        width: 75%;
    }

    .company .vm_link {
        width: 22%;
    }
}

@media screen and (min-width: 1440px) {
    .company {
        padding: 10%;
    }

    .company_flexbox {
        flex-direction: row;
        gap: 48px;
    }

    .company_img_area {
        flex: 1;
    }

    .company_table_area {
        flex: 1;
    }

    .company_table th,
    .company_table td {
        padding: 1em 0;
        font-size: 1.2rem;
    }

    .company_table th {
        width: 25%;
    }

    .company_table td {
        width: 75%;
    }

    .company .vm_link {
        width: 18%;
    }
}

@media screen and (min-width: 1920px) {
    .company_table th {
        width: 20%;
    }

    .company_table td {
        width: 80%;
    }
}

/* ---------- お問い合わせ ---------- */

.contact {
    padding: 10% 5%;
    background-image: url(../img/contact_bg.png);
    background-size: cover;
    background-position: center;
}

.contact .headline_1 {
    color: #fff;
}

.contact_textarea {
    margin: 10% auto 0;
}

.contact_text {
    width: fit-content;
    margin: 0 auto 0;
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
}

.contact_linkarea {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 10% auto 0;
}

.contact_link {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: fit-content;
    margin: 0 auto 0;
    padding: 0.75em 1em;
    border-radius: 33px;
    background-color: #2C2B4F;
    text-align: center;
    color: #fff;
}

.contact_link_img {
    display: block;
    width: auto;
    height: 1em;
}

.contact_link_text {
    display: block;
}

.contact_link_text_tel {
    font-family: "Prompt", serif;
}

@media screen and (min-width: 768px) {
    .contact_textarea {
        margin: 5% auto 0;
    }

    .contact_linkarea {
        gap: 120px;
        margin: 5% auto 0;
    }

    .contact_link {
        padding: 0.75em 1.25em;
        font-size: 1.2rem;
    }

    .contact_link:nth-of-type(1) {
        margin: 0 0 0 auto;
    }

    .contact_link:nth-of-type(2) {
        margin: 0 auto 0 0;
    }
}

@media screen and (min-width: 1024px) {
    .contact_linkarea {
        gap: 240px;
    }
}

@media screen and (min-width: 1440px) {
    .contact_text {
        font-size: 1.2rem;
    }

    .contact_linkarea {
        gap: 300px;
    }

    .contact_link {
        font-size: 1.4rem;
    }
}

@media screen and (min-width: 1920px) {}

/* ----------  ---------- */



@media screen and (min-width: 768px) {}

@media screen and (min-width: 1024px) {}

@media screen and (min-width: 1440px) {}

@media screen and (min-width: 1920px) {}

/* ----------  ---------- */



@media screen and (min-width: 768px) {}

@media screen and (min-width: 1024px) {}

@media screen and (min-width: 1440px) {}

@media screen and (min-width: 1920px) {}

/* ----------  ---------- */



@media screen and (min-width: 768px) {}

@media screen and (min-width: 1024px) {}

@media screen and (min-width: 1440px) {}

@media screen and (min-width: 1920px) {}