@charset "UTF-8";
/* ==========================================================
   月世界 custom.css（template105 上書き専用。テンプレ本体CSSは触らない）
   ========================================================== */

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

/* §1 ヘッダーロゴ：inline のベースライン余白で上下非対称になるのを解消 */
@media screen and (min-width: 768px) {
    .header_inner > a:first-child { display: flex; align-items: center; padding: 10px 0; }
    .header-logo-sub.pc { display: block; width: auto; height: auto; max-width: 14vw; max-height: 64px; margin-top: 0; }
}
@media screen and (min-width: 1215px) { .header-logo-sub.pc { max-width: 170px; } }

/* §2 グロナビ：予約ボタン＋Instagramアイコン（最右／URL未定のため href="#" で仮設置） */
.gnav_wrap { align-items: center; }
.gnav_insta { display: flex; align-items: center; }   /* li も flex にしないとアイコンがベースライン分上にずれる */
.gnav_insta a { display: flex; align-items: center; padding: 0; }
.gnav_insta img { width: 24px; height: 24px; object-fit: contain; display: block; }
.gmenu_sp_insta { display: inline-flex !important; align-items: center; justify-content: center; }
.gmenu_sp_insta img { width: 28px; height: 28px; object-fit: contain; display: block; }
/* 768〜1100px：右端固定の追従予約ボタン（#op_btn）とグロナビ右端の衝突回避 */
@media screen and (min-width: 768px) and (max-width: 1100px) {
    .gnav { margin-right: 100px; }
}

/* §3 下層ページMV（.heading1_wrap）：テンプレ既定 h1_bg.jpg → 案件画像＋暗幕 */
.heading1_wrap { background-image: url(../img/page-mv.jpg); }   /* PIXTA 97159721 中華火鍋（黒背景の暗い写真） */
.heading1_wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);   /* テンプレに暗幕が無いため白見出し用に追加 */
}
.heading1_wrap .heading1 { z-index: 1; text-shadow: 0 1px 10px rgba(0, 0, 0, .65); }

/* §4 TOPコース背景（.top_access／現在は非表示セクション）：テンプレ既定 course1.jpg を使わない */
.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); }
}

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

/* §7 ギャラリーページ：画像の比率を揃える（長方形グリッド型） */
.gallery_content_sec_item img {
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* §8 フッター：予約する（濃色地なので抜きチップ）＋Instagramアイコン（最右） */
.footer_link_list { align-items: center; }
.footer_resv a {
    display: inline-block;
    padding: 4px 14px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: transparent;
    color: #fff;
}
.footer_insta { display: flex; align-items: center; justify-content: center; }   /* SPは li が全幅で縦積み → 中央寄せしないとアイコンが左端に寄る */   /* li も flex にしないと inline-flex の a が行のベースラインに乗り4px上ずれる */
.footer_insta a { display: flex; align-items: center; }
.footer_insta img { width: 24px; height: 24px; object-fit: contain; display: block; }

/* §9 TOP Instagram 下余白（PC）
   テンプレは .top_insta が上80px／下0px で、直後の News セクション（非表示）の余白に頼っていた。
   News 非表示でコンセプトの帯に一覧が密着するため、上と同じ 80px を下にも取る（SPは既定で60pxあり） */
@media screen and (min-width: 768px) {
    .top_insta { padding-bottom: 80px; }
}