@charset "utf-8";
/* ========================================
   たいわゴルフクラブ - レストランページ専用CSS
   ファイル名: restaurant.css
   説明: レストランメニューページ（restaurant.html）のスタイル定義
   ======================================== */

 html {
    scroll-behavior: smooth;
}

/* ========================================
   パンくずリスト
   説明: ページ上部のナビゲーション表示
   ======================================== */

.breadcrumb {
    /* 背景: 白から薄いグレーへのグラデーション */
    background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
    
    /* 余白 */
    padding: 10px 0;
    
    /* 下部の装飾 */
    border-bottom: 2px solid #e0e0e0; /* 2pxの灰色ボーダー */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 軽い影で立体感 */
}

/* パンくずリストのコンテナ */
.breadcrumb .container {
    max-width: 1360px; /* 最大幅 */
    margin: 0 auto; /* 中央揃え */
    padding: 0 20px; /* 左右に20pxの余白 */
}

/* パンくずリストの順序付きリスト */
.breadcrumb ol {
    list-style: none; /* リストマーカーを非表示 */
    display: flex; /* 横並び配置 */
    align-items: center; /* 垂直方向中央揃え */
    margin: 0;
    padding: 0;
    flex-wrap: wrap; /* 折り返しを許可（スマホ対応） */
}

/* パンくずリストの各アイテム */
.breadcrumb li {
    font-size: 13px;
    color: #555; /* グレー系のテキスト */
    font-weight: 500; /* やや太字 */
    display: flex;
    align-items: center;
}

/* パンくずリストの区切り文字（最後の要素以外） */
.breadcrumb li:not(:last-child)::after {
    content: '|'; /* 縦棒で区切る */
    margin: 0 15px; /* 左右に15pxの余白 */
    color: #666;
    font-weight: normal;
}

/* パンくずリストのリンク */
.breadcrumb a {
    color: #003d82; /* ブランドカラー（青） */
    text-decoration: none; /* 下線なし */
    transition: all 0.3s ease; /* スムーズな変化 */
    padding: 5px 10px; /* クリック領域を広げる */
    border-radius: 4px; /* 角を丸める */
}

/* パンくずリストのリンク - ホバー時 */
.breadcrumb a:hover {
    background-color: #003d82; /* 背景を青に */
    color: #ffffff; /* テキストを白に */
    transform: translateY(-1px); /* 1px上に移動 */
}

/* パンくずリストの現在ページ（最後の要素） */
.breadcrumb li:last-child {
    color: #333; /* 濃いグレー */
    font-weight: 600; /* 太字 */
}

/* ========================================
   ヒーロー画像エリア
   説明: ページタイトル画像とテキストのオーバーレイ
   ======================================== */

.hero-image {
    position: relative; /* 子要素の絶対配置の基準 */
    width: 100%;
    height: 400px; /* 高さ固定 */
    overflow: hidden; /* はみ出しを隠す */
}

/* ヒーロー画像 */
.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を枠内に収める（トリミング） */
    object-position: center; /* 中央を基準にトリミング */
}

/* ヒーロー画像上のテキスト */
.hero-text {
    position: absolute; /* 画像の上に重ねる */
    top: 50%; /* 上から50% */
    left: 50%; /* 左から50% */
    transform: translate(-50%, -50%); /* 中央に配置 */
    text-align: center;
    color: #ffffff; /* 白いテキスト */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* 黒い影で視認性向上 */
}

/* ヒーローエリアのメインタイトル */
.hero-title {
    font-family: 'Montserrat', sans-serif; /* 英字フォント */
    font-size: clamp(36px, 7vw, 64px); /* 可変サイズ: 最小36px、最大64px */
    font-weight: 800; /* 極太 */
    font-style: italic; /* 斜体 */
    margin: 0;
    letter-spacing: 0.05em; /* 文字間隔を広げる */
}

/* ヒーローエリアのサブタイトル */
.hero-subtitle {
    font-size: clamp(14px, 2.5vw, 18px); /* 可変サイズ: 最小14px、最大18px */
    margin: 8px 0 0;
    letter-spacing: 0.2em; /* 文字間隔を広げる */
    font-weight: 500;
}

/* ========================================
   レストランページメインエリア
   説明: コンテンツ全体の背景と余白設定
   ======================================== */

.restaurant-page {
    padding: 80px 0px 40px; /* 上80px、下40pxの余白 */
    background: #ffffff; /* 白い背景 */
}

/* コンテンツラッパー */
.wrap {
    max-width: 1400px; /* 最大幅 */
    margin: auto; /* 中央揃え */
    padding: 40px 20px; /* 上下40px、左右20pxの余白 */
}

/* ========================================
   メニュー紹介セクション
   説明: レストランメニューの導入部分
   ======================================== */

.menu-intro {
    text-align: center;
    margin-bottom: 60px; /* 下に60pxの余白 */
}

/* セクションタイトル */
.section-title {
    font-family: 'Montserrat', sans-serif; /* 英字フォント */
    font-size: clamp(28px, 4vw, 36px); /* 可変サイズ: 最小28px、最大36px */
    font-weight: 700; /* 太字 */
    font-style: italic; /* 斜体 */
    color: #003d82; /* ブランドカラー（青） */
    margin: 0 0 20px; /* 下に20pxの余白 */
    letter-spacing: 0.05em; /* 文字間隔を広げる */
}

/* 紹介テキスト */
.intro-text {
    font-size: clamp(14px, 1.5vw, 16px); /* 可変サイズ: 最小14px、最大16px */
    line-height: 1.8; /* 行間を広く */
    color: #666; /* グレー */
    margin: 0;
}

/* ========================================
   メニューセクション
   説明: メニューカテゴリーごとのセクション
   ======================================== */

.menu-section {
    margin-bottom: 80px; /* 下に80pxの余白 */
}

/* 追加料金メニュー用の上余白調整 */
.additional-menu {
    margin-top: 80px; /* 上に80pxの余白（広く） */
}

/* メニューカテゴリータイトル */
.menu-category-title {
    font-size: clamp(22px, 3vw, 28px); /* 可変サイズ: 最小22px、最大28px */
    font-weight: 700; /* 太字 */
    color: #333; /* 濃いグレー */
    margin: 0 0 40px; /* 下に40pxの余白 */
    padding-bottom: 15px; /* 下に15pxの内側余白 */
    border-bottom: 2px solid #003d82; /* 下に青い線 */
}

/* ========================================
   メニューグリッド
   説明: メニューカードの3カラムレイアウト
   ======================================== */

.menu-grid {
    display: grid; /* グリッドレイアウト */
    grid-template-columns: repeat(3, 1fr); /* 3カラム（均等幅） */
    gap: 30px; /* カード間に30pxの余白 */
}

/* ========================================
   メニューカード
   説明: 各メニューアイテムのカード
   ======================================== */

.menu-card {
    background: #ffffff; /* 白い背景 */
    border-radius: 8px; /* 角を丸める */
    overflow: hidden; /* はみ出しを隠す */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 軽い影 */
    transition: all 0.3s ease; /* スムーズな変化 */
}

/* メニューカード - ホバー時 */
.menu-card:hover {
    transform: translateY(-5px); /* 上に5px移動 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* 影を強く */
}

/* メニュー画像エリア */
.menu-image {
    width: 100%;
    overflow: hidden; /* はみ出しを隠す */
    background: #f5f5f5; /* 画像がない場合の背景色 */
    position: relative; /* 子要素の絶対配置の基準 */
}

/* メニュー画像 */
.menu-image img {
    width: 100%;
    height: auto; /* 高さを自動調整（アスペクト比維持） */
    display: block; /* ブロック要素化（余白をなくす） */
    transition: transform 0.3s ease; /* スムーズな変化 */
}

/* メニュー画像 - ホバー時（拡大） */
.menu-card:hover .menu-image img {
    transform: scale(1.05); /* 1.05倍に拡大 */
}

/* メニューコンテンツエリア */
.menu-content {
    padding: 25px; /* 内側に25pxの余白 */
}

/* メニュー名 */
.menu-name {
    font-size: clamp(18px, 2vw, 20px); /* 可変サイズ: 最小18px、最大20px */
    font-weight: 700; /* 太字 */
    color: #333; /* 濃いグレー */
    margin: 0 0 15px; /* 下に15pxの余白 */
    padding-bottom: 10px; /* 下に10pxの内側余白 */
    border-bottom: 1px solid #e0e0e0; /* 下に薄いグレーの線 */
}

/* メニュー説明文 */
.menu-description {
    font-size: clamp(13px, 1.4vw, 14px); /* 可変サイズ: 最小13px、最大14px */
    line-height: 1.8; /* 行間を広く */
    color: #666; /* グレー */
    margin: 0 0 20px; /* 下に20pxの余白 */
    min-height: 80px; /* 最小高さ80px（カードの高さを揃える） */
}

/* メニューボタン */
.menu-button {
    display: inline-block; /* インラインブロック要素 */
    background: #666; /* グレーの背景 */
    color: #ffffff; /* 白いテキスト */
    font-size: clamp(13px, 1.4vw, 14px); /* 可変サイズ */
    font-weight: 600; /* やや太字 */
    padding: 10px 24px; /* 上下10px、左右24pxの余白 */
    border: none; /* 枠線なし */
    border-radius: 25px; /* 角を大きく丸める（丸ボタン） */
    cursor: default; /* カーソルをデフォルトに（クリック不可の表示） */
    transition: all 0.3s ease; /* スムーズな変化 */
}

/* ========================================
   おすすめオプションセクション
   説明: 大盛りなどのオプションメニュー
   ======================================== */

.option-section {
    margin-top: 40px; /* 上に40pxの余白（限定食付メニューから） */
    margin-bottom: 0; /* 下の余白をなくす */
    padding: 0; /* パディングをなくす */
}

/* オプションヘッダー */
.option-header {
    margin-bottom: 20px; /* 下に20pxの余白 */
}

/* おすすめバッジ */
.option-badge {
    display: inline-block; /* インラインブロック要素 */
    background: #999; /* グレーの背景 */
    color: #ffffff; /* 白いテキスト */
    font-size: clamp(13px, 1.5vw, 14px); /* 可変サイズ */
    font-weight: 600; /* やや太字 */
    padding: 6px 18px; /* 上下6px、左右18pxの余白 */
    border-radius: 20px; /* 角を丸める */
    letter-spacing: 0.05em; /* 文字間隔を少し広げる */
}

/* オプショングリッド */
.option-grid {
    display: grid; /* グリッドレイアウト */
    grid-template-columns: repeat(2, 1fr); /* 2カラム（均等幅） */
    gap: 20px; /* カード間に20pxの余白 */
    max-width: 600px; /* 最大幅を制限（狭く） */
}

/* オプションカード */
.option-card {
    background: #ffffff; /* 白い背景 */
    border: 1px solid #e0e0e0; /* 薄いグレーの枠線 */
    border-radius: 8px; /* 角を丸める */
    padding: 20px 24px; /* 上下20px、左右24pxの余白 */
    transition: all 0.3s ease; /* スムーズな変化 */
}

/* オプションカード - ホバー時 */
.option-card:hover {
    border-color: #ccc; /* 枠線を少し濃く */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* 軽い影 */
}

/* オプションコンテンツ */
.option-content {
    display: flex; /* フレックスレイアウト */
    justify-content: space-between; /* 両端揃え */
    align-items: center; /* 垂直方向中央揃え */
}

/* オプション名 */
.option-name {
    font-size: clamp(15px, 1.8vw, 16px); /* 可変サイズ */
    font-weight: 600; /* やや太字 */
    color: #333; /* 濃いグレー */
    margin: 0; /* 余白なし */
}

/* オプション価格エリア */
.option-price {
    display: flex; /* フレックスレイアウト */
    align-items: baseline; /* ベースライン揃え */
    gap: 2px; /* 要素間に2pxの余白 */
}

/* 価格記号（+） */
.price-symbol {
    font-size: clamp(14px, 1.6vw, 15px); /* 可変サイズ */
    font-weight: 600; /* やや太字 */
    color: #d32f2f; /* 赤色 */
}

/* 価格金額 */
.price-amount {
    font-family: 'Montserrat', sans-serif; /* 英数字フォント */
    font-size: clamp(18px, 2.2vw, 20px); /* 可変サイズ */
    font-weight: 700; /* 太字 */
    color: #d32f2f; /* 赤色 */
    line-height: 1; /* 行間をなくす */
}

/* 価格単位（円） */
.price-unit {
    font-size: clamp(13px, 1.5vw, 14px); /* 可変サイズ */
    font-weight: 500; /* やや太字 */
    color: #666; /* グレー */
}

/* ========================================
   おすすめセットセクション
   説明: セットメニューの4カラムレイアウト
   ======================================== */

.set-menu-section {
    margin-top: 60px; /* 上に60pxの余白 */
    margin-bottom: 60px; /* 下に60pxの余白 */
}

/* セットヘッダー */
.set-header {
    margin-bottom: 30px; /* 下に30pxの余白 */
}

/* おすすめセットバッジ */
.set-badge {
    display: inline-block; /* インラインブロック要素 */
    background: #999; /* グレーの背景 */
    color: #ffffff; /* 白いテキスト */
    font-size: clamp(13px, 1.5vw, 14px); /* 可変サイズ */
    font-weight: 600; /* やや太字 */
    padding: 6px 18px; /* 上下6px、左右18pxの余白 */
    border-radius: 20px; /* 角を丸める */
    letter-spacing: 0.05em; /* 文字間隔を少し広げる */
}

/* セットグリッド */
.set-grid {
    display: grid; /* グリッドレイアウト */
    grid-template-columns: repeat(4, 1fr); /* 4カラム（均等幅） */
    gap: 20px; /* カード間に20pxの余白 */
}

/* セットカード */
.set-card {
    background: #ffffff; /* 白い背景 */
    border-radius: 8px; /* 角を丸める */
    overflow: hidden; /* はみ出しを隠す */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 軽い影 */
    transition: all 0.3s ease; /* スムーズな変化 */
}

/* セットカード - ホバー時 */
.set-card:hover {
    transform: translateY(-3px); /* 上に3px移動 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 影を強く */
}

/* セット画像エリア */
.set-image {
    width: 100%;
    overflow: hidden; /* はみ出しを隠す */
    background: #f5f5f5; /* 画像がない場合の背景色 */
}

/* セット画像 */
.set-image img {
    width: 100%;
    height: auto; /* 高さを自動調整（アスペクト比維持） */
    display: block; /* ブロック要素化（余白をなくす） */
    transition: transform 0.3s ease; /* スムーズな変化 */
}

/* セット画像 - ホバー時（拡大） */
.set-card:hover .set-image img {
    transform: scale(1.05); /* 1.05倍に拡大 */
}

/* セットコンテンツエリア */
.set-content {
    padding: 20px; /* 内側に20pxの余白 */
    text-align: center; /* 中央揃え */
}

/* セット名 */
.set-name {
    font-size: clamp(15px, 1.8vw, 16px); /* 可変サイズ */
    font-weight: 600; /* やや太字 */
    color: #333; /* 濃いグレー */
    margin: 0 0 10px; /* 下に10pxの余白 */
}

/* セット価格 */
.set-price {
    font-size: clamp(16px, 2vw, 18px); /* 可変サイズ */
    font-weight: 700; /* 太字 */
    color: #d32f2f; /* 赤色 */
    margin: 0; /* 余白なし */
}

/* ========================================
   単品メニューセクション
   説明: 単品メニューの3カラムレイアウト
   ======================================== */

.single-menu-section {
    margin-top: 60px; /* 上に60pxの余白 */
    margin-bottom: 60px; /* 下に60pxの余白 */
}

/* 単品価格ボタン */
.single-price {
    background: #666; /* グレーの背景 */
    color: #ffffff; /* 白いテキスト */
    font-size: clamp(15px, 1.8vw, 17px); /* 可変サイズ */
    font-weight: 700; /* 太字 */
    padding: 8px 20px; /* 上下8px、左右20pxの余白 */
    border-radius: 20px; /* 角を丸める */
}

/* ========================================
   レスポンシブデザイン
   説明: 画面サイズに応じたスタイル調整
   ======================================== */

/* タブレット以下（768px以下） */
@media (max-width: 768px) {
    /* ヒーロー画像 */
    .hero-image {
        height: 250px; /* 高さを小さく */
    }
    
    /* コンテンツラッパー */
    .wrap {
        padding-left: 15px; /* 左余白を小さく */
        padding-right: 15px; /* 右余白を小さく */
    }
    
    /* レストランページメイン */
    .restaurant-page {
        padding: 0; /* 上下の余白をなくす */
    }
    
    /* メニュー紹介 */
    .menu-intro {
        margin-bottom: 40px; /* 下の余白を小さく */
    }
    
    /* メニューグリッド - 2カラムに変更 */
    .menu-grid {
        grid-template-columns: repeat(2, 1fr); /* 2カラム */
        gap: 20px; /* 余白を小さく */
    }
    
    /* メニューコンテンツエリア */
    .menu-content {
        padding: 20px; /* 余白を小さく */
    }
    
    /* メニュー説明文 */
    .menu-description {
        min-height: auto; /* 最小高さをなくす */
    }
    
    /* オプショングリッド */
    .option-grid {
        gap: 16px; /* 余白を小さく */
    }
    
    /* オプションカード */
    .option-card {
        padding: 16px 20px; /* 余白を小さく */
    }
    
    /* セットグリッド - 2カラムに変更 */
    .set-grid {
        grid-template-columns: repeat(2, 1fr); /* 2カラム */
        gap: 16px; /* 余白を小さく */
    }
}

/* スマートフォン（480px以下） */
@media (max-width: 480px) {
    /* ヒーロー画像 */
    .hero-image {
        height: 200px; /* 高さをさらに小さく */
    }
    
    /* メニューグリッド - 1カラムに変更 */
    .menu-grid {
        grid-template-columns: 1fr; /* 1カラム（縦並び） */
        gap: 20px; /* 余白 */
    }
    
    /* オプショングリッド - 1カラムに変更 */
    .option-grid {
        grid-template-columns: 1fr; /* 1カラム（縦並び） */
        gap: 12px; /* 余白 */
    }
    
    /* オプションカード */
    .option-card {
        padding: 14px 18px; /* 余白をさらに小さく */
    }
    
    /* セットグリッド - 1カラムに変更 */
    .set-grid {
        grid-template-columns: 1fr; /* 1カラム（縦並び） */
        gap: 16px; /* 余白 */
    }
}

#page-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
}

#page-top a {
    display: block;
    background: #003d82;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 61, 130, 0.3);
    transition: all 0.3s ease;
}

#page-top a:hover {
    background: #0051a8;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 61, 130, 0.4);
}