.other-page .site-header {
    position: static;
    background: #f6f3ee;
    border-bottom: 1px solid var(--line)
}

.other-hero {
    padding: 98px 0 80px;
    color: #fff;
    background: linear-gradient(110deg, #1e334f 0%, #304966 55%, #4b6075 100%)
}

.other-hero .kicker {
    color: #e0c47f
}

.other-hero h1 {
    margin: 10px 0 15px;
    font-family: 'Zen Old Mincho', serif;
    font-size: clamp(2.4rem, 5vw, 4.7rem);
    font-weight: 400;
    letter-spacing: .1em
}

.other-hero p:last-child {
    margin: 0;
    font-family: 'Zen Old Mincho', serif;
    font-size: 1rem
}

.other-gallery {
    padding: 110px 0 125px;
    background: #fffdf9
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 70px 30px
}

.work-card {
    padding-bottom: 2px
}

.work-image {
    position: relative;
    aspect-ratio: 16/10;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #647386 center/cover no-repeat
}

.work-image:after {
    content: '';
    position: absolute;
    inset: 13px;
    border: 1px solid rgba(255, 255, 255, .58)
}

.work-image span {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: .63rem;
    letter-spacing: .22em
}

/* 作品画像：共通設定 */
.ryokan,
.pending-one,
.cosmetics,
.pending-two {
    aspect-ratio: 16 / 9;
    min-height: 0;
    background-repeat: no-repeat;
    background-position: center;
}


/* 旅館：16:9の画像全体を表示 */
.ryokan {
    background-image:
        url('../images/banner-ryokan.jpg'),
        linear-gradient(135deg, #6d4635, #c28c65);
    background-size: cover, cover;
}


/* 3作品目（現在は仮表示） */
.pending-one {
    background-image: linear-gradient(135deg, #202633, #a57e51);
    background-size: cover;
}


/* 化粧品：4:3の画像全体を表示 */
.cosmetics {
    background-image:
        url('../images/banner-cosmetics.jpg'),
        linear-gradient(135deg, #d899a1, #efe1ce);
    background-size: contain, cover;
}


/* 4作品目（現在は仮表示） */
.pending-two {
    background-image: linear-gradient(135deg, #203656, #d0b168);
    background-size: cover;
}

.work-type {
    margin: 18px 0 6px;
    color: var(--gold);
    font-size: .64rem;
    letter-spacing: .15em
}

.work-card h2 {
    margin: 0;
    font-family: 'Zen Old Mincho', serif;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 400;
    letter-spacing: .06em
}

.tool {
    margin: 8px 0 12px;
    color: var(--plum);
    font-size: .72rem;
    letter-spacing: .08em
}

.description {
    max-width: 475px;
    margin: 0;
    font-size: .86rem;
    line-height: 1.9
}

.back-top {
    margin: 76px 0 0;
    text-align: center
}

@media(max-width:700px) {
    .other-hero {
        padding: 70px 0 55px
    }

    .other-gallery {
        padding: 75px 0 88px
    }

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

    .back-top {
        margin-top: 55px
    }
}

.work-image.music-festival {
  background-image: url("../images/music-festival-banner.jpg");
  background-position: center;
}

.work-image.music-festival {
  background-image: url("../images/music-festival-banner.jpg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #07133d;
  aspect-ratio: 16 / 9;
}