@charset "UTF-8";
/* ============================================================
   スタンドキッチンルポン 案件用 上書きCSS（template105）
   テンプレ本体（style.css / style_responsive.css）は触らず、ここで上書きする
   ============================================================ */

/* 1. ダークモードで本文が沈まないよう地を白に固定（body に敷くとTOPの帯が消えるので html のみ） */
:root { color-scheme: light; }
html { background-color: #fff; }

/* 2. ヘッダーロゴ：inline のベースライン余白で下にずれるのを防ぐ */
@media screen and (min-width: 768px) {
    .header_logo_a { display: flex; align-items: center; }
    .header-logo-sub.pc { display: block; margin-top: 0; }
    .header_inner { padding: 10px 0; }
}

/* 3. グロナビ：予約ボタン・Instagramアイコンの行揃え */
.gnav_wrap { align-items: center; }
.gnav_item { display: flex; align-items: center; }
.gnav_insta a,
.gnav_insta_sp a { display: flex; align-items: center; justify-content: center; }
.gnav_insta img { width: 26px; height: 26px; object-fit: contain; display: block; }
.gnav_insta_sp img { width: 32px; height: 32px; object-fit: contain; display: block; }
/* SPドロワー：文字リンクは a に上マージン2remがあるがアイコンには無く予約ボタンと詰まる。margin は前項目と相殺されるので padding で空ける */
.gnav_insta_sp { padding-top: 12px; }
.gnav_resv_sp .btn { margin: 0 auto; }

/* 4. 右端固定の追従予約ボタン（#op_btn）とグロナビ右端が重ならないよう逃がす */
@media screen and (min-width: 768px) and (max-width: 1100px) {
    .gnav { margin-right: 100px; }
}

/* 5. フッターメニュー：予約（抜きチップ）とInstagramアイコン */
.footer_link_list { align-items: center; flex-wrap: wrap; }
.footer_link_menu { display: flex; align-items: center; }
.fmenu_resv {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: transparent;
    line-height: 1.4;
}
.footer_insta a { display: inline-flex; align-items: center; }
.footer_insta img { width: 26px; height: 26px; object-fit: contain; display: block; }
@media screen and (max-width: 767px) {
    .footer_link_menu { justify-content: center; }
}

/* 6. TOP：News を置かないので、Instagram 一覧とコンセプト帯の間に余白を確保 */
@media screen and (min-width: 768px) {
    .top_insta { padding-bottom: 80px; }
}

/* 7. 下層ページMV（CSS背景）を案件画像に差し替え＋白見出しの可読性確保 */
.heading1_wrap {
    background-image: url(../img/page-mv.jpg);
    position: relative;
}
.heading1_wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}
.heading1_wrap .heading1 { position: relative; z-index: 1; }

/* 8. TOPコース背景（非表示セクション）もテンプレ既定画像を参照しない */
.top_access { background-image: url(../img/ph_top-course-bg.jpg); }
@media screen and (max-width: 767px) {
    .top_access { background-image: url(../img/ph_top-course-bg.jpg); }
}

/* 9. TOPギャラリーのループスライダー（現在は非表示）：中央基準でトリミング */
#loopslider ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 10. ギャラリー：比率の違う写真が混ざっても高さを揃える（歪ませない） */
.gallery_content_sec_item img {
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* 11. TOPコンセプト見出し：語の途中で改行しない（SPで「ジ」だけ落ちるのを防ぐ） */
.concept_catch span { display: inline-block; }