@charset "utf-8";


/*ここから基本レイアウト*/

/* 全体の横スクロールを禁止する */
html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
        max-width:1920;
        height: auto;
        width: 100%;
           
}

@media (max-width:767px){

body {
        
        height: auto;
        width: 100%;
           
}

}

@media (max-width:1024px){

body {
        
        height: auto;
        width: 100%;
           
}

}


.top-fv  
        { width: 1920px;
          height: 764px;
          position: relative;
          object-fit: cover;
          width: 100%;


        }

@media (max-width:767px) {

    .top-fv  
        { width: 100%;
          height: 350px;
          position: relative;
          object-fit: cover;
        }

}
.top        {           
            position: relative;
            }

.swiper      {
             
             width: auto;
              height: 764px;
              position: relative;
              object-fit: cover;

              }

.swiper-wrapper  {
                  width: auto;
                  height: 764px;
                  position: relative;
                  object-fit: cover;

  
                  
                  }
              
.header_logo {
              position: absolute;
              top: 0%;
              left: 0%;
              width: 202px;
              height: 210px;
              z-index: 2;
}

img { 
      box-sizing: border-box;
      border-radius: 12px;
      width: 202px;
      height: 210px;
    }

/*section {
  padding: 50px 0;
}*/

.catch {
        position: absolute;
        top: 50%; /* 縦方向中央 */
        left: 50%; /* 横方向中央 */
        transform: translate(-50%, -50%); /* 要素自体を中央に移動 */
        z-index: 3; /* スライダー（z-index: 2）より手前に表示 */
        color: #fff; /* 画像の色合いに合わせて調整 */
        font-size: 50pt; /* フォントサイズを調整 */
        font-family: 'Times New Roman', Times, serif;
  /*text-align: center;+/
  /* その他のスタイル (font-weight, text-shadowなど) を追加 */
}

.fv  {
    position: relative;
}
.catch1 {
  position: absolute;
  top: 50%; /* 縦方向中央 */
  left: 50%; /* 横方向中央 */
  transform: translate(-50%, -50%); /* 要素自体を中央に移動 */
  z-index: 3; /* スライダー（z-index: 2）より手前に表示 */
  color: #fff; /* 画像の色合いに合わせて調整 */
  font-size: 8vw; /* フォントサイズを調整 */
  font-family: 'Times New Roman', Times, serif;
  /*text-align: center;+/
  /* その他のスタイル (font-weight, text-shadowなど) を追加 */
}

.catch2 {
  position: absolute;
  top: 60%; /* 縦方向中央 */
  left: 50%; /* 横方向中央 */
  transform: translate(-50%, -50%); /* 要素自体を中央に移動 */
  z-index: 3; /* スライダー（z-index: 2）より手前に表示 */
  color: #fff; /* 画像の色合いに合わせて調整 */
  font-size: 3vw; /* フォントサイズを調整 */
  font-family: 'Times New Roman', Times, serif;
  padding-top: 30px;
  /*text-align: center;*/
  /* その他のスタイル (font-weight, text-shadowなど) を追加 */
}

.contents-wrapper {
  max-width: 1872px;
  width: calc(100% - 30px);
  margin: auto;
  padding: 10px;
  padding-top: 40px;
}

/*
 * ハンバーガーメニュー関連のCSS
 * 既存のCSSファイルに追加してください
 */


 
/* モバイル向けの設定（例: 画面幅767px以下の場合に適用） */

@media screen and (max-width: 1024px) {

    .header_logo {
              position: absolute;
              top: 0%;
              left: 0%;
              width: 101px;
              height: 110px;
              z-index: 2;
}
}
@media screen and (max-width: 767px) {

    .header_logo {
              position: absolute;
              top: 0%;
              left: 0%;
              width: 101px;
              height: 110px;
              z-index: 2;
}
}
   @media screen and (max-width: 767px) {
    /* --- 1. ボタン自体の設定 --- */
    .menu-button {
        display: block !important; /* 強制的に表示 */
        position: fixed;
        top: 5%;
        right: 10%;
        width: 44px;  /* 押しやすいサイズ */
        height: 44px;
        z-index: 1001; /* メニュー(1000)より上に配置 */
        cursor: pointer;
        background-color: #333; /* 確実に場所がわかるよう一旦背景色をつけます */
        border-radius: 4px;
    }

    /* --- 2. ハンバーガーアイコンの「三本線」を作る --- */
    /* HTMLにスパンがないので、疑似要素と背景のグラデーションで3本線を作ります */
    .menu-button::before,
    .menu-button::after {
        content: "";
        position: absolute;
        left: 10px;
        width: 24px;
        height: 2px;
        background-color: #fff; /* 線の色：白 */
        transition: all 0.3s;
    }

    /* 上の線 */
    .menu-button::before {
        top: 14px;
    }

    /* 下の線 */
    .menu-button::after {
        bottom: 14px;
    }

    /* 真ん中の線（ボタンの背景として描画） */
    .menu-button {
        background-image: linear-gradient(#fff, #fff);
        background-size: 24px 2px;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* --- 3. メニュー本体（ボタンの中にある.menu）の設定 --- */
    .menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        background-color: #fff;
        z-index: 1000;
        padding-top: 80px;
        
        /* 初期状態：画面外へ飛ばし、クリック無効化 */
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        transition: all 0.3s;
        
        /* ボタンの中に入っているので、文字配置などをリセット */
        text-align: left;
    }

    /* --- 4. 開閉時の動き --- */
    
    /* ボタンがクリックされた時（.is-openが付いた時） */
    .menu-button.is-open {
        background-image: none; /* 真ん中の線を消す */
    }

    /* アイコンを×にする */
    .menu-button.is-open::before {
        transform: translateY(7px) rotate(45deg);
    }
    .menu-button.is-open::after {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* メニューを表示させる */
    .menu-button.is-open .menu {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }
}

    /* メニュー本体のスタイル */
    @media screen and (max-width: 767px) {
    .menu {
        position: fixed;
        top: 0;
        right: 0; /* rightは0で固定 */
        width: 300px;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        z-index: 999;
        
        /* 初期状態：自分の幅100%分だけ右にずらして隠す */
        transform: translateX(0%); 
        transition: transform 0.3s ease-in-out;
    }

    /* メニューが開いたとき */
    .menu-button.is-open + .menu {
        /* 元の位置に戻す */
        transform: translateX(0);
    }


    /* ハンバーガーアイコンがX印に変化するアニメーション */
    .menu-button.is-open::before {
        transform: translateY(8px) rotate(45deg); /* 上のラインを回転・移動 */
    }

    .menu-button.is-open::after {
        transform: translateY(-8px) rotate(-45deg); /* 下のラインを回転・移動 */
    }

    .menu-button.is-open .menu {
        opacity: 0; /* 中間のラインを非表示 */
    }


    /* メニュー項目のスタイル（必要に応じて調整） */
    .menu1 {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 0 20px;
    }

    .menu2 {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
        text-decoration: none;
        color: #333;
        font-weight: bold;
    }

    .reserv {
        padding: 20px;
        text-align: center;
        margin-top: 20px;
        background-color: #eee;
    }
}

/* モバイル向けの設定（例: 画面幅768px以下の場合に適用） */
@media screen and (max-width: 1024px) {
    /* メニューボタン（ハンバーガーアイコン）のスタイル */
    .menu-button {
        /* アイコンの位置調整（例: 画面右上に固定） */
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000; /* 最前面に表示 */
        width: 40px;
        height: 48px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 8px; /* ハンバーガーラインの上下の余白 */
        background-color: transparent; /* 背景色なし */
        border: none;
    }

    .no-scroll {
    overflow: hidden;
    }

    /* ハンバーガーラインの作成 (HTMLの改変を避けるため疑似要素を使用) */
    .menu-button::before,
    .menu-button::after,
    .menu-button .menu {
        content: '';
        display: block;
        width: 90%;
        height: 3px;
        background-color: #FFF; /* ハンバーガーラインの色 */
        transition: transform 0.3s, opacity 0.3s; /* アニメーション設定 */
    }

    /* .menu-buttonの内部にある.menu要素を中間ラインとして使用 */
    .menu-button .menu {
        /* HTMLの改変を避けるため、.menu要素を中間のラインとして再利用 */
        content: none; /* 疑似要素ではないため content: ''; は使用しない */
        height: 3px; /* 高さをラインと同じにする */
        background-color: #333;
    }


    /* メニュー本体のスタイル */
    .menu {
        /* 初期状態: 画面外に非表示 */
        position: fixed;
        top: 0;
        right: -150px; /* メニューの幅分、画面外に移動 */
        width: 100px; /* メニューの幅 */
        height: 100%;
        background-color: rgba(255, 255, 255, 0.95); /* メニューの背景色 */
        z-index: 999; /* アイコンより奥に配置 */
        transition: right 0.3s ease-in-out; /* スライドアニメーション */
        padding-top: 80px; /* 上部に余白 */
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    }

    /* メニューが開いたとき（.is-openクラスが付与されたとき） */
    .menu-button.is-open + .menu {
        right: 0; /* 画面内にスライドイン */
    }

    /* ハンバーガーアイコンがX印に変化するアニメーション */
    .menu-button.is-open::before {
        transform: translateY(8px) rotate(45deg); /* 上のラインを回転・移動 */
    }

    .menu-button.is-open::after {
        transform: translateY(-8px) rotate(-45deg); /* 下のラインを回転・移動 */
    }

    .menu-button.is-open .menu {
        opacity: 0; /* 中間のラインを非表示 */
    }


    /* メニュー項目のスタイル（必要に応じて調整） */
    .menu1 {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 0 20px;
    }

    .menu2 {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
        text-decoration: none;
        color: #333;
        font-weight: bold;
    }

    .reserv {
        padding: 20px;
        text-align: center;
        margin-top: 20px;
        background-color: #eee;
    }
}

/* PCサイズ（例: 画面幅769px以上の場合に適用） */
@media screen and (min-width: 769px) {
    /* PCサイズではハンバーガーメニューを非表示にする */
    .menu-button {
        display: flex;
    }

    /* PCサイズでの通常のメニューレイアウトを維持 */
    .menu {
        /* ここにPC向けのスタイルを記述 (例: float, flexなど) */
        /*position: static; /* fixedを解除 */
        width: auto;
        height: auto;
        background-color: transparent;
        /* その他のPC向けスタイル... */
    }

    /* 必要に応じて、HTMLの改変がないため、既存の.menu1, .menu2などの
       PC向けレイアウトを維持するためのCSSをこちらに記述してください。 */
}

@media (max-width:767px) {
  .contents-wrapper {
    width: calc(100% - 40px);
  }
}

@media (max-width: 1024px) {

    .top-fv  
        { width: 100%;
          height: 350px;
          position: relative;
          object-fit: cover;
        }

.swiper      {
             
             width: auto;
              height: 350px;
              position: relative;
              object-fit: cover;

              }

.swiper-wrapper  {
                  width: auto;
                  height: 350px;
                  position: relative;
                  object-fit: cover;

  
                  
                  }


.catch1 {
  position: absolute;
  top: 50%; /* 縦方向中央 */
  left: 50%; /* 横方向中央 */
  transform: translate(-50%, -50%); /* 要素自体を中央に移動 */
  z-index: 3; /* スライダー（z-index: 2）より手前に表示 */
  color: #fff; /* 画像の色合いに合わせて調整 */
  font-size: 8vw; /* フォントサイズを調整 */
  font-family: 'Times New Roman', Times, serif;
  /*text-align: center;+/
  /* その他のスタイル (font-weight, text-shadowなど) を追加 */
}

.catch2 {
  position: absolute;
  top: 60%; /* 縦方向中央 */
  left: 50%; /* 横方向中央 */
  transform: translate(-50%, -50%); /* 要素自体を中央に移動 */
  z-index: 3; /* スライダー（z-index: 2）より手前に表示 */
  color: #fff; /* 画像の色合いに合わせて調整 */
  font-size: 3vw; /* フォントサイズを調整 */
  font-family: 'Times New Roman', Times, serif;
  padding-top: 30px;
  /*text-align: center;*/
  /* その他のスタイル (font-weight, text-shadowなど) を追加 */
}


    .menu {
        /* ...既存のスタイル... */
        
        /* 追記：閉じている時はクリックを無効化し、隠す */
        pointer-events: none; 
        visibility: hidden;
        
        /* アニメーション（スライドと透明度の変化を同期） */
        transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
        opacity: 0; /* 念のため透明度も0にするとより安全です */
    }

    /* メニューが開いている時 (.is-openクラスがある時) */
    .menu-button.is-open .menu {
        /* 追記：開いている時だけクリックを有効化し、表示する */
        pointer-events: auto;
        visibility: visible;
        opacity: 1;
        
        /* 位置を画面内に戻す設定（前回の設定に合わせてください） */
        transform: translateX(0); 
    }
}



@media (max-width:767px) {

    .top-fv  
        { width: 100%;
          height: 350px;
          position: relative;
          object-fit: cover;
        }

.swiper      {
             
             width: auto;
              height: 350px;
              position: relative;
              object-fit: cover;

              }

.swiper-wrapper  {
                  width: auto;
                  height: 350px;
                  position: relative;
                  object-fit: cover;

  
                  
                  }


.catch1 {
  position: absolute;
  top: 50%; /* 縦方向中央 */
  left: 50%; /* 横方向中央 */
  transform: translate(-50%, -50%); /* 要素自体を中央に移動 */
  z-index: 3; /* スライダー（z-index: 2）より手前に表示 */
  color: #fff; /* 画像の色合いに合わせて調整 */
  font-size: 8vw; /* フォントサイズを調整 */
  font-family: 'Times New Roman', Times, serif;
  /*text-align: center;+/
  /* その他のスタイル (font-weight, text-shadowなど) を追加 */
}

.catch2 {
  position: absolute;
  top: 60%; /* 縦方向中央 */
  left: 50%; /* 横方向中央 */
  transform: translate(-50%, -50%); /* 要素自体を中央に移動 */
  z-index: 3; /* スライダー（z-index: 2）より手前に表示 */
  color: #fff; /* 画像の色合いに合わせて調整 */
  font-size: 3vw; /* フォントサイズを調整 */
  font-family: 'Times New Roman', Times, serif;
  padding-top: 30px;
  /*text-align: center;*/
  /* その他のスタイル (font-weight, text-shadowなど) を追加 */
}

}
/*メニューボタンの表示関係*/
.menu-button {
              position: absolute;
              top:10%;
              right: 10%;
              z-index: 10;
            }

.menu       {
              display: flex;
              gap: 30px;
              flex-direction: row;
              }
.menu1    {
            
            padding-top: 17px;
            padding-bottom: 17px;
            padding-left: 23px;
            padding-right: 23px;
            text-align: center;
            background-color: #ffffff;
            /*border: 5px solid red;*/
            border-radius: 10px;
            overflow: hidden;
          }

.menu2    {
            padding-top: 17px;
            padding-bottom: 17px;
            padding-left: 23px;
            padding-right: 23px;
            text-align: center;
            background-color: #ffffff;
            /*border: 5px solid red;*/
            border-radius: 10px;
            overflow: hidden;
          }

a        {
            text-decoration: none;
            color:black;
          }
a:hover   {
            text-decoration: underline;        
          }
          
          
nav     {
          
          }


nav ul {
        flex-wrap: initial;
        list-style-type: none;
        margin-right: -10px;
        padding-left: 0;
        overflow: hidden;

}

nav ul li 
        {
        width: 200px;
        margin-right: 10px;
        float: left;
        }

nav ul li a 
            {
              display: block;
              height: 0;
              padding-top: 70px;
              overflow: hidden;
            }


.reserv    {
            background-color: #C41F02;
            color:#f5f5f5;
            /*position: absolute;*/
            gap: 30px;
            top: 3%;
            left: 95%;
            padding-top: 17px;
            padding-bottom: 17px;
            padding-left: 16px;
            padding-right: 16px;
            border-radius: 10px;
            border-style: solid;
            border-color: #f5f5f5;
            z-index: 2;
            max-width: 1920px;
}
.catch    {
            position: absolute;
            z-index: 2;
          }


@media (max-width:767px) {
.menu       {
              display: flex;
              gap: 30px;
              }
.menu1    {
            
            padding-top: 17px;
            padding-bottom: 17px;
            /*padding-left: 42px;*/
            padding-right: 200px;
            text-align: center;
            background-color: #ffffff;
            /*border: 5px solid red;*/
            border-radius: 10px;
            overflow: hidden;
          }

.menu2    {
            padding-top: 17px;
            padding-bottom: 17px;
            padding-left: 42px;
            padding-right: 42px;
            text-align: center;
            background-color: #ffffff;
            /*border: 5px solid red;*/
            border-radius: 10px;
            overflow: hidden;
          }

a        {
            color:black;
          }
a link :hover  {
            border-bottom: 2px;        
          }
          
          
nav     {
          
          }


nav ul {
        flex-wrap: initial;
        list-style-type: none;
        margin-right: -10px;
        padding-left: 0;
        overflow: hidden;

}

nav ul li 
        {
        width: 200px;
        margin-right: 10px;
        float: left;
        }

nav ul li a 
            {
              display: block;
              height: 0;
              padding-top: 70px;
              overflow: hidden;
            }


.reserv    {
            background-color: #C41F02;
            color:#f5f5f5;
            /*position: absolute;*/
            gap: 30px;
            top: 3%;
            left: 95%;
            padding-top: 17px;
            padding-bottom: 17px;
            /*padding-left: 48px;*/
            padding-right: 200px;
            border-radius: 10px;
            border-style: solid;
            border-color: #f5f5f5;
            z-index: 2;
            max-width: 1920px;
}
.catch    {
            position: absolute;
            z-index: 2;
          }
}
/* --- レイアウトの設定（Flexbox） --- */

/* 親要素でFlexboxを有効にし、並び順を逆にする */
/* 画面いっぱいに広がるように修正 */
.concept-container {
    display: flex;
    flex-direction: row-reverse; 
    align-items: stretch; /* 高さも揃える（画像とテキストの高さが異なってもコンテナの高さを合わせる） */
    width: 95%; /* 画面の幅いっぱいに広げる */
    margin: 0; /* マージンをリセット */
    padding: 0; /* パディングをリセット */
    /* overflow: hidden; */ /* 画面サイズを超えるコンテンツがある場合に備えて */
}



/* 画像とテキストのカラムの幅設定 */
.img-column {
    flex: 0 0 50%; /* 幅を50%に固定 */
    padding: 0; /* パディングをリセット */
}

.text-column {
    flex: 0 0 50%; /* 幅を50%に固定 */
    /* テキストコンテンツの左右/上下のパディングをここで調整 */
    padding: 150px; /* 全体にパディングを適用 */
}

/* 画像のスタイル */
.concept-img {
    width: 90%; /* 親要素(img-column)の幅いっぱいに広げる */
    height: 90%; /* 親要素(img-column)の高さに合わせる */
    object-fit: cover; /* 縦横比を維持したまま要素を覆い尽くす */
    display: block;
    padding-top: 30px;
}

/* その他のスタイル（.concept, .a-phrase など）はそのまま使用してください */
/* --- テキストコンテンツのスタイル設定 --- */

/* 「Concept」のスタイル */
.concept {
    font-size: 96px; /* サイズを大きく調整 */
    font-weight: bold;
    color: rgb(39, 39, 39);
    font-family: Cardo, serif;
    /* 線のスタイルを修正 */
    border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 360px; /* 線の幅を調整 */
    padding-top: 10px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
}

/* 「ご来店のお客様へ」のスタイル */
.phrase {
    font-size: 14px; /* サイズ調整 */
    color: #333333; /* 色をコンセプトの線に合わせる */
    margin-bottom: 20px; /* 下に余白 */
}
          
/* メインのフレーズのスタイル */
.a-phrase {
    font-size: 24px; /* サイズを調整 */
    font-weight: 500; /* 太さ */
    
    /* 左のグレーの縦線 */
    border-left: 5px solid gray; /* 線の太さと色を調整 */
    padding-left: 20px; /* 縦線とテキストの間に余白 */
    margin-bottom: 30px; /* 下に余白 */
    line-height: 1.6; /* 行間を調整 */
}

/* 説明文のスタイル */
.contents {
    font-size: 14px; /* サイズ調整 */
    color: rgb(61, 61, 61);
    margin-bottom: 15px; /* 各段落の下に余白 */
    line-height: 1.6; /* 行間を調整 */
    padding-left: 20px;
}

/* Read Moreボタンのスタイル */
.read-more-button {
    background-color: #38c172; /* 緑色の背景 */
    color: white;
    font-size: 16px;
    padding: 12px 25px;
    border: none;
    cursor: pointer;
    margin-top: 30px;
    border-radius: 5px;
    font-weight: bold;
}

.read     {
          background-color: #00CA35;
          color: #ffffff;
          border-radius: 8px;
          width: 200px;
          height: 3.2rem;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: bold;
        }

@media screen and (max-width: 1024px) {
    
    /* コンテナ設定（前回修正済み）*/
    .concept-container {
        display: flex; 
        flex-direction: column-reverse; 
        width: 100%; 
        margin: 0; 
        padding: 0; 
    }
    
    /* img-column設定（前回修正済み）*/
    .img-column {
        width: 100%; 
        padding: 0;
    }
    
    /* text-column設定: コンテンツを中央寄せにする */
    .text-column {
        width: 100%; 
        height: auto;
        padding: 30px; 
        /* ★ここを追加：text-column内のテキストやインライン要素を中央寄せ */
        text-align: center;
        /*padding-left: 150px;*/
        display: block;
        /*margin-right: 50px;*/ 
    }
    
    

    /* 画像設定（前回修正済み）*/
    .concept-img {
        width: 100%; 
        height: auto; 
        object-fit: cover; 
        display: block;
        padding-top: 30px;
    }

    /* Concept の調整: フォントサイズ縮小と線の幅固定で中央寄せ */
    .concept {
        /* フォントサイズをよりモバイル向けに縮小 */
        font-size: 36px; 
        font-weight: bold;
        color: rgb(39, 39, 39);
        font-family: Cardo, serif;
        
        /* 線の幅を固定し、margin: auto で中央寄せ */
        width: 25%; 
        margin: 10px auto; /* 上下10px, 左右autoで中央寄せ */

        /* 線のスタイルを維持 */
        border-bottom: 3px solid transparent; 
        border-image: linear-gradient(to right, #C41F02 0%, white 100%); 
        border-image-slice: 1; 
        
        padding-top: 10px; 
        /*padding-bottom: 10px;*/ /* marginではなくpadding bottomを調整 */
        line-height: 1.2; 
    }

    /* text-align: center; が効くので、phrase は修正なし */
    .phrase {
        font-size: 14px; 
        color: #333333; 
        margin-bottom: 20px;
        
    }

    /* a-phrase のフォントサイズ微調整 */
    .a-phrase {
        font-size: 20px; 
        font-weight: 500; 
        /* text-align: center; で中央寄せになっているが、
           border-left が付いているので、左寄せのままが良い場合もある */
        text-align: left; 
        
        /* 中央寄せにするために、左右にautoマージンを設定し、幅を制限 */
        width: 90%; 
        margin: 0 auto 30px; 
        border-left: 5px solid gray; 
        padding-left: 20px; 
        line-height: 1.6; 
    }

    /* contents は text-align: center; で中央寄せになっている */
    .contents {
        font-size: 14px; 
        color: rgb(61, 61, 61);
        /* 中央寄せになっているテキストを左寄せに戻す */
        text-align: left; 
        /* 中央に寄せるための調整 */
        width: 90%; 
        margin: 0 auto 15px; 
        line-height: 1.6; 
    }

    /* Read more ボタンを中央寄せにする */
    .read {
        background-color: #00CA35;
        color: #ffffff;
        border-radius: 8px;
        width: 180px;
        height: 3.0rem;
        font-weight: bold;
        /* ★ここを追加：左右マージンautoで中央寄せ */
        margin: 20px auto 0; 
        }

}

@media screen and (max-width: 767px) {
    
    /* コンテナ設定（前回修正済み）*/
    .concept-container {
        display: flex; 
        flex-direction: column-reverse; 
        width: 100%; 
        margin: 0; 
        padding: 0; 
    }
    
    /* img-column設定（前回修正済み）*/
    .img-column {
        width: 100%; 
        padding: 0;
    }
    
    /* text-column設定: コンテンツを中央寄せにする */
    .text-column {
        width: 100%; 
        height: auto;
        padding: 30px; 
        /* ★ここを追加：text-column内のテキストやインライン要素を中央寄せ */
        text-align: center;
        /*padding-left: 150px;*/
        display: block;
        /*margin-right: 50px;*/ 
    }
    
    

    /* 画像設定（前回修正済み）*/
    .concept-img {
        width: 100%; 
        height: auto; 
        object-fit: cover; 
        display: block;
        padding-top: 30px;
    }

    /* Concept の調整: フォントサイズ縮小と線の幅固定で中央寄せ */
    .contents-wrapper .concept {
        /* フォントサイズをよりモバイル向けに縮小 */
        font-size: 36px; 
        font-weight: bold;
        color: rgb(39, 39, 39);
        font-family: Cardo, serif;
        
        /* 線の幅を固定し、margin: auto で中央寄せ */
        width: 25%; 
        margin: 10px auto; /* 上下10px, 左右autoで中央寄せ */

        /* 線のスタイルを維持 */
        border-bottom: 3px solid transparent; 
        border-image: linear-gradient(to right, #C41F02 0%, white 100%); 
        border-image-slice: 1; 
        
        padding-top: 10px; 
        /*padding-bottom: 10px;*/ /* marginではなくpadding bottomを調整 */
        line-height: 1.2;
         width: calc(100% - 30px);
         text-align: center;  
    }

    /* text-align: center; が効くので、phrase は修正なし */
    .phrase {
        font-size: 14px; 
        color: #333333; 
        margin-bottom: 20px;
        
    }

    /* a-phrase のフォントサイズ微調整 */
    .a-phrase {
        font-size: 20px; 
        font-weight: 500; 
        /* text-align: center; で中央寄せになっているが、
           border-left が付いているので、左寄せのままが良い場合もある */
        text-align: left; 
        
        /* 中央寄せにするために、左右にautoマージンを設定し、幅を制限 */
        width: 90%; 
        margin: 0 auto 30px; 
        border-left: 5px solid gray; 
        padding-left: 20px; 
        line-height: 1.6; 
    }

    /* contents は text-align: center; で中央寄せになっている */
    .contents {
        font-size: 14px; 
        color: rgb(61, 61, 61);
        /* 中央寄せになっているテキストを左寄せに戻す */
        text-align: left; 
        /* 中央に寄せるための調整 */
        width: 90%; 
        margin: 0 auto 15px; 
        line-height: 1.6; 
    }

    /* Read more ボタンを中央寄せにする */
    .read {
        background-color: #00CA35;
        color: #ffffff;
        border-radius: 8px;
        width: 180px;
        height: 3.0rem;
        font-weight: bold;
        /* ★ここを追加：左右マージンautoで中央寄せ */
        margin: 20px auto 0; 
        }

}



/* 画面全体の中央に配置するための設定 */
@media (max-width: 768px) {
    
body {
    /* 背景色を黒に設定（画像に合わせる） */
    background-color: white;
    /* bodyの高さと幅をビューポート全体に設定 */
    /*height: 100vh;*/
    margin: 0;
    
    
}

}


.menu-container {
    /* Menuと赤線、お品書きを縦に並べるために、中央配置のFlexbox設定を削除 */
    /* 代わりにテキストを中央揃えにする設定を追加 */
    text-align: center;
    /* 要素間の不要なスペースを調整 */
    padding: 0;
    margin: 0;
    /* Menuの文字幅よりも赤線を長く見せるため、左右にパディングを追加 */
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    
}

/* Menu のスタイル */
.menu-column {
    /* 画像に近づけるため、フォントサイズと色を調整 */
    font-size: 80px;
    /* フォントをセリフ体（'Times New Roman'など）にして画像に近づける */
    font-family: 'Times New Roman', Times, serif; 
    color: rgb(39, 39, 39); /* 濃いグレー */
    font-weight: normal; /* 太字ではないためnormalに */
    margin: 0; /* 上下のマージンをリセット */
    line-height: 1; /* 行の高さを詰める */
    border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 200px; /* 線の幅を調整 */
    padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
    justify-content: center;
}

/* 赤線 のスタイル */
.red-line {
   border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 200px; /* 線の幅を調整 */
    padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
    text-align: center;
}

/* お品書き のスタイル */
.b-phrase {
    font-size: 24px; /* サイズ調整 */
    color: rgb(39, 39, 39); /* Menuと同じ濃いグレーに */
    margin: 0; /* マージンをリセット */
    /*display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    /*align-items: column; /* 垂直方向の中央揃え */
}
.outline   {
            background-color: #E0DFDF;
            width: 100vh;
}
/* Menuセクション全体を中央寄せにするためのコンテナ */
.menu-section {
    /* Menuセクションを画面中央に配置するために、親要素の幅いっぱいに広げた上で、その中のテキストを中央寄せにします。 */
    text-align: center; 
    /* 必要に応じて、全体の幅を制限したい場合は max-width: 〇〇px; と margin: 0 auto; を設定してください。
       今回はテキスト中央寄せが目的なので、text-align: center; のみで対応します。 */
}
p            {
              padding-bottom:50px;
}
.text-column2 { 
              flex: 0 0 50%;
              margin:0px;
            
}

/* メインのタイトル (Menu) */
.menu-section h2 {
    font-size: 96px; /* 必要に応じてサイズ調整 */
    font-weight: bold;
    color: #333;
    padding-bottom: 5px; /* ボーダーとの間隔 */
    margin-bottom: 5px; /* 下のテキストとの間隔 */
    display: inline-block; /* ボーダー線の幅をh2のテキスト幅に合わせるために必要 */
    font-family: 'Times New Roman', Times, serif;
    /* ボーダー線の設定 */
     border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 200px; /* 線の幅を調整 */
    padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
}

/* サブテキスト (お品書き) */
.menu-section p {
    font-size: 14px; /* 必要に応じてサイズ調整 */
    color: #666;
    margin-top: 0;
}
.menu-phrase {
    font-size: 24px; /* サイズを調整 */
    font-weight: 500; /* 太さ */
    color: #ffffff;
    /* 左のグレーの縦線 */
    border-left: 5px solid #FFFFFF; /* 線の太さと色を調整 */
    padding-left: 20px; /* 縦線とテキストの間に余白 */
    margin-bottom: 30px; /* 下に余白 */
    line-height: 1.6; /* 行間を調整 */
    background-color: #013718;
    width: 100%;
  }
/* -------------------------------------------------------------------------- */
/* 全体コンテナとヘッダー */
/* -------------------------------------------------------------------------- */

.page-container {
    /* 画像の幅と高さを固定するために、最大幅と高さの比率を設定 */
    max-width: 1874px;
    /* 1394pxを基準としますが、コンテンツ量やビューポートに合わせて調整が必要 */
    /* height: 1394px;  固定すると縦スクロールが必要になるため、min-heightを使用 */
    min-height: 1394px;
    margin: 0 auto; /* 中央寄せ */
    background-color: #f0f0f0; /* 画像の背景色に合わせて調整 */
    padding-bottom: 50px; /* ボタンの下に余白 */
    box-sizing: border-box;
}

.menu-header {
    text-align: center;
    padding: 80px 0 50px 0; /* ヘッダーの上下の余白 */
}

/* -------------------------------------------------------------------------- */
/* 共通スタイル */
/* -------------------------------------------------------------------------- */

.menu-row {
    display: flex;
    width: 100%;
    /* Food/Drinkの行の高さ比率を画像に合わせて調整 (例: 上段45%, 下段45%) */
    /* ざっくりとした比率をvhやパーセンテージで設定するか、コンテンツに依存させる */
}

.content-box {
    flex: 1; /* 基本的に幅は均等に分割 */
    position: relative; /* 縦文字の配置基準 */
    overflow: hidden;
}

/* 縦文字 (Food, Drink) */
.vertical-text {
    position: absolute;
    /*top: 50%;*/
    left: 0; /* Foodセクション */
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: 0 0;
    font-size: 80px; /* サイズ調整 */
    font-weight: bold;
    opacity: 0.15; /* 薄く表示 */
    font-family: 'Times New Roman', Times, serif;
    pointer-events: none; /* テキスト選択を妨げないように */
}

/* Foodセクションの縦文字は左端 */
.food-text-column .vertical-text {
    left: 0;
}
img.food       {
                border-radius: 0px;
                }
/* Drinkセクションの縦文字は右端 */
.drink-text-column .vertical-text {
    right: 0;
    left: auto;
    transform: translateY(-50%) rotate(90deg); /* 反時計回りに90度回転 */
    transform-origin: 100% 0; /* 右上を基準に回転 */
}

/* -------------------------------------------------------------------------- */
/* Foodセクション (上段) のスタイル */
/* -------------------------------------------------------------------------- */

.food-row {
    /*margin-bottom: 20px; /* 上段と下段の間隔 */
}

.food-text-column { 
    flex: 0 0 50%;
    background: linear-gradient(to bottom right,#013718, #013718); 
    padding: 50px 40px; 
    color: #ffffff; 
    box-sizing: border-box;
}

.food-img-column { 
    flex: 0 0 50%;
}

/* Foodセクションの縦文字色 */
.food-color {
    color: #ffffff; /* 白 */
}

/* -------------------------------------------------------------------------- */
/* Drinkセクション (下段) のスタイル */
/* -------------------------------------------------------------------------- */

.menu-rowdrink-row {
    /* Foodセクションと画像/テキストの順番が逆転 */
    flex-direction: row-reverse; 
}

.drink-text-column { 
    flex: 0 0 50%;
    background: linear-gradient(to bottom right,#781200, #6f2113); /* 赤茶色 */
    padding: 50px 40px; 
    color: #ffffff; 
    box-sizing: border-box;
}

.drink-img-column { 
    flex: 0 0 50%;
}

/* Drinkセクションの縦文字色 */
.drink-color {
    color: #ffffff; /* 白 */
}

/* -------------------------------------------------------------------------- */
/* 画像とテキストの共通デザイン */
/* -------------------------------------------------------------------------- */

.img-column img {
    display: block;
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.menu-phrase {
    font-size: 24px;
    font-weight: 500;
    color: #ffffff;
    border-left: 5px solid #FFFFFF; 
    padding-left: 20px; 
    margin-bottom: 30px; 
    line-height: 1.6;
    background-color: #781200;
    margin-right: 20px;
}

.menu-phrase1 {
    font-size: 24px;
    font-weight: 500;
    color: #ffffff;
    border-left: 5px solid #FFFFFF; 
    padding-left: 20px; 
    margin-bottom: 30px; 
    line-height: 1.6;
    background: linear-gradient(to bottom right,#013718, #06371b);
    
}

.menu-description {
    font-size: 16px; 
    line-height: 1.8;
}

/* -------------------------------------------------------------------------- */
/* Read More ボタン */
/* -------------------------------------------------------------------------- */

.menu-footer {
    text-align: center;
    padding-top: 50px;
}

.read-more-button {
    background-color: #4CAF50; /* 緑色 */
    color: white;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

/* --- （その他、元のCSSからの抜粋） --- */

/* メインのタイトル (Menu) */
.menu-section h2 {
    font-size: 96px; 
    font-weight: bold;
    color: #333;
    padding-bottom: 5px; 
    margin-bottom: 5px; 
    display: inline-block; 
    font-family: Cardo, serif;
     /* ボーダー線の設定 */
     border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 250px; /* 線の幅を調整 */
    /*padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px; 
}

/* サブテキスト (お品書き) */
.menu-section p {
    font-size: 14px; 
    color: #666;
    margin-top: 0;
}

@media (max-width:1024px){

/* メインのタイトル (Menu) */
.menu-section h2 {
    font-size: 40px; /* 必要に応じてサイズ調整 */
    font-weight: bold;
    color: #333;
    padding-bottom: 5px; /* ボーダーとの間隔 */
    margin-bottom: 5px; /* 下のテキストとの間隔 */
    display: inline-block; /* ボーダー線の幅をh2のテキスト幅に合わせるために必要 */
    font-family: 'Times New Roman', Times, serif;
    /* ボーダー線の設定 */
     border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 20%; /* 線の幅を調整 */
    padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
}

/* サブテキスト (お品書き) */
.menu-section p {
    font-size: 14px; /* 必要に応じてサイズ調整 */
    color: #666;
    margin-top: 0;
    display: block;
}
.menu-phrase {
    font-size: 24px; /* サイズを調整 */
    font-weight: 500; /* 太さ */
    color: #ffffff;
    /* 左のグレーの縦線 */
    border-left: 5px solid #FFFFFF; /* 線の太さと色を調整 */
    padding-left: 20px; /* 縦線とテキストの間に余白 */
    margin-bottom: 30px; /* 下に余白 */
    line-height: 1.6; /* 行間を調整 */
    background-color: #013718;
    width: 100%;
    display: block;
  
  }
/* -------------------------------------------------------------------------- */
/* 全体コンテナとヘッダー */
/* -------------------------------------------------------------------------- */

.page-container {
    /* 画像の幅と高さを固定するために、最大幅と高さの比率を設定 */
    max-width: 1874px;
    /* 1394pxを基準としますが、コンテンツ量やビューポートに合わせて調整が必要 */
    /* height: 1394px;  固定すると縦スクロールが必要になるため、min-heightを使用 */
    min-height: 1394px;
    margin: 0 auto; /* 中央寄せ */
    background-color: #f0f0f0; /* 画像の背景色に合わせて調整 */
    padding-bottom: 50px; /* ボタンの下に余白 */
    box-sizing: border-box;
}

.menu-header {
    text-align: center;
    padding: 80px 0 50px 0; /* ヘッダーの上下の余白 */
}

/* -------------------------------------------------------------------------- */
/* 共通スタイル */
/* -------------------------------------------------------------------------- */

.menu-row {
    display: flex;
    width: 100%;
    flex-direction: column;
    /* Food/Drinkの行の高さ比率を画像に合わせて調整 (例: 上段45%, 下段45%) */
    /* ざっくりとした比率をvhやパーセンテージで設定するか、コンテンツに依存させる */
}

.content-box {
    flex: 1; /* 基本的に幅は均等に分割 */
    position: relative; /* 縦文字の配置基準 */
    overflow: hidden;
}

/* 縦文字 (Food, Drink) */
.vertical-text {
    position: absolute;
    top: 50%;
    left: 0; /* Foodセクション */
    transform: translateY(-10%) rotate(-90deg);
    transform-origin: 0 0;
    font-size: 80px; /* サイズ調整 */
    font-weight: bold;
    opacity: 0.15; /* 薄く表示 */
    font-family: 'Times New Roman', Times, serif;
    pointer-events: none; /* テキスト選択を妨げないように */
}

/* Foodセクションの縦文字は左端 */
.food-text-column .vertical-text {
    left: 0;
}
img.food       {
                border-radius: 0px;
                }
/* Drinkセクションの縦文字は右端 */
.drink-text-column .vertical-text {
    /*right: 20px;
    left: auto;
    transform: translateY(10%) rotate(90deg); /* 反時計回りに90度回転 */
    /*transform-origin: 100% 0; /* 右上を基準に回転 */
}

/* -------------------------------------------------------------------------- */
/* Foodセクション (上段) のスタイル */
/* -------------------------------------------------------------------------- */

.food-row {
    display: flex;
    flex-direction: column-reverse;
    width:100%;

    /*margin-bottom: 20px; /* 上段と下段の間隔 */
}

.food-text-column { 
    background: linear-gradient(to bottom right,#013718, #013718); 
    padding: 50px 40px; 
    color: #ffffff; 
    box-sizing: border-box;
    display: block;
    text-align: left;
}

.food-img-column { 
    flex: 0 0 50%;
    display: block;
}

/* Foodセクションの縦文字色 */
.food-color {
    color: #ffffff; /* 白 */
}

/* -------------------------------------------------------------------------- */
/* Drinkセクション (下段) のスタイル */
/* -------------------------------------------------------------------------- */

.menu-rowdrink-row {
    /* Foodセクションと画像/テキストの順番が逆転 */
    flex-direction: row-reverse; 
}

.drink-text-column { 
    background: linear-gradient(to bottom right,#781200, #6f2113); /* 赤茶色 */
    padding: 50px 40px; 
    color: #ffffff; 
    box-sizing: border-box;
    text-align: left;
}

.drink-img-column { 
    flex: 0 0 50%;
}

/* Drinkセクションの縦文字色 */
.drink-color {
    color: #ffffff; /* 白 */
}

/* -------------------------------------------------------------------------- */
/* 画像とテキストの共通デザイン */
/* -------------------------------------------------------------------------- */

.img-column img {
    display: block;
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.menu-phrase {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    border-left: 5px solid #FFFFFF; 
    padding-left: 20px; 
    margin-bottom: 30px; 
    line-height: 1.6;
    background-color: #781200;
    display: block;
}

.menu-phrase1 {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    border-left: 5px solid #FFFFFF; 
    padding-left: 20px; 
    margin-bottom: 30px; 
    line-height: 1.6;
    background: linear-gradient(to bottom right,#013718, #06371b);
    display: block;
    margin-left: 50px;
}

.menu-description {
    font-size: 16px; 
    line-height: 1.8;
    display: block;
}

.menu-description2 {
    font-size: 16px; 
    line-height: 1.8;
    display: block;
    padding-right: 20px;
}

/* -------------------------------------------------------------------------- */
/* Read More ボタン */
/* -------------------------------------------------------------------------- */

.menu-footer {
    text-align: center;
    padding-top: 50px;
}

.read-more-button {
    background-color: #4CAF50; /* 緑色 */
    color: white;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

/* --- （その他、元のCSSからの抜粋） --- */

/* メインのタイトル (Menu) */
.menu-section h2 {
    font-size: 40px; 
    font-weight: bold;
    color: #333;
    padding-bottom: 5px; 
    margin-bottom: 5px; 
    display: inline-block; 
    font-family: Cardo, serif;
     /* ボーダー線の設定 */
     border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 20%; /* 線の幅を調整 */
    /*padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px; 
}

/* サブテキスト (お品書き) */
.menu-section p {
    font-size: 14px; 
    color: #666;
    margin-top: 0;
}
    

}

@media (max-width:767px){

/* メインのタイトル (Menu) */
.menu-section h2 {
    font-size: 40px; /* 必要に応じてサイズ調整 */
    font-weight: bold;
    color: #333;
    padding-bottom: 5px; /* ボーダーとの間隔 */
    margin-bottom: 5px; /* 下のテキストとの間隔 */
    display: inline-block; /* ボーダー線の幅をh2のテキスト幅に合わせるために必要 */
    font-family: 'Times New Roman', Times, serif;
    /* ボーダー線の設定 */
     border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 20%; /* 線の幅を調整 */
    padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
}

/* サブテキスト (お品書き) */
.menu-section p {
    font-size: 14px; /* 必要に応じてサイズ調整 */
    color: #666;
    margin-top: 0;
    display: block;
}
.menu-phrase {
    font-size: 24px; /* サイズを調整 */
    font-weight: 500; /* 太さ */
    color: #ffffff;
    /* 左のグレーの縦線 */
    border-left: 5px solid #FFFFFF; /* 線の太さと色を調整 */
    padding-left: 20px; /* 縦線とテキストの間に余白 */
    margin-bottom: 30px; /* 下に余白 */
    line-height: 1.6; /* 行間を調整 */
    background-color: #013718;
    /*width: 50%;*/
    display: block;
  
  }
/* -------------------------------------------------------------------------- */
/* 全体コンテナとヘッダー */
/* -------------------------------------------------------------------------- */

.page-container {
    /* 画像の幅と高さを固定するために、最大幅と高さの比率を設定 */
    max-width: 1874px;
    /* 1394pxを基準としますが、コンテンツ量やビューポートに合わせて調整が必要 */
    /* height: 1394px;  固定すると縦スクロールが必要になるため、min-heightを使用 */
    min-height: 1394px;
    margin: 0 auto; /* 中央寄せ */
    background-color: #f0f0f0; /* 画像の背景色に合わせて調整 */
    padding-bottom: 50px; /* ボタンの下に余白 */
    box-sizing: border-box;
}

.menu-header {
    text-align: center;
    padding: 80px 0 50px 0; /* ヘッダーの上下の余白 */
}

/* -------------------------------------------------------------------------- */
/* 共通スタイル */
/* -------------------------------------------------------------------------- */

.menu-row {
    display: flex;
    width: 100%;
    flex-direction: column;
    /* Food/Drinkの行の高さ比率を画像に合わせて調整 (例: 上段45%, 下段45%) */
    /* ざっくりとした比率をvhやパーセンテージで設定するか、コンテンツに依存させる */
}

.content-box {
    flex: 1; /* 基本的に幅は均等に分割 */
    position: relative; /* 縦文字の配置基準 */
    overflow: hidden;
}

/* 縦文字 (Food, Drink) */
.vertical-text {
    position: absolute;
    top: 50%;
    left: 0; /* Foodセクション */
    transform: translateY(-45%) rotate(-90deg);
    transform-origin: 0 0;
    font-size: 80px; /* サイズ調整 */
    font-weight: bold;
    opacity: 0.15; /* 薄く表示 */
    font-family: 'Times New Roman', Times, serif;
    pointer-events: none; /* テキスト選択を妨げないように */
}

/* Foodセクションの縦文字は左端 */
.food-text-column .vertical-text {
    left: 0;
}
img.food       {
                border-radius: 0px;
                }
/* Drinkセクションの縦文字は右端 */
.drink-text-column .vertical-text {
    /*right: 20px;
    left: auto;
    transform: translateY(0%) rotate(90deg); /* 反時計回りに90度回転 */
    /*transform-origin: 100% 0; /* 右上を基準に回転 */
}

/* -------------------------------------------------------------------------- */
/* Foodセクション (上段) のスタイル */
/* -------------------------------------------------------------------------- */

.food-row {
    display: flex;
    flex-direction: column-reverse;
    width:100%;

    /*margin-bottom: 20px; /* 上段と下段の間隔 */
}

.food-text-column { 
    background: linear-gradient(to bottom right,#013718, #013718); 
    padding: 50px 40px; 
    color: #ffffff; 
    box-sizing: border-box;
    display: block;
    text-align: left;
}

.food-img-column { 
    flex: 0 0 50%;
    display: block;
}

/* Foodセクションの縦文字色 */
.food-color {
    color: #ffffff; /* 白 */
}

/* -------------------------------------------------------------------------- */
/* Drinkセクション (下段) のスタイル */
/* -------------------------------------------------------------------------- */

.menu-rowdrink-row {
    /* Foodセクションと画像/テキストの順番が逆転 */
    flex-direction: row-reverse; 
}

.drink-text-column { 
    background: linear-gradient(to bottom right,#781200, #6f2113); /* 赤茶色 */
    padding: 50px 40px; 
    color: #ffffff; 
    box-sizing: border-box;
    text-align: left;
}

.drink-img-column {  
    flex: 0 0 50%;
}

/* Drinkセクションの縦文字色 */
.drink-color {
    color: #ffffff; /* 白 */
}

/* -------------------------------------------------------------------------- */
/* 画像とテキストの共通デザイン */
/* -------------------------------------------------------------------------- */

.img-column img {
    display: block;
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.menu-phrase {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    border-left: 5px solid #FFFFFF; 
    padding-left: 20px; 
    margin-bottom: 30px; 
    line-height: 1.6;
    background-color: #781200;
    display: block;
}

.menu-phrase1 {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    border-left: 5px solid #FFFFFF; 
    padding-left: 20px; 
    margin-bottom: 30px; 
    line-height: 1.6;
    background: linear-gradient(to bottom right,#013718, #06371b);
    display: block;
    margin-left: 50px;
}

.menu-description {
    font-size: 16px; 
    line-height: 1.8;
    display: block;
}

.menu-description2 {
    font-size: 16px; 
    line-height: 1.8;
    display: block;
    padding-right: 20px;
}

/* -------------------------------------------------------------------------- */
/* Read More ボタン */
/* -------------------------------------------------------------------------- */

.menu-footer {
    text-align: center;
    padding-top: 50px;
}

.read-more-button {
    background-color: #4CAF50; /* 緑色 */
    color: white;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

/* --- （その他、元のCSSからの抜粋） --- */

/* メインのタイトル (Menu) */
.menu-section .contents-wrapper h2 {
    font-size: 40px; 
    font-weight: bold;
    color: #333;
    padding-bottom: 5px; 
    margin-bottom: 5px; 
    display: inline-block; 
    font-family: Cardo, serif;
     /* ボーダー線の設定 */
     border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 20%; /* 線の幅を調整 */
    /*padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
    width: calc(100% - 30px);
    text-align: center; 
}

/* サブテキスト (お品書き) */
.menu-section p {
    font-size: 14px; 
    color: #666;
    margin-top: 0;
}
    

}



/* --------------------
   基本設定と中央揃え
   -------------------- */
.news-section {
    padding: 60px 20px;
    text-align: center; /* ヘッダーやボタンを中央に寄せる */
    background-color: #f8f8f8; /* 背景色 */
}

.news-header {
    margin-bottom: 40px;
}

.news-header h3 {
    font-size: 96px; 
    font-weight: bold;
    color: #333;
    padding-bottom: 5px; 
    margin-bottom: 5px; 
    display: inline-block; 
    font-family: Cardo, serif;
     /* ボーダー線の設定 */
     border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 250px; /* 線の幅を調整 */
    /*padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
}

.news-header p {
    font-size: 0.9em;
    color: #888;
    margin-top: 5px;
}

/* --------------------
   🔥 3カラムレイアウトの核 (Grid)
   -------------------- */
.news-container {
    /* news-container自体を中央に配置し、最大幅を設定 */
    max-width: 1200px;
    margin: 0 auto 50px auto; 

    display: grid;
    /* 画面幅が広いとき：3つの均等なカラムを作成 */
    grid-template-columns: repeat(3, 1fr);
    /* カラム間の隙間 */
    gap: 30px;
}

/* --------------------
   カードのスタイリング
   -------------------- */
.news-card {
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* 軽い影で立体感を出す */
    border-radius: 4px; /* 角を少し丸める */
    overflow: hidden; /* 画像のはみ出しを防ぐ */
    text-align: left; /* カード内のテキストは左寄せ */
}

.card-image-wrapper {
    position: relative; /* 日付の位置指定の基準 */
    height: 200px; /* 画像の高さを固定 (調整可能) */
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をトリミングし、コンテナを埋める */
    display: block;
}

/* 日付のスタイリング */
.card-date {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: white;
    color: #333;
    padding: 8px 10px;
    font-size: 1.2em;
    line-height: 1;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.card-date .day {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
}
/* 4月・3月の区切り線のスタイリング */
.card-date .month {
    display: block;
    padding-top: 5px;
    margin-top: 5px;
    border-top: 1px solid #ddd;
    font-size: 0.7em;
}

.card-content {
    padding: 15px;
}

.card-content h3 {
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
}

.card-content p {
    font-size: 0.9em;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* --------------------
   ボタンのスタイリング
   -------------------- */
.read-more-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #4CAF50; /* 画像と同じ緑色 */
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.read-more-button:hover {
    background-color: #45a049;
}

img.news {
          border-radius: 0px;
         }

@media (max-width:1024px){

.news-section {
    padding: 60px 20px;
    text-align: center; /* ヘッダーやボタンを中央に寄せる */
    background-color: #f8f8f8; /* 背景色 */
}

.news-header {
    margin-bottom: 40px;
}

.news-header h3 {
    font-size: 40px; 
    font-weight: bold;
    color: #333;
    padding-bottom: 5px; 
    margin-bottom: 5px; 
    display: inline-block; 
    font-family: Cardo, serif;
     /* ボーダー線の設定 */
     border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 20%; /* 線の幅を調整 */
    /*padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
}

.news-header p {
    font-size: 0.9em;
    color: #888;
    margin-top: 5px;
}

/* --------------------
   🔥 3カラムレイアウトの核 (Grid)
   -------------------- */
.news-container {
    /* news-container自体を中央に配置し、最大幅を設定 */
    max-width: 767px;
    /*margin: 0 auto 50px auto; */

    display: grid;
    /* 画面幅が広いとき：3つの均等なカラムを作成 */
    
    grid-auto-flow: column;
    /*grid-template-columns: repeat(3, 1fr);*/
    /* カラム間の隙間 */
    gap: 30px;
}

/* --------------------
   カードのスタイリング
   -------------------- */
.news-card {
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* 軽い影で立体感を出す */
    border-radius: 4px; /* 角を少し丸める */
    overflow: hidden; /* 画像のはみ出しを防ぐ */
    text-align: left; /* カード内のテキストは左寄せ */
}

.card-image-wrapper {
    position: relative; /* 日付の位置指定の基準 */
    height: 200px; /* 画像の高さを固定 (調整可能) */
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をトリミングし、コンテナを埋める */
    display: block;
}

/* 日付のスタイリング */
.card-date {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: white;
    color: #333;
    padding: 8px 10px;
    font-size: 1.2em;
    line-height: 1;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.card-date .day {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
}
/* 4月・3月の区切り線のスタイリング */
.card-date .month {
    display: block;
    padding-top: 5px;
    margin-top: 5px;
    border-top: 1px solid #ddd;
    font-size: 0.7em;
}

.card-content {
    padding: 15px;
}

.card-content h3 {
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
}

.card-content p {
    font-size: 0.9em;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* --------------------
   ボタンのスタイリング
   -------------------- */
.read-more-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #4CAF50; /* 画像と同じ緑色 */
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.read-more-button:hover {
    background-color: #45a049;
}

img.news {
          border-radius: 0px;
         }
}


@media (max-width:767px){

.news-section {
    padding: 60px 20px;
    text-align: center; /* ヘッダーやボタンを中央に寄せる */
    background-color: #f8f8f8; /* 背景色 */
}

.news-header {
    margin-bottom: 40px;
}

.news-header .contents-wrapper h3 {
    font-size: 40px; 
    font-weight: bold;
    color: #333;
    padding-bottom: 5px; 
    margin-bottom: 5px; 
    display: inline-block; 
    font-family: Cardo, serif;
     /* ボーダー線の設定 */
     border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 20%; /* 線の幅を調整 */
    /*padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
    width: calc(100% - 30px);
    text-align: center;
}

.news-header p {
    font-size: 0.9em;
    color: #888;
    margin-top: 5px;
}

/* --------------------
   🔥 3カラムレイアウトの核 (Grid)
   -------------------- */
.news-container {
    /* news-container自体を中央に配置し、最大幅を設定 */
    max-width: 767px;
    /*margin: 0 auto 50px auto; */

    display: flex;
    /* 画面幅が広いとき：3つの均等なカラムを作成 */
    flex-direction: column;
    /*grid-auto-flow: column;
    /*grid-template-columns: repeat(3, 1fr);*/
    /* カラム間の隙間 */
    gap: 30px;
}

/* --------------------
   カードのスタイリング
   -------------------- */
.news-card {
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* 軽い影で立体感を出す */
    border-radius: 4px; /* 角を少し丸める */
    overflow: hidden; /* 画像のはみ出しを防ぐ */
    text-align: left; /* カード内のテキストは左寄せ */
}

.card-image-wrapper {
    position: relative; /* 日付の位置指定の基準 */
    height: 200px; /* 画像の高さを固定 (調整可能) */
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をトリミングし、コンテナを埋める */
    display: block;
}

/* 日付のスタイリング */
.card-date {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: white;
    color: #333;
    padding: 8px 10px;
    font-size: 1.2em;
    line-height: 1;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.card-date .day {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
}
/* 4月・3月の区切り線のスタイリング */
.card-date .month {
    display: block;
    padding-top: 5px;
    margin-top: 5px;
    border-top: 1px solid #ddd;
    font-size: 0.7em;
}

.card-content {
    padding: 15px;
}

.card-content h3 {
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
}

.card-content p {
    font-size: 0.9em;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* --------------------
   ボタンのスタイリング
   -------------------- */
.read-more-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #4CAF50; /* 画像と同じ緑色 */
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.read-more-button:hover {
    background-color: #45a049;
}

img.news {
          border-radius: 0px;
         }


}

/* --------------------
   基本設定と中央揃え
   -------------------- */
.instagram-section {
    padding: 60px;
    text-align: center; /* ヘッダーやボタンを中央に寄せる */
    background-color: #E0DFDF; /* 背景色 */
}

.instagram-header {
    margin-bottom: 40px;
}

.instagram-header h4 {
    font-size: 96px; 
    font-weight: bold;
    color: #333;
    /*padding-bottom: 5px;*/ 
    margin-bottom: 5px; 
    display: inline-block; 
    font-family: Cardo, serif;
     /* ボーダー線の設定 */
    border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 500px; /* 線の幅を調整 */
    /*padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
}

.news-header p {
    font-size: 0.9em;
    color: #888;
    margin-top: 5px;
}

.instagram-img-container {
                         /*display: flex;*/
                         /*align-content: center;*/
                        }
.instagram-img  {
                flex-direction: row;
                justify-content: center;
                align-content: center;
}
.instagram-img2  {
                flex-direction: row;
                justify-content: center;
                align-content: center;
}
.instagram-img3  {
                flex-direction: row;
                justify-content: center;
                align-content: center;
}
.insta        {
                border-radius: 0px;
                width: 29%;
                height: 19%;
                padding: 3px;    
                object-fit: cover;
            }

@media (max-width: 1024px){

.instagram-section {
    padding: 60px 20px;
    text-align: center; /* ヘッダーやボタンを中央に寄せる */
    background-color: #E0DFDF; /* 背景色 */
    display: block;
}

.instagram-header {
    margin-bottom: 40px;
}

.instagram-header h4 {
    font-size: 40px; 
    font-weight: bold;
    color: #333;
    /*padding-bottom: 5px;*/ 
    margin-bottom: 5px; 
    display: inline-block; 
    font-family: Cardo, serif;
     /* ボーダー線の設定 */
    border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 30%; /* 線の幅を調整 */
    /*padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
}

.news-header p {
    font-size: 0.9em;
    color: #888;
    margin-top: 5px;
}

.instagram-img-container {
                         /*display: flex;*/
                         align-content: center;
                        }
.instagram-img  {
                flex-direction: column;
                justify-content: center;
                align-content: center;
}
.instagram-img2  {
                flex-direction: column;
                justify-content: center;
                align-content: center;
}
.instagram-img3  {
                flex-direction: column;
                justify-content: center;
                align-content: center;
}
.insta        {
                border-radius: 0px;
                width: 100%;
                height: 20%;
                padding: 3px;    
                object-fit: cover;
                display: flex;
                flex-direction: column;
            }


}

@media (max-width: 767px){

.instagram-section {
    padding: 60px 20px;
    text-align: center; /* ヘッダーやボタンを中央に寄せる */
    background-color: #E0DFDF; /* 背景色 */
    display: block;
}

.instagram-header {
    margin-bottom: 40px;
}

/*.instagram-header  {
    font-size: 40px; 
    font-weight: bold;
    color: #333;
    /*padding-bottom: 5px;*/ 
    /*margin-bottom: 5px; 
    display: inline-block; 
    font-family: Cardo, serif;
     /* ボーダー線の設定 */
    /*border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    /*border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    /*border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    /*width: 30%; /* 線の幅を調整 */
    /*padding-bottom: 5px; /* テキストと線との間に余白 */
    /*margin-bottom: 10px;
    /*text-align: center;*/

.instagram-header .contents-wrapper h4  {
    font-size: 40px; 
    font-weight: bold;
    color: #333;
    /*padding-bottom: 5px;*/ 
    margin-bottom: 5px; 
    display: inline-block; 
    font-family: Cardo, serif;
     /* ボーダー線の設定 */
    border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 30%; /* 線の幅を調整 */
    /*padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
    text-align: center;
 
    width: calc(100% - 30px);
    text-align: center;
    
  }  
.instagram p {
    border-image: none;
    font-size: 8px;
}    

.news-header p {
    font-size: 0.9em;
    color: #888;
    margin-top: 5px;
}

.instagram-img-container {
                         /*display: flex;*/
                         align-content: center;
                        }
.instagram-img  {
                flex-direction: column;
                justify-content: center;
                align-content: center;
}
.instagram-img2  {
                flex-direction: column;
                justify-content: center;
                align-content: center;
}
.instagram-img3  {
                flex-direction: column;
                justify-content: center;
                align-content: center;
}
.insta        {
                border-radius: 0px;
                width: 100%;
                height: 20%;
                padding: 3px;    
                object-fit: cover;
                display: flex;
                flex-direction: column;
            }


}

.greeting-container {
    display: flex;
    flex-direction: row-reverse; 
    align-items: stretch; /* 高さも揃える（画像とテキストの高さが異なってもコンテナの高さを合わせる） */
    width: 95vw; /* 画面の幅いっぱいに広げる */
    margin: 0; /* マージンをリセット */
    padding: 0; /* パディングをリセット */
    /* overflow: hidden; */ /* 画面サイズを超えるコンテンツがある場合に備えて */
}

/* 画像とテキストのカラムの幅設定 */
.greetings-img-column {
    flex: 0 0 50%; /* 幅を50%に固定 */
    padding: 0; /* パディングをリセット */
}

.greeting-text-column {
    flex: 0 0 50%; /* 幅を50%に固定 */
    /* テキストコンテンツの左右/上下のパディングをここで調整 */
    /*padding: 50px; /* 全体にパディングを適用 */
    padding-left: 150px;
}

/* 画像のスタイル */
.greeting-img {
    width: 80%; /* 親要素(img-column)の幅いっぱいに広げる */
    height: 96%; /* 親要素(img-column)の高さに合わせる */
    object-fit: cover; /* 縦横比を維持したまま要素を覆い尽くす */
    display: block;
    padding-top: 30px;
    /*margin-left: 20px;*/
    /*margin-right: 80px;*/
    border-radius: 0px;
}

/* その他のスタイル（.concept, .a-phrase など）はそのまま使用してください */
/* --- テキストコンテンツのスタイル設定 --- */

/* 「Greetings」のスタイル */
.greetings {
    font-size: 40px; /* サイズを大きく調整 */
    font-weight: bold;
    color: rgb(39, 39, 39);
    font-family: 'Times New Roman', Times, serif;
    /* 線のスタイルを修正 */
    border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 200px; /* 線の幅を調整 */
    padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
}

/* 「ご来店のお客様へ」のスタイル */
.phrase {
    font-size: 14px; /* サイズ調整 */
    color: #333333; /* 色をコンセプトの線に合わせる */
    margin-bottom: 20px; /* 下に余白 */
}
          
/* メインのフレーズのスタイル */
.a-phrase2 {
    font-size: 24px; /* サイズを調整 */
    font-weight: 500; /* 太さ */
    
    /* 左のグレーの縦線 */
    border-left: 5px solid gray; /* 線の太さと色を調整 */
    padding-left: 20px; /* 縦線とテキストの間に余白 */
    margin-bottom: 30px; /* 下に余白 */
    line-height: 1.6; /* 行間を調整 */
}

/* 説明文のスタイル */
.contents2 {
    font-size: 14px; /* サイズ調整 */
    color: rgb(61, 61, 61);
    margin-bottom: 15px; /* 各段落の下に余白 */
    line-height: 1.6; /* 行間を調整 */
    padding-left: 20px;
}

.greetings-section {
    padding-top: 60px;
    text-align: center; /* ヘッダーやボタンを中央に寄せる */
    background-color: #ffffff; /* 背景色 */
}

.greetings-header {
    /*margin-bottom: 40px;*/
}

.greetings-header h5 {
    font-size: 96px; 
    font-weight: bold;
    color: #333;
    /*padding-bottom: 5px;*/ 
    margin-bottom: 5px; 
    display: inline-block; 
    font-family: Cardo, serif;
     /* ボーダー線の設定 */
     border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 500px; /* 線の幅を調整 */
    /*padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
}

@media (max-width:1024px){

.greeting-container {
    display: flex;
    flex-direction: column-reverse; 
    align-items: center; /* 高さも揃える（画像とテキストの高さが異なってもコンテナの高さを合わせる） */
    width: 100%; /* 画面の幅いっぱいに広げる */
    margin: 0; /* マージンをリセット */
    padding: 0; /* パディングをリセット */
    /* overflow: hidden; */ /* 画面サイズを超えるコンテンツがある場合に備えて */
}

/* 画像とテキストのカラムの幅設定 */
.greetings-img-column {
    flex: 0 0 50%; /* 幅を50%に固定 */
    padding: 0; /* パディングをリセット */
}

.greeting-text-column {
    /*flex: 0 0 50%; /* 幅を50%に固定 */
    /* テキストコンテンツの左右/上下のパディングをここで調整 */
    padding-left: 10px;
    display: block;
    
}

/* 画像のスタイル */
.greeting-img {
    width: 100%; /* 親要素(img-column)の幅いっぱいに広げる */
    height: 100%; /* 親要素(img-column)の高さに合わせる */
    object-fit: cover; /* 縦横比を維持したまま要素を覆い尽くす */
    display: flex;
    justify-content: center;
    padding-top: 30px;
    
    margin-right: 80px;
    border-radius: 0px;

}

/* その他のスタイル（.concept, .a-phrase など）はそのまま使用してください */
/* --- テキストコンテンツのスタイル設定 --- */

/* 「Greetings」のスタイル */
.greetings {
    font-size: 40px; /* サイズを大きく調整 */
    font-weight: bold;
    color: rgb(39, 39, 39);
    font-family: 'Times New Roman', Times, serif;
    /* 線のスタイルを修正 */
    border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 200px; /* 線の幅を調整 */
    padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
}

/* 「ご来店のお客様へ」のスタイル */
.phrase {
    font-size: 14px; /* サイズ調整 */
    color: #333333; /* 色をコンセプトの線に合わせる */
    margin-bottom: 20px; /* 下に余白 */
}
          
/* メインのフレーズのスタイル */
.a-phrase2 {
    font-size: 24px; /* サイズを調整 */
    font-weight: 500; /* 太さ */
    
    /* 左のグレーの縦線 */
    border-left: 5px solid gray; /* 線の太さと色を調整 */
    padding-left: 20px; /* 縦線とテキストの間に余白 */
    margin-bottom: 30px; /* 下に余白 */
    line-height: 1.6; /* 行間を調整 */
}

/* 説明文のスタイル */
.contents2 {
    font-size: 14px; /* サイズ調整 */
    color: rgb(61, 61, 61);
    margin-bottom: 15px; /* 各段落の下に余白 */
    line-height: 1.6; /* 行間を調整 */
    padding-left: 20px;
}

.greetings-section {
    padding-top: 60px;
    text-align: center; /* ヘッダーやボタンを中央に寄せる */
    background-color: #ffffff; /* 背景色 */
}

.greetings-header {
    /*margin-bottom: 40px;*/
}

.greetings-header h5 {
    font-size: 40px; 
    font-weight: bold;
    color: #333;
    /*padding-bottom: 5px;*/ 
    margin-bottom: 5px; 
    display: inline-block; 
    font-family: Cardo, serif;
     /* ボーダー線の設定 */
     border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 30%; /* 線の幅を調整 */
    /*padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
}

}

@media (max-width:767px){

.greeting-container {
    display: flex;
    flex-direction: column-reverse; 
    align-items: center; /* 高さも揃える（画像とテキストの高さが異なってもコンテナの高さを合わせる） */
    width: 100%; /* 画面の幅いっぱいに広げる */
    margin: 0; /* マージンをリセット */
    padding: 0; /* パディングをリセット */
    /* overflow: hidden; */ /* 画面サイズを超えるコンテンツがある場合に備えて */
}

/* 画像とテキストのカラムの幅設定 */
.greetings-img-column {
    flex: 0 0 50%; /* 幅を50%に固定 */
    padding: 0; /* パディングをリセット */
}

.greeting-text-column {
    /*flex: 0 0 50%; /* 幅を50%に固定 */
    /* テキストコンテンツの左右/上下のパディングをここで調整 */
    
    display: block;
    /*margin-left: 6%;*/
}

/* 画像のスタイル */
.greeting-img {
    width: 100%; /* 親要素(img-column)の幅いっぱいに広げる */
    height: 100%; /* 親要素(img-column)の高さに合わせる */
    object-fit: cover; /* 縦横比を維持したまま要素を覆い尽くす */
    display: block;
    padding-top: 30px;
    
    margin-right: 80px;
    border-radius: 0px;
    
}

/* その他のスタイル（.concept, .a-phrase など）はそのまま使用してください */
/* --- テキストコンテンツのスタイル設定 --- */

/* 「Greetings」のスタイル */
.greetings-header .contents-wrapper h5 {
    font-size: 40px; /* サイズを大きく調整 */
    font-weight: bold;
    color: rgb(39, 39, 39);
    font-family: 'Times New Roman', Times, serif;
    /* 線のスタイルを修正 */
    border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    /*width: 200px; /* 線の幅を調整 */
    padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
    width: calc(100% - 30px);
    text-align: center;
}
.greetings-p {
    border-image: none;
    font-size: 14px
}

/* 「ご来店のお客様へ」のスタイル */
.phrase {
    font-size: 14px; /* サイズ調整 */
    color: #333333; /* 色をコンセプトの線に合わせる */
    margin-bottom: 20px; /* 下に余白 */
}
          
/* メインのフレーズのスタイル */
.a-phrase2 {
    font-size: 24px; /* サイズを調整 */
    font-weight: 500; /* 太さ */
    
    /* 左のグレーの縦線 */
    border-left: 5px solid gray; /* 線の太さと色を調整 */
    padding-left: 20px; /* 縦線とテキストの間に余白 */
    margin-bottom: 30px; /* 下に余白 */
    line-height: 1.6; /* 行間を調整 */
}

/* 説明文のスタイル */
.contents2 {
    font-size: 14px; /* サイズ調整 */
    color: rgb(61, 61, 61);
    margin-bottom: 15px; /* 各段落の下に余白 */
    line-height: 1.6; /* 行間を調整 */
    padding-left: 20px;
}

.greetings-section {
    padding-top: 60px;
    text-align: center; /* ヘッダーやボタンを中央に寄せる */
    background-color: #ffffff; /* 背景色 */
}

.greetings-header {
    /*margin-bottom: 40px;*/
}

.greetings-header h5 {
    font-size: 40px; 
    font-weight: bold;
    color: #333;
    /*padding-bottom: 5px;*/ 
    margin-bottom: 5px; 
    display: inline-block; 
    font-family: Cardo, serif;
     /* ボーダー線の設定 */
     border-bottom: 3px solid transparent; /* まず透明な線を用意 */
    border-image: linear-gradient(to right, #C41F02 0%, white 100%); /* グラデーションを適用 */
    border-image-slice: 1; /* 線の厚さを設定（'3px'を基準に） */
    width: 30%; /* 線の幅を調整 */
    /*padding-bottom: 5px; /* テキストと線との間に余白 */
    margin-bottom: 10px;
}

}

/* --- アクセスセクション全体 (省略せず記載します) --- */

.access-section {
    padding: 80px 0 0; /* 下の画像と接合するためbottomは0 */
    text-align: center;
    background-color: #E0DFDF;
    font-family: Arial, sans-serif; 
}

/* Access ヘッダーの調整 */
.access-header {
    margin-bottom: 50px;
}
.access-header h6 {
    font-size: 96px; 
    font-weight: bold;
    color: #333;
    display: inline-block; 
    font-family: Cardo, serif;
    border-bottom: 3px solid transparent; 
    border-image: linear-gradient(to right, #C41F02 0%, #E0DFDF 100%); 
    border-image-slice: 1; 
    width: 350px; 
    /*padding-bottom: 5px;*/ 
    margin-bottom: 10px;
    letter-spacing: 2px;
}
.access-header p {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

/* --- マップとカードのコンテナ (重ね合わせる設定) --- */

.access-container {
    max-width: 1500px; 
    margin: 0 auto;
    position: relative; /* ★重要：絶対配置の基準点★ */
    height: 544px; /* マップの高さに合わせる */
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    gap: 0;

}

.access-map {
    position: relative;
    top: 0;
    /*left: 50%;*/ 
    /*transform: translateX(-50%);*/ 
    width: 750px; 
    height: 544px;
    border: 0; 
}
.access-map1 {
    position: relative;
    width: 100%;
    height: 100%;
}
/* --- 店舗情報カードのスタイル --- */

.access-address-card {
    position: relative; /* ★重要：マップの上に重ねる★ */
    bottom: 0; 
    /* マップの右端に合わせる値 */
    right: 0%; 
    
    width: 50%; /* 画像に近い幅に設定 */
    /* 背景色を復元 */
    background-color: #781200; 
    color: #fff;
    padding: 60px 70px; /* 内側の余白を調整 */
    box-sizing: border-box;
    text-align: left;
    height: 544px; /* マップの高さに合わせる */
    z-index: 10;
    background: linear-gradient(to bottom right,#781200, #795751);
}





.border-top {
    width: 100px;
    height: 2px;
    top :16px;
    left: 5px;
    position: absolute;
    background-color: #ffffff;

}

.border-left {

    width: 2px;
    height: 100px;
    top :5px;
    left: 14px;
    position: absolute;
    background-color: #ffffff;

}

.border-bottom {
    width: 2px;
    height: 100px;
    right: 16px;
    bottom: 5px;
    position: absolute;
    background-color: #ffffff;
}

.border-right {
     width: 100px;
    height: 2px;
    right: 5px;
    bottom: 14px;
    
    position: absolute;
    background-color: #ffffff;
}

.access-address-header {
    position: relative;
    padding-top: 15px; 
    padding-bottom: 20px;
    margin-bottom: 20px;
    padding-left: 20px; /* 赤線との間隔 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
}

.access-address-header h2 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 32px;
    font-weight: bold;
    margin: 0;
}

/* 店舗詳細 (dlリスト) のスタイル */
.access-address-details {
    padding-left: 20px;
}
.access-address-details dl {
    display: flex;
    flex-direction: column; 
    gap: 10px 15px; 
    margin-bottom: 20px;
}
.address {
    display: flex;
    padding-left: 2%;
    padding-right: 2%; 
}

.address dt {
    font-family: 'Times New Roman', Times, serif;
    max-width: 750px;  
    width: 30%;      /* 項目名の幅を固定 */
    flex-shrink: 0;    /* コンテンツが縮んでもこの幅を維持 */
    font-weight: bold;
    padding-right: 20px; /* 項目名と内容の間の余白 */
    
    font-size: 18pt;
}

.address dd {
    max-width: 750px;
    margin: 0; /* dd要素のデフォルトマージンをリセット */
    flex-grow: 1; /* 残りの幅をすべて使う */
    line-height: 1.6; /* 行の高さを調整して読みやすくする */

    font-size: 12pt;
  }


/*.access-address-details dt {
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
    color: #E0DFDF; 
}

.access-address-details dd {
    margin: 0;
    font-size: 18px;
}

.address .small-text {
    font-size: 14px; 
    display: block;
}

/* 支払い方法などのリスト */
.payment-methods {
    list-style: disc; 
    margin-left: 25px;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    padding-left: 0;
}

.payment-methods li::marker {
    color: #E0DFDF; 
    font-size: 0.8em;
}

/* 注釈 */
.note {
    font-size: 12px;
    line-height: 1.5;
    margin-top: 15px;
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
    padding-top: 15px;
}

/* 飲食店の写真部分 */
.dining-bar-image {
    width: 100%;
    height: 100%;
    /* heightはimgタグに任せるか、このdivで固定する */
    margin-top: 0 auto; 
    /*overflow: hidden;*/
}

.access-img {
    width: 1500px; /* 親要素(dining-bar-image)いっぱいに広げる */
    height: 755px; /* 画像の元の高さから調整 */
    object-fit: cover; /* 画像がはみ出さないように */
    display: block;
    border-radius: 0px;
    padding-bottom: 108px;
    padding-top: 108px;
}

/* 不要なクラスを削除 */
.access-address-img {
    display: none; 
}



@media(max-width:1024px){

/* コンテナの固定高さを解除し、縦並びに */
.access-container {
    /*max-width: 1024px;*/ 
    margin: 0 auto;
    position: relative; 
    height: auto;      /* ★450pxからautoに変更 */
    display: flex;
    flex-direction: column; 
    align-items: center; /* 中央寄せ */
}

/* マップを囲む枠の調整 */
.access-map {
    position: relative;    /* ★absoluteを解除 */
    /*transform: none;     /* ★transformを解除 */
    width: 90%;          /* スマホで見やすい幅に */
    height: 544px;       /* ★マップを小さく設定 */
    /*margin-bottom: 20px; /* カードとの間の余白 */
    
    /*left: auto;          /* 不要な値をリセット */
}

/* iframe自体のサイズを親に合わせる */
.access-container iframe {
    
    width: 100%;
    height: auto;
    /*display: block;*/
    /* アスペクト比を保つ (16:9 や 4:3) */
    aspect-ratio: 16 / 9;
}

/* 住所カードの調整 */
.access-address-card {
    position: relative;    /* ★absolute（重ね合わせ）を解除 */
    width: 72%;          /* マップと幅を合わせる */
    height: auto;        /* ★中身に合わせて伸びるように変更 */
    padding: 30px 20px;  /* スマホ用に左右余白を少し詰める */
    margin-bottom: 40px; /* 下の画像との間の余白 */
    background: linear-gradient(to bottom right, #781200, #795751);
}

/* 飲食店の写真部分 */
.dining-bar-image {
    width: 100%;
    margin-top: 0;
}

.access-img {
    width: 100%;
    height: auto;        /* 40%からautoにしてアスペクト比を維持 */
    object-fit: cover;
    display: block;
    padding-bottom: 0;   /* 余白はmarginで制御するのが安全 */
}

}

@media(max-width:767px){

/* Access ヘッダーの調整 */
.access-header {
    margin-bottom: 50px;
}
.access-header .contents-wrapper h6 {
    font-size: 40px; 
    font-weight: bold;
    color: #333;
    display: inline-block; 
    font-family: Cardo, serif;
    border-bottom: 3px solid transparent; 
    border-image: linear-gradient(to right, #C41F02 0%, #E0DFDF 100%); 
    border-image-slice: 1; 
    width: 150px; 
    /*padding-bottom: 5px;*/ 
    margin-bottom: 10px;
    letter-spacing: 2px;
    width: calc(100% - 30px);
    text-align: center;
}
.access-header p {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

    /* コンテナの固定高さを解除し、縦並びに */
.access-container {
    max-width: 100%; 
    margin: 0 auto;
    position: relative; 
    height: auto;      /* ★450pxからautoに変更 */
    display: flex;
    flex-direction: column; 
    align-items: center; /* 中央寄せ */
}

.border-top {
    width: 100px;
    height: 2px;
    top :16px;
    left: 5px;
    position: absolute;
    background-color: #ffffff;

}

.border-left {

    width: 2px;
    height: 100px;
    top :5px;
    left: 14px;
    position: absolute;
    background-color: #ffffff;

}

.border-bottom {
    width: 2px;
    height: 100px;
    right: 16px;
    bottom: 5px;
    position: absolute;
    background-color: #ffffff;
}

.border-right {
    width: 100px;
    height: 2px;
    right: 5px;
    bottom: 14px;
    
    position: absolute;
    background-color: #ffffff;
}


/* マップを囲む枠の調整 */
/*.access-map {
    position: static;    /* ★absoluteを解除 */
    /*transform: none;     /* ★transformを解除 */
    /*width: 90%;          /* スマホで見やすい幅に */
    /*height: 250px;       /* ★マップを小さく設定 */
    /*margin-bottom: 20px; /* カードとの間の余白 */
    /*left: auto;          /* 不要な値をリセット */


/* iframe自体のサイズを親に合わせる */
.access-map {
    width: 100%;
    height: 100%;
    display: block;
}

/* 住所カードの調整 */
.access-address-card {
    position: relative;    /* ★absolute（重ね合わせ）を解除 */
    width: 100%;          /* マップと幅を合わせる */
    height: auto;        /* ★中身に合わせて伸びるように変更 */
    padding: 30px 20px;  /* スマホ用に左右余白を少し詰める */
    margin-bottom: 40px; /* 下の画像との間の余白 */
    background: linear-gradient(to bottom right, #781200, #795751);
}

/* 飲食店の写真部分 */
.dining-bar-image {
    width: 100%;
    margin-top: 0;
}

.access-img {
    width: 100%;
    height: auto;        /* 40%からautoにしてアスペクト比を維持 */
    object-fit: cover;
    display: block;
    padding-bottom: 58px;   /* 余白はmarginで制御するのが安全 */
    padding-top: 18px;
}

}

/* フッター全体のスタイル */
.site-footer {
    /* 画像の濃い茶色の背景色 */
    
    background-color: #791301; 
    padding-top: 50px; /* 上部のパディング */
    padding-bottom: 20px; /* 下部の著作権表記のためのパディング */
    position: relative;
    /* 角の丸み（画像の下部に見られる） */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* ナビとSNSアイコンのコンテナ */
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between; /* リンクを左、SNSを右に寄せる */
    align-items: center;
    margin-bottom: 50px; /* 著作権表記との間隔 */
}

/* ナビゲーションリンク */
.footer-nav ul {
    list-style: none;
    display: flex;
    padding: 30px;
    margin: 0;
}

.footer-nav li {
    color: #ffffff;
    margin-right: 140px; /* リンク間の間隔 */
}

.footer-nav a {
    text-decoration: none;
    color: #F8F8F8; /* リンクのテキスト色（白っぽい色） */
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    /*transition: color 0.3s;*/
}

.footer-nav a:hover {
    color: #C41F02; /* ホバー時の色 */
}

/* SNSアイコン */
.footer-sns {
    display: flex;
    gap: 15px; /* アイコン間のスペース */
    padding-top: 100px;
}

.sns-icon {
    display: block;
    width: 32px;
    height: 32px;
    background-size: cover;
    background-position: center;
    border-radius: 5px; /* アイコンの角を丸める */
}
.sns-iconinstagram{
    background-image: url(images/instagram-icon.jpg);
}
.sns-iconfacebook {
    background-image: url(images/facebook-icon.jpg);

}
.sns-icontwitter {
    background-image: url(images/Twitter-icon.jpg);
}
/* --- SNSアイコンの色再現シミュレーション（実際は画像を使用するのが一般的） --- */

/* 💡 実際には、Font AwesomeなどのSVGアイコンか、PNG/JPG画像を使用してください。 */
/* 以下は、アイコン画像をCSSで背景として設定する場合の例です。 */
/* .footer-sns .instagram { background-image: url('path/to/instagram-icon.png'); } */
/* .footer-sns .facebook { background-image: url('path/to/facebook-icon.png'); } */
/* .footer-sns .twitter { background-image: url('path/to/twitter-icon.png'); } */

/* 著作権表記 */
.footer-copyright {
    text-align: center;
}

.footer-copyright p {
    margin: 0;
    font-size: 12px;
    /* 画像の著作権表記は少し薄い色 */
    color: rgba(255, 255, 255, 0.7); 
    font-family: Arial, sans-serif;
}

@media (max-width:1024px){

.site-footer {
    /* 画像の濃い茶色の背景色 */
    width: 100%;
    background-color: #791301; 
    padding-top: 50px; /* 上部のパディング */
    padding-bottom: 20px; /* 下部の著作権表記のためのパディング */
    position: relative;
    /* 角の丸み（画像の下部に見られる） */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
    display: block;
}

.contents-wrapper {
    width: calc(100% - 40px);
  }

/* ナビとSNSアイコンのコンテナ */
.footer-content {
    /*max-width: 1200px;*/
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between; /* リンクを左、SNSを右に寄せる */
    align-items: center;
    margin-bottom: 50px; /* 著作権表記との間隔 */
}

/* ナビゲーションリンク */
.footer-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 25px;
    margin: 0;
}

.footer-nav li {
    color: #ffffff;
    /*margin-right: 140px; /* リンク間の間隔 */
}

.footer-nav a {
    text-decoration: none;
    color: #F8F8F8; /* リンクのテキスト色（白っぽい色） */
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    /*transition: color 0.3s;*/
}

.footer-nav a:hover {
    color: #C41F02; /* ホバー時の色 */
}

/* SNSアイコン */
.footer-sns {
    display: flex;
    gap: 15px; /* アイコン間のスペース */
    padding-top: 100px;
    padding-right: 100px;
    
}

.sns-icon {
    display: block;
    width: 32px;
    height: 32px;
    background-size: cover;
    background-position: center;
    border-radius: 5px; /* アイコンの角を丸める */
}
.sns-iconinstagram{
    background-image: url(images/instagram-icon.jpg);
}
.sns-iconfacebook {
    background-image: url(images/facebook-icon.jpg);

}
.sns-icontwitter {
    background-image: url(images/Twitter-icon.jpg);
}
/* --- SNSアイコンの色再現シミュレーション（実際は画像を使用するのが一般的） --- */

/* 💡 実際には、Font AwesomeなどのSVGアイコンか、PNG/JPG画像を使用してください。 */
/* 以下は、アイコン画像をCSSで背景として設定する場合の例です。 */
/* .footer-sns .instagram { background-image: url('path/to/instagram-icon.png'); } */
/* .footer-sns .facebook { background-image: url('path/to/facebook-icon.png'); } */
/* .footer-sns .twitter { background-image: url('path/to/twitter-icon.png'); } */

/* 著作権表記 */
.footer-copyright {
    text-align: center;
}

.footer-copyright p {
    margin: 0;
    font-size: 12px;
    /* 画像の著作権表記は少し薄い色 */
    color: rgba(255, 255, 255, 0.7); 
    font-family: Arial, sans-serif;
}

}

@media (max-width:767px){

.site-footer {
    /* 画像の濃い茶色の背景色 */
    width: 100%;
    background-color: #791301; 
    padding-top: 50px; /* 上部のパディング */
    padding-bottom: 20px; /* 下部の著作権表記のためのパディング */
    position: relative;
    /* 角の丸み（画像の下部に見られる） */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
    display: block;
}

.contents-wrapper {
    width: calc(100% - 20px);
  }

/* ナビとSNSアイコンのコンテナ */
.footer-content {
    /*max-width: 1200px;*/
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between; /* リンクを左、SNSを右に寄せる */
    align-items: center;
    margin-bottom: 50px; /* 著作権表記との間隔 */
}

/* ナビゲーションリンク */
.footer-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 25px;
    margin: 0;
}

.footer-nav li {
    color: #ffffff;
    /*margin-right: 140px; /* リンク間の間隔 */
}

.footer-nav a {
    text-decoration: none;
    color: #F8F8F8; /* リンクのテキスト色（白っぽい色） */
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    /*transition: color 0.3s;*/
}

.footer-nav a:hover {
    color: #C41F02; /* ホバー時の色 */
}

/* SNSアイコン */
.footer-sns {
    display: flex;
    gap: 15px; /* アイコン間のスペース */
    padding-top: 100px;
    flex-direction: column;
    padding-right: 100px;
}

.sns-icon {
    display: block;
    width: 32px;
    height: 32px;
    background-size: cover;
    background-position: center;
    border-radius: 5px; /* アイコンの角を丸める */
}
.sns-iconinstagram{
    background-image: url(images/instagram-icon.jpg);
}
.sns-iconfacebook {
    background-image: url(images/facebook-icon.jpg);

}
.sns-icontwitter {
    background-image: url(images/Twitter-icon.jpg);
}
/* --- SNSアイコンの色再現シミュレーション（実際は画像を使用するのが一般的） --- */

/* 💡 実際には、Font AwesomeなどのSVGアイコンか、PNG/JPG画像を使用してください。 */
/* 以下は、アイコン画像をCSSで背景として設定する場合の例です。 */
/* .footer-sns .instagram { background-image: url('path/to/instagram-icon.png'); } */
/* .footer-sns .facebook { background-image: url('path/to/facebook-icon.png'); } */
/* .footer-sns .twitter { background-image: url('path/to/twitter-icon.png'); } */

/* 著作権表記 */
.footer-copyright {
    text-align: center;
}

.footer-copyright p {
    margin: 0;
    font-size: 12px;
    /* 画像の著作権表記は少し薄い色 */
    color: rgba(255, 255, 255, 0.7); 
    font-family: Arial, sans-serif;
}

}

/* ボタン全体 */
#page_top {
width: 100px;
height: 100px;
position: fixed;
right: 10px;
bottom: 10px;
background: #e25407;
border-radius: 50%;
opacity: 0.6;
}

html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: linear-gradient(to bottom right,#C41F02, #CC5A47);   
    border: solid 2px #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: translateY(20%) rotate(-45deg);
}
li.home {
    padding-top: 10px;
    padding-bottom: 10px;
}
li.concept2 {
    padding-top: 10px;
    padding-bottom: 10px;
}
li.menu3 {
    padding-top: 10px;
    padding-bottom: 10px;
}

li.news {
    padding-top: 10px;
    padding-bottom: 10px;
}

li.access  {
    padding-top: 10px;
    padding-bottom: 10px;
}

li.reservation {
    padding-top: 10px;
    padding-bottom: 10px;
}