@charset "UTF-8";
/* ==========================================================================
   JICCA（ジッカ）案件用 上書きCSS
   ※ テンプレ本体（common.css / index.css / style.css）は触らずここで上書きする
   ========================================================================== */

/* --------------------------------------------------------------
   1. body の背景
      (a) テンプレは body に background が無く、ダークモードで本文が沈む
      (b) header と main は max-width:1300px のため、画面が1300pxより広いと
          右端のグレー帯（グラデーションの右20%）が 1300px で途切れて
          外側に地の色が出てしまう。body 側に同じ境界のグラデーションを敷き、
          グレーを画面の右端まで伸ばす
          境界位置：main左端 =(50% - 650px)、その80%地点 =(50% - 650px + 1040px)
                    = calc(50% + 390px)
   -------------------------------------------------------------- */
body {
    background: #F2F2F2;
}

@media screen and (min-width: 1301px) {
    body {
        background: linear-gradient(90deg,
                #F2F2F2 0,
                #F2F2F2 calc(50% + 390px),
                #D9D4D0 calc(50% + 390px),
                #D9D4D0 100%);
    }
}

/* --------------------------------------------------------------
   2. ヘッダーロゴのサイズ上限（縦長・大きめロゴでの破綻防止）
   -------------------------------------------------------------- */
#global_header .logo img {
    max-width: 260px;
    max-height: 75px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media screen and (max-width: 767px) {
    #global_header .logo img {
        max-width: 190px;
        max-height: 55px;
    }
}


/* --------------------------------------------------------------
   3. TOPメインビジュアル：テンプレと同じ表示高さに統一
      PC：75vh（最大710px） / SP：200px
      Slick内部も親の高さに追従させ、画像は中央基準でトリミングする
   -------------------------------------------------------------- */
#main-slider {
    width: 100%;
    height: 75vh;
    max-height: 710px;
    overflow: hidden;
}

#main-slider .slick-list,
#main-slider .slick-track,
#main-slider .slick-slide,
#main-slider .slider {
    height: 100%;
}

#main-slider .slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media screen and (max-width: 768px) {
    #main-slider {
        height: 200px;
    }
}

/* --------------------------------------------------------------
   4. TOP MENU 各ブロックの日本語見出し（HSのタイトル）
   -------------------------------------------------------------- */
.menu .menu_ttl_jp {
    font-family: YakuHanJPs, 'FOT-筑紫ゴシック Pr5 D', 'TsukuGoPr5-D', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.7;
    letter-spacing: 0.15rem;
    color: #5A1801;
    margin-bottom: 18px;
}

.menu .food_inner .menu_ttl_jp {
    width: 35%;
    padding-top: 480px;
}

.menu .food_inner .menu_ttl_jp + .food_p {
    padding-top: 0;
}

@media screen and (max-width: 1024px) {
    .menu .food_inner .menu_ttl_jp {
        padding-top: 414px;
    }
}

@media screen and (max-width: 767px) {
    /* SPはベースと同じ縦積み「画像 →(35px)→ テキスト」。
       テンプレの .menu p { padding-top:35px } が担っていた画像との間隔を、
       見出し(.menu_ttl_jp)側へ移し、本文はその直下 12px で受ける。
       food_inner / drink_inner のどちらでも同じ間隔になるよう一括で指定する
       （ブロック別に書くと drink_inner だけ見出しが画像に密着する） */
    .menu .menu_ttl_jp,
    .menu .food_inner .menu_ttl_jp,
    .menu .drink_inner .menu_ttl_jp {
        font-size: 1.8rem;
        width: 100%;
        padding: 35px 2.5% 0;
        text-align: center;
    }

    .menu .menu_ttl_jp + p {
        padding-top: 12px;
    }
}

/* --------------------------------------------------------------
   5. TOPギャラリーのループスライダー：各画像を中央基準でトリミング
      （li=400×240 に対し img が原寸表示で見切れるため）
   -------------------------------------------------------------- */
#loopslider ul li img,
#loopslider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --------------------------------------------------------------
   6. ABOUT（コンセプト）のキャッチコピーが2行になるため行間を確保
   -------------------------------------------------------------- */
.about .f_26 {
    line-height: 1.5;
}

/* --------------------------------------------------------------
   7. TOP MENU：ブロック間の回り込みを断ち切る
      テンプレは .drink_inner にしか clear が無く、.food_inner が
      直前ブロックの float（.txt）に押されて大きい写真が左へずれ、
      小さい写真と重なってしまう。food_inner にも clear を入れる
   -------------------------------------------------------------- */
.menu .food_inner {
    clear: both;
}

/* --------------------------------------------------------------
   8. TOPギャラリー：キャッチコピー／紹介文がHS未記入で非表示のため
      セクションの高さが縮み、右側のグレー帯（mainのグラデーション）が
      ベースより短くなる。本来テキストが入る高さぶん（約180px）を
      スライダーとボタンの間に確保し、ベースと同じ高さ・同じボタン位置に戻す
      ※キャッチコピーが届いてテキストを入れたら、このブロックは削除する
   -------------------------------------------------------------- */
.gallery #loopslider + .btn {
    margin-top: 180px;
}

@media screen and (max-width: 767px) {
    .gallery #loopslider + .btn {
        margin-top: 90px;
    }
}

/* --------------------------------------------------------------
   9. TOP MENU：各ブロックが自分の float を囲めておらず、
      最後（Lunch）の右カラムが .menu の背景からはみ出して
      ボタンが背景の外に出てしまう。clearfix で高さに算入させる
      （テンプレは .drink_inner の「前」を clear するだけで、
        ブロックの「後ろ」を閉じていないのが原因）
   -------------------------------------------------------------- */
.menu .food_inner::after,
.menu .drink_inner::after {
    content: "";
    display: block;
    clear: both;
}