@charset "UTF-8";
/*!
 * Author: (Passion-Creator)
 * License: MIT License
*/
/* ==============================================
   下層ページ共通スタイル
   お品書きページやご予約ページなど、トップページ以外のページで
   共通して使うデザインを定義します。
============================================== */

/* --- ページ共通のヒーローエリア（タイトル画像） --- */
.page-hero {
    height: 40vh;                       /* 高さを画面の高さの40%に設定 */
    background-size: cover;             /* 背景画像が常に要素全体を覆うように調整 */
    background-position: center;        /* 背景画像の中心を表示 */
    display: flex;                      /* 中の文字を中央揃えにするための設定 */
    align-items: center;                /* 垂直方向の中央揃え */
    position: relative;                 /* 文字や重ねる黒い膜の位置の基準点にする */
    color: #fff;                        /* 文字色を白に */
    margin-top: 85px;                   /* 固定ヘッダーの高さ分、上部に余白をとって重なりを防ぐ */
}

/* --- ヒーローエリアに重ねる半透明の黒い膜 --- */
.page-hero::before {
    content: '';                        /* 疑似要素には必須の記述 */
    position: absolute;                 /* 親要素(.page-hero)を基準に配置 */
    top: 0; left: 0;                    /* 親要素の左上に配置 */
    width: 100%; height: 100%;          /* 親要素いっぱいに広がるように */
    background-color: rgba(0,0,0,0.5);  /* 半透明の黒色を重ねて、文字を読みやすくする */
}

/* --- ページタイトル（「お品書き」「ご予約」など） --- */
.page-title {
    font-size: 3rem;
    position: relative;                 /* 黒い膜より手前に表示させるための設定 */
    z-index: 2;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5); /* 文字に影をつけて立体感を出す */
}

/* --- ページコンテンツエリア --- */
.page-content {
    padding: 80px 0;                    /* ヒーローエリア下のコンテンツ全体の上下に余白をとる */
}


/* ==============================================
   お品書きページ（menu.html）専用スタイル
============================================== */
.menu-category {
    margin-bottom: 80px;                /* 「逸品料理」や「お飲物」といったカテゴリごとの下に余白をとる */
}
.category-title {
    font-size: 2rem;
    border-bottom: 2px solid var(--accent-color); /* タイトルの下に金色の線を引く */
    padding-bottom: 15px;               /* 線と文字の間の余白 */
    margin-bottom: 40px;                /* 線の下の余白 */
}
.menu-list-item {
    display: flex;                      /* 画像、テキスト、価格を横並びにする */
    align-items: center;                /* 要素を垂直方向の中央に揃える */
    gap: 30px;                          /* 各要素の間の隙間 */
    margin-bottom: 30px;
    border-bottom: 1px solid #444;      /* 各メニューの区切り線 */
    padding-bottom: 30px;
}
.menu-list-item img {
    width: 150px;
    height: 100px;
    object-fit: cover;                  /* 画像の比率を保ったまま要素を埋める */
    border-radius: 5px;
}
.menu-text {
    flex: 1;                            /* テキスト部分が横幅いっぱいに広がるようにする */
}
.menu-text h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
}
.menu-text .description {
    margin: 0;
    font-size: 0.9rem;
    color: #ccc;                        /* 説明文を少し薄い色に */
}
.price {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--accent-color);
    white-space: nowrap;                /* 価格が改行されないようにする */
}


/* ==============================================
   ご予約ページ（reserve.html）専用スタイル
============================================== */
.reserve-wrapper {
    max-width: 800px;                   /* フォーム全体の最大幅を指定 */
    margin: 0 auto;                     /* フォーム全体を中央に配置 */
}
.reserve-note {
    background-color: #222;
    border-left: 5px solid var(--accent-color); /* 左側に金色のアクセント線 */
    padding: 20px;
    margin-bottom: 40px;
    line-height: 1.8;
}
.form-group {
    margin-bottom: 25px;
}
.form-group label {
    display: block;                     /* ラベルと入力欄が縦に並ぶようにする */
    margin-bottom: 10px;
    font-weight: bold;
}
/* 入力欄（テキスト、セレクトボックスなど）の共通スタイル */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px;
    background-color: #2c2c2c;
    border: 1px solid #555;
    border-radius: 5px;
    color: var(--text-color);
    font-size: 1rem;
    font-family: inherit;               /* bodyで指定したフォントを継承する */
}
/* 入力欄が選択された（フォーカスされた）ときのデザイン */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;                      /* ブラウザ標準の青い枠線を消す */
    border-color: var(--accent-color);
}
.form-submit {
    text-align: center;
    margin-top: 40px;
}
.form-submit .btn {
    width: 100%;
    max-width: 300px;
    padding: 15px;
    font-size: 1.2rem;
}


/* ==============================================
   レスポンシブ対応
   画面幅が狭い（スマホなど）のときのデザインを調整します。
============================================== */
@media (max-width: 768px) {
    /* 画面幅が768px以下のときに、ここのスタイルが適用されます */
    .page-hero { 
        height: 30vh; 
        margin-top: 65px; /* スマホではヘッダーが非表示になるため、余白を調整 */
    }
    .page-title { 
        font-size: 2rem; 
    }
    .menu-list-item { 
        flex-direction: column;         /* 横並びを縦並びに変更 */
        align-items: flex-start;        /* 左揃えにする */
    }
    .menu-list-item img { 
        width: 100%; 
        height: auto; 
        margin-bottom: 15px; 
    }
    .price { 
        margin-top: 10px; 
    }
}