@charset "UTF-8";
/* ==========================================================
   穂月 案件用の上書き（テンプレ本体 style.css / style_responsive.css は触らない）
   ========================================================== */

/* 1. ダークモード対策：キャンバス(html)だけに白を敷く
      ※ body に敷くと TOPメニューのベージュ帯(::before z-index:-1)が隠れる */
:root { color-scheme: light; --insta-icon: 30px; }
html { background-color: #fff; }

/* 2. PCヘッダー：ロゴの上下を均等に（img が inline だとベースライン分ずれる） */
@media screen and (min-width: 768px) {
    .header-logo-link { display: flex; align-items: center; }
    .header-logo-sub.pc { display: block; margin-top: 0; width: auto; max-width: none; height: 56px; padding: 10px 0; box-sizing: content-box; }
}

/* 3. グロナビ：予約ボタン・Instagramアイコン（最右） */
.gnav_wrap { align-items: center; }
.gnav_resv .btn { width: 100px; height: var(--insta-icon); padding: 0; }
.gnav_insta { display: flex; align-items: center; line-height: 1; }
.gnav_insta a { display: flex; align-items: center; line-height: 1; }
.gnav_insta img,
.gmenu_sp_insta img,
.footer_link_menu_insta img { width: var(--insta-icon); height: var(--insta-icon); object-fit: contain; display: block; }
.header_nav_list_sp_insta { display: flex; justify-content: center; }
.gmenu_sp_insta { display: flex !important; align-items: center; justify-content: center; width: var(--insta-icon); margin: 0 auto; line-height: 1; }
.header_nav_list_sp .btn { max-width: 160px; margin: 0 auto; padding: 12px 0; }

/* 追従予約ボタン(#op_btn・右端固定)とグロナビ右端の重なり回避 */
@media screen and (min-width: 768px) and (max-width: 1100px) {
    .gnav { margin-right: 100px; }
}

/* 4. フッターメニュー：予約（抜きチップ）・Instagram（最右） */
.footer_link_list { align-items: center; }
.footer_link_menu_resv .fmenu { display: inline-block; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .45); 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; }

/* 5. TOP：Instagram直下がコンセプト帯になるので下余白を確保（PCは既定0） */
@media screen and (min-width: 768px) {
    .top_insta { padding-bottom: 80px; }
}

/* 6. TOPコース背景（CSS背景：PC=style.css / SP=style_responsive.css の2か所を上書き） */
.top_access { background-image: url(../img/top-course-bg.jpg); }
@media screen and (max-width: 767px) {
    .top_access { background-image: url(../img/top-course-bg.jpg); }
}

/* 7. 下層ページタイトル帯（MV）：案件写真に差し替え＋白文字用の暗幕 */
.heading1_wrap { background-image: url(../img/page-mv.jpg); }
.heading1_wrap::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.heading1_wrap .heading1 { z-index: 1; }
@media screen and (max-width: 767px) {
    .heading1_wrap { background-image: url(../img/page-mv.jpg); }
}

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

/* 9. ギャラリーページ：比率を3:2に統一（歪めず中央トリミング） */
.gallery_content_sec_item img { aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: center; }

/* 10. TOPコース本文（HSの箇条書き）を読みやすく */
.top_access .top_food_content p { line-height: 2; }

/* 11. お問い合わせフォーム：必須マーク */
.required-mark {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    background-color: #9b2335;
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: .05em;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1.4;
}

/* 12. お料理ページ：準備中テキスト */
.comingsoon_txt {
    text-align: center;
    font-size: 2.2rem;
    letter-spacing: .2em;
    color: #000;
    margin-top: 10px;
    padding: 0 0 40px 0.5em;
}