/* グローバルリセット */
html, body {
    margin: 0; /* 余白をゼロに */
    padding: 0; 
    box-sizing: border-box; /* ボックスサイズ計算をリセット */
}

/* header-container の修正 */
.header-container.cover {
    position: relative;
    background-image: url(../images/top.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0; /* 余白なし */
}

/* ::beforeに変化はなし */
.header-container.cover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 高さを100%に変更して要素全体を覆う */
    background-color: rgba(0, 0, 0, 0.3); /* 黒の半透明色 */
    z-index: 1; /* 背景画像より前面に表示 */
}

/* 子要素は背景オーバーレイよりも前面に表示 */
.header-container * {
    position: relative;
    z-index: 2;
}

.header-container h1 {
    padding-top: 20%;
    text-align: center;
}

.header-container p {
    padding-top: 10px;
    padding-bottom: 150px;
    text-align: center;
}
.maintxt{
    text-align: center;
    margin-top: 50px;
    margin-bottom: 100px;
}
.maintxt p{
    margin-bottom: 25px;
}
.maincontent {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
    width: 100%;
    margin: 0 auto; 
}

.first, .second, .third, .forth {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    color: white; 
    padding: 0px;
    font-weight: bold;
    overflow: hidden;
    height: 450px;
}

.first::before, 
.second::before, 
.third::before, 
.forth::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 画像を暗くする */
    z-index: 1;
}

.first { background-image: url(../images/billboard.jpeg); }
.second { background-image: url(../images/works.jpeg); }
.third { background-image: url(../images/construction.jpeg); }
.forth { background-image: url(../images/company.jpeg); }

.first h3, .second h3, .third h3, .forth h3 {
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: center;
    position: relative;
    z-index: 2; /* テキストを前面に */
}
.mobile{
    display: none;
}
@media screen and (max-width: 765px) {
    .header-container h1{
        padding-top: 150px;
    }
    .maincontent {
        display: flex;
        flex-direction: column; 
        width: 100%;
    }

    .first, .second, .third, .forth {
        width: 100%;
        height: auto; 
        background-position: 0px 0px;
        padding: 0px;
    }

    .first p, .second p, .third p, .forth p {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .mobile{
        display: block;
    }
}