@charset "utf-8";
/* ==========================================================================
   Root's（Iima00103 / template109）上書き専用CSS
   ※ テンプレ本体（style.css / style_responsive.css）は編集せず、ここで上書きする
   ========================================================================== */

/* --------------------------------------------------------------------------
   ロゴ：HS「ロゴ：無 ／ おまかせ」につきテキストロゴで制作
   -------------------------------------------------------------------------- */
.text-logo {
    display: inline-block;
    font-family: "Times New Roman", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN",
        "游明朝", YuMincho, serif;
    font-size: 3.4rem;
    line-height: 1.2;
    letter-spacing: 0.08em;
    color: var(--black);
    white-space: nowrap;
}

.header-logo .logo-link,
.footer_logo a {
    text-decoration: none;
}

.footer_logo {
    padding-bottom: 8px;
}

.footer_logo .text-logo {
    color: var(--white);
    font-size: 2.8rem;
}

@media screen and (max-width: 767px) {
    .header-logo .text-logo {
        font-size: 2.4rem;
    }

    .footer_logo .text-logo {
        font-size: 2.2rem;
    }
}

/* --------------------------------------------------------------------------
   TOP メニュー導線：HSの説明文（〜150字）が入るため、カード内の体裁を整える
   ※ レイアウト構造・画像比率は変更しない（サイズ揃えのみ）
   -------------------------------------------------------------------------- */
.menu_list > li > p:not(.head_tx):not(.img) {
    text-align: left;
    line-height: 2.4rem;
}

.menu_list .img img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --------------------------------------------------------------------------
   こだわり（policy）：画像の高さを揃える（中央トリミング／歪ませない）
   -------------------------------------------------------------------------- */
.lawer_content_flex01_left img {
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --------------------------------------------------------------------------
   メインビジュアル：比率の違う写真でも中央基準で収める
   -------------------------------------------------------------------------- */
#main-slider .slider img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --------------------------------------------------------------------------
   Instagram アイコン：PCはグロナビ最右／SPはドロワー内（テキストではなくアイコン）
   -------------------------------------------------------------------------- */
.gnav_insta a {
    /* .gmenu（height:100px / padding:40px 2vw 40px 0 / line-height:1）の
       テキストの光学中心（li上端から48.5px）に合わせる。既定の箱中心50pxを
       padding-bottom:3px で1.5px引き上げて一致させる */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100px;
    padding: 0 2vw 3px 0;
}

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

.gnav_insta a:hover img {
    opacity: 0.6;
}

.gmenu_sp_insta {
    display: inline-flex !important;
    align-items: center;
}

.gmenu_sp_insta img {
    /* 28px＋上下padding10px＝48px で、テキスト項目（line-height28px）と行高を揃える */
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

/* --------------------------------------------------------------------------
   セクション幅の調整
   ※ css/style.css の1770行目に余分な「}」があり、直後の
     `.top_wrap { width:85%; margin:90px auto 100px; }` がCSSパーサーに
     破棄されている（テンプレート由来の不具合）。テンプレ本体は触らず
     ここで再宣言し、あわせて他セクションと左右の余白を揃える。
   -------------------------------------------------------------------------- */
.top_wrap {
    width: 85%;
    max-width: 1000px;
    margin: 90px auto 100px;
}

/* News：Instagramセクションと同じ上下余白、本文は他セクションと同じ最大幅に */
.top-news {
    padding: 100px 0;
}

.top-news .CMS-NEWS-INDEX {
    max-width: 1000px;
    padding: 0 20px;
}

/* コース（commitment）：本文が画面幅いっぱいに広がっていたので最大幅を設定。
   高さ固定(180px)のままだと折り返しで溢れるため、天地中央は transform で取る */
.commitment_inner {
    top: 50%;
    bottom: auto;
    height: auto;
    max-width: 1000px;
    padding: 0 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* TOPメニュー導線：ランチ非表示で2枠になり、3分割幅のまま左に寄っていたので
   枠数に応じて均等配分＋中央寄せにする（PCのみ。SPは1カラム表示のまま） */
@media screen and (min-width: 768px) {
    .menu_list {
        justify-content: center;
    }

    .menu_list > li {
        width: auto;
        flex: 1 1 0;
        max-width: 500px;
    }
}

/* --------------------------------------------------------------------------
   メニュー系ページのアンカーボタン（コース／お料理／お飲物）
   テンプレ既定は PC:flex 0 0 25%（4枠前提）／SP:flex 0 0 50%。
   ランチ非表示で3枠になり、PCは右に25%、SPは2段目の右半分が空いていたため、
   枠数に応じて均等配分にする（ランチを表示に戻せば自動で4等分に戻る）
   -------------------------------------------------------------------------- */
@media screen and (min-width: 767px) {
    .anchor {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media screen and (max-width: 767px) {
    .anchor_wrap {
        flex-wrap: nowrap;
    }

    .anchor {
        flex: 1 1 0;
        min-width: 0;
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   下層ページのMV（ページタイトル帯 .heading1_wrap）
   テンプレ既定は PC=img/image1.jpg（野菜ボウルのストック写真）、
   SP=img/image1_lawer.jpg（そもそもファイルが存在せず背景色のみ）だった。
   index以外のMVもベースデータではなく本案件の画像に統一する。
   -------------------------------------------------------------------------- */
.heading1_wrap_inner {
    background-image: url(../img/page-mv.jpg);
}

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

/* --------------------------------------------------------------------------
   コースセクション（パララックス .commitment_wrap）の背景
   テンプレ既定は img/bg1.jpg（サラダのストック写真）。明るく白文字が沈むうえ
   ベースデータのままなので、本案件の画像に差し替える。
   ※ 元の background ショートハンド（center/cover/fixed）は活かし、画像だけ上書き
   -------------------------------------------------------------------------- */
.commitment_wrap {
    background-image: url(../img/parallax-course.jpg);
}

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