@charset "UTF-8";

/* --- 変数設定（カラーパレット） --- */
:root {
    --bg-color: #F8F5EE;      /* 生成り色（背景） */
    --text-color: #333333;    /* 墨色（文字・ヘッダー） */
    --accent-color: #D32F2F;  /* 朱色（アクセント） */
    --white: #ffffff;
    --font-jp: 'Noto Sans JP', sans-serif;
    --font-en: 'Inter', sans-serif;
    --font-cn: 'Noto Sans SC', sans-serif;
    --font-tw: 'Noto Sans TC', sans-serif;
}

/* --- リセット & 基本設定 --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-en), var(--font-jp);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    max-width: 600px; /* スマホ表示を意識して幅を制限 */
    margin: 0 auto;
    background-image: url('https://www.transparenttextures.com/patterns/cream-paper.png'); /* 和紙っぽいテクスチャ（任意） */
}

/* 簡体字のページ (html lang="zh-cn") の場合 */
:lang(zh-cn) body {
    font-family: var(--font-en), var(--font-cn);
}

/* 繁体字のページ (html lang="zh-tw") の場合 */
:lang(zh-tw) body {
    font-family: var(--font-en), var(--font-tw);
}

/* 英語のページ (html lang="en") の場合 */
:lang(en) body {
    font-family: var(--font-en), var(--font-jp); /* 英語ページでも漢字が出る場合に備えてJPをサブに */
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* --- ヘッダーロゴの調整 --- */

/* ロゴと文字を横並びにして、垂直方向の中央を揃える */
.logo-link {
    display: flex;
    align-items: center;
    gap: 10px; /* 画像と文字の間隔 */
    text-decoration: none;
    color: inherit;
}

/* ロゴ画像のサイズ調整 */
.header-logo-img {
    height: 40px; /* ヘッダーの高さに合わせて調整してください */
    width: auto;  /* 横幅は自動調整 */
    border-radius: 0; /* 角丸設定をリセット */
}

/* 店名テキストの調整 */
.logo-text {
    font-size: 1.2rem;
    font-weight: bold;
    /* 必要ならフォントを指定 */
    /* font-family: serif; */ 
}

/* --- ヘッダー --- */
header {
    background-color: var(--text-color);
    color: var(--white);
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-size: 1.2rem;
    font-weight: bold;
    font-family: var(--font-en); /* 英語ロゴっぽく */
}

.lang-switch select {
    background: #555;
    color: #fff;
    border: none;
    padding: 5px;
    border-radius: 4px;
}

/* --- フッター --- */
footer {
    background-color: var(--text-color);
    color: var(--white);
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
    margin-top: 0px;
}

/* --- 共通パーツ --- */
.container {
    padding: 20px;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--accent-color);
    display: inline-block;
    padding-bottom: 5px;
}

.btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    transition: opacity 0.3s;
}

.btn:hover {
    opacity: 0.8;
}

/* --- トップページ用 --- */
/* --- トップページ用（動画背景版） --- */
.first {
    position: relative;
    height: 60vh; /* 画面の高さの60% */
    width: 100%;
    overflow: hidden; /* はみ出した動画を隠す */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    /* 以前の background-image 関連は削除 */
}

/* 動画を背景いっぱいに広げる設定 */
.first video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央寄せ */
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover; /* 画面いっぱいに隙間なく表示 */
    z-index: 0; /* 一番後ろ */
}

/* 動画の上に暗いフィルターをかける（文字を見やすくするため） */
.first::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 黒の半透明（0.5で濃さを調整） */
    z-index: 1; /* 動画より手前 */
}

/* テキストを一番手前にする */
.first-text {
    position: relative;
    z-index: 2; /* フィルターよりさらに手前 */
}

.first h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.first p {
    font-size: 1rem;
    font-family: var(--font-en);
}

.section-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列表示 */
    gap: 10px;
    margin-bottom: 20px;
}

.menu-item-card img {
    border-radius: 4px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 80%;        /* 幅を親要素の80%にする（小さくなる） */
    margin: 0 auto;    /* 中央揃えにする */
}

/* --- メニューページ用 --- */
.menu-nav {
    display: flex;
    overflow-x: auto; /* 横スクロール可能に */
    background: #ddd;
    padding: 10px;
    gap: 10px;
    white-space: nowrap;
}

.menu-nav a {
    padding: 8px 16px;
    background: var(--white);
    border-radius: 20px;
    font-size: 0.9rem;
}

.menu-nav a.active {
    background: var(--accent-color);
    color: var(--white);
}

.menu-list {
    margin-top: 20px;
}

.menu-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
}

.menu-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
}

.menu-info h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.menu-info .en {
    display: block;
    font-size: 0.8rem;
    color: #666;
    font-family: var(--font-en);
    margin-bottom: 5px;
}

.menu-info .price {
    font-weight: bold;
    color: var(--accent-color);
    font-size: 1.1rem;
}

/* --- クーポンページ用 --- */
.coupon-card {
    border: 2px dashed var(--text-color);
    padding: 30px 20px;
    text-align: center;
    background: var(--white);
    position: relative;
    margin-top: 20px;
}

.coupon-title {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-bottom: 10px;
}

.caution {
    background: #eee;
    padding: 10px;
    font-size: 0.85rem;
    margin: 20px 0;
    text-align: left;
}

.staff-btn {
    width: 100%;
    padding: 15px;
    background: var(--accent-color);
    color: white;
    border: none;
    font-size: 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

/* 使用済みスタイル */
.used-overlay {
    display: none; /* 最初は非表示 */
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.85);
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.stamp {
    border: 5px solid #aaa;
    color: #aaa;
    font-size: 2rem;
    font-weight: bold;
    padding: 10px 20px;
    transform: rotate(-15deg); /* スタンプっぽく斜めに */
    text-transform: uppercase;
}

/* JSでクラスが付与されたら表示 */
.coupon-card.is-used .used-overlay {
    display: flex;
}

/* --- 右下固定クーポンボタンのデザイン --- */
.floating-coupon {
    position: fixed;       /* 画面に固定する */
    bottom: 20px;          /* 下から20pxの位置 */
    right: 20px;           /* 右から20pxの位置 */
    width: 80px;           /* 幅 */
    height: 80px;          /* 高さ */
    background-color: var(--accent-color); /* 朱色 */
    color: #fff;           /* 文字色 */
    border-radius: 50%;    /* まん丸にする */
    text-align: center;    /* 文字を中央揃え */
    display: flex;         /* 中身を上下左右中央にする設定 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4); /* 影をつけて浮かせる */
    z-index: 999;          /* 他の要素より手前に表示 */
    border: 2px solid #fff; /* 白い縁取りで目立たせる */
    transition: transform 0.2s; /* 動きのアニメーション */
    text-decoration: none; /* 下線を消す */
}

/* ホバー時の動き */
.floating-coupon:hover {
    transform: scale(1.1); /* マウスを乗せると少し大きくなる */
    opacity: 1;            /* 透明度は変えない */
}

.floating-coupon .fc-icon {
    font-size: 1.5rem;     /* アイコンの大きさ */
    margin-bottom: -2px;   /* 位置の微調整 */
    line-height: 1;
}

.floating-coupon .fc-text {
    font-size: 0.7rem;     /* 文字の大きさ */
    font-weight: bold;
    line-height: 1.2;
}

/* --- ▼▼ ハンバーガーメニュー完全版 ▼▼ --- */

/* 1. ハンバーガーボタン（画面右上に固定） */
.hamburger-btn {
    position: fixed;       /* 画面に貼り付ける */
    top: 10px;             /* 上から10px */
    right: 10px;           /* 右から10px */
    width: 60px;           /* ボタンの幅 */
    height: 60px;          /* ボタンの高さ */
    background: #333;      /* 背景色（黒） */
    border: 1px solid #555;
    border-radius: 4px;
    z-index: 9999;         /* ★最前面に表示（ここが重要） */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 5px;
}

/* 3本線のデザイン */
.hamburger-btn .bar {
    width: 30px;
    height: 2px;
    background-color: #fff;
    margin-bottom: 6px;
    transition: all 0.4s;  /* アニメーション */
    position: relative;
}

/* MENUという文字 */
.hamburger-btn .menu-text {
    font-size: 0.6rem;
    color: #fff;
    margin-top: -2px;
    font-family: sans-serif;
}

/* 2. 開いた時（×印になる動き） */
.hamburger-btn.open .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger-btn.open .bar:nth-child(2) {
    opacity: 0; /* 真ん中の線は消す */
}
.hamburger-btn.open .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
.hamburger-btn.open .menu-text {
    display: none; /* 開いている時は文字を消す */
}

/* 3. メニュー画面（黒い背景） */
.drawer-menu {
    position: fixed;
    top: 0;
    right: -100%;          /* 最初は画面の右外へ隠す */
    width: 100%;           /* 画面幅いっぱい */
    height: 100vh;         /* 画面の高さ100% */
    background: rgba(0, 0, 0, 0.95); /* 少し透けた黒 */
    color: #fff;
    z-index: 8000;         /* ボタンよりは下、コンテンツよりは上 */
    transition: right 0.4s; /* スライドの速さ */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 120px;
    text-align: center;
}

/* 開いた時（画面に出てくる） */
.drawer-menu.open {
    right: 0;
}

/* 4. メニューの中身 */
.drawer-nav {
    list-style: none;
    margin-bottom: 40px;
}
.drawer-nav li {
    margin-bottom: 20px;
}
.drawer-nav a {
    font-size: 1.5rem;
    color: #fff;
    font-weight: bold;
    display: block;
}
.drawer-nav small {
    display: block;
    font-size: 0.8rem;
    color: #aaa;
    margin-top: 5px;
    font-weight: normal;
}

/* 言語ボタン */
.lang-buttons button {
    background: #555;
    color: white;
    border: 1px solid #777;
    padding: 8px 16px;
    margin: 5px;
    cursor: pointer;
}

/* --- style.css の .wood-board 部分をこれに書き換え --- */

.wood-board {
    /* 画像を背景に設定 */
    background-image: url('board.png'); /* ← ここに画像のファイル名を入れる */
    background-repeat: no-repeat;
    background-size: 100% 100%; /* 画像を枠に合わせて引き伸ばす */
    background-position: center;
    background-color: transparent; /* 背景色なし（画像が透過PNGの場合のため） */
    
    /* 文字の色と余白 */
    color: #fff; /* 文字は白（画像の濃さに合わせて調整） */
    padding: 50px 30px; /* ★重要：文字が板からはみ出ないように内側に余白を取る */
    margin: 0 auto 30px auto; /* 中央寄せ */
    width: 95%; /* 画面幅いっぱいになりすぎないように */
    max-width: 500px; /* PCで見ても大きくなりすぎないように */
    
    /* CSSで作っていた影や角丸は削除（画像に含まれていると仮定） */
    border-radius: 0;
    box-shadow: none; 
}

/* タイトルの線などを画像に合わせて調整 */
.board-title {
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8); /* 文字が見やすいように影をつける */
    /* ボーダー線が不要なら削除してください */
    border-bottom: 1px solid rgba(255,255,255,0.7); 
    display: inline-block; /* 線の長さを文字幅に合わせる */
    padding: 0 10px 5px 10px;
    /* 親要素（.wood-board）でtext-align: centerしていない場合は以下で中央寄せ */
    margin-left: auto;
    margin-right: auto;
    display: table; /* 中央配置のため */
}

/* 串・一品料理のリスト文字調整 */
.board-row {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    border-bottom: 1px dashed rgba(255,255,255,0.4);
    padding-bottom: 3px;
    margin-bottom: 8px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* 文字の影 */
}

/* --- ▼▼ 人気メニュー（完全リニューアル版） ▼▼ --- */

.popular-section {
    padding: 0 20px;
    margin-bottom: 40px;
}

/* 共通：画像と文字のデザイン */
.pop-img-box img {
    display: block;        /* 画像をブロック要素にする（重要） */
    width: 100%;           /* 親の箱に合わせて広げる */
    height: auto;
    border-radius: 4px;
    margin: 0 auto;        /* 中央寄せ */
}

.pop-info {
    text-align: center;    /* 文字を中央寄せ */
    margin-top: 5px;
}
.p-name { font-size: 0.9rem; font-weight: bold; }
.p-price { font-size: 0.85rem; }


/* --- 上の段（さんまんま）の設定 --- */
.pop-top {
    margin-bottom: 25px;   /* 下の段との隙間 */
    text-align: center;
}

/* さんまんまの画像の大きさ調整 */
.featured-img {
    width: 50%;            /* ★ここを変更すると大きさが変わります（画面の半分） */
    margin: 0 auto;        /* 画面の真ん中に置く */
}


/* --- 下の段（2列横並び）の設定 --- */
.pop-bottom-row {
    display: flex;         /* 横並びにする魔法 */
    justify-content: space-between; /* 左右に配置 */
    gap: 15px;             /* 2つの間の隙間 */
}

.pop-item {
    width: 48%;            /* 2つ並べるので、幅を半分弱にする */
}

/* 下の段の画像の大きさ調整 */
.pop-item .pop-img-box {
    width: 85%;            /* ★ここを変更すると大きさが変わります */
    margin: 0 auto;        /* 枠の中で真ん中に置く */
}

.menu-name { font-size: 0.9rem; font-weight: bold; }


/* --- ▼▼ PC表示（幅1025px以上）のレイアウト設定 ▼▼ --- */
@media screen and (min-width: 1025px) {

    /* 1. スマホ用のハンバーガーボタンとドロワーメニューを消す */
    .hamburger-btn,
    .drawer-menu {
        display: none !important;
    }

    /* --- PC用設定ブロック内 --- */

    /* 左側の言語メニュー（修正版） */
    .pc-side-lang {
        display: block;
        position: fixed;
        
        /* ▼▼ 右側のメニューと対称になる位置に設定 ▼▼ */
        left: 40px;             /* 左端から40px */
        top: 50%;               /* 上下中央 */
        transform: translateY(-50%); /* 完全に真ん中に合わせる */
        /* ▲▲ ここまで ▲▲ */
        
        z-index: 10;
        background-color: var(--bg-color);
        
        width: 160px;          /* 言語名は短いので、右メニュー(300px)より細くてOK */
        padding: 30px 0;
        
        border-radius: 6px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        text-align: center;
    }

    /* リストのデザイン */
    .pc-side-lang ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .pc-side-lang li {
        margin-bottom: 15px;
    }
    
    .pc-side-lang li:last-child {
        margin-bottom: 0;
    }

    /* 言語リンクのデザイン */
    .pc-side-lang a {
        font-size: 1rem;
        color: var(--text-color);
        font-weight: bold;
        text-decoration: none;
        display: block;
        transition: color 0.3s, transform 0.2s;
        font-family: var(--font-en); /* 英語フォント */
    }

    .pc-side-lang a:hover {
        color: var(--accent-color);
        transform: scale(1.05);
    }
    
    /* もし .pc-side-logo の記述が残っていたら削除してください */

  /* --- @media screen and (min-width: 1025px) の中 --- */

    /* 3. PC用の右側メニュー（位置・サイズ完全固定版） */
    .pc-side-nav {
        display: block;
        position: fixed;
        
        /* ▼▼ 位置を固定するための設定 ▼▼ */
        right: 40px;           /* 右端から40pxで固定 */
        top: 50%;              /* 上から50%の位置 */
        transform: translateY(-50%); /* 自身の高さの半分だけ上にずらして、完全な上下中央にする */
        /* ▲▲ ここまで ▲▲ */

        z-index: 10;
        
        background-color: var(--bg-color);
        
        /* ▼▼ サイズを固定するための設定 ▼▼ */
        width: 250px;          /* 幅を300pxに固定（中身が増えても変わらない） */
        padding: 50px 0;       /* 上下の余白（左右はwidthで決まるので0でOK） */
        box-sizing: border-box; /* paddingを含めた幅にする */
        /* ▲▲ ここまで ▲▲ */
        
        border-radius: 6px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        text-align: center;
    }

    /* 以下、リストの中身などはそのまま */
    .pc-side-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .pc-side-nav li {
        margin-bottom: 25px;
    }
    
    .pc-side-nav li:last-child {
        margin-bottom: 0;
    }

    .pc-side-nav a {
        font-size: 1.2rem;
        color: var(--text-color);
        font-weight: bold;
        text-decoration: none;
        display: block;
        transition: color 0.3s, transform 0.2s;
    }

    .pc-side-nav a:hover {
        color: var(--accent-color);
        transform: scale(1.05);
    }

    .floating-coupon{
        display: none !important;
    }
    

    /* 4. メインコンテンツを中央に保つ */
    body {
        /* サイドバー用の余白設定があればリセット */
        padding-left: 0;
        overflow-x: hidden; /* 横スクロール防止 */
        background-image: url('sozai/haikei.JPG'); /* 画像ファイル名 */
        background-size: cover;       /* 画面いっぱいに広げる */
        background-position: center;  /* 中央に合わせる */
        background-attachment: fixed; /* スクロールしても背景を固定する */
        background-repeat: no-repeat; /* 繰り返しなし */
    }
    /* 背景が写真になるので、真ん中のコンテンツ部分に色をつけて読みやすくします */
    main {
        background-color: var(--bg-color);; /* 生成り色を少し透けさせる */
        padding: 40px;      /* 内側に余白を作る */
        max-width: 800px;   /* 幅を少し広げる */
        margin: 0 auto;     /* 中央寄せ */
        box-shadow: 0 0 20px rgba(0,0,0,0.5); /* 影をつけて浮かせる */
    }

    /* コンテンツ幅の制限（中央に見やすく配置） */
    main, header {
        max-width: 600px;
        margin: 0 auto; /* 中央寄せ */
    }
    
    /* ヘッダーの微調整（ロゴ画像のレイアウトに合わせる） */
    header {
        background: #333; /* 背景色を濃くして引き締める */
    }
}

/* --- スマホ表示（幅1024px以下）の設定 --- */
@media screen and (max-width: 1024px) {
    /* スマホではPC用のパーツを隠す */
    .pc-side-logo,
    .pc-side-nav {
        display: none;
    }
    .pc-side-lang { /* ←これが入っていればOK */
        display: none !important;
    }
}