@charset "utf-8";

/* ==================================================================

    shokei.css

=================================================================== */

/* --------------------------------
■Gallery（暫定：大小リズムの見た目確認用）
-------------------------------- */
#gallery {
    .galleryList {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        list-style: none;
        margin: 40px 0 0;
        padding: 0;

        > .item {
            margin: 0;
            min-width: 0;

            figure {
                position: relative;
                margin: 0;
                height: 100%;
            }

            .image {
                margin: 0;
                aspect-ratio: 1 / 1;
                overflow: hidden;
                background: #111;

                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                }
            }

            /* キャプションがあるときだけ、左下に文字＋下からの薄いシャドウ */
            .caption {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 1;
                margin: 0;
                padding: 56px 20px 18px;
                color: #fff;
                font-size: 1.5rem;
                font-weight: 500;
                line-height: 1.4;
                letter-spacing: 0.06em;
                text-align: left;
                pointer-events: none;
                background: linear-gradient(
                    to top,
                    rgba(0, 0, 0, 0.55) 0%,
                    rgba(0, 0, 0, 0.22) 45%,
                    rgba(0, 0, 0, 0) 100%
                );
            }
        }

        /* 1・4・7枚目：全幅の横長 */
        > .item:nth-child(3n + 1) {
            grid-column: 1 / -1;

            .image {
                aspect-ratio: 16 / 9;
            }
        }

        /* 横長表示時の主題位置微調整 */
        > .item:nth-child(1) .image img {
            object-position: 42% 32%;
        }
        > .item:nth-child(4) .image img {
            object-position: 48% 45%;
        }
        > .item:nth-child(7) .image img {
            object-position: 50% 42%;
        }
    }
}

@media only screen and (max-width: 767px) {
    #gallery {
        .galleryList {
            grid-template-columns: 1fr;
            gap: 16px;
            margin-top: 28px;

            > .item:nth-child(3n + 1) {
                grid-column: auto;

                .image {
                    aspect-ratio: 1 / 1;
                }
            }

            .caption {
                padding: 40px 14px 14px;
                font-size: 1.3rem;
            }
        }
    }
}

/* PCのみ：ホバーでわずかに拡大（タッチ端末・SPは対象外） */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    #gallery {
        .galleryList {
            > .item {
                .image img {
                    transition: transform 0.7s ease;
                    will-change: transform;
                }

                &:hover .image img {
                    transform: scale(1.06);
                }
            }
        }
    }
}