@charset "UTF-8";
/* ==========================================================
   club小羊 案件用の上書き（テンプレ本体CSSは触らない）
   ========================================================== */

/* 1. ダークモードで本文が沈まないよう、キャンバス（html）だけに白を敷く
      ※ body に敷くと TOPメニューの帯（z-index:-1 の ::before）が隠れる */
:root {
    color-scheme: light;
    --insta-icon: 30px;   /* Instagramアイコンは全箇所この1サイズ（PCグロナビの「予約する」ボタン高さ30pxに合わせる） */
}
html { background-color: #fff; }

/* 2. ヘッダーロゴ：img が inline だと上下非対称になるので block＋親を flex に */
@media screen and (min-width: 768px) {
    .header_inner { padding: 10px 0; }
    .header_inner > a { display: flex; align-items: center; }
    .header-logo-sub.pc {
        display: block;
        width: auto;
        max-width: 170px;
        max-height: 64px;
        height: auto;
        margin-top: 0;
    }
}

/* 3. グロナビの予約ボタン・Instagramアイコン（li と a の両方を flex にしてベースラインを断つ） */
.gnav_wrap { align-items: center; }
.gnav_item.gnav_insta { display: flex; align-items: center; line-height: 1; }
.gnav_insta a { display: flex; align-items: center; line-height: 1; }
.gnav_insta img { width: var(--insta-icon); height: var(--insta-icon); object-fit: contain; display: block; }

/* SPドロワー */
.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: 2rem auto 0; line-height: 1; }
.gmenu_sp_insta img { width: var(--insta-icon); height: var(--insta-icon); object-fit: contain; display: block; }
.header_nav_list_sp a.gmenu_sp.btn {
    width: 120px;
    padding: 12px 0;
    margin: 2rem auto 0;
    color: #fff;
    white-space: nowrap;
}

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

/* 4. 下層ページMV（CSS背景）：テンプレ既定 h1_bg.jpg → 案件画像。白見出し用に暗幕 */
.heading1_wrap { background-image: url(../img/page-mv.jpg); }
.heading1_wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    pointer-events: none;
}
.heading1_wrap > * { position: relative; z-index: 1; }

/* 5. TOPコース背景（CSS背景・PC/SP 2か所）：テンプレ既定 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. ギャラリー：サイズを 3:2 に揃える（比率は歪めない） */
.gallery_content_sec_item img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

/* 8. TOP Instagram：直後の News を非表示にしたので下余白を自前で持つ */
@media screen and (min-width: 768px) {
    .top_insta { padding-bottom: 80px; }
}

/* 9. フッターメニュー：予約する（抜きチップ）と Instagram アイコン */
.footer_link_list { align-items: center; }
.footer_link_menu_resv .fmenu {
    display: inline-block;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
    padding: 8px 20px;
    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; }
.footer_link_menu_insta img { width: var(--insta-icon); height: var(--insta-icon); object-fit: contain; display: block; }