@charset "utf-8";
/* ==========================================================================
   custom.css : テンプレ本体(style.css)への上書き専用
   キノコと魚　Naturale（template103）
   ========================================================================== */


/* --- body に背景色の指定が無く、端末のダークモードで本文が黒地に沈むため白を明示 --- */
html,
body {
    background-color: #fff;
}

/* --- ヘッダー／フッターのロゴサイズ上限（縦長ロゴでも破綻しないように） --- */
.header_logo img {
    width: auto;
    max-width: 240px;
    max-height: 72px;
    height: auto;
    object-fit: contain;
}

.footer_logo img {
    width: auto;
    max-width: 200px;
    max-height: 90px;
    height: auto;
    object-fit: contain;
}

@media screen and (max-width: 767px) {
    .header_logo img {
        max-width: 190px;
        max-height: 56px;
    }

    .footer_logo img {
        max-width: 40vw;
        max-height: 100px;
    }
}

/* --- ロゴの影：ヘッダーはテンプレ既定のまま（PC＝MVの上に透過／SP＝白帯）。
       背景の明るさが 白(255)〜暗いMV(66) まで振れるため、白ロゴの輪郭を影で立てる。
       ぼかしを広げると小さいSP表示では靄になって逆に読めないので、
       **文字の輪郭に沿う1pxの影を4方向**に重ねる（drop-shadowは前段の結果に掛かるので輪郭が閉じる）。
       最後の1つだけ弱いぼかしを足して、写真の上でのなじみを確保。
       正式ロゴに差し替えてもこの指定はそのまま効く --- */
.header_logo img,
.footer_logo img {
    filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.55))
            drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.55))
            drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55))
            drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.55))
            drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

/* --- グロナビ：Instagram アイコン（必ず一番右） --- */
.gnav_item.gnav_insta {
    display: flex;
    align-items: center;
}

.gnav_insta a {
    display: flex;
    align-items: center;
    padding: 0;
}

.gnav_insta img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.gnav_insta a:hover {
    opacity: 0.7;
}

/* --- SPドロワー：Instagram アイコン --- */
.gmenu_sp_insta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.gmenu_sp_insta img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* --- TOP 各セクション本文の1文字落ち対策：
       .top_content_flex_txt の右padding 120px だと本文が1行31字になり、
       FOODの本文（63字）が「31 / 31 / す」と3行目に1文字だけ落ちる。
       内側paddingの上限を 120px→96px に詰めて1行33字ぶんの幅を確保し、2行に収める。
       テンプレ側は `.top_party .top_content_flex_txt` の2階層セレクタなので、同じ詳細度で上書きすること（本文テキストは変更しない） --- */
@media screen and (min-width: 768px) {

    /* テンプレ側は clamp(20px,10vw,120px)。上限だけ 96px に詰める（可変の挙動は据え置き） */
    .top_party .top_content_flex_txt,
    .top_alacarte .top_content_flex_txt {
        padding-right: clamp(20px, 10vw, 96px);
    }

    .top_course .top_content_flex_txt,
    .top_drink .top_content_flex_txt {
        padding-left: clamp(20px, 10vw, 96px);
    }
}

/* --- メニュー系のアンカーボタン（menu/food/drink/lunch のMV下）：
       ランチ非表示で3つになったため、PCは .anchor{flex:0 0 25%} のままだと右に1つぶんの余白が残る。
       等分して幅いっぱいに広げる。SPはテンプレどおり2列組みを保ち、3つ目が左に寄らないよう中央寄せ --- */
.anchor_wrap {
    justify-content: center;
}

.anchor {
    flex: 1 1 0;
}

@media screen and (max-width: 767px) {
    .anchor {
        flex: 0 0 50%;
    }
}

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


/* ==========================================================================
   予約導線 / Instagram（全ページ共通ナビ）
   ========================================================================== */

/* PCヘッダー：予約するボタン */
.gnav_item.gnav_reserve {
    display: flex;
    align-items: center;
}

.gmenu_reserve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    padding: 8px 12px;
    line-height: 1;
    white-space: nowrap;
}

.gmenu_reserve::after {
    display: none;
}

.gmenu_reserve:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* SPハンバーガー：予約するボタン */
.header_nav_reserve_sp {
    margin: 4px 0 8px;
}

.gmenu_sp_reserve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    border: 1px solid #1b1b1b;
    padding: 0 22px;
    line-height: 42px;
    white-space: nowrap;
}

/* フッター：予約するボタン */
.fmenu_reserve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    padding: 7px 12px;
    line-height: 1;
    white-space: nowrap;
}

/* フッター：Instagramアイコン */
.footer_link_insta {
    display: flex;
    align-items: center;
}

.footer_insta_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer_insta_link img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

@media screen and (max-width: 767px) {
    .footer_link_reserve,
    .footer_link_insta {
        display: flex;
        justify-content: center;
    }

    .footer_link_insta {
        margin-top: 0;
    }

    .footer_insta_link img {
        width: 28px;
        height: 28px;
    }
}