@charset "utf-8";
/* ==========================================================================
   串まる（Iima00125／template107）案件用の上書き
   ※テンプレ本体（style.css / common.css）は触らず、ここだけで上書きする
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 下層ページのMV（テンプレ既定 bg_kv2.jpg は実体が無くリンク切れ）
   -------------------------------------------------------------------------- */
.kv_second {
    background: url(../img/page-mv.jpg) center center / cover no-repeat;
}

/* --------------------------------------------------------------------------
   2. TOP メニュー各ブロックのPC背景（テンプレ既定 course.jpg は実体が無い）
   -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
    .top-food .bg   { background-image: url(../img/top-menu-1.jpg); }
    .top-drink .bg  { background-image: url(../img/top-menu-2.jpg); }
    .top-lunch .bg  { background-image: url(../img/top-menu-3.jpg); }
    .top-course .bg { background-image: url(../img/top-menu-4.jpg); }
}

/* --------------------------------------------------------------------------
   3. TOP ギャラリーのループスライダー：枠（350×280）に対し中央基準でトリミング
   -------------------------------------------------------------------------- */
#loopslider ul li img,
#loopslider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --------------------------------------------------------------------------
   4. グロナビのSNSアイコン（Instagram）：一番右。ベースラインズレ防止で flex
   -------------------------------------------------------------------------- */
ul.gnav li.nav_insta,
.persist-header ul li.nav_insta {
    display: flex;
    align-items: center;
}

ul.gnav li.nav_insta a,
.persist-header li.nav_insta a {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

ul.gnav li.nav_insta a::after,
.persist-header li.nav_insta a::after {
    content: none;
}

ul.gnav li.nav_insta i {
    font-size: 22px;
    line-height: 1;
}

.persist-header li.nav_insta i {
    font-size: 20px;
    line-height: 1;
}

.drawer-menu li.nav_insta a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawer-menu li.nav_insta i {
    font-size: 26px;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   5. ロゴの配置とサイズ
   -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
    /* header .inner は flex。既定 stretch なのでロゴが帯の上端に貼り付く。
       .inner の高さは右カラム依存で帯(130px)より短いため、まず帯いっぱいに伸ばしてから
       h1 だけ中央に寄せる。右カラム（電話番号・グロナビ）は通常フローのままなので動かない */
    header .inner {
        height: 100%;
    }

    header h1 {
        align-self: center;
    }

    header h1 img {
        width: auto;
        max-width: 100%;
        max-height: 84px;
        height: auto;
        display: block;
    }
}

@media screen and (min-width: 1201px) {
    /* テンプレ既定は 200px。130pxの帯に対してロゴが小さいので少し広げる */
    header h1 {
        width: 232px;
    }
}

@media screen and (max-width: 767px) {
    /* 左の #google_translate（0〜114px・高さ30px）と右のハンバーガー（319px〜）を避けつつ、
       内側余白を左右対称にしてビューポートの中心に揃える */
    header h1 {
        width: auto;
        margin: 0;
        padding: 0 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
    }

    header h1 img {
        width: auto;
        height: auto;
        max-height: 36px;
        max-width: 100%;
        display: block;
    }
}

/* --------------------------------------------------------------------------
   6. ギャラリー：丸トリミング（テンプレ既定）のまま。画像の欠けだけ中央基準に
   -------------------------------------------------------------------------- */
.gallery-list img {
    object-position: center;
}

/* --------------------------------------------------------------------------
   7. 画面追従の予約ボタン（唯一の予約導線なので視認性を確保）
   -------------------------------------------------------------------------- */
.float a {
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   8. グロナビ「予約する」：テキストの周囲を白枠で囲む
   -------------------------------------------------------------------------- */
/* PC：通常ヘッダー／スクロール後の固定ナビ */
@media screen and (min-width: 768px) {
    ul.gnav li.nav_reserve,
    .persist-header ul li.nav_reserve {
        display: flex;
        align-items: center;
    }

    ul.gnav li.nav_reserve a,
    .persist-header li.nav_reserve a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border: 1px solid #fff;
        padding: 5px 11px;
        line-height: 1.2;
        white-space: nowrap;
    }

    ul.gnav li.nav_reserve a::after,
    .persist-header li.nav_reserve a::after {
        content: none;
    }
}

/* SP：ハンバーガーメニュー内でも「予約する」だけ枠付き */
@media screen and (max-width: 767px) {
    .drawer-menu li.nav_reserve {
        padding: 12px 15px;
        text-align: center;
    }
    
    .drawer-menu li.nav_reserve a {
        display: inline-block;
        box-sizing: border-box;
        border: 1px solid #fff;
        padding: 9px 22px;
        line-height: 1.4;
    }
}