@charset "utf-8";

/* ============================================================
   ちろり庵（Iima00104）custom.css
   テンプレート本体CSS（style.css / style_responsive.css）は触らず、
   案件固有の上書きはすべてこのファイルに集約する。
   ============================================================ */

/* ------------------------------------------------------------
   ロゴ：画像を使わないテキストロゴ（HS「ロゴ無・おまかせ」）
   ------------------------------------------------------------ */
/* display は指定しない。指定するとテンプレの .pc / .sp（display:none）を
   後読みで上書きしてしまい、SPのMV下にPC用ロゴが出てしまう。 */
.text-logo {
    font-family: "Noto Serif JP", "游明朝", "Yu Mincho", "YuMincho",
        "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
    font-weight: 500;
    color: #313131;
    letter-spacing: 0.12em;
    line-height: 1;
    white-space: nowrap;
}

@media screen and (min-width: 768px) {
    .text-logo {
        display: block;
        font-size: 2.6rem;
        margin-right: 20px;
    }
}

@media screen and (max-width: 767px) {
    /* SPヘッダー（MV下）はハンバーガーのみ。ロゴは出さない */
    .text-logo.pc {
        display: none;
    }

    /* SPドロワー内のロゴ */
    .text-logo--sp {
        display: block;
        font-size: 2.4rem;
        margin: 0 auto 10px;
    }
}

/* ------------------------------------------------------------
   グローバルナビ：予約ボタン＋Instagramアイコン（最右）
   ------------------------------------------------------------ */
.gnav_insta a {
    display: inline-flex;
    align-items: center;
    padding: 0;
}

.gnav_insta img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    vertical-align: middle;
}

.gnav_resv .btn::after {
    display: none;
}

/* SPドロワーのInstagramはアイコン表示 */
.gmenu_sp_insta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.gmenu_sp_insta img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* ------------------------------------------------------------
   TOP：Instagramセクションの下余白
   テンプレ既定はPCで padding: 80px 0 0（下余白ゼロ）のため、
   直後のコンセプトセクション（背景色あり）と詰まって見える。
   他セクションの padding_sec_tb（PC 100px / SP 60px）に合わせて下だけ足す。
   ------------------------------------------------------------ */
@media screen and (min-width: 768px) {
    .top_insta {
        padding-bottom: 100px;
    }
}

@media screen and (max-width: 767px) {
    .top_insta {
        padding-bottom: 70px;
    }
}

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

/* ------------------------------------------------------------
   ギャラリーページ：画像サイズを 3:2 に統一（歪ませず中央トリミング）
   ------------------------------------------------------------ */
.gallery_content_sec_item img {
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* ------------------------------------------------------------
   下層ページのMV（ページタイトル帯）：テンプレ既定 h1_bg.jpg を案件画像へ
   ------------------------------------------------------------ */
.heading1_wrap {
    background-image: url(../img/page-mv.jpg);
    background-color: #1b1b1b;
}

@media screen and (max-width: 767px) {
    .heading1_wrap {
        background-image: url(../img/page-mv.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}

/* ------------------------------------------------------------
   TOP：コースセクションの背景（テンプレ既定 course1.jpg を案件画像へ）
   ------------------------------------------------------------ */
.top_access {
    background-image: url(../img/parallax-course.jpg);
}

@media screen and (max-width: 767px) {
    .top_access {
        background: url(../img/parallax-course.jpg) no-repeat center;
        background-size: cover;
        background-color: #000;
    }
}


/* ------------------------------------------------------------
   フッターグローバルナビ：予約ボタン＋Instagramアイコン
   ------------------------------------------------------------ */
.footer_resv_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    background: #313131;
    line-height: 1;
    transition: all 0.5s;
}

.footer_resv_btn:hover {
    background: #6a6a6a;
    opacity: 1;
}

.footer_insta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer_insta img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

@media screen and (max-width: 767px) {
    .footer_resv_btn {
        padding: 10px 18px;
    }

    .footer_insta img {
        width: 28px;
        height: 28px;
    }
}