/* --- 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; /* メニュー展開時の高さ（必要に応じて調整） */
    }
    }    



/* 基本情報・設備・サービス セクションのスタイル */
.section.slider-section {
    padding: 60px 0; /* セクション上下の余白 */
    background-color: #f8f9fa; /* 背景色を少し明るく */
}

.section.slider-section .heading {
    margin-bottom: 40px; /* 見出しの下の余白 */
    font-size: 2rem; /* 見出しのフォントサイズを調整 */
    color: #343a40; /* 見出しの色 */
}

/* テーブルのスタイル調整 */
#infotbl {
    width: 100%; /* テーブルの幅を親要素に合わせる */
    border-collapse: collapse; /* 罫線の重複をなくす */
    margin-bottom: 30px; /* テーブルの下の余白 */
}

#infotbl th,
#infotbl td {
    padding: 12px 15px; /* セルの内側の余白 */
    border: 1px solid #dee2e6; /* セルの罫線 */
    vertical-align: top; /* セルの内容を上揃えに */
}

#infotbl th {
    background-color: #e9ecef; /* ヘッダー行の背景色 */
    font-weight: bold; /* ヘッダーの文字を太く */
    width: 25%; /* ヘッダー列の幅を調整 */
    color: #495057; /* ヘッダーの文字色 */
}

#infotbl td ul {
    margin: 0; /* リストのデフォルトマージンをリセット */
    padding-left: 20px; /* リストの左パディング */
}

#infotbl td ul li {
    margin-bottom: 5px; /* リスト項目の下の余白 */
}

/* その他の写真を見るリンクのスタイル */
.col-md-12.text-center a {
    display: inline-block; /* リンクをブロック要素のように扱い、パディングとマージンを適用可能に */
    margin-top: 30px; /* 上の要素との間隔 */
    padding: 10px 25px; /* ボタン風のパディング */
    background-color: #007bff; /* ボタンの背景色 */
    color: white; /* 文字色 */
    text-decoration: none; /* 下線をなくす */
    border-radius: 5px; /* 角を丸くする */
    transition: background-color 0.3s ease; /* ホバー時のアニメーション */
}

.col-md-12.text-center a:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
}

/* 画像のスライドエリアの調整（BootstrapのOwl Carouselに依存） */
.home-slider.major-caousel {
    margin-bottom: 40px; /* スライダーの下の余白 */
}

.home-slider .slider-item img {
    max-width: 100%;
    height: auto;
    display: block; /* 画像がインライン要素として持つ余白をなくす */
    margin: 0 auto; /* 中央揃え */
    border-radius: 8px; /* 画像の角を少し丸く */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 軽い影を追加 */
}

}

 .bg-pattern {
    background: #f8f9fa url('your-pattern.png') repeat;
    padding: 60px 0;
  }

  .heading {
    font-family: 'Noto Serif JP', serif;
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
  }

  .lead {
    font-size: 1.1rem;
    color: #666;
  }

  .media-custom {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #fff;
  }

  .media-custom:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  }

  .media-custom img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  .media-body {
    padding: 20px;
  }

  .media-body h2 {
    font-size: 1.25rem;
    font-weight: bold;
    color: #222;
    margin: 0;
  }

  @media (max-width: 767px) {
    .heading {
      font-size: 1.8rem;
    }
  }

/* 過ごし方（タイムライン） */
/* ベーススタイル */
#itinerary {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  background-color: #fdfcf9;
  color: #333;
}

#itinerary h2 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 40px;
  color: #3a3a3a;
}

.timeline {
  border-left: 4px solid #c2a773;
  padding-left: 20px;
  position: relative;
}

.time-block {
  margin-bottom: 40px;
  position: relative;
  padding-left: 20px;
}

.time {
  font-weight: bold;
  color: #c2a773;
  position: absolute;
  left: -100px; /* ← ここを広めに取る */
  top: 0;
  font-size: 1.2em;
  width: 60px; /* ← 幅も調整 */
  text-align: right;
}

.content h3 {
  font-size: 1.4em;
  margin-bottom: 10px;
  color: #5b4636;
}

.content p {
  line-height: 1.6;
  margin-bottom: 10px;
}

.itinerary-photo {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  border-radius: 8px;
  margin: 10px 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* スマホ対応（768px以下） */
@media (max-width: 768px) {
  .timeline {
    border-left: none;
    padding-left: 0;
  }

  .time-block {
    padding-left: 0;
    margin-bottom: 50px;
  }

  .time {
    position: static;
    display: block;
    font-size: 1em;
    margin-bottom: 8px;
    color: #8c734d;
    text-align: left;
  }

  .content h3 {
    font-size: 1.2em;
  }

  .itinerary-photo {
    max-height: 200px;
  }
}

/* セクション全体 */
.spot-section {
  padding: 60px 20px;
  background-color: #f9f9f9;
  font-family: "Helvetica Neue", sans-serif;
}

/* セクションタイトル */
.section-title {
  font-size: 2.2rem;
  margin-bottom: 40px;
  font-weight: bold;
  color: #333;
}

/* 各スポットカード */
.spot-item {
  margin-bottom: 40px;
}

.spot-title {
  font-size: 1.5rem;
  margin-top: 20px;
  color: #444;
}

.spot-description {
  font-size: 1rem;
  color: #555;
  margin: 15px auto;
  max-width: 90%;
}

/* 画像 */
.spot-photo {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}

/* ボタンリンク */
.more-link {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 24px;
  font-size: 1rem;
  color: #fff;
  background-color: #007bff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.more-link:hover {
  background-color: #0056b3;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
  .spot-list {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .spot-item {
    width: 90%;
    margin-bottom: 40px;
  }
}