@charset "UTF-8";
/* ==========================================================
   だしの店 つみ木 — 案件用の上書き（テンプレ本体CSSは触らない）
   ========================================================== */

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

/* 2. PCヘッダー：ロゴを帯の上下中央に（img が inline だとベースライン分下に寄る） */
@media screen and (min-width: 768px) {
    .header_inner {
        padding: 12px 0;   /* ロゴ(高さ72px)が帯の上下に貼り付かないよう余白 */
    }
    .header_logo_link {
        display: flex;
        align-items: center;
    }
    .header-logo-sub.pc {
        display: block;
        width: auto;
        max-width: 170px;
        max-height: 72px;
        height: auto;
        margin-top: 0;
    }
}

/* 3. グロナビ：予約ボタン＋Instagram（最右）。li・a とも flex でベースラインを断つ */
.gnav_wrap {
    align-items: center;
}
.gnav_item.gnav_resv,
.gnav_item.gnav_insta {
    display: flex;
    align-items: center;
    line-height: 1;
}
header .gnav_resv .btn {
    width: auto;
    height: var(--insta-icon);
    padding: 0 16px;
    justify-content: center;
    font-size: 1.1vw;
    white-space: nowrap;
}
.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;
}
/* 768〜1100px：右端固定の追従予約ボタン(#op_btn)にアイコンが潜らないよう逃がす */
@media screen and (min-width: 768px) and (max-width: 1100px) {
    .gnav {
        margin-right: 100px;
    }
}

/* 4. SPドロワー：予約ボタン＋Instagram */
.header_nav_list_sp_resv .btn {
    width: 150px;
    margin: 0 auto;
    padding: 12px 0;
    justify-content: center;
}
.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;
}
.gmenu_sp_insta img {
    width: var(--insta-icon);
    height: var(--insta-icon);
    object-fit: contain;
    display: block;
}

/* 5. フッターメニュー：予約（白の細枠の抜きチップ）＋Instagram（最右） */
.footer_link_list {
    align-items: center;
}
.footer_link_menu_resv .fmenu {
    display: inline-block;
    padding: 10px 22px;
    border: 1px solid rgba(255, 255, 255, 0.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;
}
.footer_link_menu_insta img {
    width: var(--insta-icon);
    height: var(--insta-icon);
    object-fit: contain;
    display: block;
}

/* 6. 下層ページMV：テンプレ既定 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, 0.45);
    pointer-events: none;
}
.heading1_wrap .heading1 {
    z-index: 1;
}

/* 7. TOPコースの背景：テンプレ既定 course1.jpg → 案件画像（PC=style.css / SP=style_responsive.css の2か所） */
.top_access {
    background-image: url(../img/course-bg.jpg);
}
@media screen and (max-width: 767px) {
    .top_access {
        background-image: url(../img/course-bg.jpg);
    }
}

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

/* 9. ギャラリー：サイズ揃え（比率は歪めず中央トリミング） */
.gallery_content_sec_item img {
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* 10. Instagram連携：横4×縦2段（PC・SPとも）。既定は3列6枚固定なので gap 方式に置き換え */
.CMS-INSTAGRAM-LIST {
    gap: 10px;
}
.CMS-INSTAGRAM-LIST a {
    width: calc((100% - 30px) / 4);
    margin: 0 !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;
}

/* 11. 768〜900px：項目9つ＋ロゴで帯幅を超える（768pxで約46pxはみ出し）→ この帯だけロゴと余白を詰める
       ※ 同一詳細度の上書きは後勝ちなので末尾に置く。文字サイズ(1.1vw)は変えない */
@media screen and (min-width: 768px) and (max-width: 900px) {
    .header-logo-sub.pc {
        max-width: 120px;
        margin-right: 12px;
    }
    .gnav {
        margin-right: 64px;
    }
    .gnav_item:not(:last-child) {
        margin-right: 1.1vw;
    }
    header .gnav_resv .btn {
        padding: 0 10px;
    }
}

/* 12. フッターメニュー：予約・Instagramを足して9項目 → 768〜1100pxで既定の40px間隔だとはみ出す */
@media screen and (min-width: 768px) and (max-width: 1100px) {
    .footer_link_list {
        flex-wrap: wrap;
        row-gap: 14px;
    }
    .footer_link_menu {
        margin-right: 22px;
    }
}