@charset "utf-8";
/* ============================================================
   洋食 川ぎし（Iima00117 / template103）案件用 上書きCSS
   ※テンプレ本体（style.css / style_responsive.css）は変更しない
   ============================================================ */

/* ------------------------------------------------------------
   1. body の地の色
      template103 は body に background 指定が無く、
      端末のダークモードで本文が沈むため明示する
   ------------------------------------------------------------ */
html,
body {
    background-color: #ffffff;
}

/* ------------------------------------------------------------
   2. ロゴ（白抜き）のサイズ上限と地色
      支給ロゴが白文字＋イラストのため、明るい地の上では読めない。
      ・PCヘッダー：MV上に重なる透過ヘッダーなのでそのまま白でOK
      ・SPヘッダー：position:relative で白地に乗るため濃色帯を敷く
   ------------------------------------------------------------ */
.header_logo img {
    max-height: 72px;
    object-fit: contain;
}

@media screen and (max-width: 767px) {
    /* SPヘッダーは白地＝白ロゴが消えるので濃色帯にする */
    .primary_header {
        background-color: #1b1b1b;
    }

    .header_logo img {
        max-height: 52px;
    }
}

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

@media screen and (max-width: 767px) {
    .footer_logo img {
        max-width: 150px;
        max-height: 66px;
    }
}

/* ------------------------------------------------------------
   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;
    padding: 10px 0;
}

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

/* フッターのSNSアイコン：inline-flex だと li のベースライン（文字の下端）に
   乗って下へズレるので、li・a とも flex にして行の中央へ揃える */
.footer_link_list {
    align-items: center;
}

.footer_link_menu_insta {
    display: flex;
    align-items: center;
    /* SPはフッターナビが1列（li が flex:0 0 100%）になり、
       display:flex にすると text-align:center が効かないので中央寄せを明示 */
    justify-content: center;
}

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

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

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

.CMS-INSTAGRAM-LIST a {
    width: calc(25% - 10px);
    margin: 5px !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 {
        margin: -3px;
    }

    .CMS-INSTAGRAM-LIST a {
        width: calc(25% - 6px);
        margin: 3px !important;
    }
}

/* ------------------------------------------------------------
   5. TOPギャラリーのループスライダー：中央基準でトリミング
      （li は 250×250 固定なのに img 側にサイズ指定が無く見切れる）
   ------------------------------------------------------------ */
#loopslider ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ------------------------------------------------------------
   6. 下層ページのMV（CSS背景）
      テンプレ既定の h1_bg.jpg のままにせず案件画像へ差し替え、
      白いページタイトルが読めるよう暗幕を敷く
   ------------------------------------------------------------ */
.main_menu,
.main_gallery,
.main_access,
.main_recruit {
    background-image: url(../img/page-mv.jpg);
    position: relative;
}

.main_menu::after,
.main_gallery::after,
.main_access::after,
.main_recruit::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    pointer-events: none;
}

.main_logo_menu,
.main_logo_gallery,
.main_logo_access,
.main_logo_recruit {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------
   7. TOP CONCEPT の写真
      （template103 の CONCEPT セクションには既定で画像枠が無いため追加）
   ------------------------------------------------------------ */
.top_concept_img {
    max-width: 680px;
    margin: 40px auto 0;
}

.top_concept_img img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

@media screen and (max-width: 767px) {
    .top_concept_img {
        max-width: 88%;
        margin-top: 28px;
    }
}

/* ------------------------------------------------------------
   8. ギャラリー：枠の大きさを揃える
      （テンプレは padding-top:25% で正方形化する方式なので
        アスペクト比は触らず、img の収まりだけ整える）
   ------------------------------------------------------------ */
.gallery_content_sec_item img {
    object-fit: cover;
    object-position: center;
}

/* ------------------------------------------------------------
   9. メニュー系ページのアンカーボタン
      FOOD／LUNCH を非表示にしたぶん（.anchor は flex:0 0 25%）
      残り2つが左寄せになって右側が空くため中央寄せにする
   ------------------------------------------------------------ */
.anchor_wrap {
    justify-content: center;
}


/* ------------------------------------------------------------
   グロナビ「ご予約はこちら」
   ------------------------------------------------------------ */
.gnav_wrap .gnav_reserve {
    display: flex;
    align-items: center;
}

.gmenu_reserve {
    display: inline-block;
    padding: 7px 10px;
    background: rgb(255, 174, 0);
    color: #000;
    line-height: 1.2;
    white-space: nowrap;
}

.gmenu_reserve::after {
    display: none;
}

.gmenu_reserve:hover {
    opacity: .75;
}

.header_nav_list_sp_reserve {
    text-align: center;
    padding: 8px 20px;
}

.gmenu_sp_reserve {
    display: inline-block !important;
    width: auto !important;
    padding: 10px 18px !important;
    background: rgb(255, 174, 0);
    color: #000 !important;
}

/* TOPアクセスセクション／ACCESSページの公式サイトリンク */
a.official_site_link {
    color: #000;
}

/* ------------------------------------------------------------
   フッター「ご予約はこちら」
   ------------------------------------------------------------ */
.footer_link_menu_reserve {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fmenu_reserve {
    display: inline-block;
    padding: 7px 10px;
    background: rgb(255, 174, 0);
    color: #000;
    line-height: 1.2;
    white-space: nowrap;
}

.fmenu_reserve:hover {
    opacity: .75;
}