@charset "utf-8";


/* ---------
ヘッダーエリア
---------- */

#header {
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
    font-size: 1rem;
}

#header h1 {
    width: 300px;
    height: 50px;
    padding-left: 16px;

}

#header h1 img {
    width: 200px;
    height: 50px;
    margin-left: -10px;
    margin-top: 10px;
}


#header ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 0 1.5em;
    height: 50px;
}


/* ------------------------ 
メインビジュアル
--------------------------- */

.mainV {
    background: url(../images/main5dec_1920x1080.jpg) no-repeat center/cover;
    aspect-ratio: 4/3;
    display: grid;
    place-content: center;
}

.mainV p {
    font-size: 2.8rem;
    line-height: 1;
    width: 200px;
    line-height: 30px;
    color: #fff;
    text-align: center;
    background-color: rgba(167, 165, 165, 0.3);
    border-radius: 5px;
}

/* -----------
各セクション
----------- */
#message h2,
#garally h2,
#faq h2,
#contact h2 {
    font-size: 2.4rem;
    padding: .2em 0 .2em .5em;
    margin-bottom: 1.6rem;
    text-align: center;
}

/* -----------
各セクション下スペース
----------- */
.mainV {
    margin-bottom: 1.8rem;
}

#message,
#garally,
#faq,
#contact {
    margin-bottom: 40px;
}

/* ------------------------ 
メインビジュアル左右スペース
--------------------------- */
.space {
    padding-right: 16px;
    padding-left: 16px;
}


/* -----------
施行事例
------------ */

#garally li {
    margin: 16px;
}

#garally .item {
    padding: 10px 0;
    margin-bottom: 16px;
}

#garally .msg1,
#garally .msg2,
#garally .msg3 {
    background-color: rgba(247, 247, 247, 0.5);
    padding: 3rem;
    border: .7px solid #b8b2b2;
}

/* 公共事業 文字 */

#garally .flex {
    font-size: 1rem;
    text-align: center;
}

/* 施工事例ボタン */
.btn {
    text-align: center;
    margin-top: 3rem;
}

.btn a {
    padding: 1rem;
    border: solid 2px rgb(244, 172, 159);
}

.btn a:active {
    background-color: #ff8d8d;
}


/* ----------
FAQ
---------- */
.faq .bg {
    background-color: #d3d9eb;
}

.qa-006 {

    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgba(0 0 0 / 5%);
    background-color: #d3d9eb;
}

.qa-006 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.qa-006 summary::before,
.qa-006 p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-006 summary::before {
    color: #75bbff;
    content: "Q";
}

.qa-006 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #b8b2b2;
    border-right: 3px solid #b8b2b2;
    content: '';
    transition: transform .5s;
}

.qa-006[open] summary::after {
    transform: rotate(225deg);
}

.qa-006 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa-006[open] p {
    transform: none;
    opacity: 1;
}

.qa-006 p::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
}

/* ----------
お問合せ
---------- */

#contact address {
    max-width: 100%;
}

.table {
    width: 100%;
    font-size: 1.8rem;
    table-layout: auto;
    border-collapse: collapse;
    border: .7px solid #b8b2b2;
    margin-bottom: 16px;
}


.table th,
.table td {
    display: block;
    padding: 16px;
    border: .7px solid #b8b2b2;
    text-align: center;
}

.table th {
    background-color: rgb(232, 232, 232);
}


/* ------------------------ 
フッター
--------------------------- */
footer {
    background-color: #fff;
}

footer img {
    height: 50px;
}

footer {
    text-align: center;
}


/* ------------------------ 
タブレット以上のとき
--------------------------- */
@media screen and (min-width: 768px) {

    #message h2,
    #garally h2,
    #faq h2,
    #contact h2 {
        font-size: 4rem;
    }

    /* ------------------------ 
    ヘッダーエリア
    --------------------------- */
    #header {
        display: flex;
        justify-content: space-around;
    }

    #g-navi {
        display: flex;
        align-items: center;
    }

    #header ul {
        justify-content: space-around;
        gap: 0 1.5em;
        height: 30px;
    }

    #header h1 img {
        margin-left: 0;
    }

    .header-001__link {
        font-size: 1.6rem;
        text-align: 44px;
    }

    .header-001__link:hover {
        color: red;
    }

    .mainV p {
        width: 50vw;
        font-size: 5.5rem;
        font-weight: bold;
        line-height: 2;
        font-weight: bold;
        background-color: rgba(167, 165, 165, 0.3);
        border-radius: 3px;
    }



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

    ul {
        display: grid;
        /* grid-template-rows: 45vw 45vw 45vw; */
        grid-template-columns: 50% 50%;
    }

    .msg1 {
        grid-row: 1/2;
        grid-column: 1/2;
    }

    .img1 {
        grid-row: 1/2;
        grid-column: 2/3;
    }

    .item .msg2 {
        grid-row: 2/3;
        grid-column: 2/3;
    }

    .item .img2 {
        grid-row: 2/3;
        grid-column: 1/2;
    }

    .item .msg3 {
        grid-row: 3/4;
        grid-column: 1/2;
    }

    .item .img3 {
        grid-row: 3/4;
        grid-column: 2/2;
    }

    .item li img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .item li p {
        font-size: 2rem;
        line-height: 1.6;
        margin: 16px;
    }

    #garally .msg3 {
        padding: 2rem;

    }


    #garally .sample1,
    #garally .sample2 {
        margin-right: 3px;
    }

    #garally .sample1,
    #garally .sample2,
    #garally .sample3 {
        max-width: 100%;
        max-height: 100%;
        overflow: hidden;
        position: relative;
    }

    #garally .sample1 .caption,
    #garally .sample2 .caption,
    #garally .sample3 .caption {
        font-size: 3.2rem;
        text-align: center;
        padding-top: 50%;
        color: #fff;
    }

    #garally .sample1 .mask,
    #garally .sample2 .mask,
    #garally .sample3 .mask {
        width: 90%;
        height: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        background-color: rgba(0, 0, 0, 0.4);
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }

    #garally .sample1:hover .mask,
    #garally .sample2:hover .mask,
    #garally .sample3:hover .mask {
        opacity: 1;
    }

    #contact .table {
        font-size: 2.4rem;
    }

    .table a:hover {
        display: block;
        color: #fff;
        background-color: #ff8d8d;
    }

    #contact img {
        display: block;
        margin: 0 auto;
    }

    .footer-001__link {
        font-size: 1.6rem;
    }

    .footer-001__list li a:hover {
        color: red;

    }


}