@charset "UTF-8";

/* =========================================
   基本設定 (Base Styles)
   ========================================= */
body {
    /* 日本語フォント：Noto Sans JP（モダンで読みやすいゴシック体） */
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    color: #444;
    margin: 0;
    padding: 0;
    line-height: 1.8;
    letter-spacing: 0.05em;
    overflow-x: hidden;
    width: 100%;
}

h1,
h2,
h3,
h4 {
    /* 英字見出し：モンセラート（幾何学的でおしゃれなサンセリフ体） */
    font-family: "Montserrat", sans-serif;
    text-align: center;
    font-weight: 600;
    /* 太めにして存在感を出す */
    margin: 0;
    letter-spacing: 0.1em;
    /* 少し文字間を広げるとおしゃれ */
}

/* その他の英字部分（背景文字など）にも適用 */
.bg-text,
.menu-nav a {
    font-family: "Montserrat", sans-serif;
}

/* 日本語の見出しもゴシック体（bodyと同じ）で統一してスッキリさせる */
.concept-text h3,
.menu-category h4 {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
}

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

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

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

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    /* パディングを含めた幅計算にする */
}

/* =========================================
   右上のSNSバー & ヘッダー
   ========================================= */
.top-bar {
    padding-top: 10px;
    font-size: 14px;
}

.top-bar .container {
    display: flex;
    justify-content: flex-end;
}

.sns-icons a {
    color: #444;
    margin-left: 20px;
    transition: color 0.3s;
}

.sns-icons a:hover {
    color: #8B0000;
}

header {
    padding: 20px 0;
    text-align: center;
    position: relative;
}

.logo {
    margin-bottom: 20px;
}

.global-nav ul {
    display: flex;
    justify-content: center;
    gap: 30px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.nav-logo {
    display: none;
}

/* =========================================
   ハンバーガーメニュー (スマホ用)
   ========================================= */
.hamburger-btn {
    display: none;
    position: absolute;
    top: 40px;
    right: 20px;
    width: 30px;
    height: 24px;
    cursor: pointer;
    z-index: 1000;
}

.hamburger-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    position: absolute;
    transition: all 0.3s;
}

.hamburger-btn span:nth-child(1) {
    top: 0;
}

.hamburger-btn span:nth-child(2) {
    top: 11px;
}

.hamburger-btn span:nth-child(3) {
    bottom: 0;
}

@media (max-width: 768px) {
    .hamburger-btn {
        display: block;
    }

    .global-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 120px;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s;
        z-index: 999;
        overflow-y: auto;
    }

    .nav-logo {
        display: block;
        width: 150px;
        margin-bottom: 40px;
    }

    .global-nav ul {
        flex-direction: column;
        gap: 40px;
        text-align: center;
        font-size: 18px;
    }

    .global-nav.active {
        opacity: 1;
        visibility: visible;
    }

    .hamburger-btn.active span:nth-child(1) {
        top: 11px;
        transform: rotate(45deg);
    }

    .hamburger-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-btn.active span:nth-child(3) {
        bottom: 11px;
        transform: rotate(-45deg);
    }
}

/* =========================================
   ヒーローイメージ & セクション共通
   ========================================= */
.hero {
    width: 100%;
    height: 60vh;
    background-color: #eee;
    background-image: url('image/hero.jpeg');
    background-size: cover;
    background-position: center;
}

section {
    padding: 25px 0;
    position: relative;
}

/* --- セクションタイトル（共通設定） --- */
.section-title {
    color: #8B0000;
    font-size: 20px;
    text-transform: uppercase;
    position: relative;

    /* ▼▼▼ 配置設定を修正（より安全な中央揃えに） ▼▼▼ */
    display: table;
    /* 文字の幅に合わせて箱を作る */
    margin: 0 auto 60px;
    /* 上下0、左右オート（中央寄せ）、下60px */
    /* ▲▲▲ 修正ここまで ▲▲▲ */

    /* フォント設定（パターンBのMontserratを維持する場合） */
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: #8B0000;
    margin: 10px auto 0;
}

/* =========================================
   CONCEPT (ジグザグ & 背景文字)
   ========================================= */
.concept-block {
    position: relative;
    /* ▼▼▼ 修正：文字が入るスペースを確保するために余白を大きく増やす ▼▼▼ */
    margin-top: 200px;
    margin-bottom: 80px;
    overflow: visible;
}

/* 最初のブロックだけは余白を少し控えめに（タイトル下なので） */
.concept-block:first-of-type {
    margin-top: 200px;
}

.bg-text {
    position: absolute;
    /* ▼▼▼ 修正：写真から完全に離れるようにガッツリ上に配置 ▼▼▼ */
    top: -130px;
    left: 50%;
    transform: translateX(-50%);

    font-size: 80px;
    color: #f2f2f2;
    font-family: serif;
    z-index: -1;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    pointer-events: none;
    line-height: 1;
    /* 高さを抑える */
}

.concept-row {
    display: flex;
    align-items: center;
    gap: 50px;
}

.concept-block:nth-of-type(even) .concept-row {
    flex-direction: row-reverse;
}

.concept-img {
    flex: 1;
}

.concept-text {
    flex: 1;
}

.concept-text h3 {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: left;
    line-height: 1.4;
}

.concept-text p {
    font-size: 14px;
}

/* =========================================
   SHOP INFO
   ========================================= */
.shop-info-grid {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
}

.info-table {
    flex: 1;
    font-size: 13px;
}

.shop-img {
    flex: 1;
}

.info-row {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    /* ▼▼▼ これを追加（上下中央揃えにする設定） ▼▼▼ */
    align-items: center;
}

.info-label {
    width: 100px;
    font-weight: bold;
    background-color: #bfa595;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    padding: 2px 0;
    margin-right: 20px;
    flex-shrink: 0;
}

/* =========================================
   MENU (タブ切り替え)
   ========================================= */
.menu-section {
    background-color: #ffffff;
}

/*.menu-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0;
    flex-wrap: wrap;
}

.menu-nav a {
    cursor: pointer;
    padding-bottom: 15px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
    font-size: 14px;
    letter-spacing: 0.1em;
}

.menu-nav a.active {
    color: #8B0000;
    border-bottom: 2px solid #8B0000;
}
    */

/* =========================================
   メニュータイル (4枚画像レイアウト)
   ========================================= */

/* タイルを並べるグリッドの枠 */
.menu-tile-grid {
    display: grid;
    /* PC: 横に4つ並べる */
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    /* タイル同士の隙間 */
    max-width: 1000px;
    margin: 0 auto 50px;
    /* 下に余白 */
}

/* 個別のタイル設定 */
.menu-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    /* 正方形にする */
    overflow: hidden;
    /* はみ出した画像をカット */
    border-radius: 4px;
    /* 角を少し丸く */
    cursor: pointer;
}

/* タイル内の画像 */
.menu-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 枠いっぱいにトリミング */
    transition: transform 0.5s ease;
    /* ズーム用のアニメーション */
}

/* ホバー時に画像をズームさせる */
.menu-tile:hover img,
.menu-tile.active img {
    transform: scale(1.1);
}

/* 黒っぽいフィルター（文字を読みやすくする） */
.tile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /* 30%の黒 */
    transition: background 0.3s;
}

/* 選択中(active)の時はフィルターを薄くして明るく見せる */
.menu-tile.active .tile-overlay {
    background: rgba(0, 0, 0, 0.1);
}

/* 中央の文字 */
.tile-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    /* 英字フォント */
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.1em;
    z-index: 2;
    /* フィルターより手前に */
    pointer-events: none;
    /* クリックを透過 */
}

/* --- スマホ用レイアウト (2列×2行) --- */
@media (max-width: 768px) {
    .menu-tile-grid {
        /* スマホ: 横に2つ並べる（自動的に2段になる） */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        /* 隙間を少し狭く */
    }

    .tile-label {
        font-size: 14px;
        /* 文字サイズを調整 */
    }
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.tab-content.active {
    display: block;
}

.menu-category h4 {
    text-align: center;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e0d0c0;
    padding: 15px 0;
    font-size: 14px;
}

.item-desc {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   フッター & その他
   ========================================= */
/* --- 提案B：ダークグレー（シックで締まる） --- */
footer {
    background-color: #333;
    /* 真っ黒ではなく濃いグレー */
    color: #fff;
    /* 文字は白 */
    padding: 20px 0;
    /* 少し高さを出してリッチに */
    text-align: center;
}

/* 著作権の文字を少し小さく控えめに */
footer p {
    font-size: 12px;
    opacity: 0.6;
    /* 白すぎると眩しいので少し透明に */
    letter-spacing: 0.1em;
}

.floating-btn {
    position: fixed;
    right: 0;
    top: 200px;
    background: #8B0000;
    color: white;
    padding: 20px 10px;
    writing-mode: vertical-rl;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
    z-index: 900;
    font-size: 14px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
    /* ▼▼▼ ここから下を追加（最初は隠す設定） ▼▼▼ */
    transition: all 0.3s;
    /* ふわっと表示させる */
    /* ▲▲▲ ここまで ▲▲▲ */
}

/* --- 固定ボタン内のアイコン調整 --- */
.floating-btn i {
    margin-bottom: 10px;
    /* 文字との間に隙間を作る */
    font-size: 16px;
    /* アイコンを少し大きく */
    display: inline-block;
    /* 綺麗に配置するためにブロック化 */
}

/* =========================================
   レスポンシブ微調整 (共通)
   ========================================= */
@media (max-width: 768px) {

    .concept-row,
    .concept-block:nth-of-type(even) .concept-row,
    .shop-info-grid {
        flex-direction: column;
    }

    /* 余白の調整（スマホでは少し狭める） */
    .concept-block {
        margin-top: 80px;
    }

    .concept-block:first-of-type {
        margin-top: 60px;
    }

    /* 背景文字調整 (修正箇所：スマホ用) */
    .bg-text {
        /* 文字サイズを小さくして画面からはみ出さないようにする */
        font-size: 24px;

        /* 写真に被らない位置に調整 */
        top: -40px;
    }

    .hero {
        height: 40vh;
    }

    .menu-nav {
        gap: 15px;
    }
}

/* --- Googleマップ埋め込み用 --- */
.map-wrap {
    margin-top: 20px;
    width: 100%;
    height: 400px;
    /* 地図の高さ。好きに変えてOK */
    filter: grayscale(0.2);
    /* おまけ：少し彩度を落としてサイトの雰囲気に馴染ませる（好みで消してOK） */
}

.map-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    /* 枠線を消す */
}

/* --- 余白調整（SHOP INFOの上を詰める） --- */

/* CONCEPTセクション自体の下の余白をなくす */
#concept {
    padding-bottom: 80px;
}

/* 最後のブロック（REGIONAL WINES）の下の余白もなくす */
.concept-block:last-of-type {
    margin-bottom: 0;
}

/* --- スマホ用：予約ボタンを画面下に固定 --- */
@media (max-width: 768px) {
    .floating-btn {
        /* 位置をリセットして下に固定 */
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;

        /* サイズと形を調整 */
        width: 100%;
        /* 画面幅いっぱいに */
        height: 60px;
        /* 押しやすい高さ */
        border-radius: 0;
        /* 角丸をなくす */

        /* 文字の向きを横書きに戻す */
        writing-mode: horizontal-tb;

        /* 中身を真ん中に配置 */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        /* 余白リセット */
        gap: 10px;
        /* アイコンと文字の間隔 */

        font-size: 16px;
        /* 文字を少し大きく */
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
        /* 上向きに影をつける */

        /* ▼▼▼ スマホの時だけ最初は隠す ▼▼▼ */
        opacity: 0;
        visibility: hidden;
    }

    /* アイコンの余白調整 */
    .floating-btn i {
        margin-bottom: 0;
        /* 縦書き用の余白を消す */
        margin-right: 5px;
        /* 横書き用に右に少し余白 */
    }

    /* ▼▼▼ これを新しく追加（表示された時の姿） ▼▼▼ */
    .floating-btn.active {
        opacity: 1;
        /* 不透明にする（見える） */
        visibility: visible;
        /* 存在させる */
    }
}

/* --- NEWS セクション --- */
#news {
    /* 背景をMENUと同じベージュに変更 */
    background-color: #f9f5f0;

    /* 上下の余白を均等に調整 */
    padding-top: 60px;
    padding-bottom: 60px;
}

/* ニュースリスト全体の枠 */
.news-list {
    max-width: 800px;
    /* 横に広がりすぎないように制限 */
    margin: 0 auto;
    /* 真ん中に配置 */
    border-top: 1px solid #eee;
    /* 一番上の線 */
}

/* 各ニュースの行 */
.news-list li {
    display: flex;
    /* 日付と文字を横並びに */
    border-bottom: 1px solid #eee;
    /* 下線 */
    padding: 20px 0;
    /* 上下の余白 */
    font-size: 15px;
}

/* 日付部分のデザイン */
.news-date {
    width: 120px;
    /* 日付の幅を固定して揃える */
    font-weight: bold;
    color: #8B0000;
    /* テーマカラー（ワインレッド） */
    flex-shrink: 0;
    /* 画面が狭くても日付は縮めない */
    font-family: "Montserrat", sans-serif;
    /* 英数字用フォント */
}

/* テキスト部分 */
.news-text {
    line-height: 1.6;
}

/* スマホ用の調整 */
@media (max-width: 768px) {
    .news-list li {
        flex-direction: column;
        /* スマホでは縦並びにする */
        gap: 5px;
        /* 日付と本文の間を少し空ける */
        padding: 15px 0;
    }
}

/* =========================================
   OTHER SHOP セクション
   ========================================= */
#othershop {
    background-color: #fff;
    /* 背景は白でスッキリ */
    padding-bottom: 80px;
}

/* カードを並べる枠 */
.othershop-list {
    display: flex;
    justify-content: center;
    /* 真ん中寄せ */
    gap: 40px;
    /* カード間の隙間 */
    flex-wrap: wrap;
    /* 画面が狭ければ折り返す */
}

/* 個別のカード */
.shop-card {
    width: 45%;
    /* PCでは2つ並ぶように */
    max-width: 480px;
}

/* 写真部分 */
.shop-card-img {
    display: block;
    width: 100%;
    height: 250px;
    overflow: hidden;
    /* はみ出しカット */
    border-radius: 4px;
}

.shop-card-img img {
    width: 90%;
    height: 90%;
    margin: 0 auto;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.shop-card:hover .shop-card-img img {
    transform: scale(1.05);
    /* ホバーで少しズーム */
}

/* テキスト部分 */
.shop-card-body {
    padding: 20px 0;
    text-align: center;
    /* 文字は左揃え */
}

.shop-card-body h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #444;
    text-align: center;
    /* 見出しも左揃え */
    font-family: "Montserrat", sans-serif;
    /* 英字フォント */
    letter-spacing: 0.05em;
}

.shop-card-body p {
    font-size: 14px;
    margin-bottom: 20px;
    color: #666;
    line-height: 1.6;
}

/* サイトへのリンクボタン */
.shop-link-btn {
    display: inline-block;
    font-size: 13px;
    color: #8B0000;
    font-weight: bold;
    border-bottom: 1px solid #8B0000;
    padding-bottom: 2px;
    transition: all 0.3s;
    font-family: "Montserrat", sans-serif;
}

.shop-link-btn:hover {
    opacity: 0.7;
    padding-bottom: 5px;
    /* ホバーで線が下がる演出 */
}

.shop-link-btn i {
    margin-left: 5px;
    font-size: 11px;
}

/* --- スマホ用レイアウト --- */
@media (max-width: 768px) {
    .othershop-list {
        flex-direction: column;
        /* 縦並び */
        gap: 50px;
    }

    .shop-card {
        width: 50%;
        /* ← 画面の80%の大きさにする */
        margin: 0 auto;
        /* ← 左右の余白を自動にして「真ん中」に置く */
    }

    .shop-card-img {
        height: 150px;
        /* 写真の高さを少し抑える */
    }
}

/* =========================================
   詳細メニューページ (LUNCH, DINNER etc)
   ========================================= */

/* ページトップのタイトルエリア */
.page-header {
    background-color: #f9f5f0;
    /* 薄いベージュ */
    padding: 60px 0;
    text-align: center;
    margin-bottom: 50px;
}

.page-header h1 {
    font-size: 32px;
    color: #8B0000;
    /* ワインレッド */
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

.page-header p {
    font-size: 14px;
    color: #666;
}

/* メニューリストの枠 */
.menu-detail-container {
    max-width: 800px;
    /* 少し幅を狭めて読みやすく */
    margin-bottom: 80px;
}

.menu-detail-block {
    margin-bottom: 60px;
}

/* カテゴリタイトル (PASTA LUNCHなど) */

.menu-cate-title {
    font-size: 22px;
    color: #444;
    border-left: 5px solid #8B0000;
    padding-left: 15px;
    margin-bottom: 5px;
    text-align: left;
    font-family: "Montserrat", sans-serif;

    /* ▼▼▼ これを追加・変更（金額を右に寄せる設定） ▼▼▼ */
    display: flex;
    /* 横並びモードにする */
    justify-content: space-between;
    /* 両端（左と右）に離す */
    align-items: baseline;
    /* 文字の下のラインを揃える */
    padding-right: 10px;
    /* 右端に少し隙間を作る */
}

/* 見出しの中の金額デザイン */
.cate-price {
    font-size: 18px;
    /* タイトルより少し小さく */
    color: #8B0000;
    /* ワインレッドにする */
    font-weight: 600;
}

/* スマホの時の調整 */
@media (max-width: 768px) {
    .menu-cate-title {
        font-size: 18px;
        /* スマホでは文字を少し小さく */
    }

    .cate-price {
        font-size: 16px;
    }
}

.menu-cate-desc {
    font-size: 13px;
    color: #888;
    margin-bottom: 30px;
    padding-left: 20px;
}

/* 各メニューの行 */
.menu-detail-item {
    border-bottom: 1px dotted #ccc;
    /* 点線の下線 */
    padding: 15px 0;
    margin-bottom: 10px;
}

/* 料理名と値段を横並びにする */
.menu-name {
    display: flex;
    justify-content: space-between;
    /* 両端に配置 */
    align-items: baseline;
    /* 下のラインを揃える */
    font-weight: bold;
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}

.menu-name .price {
    color: #8B0000;
    font-family: "Montserrat", sans-serif;
}

/* 料理の説明文 */
.menu-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

/* 途中の画像 */
.menu-page-img {
    margin: 40px 0;
}

.menu-page-img img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* HOMEへ戻るボタン */
.back-home-btn {
    display: inline-block;
    border: 1px solid #8B0000;
    color: #8B0000;
    padding: 15px 40px;
    transition: all 0.3s;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
}

.back-home-btn:hover {
    background-color: #8B0000;
    color: #fff;
}

/* =========================================
   パンくずリスト (Breadcrumb)
   ========================================= */
.breadcrumb {
    padding: 15px 0;
    background-color: #fff;
    font-size: 12px;
    color: #888;
    font-family: "Montserrat", sans-serif;
    /* 英字フォントで見やすく */
}

.breadcrumb ul {
    display: flex;
    /* 横並びにする */
    align-items: center;
    /* 上下中央揃え */
    flex-wrap: wrap;
    /* スマホで長くなったら折り返す */
}

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

/* リンクがある項目の色 */
.breadcrumb li a {
    color: #888;
    transition: color 0.3s;
}

.breadcrumb li a:hover {
    color: #8B0000;
    /* ホバー時にブランドカラー(赤)に */
    text-decoration: underline;
}

/* 区切り文字 (>) の設定 */
.breadcrumb li+li::before {
    content: '\f054';
    /* Font Awesomeの「>」アイコンコード */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    margin: 0 10px;
    /* 左右の隙間 */
    color: #ccc;
    /* 薄いグレー */
}

/* パンくずリストの幅を下のメニューと同じにする */
.breadcrumb .container {
    max-width: 800px;
    /* 詳細ページと同じ幅に制限 */
}

/* --- スマホ用：詳細メニューの文字サイズ調整 --- */
@media (max-width: 768px) {
    .menu-name {
        font-size: 12px;
        /* スマホでは少し小さく */
    }

    /* もし説明文も小さくしたいなら以下を追加（お好みで） */
    .menu-desc {
        font-size: 12px;
    }
}

/* --- パターンC：下線のみ --- */
.menu-sub-header {
    margin-top: 40px;
    font-size: 18px;
    font-weight: 600;
    display: inline-block;
    /* 文字の幅に合わせる */
    /* もし左寄せじゃなく真ん中にしたければ下を追加 */
    /* width: 100%; text-align: center; display: block; */
    font-family: "Montserrat", sans-serif;
}

.menu-sub-desc {
    font-size: 13px;
    color: #888;
    margin-bottom: 30px;
}

/* スマホでは文字サイズを少し小さく */
@media (max-width: 768px) {
    .menu-sub-header {
        font-size: 16px;
        margin-top: 30px;
    }
}

/* --- NEWSセクションの「一覧へ」ボタン配置 --- */
.news-btn-area {
    max-width: 800px;
    /* リストと同じ幅 */
    margin: 20px auto 0;
    /* 中央揃え & 上に少し余白 */
    text-align: right;
    /* 右寄せにする（好みで center にしてもOK） */
}

/* 一覧ページ用の微調整（ページいっぱいにリストを表示するため） */
.news-page-list {
    margin-bottom: 80px;
}

/* =========================================
   ページ下部の他メニューリンク
   ========================================= */
.other-menu-section {
    margin-top: 80px;
    /* コンテンツとの隙間 */
    padding-top: 40px;
    border-top: 1px solid #eee;
    /* 薄い区切り線 */
    text-align: center;
}

.other-menu-title {
    font-size: 16px;
    color: #444;
    margin-bottom: 20px;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 0.1em;
}

.other-menu-links {
    display: flex;
    /* 横並び */
    justify-content: center;
    /* 中央寄せ */
    gap: 20px;
    /* ボタン同士の隙間 */
    flex-wrap: wrap;
    /* スマホで折り返す */
    margin-bottom: 40px;
}

.other-menu-btn {
    display: block;
    width: 170px;
    /* ボタンの幅 */
    padding: 12px 0;
    border: 1px solid #ccc;
    /* 最初はグレーの細い線 */
    color: #888;
    font-size: 13px;
    font-family: "Montserrat", sans-serif;
    transition: all 0.3s;
}

.other-menu-btn:hover {
    border-color: #8B0000;
    /* ホバーで赤く */
    color: #8B0000;
    background-color: #fff9f9;
    /* うっすら赤背景 */
}

/* スマホ調整 */
@media (max-width: 768px) {
    .other-menu-links {
        gap: 10px;
    }

    .other-menu-btn {
        width: 45%;
        /* 画面の半分弱くらいの幅に */
    }
}

.top-bar .container {
    display: flex;
    justify-content: space-between; /* 左右に離して配置 */
    align-items: center;            /* 上下中央揃え */
}

/* 追加：紹介文のデザイン */
.top-intro-text {
    font-size: 11px;
    color: #888;
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
}