@charset "utf-8";

.galleryBox {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px;
}

.inner-gallery {
    /* display: grid;
    grid-template-columns: 1fr; */
    /* 常に縦積み */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inner-gallery>* {
    min-width: 0;
    /* Grid事故防止 */
}

.inner-gallery-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* 好みで変更OK */
    overflow: hidden;
    border-radius: 0px;
}

.preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.preview-label {
    position: absolute;
    bottom: 12px;
    right: 12px;
    margin: 0;
    padding: .25rem .5rem;
    width: 90px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
}

.preview-label.is-before {
    background: #303030;
}

.preview-label.is-work {
    background: var(--brown);
    color: #333;
}

.preview-label.is-after {
    background: var(--accent);
}

.works-filter{
  display:flex;
  flex-wrap:wrap;
  width: 94vw;
  gap:10px;
  margin: 50px auto;
  max-width: 960px;
}

.filter-btn{
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  border-radius:10px;
  padding:8px 12px;
  font-size:13px;
  cursor:pointer;
}

.filter-btn.is-active{
  border-color: rgba(0,0,0,.35);
  background: rgba(0,0,0,.06);
}

/* フィルタボタンにtag色を使う場合の調整 */
.works-filter .filter-btn.tag{
  padding: 8px 12px;      /* filter-btnのサイズ感 */
  font-size: 13px;
}

.works-filter .filter-btn.is-active{
  outline: 2px solid rgba(0,0,0,.18);
  outline-offset: 2px;
}

.tag{
  border: 1px solid rgba(0,0,0,.12);
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  background:#fff;
  line-height:1;
}

/* 玄関・窓 */
.tag--entrance-window{
  background: rgba(255, 167, 38, .18);
  border-color: rgba(255, 167, 38, .45);
}

/* 外壁塗装 */
.tag--exterior-paint{
  background: rgba(30, 136, 229, .16);
  border-color: rgba(30, 136, 229, .40);
}

/* 水回り */
.tag--water{
  background: rgba(0, 172, 193, .16);
  border-color: rgba(0, 172, 193, .40);
}

/* 解体工事 */
.tag--demolition{
  background: rgba(120, 144, 156, .18);
  border-color: rgba(120, 144, 156, .45);
}

/* 補助金 */
.tag--subsidy{
  background: rgba(67, 160, 71, .18);
  border-color: rgba(67, 160, 71, .45);
}

/* 事務所・倉庫 */
.tag--office-warehouse{
  background: rgba(123, 31, 162, .14);
  border-color: rgba(123, 31, 162, .38);
}

/* 床下 */
.tag--underfloor{
  background: rgba(109, 76, 65, .16);
  border-color: rgba(109, 76, 65, .40);
}

/* 内装リフォーム */
.tag--interior{
  background: rgba(255, 193, 7, .16);
  border-color: rgba(255, 193, 7, .45);
}

/* その他（主張しすぎないグレー） */
.tag--other{
  background: rgba(158, 158, 158, .16);
  border-color: rgba(158, 158, 158, .45);
}

/* 外構工事 */
.tag--exterior{
  background: rgba(102, 187, 106, .16);
  border-color: rgba(102, 187, 106, .45);
}

.gallery-nav {
    margin: 0;
    padding: 0;
    list-style: none;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}


.inner-gallery-text strong {
    display: block;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 0.25em;
    margin-bottom: 0.5em;
}

@media (max-width: 420px) {
    .gallery-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gallery-nav li {
    border-radius: 0px;
    overflow: hidden;
    cursor: pointer;
}

.gallery-nav li.is-current {
    outline: 3px solid rgba(0, 0, 0, .18);
    outline-offset: 2px;
}

.gallery-nav img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* サムネ（gallery-nav）の強制修正：大きい画像になってしまうのを上書き */
.inner-gallery-nav .gallery-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.inner-gallery-nav .gallery-nav li {
    overflow: hidden;
    border-radius: 0px;
    cursor: pointer;

    /* li側でサムネ枠サイズを決める */
    aspect-ratio: 1 / 1;
}

.inner-gallery-nav .gallery-nav img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    /* これが効くと「全部デカい」を止められる */
    max-height: none !important;
}

/* もし過去CSSで img に固定heightが入ってる場合の保険 */
.inner-gallery-nav .gallery-nav img {
    height: 100% !important;
}

/* SP */
@media (max-width: 420px) {
    .inner-gallery-nav .gallery-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width:768px) and (max-width:1023.98px) {
    .galleryBox {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width:767.98px) {
    .galleryBox {
        grid-template-columns: 1fr;
    }
}