/*--------------------------------------------------------------------------*
 *  
 *  works.css
 *  
 *  制作実績ページ用
 *
 *--------------------------------------------------------------------------*/
.works {
    padding: 40px 0 80px 0;
}
.works .container {
    background-color: #ffffff;
    box-shadow: 10px 10px 15px -10px #707070;
    padding: 50px 70px 80px 70px;
    max-width: 84%;
    overflow: hidden;
}
.grid_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列のグリッド */
    grid-auto-rows: 1fr; /* 自動で正方形に調整 */
    position: relative;
}
/* グリッド内のアイテム */
.grid_item {
    position: relative;
    overflow: hidden;
    aspect-ratio: auto;
}
/* 各画像 */
.grid_item img {
    object-fit: cover;
    transition: transform 0.8s ease;
}
/* ホバー用のオーバーレイ */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.overlay p {
    font-size: 1.2rem;
    line-height: 2.6;
    font-family: "Shippori Mincho B1", serif;
    text-align: center;
}
/* ホバー時のエフェクト */
.grid_item:hover img {
    transform: scale(1.1);
}
.grid_item:hover .overlay {
    opacity: 1;
}
.works1 {
    grid-column: span 2; /* 横幅を1列分占有 */
    grid-row: span 2; /* 2行分を占有（高さ） */
}
.works2 {
    grid-column: span 1;
    grid-row: span 3;
}
.works3 {
    grid-column: span 2;
    grid-row: span 2;
}
.works4 {
    grid-column: span 1;
    grid-row: span 2;
    z-index: 2;
}
.works5 {
    grid-column: span 1;
    grid-row: span 1;
}
.works6 {
    grid-column: 2 / span 2;
    grid-row: 5 / span 2;
    z-index: 1;
    position: absolute;
}
.works6 .overlay p {
    margin-top: 25%;
}
.works7 {
    grid-column: span 1;
    grid-row: 6 / span 1;
}
.works8 {
    grid-column: span 2;
    grid-row: 7 / span 3;
    z-index: 1;
}
.works9 {
    grid-column: span 1;
    grid-row: 7 / span 3;
}
.works10 {
    grid-column: span 1;
    grid-row: 10 / span 1;
}
.works11 {
    grid-column: 2 / span 1;
    grid-row: 9 / span 2;
    z-index: 2;
    position: absolute;
}
.works12 {
    grid-column: 3 / span 1;
    grid-row: 10 / span 1;
}
.works13 {
    grid-column: span 2;
    grid-row: 11 / span 1;
}
.works14 {
    grid-column: span 1;
    grid-row: 11 / span 1;
}
.works15 {
    grid-column: span 2;
    grid-row: 12 / span 2;
}
.works16 {
    grid-column: span 1;
    grid-row: 12 / span 2;
}
.works17 {
    grid-column: span 1;
    grid-row: 14 / span 1;
}
.works18 {
    grid-column: span 2;
    grid-row: 14 / span 2;
    z-index: 1;
}
.works18 .overlay p {
    margin-bottom: 25%;
}
.works19 {
    grid-column: span 1;
    grid-row: 15 / span 1;
}
.works20 {
    grid-column: 2 / span 1;
    grid-row: 15 / span 1;
    z-index: 2;
    position: absolute;
}
.works21 {
    grid-column: span 1;
    grid-row: 16 / span 1;
}
.works22 {
    grid-column: span 1;
    grid-row: 16 / span 1;
}
.works23 {
    grid-column: span 1;
    grid-row: 16 / span 1;
}
.works24 {
    grid-column: span 2;
    grid-row: 17 / span 2;
    z-index: 1;
}
.works24 .overlay p {
    margin-bottom: 25%;
}
.works25 {
    grid-column: span 1;
    grid-row: 17 / span 2;
}
.works26 {
    grid-column: 2 / span 1;
    grid-row: 18 / span 2;
    z-index: 2;
    position: absolute;
}
.works27 {
    grid-column: span 1;
    grid-row: 19 / span 2;
}
.works28 {
    grid-column: span 1;
    grid-row: 20 / span 1;
}
.works29 {
    grid-column: span 1;
    grid-row: 19 / span 2;
}
.works30 {
    grid-column: span 2;
    grid-row: 21 / span 2;
    z-index: 1;
}
.works30 .overlay p {
    margin-bottom: 25%;
}
.works31 {
    grid-column: span 1;
    grid-row: 21 / span 1;
}
.works32 {
    grid-column: 2 / span 2;
    grid-row: 22 / span 1;
    z-index: 2;
    position: absolute;
}
.works33 {
    grid-column: span 3;
    grid-row: 23 / span 1;
}
.works_text {
    color: #767676;
    font-size: 1.0rem;
    line-height: 1.6;
}
.btn_contact {
    background-color: #2F65A2;
    color: #fff;
    border: #2F65A2 solid 2px;
    display: block;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 100%;
    font-family: "Noto Sans", serif;
    font-weight: bold;
    font-size: 1.8rem;
    transition: all .3s ease-out;
    line-height: 1.3;
}
.btn_contact span {
    font-family: "Noto Sans JP", serif;
    font-weight: normal;
    font-size: 0.9rem;
    display: block;
}
.btn_contact:hover {
    background-color: #fff;
    color: #2F65A2;
    border: #2F65A2 solid 2px;
}

/* 768px以下 */
@media (max-width: 767.98px) {
    .works {
        padding: 40px 0 40px 0;
    }
    .works .container {
        padding: 40px 25px 60px 25px;
        max-width: 88%;
    }
    .overlay p {
        font-size: 0.5rem;
        line-height: 1.6;
    }
    .works_text {
        font-size: 0.9rem;
    }
}

/* 幅が 768px以上 992px以下 */
@media (min-width: 768px) and (max-width:991.98px) {
    .works .container {
        padding: 40px 40px 60px 40px;
        max-width: 88%;
    }
    .overlay p {
        font-size: 1.0rem;
        line-height: 2.2;
    }
}