@charset "utf-8";
/* ============================================================
   天ぷら 市原（Iima00105）案件用 上書きCSS
   テンプレ本体（style.css / style_responsive.css）は変更せず、
   この1ファイルだけで案件差分を吸収する。
   ============================================================ */

/* ------------------------------------------------------------
   1. ヘッダーロゴ
   支給ロゴ（logo.png）は白抜きのため、白地のヘッダー／
   明色のSPドロワーでは文字が消える。ロゴ画像は無加工のまま、
   CSSで濃色のプレートを敷いて可読性を確保する。
   ------------------------------------------------------------ */
.header-logo-sub {
    background-color: #1b1b1b;
    padding: 10px 16px;
    box-sizing: content-box;
}

@media screen and (min-width: 768px) {
    .header-logo-sub {
        width: 12vw;
        max-width: 150px;
        height: auto;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 767px) {
    .header-logo-sub {
        width: 150px;
        height: auto !important;
        padding: 8px 12px;
    }
}

/* ------------------------------------------------------------
   2. グローバルナビ：予約ボタン／Instagramアイコン（最右）
   ------------------------------------------------------------ */
/* li を flex にして「インライン要素がテキストのベースラインに乗る」のを断つ。
   inline-flex のままだと li の行ボックス(line-height:28px)のベースラインに
   32px のアイコンが乗り、li が40px に伸びてアイコンが約4px上にズレる。 */
.gnav_insta {
    display: flex;
    align-items: center;
    line-height: 1;
}

.gnav_insta a {
    display: flex;
    align-items: center;
    line-height: 1;
    padding: 0 0 0 18px;
}

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

.gnav_wrap {
    align-items: center;
}

/* SPドロワーも同様。inline-flex のままだと li の行ボックスのベースラインに
   乗って li が56pxに伸び、アイコンの上に余分な余白ができる。
   block レベルの flex にして margin:auto で中央寄せする。 */
.gmenu_sp_insta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    margin: 0 auto;
    line-height: 1;
}

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

/* ------------------------------------------------------------
   3. 下層ページのメインビジュアル
   テンプレ既定の h1_bg.jpg（ベースデータ）を案件画像に差し替え。
   ------------------------------------------------------------ */
.heading1_wrap {
    background-image: url(../img/page-mv.jpg);
}

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

/* ------------------------------------------------------------
   4. TOP ギャラリーのループスライダー：中央基準でトリミング
   （枠に対して原寸・左上基準で入るため見切れる既定の対策）
   ------------------------------------------------------------ */
#loopslider ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ------------------------------------------------------------
   5. ギャラリーページ：画像サイズを 16:9 に統一
   支給画像は全点 660×370（≒16:9）。比率は歪めず
   object-fit: cover の中央トリミングで行の高さを揃える。
   ------------------------------------------------------------ */
.gallery_content_sec_item img {
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* ------------------------------------------------------------
   6. Instagram（CMS連携）：横4枚 × 縦2段
   HS「連携箇所はテンプレートと同様の位置となります。横4縦２段で
   お願いします」に合わせ、4列表示＋9件目以降を非表示にする。
   ------------------------------------------------------------ */
.insta_wrap {
    max-width: 980px;
}

.CMS-INSTAGRAM-LIST a {
    width: calc(25% - 10px * 3/4);
}

.CMS-INSTAGRAM-LIST a:nth-child(3n) {
    margin-right: 10px;
}

.CMS-INSTAGRAM-LIST a:nth-child(-n+3) {
    margin-top: 10px;
}

.CMS-INSTAGRAM-LIST a:nth-child(4n) {
    margin-right: 0;
}

.CMS-INSTAGRAM-LIST a:nth-child(-n+4) {
    margin-top: 0;
}

.CMS-INSTAGRAM-LIST a:nth-child(n+9) {
    display: none;
}

.CMS-INSTAGRAM-LIST img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

@media screen and (max-width: 767px) {
    .CMS-INSTAGRAM-LIST a {
        width: calc(50% - 10px * 1/2);
    }

    .CMS-INSTAGRAM-LIST a:nth-child(2n) {
        margin-right: 0;
    }

    .CMS-INSTAGRAM-LIST a:nth-child(-n+2) {
        margin-top: 0;
    }

    .CMS-INSTAGRAM-LIST a:nth-child(3),
    .CMS-INSTAGRAM-LIST a:nth-child(4) {
        margin-top: 10px;
    }
}

/* ------------------------------------------------------------
   7. Instagram セクションの下余白
   （テンプレ既定は padding-bottom: 0 で直下セクションと詰まる）
   ------------------------------------------------------------ */
.top_insta {
    padding-bottom: 100px;
}

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

/* ------------------------------------------------------------
   8. メニュー系ページのアンカー（コース／お飲物の2本）
   ------------------------------------------------------------ */
@media screen and (min-width: 768px) {
    .anchor_wrap_2col .anchor {
        flex: 0 0 30%;
    }
}

/* ------------------------------------------------------------
   9. TOPコースセクション（現在HS指定で非表示）の背景
   テンプレ既定 course1.jpg（他店ストック画像）を削除したため、
   復活させる場合に備えて案件画像を指定しておく。
   ------------------------------------------------------------ */
.top_access {
    background-image: url(../img/img_policy_02.jpg);
}

@media screen and (max-width: 767px) {
    .top_access {
        background-image: url(../img/img_policy_02.jpg);
    }
}

/* ------------------------------------------------------------
   フッターグローバルナビ：予約ボタン＋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;
    }
}