/*
Theme Name: unagi-kaneya
*/

/* 基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
 font-family: "Noto Serif JP", "Hiragino Mincho ProN", "MS PMincho", serif!important;
    margin: 0;
    padding: 0;
	color: #fff!important;
	background: #333 !important;
	overflow-x: hidden;
}
a:hover {
  color: #999999 !important;
  text-decoration: none !important;
}

/************************************
ヘッダーエリア
************************************/
.header_area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
}

.header-inner {
display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* 横幅の制限設定 */
    max-width: 1000px; 
    margin: 0 auto;     
     padding: 0 24px;     
    height: 100px;
}

.header-logo  {
 height: 230px; 
 width: 200px;
  background: #fff;
  padding: 20px 0 0 0;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  text-align: center;
}
.header-logo img {
width: 80%;
padding:40px 0 0 0; 
  height: auto;
	
}

.header-nav {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    list-style: none;
    margin-right: 30px;
}

.nav-list li a {
    text-decoration: none;
    color: #333;
    padding: 0 15px;
    font-size: 16px;
    font-weight: bold;
}

/* 電話番号部分 */
.header-contact {
    text-align: center;
	
}

.contact-label {
    background: #333;
    color: #fff;
    font-size: 12px;
    padding: 2px 10px;
	margin-bottom: 10px;
}



/* 電話番号の親要素を横並びに */
.contact-number-wrapper {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  justify-content: center;
  gap: 5px; /* アイコンと数字の間の隙間 */
}

.tel-icon {
  width: 18px;  /* アイコンのサイズ（適宜調整してください） */
  height: auto;
}

.contact-number {
  color: #333;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  line-height: 1; /* 行の高さを詰めてアイコンと高さを合わせる */
}

/* --- スマホ用設定 (960px以下) --- */
@media screen and (max-width: 960px) {
	
  .header-inner {
    height: auto;          /* ← 固定やめる */
    min-height: 70px;      /* ← 最低高さだけ確保 */
    align-items: center;
  }

  .header-logo {
    width: 120px;
    height: auto;          /* ← これ重要 */
    padding: 0 10px;            /* ← 上の余白削除 */
  }

  .header-logo img {
    width: 100%;
    height: auto;
    display: block;
  }
    .header-inner {
        padding: 0 20px;
        height: 70px;
    }

    /* ナビゲーションを隠す */
    .header-nav {
        position: fixed;
        top: 0;
        right: -100%; /* 画面外に待機 */
        width: 80%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.95);
        flex-direction: column;
        justify-content: flex-start;
        transition: 0.3s;
		padding-top: 120px;
		
		
    }

    .header-nav.is-active {
        right: 0; /* 画面内に引き出す */
    }

    .nav-list {
        flex-direction: column;
        margin-right: 0;
        text-align: center;
    }

    .nav-list li {
        margin-bottom: 20px;
    }

    /* ハンバーガーボタンのデザイン */
    .menu-trigger {
        display: block;
        width: 30px;
        height: 24px;
        position: relative;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }

    .menu-trigger span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background: #333;
        transition: 0.3s;
    }

    .menu-trigger span:nth-child(1) { top: 0; }
    .menu-trigger span:nth-child(2) { top: 11px; }
    .menu-trigger span:nth-child(3) { bottom: 0; }

    /* ボタンが押された時の×印アニメーション */
    .menu-trigger.is-active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
    .menu-trigger.is-active span:nth-child(2) { opacity: 0; }
    .menu-trigger.is-active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }
}
/* PCではハンバーガーを隠す */
@media screen and (min-width: 961px) {
    .menu-trigger {
        display: none;
    }
}


/* =========================
言語切替
========================= */
.lang-switcher {
  z-index: 9999;

}

/* ボタン */
.lang-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: #333;
  cursor: pointer;
  padding: 5px 10px;
}

/* ▼アイコン */
.lang-btn::after {
  content: "▼";
  font-size: 10px;
  margin-left: 5px;
}

/* ドロップダウン */
.lang-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 30px;
  background: #fff;
  list-style: none;
  padding: 10px 15px;
  min-width: 160px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  z-index: 9999;
}

.lang-dropdown li {
  margin-bottom: 8px;
}

.lang-dropdown li:last-child {
  margin-bottom: 0;
}

.lang-dropdown a {
  text-decoration: none;
  color: #333;
  font-size: 13px;
}

.lang-dropdown li.current a {
  font-weight: bold;
}

/* 表示状態 */
.lang-dropdown.active {
  display: block;
}

/* =========================
PC（右上固定）
========================= */
@media screen and (min-width: 961px) {

  .lang-switcher {
    position: absolute;
    top: 10px;
    right: 20px;
  }

}

/* =========================
スマホ（ハンバーガー左）
========================= */
@media screen and (max-width: 960px) {

  .lang-switcher {
    position: absolute;
    top: 22px;
    right: 60px;
  }

  .lang-btn {
    font-size: 11px;
    padding: 3px 6px;
  }

}
/************************************
breadcrumb
************************************/
.breadcrumb {
  max-width: 1000px !important;
  margin: 10px auto 0 auto !important;
  padding: 0 10px !important;
  font-size: 10px !important;
  color: #fff !important;
  background: #333 !important;
}

.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li::after {
  content: "›";
  margin: 0 8px;
  color: #fff;
}

.breadcrumb li:last-child::after {
  display: none;
}

.breadcrumb a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.breadcrumb a:hover {
  color: #333;
}

.breadcrumb span {
  color: #fff;
  font-weight: 600;
}

/************************************
ボタン
************************************/
.top_btn01{
margin:0 auto 100px 0;
padding:0 0;	
 text-align:center;
}


.top_btn01 a{
  background:#c9a55a;
  padding:15px 40px;
  text-decoration:none;
  color:#000;
 font-size: 30px;
  font-family: "Zen Old Mincho", serif;
display: inline-block; 
transition: background-color 0.3s ease;
}

.top_btn01 a:hover {
    background: #a68541; /* 少し暗めの金色に変更 */
    color: #000 !important;
	text-decoration:none;
}

/************************************
RESERVATIONボタン
************************************/
.contact_btn{
margin:20px 0 50px 0;
padding:0 0;	
 text-align:center;
}


.contact_btn a{
  background:#c9a55a;
  padding:10px 40px;
  text-decoration:none;
  color:#000;
 font-size: 20px;
  font-family: "Zen Old Mincho", serif;
display: inline-block; 
transition: background-color 0.3s ease;
}

.contact_btn a:hover {
    background: #a68541; /* 少し暗めの金色に変更 */
    color: #000; /* 文字色はそのまま */
}


/************************************
ファーストビュー
************************************/
.fv_base {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden; /* 動画のはみ出し防止 */
    background: #000; /* 動画読み込み前の背景色 */
}

/* 動画のスタイル */
.fv_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の cover と同じ挙動 */
    z-index: 1;
}

/* コンテンツエリア（動画より上に配置） */
.fv_area {
    position: relative;
    z-index: 2; /* 動画の上に重ねる */
    width: 100%;
    height: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* お知らせバー */
.fv_news {
    position: absolute;
    bottom: 40px;
    left: 20px;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10px 20px;
    font-size: 14px;

}

.fv_news-label { margin-right: 20px; font-weight: bold; }
.fv_news-date { margin-right: 15px;  }
.fv_news-text a{
color: #fff;
text-decoration: none;
}


/* スマホ対応 */
@media (max-width: 768px) {
    
    .fv_base {
        /* ヘッダーの高さ分(約70px)を確保 */
        padding-top: 70px; 
        box-sizing: border-box;
        height: 50vh; 
        min-height: 500px;
        position: relative; /* 子要素の基準点にする */
        background-color: #000;
    }

    .fv_video {
        /* 動画をヘッダーの下から配置し、余白を埋める */
        position: absolute;
        top: 70px; 
        left: 0;
        width: 100%;
        height: calc(100% - 70px); 
        object-fit: cover;
        z-index: 1;
    }

    /* --- 重要：コンテンツエリアを動画の範囲に限定する --- */
    .fv_area {
        position: absolute;
        top: 70px; /* 動画と同じ開始位置 */
        left: 0;
        width: 100%;
        height: calc(100% - 70px); /* 動画と同じ高さ */
        z-index: 2;
        max-width: none; /* スマホでは幅いっぱいに */
    }

    /* --- お知らせバーの位置修正 --- */
    .fv_news {
        bottom: 20px;
        left: 10px;
        flex-direction: column;
        align-items: flex-start;
    }
}

/************************************
ヘッドライン
************************************/
.top_headline {
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
  background: #b89a5b;
}

.top_headline_bese {
  width: 96%;
  max-width: 1000px;
  margin: 0 auto;
}

/* ティッカー本体 */
.ticker {
  overflow: hidden;
  position: relative;
}

/* 流れる中身 */
.ticker_inner {
  display: flex;
  width: max-content;
  animation: tickerMove 18s linear infinite;
}

/* テキスト */
.ticker_inner span {
  white-space: nowrap;
  color: #fff;
  font-size: 18px;
  padding-right:10px;
}

/* アニメーション */
@keyframes tickerMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ホバーで停止（PC用） */
.ticker:hover .ticker_inner {
  animation-play-state: paused;
}

/* スマホ最適化 */
@media (max-width: 768px) {
  .ticker_inner {
    animation-duration: 12s;
  }
  .ticker_inner span {
    font-size: 14px;
  }
}

/* 動きを減らしたい人向け（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  .ticker_inner {
    animation: none;
  }
}

/************************************
TOP_ABOUT
************************************/
.top_about {
  display: flex;
  /* 本来右から左へ並ぶものを、左から右（逆順）に並べる */
  flex-direction: row-reverse; 
  
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 100px 0;
  background-image: url('img/top/parts01.png');
background-size: 100% auto;
background-repeat: no-repeat;
background-position: left top;
}

/* 見出しの余白を調整 */
.top_about h2 { 
  writing-mode: vertical-rl;
  font-family: "Zen Old Mincho", serif;
  font-size: 70px !important;
  font-weight: 500;
  margin-left: 20px;
}

.top_about_txt {
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: row-reverse;
}

.top_about_txt p{
	font-size: 20px!important;
	line-height: 2;
	text-align: justify;
	}


@media screen and (max-width: 750px) {
.top_about {
    display: block; /* Flexを解除して縦並びに */
    padding: 40px 20px;
    overflow: visible; /* 横スクロールを強制排除 */
    width: auto; /* 幅を自動調整 */
    background-size: cover; /* 背景画像の出方をスマホ用に調整 */
  }

  .top_about h2 {
    writing-mode: horizontal-tb; /* 横書き */
    font-size: 24px !important;
    margin: 0 0 20px 0; /* 余白をリセット */
    text-align: center;
    width: 100%; /* 横幅いっぱい使う */
  }

  .top_about_txt {
    writing-mode: horizontal-tb; /* 横書き */
    display: block; /* Flexを解除 */
    width: 100%;
  }

  .top_about_txt p {
    font-size: 15px !important;
    line-height: 1.8 !important;
    text-align: center;
    height: auto !important; /* PC版で高さ指定がある場合の対策 */
    white-space: normal; /* 折り返しを確実に有効化 */
  }
  
  /* 改行の調整をリセット */
  .top_about_txt br {
    display: inline; 
  }

}

/************************************
ふわっと表示
************************************/
.js-fade {
  opacity: 0;
  transform: translateY(30px); /* 30px下から */
  transition: opacity 1.2s ease, transform 1.2s ease; /* 1.2秒かけて変化 */
}

/* スクロールして表示された時の状態 */
.js-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 要素ごとに少し遅延（ディレイ）させたい場合 */
.top_about_txt.js-fade {
  transition-delay: 0.3s;
}



/************************************
TOPコンテンツ
************************************/
/* --- 全体エリア --- */
.topcontent{
  overflow: hidden;
}

/************************************
見出しタイトル
************************************/

/* --- かねやのこだわり --- */
.top_title_area01 {
  position: relative;
  width: 100%;
  height: 60vh;
  background-image: url('img/top/sub_title01.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* --- お品書き --- */
.top_title_area02 {
  position: relative;
  width: 100%;
  height: 60vh;
  background-image: url('img/top/sub_title02.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* --- 店舗情報 --- */
.top_title_area03 {
  position: relative;
  width: 100%;
  height: 60vh;
  background-image: url('img/top/sub_title03.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}


/* --- 動く縦線の設定 --- */
.titleline {
  width: 1px;               /* 線の太さ */
  height: 100px;             /* 線の長さ */
  background: #fff; 
  margin: 0 auto 15px;      /* 中央寄せ & 下の文字との隙間 */
  animation: moveUpDown 5s ease-in-out infinite; 
position: relative;
  z-index: 11;
}

/* 上下にふわふわ動くアニメーション */
@keyframes moveUpDown {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-50px); 
    opacity: 1;
  }
}

/************************************
下の縦ライン　文字だけタイトル時
************************************/
.titleline02 {
    width: 1px;
    height: 60px!important;           /* ラインの長さ */
    margin: 15px auto 0;
    position: relative;
    overflow: hidden;        /* 中の動くラインがはみ出さないように */
}

/* ラインの中を走る光（動く本体） */
.titleline02::before {
    content: "";
    position: absolute;
    top: -60px;              /* 開始位置：枠の外（上） */
    left: 0;
    width: 100%;
    height: 60px;            /* 動くライン自体の長さ */
    background-color: #fff;  /* はっきりとした白 */
    
    /* アニメーション：3秒かけて上から下へ、無限に繰り返す */
    animation: lineMove 3s ease-in-out infinite;
}

/* 上下に動くアニメーションの定義 */
@keyframes lineMove {
    0% {
        top: -60px;
    }
    50% {
        top: 0;               /* 真ん中で止まる、または通過 */
    }
    100% {
        top: 60px;            /* 終了位置：枠の外（下） */
    }
}






/* --- 画像内の黒い透過帯 --- */
.toptitle_main {
  background: rgba(0, 0, 0, 0.6);
  padding: 40px 80px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.1);
}

.toptitle_main h2 {
  font-family: "Zen Old Mincho", serif;
  font-size: 42px;
  letter-spacing: 0.3em;
  color: #fff;
  margin: 0; /* 余計な余白をリセット */
}


/* --- スマホ対応（750x以下） --- */
@media screen and (max-width: 750px) {
.top_title_area01, 
  .top_title_area02, 
  .top_title_area03 {
    position: relative;
    width: 100%;
    height: 320px; /* スマホで見やすい高さ */
    clip-path: inset(0); /* 画面全体にある固定画像をこの枠内だけで切り抜く */
    background-image: none !important; /* 親要素の背景は必ず消す */
    overflow: hidden;
  }

  /* 2. 全エリア共通：背景画像レイヤーの設定 */
  .top_title_area01::before,
  .top_title_area02::before,
  .top_title_area03::before {
    content: "";
    position: fixed; /* 画面に対して画像を固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
    will-change: transform; /* スクロール時のチラつき防止 */
  }

  /* 3. 各エリアごとの画像指定（スマホ専用画像を推奨） */
  .top_title_area01::before {
    background-image: url('img/top/sub_title01_sp.png'); 
  }
  .top_title_area02::before {
    background-image: url('img/top/sub_title02_sp.png'); 
  }
  .top_title_area03::before {
    background-image: url('img/top/sub_title03_sp.png'); 
  }

  /* 4. タイトル（黒帯）が画像に隠れないように前面へ */
  .toptitle_main {
    position: relative;
    z-index: 2;
  }
	
	
.toptitle_main {
        /* 左右の余白を詰め、上下を少しスリムにする */
        padding: 25px 20px; 
        
        /* 画面幅の90%程度に収める（左右に少し背景が見えるように） */
        width: 90%;
        max-width: 340px; /* 広がりすぎないように制限 */
        margin: 0 auto;
        
        /* ボーダーを少し繊細にする */
        border: 1px solid rgba(255,255,255,0.15);
    }

    /* --- タイトル文字（スマホ用） --- */
    .toptitle_main h2 {
        /* 文字サイズを落としつつ、読みやすさを維持 */
        font-size: 22px !important; 
        
        /* 文字の間隔をスマホ用に微調整（広すぎると改行されるため） */
        letter-spacing: 0.15em; 
        
        /* 行の高さを調整して、上下の中央感を出す */
        line-height: 1.4;
        
        /* 1行で収めるための指定 */
        white-space: nowrap; 
    }

}


/************************************
かねやのこだわり
************************************/
.topcontent {
    position: relative;
    overflow: hidden; /* 背景のはみ出しをカット */
    color: #fff;
}

.topbelief_inner {
    position: relative;
    z-index: 10;
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 50px;

}

.topbelief_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 120px; /* アイテム間の余白 */
    position: relative;
}

/* PC時：2枚目を左右反転 */
.topbelief_item.reverse {
    flex-direction: row-reverse;
}

.topbelief_img {
    width: 55%;
    z-index: 2;
}

.topbelief_img img {
    width: 100%;
    height: auto;
    display: block;
}

.topbelief_txt {
    width: 38%;
    font-size: 18px;
    line-height: 2.2;
    letter-spacing: 0.05em;
    font-family: "Noto Serif JP", "Zen Old Mincho", serif;
}

/************************************
背景画像（筆跡パーツ）の設定
************************************/
/* 2つ目のアイテムの後に背景を配置 */
.topbelief_item:nth-of-type(2)::after {
    content: "";
    position: absolute;
    top: 80%;       /* 2つ目の項目の下あたりから */
    right: -150px;
    width: 600px;   /* 画像のサイズ */
    height: 500px;
    background-image: url('img/top/parts02.png'); /* 筆文字パーツ */
    background-size: contain;
    background-repeat: no-repeat;
   background-position: right center;
    z-index: 1;     /* テキストや画像の裏側 */
    pointer-events: none;
}

/************************************
スマホ対応 (750px以下)
************************************/
@media screen and (max-width: 750px) {
    .topbelief_inner {
        padding: 40px 20px;
    }

    /* 全てのアイテムを「画像が上、文字が下」に統一 */
    .topbelief_item, 
    .topbelief_item.reverse {
        flex-direction: column; /* reverseも解除して通常の縦並びに */
        margin-bottom: 80px;
    }

    .topbelief_img {
        width: 100%;
        margin-bottom: 30px;
    }

    .topbelief_txt {
        width: 100%;
        font-size: 16px;
        line-height: 1.8;
        text-align: left; /* スマホでも左寄せを維持 */
    }

    /* スマホ時の背景パーツ調整 */
    .topbelief_item:nth-of-type(2)::after {
        width: 350px;   /* スマホサイズに合わせて縮小 */
        height: 350px;
        top: 90%;       /* 位置を少し下げる */
        left: -80px;
        opacity: 0.12;  /* 可読性のため少し薄く */
    }

    /* 3つ目の項目の上部に背景を見せるためのスペース */
    .topbelief_item:nth-of-type(3) {
        padding-top: 40px;
    }
}

/************************************
お品書き
************************************/
.top_menu_area{
  position: relative;
  z-index: 10;
  max-width: 1000px;
  margin: 0 auto;
  padding:50px 20px 100px;
}

.top_menu_item01 {
  background-image: url('img/top/food_back01.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain; /* 背景がはみ出さないように調整 */
  text-align: center;       /* 中の画像を中央寄せ */
}

.top_menu_item02 {
  background-image: url('img/top/food_back02.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain; /* 背景がはみ出さないように調整 */
  text-align: center;       /* 中の画像を中央寄せ */
}

.top_menu_item01 img,
.top_menu_item02 img{
  max-width: 100%;          /* 親要素からはみ出さない */
  height: auto;
  display: inline-block;
}

.top_menu_container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
}

/* PC時のレイアウト */
.menu-item-special,
.menu-item-special02{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px; /* 文字と画像の間の余白 */
	padding: 0 0 70px 0;
	

}

.menu-text {
    flex: 1;
	padding-right: 20px;
	text-align: left;
	
}

.menu-title {
    font-size:25px;
    margin: 0;
    position: relative;
    text-align: left; 
	font-family: "Zen Old Mincho", serif;
	padding-left: 15px
}


.menu-title::before {
    content: ""; /* 必須 */
    position: absolute;
    left: 0;      /* 左端に配置 */
    top: 3px;     /* 上下の位置調整（文字の高さに合わせる） */
    bottom: 3px;  /* 上下の位置調整 */
    width: 5px;   /* ラインの太さ */
    background-color: #b89252; /* 金色（お好みの色に調整してください） */
    border-radius: 2px; /* 角を少し丸くする（お好みで） */
}
/* 説明文 */
.menu-description {
 font-size: 15px;  
    color: #ccc;
    margin: 10px 0 20px 15px; /* 左側に少し余白をあけてラインと揃える */
    text-align: left;
}

.menu-price {
    font-size:25px;
    text-align: right; 
    margin: 0 0 0 15px;
    font-family: "Zen Old Mincho", serif;
}

.menu-price span {
    font-size: 15px;    
    margin-left: 4px;    /* 数字との間のわずかな隙間 */
    font-weight: normal; /* 円は細くして数字を際立たせる */
}
/* 画像2つを横に並べる */
.menu-image-group {
    display: flex;
    gap: 10px; /* 画像同士の隙間 */
    flex: 0 0 600px; /* 画像エリアの幅を広めに確保 */
}

.image-box {
    flex: 1;
}

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

/* --- スマホ表示 (750px以下) --- */
@media (max-width: 750px) {
    .menu-item-special {
        /* column-reverse を使うことで、HTMLの順序に関わらず画像が上、文字が下になる */
        flex-direction: column-reverse; 
    }
	
    .menu-item-special02 {
        flex-direction: column;
    }

    .menu-image-group {
        flex: none;
        width: 100%;
        margin-bottom: 20px; /* 画像の下に余白 */
    }

    .menu-text {
        width: 100%;
        text-align: left;
    }
}


/************************************
店舗情報
************************************/

.top_shop_area {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
	 padding:50px 20px 100px;
}



.top_shop_photo {
    flex: 1;
    display: flex;
}


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

.top_shop_text-area {
    flex: 1;
    color: #fff;
    padding: 60px 40px;
}

.top_shop_text-content {
    width: 100%;
}

.top_shop_text-content h3{
font-size: 23px;
    margin: 0 0 20px 0;    /* 下のラインとの間隔 */
    padding-bottom: 15px;  /* 文字とラインの間の隙間 */
    font-family: "Zen Old Mincho", serif;
    letter-spacing: 0.1em;
    font-weight: normal;
    
    /* --- ここでラインを追加 --- */
    border-bottom: 1px solid #fff; /* 白い1pxの実線 */
    display: block;               /* ラインを横幅いっぱいに引くため */
	
	}

.top_shop_item{
    display: flex;       /* dt と dd を横並びにする */
    margin-bottom: 20px; /* 項目ごとの間隔 */
    line-height: 1.6;
}

.top_shop_item dt {
    width: 100px;        /* ラベル（住所、電話番号など）の幅を固定 */
    flex-shrink: 0;      /* 幅が狭まらないように固定 */
    font-weight: bold;
    font-size: 16px;
}

.top_shop_item dd {
    margin: 0;           /* デフォルトの余白をリセット */
    flex: 1;             /* 残りの幅をすべて使う */
    font-size: 16px;
}

.top_shop_item dd a {
    color: #fff;
    text-decoration: none;
}

.zip {
    display: inline-block;
    margin-bottom: 5px;
}


/* --- スマホ表示 (750px以下) --- */
@media screen and (max-width: 750px) {
    .top_shop_area {
        flex-direction: column; /* 縦並び：上が画像、下が文字 */
    }

    .top_shop_photo {
        width: 100%;
        height: 250px; /* スマホ時の画像の高さを固定 */
    }

    .top_shop_text-area {
        width: 100%;
        padding: 40px 20px;
    }
}



/************************************
GALLERY
************************************/
.gallery-section {
    padding: 60px 0;
    overflow: hidden; /* はみ出た画像を隠す */
}

/* 見出しエリア */
.gallery-header {
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}

.gallery-header h2{
    font-size: 50px;
    font-family: "Zen Old Mincho", serif; 
    margin: 0;
}


/* スライダー全体 */
.gallery-slider {
    width: 100%;
}

/* 画像が並ぶトラック */
.gallery-track {
    display: flex!important;
    width: calc(300px * 20)!important;
    animation: scroll 40s linear infinite; /* 40秒で一周、等速で無限ループ */
}

/* 画像1枚ずつの枠 */
.gallery-item {
    width: 300px!important;
    height: 300px;!important;
    flex-shrink: 0;
    padding: 0 10px!important;
}

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

/* マウスホバーで停止させる設定（お好みで） */
.gallery-track:hover {
    animation-play-state: paused;
}

/* 横に流れるアニメーションの設定 */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-300px * 10)); /* 10枚分左に動いたらリセット */
    }
}

/* スマホ対応 */
@media (max-width: 750px) {
    .gallery-item {
        width: 200px; /* スマホでは少し小さく */
        height: 200px;
    }
    .gallery-track {
        width: calc(200px * 20);
    }
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-200px * 10)); }
    }
}


/************************************
TOPページコラム
************************************/

.top_column-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    background-image: url('img/back.png'); /* セクション全体の背景 */
    background-color: #333; /* 画像がない場合の予備色 */
}

/* 見出しエリア */
.column-title-area{
    text-align: center;
    margin-bottom: 60px;
}

.column-title-area h2{
    font-size: 50px;
    font-family: "Zen Old Mincho", serif;
    color: #fff;
    margin: 0;
}

/* 動く縦ライン */
.column-line {
    width: 1px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 15px auto 0;
    position: relative;
    overflow: hidden;
}

.column-line::before {
    content: "";
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #fff;
    animation: lineMove 3s ease-in-out infinite;
}

@keyframes lineMove {
    0% { top: -60px; }
    50% { top: 0; }
    100% { top: 60px; }
}


.top_column-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.column-list {
  width: calc((100% - 40px) / 3); 
  background-color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

/* 画像エリアの親（日付の基準） */
.column_box {
    position: relative;
    aspect-ratio: 4 / 3;
}

/* 画像をズームさせた時にはみ出さないための枠 */
.img-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden; /* ここで画像を切り抜く */
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0%);
    transform: scale(1);
    transition: transform 0.6s ease, filter 0.6s ease;
}

/* ホバー時の挙動：モノクロ ＋ ズーム */
.column-list:hover .img-wrapper img,
.column-list02:hover .img-wrapper im{
    filter: grayscale(100%);
    transform: scale(1.1);
}

.column-list a{
	color: #333 !important;
	}


/* 日付ラベル */
.column-list_date {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%); /* 画像の下端に半分重なる位置 */
    background-color: #b89252;
    color: #000;
    padding: 5px 22px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 10; /* 画像より前面へ */
    white-space: nowrap;
}

/* 下半分のテキストエリア */
.column-txt {
    padding: 45px 20px 30px; /* 日付が重なるので上を広めに設定 */
    text-align: center;
    background-image: url('img/column_back.png');
    background-color: #f9f9f9; /* 背景画像がない場合の予備 */
}

.column-item-title {
    font-size: 17px !important;
    line-height: 1.8;
    color: #333;
    font-family: "Zen Old Mincho", serif;
    font-weight: normal;
    margin: 0;
}


/************************************
MOREボタン
************************************/
.column-more {
    text-align: center;
    margin-top: 60px;
}

.more-btn {
    display: inline-block;
    background-color: #b89252;
    color: #000;
    padding: 15px 80px;
    text-decoration: none;
    font-size: 18px;
    font-family: "Georgia", serif;
    transition: 0.3s ease;
}

.more-btn:hover {
    background-color: #a68541 !important;
	color: #000 !important;
    opacity: 0.9;
}

/************************************
スマホ対応 (750px以下)
************************************/
@media (max-width: 750px) {
    .top_column-container {
        flex-direction: column;
        align-items: center;
    }

    .column-list {
        width: 100%;
        max-width: 90%; /* スマホでは少し余裕を持たせる */
        margin-bottom: 40px;
    }
}


/************************************
メッセージ
************************************/
.top_message {
  position: relative;
  width: 100%;
  min-height: 60vh;
  padding: 100px 10px;
  background: url('img/top/top_back.png') no-repeat center / cover;

  display: flex;
  align-items: center; /* 縦中央 */
}

/* コンテナ */
.message_container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/* 配置 */
.message_inner {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap:80px;
  width: 100%;
}

/* キャッチ */
.message_catch {
  writing-mode: vertical-rl;
  font-size: 50px;
  letter-spacing: 0.25em; /* 少し広げる */
  line-height: 1.4;
  font-family: "Zen Old Mincho", serif;
  font-feature-settings: "palt";
}

/* 説明 */
.message_description {
  writing-mode: vertical-rl;
}

.message_description p {
  font-size: 20px;
  line-height: 2.6; /* ゆとり出す */
  text-orientation: upright;
}

/* ボタンエリア */
.message_reserve {
  padding-top: 40px; /* ← 詰めすぎない */
}


.reserve-btn {
  writing-mode: vertical-rl;
  border: 1px solid #c9a063;
 background:#c9a063; 
  color: #333;
  padding: 16px 8px;
  text-decoration: none;
	font-size: 20px;
}

/* ホバーでだけ色が入る */
.reserve-btn:hover {
  background: #b3894a !important;
  color: #000 !important;
 text-decoration: none;
}


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

  /* 1. 親要素：PC版の縦中央寄せ(align-items:center)を解除 */
  .top_message {
    display: block !important;    /* Flexを解除 */
    height: auto !important;      /* 高さを自動に */
    min-height: 0 !important;     /* PC版の 60vh を解除 */
    padding: 60px 20px !important;
    background-attachment: scroll; /* スマホでの背景挙動を安定化 */
  }

  /* 2. コンテナ：幅を整える */
  .message_container {
    width: 90% !important;        /* 横幅90%に設定 */
    margin: 0 auto !important;
    position: static !important;
  }

  /* 3. 配置：ここが一番重要です */
  .message_inner {
    display: flex !important;
    flex-direction: column !important; /* 上から下へ並べる */
    align-items: center !important;    /* 中央寄せ */
    justify-content: flex-start !important;
    writing-mode: horizontal-tb !important; /* 横書きに強制変更 */
    gap: 40px !important;              /* 各要素の間の余白をしっかり取る */
    width: 100% !important;
  }

  /* 4. キャッチコピー：縦書きを解除 */
  .message_catch {
    writing-mode: horizontal-tb !important;
    font-size: 26px !important;        /* スマホ向けのサイズ */
    letter-spacing: 0.1em !important;
    line-height: 1.4 !important;
    text-align: center !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* 5. 本文エリア：縦書きを解除 */
  .message_description {
    writing-mode: horizontal-tb !important;
    width: 100% !important;
    height: auto !important;
  }

  .message_description p {
    font-size: 15px !important;
    line-height: 1.8 !important;
    text-align: center !important;
    text-orientation: mixed !important; /* PC版のuprightを解除 */
    margin: 0 !important;
  }

  /* 6. ボタンエリア：重なりを防ぐためにpaddingではなくmarginで調整 */
  .message_reserve {
    padding-top: 0 !important;
    margin-top: 10px !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* 7. ボタン本体：縦長から横長へ */
  .reserve-btn {
    writing-mode: horizontal-tb !important;
    display: inline-block !important;
    width: 80% !important;            /* ボタンらしく横幅を持たせる */
    max-width: 300px !important;
    padding: 16px 0 !important;       /* 上下パディングで高さを出す */
    font-size: 16px !important;
    height: auto !important;
    min-height: 0 !important;
    text-align: center !important;
  }
}



/************************************
マップ
************************************/
.map-wrap {
  width: 100%;
  height: 400px; /* 好きな高さに調整OK */
  overflow: hidden;
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  
  /* モノクロ化 */
  filter: grayscale(100%) contrast(1.1) brightness(1.05);
}

/* スマホ調整 */
@media (max-width: 768px) {
  .map-wrap {
    height: 300px;
  }
}

/************************************
スマホ固定CTA
************************************/
.fixed-cta {
  display: none;
}

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

  .fixed-cta {
 position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    z-index: 9999;
  }

  .fixed-cta a {
    flex: 1;
    text-align: center;
    padding: 14px 10px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
  }

  /* 電話ボタン（落ち着いた高級系） */
  .cta-tel {
background: #5a4630;
    color: #fff;
    border-right: 1px solid rgba(255,255,255,0.2);
  }

  /* 予約ボタン（サイトの金系に合わせる） */
  .cta-reserve {
    background: linear-gradient(135deg, #d4af37, #b8963d);
    color: #000;
  }

}

/************************************
footer
************************************/

.site-footer {

  color: #fff;
  padding: 60px 20px 40px;
  text-align: center;
}

.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.footer-logo img {
  width: 120px;
  margin-bottom: 30px;
}

.footer-nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 25px;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.05em;
  transition: opacity 0.3s;
}

.footer-nav a:hover {
  opacity: 0.6;
}

.copyright {
  font-size: 12px;
  color: #ccc;
}

@media (max-width: 768px) {
  .site-footer {
    padding-bottom: 80px; /* ← CTAの高さ分あける */
  }
}


/************************************
下層ページ
************************************/
.lowerpage_content {
    position: relative;
    overflow: hidden; /* 背景のはみ出しをカット */
    color: #fff;
}


/************************************
下層ページ：見出しタイトル
************************************/

/* --- お品書きページ --- */
.menu_title_area {
  position: relative;
  width: 100%;
  height: 60vh;
  background-image: url('img/menu/title.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* --- 店舗情報ページ --- */
.shop_title_area {
  position: relative;
  width: 100%;
  height: 60vh;
  background-image: url('img/shop/title.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* --- ご予約ページ --- */
.reservation_title_area {
  position: relative;
  width: 100%;
  height: 60vh;
  background-image: url('img/reservation/title.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* --- コラムページ --- */
.column_title_area {
  position: relative;
  width: 100%;
  height: 60vh;
  background-image: url('img/column/title.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* --- お知らせページ --- */
.news_title_area {
  position: relative;
  width: 100%;
  height: 60vh;
  background-image: url('img/news/title.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

@media (max-width: 768px) {
.menu_title_area,
  .shop_title_area,
  .reservation_title_area,
  .column_title_area,
  .news_title_area {
    position: relative;
    width: 100%;
    height: 300px; /* スマホで見やすい高さ */
    clip-path: inset(0); /* 背景固定のための切り抜き */
    background-image: none !important; /* PC版の背景を消す */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  /* 2. 背景画像レイヤーの共通設定 */
  .menu_title_area::before,
  .shop_title_area::before,
  .reservation_title_area::before,
  .column_title_area::before,
  .news_title_area::before {
    content: "";
    position: fixed; /* 画面に張り付ける */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
    will-change: transform;
  }

  /* 3. 各ページごとの背景画像指定（スマホ用があれば _sp に差し替え推奨） */
  .menu_title_area::before {
    background-image: url('img/menu/title_sp.png'); 
  }
  .shop_title_area::before {
    background-image: url('img/shop/title_sp.png'); 
  }
  .reservation_title_area::before {
    background-image: url('img/reservation/title_sp.png'); 
  }
  .column_title_area::before {
    background-image: url('img/column/title_sp.png'); 
  }
  .news_title_area::before {
    background-image: url('img/news/title_sp.png'); 
  }
	
	
	}

/************************************
下層ページ：見出しタイトル
************************************/
.lowerpage_title_main {
  background: rgba(0, 0, 0, 0.6);
  padding: 40px 80px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.1);
}

.lowerpage_title_main h1,
.lowerpage_title_main p{
  font-family: "Zen Old Mincho", serif;
  font-size: 42px;
  letter-spacing: 0.3em;
  color: #fff;
  margin: 0; /* 余計な余白をリセット */
}


/* --- スマホ対応（750x以下） --- */
@media screen and (max-width: 750px) {
.lowerpage_title_main {
position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6);
    padding: 25px 20px;
    width: 90%;
    max-width: 340px;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
.lowerpage_title_main h1,
.lowerpage_title_main h2, 
.lowerpage_title_main p{
font-size: 22px !important;
    letter-spacing: 0.15em;
    white-space: nowrap;
  }


}

/* 下層ページ見出しエリア */
.lowerpage_title-area{
    text-align: center;
    margin:50px auto 10px auto;
}

.lowerpage_title-area h2{
    font-size: 40px;
    font-family: "Zen Old Mincho", serif;
    color: #fff;
    margin: 0;
}

/* 動く縦ライン */
.lowerpage_line {
    width: 1px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 15px auto 0;
    position: relative;
    overflow: hidden;
}

.lowerpage_line::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: #fff;
    animation: lineMove 3s ease-in-out infinite;
}


/************************************
コンタクトエリア
************************************/
.contact_base{
  position: relative;
  width: 100%;
  min-height: 60vh; 
  padding: 50px 0;
  background: url('img/contact_back.png') no-repeat center / cover;

  display: flex;
  align-items: center;
  justify-content: center;
}

.contact_base::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}

.contact_base > * {
  position: relative;
  z-index: 2;
}

.contact_area {
  max-width: 1000px;
  width: 100%; 
  margin: 0 auto;
text-align: center;
  position: relative;
}

.contact_area p{
	padding:0;
	margin: 0 auto;
	text-align: center;
	font-size: 20px;
	
	}

.contact_area .contact_tel{
	padding:10px 0 30px 0;
	margin:0 auto;
	text-align: center;

	}


.contact_area .contact_tel a{
	color: #fff;
	font-size: 30px;
	text-align: center;
	text-decoration: none;
	}


/* コンタクト見出しエリア */
.contact_title-area{
    text-align: center;
    margin-bottom: 30px;
}

.contact_title-area h2{
    font-size: 50px;
    font-family: "Zen Old Mincho", serif;
    color: #fff;
    margin: 0;
}

/* 動く縦ライン */
.contact_line {
    width: 1px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 15px auto 0;
    position: relative;
    overflow: hidden;
}

.contact_line::before {
    content: "";
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #fff;
    animation: lineMove 3s ease-in-out infinite;
}


/************************************
お品書きページ
************************************/

.menu-area {
    position: relative;
    z-index: 10;
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px 50px;

}

.menu_container {
  display: flex;
  flex-wrap: wrap;    /* 画面が狭くなったら折り返す */
  gap: 40px;          
  justify-content: center;
  padding: 50px 0;
  color: #fff;               /* 文字色を白に */
}

.menu_item {
width: calc(50% - 20px); 
  text-align: center;
  box-sizing: border-box; 
}

.menu_item h3 {
  position: relative;
  display: inline-block; /* 線を文字幅に合わせる */
  margin: 20px 0 10px;
  padding-bottom: 8px;
  font-size: 1.5rem;
  color: #fff;
}

.menu_item h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px; /* 線の長さ */
  height: 2px;
  background: #fff; 
}

.menu_item p {
  font-size: 0.9rem;
  color: #ccc;
  margin-bottom: 8px;
}

.menu_item .menu-price,
.menu_item02 .menu-price{
  display: block;    
  font-weight: bold;
  font-size: 1.1rem;
  color: #fff;
}



/* --- 一品料理 --- */
.menu_item02 {
width: calc(31% - 10px); 
  text-align: center;
  box-sizing: border-box; 
}

.menu_item02 h3 {
  position: relative;
  display: inline-block; /* 線を文字幅に合わせる */
  margin: 20px 0 10px;
  padding-bottom: 15px;
  font-size: 1.2rem;
  color: #fff;
}

.menu_item02 h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px; /* 線の長さ */
  height: 2px;
  background: #fff; 
}


/* --- ドリンク --- */
.menu_item03 {
width: calc(22% - 10px); 
  text-align: center;
  box-sizing: border-box; 
}

.menu_item03 h3 {
  position: relative;
  display: inline-block; /* 線を文字幅に合わせる */
  margin: 20px 0 10px;
  padding-bottom: 15px;
  font-size: 1rem;
  color: #fff;
}

.menu_item03 h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px; /* 線の長さ */
  height: 2px;
  background: #fff; 
}

.menu_item03 .menu-price{
  display: block;    
  font-weight: bold;
  font-size:0.9rem;
  color: #fff;
}

/* --- 写真の枠と白線アニメーション --- */
.photo_waku {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  box-sizing: border-box;
  background: #1a1a1a; /* 背景が暗いと白線が見えやすくなります */
}

.photo_waku img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像の歪み防止 */
  display: block;
}

/* 共通設定 */
.photo_waku::before,
.photo_waku::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 1px solid transparent; 
  box-sizing: border-box;
}

/* 上と右を担当（2秒かけて描き、2秒休む設定） */
.photo_waku::before {
  top: 0; left: 0;
  animation: loop-top-right 4s infinite linear;
}

/* 下と左を担当（2秒遅れて開始し、描き終わったら消える） */
.photo_waku::after {
  bottom: 0; right: 0;
  animation: loop-bottom-left 4s infinite linear 2s;
}

/* --- アニメーション --- */

/* 0-25%で横、25-50%で縦を描画。50%以降は透明にしてバトンタッチ */
@keyframes loop-top-right {
  0% { width: 0; height: 0; border-top-color: #fff; opacity: 1; }
  25% { width: 100%; height: 0; border-top-color: #fff; border-right-color: transparent; opacity: 1; }
  50% { width: 100%; height: 100%; border-top-color: #fff; border-right-color: #fff; opacity: 1; }
  50.1%, 100% { opacity: 0; } 
}

@keyframes loop-bottom-left {
  0% { width: 0; height: 0; border-bottom-color: #fff; opacity: 1; }
  25% { width: 100%; height: 0; border-bottom-color: #fff; border-left-color: transparent; opacity: 1; }
  50% { width: 100%; height: 100%; border-bottom-color: #fff; border-left-color: #fff; opacity: 1; }
  50.1%, 100% { opacity: 0; }
}

/* --- スマホ用（768px以下）の設定 --- */
@media screen and (max-width: 768px) {
  
  /* メインのメニュー（コースなど）は1カラム */
  .menu_item {
    width: 100%;
    margin-bottom: 20px;
  }

  /* 一品料理などは2カラム */
  .menu_item02 {
    width: calc(46% - 10px); 
  }

  /* スマホでの文字サイズ微調整 */
  .menu_item02 h3 {
    font-size: 1rem;
    padding-bottom: 10px;
  }
  
  .menu_item02 p {
    font-size: 0.8rem;
  }
	
 /* ドリンクスメニューは3カラム */
  .menu_item03 {
    /* 隙間（gap）を考慮して30%より少し小さく設定 */
    width: calc(30% - 10px); 
  }
  .menu_item03 h3 {
    font-size: 0.8rem;
    padding-bottom: 10px;
  }
  
  .menu_item03 p {
    font-size: 0.5rem;
  }
	

}



/************************************
店舗情報
************************************/
.shop_info {
  padding: 80px 0;
  max-width: 800px;
	width:80%;
  
  margin: 0 auto;
	text-align: center;
}

/* 各項目 */
.shop_info dl {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
}

/* タイトル */
.shop_info dt {
  width:200px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* 内容 */
.shop_info dd {
  width: calc(100% - 200px);
  margin: 0;
  line-height: 1.8;
  text-align: left;
}

/* 電話番号だけ少し強調 */
.shop_info dd a,
.shop_info dd {
  text-decoration: none;
}

.shop_info dl:nth-child(3) dd {
  font-size: 1.1rem;
  font-weight: bold;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .shop_info {
    padding: 50px 15px;
  }

  .shop_info dl {
    flex-direction: column;
    padding: 16px 0;
  }

  .shop_info dt {
    width: 100%;
    margin-bottom: 5px;
    font-size: 0.85rem;
  }

  .shop_info dd {
    width: 100%;
    font-size: 0.75rem;
	  text-align: center;  
  }
}

/************************************
コラム
************************************/
.column_layout {
  display: flex;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
  padding:50px 20px 100px 20px;
}

/* メイン */
.column_main {
  flex: 1;
}

.entry-header{
	padding:0;
	margin:20px auto;
	text-align:center;
		}

.column_detail_area h1{
padding:0 0 20px 0;
margin:0;
text-align:left;
font-size: 24px;
border-bottom: solid 3px #fff;	
	}

/* 日付ラベル */
.column-date {
    color: #fff;
    font-size: 12px;
	text-align: left;
	 padding:0 0 20px 0;
}

.column_besearea{
	text-align: left;
	 padding:50px 0 20px 0;
	
	}

/* サイドバー */
.column_sidebar {
  width: 260px;
}

.column_list_area {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start; /* ←これ重要 */
}

/* 各記事 */
.column-list02 {
  width: calc((100% - 20px) / 2);
  background-color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.sidebar_box {
  background: #f7f7f7;
  padding: 20px;
}

.sidebar_title {
  font-size: 18px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
color: #333;
}

.category_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category_list li {
  margin-bottom: 10px;
}

.category_list a {
  text-decoration: none;
  color: #333;
}

.category_list a:hover {
  opacity: 0.7;
}

/* =========================
  スマホ対応
========================= */
@media screen and (max-width: 768px) {

  .column_layout {
    flex-direction: column;
  }

  .column_sidebar {
    width: 100%;
  }

  .column-list02 {
    width: 100%;
  }
}