@charset "utf-8";

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

.fv {
    position: relative;
    height: 300px;
    background-image: url(../img/fv_3.png);
    background-position: center;
    background-size: cover;
}

.fv .headline_1 {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}

.fv .headline_1_sub {
    margin-top: 5%;
}

@media screen and (min-width: 768px) {
    .fv {
        height: auto;
        background-image: none;
        background-position: initial;
        background-size: initial;
    }

    .fv .headline_1 {
        top: 65%;
    }
}

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

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

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

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

.works {
    padding: 10% 5%;
}

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

.works_flexbox_area {
    margin: 20% auto 0;
}

.works_flexbox_content:not(:first-of-type) {
    margin: 5% auto 0;
}

.works_flexbox_headlinearea {
    font-size: 1.1rem;
    font-weight: 700;
}

.works_flexbox_headlinearea_img {
    width: auto;
    height: 1.5em;
}

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

@media screen and (min-width: 768px) {
    .works_flexbox {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    .works_flexbox img {
        width: calc((100% - (12px * 3)) / 4);
    }
}

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

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

    .works_flexbox_headlinearea {
        font-size: 1.6rem;
    }

    .works_flexbox {
        gap: 36px;
    }

    .works_flexbox img {
        width: calc((100% - (36px * 3)) / 4);
    }
}

@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;
}

@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%;
    }
}

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

    .company_table td {
        width: 75%;
    }
}

@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%;
    }
}

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

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

.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) {}