@charset "UTF-8";
/* ==========================================================
   炭火焼肉 ちさね（Iima00127 / template105）上書き用CSS
   テンプレ本体（style.css / style_responsive.css）は触らず、ここで上書きする
   ========================================================== */

/* §1 body背景：template105 は body に background 指定が無い */
body {
    background: #fff;
}

/* §2 グロナビ：予約ボタン＋Instagramアイコン（最右） */
.gnav_wrap {
    align-items: center;
}

.gnav_item.gnav_resv .btn {
    width: 100px;
    justify-content: center;
    align-items: center;
}

.gnav_item.gnav_insta {
    display: flex;
    align-items: center;
    line-height: 1;
}

.gnav_insta a {
    display: flex;
    align-items: center;
    line-height: 1;
}

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

@media screen and (max-width: 767px) {
    .header_nav_list_sp_resv .btn {
        width: 150px;
        margin: 0 auto;
    }

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

    .header_nav_list_sp a.gmenu_sp.gmenu_sp_insta {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        margin: 10px auto 0;
        line-height: 1;
    }

    .gmenu_sp_insta img {
        width: 36px;
        height: 36px;
        object-fit: contain;
        display: block;
    }
}

/* §3 Instagram連携：HS「横4×縦2段／PCもSPも横4」
   既定は3列6枚（nth-child(3n) と 7〜9番目 display:none）→ gap方式で4列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);
    }
}

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

/* §5 下層ページMV：テンプレ既定 h1_bg.jpg → 案件画像＋暗幕 */
.heading1_wrap {
    background-image: url(../img/page-mv.jpg);
}

.heading1_wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
}

.heading1 {
    z-index: 1;
}

/* §6 TOPコース背景：テンプレ既定 course1.jpg → 案件画像 */
.top_access {
    background-image: url(../img/course-bg.jpg);
}

@media screen and (max-width: 767px) {
    .top_access {
        background-image: url(../img/course-bg.jpg);
    }
}

/* §7 フッターメニュー：予約（抜きチップ）＋Instagram（最右） */
.footer_link_list {
    align-items: center;
}

.footer_link_menu_resv .fmenu {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.45);
    padding: 10px 18px;
    line-height: 1;
}

.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;
}

/* §9 お問い合わせ：必須バッジ */
.required-badge {
    display: inline-block;
    background: #c0392b;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
    font-family: sans-serif;
    letter-spacing: 0.05em;
}

/* §10 コースメニュー：iPhoneSafari SP崩れ修正
   tabelog.css の display:table 系をブロック構造に上書き */
@media screen and (max-width: 768px) {

    /* ── コース一覧行 ── */
    .rstdtl-course-list {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }

    /* ── コース画像セル → ブロックに変換 ── */
    .rstdtl-course-list__img {
        display: block !important;
        width: 100% !important;
        padding: 10px 0 0 !important;
    }

    .rstdtl-course-list__img img {
        display: block !important;
        width: 60% !important;
        height: auto !important;
        max-width: 100%;
    }

    /* ── テキスト情報セル → ブロックに変換 ── */
    .rstdtl-course-list__data {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 15px 0 !important;
        word-break: break-all;
    }

    /* ── ヘッダー行（コース名＋価格）── */
    .rstdtl-course-list__data-header {
        display: block !important;
        width: 100% !important;
    }

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

    /* ── 価格ブロック ── */
    .rstdtl-course-list__price-wrap {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
    }

    /* ── 利用条件（人数・時間）── */
    .rstdtl-course-list__course-rule {
        display: block !important;
        white-space: normal !important;
        word-break: break-word !important;
        padding: 0 0 0.3rem !important;
        margin-top: 10px;
    }

    /* ── 注記テキスト ── */
    .rstdtl-course-list__reserve-notice {
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* ── オプション（飲み放題ラベル等）── */
    .rstdtl-course-list__option {
        display: block !important;
    }
}

/* §8 ギャラリー：写真の比率を統一（ga8 だけ 4:3 で縦長になるため）
   多数派の 16:9 に揃え、中央基準でトリミング（引き伸ばさない） */
.gallery_content_sec_item img {
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    object-position: center;
}