@charset "utf-8";
/* ============================================================
   たぬき（東十条）  案件別カスタム  ※テンプレ本体(style.css)は変更しない
   ============================================================ */

/* ---- 1. 地色の明示（template106 は body に background 指定が無く、
        ブラウザ既定がダークだと本文が沈む） ---- */
:root { color-scheme: only light; }
html, body { background-color: #fff; }

/* ---- 2. ヘッダーロゴ（帯の高さはテンプレ既定を維持したままロゴだけ最適化）---- */
@media screen and (min-width: 768px) {
    .logo-link img {
        height: clamp(40px, 3.4vw, 54px);
        width: auto;
        max-width: none;
        display: block;
    }
    .primary-header .header-inner {
        min-height: calc(min(6.4vw, 100px) + 2px);
    }
}
@media screen and (max-width: 767px) {
    .logo-link img {
        height: 34px;
        width: auto;
        max-width: none;
        display: block;
    }
}

/* ---- 3. グロナビの Instagram アイコン（最右）---- */
.gnav_item.gnav_sns,
.gnav_item.gnav_sns .gnav_insta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
.gnav_item.gnav_sns .gnav_insta img {
    width: 32px;
    height: 32px;
    display: block;
    transition: opacity 0.3s;
}
.gnav_item.gnav_sns .gnav_insta:hover img { opacity: 0.6; }
.header_nav_list_sp.gnav_sns_sp .gnav_insta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 0;
}
.header_nav_list_sp.gnav_sns_sp .gnav_insta img {
    width: 36px;
    height: 36px;
    display: block;
}

/* ---- 4. メインビジュアル：テンプレは .slider img に幅・高さ指定が無く
        画像の上端しか見えないため、枠にフィットさせる ---- */
#main-slider .slider img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    object-position: center;
}
@media screen and (max-width: 767px) {
    #main-slider .slider img { height: 66vw; }
}

/* ---- 5. 下層ページ MV（テンプレ既定の image1.jpg / image1_lawer.jpg は
        ファイル自体が存在しない）---- */
.heading1_wrap_inner { background-image: url(../img/page-mv.jpg); }
@media screen and (max-width: 767px) {
    .heading1_wrap_inner { background-image: url(../img/page-mv.jpg); }
}

/* ---- 6. TOP コンセプト ---- */
@media screen and (min-width: 768px) {
    /* HSキャッチが43文字あり、テンプレ既定(3rem/height:300px=10文字)では列が溢れる。
       5列に分けて1列あたり最長11文字に収め、縦幅はテンプレ既定に近い範囲へ抑える */
    .heading2-top01 { height: 340px; }
}
.heading2-top01 .tcy {
    -webkit-text-combine: horizontal;
    -ms-text-combine-horizontal: all;
    text-combine-upright: all;
}
.top-concept-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
@media screen and (max-width: 767px) {
    .heading2-top01 {
        font-size: 2rem;
        height: 240px;
    }
}

/* ---- 7. TOP メニュー画像（支給画像の比率を保ったまま枠を埋める）---- */
.top-menu-content-img img,
.top-menu-content-img02 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
@media screen and (max-width: 767px) {
    .top-menu-content-img img,
    .top-menu-content-img02 img {
        position: absolute;
        left: 0;
        right: 0;
        height: 100%;
    }
}

/* ---- 7b. TOPお品書きの画像/本文の左右を「並び順」で自動的に交互にする ----
   テンプレは ブロックごとに左右が HTML で固定（お料理・ランチ＝画像左／お飲物・コース＝画像右）。
   ランチをコメントアウトすると お飲物→コース で「本文左・画像右」が2連続するため、
   .top-menu-item の出現順（.top-menu 直下。1番目の子は見出し .ttl-wrap02）で左右を決める。
   コメントアウトされたブロックは要素として存在しないので、ランチを戻しても自動で交互になる。
   SP(〜767px)はテンプレどおり 画像→本文 の縦積みのまま。 */
@media screen and (min-width: 768px) {
    .top-menu-item .top-menu-content-img,
    .top-menu-item .top-menu-content-img02 {
        position: absolute;
        top: 0;
        width: 64%;
        height: 500px;
        overflow: hidden;
    }
    .top-menu-item .top-menu-content-txt-box,
    .top-menu-item .top-menu-content-txt-box02 {
        position: absolute;
        top: 50%;
        width: 46%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    /* 偶数番目の子（＝1・3番目のメニュー）：画像左／本文右 */
    .top-menu > .top-menu-item:nth-child(even) .top-menu-content-img,
    .top-menu > .top-menu-item:nth-child(even) .top-menu-content-img02 { left: 0; right: auto; }
    .top-menu > .top-menu-item:nth-child(even) .top-menu-content-txt-box,
    .top-menu > .top-menu-item:nth-child(even) .top-menu-content-txt-box02 { right: 0; left: auto; }
    /* 奇数番目の子（＝2・4番目のメニュー）：本文左／画像右 */
    .top-menu > .top-menu-item:nth-child(odd) .top-menu-content-img,
    .top-menu > .top-menu-item:nth-child(odd) .top-menu-content-img02 { right: 0; left: auto; }
    .top-menu > .top-menu-item:nth-child(odd) .top-menu-content-txt-box,
    .top-menu > .top-menu-item:nth-child(odd) .top-menu-content-txt-box02 { left: 0; right: auto; }
}
/* ブロック間の余白も並び順で揃える（最後のブロックだけ下余白なし） */
.top-menu > .top-menu-item { padding-bottom: 88px; }
.top-menu > .top-menu-item:last-child { padding-bottom: 0; }
@media screen and (max-width: 767px) {
    .top-menu > .top-menu-item { padding-bottom: 56px; }
    .top-menu > .top-menu-item:last-child { padding-bottom: 0; }
}

/* ---- 8. コース内容 ---- */
.course_detail_txt {
    font-size: 1.4rem;
    line-height: 1.9;
    color: var(--black);
}
.course_detail_txt .course_h {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 18px 0 6px;
    padding-left: 0;
}
.course_detail_txt .course_h:first-child { margin-top: 0; }
.course_detail_txt .course_sh {
    font-weight: 700;
    margin: 12px 0 4px;
    color: #a01000;
}
.course_detail_txt .course_p { margin-bottom: 4px; }

/* ---- 9. お品書きの切替アンカー（ランチ非表示で3本になるため中央寄せ）---- */
.anchor_wrap {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* ---- 10. フッターロゴ（footer は #1b1b1b。ヘッダーと同じ logo.png を使うため
         白プレートを敷いて可読性を確保）---- */
.footer-logo img {
    background: #fff;
    padding: 12px 20px;
    box-sizing: content-box;
    border-radius: 2px;
}
@media screen and (max-width: 767px) {
    .footer-logo img { padding: 9px 14px; }
}

/* ---- 10a. フッターの店舗情報
         テンプレは <p> に <br> 区切りで「見出し・値」を並べるだけで、HSの営業時間にある空行が
         そのまま空き行になり、行間が 28px / 56px とバラバラだった。
         見出し＋値を1項目のブロックにして、項目間・見出しと値の間・営業時間の曜日グループ間を固定値で揃える ---- */
.footer_info {
    text-align: center;
    color: var(--white);
    margin-bottom: 30px;   /* 電話番号との間(mt30)と揃える。旧<p>は末尾の<br>が余白代わりだった */
}
.footer_info_item + .footer_info_item { margin-top: 20px; }
.footer_info_label {
    font-size: 1.2rem;
    line-height: 1.6;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
}
.footer_info_value {
    font-size: 1.4rem;
    line-height: 1.8;
    color: var(--white);   /* style.css の p{color:#111} が親の白を打ち消すため明示 */
}
.footer_info_value + .footer_info_value { margin-top: 10px; }

/* ---- 10b. フッターの Instagram アイコン（リンク一覧の最右／SPは最下段）---- */
.footer_link_list { align-items: center; }
.footer_link_menu.footer_sns,
.footer_link_menu.footer_sns .footer_insta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer_link_menu.footer_sns .footer_insta img {
    width: 28px;
    height: 28px;
    display: block;
}
@media screen and (max-width: 767px) {
    .footer_link_menu.footer_sns { padding: 6px 0 2px; }
    .footer_link_menu.footer_sns .footer_insta img { width: 32px; height: 32px; }
}

/* ---- 10c. SPの追従予約ボタン（#op_btn：画面下に固定・高さ45px）が
         ページ最下部でフッター末尾（Instagramアイコン）に重ならないよう、フッター下に逃げ幅を確保 ---- */
@media screen and (max-width: 767px) {
    .footer_link { padding-bottom: calc(20px + 45px + 16px); }
    /* TOPへ戻るボタン（50pxの丸）。style.css は SP で bottom:80px の想定だが、
       後読みの style_responsive.css の bottom:20px に上書きされ、予約ボタンの帯に食い込む（320px幅では重なる）。
       予約ボタンの上 16px に逃がす */
    #page-top { bottom: calc(45px + 16px); }
}

/* ---- 11. こだわりページの画像を枠に合わせる ---- */
.lawer_content_flex01_left img {
    width: 100%;
    height: auto;
    display: block;
}