/* 基本設定 */
:root {
    --main-color: #2c2c2c; /* 墨色 */
    --accent-color: #a68b5b; /* 金泥色 */
    --bg-light: #f9f8f6; /* 生成り色 */
    --text-color: #333;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* 【修正】より上品な「しっぽり明朝」に変更 */
    font-family: 'Shippori Mincho', serif;
    color: var(--text-color);
    line-height: 1.8;
    background-color: #fff;
    overflow-x: hidden; /* 横スクロール防止 */
}

body.is-initialized #header,
body.is-initialized .hero-content {
    opacity: 1;
}

body.is-initialized .slider-wrapper {
    opacity: 1;
}
/* ページ遷移用のフェードオーバーレイ */
/* ページ遷移用のフェードオーバーレイ（黒バージョン） */
/* ページ遷移用のフェードオーバーレイ */
/* ページ遷移用のフェードオーバーレイ（黒バージョン） */
.page-fade {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; /* ★ここを黒に変更 */
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* フェード中のみ幕を表示 */
body.is-fading .page-fade {
    opacity: 1;
    pointer-events: auto;
}
a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

/* フェードインのベース設定 */
.reveal {
    opacity: 0; /* 最初は透明 */
    transition: opacity 1.5s ease-out; /* 1.5秒かけてじわっと出す */
    pointer-events: none; /* 表示されるまでクリック不可にする（念のため） */
}

/* 画面に入った時に付与されるクラス */
.reveal.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* 必要に応じて：少しだけ遅らせたい要素用（親子でズラす時など） */
.delay-500 { transition-delay: 0.5s; }
.delay-1000 { transition-delay: 1.0s; }

/* ヘッダー */
#header {
    position: fixed;
    width: 100%;
    height: 90px; /* ★デフォルトの高さ */
    display: flex;
    align-items: center;
    z-index: 100;
    /* transitionに「height」を追加して、高さの変化を滑らかにします */
    transition: background-color 0.5s, box-shadow 0.5s, height 0.5s, opacity 2s ease-in-out;
    opacity: 0;
}

/* 【追加】初期状態：透過ヘッダー */
.header-transparent {
    background-color: rgba(255, 255, 255, 0);
    border-bottom: none;
    color: #fff; /* スライド画像の上なので白文字 */
}

/* 【追加】スクロール後：白背景ヘッダー（JSでクラスを切り替え） */
.header-white {
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid #eee;
    color: var(--main-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    
    height: 70px !important; 
}
/* ロゴのサイズも連動して少し小さくする場合 */
.header-white .logo {
    font-size: 1.3rem; /* 1.6remから縮小 */
    transition: font-size 0.5s;
}

.header-white .logo span {
    font-size: 0.8rem !important; /* 1remから縮小 */
    transition: font-size 0.5s;
}

/* ナビゲーションの間隔も微調整（必要であれば） */
.header-white .nav li {
    font-size: 0.85rem;
    transition: font-size 0.5s;
}
.header-inner {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    /* フレックスボックスを有効にする */
    display: flex;
    /* 垂直方向の中央で揃える（これが肝です） */
    align-items: center;
    
    /* 既存のスタイル（適宜調整してください） */
    font-size: 1.6rem; /* 「北間楼」側のサイズ */
    letter-spacing: 0.3em;
    font-weight: normal;
}

.logo span {
    /* 「加賀料理」と「北間楼」の間の余白を調整 */
    margin-right: 0.5em;
    /* 行の高さをリセットしてズレを防ぐ */
    line-height: 1;
}

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

.nav li {
    margin-left: 30px;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
}

.nav-btn a {
    background: var(--main-color);
    color: #fff !important; /* 常に白文字 */
    padding: 10px 25px;
}

.nav-btn a:hover {
    background: var(--accent-color);
}

/* 透過ヘッダー時のホバー色 */
.header-transparent .nav a:hover:not(.nav-btn a) {
    color: var(--accent-color);
}

/* --- スライドショー全体のフェードイン（黒暗転から） --- */

.hero-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #000; /* 背景を黒に固定 */
}

/* スライドを包む要素に、最初は透明にしておく設定を追加 */
/* --- 背景動画の設定 --- */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* 一番背面 */
    overflow: hidden;
    opacity: 0.5;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画面いっぱいにクロップして表示 */
    
}
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

/* 【追加】動画の上の黒いフィルタ */
.video-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 40%の濃さの黒 */
    z-index: 1; /* ビデオより上に配置 */
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* スライドショーの設定を微調整 */
/* --- スライドショーの設定を修正 --- */
.slider-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 動画（z-index:0）より上 */
    opacity: 0;
    
    /* 【重要】ここを不透明な色で塗りつぶす */
    /* 写真の雰囲気に合わせて #fff（白）か #000（黒）を選んでください */
    background-color: #000; 
    
    transition: opacity 4s ease-in-out;
    transition-delay: 2s;
}

/* スライド自体の背景を少し透過させる（動画をうっすら透かしたい場合） */
/* もし写真をハッキリ見せたい場合は、rgbaの数値を 1 に近づけてください */
.slide::after {
    display: none; /* 動画を透かさないために一旦オフ */
}

/* ヒーローエリア全体の背景色を黒から「水」を連想させる色へ */
.hero-slider {
    background-color: #0c1a25; /* 動画が読み込まれるまでの待機色 */
}

/* JSでこのクラスがついた瞬間にフェードインが始まる */
.slider-wrapper.is-loaded {
    opacity: 1;
}

/* --- 既存の .slide 設定 --- */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 1;
    transition: opacity 2s ease-in-out;
    
    transform: scale(1.2);
    
    /* 【変更】60秒に短縮。これでスピードがさらに約1.3倍になります */
    animation: panRightToLeft 60s linear infinite;
    background-color: #000;
}

/* 【重要】60秒を3枚で均等に分割（20秒ずつズラす） */
/* これにより、どの画像が表示されても流れる位置が自然に繋がります */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: -6s; }  /* 1枚分マイナス */
.slide:nth-child(3) { animation-delay: -12s; } /* 2枚分マイナス */

.slide.is-active {
    opacity: 1;
    z-index: 2;
}

/* アニメーションの内容（移動量は 9% を維持） */
@keyframes panRightToLeft {
    0% {
        transform: scale(1.2) translateX(9%);
    }
    100% {
        transform: scale(1.2) translateX(-9%);
    }
}

/* 【追加】画像を少し暗くして文字を見やすくするオーバーレイ */
.slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 20%の黒 */
}


/* キャッチコピー */
.hero-content {
    position: absolute;
    /* 画面の中央付近に置く場合 */
    top: 32%; 
    left: 50%;
    transform: translateX(-50%); /* 左右の中央揃えのみ維持 */
    z-index: 10;
    
    /* フェードイン用の設定（前回追加分） */
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.vertical-text {
    writing-mode: vertical-rl;
    font-size: 1.8rem;
    letter-spacing: 0.2em;
    color: #fff;
  
    /* 【追加】頭揃え（上揃え）を確実にする */
    text-align: start; 
    
    /* もし複数行ある場合、行の高さ（横方向の間隔）を調整 */
    line-height: 2;
    max-height: 60vh;
}
@media (max-width: 1400px) {
.vertical-text {
    writing-mode: vertical-rl;
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    color: #fff;
  
    /* 【追加】頭揃え（上揃え）を確実にする */
    text-align: start; 
    
    /* もし複数行ある場合、行の高さ（横方向の間隔）を調整 */
    line-height: 2;
    max-height: 60vh;
}
}

.vertical-text img{height: 50%;padding-left:30px;margin-top:-15px;}
/* セクション共通 */
.section {
    padding: 80px 20px;
    text-align: center;
}

.bg-light {
    background-color: var(--bg-light);
}

.section-title {
    font-size: 2rem;
    margin-bottom: 60px;
    letter-spacing: 0.4em;
    font-weight: normal;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* グリッドレイアウト */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background: #fff;
    padding: 50px;
    border: 1px solid #e0e0e0;
}

/* フッター */
.footer {
    padding: 50px;
    text-align: center;
    background: var(--main-color);
    color: #fff;
    font-size: 0.8rem;
}

/* --- コンセプトセクション専用スタイル --- */
#concept {
    /* --- 多重背景の設定（上に重ねる順に記述） --- */
    background-image: 
        url('../img/gold.png'),  /* 【最上層】左上の金箔 */
        url('../img/gold2.png'), /* 【中層】右下の金箔 */
        url('../img/back.jpg');   /* 【下層】ベースの背景 */
        
    /* --- 各画像ごとのサイズ設定 --- */
    background-size: 
        35%,    /* gold.png: 幅30% */
        35%,    /* gold2.png: 幅30% */
        cover;  /* back.jpg: 全面 */
        
    /* --- 全てリピートなし --- */
    background-repeat: 
        no-repeat, 
        no-repeat, 
        no-repeat;
        
    /* --- 各画像の配置場所 --- */
    background-position: 
        top left,     /* gold.png: 左上 */
        bottom right, /* gold2.png: 右下 */
        center;       /* back.jpg: 中央 */

    /* コンテンツの読みやすさを守る設定 */
    position: relative;
    z-index: 1;
    overflow: hidden; /* 金箔がはみ出さないように */
}

/* 背景を少し明るく、または質感を出すためのオーバーレイ（必要であれば） */

#concept .container {
    max-width: 900px; /* 少し広めに取る */
    margin: 0 auto;
    padding: 0 40px 0 100px;
}

.concept-wrapper {
    display: flex; /* 左右を横並びにする */
    justify-content: center; /* 中央に寄せる */
    
    /* 【修正】flex-start から center に変更 */
    align-items: center; 
    
    gap: 80px; /* 左右の余白 */
    margin-top: 80px;
    margin-bottom: 80px;
}

/* --- 左側（縦書き）のスタイル --- */
.concept-left {
    flex: 0 0 auto;
        display: flex;
    flex-direction: column;
    
    /* 【修正】中身（ロゴとH2）も中央で揃うように */
    align-items: center;
    justify-content: center; 
}

/* 仮のロゴ（画像がある場合は img タグに置き換えてください） */
.concept-logo-placeholder {
    display: flex;
    gap: 5px;
    margin-bottom: 40px; /* キャッチコピーとの間隔 */
}
.concept-logo-placeholder img{width: 100px;}

/* 縦書きのキャッチコピー（H2） */
.concept-left .section-title {
    writing-mode: vertical-rl;
    font-size: 2.2rem;
    letter-spacing: 0.5em;
    line-height: 1.6;
    font-weight: normal;
    
    
    margin: 0;
    color: var(--main-color);
}

/* --- 右側（本文）のスタイル --- */
/* --- 右側（本文）のスタイル --- */
.concept-right {
    flex: 1;
    max-width: 700px;
    text-align: left;
    margin: 0;
    
    /* 【追加】念のため中身の高さ方向も中央に寄せる */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.concept-right p {
    font-size: 1.1rem; /* 読みやすいサイズ */
    line-height: 2.2; /* 行間を広げて上品に */
    color: #444; /* 少し柔らかい墨色 */
    margin-bottom: 2em; /* 段落ごとの間隔 */
    letter-spacing: 0.05em; /* ほんの少し文字間を広げる */
}

.concept-right p:last-child {
    margin-bottom: 0;
}

/* --- レスポンシブ対応（スマホ表示） --- */
@media (max-width: 768px) {
    .concept-wrapper {
        flex-direction: column; /* 縦並びにする */
        align-items: center;
        gap: 50px;
    }
    
    .concept-left .section-title {
        font-size: 1.8rem;
        letter-spacing: 0.3em;
    }
    
    .concept-right {
        text-align: left; /* スマホでは本文も中央揃えにするのが一般的 */
  
    }
    .menu-page .concept-right {
  
        padding:0 20px;
    }
    .concept-right br {
        display: none;/* スマホでは本文も中央揃えにするのが一般的 */
    }
    
}


/* --- About セクションのスタイル --- */
#about {
    /* --- 多重背景の設定 --- */
    background-image: 
        url('../img/gold3.png'), /* 【上層】右上の金箔 */
        url('../img/back.jpg');  /* 【下層】ベースの背景 */
        
    /* --- サイズ設定 --- */
    background-size: 
        35%,   /* gold3.png: 幅35% */
        cover; /* back.jpg: 全面 */
        
    /* --- リピートなし --- */
    background-repeat: 
        no-repeat, 
        no-repeat;
        
    /* --- 配置場所 --- */
    background-position: 
        top right, /* gold3.png: 右上固定 */
        center;    /* back.jpg: 中央 */

    /* background-attachment: fixed; お好みで背景固定 */

    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 80px 20px;
}
.about-wrapper {
    display: flex;
    align-items: center;
    /* 【変更】中央寄せ(center)をやめ、左詰めにする。
       その代わり、margin: 0 auto; でラッパー自体を中央に置く */
    justify-content: flex-start; 
    
    /* 画像と文字の間の距離を「60px」に完全固定 */
    gap: 60px; 
    
    max-width: 1200px;
    margin: 0 auto;
    width: 100%; /* 幅を確実に1200px以内に収める */
}

/* --- 画像エリア：こちらを大きくする --- */
.about-image {
    /* 幅を少し広げて、コンテナ内の隙間を埋める */
    flex: 0 0 40%; 
    overflow: hidden;
    position: relative;
    background: #f9f8f6;
    border: 1px solid #eee;
    aspect-ratio: 2 / 3; 
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 縦長の枠に合わせて画像を切り抜く */
    display: block;
    transform: scale(1.1); 
    transition: transform 4s cubic-bezier(0.33, 1, 0.68, 1);
}

/* 親要素（about-image）が画面に入って is-active がついた時の動き */
.about-image.is-active img {
    /* 元のサイズ（または別の位置）に戻すことで「動いている」ように見せる */
    transform: scale(1.0);
}
/* テキストエリア */
.about-text-content {
    /* 画像が55% + gapが60px なので、残りのスペースを自動で埋める */
       text-align: left;
    /* 文字の横幅が広がりすぎないように制限（これで間延びを防ぐ） */
    max-width: 580px; 
}

.about-label {
    font-family: 'Times New Roman', serif;
    font-size: 1rem;
    color: var(--accent-color);
    letter-spacing: 0.3em;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.about-title {
    position: relative; /* 画像の配置基準にする */
    font-size: 2.2rem;
    font-weight: normal;
    margin-bottom: 40px;
    line-height: 1.6;
    letter-spacing: 0.2em;
    color: var(--main-color);
    
    /* 【重要】画像の幅（例えば 100px）の半分（50px）だけ、
       1行目の文字を右にずらして、画像と重ねるスペースを作る */
    text-indent: 50px; 
}

/* 【追加】重ねるSVG画像のスタイル */
.title-decor {
    position: absolute; /* 絶対配置 */
    /* タイトルの「左上」を基準にする */
    top: -10px;  /* 文字の頭より少し上に飛び出させる（お好みで調整） */
    left: 0px; /* 文字の左端より外側に出す（お好みで調整） */
    
    width: 80px; /* 画像の幅（文字と被る量を決める基準） */
    height: auto;
    
    /* 文字の下（背面）に配置する */
    z-index: -1; 
    
    /* 文字とのコントラストを調整（必要であれば） */
    opacity: 0.8; /* 少し透けさせる */
}

.about-text-content .content-box p {
    font-size: 1.1rem;
    line-height: 2;
    color: #555;
    margin-bottom: 1.5em;
}

/* モバイル対応（スマホでは縦長画像が大きすぎることがあるので調整） */
@media (max-width: 768px) {
    .about-wrapper {
        flex-direction: column; 
        gap: 40px;
    }
    .about-image {
        width: 100%; /* スマホでは少し幅を絞る */
        aspect-ratio: 3 / 3; /* スマホ用には少し短めの縦長 */
    }
    .about-text-content {
        width: 100%;
        max-width: none;
        text-align: left;
    }
    .about-title {
        font-size: 1.8rem;
        /* スマホでは文字と重ねない、または小さく重ねる */
        text-indent: 0; 
        text-align: center;
    }
    
    .title-decor {
        /* スマホではタイトルの「真上」中央に配置する */
        position: relative;
        top: 0;
        left: 0;
        display: block;
        margin: 0 auto 20px; /* 中央寄せ、下に余白 */
        width: 80px;
    }
}


/* --- お料理セクションのスタイル --- */
#menu {
    /* 背景は back.jpg のみ */
    background-image: url('../img/back.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 80px 20px;
}
#menu-list .container {  max-width: 1300px;
}

#menu .container {
    position: relative;
    z-index: 2; /* オーバーレイより上へ */
  
}

/* --- お料理セクションのヘッダー（モニター幅 80%） --- */
/* --- お料理セクションのヘッダー --- */
.menu-header {
    /* 1. 幅を画面いっぱいに */
    width: 100vw;
    
    /* 2. 親要素(.container)を無視して左端に強制移動 */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    
    /* 3. 画面端まで画像が来るので角丸を0にする */
    border-radius: 0; 
    
    margin-bottom: 80px;
    padding: 100px 80px;
    
    /* --- 多重背景の設定：上に重ねる順に記述 --- */
    background-image: 
        url('../img/gold.png'),  /* 【最上層】左上の金箔 */
        url('../img/gold2.png'), /* 【中層】右下の金箔 */
        url('../img/photo.jpg');  /* 【下層】ベースの背景 */

    /* --- 各画像ごとのサイズ設定 --- */
    background-size: 
        35%,    /* gold.png */
        35%,    /* gold2.png */
        cover;  /* photo.jpg */

    /* --- 各画像のリピート設定 --- */
    background-repeat: 
        no-repeat, 
        no-repeat, 
        no-repeat;

    /* --- 各画像の配置場所 --- */
    background-position: 
        top left,     /* gold.png: 左上 */
        bottom right, /* gold2.png: 右下 */
        center;       /* photo.jpg: 中央 */
    
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* テキストの箱を右側に寄せる */
    
    position: relative;
    overflow: hidden;
}

.menu-header .section-title {
    position: relative; /* 【重要】これを入れることで、画像がタイトルの左上を基準に動くようになります */
    display: inline-block; /* 文字の幅に合わせる（これがないと横いっぱいに広がって基準が左端になります） */
    
    color: #fff;
    font-size: 2.8rem;
    margin-bottom: 20px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.6);
    z-index: 2; /* 文字を画像より上に */
}
.menu-header .title-decor {
    position: absolute; /* 絶対配置 */
    
    /* タイトルの左上を基準に微調整 */
    top: 0px;   /* 文字の少し上へ */
    left: -40px;  /* 文字の左側に半分はみ出させる */
    
    width: 80px;  /* 画像のサイズ */
    height: auto;
    
    z-index: -1;  /* 文字の背面へ */
    opacity: 0.7; /* 少し透かして馴染ませる */
    pointer-events: none; /* 画像が文字のクリックを邪魔しないように */
}
/* 【追加】テキストをまとめる箱の設定 */
.menu-text-wrapper {
    width: 100%;
    max-width: 45%; /* 本文の長さに合わせて調整 */
    text-align: left; /* 中身はすべて左揃え */
}

/* 各要素の余白リセット（左揃えを際立たせるため） */
.menu-header .section-title {
    color: #fff;
    font-size: 2.8rem;
    margin-bottom: 30px;
    margin-top: 0;
    text-align: left; /* 確実に左揃え */
    letter-spacing: 0.1em; /* タイトルの字間を少し詰めると本文と揃いやすいです */
    text-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

.menu-header .about-label {
    display: block; /* 確実に一行占有させる */
    color: var(--accent-color);
    margin-bottom: 10px;
    text-align: left;
}

.menu-header .menu-intro {
    color: #fff;
    line-height: 2.2; /* 行間を広げて上品に */
    font-size: 1.1rem;
    text-align: left; /* 確実に左揃え */
    margin: 0; /* マージンをリセットしてズレを防止 */
}
@media (max-width: 768px) {
    .menu-header {
        align-items: center;
        padding: 60px 20px;
    }
    .menu-text-wrapper {
        text-align: center;
    }
    .menu-header .section-title,
    .menu-header .menu-intro {
        text-align: left;
    }
}
/* グリッドレイアウト */
.menu-grid {
    display: flex;       /* gridからflexに変更 */
    flex-wrap: wrap;     /* 折り返しを許可 */
    justify-content: center; /* ★要素を中央に寄せる */
    gap: 60px 40px;      /* 縦の隙間 60px、横の隙間 40px */
    text-align: left;
    max-width: 1100px;   /* 全体の幅を少し絞るとバランスが良くなります */
    margin: 0 auto;
}



.menu-thumb {
    width: 100%;
    aspect-ratio: 13 / 9; /* または 3 / 2 などお好みの比率 */
    overflow: hidden;      /* ★必須：拡大した画像が枠からはみ出ないようにする */
    margin-bottom: 25px;
}

.menu-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    /* 初期状態：1.1倍に拡大 */
    transform: scale(1.1);
    /* 動きの設定：4秒かけてゆっくり戻る（about-imageと同じ設定） */
    transition: transform 4s cubic-bezier(0.33, 1, 0.68, 1);
}

/* menu-itemにrevealが付いているので、
   画面に入って is-active クラスが付与された瞬間に
   中の画像を scale(1.0) に戻す
*/
.menu-item.is-active .menu-thumb img {
    transform: scale(1.0);
}

/* テキスト部分 */
.menu-info h3 {
    font-size: 1.4rem;
    font-weight: normal;
    letter-spacing: 0.2em;
    margin-bottom: 15px;
}

.price {
    color: var(--accent-color);
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-family: 'Times New Roman', serif;
}

.desc {
    font-size: 0.9rem;
    color: #666;
    padding: 0 20px;
    line-height: 1.8;
}

/* レスポンシブ対応 */
@media (max-width: 992px) {
    .menu-grid {
        grid-template-columns: 1fr; /* スマホでは縦1列 */
        max-width: 500px;
        margin: 0 auto;
    }
}

/* 外枠のコンテナ */
.dish-item {
    display: flex;
    justify-content: space-between; /* 左右に振り分け */
    align-items: flex-start;        /* 上揃え */
    width: 100%;
    max-width: 900px;              /* お好みで調整 */
    margin: 0 auto;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 下線（写真に重ねる場合は白系が見やすい） */
}

/* 料理名のエリア */
.dish-name {
    flex: 0 0 30%; /* 幅を30%に固定 */
}

.dish-name h3 {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.1em;color: #696C5C;
}

/* 説明文のエリア */
.dish-description {
    flex: 0 0 65%; /* 幅を65%に固定（余白を5%確保） */
}

.dish-description p {
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
    text-align: justify; /* 両端揃えできれいに見せる */
}

/* スマホ表示の時は縦に並べる（レスポンシブ） */
@media (max-width: 768px) {
    .dish-item {
        flex-direction: column;
    }
    .dish-name, .dish-description {
        flex: 0 0 100%;
        width: 100%;
    }
    .dish-name {
        margin-bottom: 10px;
    }
}

.photo-gallery {
    display: flex;
    justify-content: space-between; /* 均等に並べる */
    gap: 20px;                     /* 写真同士の隙間 */
    width: 100%;
    margin: 40px auto;             /* 上下に余白を持たせて中央配置 */
    max-width: 1500px;
}

.photo-item {
    flex: 1;                       /* すべて同じ幅にする */
}

.photo-item {
    flex: 1;
    overflow: hidden;    /* はみ出し防止 */
    aspect-ratio: 1 / 1; /* 正方形維持 */
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    
    /* 初期状態：少し拡大しておく */
    transform: scale(1.1); 
    /* 既存の .about-image と同じ動きの設定 */
    transition: transform 4s cubic-bezier(0.33, 1, 0.68, 1);
}

/* 親要素の .photo-gallery に .reveal がついており、
   画面に入った時に .is-active が付与されるので、それをトリガーにする
*/
.photo-gallery.is-active .photo-item img {
    transform: scale(1.0);
}
/* スマホ表示：2枚ずつ2列にする設定 */
@media (max-width: 600px) {
    .photo-gallery {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2列 */
        gap: 10px;
    }
}
.btn-container {
    display: flex;
    justify-content: center; /* 横中央 */
    width: 100%;
    margin: 80px 0;         /* 背景が大きくなる分、上下余白も少し広げると綺麗です */
}

.btn-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* --- 背景を大きくするためにサイズを調整 --- */
    width: 400px;            /* 320pxから大幅にアップ */
    height: 100px;           /* 高さを出して背景の存在感を強調 */
    
    /* 背景画像の設定 */
    background-image: url('../img/btnback-01.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto; /* 横幅いっぱいに広げ、高さは自動 */
    
    /* --- 文字の大きさはそのままキープ --- */
    color: #fff;
    text-decoration: none;
    font-family: "Sawarabi Mincho", serif;
    font-size: 1.2rem;       /* サイズ指定を維持 */
    font-weight: 500;
    letter-spacing: 0.2em;   /* 高級感を出すため少し字間を広げました */
    
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ホバー演出 */
.btn-menu:hover {
    transform: scale(1.02); /* 少しだけ全体が大きくなる演出 */
    opacity: 0.9;
}


.contact-section {
    padding: 80px 0;
    /* --- 背景を back.jpg のみに設定 --- */
    background-image: url('../img/back.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 背景が暗めの写真の場合に備え、念のため色を指定 */
    background-color: #f9f6f2; 

    position: relative;
}

/* 1. コンテナを横並びにする */
.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;

    /* 追加：横並びと中央揃え */
    display: flex;
    align-items: center; /* 高さを中央で揃える */
    justify-content: center;
}


.contact-section .section-title {
    font-size: 2rem;
    margin-top: 30px;
    margin-bottom: 30px;
    letter-spacing: 0.4em;
    font-weight: normal;position: relative;padding-left: 50px;
    z-index: 3;
}

.contact-text {
    line-height: 2;
    margin-bottom: 60px;
    color: #333;
    font-weight: 500; /* 写真の上で見にくい場合は少し太く */
    line-height: 2.2;
    font-size: 1.1rem;
    text-align: left;
    margin: 0;
}

/* 2. 左側のテキストボックス（幅を広く） */
.contact-left {
    background-color: #fff;
    padding: 80px 60px; /* 左右の余白を少し広げてゆったりと */
    flex: 0 0 75%;      /* 幅を65%に拡大 */
    z-index: 2;
    
    /* 右側の画像に深く被せる設定 */
    margin-right: -10%; 

}

/* 3. 右側の画像エリア（幅を狭く） */
.contact-right {
    flex: 0 0 40%;      /* コンテナからはみ出すように設定するか、
                           全体のバランスを見て40〜45%程度に */
    z-index: 1;
}


/* 4. 画像自体の設定（以前のobject-fitアニメーションを継続） */
.contact-right .about-image {
    width: 100%;
    overflow: hidden;
    /* もし画像の高さを指定したい場合はここで aspect-ratio 等を設定 */
}

.contact-right .about-image img {
    width: 100%;
    display: block;
}

/* スマホ表示の時は被せを解除して縦並びにする */
@media (max-width: 992px) {
    .contact-container {
        flex-direction: column;
        align-items: stretch;
    }
    .contact-left {
        flex: 0 0 100%;
        margin-right: 0;
        margin-bottom: -40px; /* スマホでは画像の上に少し被せる（上下） */
        padding: 40px;
    }
    .contact-right {
        flex: 0 0 100%;
    }
}

/* 電話とフォームを横に並べる */
.contact-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    background: #fff;
    padding: 60px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* ほんのり浮き上がらせる */
}


.contact-method {
    flex: 1;
}

.label {
    display: block;
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 15px;
}

.tel-number {
    display: block;
    font-size: 2rem;
    font-family: "Georgia", serif;
    color: #b89c50; /* 金色系のアクセントカラー */
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 10px;
}

.hours {
    font-size: 0.85rem;
    color: #666;
}

/* 区切り線 */
.contact-divider {
    width: 1px;
    height: 100px;
    background-color: #ddd;
}

/* お問い合わせボタン */
.btn-contact {
    display: inline-block;
    padding: 15px 40px;
    background-color: #333; /* 墨色 */
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}

.btn-contact:hover {
    background-color: #b89c50;
    transform: translateY(-2px);
}

/* スマホ表示：縦に並べる */
@media (max-width: 768px) {
    .contact-content {
        flex-direction: column;
        padding: 40px 20px;
        gap: 40px;
    }
    .contact-divider {
        width: 80%;
        height: 1px;
    }
    .tel-number {
        font-size: 1.6rem;
    }
}

.tel-section {
    width: 100%;
    padding: 120px 0 0; /* 上下の余白 */
    display: flex;
    justify-content: center;
    background-image: url(../img/back.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f9f6f2;
}

.tel-inner {
    width: 100%;
    max-width: 1200px; /* 線の長さを制限 */
    margin: 0 auto;
    padding: 60px 20px;
    border-top: 1px solid #999;    /* 上の細い線 */
    border-bottom: 1px solid #999; /* 下の細い線 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.tel-text {
    margin: 0;
    font-family: "Sawarabi Mincho", serif;
    font-size: 1.4rem;
    color: #333;
    letter-spacing: 0.3em; /* 画像のようなゆったりした字間 */
    display: flex;
    align-items: center;
    gap: 2em; /* 「ご予約は〜」と「電話番号」の間の空白 */
}

.tel-link {
    color: inherit;
    text-decoration: none;
    font-size: 1.8rem; /* 番号を少しだけ大きく */
    /* 数字部分だけセリフ体（Georgia等）にすると画像に近づきます */
    font-family: "Georgia", serif;font-weight:bolder;
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
    .tel-text {
        flex-direction: column;
        gap: 0.5em;
        letter-spacing: 0.1em;
        font-size: 1.1rem;
    }
    .tel-link {
        font-size: 1.5rem;
    }
    .tel-inner {
        padding: 30px 10px;
    }
}


.footer {
    padding: 100px 0 40px;
    /* --- 背景を back.jpg に設定 --- */
    background-image: url('../img/back.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    color: #333;
    font-family: "Sawarabi Mincho", serif;
    position: relative;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* --- 左側ブロック：ロゴと住所を近づける --- */
.footer-left-block {
    display: flex;
    align-items: center; /* ロゴと住所の上下を中央揃えに */
    gap: 40px;           /* ロゴと住所の間の距離（ここでお好みの近さに調整） */
    text-align: left;    /* 文字は左寄せ */
}

.footer-logo img {
    height: 150px;       /* ロゴの大きさを調整 */
    width: auto;
    display: block;
}

.footer-info {
    line-height: 1.8;
    letter-spacing: 0.1em;
}

.shop-name {
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-weight: 600;
}

.address {
    font-size: 0.95rem;
    margin: 0;
}

/* --- 右側ブロック：ナビゲーション --- */
.footer-nav {
    text-align: left;    /* メニュー内の文字も左寄せ */
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 25px;  /* 丸印のスペース */
    letter-spacing: 0.1em;
    font-size: 0.95rem;
}

.footer-nav li:last-child {
    margin-bottom: 0;
}

.footer-nav li a {
    text-decoration: none;
    color: #333;
}

/* 丸印（●）の色設定は前回同様 */
.footer-nav li::before {
    content: "●";
    position: absolute;
    left: 0;
    font-size: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
}

.nav-about::before { color: #d69a5a; }
.nav-dishes::before { color: #a44a4a; }
.nav-menu::before { color: #6d735d; }
.nav-contact::before { color: #5a719d; }

/* --- コピーライト --- */
/* --- コピーライトエリアの調整 --- */
/* --- コピーライトエリアの調整 --- */
.footer-copy {
    margin-top: 80px;
    /* 1. 線を引くための枠を画面いっぱいに広げる */
    width: 100%;
    /* 2. 線を追加（画面端まで通る） */
    border-top: 1px solid rgba(0, 0, 0, 0.2); 
    
    padding-top: 20px;
    padding-bottom: 20px;
}

.footer-copy p {
    /* 3. 中の文字だけ inner と同じ幅の中で右寄せにする */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
    
    text-align: right; 
    font-size: 0.75rem;
    color: #333;
    letter-spacing: 0.05em;
}

/* スマホ表示の調整 */
@media (max-width: 850px) {
    .footer-copy p {
        text-align: center;
        padding: 0 20px;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start; /* スマホでも左寄せを維持 */
        gap: 40px;
    }
    .footer-left-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}


/* --- ハンバーガーボタンのスタイル --- */
.nav-toggle {
    display: none; /* PCでは隠す */
    position: relative;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 100;
}

.nav-toggle span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #333; /* 透明ヘッダー時は白にするなら調整 */
    transition: all 0.3s;
}

.header-transparent .nav-toggle span { background-color: #fff; } /* 透明時は白 */
.header-white .nav-toggle span { background-color: #333; }      /* 白ヘッダー時は墨色 */

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

/* 開いた時の三本線アニメーション（×印に） */
.nav-toggle.is-active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* --- スマホ用ナビゲーション --- */
@media (max-width: 768px) {
    .nav-toggle {
        display: block; /* スマホで表示 */
    }

    .nav {
        position: fixed;
        top: 0;
        right: -100%; /* 最初は画面の外に隠す */
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98);
        transition: all 0.5s;
        z-index: 90;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav.is-active {
        right: 0; /* 画面内にスライドイン */
    }

    .nav ul {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .nav ul li a {
        color: #333 !important; /* スマホメニュー内は常に墨色 */
        font-size: 1.2rem;
        letter-spacing: 0.2em;
    }
}

/* 下層ページ用ヒーローエリア */
.page-hero {
    height: 60vh; /* スライダーより少し短く */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

/* 背景を少し暗くして文字を読みやすくする */
.page-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.page-hero-content {
    position: relative;
    z-index: 1;
}

.page-title {
    font-size: 2.5rem;
    font-family: "Sawarabi Mincho", serif;
    letter-spacing: 0.3em;
    margin-bottom: 10px;
}

.page-subtitle {
    font-size: 1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.8;
}

/* お品書き一覧セクション */
/* お品書き一覧セクション */
#menu-list {
    /* --- 多重背景の設定（上に重ねる順に記述） --- */
    background-image: url(../img/gold3.png), /* 【上層】右上の金箔 */ url(../img/back.jpg);
    background-size: 35%, /* gold3.png: 幅35% */ cover;
    background-repeat: no-repeat, no-repeat;
    background-position: top right, /* gold3.png: 右上固定 */ center;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }

/* 背景写真の上で文字を読みやすくするための調整 */
.menu-category {
    padding: 60px 40px;
}

.category-title {
    position: relative;
    font-size: 2.2rem;
    font-weight: normal;
    margin-bottom: 40px;
    line-height: 1.6;
    letter-spacing: 0.2em;
    color: var(--main-color);
    text-indent: 50px;text-align: left;line-height: 1.6;
}


.category-title {
    font-size: 1.8rem;
    font-family: 'Shippori Mincho', serif;
    margin-bottom: 20px;
    letter-spacing: 0.3em;
    color: var(--main-color);
}

.category-desc {
    font-size: 0.95rem;
    color: #666;
    margin-top: 15px;padding-top:15px;
    border-top: 1px solid #e0e0e0;
}

.sub .category-desc {
    font-size: 0.95rem;
    color: #666;
    margin-top: 0;padding-top:0;
    border-top: none;
}

/* コース一覧のレイアウト */
.menu-grid {
    display: flex;           /* grid から変更 */
    flex-wrap: wrap;         /* 折り返しを許可 */
    justify-content: center; /* ★これで3つ目が中央に来ます */
    gap: 60px 40px;          /* 縦の間隔 60px / 横の間隔 40px */
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
}
.menu-title-row {
    display: flex;
    justify-content: space-between; /* 両端に広げる */
    align-items: baseline;        /* 文字の下端で揃える */
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 15px;
    padding-bottom: 5px;
}
/* メニュー名のスタイル調整 */
.menu-info h4.is-reservation {
    display: flex;
    align-items: center;
    gap: 0.5em; /* 丸印・テキスト・メニュー名の間隔 */
}

/* オレンジの丸印 */
.menu-info h4.is-reservation::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #d69a5a; /* 画像に近いオレンジ（金泥色） */
    border-radius: 50%; /* 正円にする */
    flex-shrink: 0;
}

/* 「要予約」のテキスト部分 */
.menu-info h4.is-reservation span {
    font-size: 0.85rem; /* メニュー名より一回り小さく */
    color: #333;
    font-weight: normal;
    white-space: nowrap;
    margin-right: 0.3em;
}
.menu-info h4 {
    font-size: 1.3rem;
    font-weight: normal;
    letter-spacing: 0.15em;
    margin: 0; /* 親の row で管理するのでリセット */
    border-bottom: none; /* row 側に線を引くので不要 */
    padding-bottom: 0;
}

.price {
    font-family: "Georgia", serif;
    font-size: 1.2rem;
    color: var(--accent-color);
    margin: 0; /* リセット */
    font-weight: bold;
}

/* お品書きの箇条書き（2列化） */
.menu-info .desc {
    font-size: 0.85rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 20px;
    
    /* ★2列にする設定 */
    column-count: 2;
    column-gap: 20px;
    
    /* 文字が途中で切れないように調整 */
    orphans: 1;
    widows: 1;
}

/* カード内の高さを揃えるための設定 */
/* メニュー項目の幅を調整 */
.menu-item {
    /* calc内の 20px は gap(40px) の半分です */
    flex: 0 0 calc(50% - 20px); 
    min-width: 340px;    
    display: flex;
    flex-direction: column;
    padding: 30px;
}

/* スマホ対応：100%幅にする */
@media (max-width: 768px) {
    .menu-grid {
        gap: 40px; /* スマホ時の隙間 */
    }
    .menu-item {
        flex: 0 0 100%;
    }
}
.menu-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 残りの高さをすべて埋める */
}

/* ★一番下の説明文を自動的に下へ押し下げる */
.category-desc {
    margin-top: auto; /* これで上の要素との間に余白が生まれ、下端に揃う */
    padding-top: 15px;
    border-top: 1px dotted #ccc;
    font-size: 0.9rem;
    color: #444;
    line-height: 1.6;
}



/* 区切り線 */
.menu-divider {
    border: none;
    border-top: 1px solid #ddd;
    width: 60px;
    margin: 0 auto 100px;
}

/* 下部の注釈 */
.menu-notes {
    text-align: left;
    max-width: 900px;
    margin: 0 auto;
    font-size: 0.85rem;
    color: #888;
    line-height: 2;
}

.menu-category .category-title{margin-bottom: 50px;}
.menu-category .title-decor {
    top: -15px;  /* 文字の頭より少し上に飛び出させる（お好みで調整） */

}
/* スマホ対応 */
@media (max-width: 768px) {
    .menu-grid {
        grid-template-columns: 1fr; /* 1列 */
        gap: 40px;
    }
    .category-title {
        font-size: 1.5rem;
    }
}
.drink-container {
    width: 100%;
    max-width: 1200px; /* 他のコンテンツと合わせる */
    margin: 60px auto;
    padding: 40px;
    border: 1px solid #ddd; /* 細いグレーの線で囲う */
    background-color: rgba(255, 255, 255, 0.7); /* 背景を少し透かして馴染ませる */
    text-align: center;
}

.drink-label {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.1rem;
    letter-spacing: 0.3em;
    color: var(--accent-color);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ラベルの左右に小さな線を引く（お好みで） */
.drink-label::before,
.drink-label::after {
    content: "";
    width: 30px;
    height: 1px;
    background-color: var(--accent-color);
    margin: 0 15px;
}

.drink-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 30px; /* 縦・横の隙間 */
    font-size: 0.95rem;
    color: #444;
    line-height: 1.8;
}

.drink-list span {
    position: relative;
    white-space: nowrap;
}

/* 項目間に「・」を入れる設定（HTMLで直接書くより管理が楽です） */
.drink-list span:not(:last-child)::after {
    content: ""; /* ・を消して余白だけで表現する方が最近の和モダンでは主流です */
}

.drink-list .etc {
    color: #888;
    font-size: 0.85rem;
}

/* スマホ表示 */
@media (max-width: 768px) {
    .drink-container {
        padding: 30px 20px;
    }
    .drink-list {
        gap: 10px 20px;
        font-size: 0.85rem;
    }
}

.menu-page #concept {
    display: flex;
    align-items: stretch;
    padding: 100px 0 0;
  
    background: #fff;
    overflow: hidden;
    text-align: left; /* セクション全体のセンター属性をリセット */
    background-image: 
        url('../img/gold.png'),  /* 【最上層】左上の金箔 */
        url('../img/gold2.png'), /* 【中層】右下の金箔 */
        url('../img/back.jpg');   /* 【下層】ベースの背景 */
        
    /* --- 各画像ごとのサイズ設定 --- */
    background-size: 
        35%,    /* gold.png: 幅30% */
        35%,    /* gold2.png: 幅30% */
        cover;  /* back.jpg: 全面 */
        
    /* --- 全てリピートなし --- */
    background-repeat: 
        no-repeat, 
        no-repeat, 
        no-repeat;
        
    /* --- 各画像の配置場所 --- */
    background-position: 
        top left,     /* gold.png: 左上 */
        bottom right, /* gold2.png: 右下 */
        center;       /* back.jpg: 中央 */

    /* コンテンツの読みやすさを守る設定 */
    position: relative;
    z-index: 1;
    overflow: hidden;}


/* 左側：画像ブロック */
.menu-page .menu-img {
    flex: 0 0 50%;
    overflow: hidden;
    line-height: 0; /* 下部の隙間対策 */
    max-height: 80vh;margin-top: 80px;
    position: relative;
}

/* ★追加：画像の上に重ねる黒いフィルター（オーバーレイ） */
.menu-page .menu-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 黒い色の薄さを調整（0.4 = 40%の濃さ） */
    background-color: rgba(0, 0, 0, 0.4); 
    z-index: 1; /* 画像（z-index:0）より上、文字より下 */
    pointer-events: none; /* フィルターがクリックを邪魔しないように */
}

.menu-page .menu-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;z-index: 0;
    /* ★初期状態：1.1倍に拡大 */
    transform: scale(1.1);
    /* ★4秒かけて滑らかに動かす設定（Aboutセクションと統一） */
    transition: transform 4s cubic-bezier(0.33, 1, 0.68, 1);
}

.menu-page .menu-img.is-active img {
    transform: scale(1.0);
}

/* 右側：コンテンツブロック（金箔背景をここに継承） */
.menu-page .menu-concept {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 60px;
    max-width: none !important;
    margin: 0;
    

}

/* 内部のレイアウト調整 */
.menu-page .concept-wrapper {
    width: 100%;
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center;
}

/* 縦書きタイトルの微調整 */
.menu-page .concept-left .section-title {
    font-size: 2.4rem;
    margin: 0;
}

/* レスポンシブ：スマホ対応 */
@media (max-width: 992px) {
    .menu-page #concept {
        flex-direction: column;
    }
    .menu-page .menu-img, 
    .menu-page .menu-concept {
        flex: 0 0 100%;
        width: 100%;
    }
    .menu-page .menu-img {
        height: 400px; /* スマホ時の画像の高さ */
    }
    .menu-page .concept-wrapper {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
}

.footer-sns {
    margin-top: 15px; /* 住所との間隔 */
    display: flex;
}

.instagram-link {
    color: #333; /* 墨色（黒） */
    transition: opacity 0.3s ease;
    display: inline-block;
}

.instagram-link:hover {
    opacity: 0.6; /* ホバーした時に少し薄くする */
}

/* SVGのサイズ調整 */
.instagram-link svg {
    width: 22px;
    height: 22px;
    vertical-align: middle;
}

/* スマホ表示の時の位置調整 */
@media (max-width: 850px) {
    .footer-sns {
        justify-content: flex-start; /* 左寄せを維持 */
    }
    #concept .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 0px 0 0px;text-align: left;
}
.menu-text-wrapper {
    width: 100%;
    max-width: 100%;
    text-align: center;
}
.menu-t{text-align: left;}
.contact-container .contact-text br{display: none;}
.contact-section .section-title {
    font-size: 2rem;
    margin-top: 30px;
    margin-bottom: 30px;
    letter-spacing: 0.4em;
    font-weight: normal;
    position: relative;
    padding-left: 0px;
    z-index: 3;
    text-align: center;
}
.hero-content {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}
#concept {
    background-image: url(../img/gold.png), /* 【最上層】左上の金箔 */ url(../img/gold2.png), /* 【中層】右下の金箔 */ url(../img/back.jpg);
    background-size: 80%, /* gold.png: 幅30% */ 80%, /* gold2.png: 幅30% */ cover;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top left, /* gold.png: 左上 */ bottom right, /* gold2.png: 右下 */ center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
#about {
    background-image: url(../img/gold3.png), /* 【上層】右上の金箔 */ url(../img/back.jpg);
    background-size: 80%, /* gold3.png: 幅35% */ cover;
    background-repeat: no-repeat, no-repeat;
    background-position: top right, /* gold3.png: 右上固定 */ center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 80px 20px;
}
    .menu-header .title-decor {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        margin: 0 auto 20px;
        width: 80px;
    }
    .menu-category {
    padding: 60px 0px;
}
  .menu-category .category-title{text-align: center;}
}