/* ページ全体 */
html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden; /* 横スクロールを防止 */
}

body {
  background-color: #F2F0ED; /* ベースカラーとして設定 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* 横スクロールを防止 */
  position: relative;
  font-family: 'Sawarabi Mincho', 'Hiragino Kaku Gothic ProN', sans-serif;
  width: 100%; /* ビューポート全体にフィット */
}

/* リンクの共通スタイル */
.link-styled {
  color: #3F3C3A;
  text-decoration: dotted underline;
  text-decoration-color: #3F3C3A;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  position: relative;
  padding-right: 20px; /* 矢印用のスペース（image-titleでは不要だが、他のリンク用に維持） */
  transition: color 0.3s ease;
}

.link-styled::after {
  content: "↗";
  position: absolute;
  right: 5px;
  font-size: 0.8em;
  color: #585858;
}

.link-styled:hover {
  text-decoration: none;
  color: #b32c37; /* ホバー時に赤系 */
}

/* オーバーレイ */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.sidebar.open ~ .overlay {
  opacity: 1;
  visibility: visible;
}

/* ヘッダー */
.header {
  width: 100%;
  position: relative;
  background-color: #F2F0ED;
}

.navbar {
  background-color: #F2F0ED; /* ナビゲーションバーの背景色 */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  min-height: 80px;
}

.site-name {
  color: #3F3C3A; /* 背景が#F2F0EDなのでテキストは#3F3C3A */
  font-size: 1.2em; /* 1.5emから80%縮小（1.5 × 0.8 = 1.2） */
  letter-spacing: 0.05em; /* 文字間隔を少し広げる */
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.navbar li {
  margin: 0 5px;
}

.navbar a {
  color: #3F3C3A;
  display: block;
  padding: 10px;
  text-decoration: none;
  font-size: 0.88em;
  transition: color 0.3s ease; /* 色の変化を滑らかに */
}
.navbar a:hover {
  color: #b32c37 /* ホバー時にテキスト色を赤系に */
}

/* --- レイアウトに関するスタイル --- */
/* mainの基本レイアウト */
main {
  background-color: #F2F0ED;
  width: 100%;
  max-width: none;
}

/* index-main, about-main, list-mainのスタイル */
.index-main {
  padding: 0 10px;
  max-width: 1300px; /* そのまま維持 */
  margin: 0 auto;
  box-sizing: border-box;
}

.about-main {
  padding: 0 10px;
  max-width: 1100px; /* 1300pxから1100pxに変更 */
  margin: 0 auto;
  box-sizing: border-box;
}

.list-main {
  padding: 0 10px;
  max-width: 1300px; /* そのまま維持 */
  margin: 0 auto;
  box-sizing: border-box;
}

/* コンテンツセクション */
.content-section {
  width: 100%;
  max-width: 1000px; /* 1300pxから1000pxに変更 */
  margin: 20px auto;
  padding: 15px;
  box-sizing: border-box;
  color: #585858;
}

.content-section h2 {
  margin: 30px 0;
}

.content-section p {
  margin: 10px 0;
}

.content-section img.content-image {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 8px;
}

.title-container {
  width: 100%;

  margin: 20px auto;
  padding: 0 15px;
}

/* --- テキストに関するスタイル --- */
/* h1 */
main h1 {
  font-size: 3em;
  font-weight: 600;
  line-height: 1.5; /* 1.3から1.5に広げる */
  letter-spacing: 0.05em; /* 0.02emから0.05emに広げる */
  color: #585858;
  text-align: left;
  margin: 0px;
}
/* h2 */
main h2 {
  font-size: 1.8em;
  font-weight: 600;
  line-height: 1.5; /* 1.3から1.5に広げる */
  letter-spacing: 0.05em; /* 0.02emから0.05emに広げる */
  color: #585858;
  text-align: left;
  margin: 0px;
}

/* h3（上下15pxの余白を追加） */
main h3 {
  font-size: 1.4em;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #585858;
  text-align: left;
  margin: 30px 0; /* 上下に15px空ける */
}

/* p */
main p {
  font-size: 1.2em; /* 1emから1.1emに大きく */
  line-height: 2.2;
  letter-spacing: 0.03em;
  color: #585858;
  margin: 10px 0;
}

/* 注釈（変更なし） */
main .note {
  font-size: 0.85em;
  color: #787878;
  margin: 20px 0 0;
}

/* indexページのh1（中央寄せ） */
.title-index {
  text-align: center;
}

/* aboutとlist共通のh1（左寄せ） */
.title-about,
.title-list {
  text-align: left;
  color: #585858;
  position: relative;
  display: inline-block;
  padding-left: 15px;
}

.title-about::before,
.title-list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  width: 5px; /* 太さを3pxから5pxに変更 */
  height: 60%;
  background-color: #9e3b3b; /* デフォルトの色 */
}

/* === 色のバリエーション === */

/* 赤色 (デフォルト) */
.title-about.color-red::before,
.title-about::before { /* .title-about単体でもこの色が適用される */
  background-color: #9e3b3b;
}

/* 北海道 */
.title-about.color-blue::before {
  background-color: #005792;
}

/* 東北地方 */
.title-about.color-green::before {
  background-color: #386641;
}

/* 関東地方 */
.title-about.color-orange-red::before {
  background-color: #B53C3C;
}

/* 甲信越地方*/
.title-about.color-green-light::before {
  background-color: #467160;
}

/* 東海地方 */
.title-about.color-orange::before {
  background-color: #AA5F00;
}

/* 北陸地方 */
.title-about.color-darkblue::before {
  background-color: #0F385F;
}

/* 近畿地方 */
.title-about.color-azuki::before {
  background-color: #754D4A;
}

/* 中国地方 */
.title-about.color-teal::before {
  background-color: #388E8E;
}

/* 四国地方 */
.title-about.color-olive::before {
  background-color: #606B5B;
}

/* 九州地方 */
.title-about.color-brick::before {
  background-color: #7D3F33;
}

/* 東海道新幹線 */
.title-about.color-navy::before {
  background-color: #003D70;
}

#menu-toggle {
  background: none;
  border: none;
  color: #3F3C3A; /* 色を#FFFFFFから#3F3C3Aに変更 */
  font-size: 1.5em;
  cursor: pointer;
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 5px;
  z-index: 998;
}

.sidebar.open ~ #menu-toggle {
  display: none;
}

/* サイドメニュー */
.sidebar {
  position: fixed;
  top: 0;
  right: -350px;
  width: 350px;
  height: 100%;
  background-color: #585858; /* #3F3C3Aから#585858に変更 */
  transition: right 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
}

.sidebar.open {
  right: 0;
}

.sidebar-title {
  color: #FFFFFF; /* 背景が#585858なのでテキストは#FFFFFF */
  font-size: 1.2em; /* 1emから0.9emに小さく */
  letter-spacing: 0.3em; /* 文字間隔を広げる（site-nameと同じ値で統一感） */
  font-weight: bold;
  text-align: left;
  padding: 20px 20px;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.sidebar li {
  margin: 5px 0;
}

.sidebar a {
  color: #FFFFFF;
  display: block;
  padding: 13px 20px;
  text-decoration: none;
  font-size: 1.2em;
  letter-spacing: 0.1em;
  transition: background-color 0.3s ease; /* 既存のトランジションを維持 */
}
.sidebar a:hover {
  background-color: #89474c; /* ホバー時の色を#89474cから#A66F5Cに変更 */
}

.sidebar-divider {
  border: none;
  border-top: 1px solid #999;
  margin: 10px 20px;
}

#close-menu {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: white;
  font-size: 1.5em;
  cursor: pointer;
  padding: 5px;
  z-index: 1001;
}

/* ナビゲーションエリア */
.navigation {
  text-align: center;
  padding: 10px 0;
  background-color: #F2F0ED;
  width: 100%;
  max-width: none;
}

/* イメージマップ */
.navigation img {
  width: 100%; /* ビューポート全体にフィット */
  max-width: 600px; /* 最大幅を制限（必要に応じて調整） */
  height: auto; /* アスペクト比を維持 */
  display: block; /* 中央寄せのためにブロック要素に */
  margin: 0 auto; /* 中央寄せ */
}

.nav-button:hover {
  background-color: #787878; /* ホバー時の背景色を調整（#585858より明るい色） */
  color: #FFFFFF;
}

/* スライダー */
.slider {
  position: relative;
  width: 100%; /* ビューポート全体にフィット */
  max-width: none; /* 最大幅の制限を解除 */
  height: 300px;
  overflow: hidden;
}

.slide-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* ビューポート全体にフィット */
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: slideShow 15s infinite;
  filter: brightness(90%) contrast(80%);
}

.pixel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-conic-gradient(#aaa 0% 0%, transparent 50% 50%) 0 0 / 10px 10px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.slide-image:nth-child(1) { animation-delay: 0s; }
.slide-image:nth-child(2) { animation-delay: 5s; }
.slide-image:nth-child(3) { animation-delay: 10s; }

@keyframes slideShow {
  0% { opacity: 0; }
  6.67% { opacity: 1; }
  33.33% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}

/* 更新情報コンテナ */
.update-info {
  width: 100%;
  max-width: 1000px; /* 最大幅を1000pxに制限 */
  margin: 10px auto;
  display: flex; /* Flexboxを使用して中央寄せ */
  justify-content: center; /* 水平方向の中央寄せ */
  align-items: center; /* 垂直方向の中央寄せ */
}

/* iframeのスタイル */
.update-info iframe {
  width: 100%;
  max-width: 1000px; /* 最大幅を親要素に合わせる */
  height: 300px; /* 高さは固定 */
  background-color: #f8f8f8;
  border-radius: 5px;
  border: none; /* 枠線を明示的に削除 */
}

/* カテゴリ */
.category {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto 20px;
  box-sizing: border-box;
}

.category-toggle {
  display: none;
}

/* 親カテゴリのカテゴリラベル（画像とアイコン用に調整） */
.category-label {
  display: block;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  position: relative;
  text-align: center; /* 画像を中央寄せ */
}

/* 親カテゴリ専用のスタイル */
.category-parent > .category-label {
  width: 100%;
  max-width: 700px; /* 画像の幅を700pxに */
  margin: 0 auto; /* 中央寄せ */
}

.category-parent > .category-label img {
  width: 100%;
  max-width: 700px; /* 画像の最大幅を700pxに */
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 0 auto; /* 画像を中央寄せ */
}

/* トグルアイコン */
.toggle-icon {
  position: absolute;
  top: 50%; /* 垂直中央 */
  left: 10px; /* 左に配置 */
  transform: translateY(-50%); /* 垂直方向の中央揃え */
  font-size: 3.6em; /* 4.5emから3.6emに（約20%縮小） */
  color: #9e3b3b;
  width: 72px; /* 90pxから72pxに（約20%縮小） */
  height: 72px; /* 90pxから72pxに（約20%縮小） */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease; /* 回転アニメーション */
}

/* 展開時（チェックボックスがcheckedのとき）アイコンを90度回転 */
.category-toggle:checked + .category-label .toggle-icon {
  transform: translateY(-50%) rotate(90deg); /* 中央揃えを維持しつつ90度回転 */
}

/* 子カテゴリ全体 */
.category-child {
  margin: 30px 0;
  border-radius: 8px;
  overflow: visible; /* 画像が隠れないように */
  background-color: transparent; /* 背景色を削除 */
}

/* 子カテゴリ（テキストサイズをタイトルに合わせる） */
.category-child .category-label {
  background-color: #9e3b3b;
  color: #FFFFFF;
  padding: 0 8px;
  font-size: 1.7em; /* main-titleと同じ（PC） */
  font-weight: 500; /* main-titleに合わせて少し軽く */
  text-align: center;
  height: 80px;
  line-height: 80px;
  cursor: default;
  border-radius: 8px;
}

.category-parent .category-content {
  display: none;
}

.category-toggle:checked ~ .category-content {
  display: block;
}

/* 子カテゴリのコンテンツ */
.category-child .category-content {
  background-color: transparent; /* 背景色を削除 */
  border-radius: 0 0 8px 8px;
  display: block;
}

/* グリッドコンテナの調整 */
.grid-container {
  width: 100%;
  margin-left: 0;
  padding: 15px 0;
  background-color: #F2F0ED; /* メインの背景色に戻す */
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 0 8px 8px;
}

/* 画像ラッパー（段ごとの横スクロール） */
.wrapper-container {
  position: relative; /* アイコン固定用 */
  width: 100%;
  margin-bottom: 20px;
}

.image-wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;
  touch-action: pan-x; /* 横スクロール優先 */
  overscroll-behavior-x: contain; /* 端のバウンス制限 */
}

.image-wrapper::-webkit-scrollbar {
  height: 8px; /* PCで表示 */
}

.image-wrapper::-webkit-scrollbar-track {
  background: #F2F0ED;
}

.image-wrapper::-webkit-scrollbar-thumb {
  background: #787878;
  border-radius: 4px;
}

.image-wrapper::-webkit-scrollbar-thumb:hover {
  background: #585858;
}


.image-item {
  flex: 0 0 auto;
  width: 400px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px 15px;
  height: 350px; /* title_0101.pngに合わせる */
}

.image-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 0.88;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* 画像のリンク */
.image-item a {
  display: block; /* 画像全体をクリック可能に */
  width: 100%;
  height: 100%;
  border-radius: 8px; /* リンクエリアを画像に合わせる */
}

/* アイコンスタイル */
.scroll-left,
.scroll-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  border-radius: 50%;
  user-select: none;
  z-index: 10;
  transition: opacity 0.3s;
}

.scroll-left.disabled,
.scroll-right.disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.scroll-left {
  left: 10px;
}

.scroll-right {
  right: 10px;
}

.scroll-left:hover,
.scroll-right:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* SVGアイコンの場合 */
.scroll-left svg,
.scroll-right svg {
  width: 24px;
  height: 24px;
  stroke: white;
}

.scroll-left:hover,
.scroll-right:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* 画像タイトル（リンク対応） */
.image-title {
  color: #585858; /* 既存の色を維持 */
  font-size: 0.9em; /* 既存のサイズを維持 */
  margin-top: 10px; /* 既存の余白 */
  text-align: center; /* 既存の中央揃え */
  display: block; /* リンクとして自然に */
}

/* リンクスタイルを適用したimage-title */
.image-title.link-styled {
  color: #3F3C3A; /* link-styledに合わせる */
  text-decoration: dotted underline;
  text-decoration-color: #3F3C3A;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  padding-right: 0; /* 矢印がないのでスペース不要 */
  position: relative;
  transition: color 0.3s ease;
}

/* 矢印を明示的に削除 */
.image-title.link-styled::after {
  content: none; /* ↗を無効化 */
}

/* 矢印を削除（::afterを定義しない） */
.image-title.link-styled:hover {
  text-decoration: none;
  color: #BF4E4E;
}

.image-item:nth-child(odd) img {
  /* filter: brightness(80%);*/
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

.image-item:nth-child(even) img {
  /* filter: brightness(70%);*/
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

.image-item:hover img {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  filter: brightness(100%);
}

.image-item:not(.title-item):hover img {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  filter: brightness(100%);
}

/* フィルタリング用の非表示スタイル */
.image-item:not(.title-item).hidden {
  display: none;
}

/* カテゴリ非表示 */
.category-parent.hidden {
  display: none;
}

/* タイトルアイテム */
.image-item.title-item {
  /* background-image はインラインで指定するため削除 */
  background-size: cover; /* 画像をコンテナ全体にフィット */
  background-position: center; /* 中央に配置 */
  background-repeat: no-repeat; /* 繰り返しなし */
  border-radius: 8px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 400px; /* PCサイズ */
  height: 350px; /* PCサイズ */
  max-width: 400px;
  margin: 50px 15px;
}


.title-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.main-title {
  color: #F1F1F1;
  font-size: 1.7em;
  font-weight: 500;
  letter-spacing: 5px; /* PCで広く */
  margin-bottom: 10px;
}

.sub-title {
  color: #F1F1F1;
  font-size: 1em;
  letter-spacing: 5px; /* PCで広く */
}

/* タイトルの下部テキストを非表示 */
.image-item.title-item .image-title {
  display: none;
}

/* ホバーエフェクト（画像のみ） */
.image-item:not(.title-item):nth-child(odd) img {
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

.image-item:not(.title-item):nth-child(even) img {
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

.image-item:not(.title-item):hover img {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  filter: brightness(100%);
}

/* フッター */
.footer {
  width: 100%;
  height: 350px;
  background-color: #3F3C3A;
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer p {
  color: #FFFFFF; /* 背景が#3F3C3Aなのでテキストは#FFFFFF */
  text-align: center;
  margin: 0;
  font-size: 1em;
  line-height: 1.5;
}

/* エリアマップ */
.filter-section {
  width: 100%;
  max-width: 1300px;
  margin: 20px auto;
  text-align: center;
  box-sizing: border-box;
}

.map-title {
  font-weight: bold;
  font-size: 1.2em;
  margin: 10px 0;
  padding: 8px;
  border-radius: 5px;
  background-color: #be9b7c;
  color: #ffffff;
  text-align: center;
}

.filter-section .navigation {
  padding: 10px 0;
  background-color: transparent;
}

.filter-section .navigation img {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* フィルターパネル */
.filter-panel {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
}

.filter-group {
  background-color: #f5e6cb; /* #9e3b3b → #f5e6cb */
  padding: 10px;
  margin: 10px 0;
  border-radius: 8px;
}

.filter.type-filter,
.filter.attribute-filter {
  display: none;
}

.filter-panel label {
  padding: 8px 12px;
  background-color: #f5e6cb;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  color: unset; /* #000000 を継承 */
  font-size: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter.type-filter:checked + label,
.filter.attribute-filter:checked + label {
  background-color: #585858;
  color: #FFFFFF;

}

.filter-panel label:hover {
  background-color: #ccc;
}

.filter-title {
  font-weight: bold;
  font-size: 1.2em; /* 1.5em → 1em */
  color: #585858;
  background-color: transparent;
  margin: 0;
  padding: 5px 0;
}

.filter-group > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 5px 0;
}

#reset-filters {
  display: inline-block;
  padding: 8px 20px;
  margin-top: 15px;
  background-color: #e0e0e0;
  border: none;
  border-radius: 5px;
  font-size: 1em;
  color: unset; /* #000000 を継承 */
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid #585858;
}

#reset-filters:hover {
  background-color: #585858;
  color: #FFFFFF;
}

/* ページトップボタン（背景が#F2F0EDのページ上にあるため） */
#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #585858; /* #3F3C3Aから#585858に変更 */
  color: #FFFFFF; /* 背景が#585858なのでテキストは#FFFFFF */
  border: none;
  border-radius: 50%;
  font-size: 1.5em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

#back-to-top:hover {
  background-color: #89474c; /* ホバー時に赤系 */
}

/* パンくずリスト */
.breadcrumb {
  width: 100%;
  max-width: 1300px;
  margin: 10px auto;
  padding: 10px 15px; /* 上下にも余白を追加して背景が見えるように */
  box-sizing: border-box;
  background-color: #ece2d0; /* 背景色を追加 */
  border-radius: 8px; /* 角を丸く */
}

/* --- テキストに関するスタイル --- */
.breadcrumb ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.breadcrumb li {
  margin-right: 10px;
  font-size: 0.9em;
  color: #585858;
}

.breadcrumb li::after {
  content: ">";
  margin-left: 10px;
  color: #585858;
}

.breadcrumb li:last-child::after {
  content: none;
}

.breadcrumb a {
  color: #3F3C3A;
  text-decoration: dotted underline; /* 常時下線を点線に（既存のまま） */
  text-decoration-color: #3F3C3A;
  text-underline-offset: 5px; /* 下線を5px離す */
  text-decoration-thickness: 1px; /* 下線の太さを指定 */
  transition: color 0.3s ease; /* 色の変化を滑らかに */
}

.breadcrumb a:hover {
  text-decoration: none;
  color: #b32c37; /* ホバー時に赤系 */
}

/* --- レイアウトに関するスタイル --- */
.list-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

/* セル内のパディング */
.list-table th,
.list-table td {
  padding: 10px;
  border-bottom: 1px solid #C9C9C9; /* 中間の罫線はそのまま */
}

/* theadの下の罫線（通常の太さに戻す） */
.list-table thead th {
  border-bottom: 1px solid #C9C9C9; /* 通常の1px */
}

/* tbodyの最初の行の上に太い罫線 */
.list-table tbody tr:first-child td {
  border-top: 2px solid #C9C9C9; /* tbodyの上部を太く */
}

/* 最後のtrの下の罫線（終わり） */
.list-table tbody tr:last-child td {
  border-bottom: 2px solid #C9C9C9; /* tbodyの下部を太く（0.5pxから2pxに変更） */
}

/* 列幅の設定（変更なし） */
.list-table th:nth-child(1),
.list-table td:nth-child(1) {
  width: 200px; /* 駅弁名 */
}

.list-table th:nth-child(2),
.list-table td:nth-child(2) {
  width: 100px; /* 画像 */
}

.list-table th:nth-child(3),
.list-table td:nth-child(3) {
  width: auto; /* 地域 */
}

.list-table th:nth-child(4),
.list-table td:nth-child(4) {
  width: 150px; /* 発売日 */
}

/* 画像のスタイル */
.list-table td img {
  width: 100%;
  max-width: 100px;
  height: auto;
  display: block;
}

/* 奇数行の背景色 */
.list-table tbody tr:nth-child(odd) {
  background-color: #EBE9E6;
}

/* 偶数行の背景色 */
.list-table tbody tr:nth-child(even) {
  background-color: #F2F0ED;
}

/* --- テキストに関するスタイル --- */
.list-table th {
  font-size: 1em;
  font-weight: 600;
  color: #585858;
  text-align: left;
}

.list-table td {
  font-size: 1em;
  color: #585858;
  text-align: left;
}

.list-table a {
  color: #3F3C3A;
  text-decoration: dotted underline; /* 常時下線を点線に（既存のまま） */
  text-decoration-color: #3F3C3A;
  text-underline-offset: 5px; /* 下線を5px離す */
  text-decoration-thickness: 1px; /* 下線の太さを指定 */
  transition: color 0.3s ease; /* 色の変化を滑らかに */
}

/* レスポンシブ対応 */
@media (max-width: 1300px) {
  .filter-section {
    width: 100%;
    padding: 0 10px;
  }
  .filter-panel {
    width: 100%;
    padding: 0 10px;
  }
  .category {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .grid-container {
    width: 100%;
    margin-left: 0;
  }
  .slider, .navigation, main {
    width: 100%;
    max-width: none;
  }
  .about-main {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .list-main {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .content-section {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
  .navbar {
    padding: 10px;
    min-height: 50px;
  }
  .site-name {
    font-size: 0.96em;
    margin-bottom: 5px;
  }
  .navbar ul {
    flex-wrap: wrap;
  }
  .navbar li {
    margin: 0 3px;
  }
  .navbar a {
    padding: 5px;
    font-size: 0.72em;
  }
  .image-wrapper {
    padding: 0 5px;
  }
  .category-child {
    margin: 20px 0;
  }

  .category-child .category-label {
    font-size: 1.2em;
    padding: 0 8px;
    height: 70px; /* 55px → 70px */
    line-height: 70px;
    text-shadow: none; /* 削除 */
  }

  .category-parent > .category-label {
    max-width: 100%;
  }

  .category-parent > .category-label img {
    max-width: 100%;
  }

  .toggle-icon {
    left: 5px; /* モバイルで少し内側に */
    font-size: 1.5em; /* 元のサイズ（約24px）に */
    width: 30px; /* 元のサイズ（72pxから30pxに） */
    height: 30px; /* 元のサイズ（72pxから30pxに） */
  }

  .image-wrapper {
    scrollbar-width: none;
  }
  .image-wrapper::-webkit-scrollbar {
    display: none;
  }
  .image-item {
    width: calc(70% - 20px);
    max-width: none;
    margin: 20px 10px;
    height: 245px; /* 350pxの比率 */
  }

  .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

  .image-item a {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }

  .image-item.title-item {
    width: calc(70% - 20px);
    max-width: none;
    height: 245px;
    margin: 20px 10px;
    background-size: cover; /* インライン画像を維持 */
    background-position: center;
  }

  .main-title {
    font-size: 1.2em;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
  }

  .sub-title {
    font-size: 0.7em;
    letter-spacing: 2.5px;
  }

  .image-item:not(.title-item).hidden {
    display: none;
  }

  .scroll-left,
  .scroll-right {
    width: 32px;
    height: 32px;
    font-size: 20px;
  }
  .scroll-left svg,
  .scroll-right svg {
    width: 20px;
    height: 20px;
  }
  
  .slider {
    height: 130px;
  }
  .navigation img {
    max-width: 100%; /* モバイル表示で画像がビューポートにフィット */
  }
  /* レイアウト */
  .index-main,
  .about-main,
  .list-main {
    padding: 0 5px;
  }
  /* レイアウト */
  .content-section {
    padding: 0 20px; /* モバイルでさらに余白を増やす */
  }
  /* テキスト */
  main h1 {
    font-size: 1.5em;
    line-height: 1.4; /* 少し縮小 */
    letter-spacing: 0.04em; /* 少し縮小 */
    margin: 15px 0;
  }
  main h2 {
    font-size: 1.2em;
    line-height: 1.4; /* 少し縮小 */
    letter-spacing: 0.02em; /* 少し縮小 */
    margin: 12px 0;
  }
  main h3 {
    font-size: 1.1em;
    line-height: 1.4;
    letter-spacing: 0.04em;
    margin: 12px 0; /* モバイルで少し縮小 */
  }
  main p {
    font-size: 1em; /* 0.9emから1emに調整 */
    line-height: 1.7;
    letter-spacing: 0.02em;
    margin: 8px 0;
  }
  main .note {
    font-size: 0.75em;
    margin: 15px 0 0;
  }
  .title-index {
    text-align: center;
  }
  .title-about {
    text-align: left;
  }
  .title-container {
    max-width: 100%;
    padding: 0 10px; /* iPhoneで20pxの余白 */
  }
  .filter-section .navigation img {
    max-width: 100%;
  }
  .content-section img.content-image {
    max-width: 100%;
  }
  .breadcrumb {
    padding: 8px 20px; /* 上下を少し縮小、左右は20pxを維持 */
  }
  .breadcrumb li {
    font-size: 0.8em;
  }
  .sidebar-title {
    font-size: 1.1em; /* 少し小さく */
    letter-spacing: 0.05em; /* 少し縮小 */
  }
  .list-table th:nth-child(1),
  .list-table td:nth-child(1) {
    width: 70px;
  }
  /* 画像列（2列目）を非表示 */
  .list-table th:nth-child(2),
  .list-table td:nth-child(2) {
    display: none; /* iPhoneで画像列を非表示 */
  }
  .list-table th:nth-child(3),
  .list-table td:nth-child(3) {
    width: auto;
  }
  .list-table th:nth-child(4),
  .list-table td:nth-child(4) {
    width: 70px;
  }
  .list-table th,
  .list-table td {
    padding: 8px;
  }
  .list-table th {
    font-size: 0.9em;
  }
  .list-table td {
    font-size: 0.9em;
  }
  .list-table tbody tr:first-child td {
    border-top: 1.5px solid #C9C9C9;
  }
  .list-table tbody tr:last-child td {
    border-bottom: 1.5px solid #C9C9C9;
  }

  .filter-group {
    padding: 8px;
    margin: 8px 0;
  }

  .filter.type-filter,
  .filter.attribute-filter {
    width: 16px;
    height: 16px;
    border: 1.6px solid #9e3b3b;
    border-radius: 3.2px;
    margin-right: 6px;
  }

  .filter.type-filter:checked::after,
  .filter.attribute-filter:checked::after {
    left: 3.2px;
    width: 6.4px;
    height: 9.6px;
    border-width: 0 1.6px 1.6px 0;
  }

  .filter-section {
    padding: 0 5px;
  }
  .filter-panel {
    padding: 10px;
  }
  .filter-group {
    padding: 8px;
    margin: 8px 0;
  }
  .filter-panel label {
    padding: 6px 10px;
  }
  .filter-group > div {
    gap: 8px;
  }
  .filter-section .navigation img {
    max-width: 100%;
  }
}

@media (max-width: 320px) {
  /* レイアウト */
  .index-main,
  .about-main,
  .list-main {
    padding: 0 5px;
  }

  .category-child .category-label {
    font-size: 1em;
    padding: 0 8px;
    height: 60px; /* 50px → 60px */
    line-height: 60px;
    text-shadow: none; /* 削除 */
  }

  .category-parent > .category-label {
    max-width: 100%;
  }

  .category-parent > .category-label img {
    max-width: 100%;
  }

  .toggle-icon {
    left: 5px; /* モバイルで少し内側に */
    font-size: 1.5em; /* 元のサイズ（約24px）に */
    width: 30px; /* 元のサイズ（72pxから30pxに） */
    height: 30px; /* 元のサイズ（72pxから30pxに） */
  }


  /* テキスト */
  main h1 {
    font-size: 1.2em;
    line-height: 1.3; /* さらに縮小 */
    letter-spacing: 0.03em; /* さらに縮小 */
    margin: 10px 0;
  }
  main h2 {
    font-size: 1em;
    line-height: 1.3; /* さらに縮小 */
    letter-spacing: 0.03em; /* さらに縮小 */
    margin: 10px 0;
  }
  main h3 {
    font-size: 0.9em;
    line-height: 1.3;
    letter-spacing: 0.03em;
    margin: 10px 0; /* 極小画面でさらに縮小 */
  }
  main p {
    font-size: 0.9em; /* 0.8emから0.9emに調整 */
    line-height: 1.6;
    letter-spacing: 0.02em;
    margin: 6px 0;
  }
  main .note {
    font-size: 0.7em;
    margin: 10px 0 0;
  }
  .title-index {
    text-align: center;
  }
  .title-about {
    text-align: left;
  }
  .title-container {
    padding: 0 15px; /* 極小画面で15px */
  }

  .image-wrapper {
    scrollbar-width: none;
  }
  .image-wrapper::-webkit-scrollbar {
    display: none;
  }
  .image-item {
    width: calc(70% - 20px);
    max-width: none;
    margin: 20px 10px;
    height: 245px; /* 350pxの比率 */
  }

  .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

  .image-item a {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
  
  .image-item:not(.title-item).hidden {
    display: none;
  }
  .image-item.title-item {
    width: calc(70% - 20px);
    max-width: none;
    height: 245px;
    margin: 20px 10px;
    background-size: cover;
    background-position: center;
  }

  .main-title {
    font-size: 1em;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
  }

  .sub-title {
    font-size: 0.7em;
    letter-spacing: 2.5px;
  }

  .scroll-left,
  .scroll-right {
    width: 32px;
    height: 32px;
    font-size: 20px;
  }
  .scroll-left svg,
  .scroll-right svg {
    width: 20px;
    height: 20px;
  }
  #reset-filters {
    width: 100%;
    padding: 8px;
  }
  .breadcrumb {
    padding: 6px 15px; /* さらに縮小 */
  }
  .breadcrumb li {
    font-size: 0.7em;
  }
  .sidebar-title {
    font-size: 0.8em; /* さらに小さく */
    letter-spacing: 0.03em; /* さらに縮小 */
  }
  .list-table th:nth-child(1),
  .list-table td:nth-child(1) {
    width: 70px;
  }
  /* 画像列（2列目）を非表示（900px以下から引き継ぎ） */
  .list-table th:nth-child(2),
  .list-table td:nth-child(2) {
    display: none;
  }
  .list-table th:nth-child(3),
  .list-table td:nth-child(3) {
    width: auto;
  }
  .list-table th:nth-child(4),
  .list-table td:nth-child(4) {
    width: 70px;
  }
  .list-table th,
  .list-table td {
    padding: 6px;
  }
  .list-table th {
    font-size: 0.8em;
  }
  .list-table td {
    font-size: 0.8em;
  }
  .list-table tbody tr:first-child td {
    border-top: 1px solid #C9C9C9;
  }
  .list-table tbody tr:last-child td {
    border-bottom: 1px 
    solid #C9C9C9;
  }
  .filter-section {
    padding: 0 5px;
  }
  .filter-panel {
    padding: 8px;
  }
  .filter-group {
    padding: 6px;
    margin: 6px 0;
  }
  .filter-panel label {
    padding: 5px 8px;
  }
  .filter-group > div {
    gap: 6px;
  }
}