@charset "UTF-8";
/* ============================================================
   焼酎処 さつま（Iima00102 / template107）上書き専用CSS
   ※テンプレ本体（style.css 等）は触らず、ここだけで上書きする
   ============================================================ */

/* --- TOP メニュー各セクションのPC背景を規約名の画像に差し替え --- */
@media screen and (min-width: 768px) {
    .top-food .bg {
        background-image: url(../img/food.jpg);
    }

    .top-drink .bg {
        background-image: url(../img/drink.jpg);
    }

    .top-course .bg {
        background-image: url(../img/course.jpg);
    }

}

/* --- TOPギャラリーのループスライダー：中央基準トリミングで見切れ防止 --- */
#loopslider ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --- ヘッダーの縦書きテキストロゴ（縦長のため高さ基準で収める） --- */
/* SP：既定60pxのヘッダーでは縦書きロゴが判読できないため76pxに拡張 */
@media screen and (max-width: 767px) {
    header {
        height: 76px;
    }

    header h1 {
        width: auto;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 76px;
    }

    header h1 a {
        display: block;
        line-height: 0;
    }

    header h1 img {
        width: auto;
        height: auto;
        max-height: 64px;
        max-width: 120px;
        object-fit: contain;
        display: block;
        margin: 0;
    }

    /* ヘッダー拡張に合わせてハンバーガーの黒帯も76pxに揃える */
    .drawer-hamburger {
        height: 76px;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center;
    }
}

/* PC：縦書きロゴを大きく見せるためヘッダー自体を130px→168pxに拡張 */
@media screen and (min-width: 768px) {
    header {
        height: 168px;
    }

    header .inner {
        align-items: center;
        height: 168px;
    }

    header h1 {
        width: auto;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        height: 168px;
    }

    header h1 img {
        width: auto;
        height: auto;
        max-height: 140px;
        max-width: none;
    }

    /* 右側（電話＋グロナビ）もヘッダー中央に揃える */
    header .inner > .pc {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    header .inner p {
        padding: 0 0 14px;
    }
}

/* --- TOP 店舗情報（Access）見出し --- */
.info h2 {
    margin-bottom: 24px;
}

/* --- 画面追従の予約ボタン（HS：WEB予約＝画面追従ボタン） --- */
.float a {
    border-radius: 4px 0 0 4px;
    letter-spacing: 0.05em;
}

.float a:hover {
    opacity: 0.85;
}