@charset "UTF-8";
/* ===== Bistro SALT&PEPPER 反映用 上書きCSS（テンプレ本体は触らない） ===== */

/* ロゴ：テキストロゴ（ロゴ画像なし・おまかせ＝テキスト） */
.header_logo_text {
    display: inline-block;
    font-family: "Noto Serif JP", serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #ffffff;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    /* MVの明暗どちらでも読めるよう薄い影を付与 */
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.footer_logo_text {
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    line-height: 1.3;
}
@media (max-width: 767px) {
    .header_logo_text { font-size: 16px; }
    .footer_logo_text { font-size: 18px; }
}

/* グロナビ：予約・Instagram アイコン */
.gnav_insta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}
.gnav_insta img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    vertical-align: middle;
}
.gmenu_sp_insta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gmenu_sp_insta img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

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

/* Instagram一覧：横4×縦2段（HS指定）。
   テンプレ標準(style.css)は「flex＋3列」なので、崩さず4列に上書きするだけにする。
   ※grid化するとCMS(raven_instagram.js)が流し込む要素とテンプレ標準スタイルが競合して崩れるため使わない。 */
.CMS-INSTAGRAM-LIST a {
    /* 4枚並び： calc(25% - 余白10px * 3/4) */
    width: calc(25% - 10px * 3 / 4);
}
/* 3列用の余白リセットを解除し、4列用に再設定 */
.CMS-INSTAGRAM-LIST a:nth-child(3n) { margin-right: 10px; }
.CMS-INSTAGRAM-LIST a:nth-child(-n + 3) { margin-top: 10px; }
.CMS-INSTAGRAM-LIST a:nth-child(4n) { margin-right: 0; }
.CMS-INSTAGRAM-LIST a:nth-child(-n + 4) { margin-top: 0; }
/* 8枚（横4×縦2段）表示：7・8枚目を表示、9枚目以降を非表示 */
.CMS-INSTAGRAM-LIST a:nth-of-type(7),
.CMS-INSTAGRAM-LIST a:nth-of-type(8) { display: inline-block; }
.CMS-INSTAGRAM-LIST a:nth-of-type(n + 9) { display: none; }

@media screen and (max-width: 767px) {
    /* スマホは2列 */
    .CMS-INSTAGRAM-LIST a { width: calc(50% - 10px * 1 / 2); }
    .CMS-INSTAGRAM-LIST a:nth-child(3n) { margin-right: 10px; }
    .CMS-INSTAGRAM-LIST a:nth-child(4n) { margin-right: 10px; }
    .CMS-INSTAGRAM-LIST a:nth-child(2n) { margin-right: 0; }
    .CMS-INSTAGRAM-LIST a:nth-child(-n + 2) { margin-top: 0; }
}

/* サブページのヘッダーMV：提供写真に差し替え（h1_bg.jpgを上書き）。
   タイトル(白文字)の可読性確保のため暗めのグラデーションを重ねる。
   background-size:cover 等はテンプレ本体(style.css)の指定を継承。 */
.main_menu {
    background-image: linear-gradient(rgba(0, 0, 0, .38), rgba(0, 0, 0, .38)), url(../img/bg_kv_01.jpg);
}
.main_gallery {
    background-image: linear-gradient(rgba(0, 0, 0, .38), rgba(0, 0, 0, .38)), url(../img/bg_kv_03.jpg);
}
.main_access {
    background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)), url(../img/bg_kv_02.jpg);
}
.main_recruit {
    background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)), url(../img/bg_kv_02.jpg);
}

/* フッターグロナビ：予約・Instagramボタン */
.footer_link_list {
    align-items: center;
}

.footer_reserve_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    height: 2vw;
    min-height: 28px;
    padding: 0 14px;
    border: 1px solid #fff;
    border-radius: 0;
    box-sizing: border-box;
    line-height: 1;
}

.footer_reserve_btn:hover {
    color: #000;
    background: #fff;
    opacity: 1;
}

.footer_insta_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transition: opacity .5s;
}

.footer_insta_btn:hover {
    opacity: .7;
}

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

@media screen and (max-width: 767px) {
    .footer_link_menu.footer_reserve {
        margin-bottom: 20px;
    }

    .footer_link_menu.footer_insta {
        margin-bottom: 0;
    }

    .footer_reserve_btn {
        height: 44px;
        padding: 0 14px;
    }

    .footer_insta_btn {
        width: 44px;
        height: 44px;
        margin: 0 auto;
    }

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



/* ヘッダー・ハンバーガーメニュー：予約ボタンを四角枠に */
/* PCグロナビ：各項目の縦位置を中央で揃える */
.gnav_wrap {
    align-items: center;
}

.gnav_item {
    display: flex;
    align-items: center;
}

/* ヘッダー・ハンバーガーメニュー：予約ボタンを四角枠に */
.gnav_reserve .gmenu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    height: 2vw;
    padding: 0 14px;
    border: 1px solid #fff;
    border-radius: 0;
    box-sizing: border-box;
    line-height: 1;
}

/* 通常グロナビのホバー下線は予約ボタンには不要 */
.gnav_reserve .gmenu::after {
    display: none;
}

.gnav_reserve .gmenu:hover {
    color: #1b1b1b;
    background: #fff;
    opacity: 1;
    text-shadow: none;
}

/* Instagramアイコンも予約ボタンと同じ基準で中央揃え */
.gnav_insta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}

@media screen and (max-width: 767px) {
    .gmenu_sp_reserve {
        margin: 8px 0 10px;
    }

    .gmenu_sp_reserve .gmenu_sp {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 160px;
        height: 44px;
        padding: 0 18px;
        border: 1px solid #1b1b1b;
        border-radius: 0;
        box-sizing: border-box;
        line-height: 1;
        letter-spacing: .2rem;
    }
}