/* --- Base Styles --- */
body {
    font-family: 'Noto Serif JP', serif; /* 日本語に合うセリフ体 */
    color: #333; /* 基本のテキスト色 */
    line-height: 1.7;
    background-color: #f8f5f0; /* 全体の背景色を少しオフホワイトに */
}

/* Bootstrapのコンテナ設定を上書きしないように注意 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px; /* Bootstrap default padding */
}

/* --- Section Common Styles --- */
.section {
    padding: 8em 0; /* セクションの上下パディングを基本とする */
    position: relative;
    overflow: hidden; /* AOSの飛び出し防止 */
}

/* .py-5 は Bootstrap の padding-top/bottom: 3rem; なので、セクション全体のpaddingは調整が必要です */
.section.py-5 {
    padding-top: 3rem; /* Bootstrap py-5 */
    padding-bottom: 3rem; /* Bootstrap py-5 */
    /* もしセクション全体の余白を大きくしたい場合は、py-5を削除して上記のpadding: 8em 0;を使うか、
       py-Xの数字を大きくしてください (例: py-6) */
}

.section.bg-pattern {
    background-color: #fdfaf5; /* パターン背景のセクション */
    /* background-image: url('path/to/subtle-pattern.png'); */ /* 必要であれば、ここに微細なパターン画像を追加 */
    background-repeat: repeat;
}

.heading {
    font-size: 2.8em; /* 見出しのサイズを調整 */
    color: #5A4E3C; /* 旅館のテーマカラー */
    font-weight: 700;
    margin-bottom: 0.8em;
    position: relative;
    padding-bottom: 0.5em; /* 下線のためのパディング */
}

/* 見出しの下線 */
.heading::after {
    content: '';
    display: block;
    width: 60px; /* 下線の幅 */
    height: 3px;
    background-color: #C0A98F; /* アクセントカラー */
    margin: 0.5em auto 0;
    border-radius: 2px;
}

.lead {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 2em;
}

p.lead {
  font-family: "Yu Mincho", "游明朝体", "YuMincho", serif;
}

/* --- 食材へのこだわりセクション (slider-section) --- */
.slider-section {
    background-color: #fff; /* 白い背景 */
}

/* Owl Carousel スライダーの調整 */
.home-slider .slider-item {
    position: relative;
    overflow: hidden;
    /* .rounded クラスが既に角丸を適用しますが、独自に調整したい場合はここで */
    /* border-radius: 10px; */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* 影を追加 */
}

.home-slider .slider-item img {
    width: 100%;
    height: 500px; /* スライダー画像の高さを固定 */
    object-fit: cover; /* 画像がはみ出さないように調整 */
    transition: transform 0.5s ease; /* ホバーエフェクト */
}

.home-slider .slider-item:hover img {
    transform: scale(1.05); /* ホバーで少し拡大 */
}

/* Owl Carousel のナビゲーション矢印のスタイル調整 */
.home-slider.owl-carousel .owl-nav button.owl-prev,
.home-slider.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6) !important; /* より濃い背景で視認性アップ */
    color: white !important;
    font-size: 2em !important;
    width: 45px; /* ボタンのサイズ */
    height: 45px; /* ボタンのサイズ */
    line-height: 45px; /* 垂直方向の中央揃え */
    text-align: center; /* 水平方向の中央揃え */
    border-radius: 50% !important; /* 真円に */
    opacity: 0.8;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    z-index: 10; /* 画像より手前に表示 */
}

.home-slider.owl-carousel .owl-nav button.owl-prev:hover,
.home-slider.owl-carousel .owl-nav button.owl-next:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.8) !important; /* ホバーでさらに濃く */
}

.home-slider.owl-carousel .owl-nav button.owl-prev {
    left: 15px;
}

.home-slider.owl-carousel .owl-nav button.owl-next {
    right: 15px;
}

/* "View More Photos" ボタンのスタイル */
.slider-section .btn-outline-primary {
    border-color: #C0A98F; /* アクセントカラーのボーダー */
    color: #C0A98F; /* アクセントカラーのテキスト */
    font-weight: bold;
    padding: 0.8em 2.5em;
    border-radius: 30px; /* 丸みのあるボタン */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    margin-top: 2em; /* スライダーとの間隔 */
}

.slider-section .btn-outline-primary:hover {
    background-color: #C0A98F; /* ホバーで背景色をアクセントカラーに */
    color: white;
    transform: translateY(-2px); /* わずかに浮き上がる */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 影を追加 */
}

/* --- 別注追加メニューセクション (blog-post-entry) --- */
.blog-post-entry .post {
    /* Bootstrapのg-4 (gap) を使うため、ここでは直接margin-bottomを設定しない */
}

.blog-post-entry .media-custom {
    background-color: #fff;
    border-radius: 10px; /* カード全体の角丸 */
    overflow: hidden; /* 角丸に合わせて内容を隠す */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* カードの影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* 高さ揃えのために必須 */
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center; /* カード内の要素を中央揃え */
    padding-bottom: 1em; /* カード下部に余白 */
}

.blog-post-entry .media-custom:hover {
    transform: translateY(-5px); /* ホバーで少し浮き上がる */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.blog-post-entry .media-custom img {
    width: 100%;
    height: 220px; /* 画像の高さを固定 */
    object-fit: cover; /* 画像の表示方法 */
    /* .rounded が適用されているため、ここではborder-radiusは不要 */
    /* border-bottom: 1px solid #eee; */ /* 画像と本文の境界線 (必要であれば) */
}

.blog-post-entry .media-body {
    padding: 1.5em 1em; /* 左右のパディングを調整 */
    flex-grow: 1; /* メディアボディが残りのスペースを占めるように */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 上寄せ */
    text-align: center; /* テキストを中央揃え */
    width: 100%; /* 親要素の幅いっぱいに */
}

.blog-post-entry .media-body h2 {
    font-size: 1.4em; /* メニュー名のサイズ */
    color: #5A4E3C;
    margin-top: 0;
    margin-bottom: 0.5em; /* 価格との間隔 */
    line-height: 1.4;
    font-weight: 600;
}

.blog-post-entry .media-body .price {
    display: block; /* 価格を改行 */
    font-size: 1.1em; /* 価格は少し大きめに */
    color: #C0A98F; /* アクセントカラー */
    font-weight: bold;
    margin-top: 0.3em;
}

.blog-post-entry .media-body p.text-muted {
    font-size: 0.85em;
    color: #999 !important; /* 重要度を上げて確実に灰色に */
    margin-top: 0.5em; /* 価格との間隔 */
}

/* レスポンシブ対応 */
@media (max-width: 991px) {
    .heading {
        font-size: 2.2em;
    }
    .home-slider .slider-item img {
        height: 400px;
    }
    .blog-post-entry .media-custom img {
        height: 180px; /* タブレットでの画像高さ */
    }
    .blog-post-entry .media-body h2 {
        font-size: 1.2em;
    }
    .blog-post-entry .media-body .price {
        font-size: 1em;
    }
}

@media (max-width: 767px) {
    .section.py-5 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .heading {
        font-size: 2em;
    }
    .lead {
        font-size: 1em;
    }
    .home-slider .slider-item img {
        height: 250px; /* モバイルでのスライダー画像の高さ */
    }
    /* 追加メニューは、Bootstrapのcol-12で既に1列表示になる */
    .blog-post-entry .media-custom img {
        height: 200px; /* モバイルでの画像高さ */
    }
}

/* ナビゲーションバーのスタイル */
.navbar2 {
    background-color: #5A4E3C; /* 背景色（例: 旅館に合う落ち着いた色） */
    color: white; /* テキストの色 */
    padding: 0.8em 0; /* 上下のパディング */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); /* 影をつけて立体感を出す */

    /* ナビゲーションバーを追従させるためのプロパティ */
    position: sticky; /* スクロールに合わせて固定 */
    top: 0; /* 画面の上端に固定 */
    z-index: 999; /* 他の要素より手前に表示 */
}

/* その他のナビゲーション要素のスタイル（ご希望に応じて調整してください） */
.nav-container2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5em;
}

@media (max-width: 768px) {
    .menu-icon {
        display: block; /* モバイルで表示 */
    }

    #menu-toggle:checked + .menu-icon + .nav-links {
        max-height: 800px; /* メニュー展開時の高さ（必要に応じて調整） */
    }
    }    



}