.home__worksArea{
 max-width: 1000px;
 margin:2rem auto;
}

.works_det{
    padding: 2rem;
    background-color: rgba(255,255,255,.6);
    margin-bottom: 2rem;
}

#ourWorksContents h2 {
    width: 100%; /* 見出しを横幅いっぱいに広げる */
    text-align: center; /* 見出しのテキストを中央寄せ */
    margin-bottom: 30px; /* 見出しとギャラリーアイテムの間の余白 */
    font-size: 2.2em;
    color: #ff3608;
    padding-top: 10px;
}

/* -------------------------アーカイブ */
.image-gallery {
    display: flex;
    flex-wrap: wrap;
	justify-content:space-between;
    row-gap: 2rem;
}
.gallery-item {
    width: calc(50% - 20px);
    box-sizing: border-box;
    min-width: 280px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    display: flex;
    flex-direction: column;
}

.works__txtWrap{
    color: #fff;
    background-color: #2c1608;
    padding: 1em;
    flex-grow: 1;
}
.gallery-item img {
    max-width: 100%;
    height: auto;
    vertical-align:bottom;
    aspect-ratio: 3/2;
object-fit: cover;
}
.gallery-item .loop_works_category{
    font-size: 1.2em;
    display: inline-block;
    font-weight: 700;
}
.gallery-item h4 {
    line-height: 1.4;
    font-size: 20px;
    color: #fff;
   margin: 0.25em 0 0 0;
}
.works_cat__txt{
	margin:0 0 2rem;
	text-align:center;
  line-height:1.75;
  font-size:16px;
}

.button-group {
    display: grid; /* ボタンを横並びにする */
    justify-content: center; /* ボタン全体を中央に配置 */
    gap: 15px; /* ボタン間の余白 */
    padding: 20px 0; /* グループ全体のパディング */
    max-width: 1000px; /* グループの最大幅 */
    margin: 2rem auto 0; /* 中央寄せ */
}
.button-group-up{
    grid-template-columns: repeat(4, 1fr);
}
.button-group--bottom{
    grid-template-columns: repeat(5, 1fr);
    padding: 20px 0;
    gap: 7px;
}

.button-group .btn{
    letter-spacing: 0.1em;
}
.button-group .btn span.btn-wrap,.button-group .btn .work_iconImg,.button-group .btn span.btnTxt{
    display: block;
}
.button-group .btn span.btn-wrap{
    height: 100%;padding: 8px;
}
.button-group .btn .work_iconImg{
    height: 36px;
    width: 45px;
    object-fit: contain;
    margin: auto;
} 
.button-group .btn span.btnTxt{
    padding:0;
    margin-top: 8px;
    text-align: center;
}

/* メインビジュアルセクション */
.main-visual {
    overflow: hidden;
    margin:2rem 0;
}
.main-visual img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    aspect-ratio: 3/2;
}
.main-visual h1 {
    color: white;
    font-size: 3em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    text-align: center;
    width: 90%; /* レスポンシブ対応のため */
}

.works_category,.works_cliantName{
display:inline-block;line-height:1.5;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.works_category{
    padding:0.5rem;
   background-color: #ff3608;
   color: #fff;  
   font-size:1.4em;
   margin-right:1rem;
}
.works_cliantName{
    font-size:16px;
    font-weight:500;

}
.ourWorks_text h4.works_title{
    margin:20px 0;
}

@media print, screen and (min-width: 1001px){
.home__worksArea h3{
 margin-bottom: 40px;
}
}
@media (max-width: 1000px) {

        .home__worksArea{
        width: 94%;

    }
    .home__worksArea h3{
    margin-bottom: 20px;
}
    .button-group {
        gap: 10px;
        padding: 15px;
    }

    .button-group .btn {
        font-size: 1em;
        /* タブレットサイズでは2列表示などにする場合 */
        flex-basis: calc(40% - 10px);
								/* 2列表示にする（gapを考慮） */
    }
        .image-gallery{gap:10px;}

				.gallery-item {
        flex: 1 1 calc(50% - 10px);
    }

    .image-gallery h2 {
        font-size: 1.8em;
    }

   
}
@media (max-width: 540px) {
    
    #ourWorksContents h2{
        padding-top: 0;
    }
    
    .button-group,.button-group--bottom{
        grid-template-columns: 1fr;
grid-template-rows: 1fr;
    }
    .button-group {
        gap: 10px;
        padding: 0 0 10px 0;
    }
    .button-group--bottom{
        margin-top:1rem;
    }
     .button-group .btn span.btn-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1em;
    padding: 4px 8px;
     }
    .button-group .btn .work_iconImg{
        display: inline-block;margin: 0;
    }
    .button-group .btn .work_iconImg{
        width: 40px;
    }

				.image-gallery {
        gap: 2rem;
    }
    .works_det{
        padding: 1rem;
    }
    .image-gallery h2 {
        font-size: 1.5em;
        margin-bottom: 20px;
    }
    .gallery-item {
        min-width: unset;
    }
    .gallery-item h4{margin-bottom:0;}

    .main-visual h1 {
        font-size: 1.5em;
    }
    .works_category{
        font-size:1em;
    }
    
}