/* ============== セクション余白 & リード文 ============== */
.section.gallery {
    /* 上80px, 下60px相当（SP時に詰める） */
    padding-block: var(--space-3xl) var(--space-xl);
}

.gallery__top-box {
    margin: 0 auto;
}

.gallery__text {
    text-align: center;
    font-size: 16px;
    line-height: 2;
    color: #6E6363;
}

.gallery__text-small {
    font-size: var(--fs-2xs);
    color: #9d9898;
}

/* ============== カテゴリタブ ============== */
.gallery-tabs {
    display: flex;
    justify-content: center;
    padding-top: var(--space-xl);
    padding-bottom: clamp(7rem, 9vw, 14.6rem);
}

.gallery-tabs__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.6rem, 3.2vw, 4.2rem);
}

.filter-btn {
    display: inline-block;
    width: 9.5em;
    padding: .37em 0;
    border: none;
    outline: 1px solid #BE867F;
    background: #fff;
    color: #BE867F;
    font-size: 16px;
    letter-spacing: .03em;
    text-align: center;
    line-height: 1;
    transition: outline-color .2s ease, background-color .25s ease, color .25s ease, filter .25s ease;
    cursor: pointer;
}

/* --- 初期色（カテゴリ別の淡色）：data-filter で安定指定 --- */
.filter-btn[data-filter="all"] {
    background-color: rgba(181, 117, 110, .27);
    color: #fff;
    outline-color: rgba(181, 117, 110, .27);
}

.filter-btn[data-filter="facial"] {
    background-color: rgba(217, 169, 157, .27);
    color: #fff;
    outline-color: rgba(217, 169, 157, .27);
}

.filter-btn[data-filter="scalp"] {
    background-color: rgba(217, 185, 157, .27);
    color: #fff;
    outline-color: rgba(217, 185, 157, .27);
}

/* hover */
.filter-btn[data-filter="all"]:hover {
    background-color: #BE867F;
    outline: 3px solid #d5a8a2;
    color: #fff;
}

.filter-btn[data-filter="facial"]:hover {
    background-color: #D9A99D;
    outline: 3px solid rgb(234, 202, 194);
    color: #fff;
}

.filter-btn[data-filter="scalp"]:hover {
    background-color: #D9B99D;
    outline: 3px solid #e8d0bb;
    color: #fff;
}

/* active(state) - script が .is-active を付与 */
.filter-btn[data-filter="all"].is-active {
    background-color: #BE867F;
    outline: 3px solid #d5a8a2;
    color: #fff;
}

.filter-btn[data-filter="facial"].is-active {
    background-color: #D9A99D;
    outline: 3px solid rgb(234, 202, 194);
    color: #fff;
}

.filter-btn[data-filter="scalp"].is-active {
    background-color: #D9B99D;
    outline: 3px solid #e8d0bb;
    color: #fff;
}

/* ============== グリッド (カード群) ============== */
.gallery__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.gallery__item {
    display: block;
    justify-self: center;
    max-width: 324px;
    padding-bottom: clamp(4rem, 7vw, 10rem);
}

.gallery__item.is-hidden {
    display: none !important;
}

/* タグ */
.gallery__tag {
    display: inline-block;
    width: 8em;
    padding: .4em 0;
    font-size: 12px;
    letter-spacing: .03em;
    text-align: center;
    color: #fff;
    line-height: 1;
}

.gallery__tag-facial {
    background-color: #D9A99D;
}

.gallery__tag-scalp {
    background-color: #D9B99D;
}

/* 画像ボックス：常に正方形 */
.gallery__image-box {
    width: clamp(300px, 31vw, 324px);
    aspect-ratio: 1 / 1;
    background: #F7F4F2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gallery__photo {
    height: calc(clamp(300px, 31vw, 324px) * 0.876);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* キャプション（施術名・回数） */
.gallery__procell-text {
    text-align: center;
    background-color: #F7F4F2;
    color: #74403A;
    font-size: 17px;
    font-weight: 400;
    padding-top: .8rem;
}

.gallery__procell-text span {
    letter-spacing: -0.04em;
}

/* キャプション（年齢） */
.gallery__age {
    text-align: center;
    background-color: #F7F4F2;
    padding: .8rem 0 2rem;
    font-size: 13px;
    line-height: 1.5;
    color: #d09992;
}

/* ============== レスポンシブ ============== */

/* 2カラム */
@media (max-width: 1100px) {
    .gallery__container {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery__container>.gallery__item:nth-child(2n + 1),
    .gallery__container>.gallery__item:nth-child(2n) {
        justify-self: center;
    }
}

/* タブやリード文の微調整（<=960px） */
@media (max-width: 960px) {
    .gallery__top-box {
        max-width: 560px;
    }

    .gallery__text {
        text-align: left;
        font-size: 15px;
    }

    .filter-btn {
        font-size: 14px;
    }

    .gallery__text-small {
        display: block;
    }
}

/* 1カラム（<=786px） */
@media (max-width: 786px) {
    .section.gallery {
        padding-block: var(--space-xl);
    }

    .gallery-tabs {
        padding-top: var(--space-lg);
        padding-bottom: 9rem;
    }

    .gallery-tabs__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-tabs__list> :first-child {
        grid-column: 1 / -1;
        justify-self: center;
    }

    .gallery__container {
        grid-template-columns: 1fr;
    }

    .gallery__item {
        padding-bottom: 6rem;
    }

    .gallery__text {
        font-size: 14px;
        line-height: 1.74;
        color: #6E6363;
        text-align: left;
    }

    .filter-btn {
        font-size: 13px;
    }

    .gallery__text-small {
        font-size: 11px;
        display: inline;
    }

    .gallery__procell-text {
        font-size: 17px;
        font-weight: 600;
    }

    .gallery__age {
        color: #c68880;
    }
}

/* 低モーション配慮 */
@media (prefers-reduced-motion: reduce) {
    .filter-btn {
        transition: none !important;
    }
}