@charset "utf-8";
/* ============================================================
   炭火焼鳥 えびす（Iima00115 / template105）案件用 上書きCSS
   ※テンプレ本体（style.css / style_responsive.css）は変更しない
   ============================================================ */

/* ------------------------------------------------------------
   1. body の地の色（テンプレ既定に background 指定が無く、
      ダークモードのブラウザで本文が沈むため明示する）
   ------------------------------------------------------------ */
body {
    background-color: #ffffff;
}

/* ------------------------------------------------------------
   2. ヘッダーロゴ：縦横比を保ったまま高さの上限を付ける
   ------------------------------------------------------------ */
@media screen and (min-width: 768px) {
    .header-logo-sub {
        width: auto;
        max-width: 170px;
        max-height: 72px;
        height: auto;
        object-fit: contain;
    }
}

@media screen and (max-width: 767px) {
    .header-logo-sub {
        width: 150px;
        max-height: 74px;
        height: auto !important;
        object-fit: contain;
    }
}

/* ------------------------------------------------------------
   3. グロナビ最右の Instagram アイコン（PC / SPドロワー）
      ※ inline-flex だと li のベースラインに乗って上にズレるので
        li・a とも flex にする
   ------------------------------------------------------------ */
.gnav_wrap .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: .6;
    transition: all .5s;
}

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

.gmenu_sp_insta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

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

/* ------------------------------------------------------------
   4. Instagram CMS連携：横4×縦2段（8枚）
      HS「⇒横4×縦２段でお願いします」
      ※テンプレ既定は3列6枚固定（nth-child のマージン計算＋7〜9番目 display:none）
        なので gap 方式に置き換えたうえで7・8番目の非表示を解除する
   ------------------------------------------------------------ */
.CMS-INSTAGRAM-LIST {
    gap: 10px;
}

.CMS-INSTAGRAM-LIST a {
    width: calc((100% - 30px) / 4);
    margin: 0 !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.CMS-INSTAGRAM-LIST a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.CMS-INSTAGRAM-LIST a:nth-of-type(7),
.CMS-INSTAGRAM-LIST a:nth-of-type(8) {
    display: block;
}

.CMS-INSTAGRAM-LIST a:nth-of-type(n+9) {
    display: none;
}

@media screen and (max-width: 767px) {
    .CMS-INSTAGRAM-LIST {
        gap: 6px;
    }

    .CMS-INSTAGRAM-LIST a {
        width: calc((100% - 18px) / 4);
    }
}

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

/* ------------------------------------------------------------
   6. 下層ページのMV（CSS背景）：テンプレ既定 h1_bg.jpg → 案件画像
      白い見出し文字が乗るので暗幕を重ねて可読性を確保する
   ------------------------------------------------------------ */
.heading1_wrap {
    background-image: url(../img/page-mv.jpg);
    position: relative;
}

.heading1_wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .45);
    z-index: 1;
}

.heading1 {
    z-index: 2;
}

/* ------------------------------------------------------------
   7. 写真ギャラリー：比率を揃えて行の高さを均一にする
      （歪ませずに中央トリミング）
   ------------------------------------------------------------ */
.gallery_content_sec_item img {
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* ------------------------------------------------------------
   8. コンセプトのキャッチコピーは2行になるため行間を調整
   ------------------------------------------------------------ */
.top_concept .heading2 {
    line-height: 1.6;
}

/* ------------------------------------------------------------
   9. グロナビの「予約する」ボタン
       並びは …お知らせ → お問い合わせ → 予約する → Instagram（最右）
   ------------------------------------------------------------ */
.gnav_wrap .gnav_resv {
    display: flex;
    align-items: center;
}

.gnav_resv .btn {
    width: auto;
    min-width: 96px;
    padding: 9px 14px;
    font-size: 1.1vw;
    letter-spacing: .1rem;
    white-space: nowrap;
}

@media screen and (min-width: 1280px) {
    .gnav_resv .btn {
        font-size: 1.4rem;
    }
}

.gnav_resv .btn:hover {
    background: #6a6a6a;
}

/* SPドロワー：他の項目と同じ幅の中央に置く */
.header_nav_list_sp_resv .btn {
    width: 100%;
    max-width: 150px;
    margin: 6px auto 0;
    padding: 12px 0;
    font-size: 1.4rem;
}

/* ------------------------------------------------------------
   10. フッターメニューの「予約する」
       ※フッターは濃色。テンプレの .btn（ベタ塗り）だと地に沈むので
         白の細枠だけの"抜きチップ"で CTA を示す
   ------------------------------------------------------------ */
.footer_link_list {
    align-items: center;
}

.footer_link_menu_resv .fmenu {
    display: inline-block;
    padding: 7px 18px;
    border: 1px solid rgba(255, 255, 255, .45);
    line-height: 1.4;
    margin: -8px 0;
}

.footer_link_menu_resv .fmenu:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .8);
}

@media screen and (max-width: 767px) {
    .footer_link_menu_resv .fmenu {
        margin: 0;
        padding: 9px 24px;
    }
}

/* ------------------------------------------------------------
   11. フッターメニュー最右の Instagram アイコン
   ------------------------------------------------------------ */
.footer_link_menu_insta {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer_link_menu_insta .fmenu {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.footer_link_menu_insta img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

.footer_link_menu_insta .fmenu:hover {
    opacity: .7;
}

/* ------------------------------------------------------------
   12. コースセクション：Safari iPhone サイズのレイアウト崩れ修正
       tabelog.css の SP 用 display:table レイアウトが Safari で
       匿名ボックス生成により崩れるため、block レイアウトに切り替える
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {
    /* コース一覧アイテムをブロックレイアウトに切り替え */
    .rstdtl-course-list {
        display: block !important;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* 画像セル */
    .rstdtl-course-list__img {
        display: block !important;
        width: 100%;
        padding: 15px 0 0;
    }

    .rstdtl-course-list__img img {
        display: block;
        width: 65%;
        max-width: 220px;
        height: auto;
    }

    /* 情報テキストセル */
    .rstdtl-course-list__data {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 15px 0;
    }

    /* 飲み放題オプション等 */
    .rstdtl-course-list__option {
        display: block !important;
        width: 100%;
    }

    /* 予約ボタンは SP では非表示 */
    .rstdtl-course-list__action-btn {
        display: none !important;
    }

    /* コース一覧ラッパー */
    .course-list__items {
        width: 100% !important;
        overflow: hidden;
    }

    /* データヘッダー（タイトル + 価格）を折り返し可能に */
    .rstdtl-course-list__data-header {
        display: block !important;
        width: 100%;
    }

    .rstdtl-course-list__course-title {
        display: block !important;
        width: 100%;
    }

    .rstdtl-course-list__price-wrap {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
    }

    /* 価格テキストが横に飛び出ないように */
    .rstdtl-course-list__price-num {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* コース名テキストの折り返し */
    .rstdtl-course-list__course-title-text {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}