:root {
  /* ---- 色 ---- */
  --color-navy: #09224c; /* メインの濃紺（文字・背景・ボーダー） */
  --color-yellow: #f9e372; /* アクセントの黄色 */
  --color-cream: #f0ece4; /* サイドナビ・セクション背景のベージュ */
  --color-white: #fff;
  --color-black: #000;

  /* ---- 角丸 ---- */
  --radius-card: 40px; /* カード・パネル */
  --radius-btn: 50px; /* ボタン */
  --radius-pill: 9999px; /* 線・帯（完全な丸端） */

  /* ---- レイアウト ---- */
  --sidenav-width: 300px; /* サイドナビの幅 */
  --side-padding: 8%; /* セクション左右の余白（ガター） */
  --side-padding-sp: 4%;
  --section-clamp:clamp(48px, 5.75vw + 26.5px, 100px);
  --space-clamp:clamp(24px, 2.87vw + 13.2px, 50px);

  /* ---- タイポグラフィ ---- */
   /* 見出し（画面幅連動） */
   /* 少し大きめの強調テキスト */
  --fs-lg: 2rem;
  --fs-small: 0.8em;
  --fs-sub: 0.6em;
  --fs-clamp:clamp(24px, 4.6875vw - 12px, 36px);
  --fs-clamp-title:clamp(22px, 3.125vw - 2px, 30px);

  /* ---- アニメーション ---- */
  --transition-base: 0.3s ease;
}

html {
  /* ページ内アンカー(#about など)へなめらかにスクロール */
  scroll-behavior: smooth;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

main {
  overflow-x: hidden;
  display: flex !important;
  flex-direction: row;
}

main section {
  /* 天地は画面幅に応じて48〜100pxで可変 */
  padding: var(--section-clamp) 0;
}

/* セクション左右の共通ガター（左右余白）。--side-padding を一元管理する */
.gutter {
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

main h4 {
  /* 現状1.5rem(24px)を最大に、top-titleと同じ比率(0.8倍)で縮小 */
  font-size: var(--fs-lg);
}

.yellow-line {
  text-decoration: underline var(--color-yellow) 5px;
  text-underline-offset: 6px;
  line-height: 1.8
}

/*サイドナビ*/

#sidenav{
  width: var(--sidenav-width);
  min-width: var(--sidenav-width);
  min-height: 100vh;
  background-color: var(--color-cream);
}

.fixed-area {
  width: var(--sidenav-width);
  min-width: var(--sidenav-width);
  height: fit-content;
  max-height: calc(100vh - var(--header-h, 0px));
  overflow-y: auto;
  position: fixed;
  z-index: 49;
  background: var(--color-cream);
}

#logo, .logo  {
  display: flex;
  background-color: var(--color-navy);
  padding: clamp(10px, 2.5vh - 5px, 20px);
  align-items: center;
  justify-content: center;
}

#logo img, .logo img {
  width: auto;
  height: clamp(130px, 7.5vh + 85px, 160px);
}

.nav-area {
  padding: clamp(10px, 2.5vh - 5px, 20px);  /* 画面高に応じて10〜20px */
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.5vh - 5px, 20px);      /* 画面高に応じて10〜20px */
}

.search-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
}

#site-search {
  background-color: var(--color-navy);
  opacity: 0.7;
  border-radius: 20px;
  color: var(--color-white);
  border: solid 4px var(--color-navy);
  padding: 0 10px;
  width: 100%;
}

#site-search:focus-visible {
  outline: 2px solid var(--color-yellow);
}

.side-links {
  margin: 0;
  /* ウインドウ高さに合わせて 50px(高さ800px以上)〜20px(高さ500px以下)で自動調整 */
  padding: clamp(20px, calc(10vh - 30px), 40px) 10px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, calc(10vh - 30px), 50px);
  border-top: solid 1px var(--color-navy);
  border-bottom: solid 1px var(--color-navy);
}

.links-icon {
  display: flex;
  width: 25px;
  height: 25px;
  justify-content: center;
  align-items: center;
  transform-origin: center;
  /* ホバー解除時になめらかに元へ戻す */
  transition: transform var(--transition-base);
}

/* ボタンにホバーしたらアイコンが少し拡大＋右へ傾いてコロッと動く */
.side-links li a:hover .links-icon {
  animation: icon-roll 0.5s ease forwards;
}

@keyframes icon-roll {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.25) rotate(20deg);
  }
  75% {
    transform: scale(1.1) rotate(2deg);
  }
  100% {
    transform: scale(1.15) rotate(10deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .links-icon {
    transition: none;
  }
  .side-links li a:hover .links-icon {
    animation: none;
  }
}

.link-text {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  font-weight: bold;
}

.side-links li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 1.2;
}

.link-btn-en {
  font-size: var(--fs-small);
}

.page-links {
  background-color: var(--color-white);
  border-radius: 20px;
  padding: clamp(10px, 2.5vh - 5px, 20px) 20px;
  border: solid 1px var(--color-navy);
}

.page-links ul {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1.5vh - 5px, 10px);  /* 画面高に応じて4〜10px */
}

.page-links a {
  display: inline-block;
  position: relative;
  font-weight: bold;
  font-size: var(--fs-small);
}

.page-links a::after {
  background-color: var(--color-navy); /* 下線の色 */
  bottom: -4px; /* 要素の下端からの距離 */
  content: ""; /* 要素に内容を追加 */
  height: 2px; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: left top; /* 変形の原点を左上に指定 */
  transition: transform 0.3s; /* 変形をアニメーション化 */
  width: 100%; /* 要素の幅 */
}

.page-links a:hover::after {
  transform: scale(1, 1);
}

/*メインコンテンツ*/

#sidenav-overlay {
  width: 100%;
  min-width: 0;
}

#main-visual {
  margin: 0;
  padding: 0;
  height: calc(100vh - var(--header-h, 78px));
  position: relative;
  overflow: hidden;
}

#main-visual-list {
  height: 100vh;
}

#main-visual-list img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 6枚を6秒ずつ（計24秒周期）でクロスフェード。各画像はゆっくり拡大 */
  opacity: 0;
  animation: mv-slideshow 36s linear infinite;
  will-change: opacity, transform;
}

#main-visual-list img:nth-child(1) {
  animation-delay: 0s;
}
#main-visual-list img:nth-child(2) {
  animation-delay: 6s;
}
#main-visual-list img:nth-child(3) {
  animation-delay: 12s;
}
#main-visual-list img:nth-child(4) {
  animation-delay: 18s;
}
#main-visual-list img:nth-child(5) {
  animation-delay: 24s;
}
#main-visual-list img:nth-child(6) {
  animation-delay: 30s;
}
/* スマホ用(.sp)の画像が7〜12番目。PCと同じ段階的にずらしてスライド表示 */
#main-visual-list img:nth-child(7) {
  animation-delay: 0s;
}
#main-visual-list img:nth-child(8) {
  animation-delay: 6s;
}
#main-visual-list img:nth-child(9) {
  animation-delay: 12s;
}
#main-visual-list img:nth-child(10) {
  animation-delay: 18s;
}
#main-visual-list img:nth-child(11) {
  animation-delay: 24s;
}
#main-visual-list img:nth-child(12) {
  animation-delay: 30s;
}

/* pc/sp画像は常に描画し（display:none だとアニメが止まり、切替時にキャプションとズレる）、
   表示切替は visibility で行う。これでアニメ起点がズレず画像とキャプションが同期する */
#main-visual-list img.pc,
#main-visual-list img.sp {
  display: block !important;
}
#main-visual-list img.sp {
  visibility: hidden;
}
@media (max-width: 1024px) {
  #main-visual-list img.pc {
    visibility: hidden;
  }
  #main-visual-list img.sp {
    visibility: visible;
  }
}

@keyframes mv-slideshow {
  /* 0〜1秒でフェードイン、6秒まで表示、7秒でフェードアウト。表示中は拡大し続ける */
  0% {
    opacity: 0;
    transform: scale(1);
  }
  2.778% {
    opacity: 1;
  }
  16.667% {
    opacity: 1;
  }
  19.444% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

/* メインビジュアルの画像名キャプション（画像と同期してフェード） */
#mv-caption {
  position: absolute;
  right: 2%;
  bottom: 24px;
  z-index: 3;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
#mv-caption li {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  white-space: nowrap;
  color: var(--color-white);
  background: var(--color-navy) /*rgba(9, 34, 76, 0.55)*/;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  font-size: clamp(11px, 1.6vw + 4px, 18px);
  font-weight: bold;
  opacity: 0;
  animation: mv-caption 36s linear infinite;
  will-change: opacity;
}
#mv-caption li:nth-child(1) { animation-delay: 0s; }
#mv-caption li:nth-child(2) { animation-delay: 6s; }
#mv-caption li:nth-child(3) { animation-delay: 12s; }
#mv-caption li:nth-child(4) { animation-delay: 18s; }
#mv-caption li:nth-child(5) { animation-delay: 24s; }
#mv-caption li:nth-child(6) { animation-delay: 30s; }

@keyframes mv-caption {
  0% { opacity: 0; }
  2.778% { opacity: 1; }
  16.667% { opacity: 1; }
  19.444% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #main-visual-list img {
    animation: none;
  }
  #main-visual-list img:nth-child(1),
  #main-visual-list img:nth-child(7) {
    opacity: 1;
  }
  #mv-caption li {
    animation: none;
  }
  #mv-caption li:nth-child(1) {
    opacity: 1;
  }
}

.main-text {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-white);
  line-height: 1.6;
}

.pc {
  display: block !important;
}
.sp {
  display: none !important;
}

@media only screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}

/* メインビジュアル下中央のスクロールダウン誘導 */
.scroll-down {
  /* メインビジュアル(position:relative)の下から20px・水平中央に固定 */
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 60px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-white);
  font-weight: bold;
  z-index: 2;
}

.scroll-down::before {
  animation: scroll-down 2s infinite;
  border-bottom: 2px solid var(--color-white);
  border-left: 2px solid var(--color-white);
  content: "";
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}

@keyframes scroll-down {
  0% {
    opacity: 0;
    transform: rotate(-45deg) translate(0, 0);
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    transform: rotate(-45deg) translate(-20px, 20px);
  }
  100% {
    opacity: 0;
  }
}

.main-text div {
  /* テキスト＋パディングで箱のサイズが決まり、mv_obj を箱に合わせて伸縮表示 */
  padding: 20px 100px 40px 4%;
  white-space: nowrap;
  background: url(/railway-cultural-property/img/mv_obj.png) no-repeat;
  background-size: 100% 100%;
  font-size: var(--fs-clamp);
  font-weight: bold;
}

.main-text div strong {
  font-size: 1.28em/*2.4rem*/;
}

.shine-yellow {
  content: url(/railway-cultural-property/img/shine-yellow.gif);
  /* 周囲のフォント(clampで画面幅連動)に合わせて拡縮するようem指定 */
  display: inline-block;
  width: var(--fs-clamp);
  height: auto;
}

/* #others 見出し：テキストが折り返しても shine-blue を右上に固定 */
#others .top-title .yellow-line {
  position: relative;
  display: inline-block;
}

#others .top-title {
  position: relative;
  display: inline-block;
}

.shine-blue {
  position: absolute;
  top: -10px;
  right: -30px;
  width: 30px;
  height: auto;
}

#about {
  text-align: center;
  line-height: 2;
  font-weight: bold;
}

#about strong {
  font-size: var(--fs-lg);
}

#about p{
  font-weight: bold;
}

/* スクロールで画面に入ったら下からふわっと出現する */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1s ease,
    transform 1s ease;
  margin-bottom: 50px;
}

.fade-up.is-show {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-up {
    transition: none;
  }
}

.move-train-stop{
  background-image: url(/railway-cultural-property/img/rail.png);
  background-repeat: repeat-x;
  padding-bottom: 16px;
  position: relative;
}
.move-train-stop::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(44px, 6.7vw, 87px); /* レールと同じ高さの帯 */
  background-image: url(/railway-cultural-property/img/train.png);
  background-repeat: no-repeat;
  background-position: right 8% center; /* 帯(=レール)の中で上下中央に固定 */
  background-size: clamp(120px, 18vw, 231px) auto; /* 電車の幅を可変 */
  z-index: 1; /* 常にレールより前面 */
}

/*
*/
  .reverse-move-train-stop{
  background-image: url(/railway-cultural-property/img/rail.png);
  background-repeat: repeat-x;
  padding-bottom: 16px;
  position: relative;
  display: flex;
  justify-content: right;
}
.reverse-move-train-stop::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(44px, 6.7vw, 87px); /* レールと同じ高さの帯 */
  background-image: url(/railway-cultural-property/img/train-reverse.png);
  background-repeat: no-repeat;
  background-position: left 8% center; /* 帯(=レール)の中で上下中央に固定 */
  background-size: clamp(120px, 18vw, 231px) auto; /* 電車の幅を可変 */
  z-index: 1; /* 常にレールより前面 */
}

/* レール(背景)と木(img)もウインドウ幅に合わせて拡縮（vw基準） */
.move-train-stop,
.reverse-move-train-stop,
.move-train,
.reverse-move-train {
  background-size: auto clamp(44px, 6.7vw, 87px); /* レール高さ可変・最大87px */
}
main img[src*="tree"] {
  width: clamp(90px, 14vw, 184px); /* 木の幅可変・最大184px */
  height: auto;
}

.move-train {
  background-image: url(/railway-cultural-property/img/rail.png);
  background-repeat: repeat-x;
  padding-bottom: 16px;
  position: relative;
}

.move-train::after {
  position: absolute;
  content: url(/railway-cultural-property/img/train.png);
  top: 20%;
  left: 0;
  opacity: 0;
  will-change: left, transform;
}

.reverse-move-train {
  background-image: url(/railway-cultural-property/img/rail.png);
  background-repeat: repeat-x;
  padding-bottom: 16px;
  position: relative;
  display: flex;
  justify-content: right;
}

.reverse-move-train::after {
  position: absolute;
  content: url(/railway-cultural-property/img/train-reverse.png);
  top: 20%;
  /* 幅に依存せず左へ抜け切るよう right 基準で配置 */
  right: 0;
  opacity: 0;
  will-change: right, transform;
}

/* スクロールで画面に入ったら左から右へ走り、右にフレームアウト。
   10秒待ってから再び左端に出現する（走行4s + 待機10s = 14sで1周） */
.move-train.is-run::after {
  opacity: 1;
  animation:
    train-run 14s linear infinite,
    train-shake 0.4s ease-in-out infinite;
}

@keyframes train-run {
  /* 0〜4秒（= 14秒の28.571%）で走行 */
  0% {
    left: -15%;
  }
  28.571% {
    left: 100%;
  }
  /* 残り10秒は画面右外で待機 */
  100% {
    left: 100%;
  }
}

/* コトコトした揺れ */
@keyframes train-shake {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-3px) rotate(-0.4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .move-train.is-run::after {
    animation: none;
    left: 100%;
  }
}

/* move-trainと同仕様で、右から左へ走り左にフレームアウト。
   10秒待ってから再び右端に出現する（走行4s + 待機10s = 14sで1周） */
.reverse-move-train.is-run::after {
  opacity: 1;
  animation:
    train-run-reverse 14s linear infinite,
    train-shake 0.4s ease-in-out infinite;
}

@keyframes train-run-reverse {
  /* 0〜4秒（= 14秒の28.571%）で走行。rightを増やすと電車は左へ動く */
  0% {
    right: -15%;
  }
  28.571% {
    right: 100%;
  }
  /* 残り10秒は画面左外で待機 */
  100% {
    right: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reverse-move-train.is-run::after {
    animation: none;
    right: 100%;
  }
}

#intro {

  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-navy);
  width: fit-content;
  margin: 0 auto;
  border-radius: var(--radius-card);
  padding: var(--space-clamp);
  gap: 40px;
}

.intro-box img{
  min-width: 0;
}

.intro-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.intro-text h4 {
  color: var(--color-white);
}

.intro-text p {
  color: var(--color-white);
}

.intro-text .yellow-btn {
  display: inline-block;
  width: fit-content;
}

.flex-gap{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.yellow-btn,
.blue-btn,
.white-btn {
  cursor: pointer;
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  box-sizing: border-box;
}

.yellow-btn {
  background-color: var(--color-yellow);
  color: var(--color-navy);
  border: solid 2px var(--color-yellow);
  padding: 15px 20px;
  border-radius: var(--radius-btn);
  font-weight: bold;
}

.yellow-btn:hover {
  background-color: var(--color-navy);
  border: solid 2px var(--color-yellow);
  color: var(--color-yellow);
}

.blue-btn {
  background-color: var(--color-navy);
  color: var(--color-white);
  border: solid 2px var(--color-navy);
  padding: 15px 20px;
  border-radius: var(--radius-btn);
  font-weight: bold;
}

.blue-btn:hover {
  background-color: var(--color-white);
  border: solid 2px var(--color-navy);
  color: var(--color-navy);
}

.white-btn {
  background-color: var(--color-white);
  color: var(--color-navy);
  border: solid 2px var(--color-navy);
  padding: 15px 10px;
  border-radius: var(--radius-btn);
  font-weight: bold;
}

.white-btn:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

#category {
  background-color: var(--color-cream);
}

.section-title{
  display: block;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);
}

.section-title{
  text-align: center;
  margin-bottom: var(--space-clamp);
  margin-left: auto;
  margin-right: auto;
}

.section-title-left{
  text-align: left;
}

.section-title-other {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 50px 0;
}

.detail-title{
  margin-left: var(--side-padding-sp);
  margin-right: var(--side-padding-sp);
  margin-bottom: var(--space-clamp);
}

.top-title{
  font-size: var(--fs-clamp-title) ;
}

.top-title-bg {
  font-size: var(--fs-clamp-title) ;
}

.top-title span{
  display: block;
}

.section-title-other .top-title span,
#page-head .top-title span{
  color: var(--color-white) !important;
}

#pr .top-title{
  color: var(--color-white);
}

.category-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  justify-content: center;
  justify-items: center;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  width: fit-content;
  margin: 0 auto;
  padding: var(--space-clamp);
}

.category-item {
  text-align: center;
  width: fit-content;
  padding: 14%;
  /* top-title の clamp を 24/30=0.8倍。同じ画面幅で連動し最大24px */
  font-size: var(--fs-lg);
  position: relative;
  isolation: isolate;
}

/* ホバー時のドットグラデーション（右下から左上へゆっくり表示） */
.category-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 左上へ向かって 濃紺 → 白 のグラデーション */
  background-image: linear-gradient(
    to top left,
    var(--color-navy),
    var(--color-white)
  );
  /* ドット状に抜く */
  -webkit-mask-image: radial-gradient(
    circle,
    var(--color-black) 26%,
    transparent 28%
  );
  mask-image: radial-gradient(circle, var(--color-black) 26%, transparent 28%);
  -webkit-mask-size: 8px 8px;
  mask-size: 8px 8px;
  /* 右下を起点に円で隠しておく */
  clip-path: circle(0% at 100% 100%);
  transition: clip-path 0.4s ease;
}

.category-item:hover::before {
  /* 右下から左上へ広がる */
  clip-path: circle(160% at 100% 100%);
}

/* 列の間のborder（1・2列目の右側） */
.category-item:not(:nth-child(3n)) {
  border-right: 4px dotted var(--color-navy);
}

/* 段の間のborder（1段目の下側） */
.category-item:nth-child(-n + 3) {
  border-bottom: 4px dotted var(--color-navy);
}

.category-img {
  max-width: 250px;
  max-height: 250px;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}

.category-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-title {
  /* 親.category-itemのclamp(最大24px)を継承 */
  font-weight: bold;
  line-height: 1.2;
  margin-top: 10px;
}

.category-title span {
  display: block;
  /* .category-title(最大24px)に比例。14/24em=最大14px */
  font-weight: normal;
}

/*--------------マップ--------------*/
.map-block {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

.mymap {
  width: 100%;
  max-width: 1000px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mymap iframe {
  width: 100%;
  height: 600px;
  border: 0;
  /* iframeはフレックスアイテム。min-width:autoだと既定幅300pxで止まり
     .mymapからはみ出して.map-navに重なるため、0にして縮めるようにする */
  min-width: 0;
}

.map-info {
  writing-mode: horizontal-tb;
  border-bottom-left-radius: 0;
  background-color: var(--color-navy);
  color: var(--color-white);
  border-radius: 50%;
  text-align: left;
  margin-top: 20px;
  padding: 40px;
  width: fit-content;
}

#pin-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.pin {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  font-weight: bold;
  font-size: var(--fs-small);
  gap: 4px;
}

.pin img{
  width: 20px;
  height: auto;
}

.map-nav {
  display: flex;
  flex-direction: column;

  gap: 20px;
  /* ナビは縮ませず幅を確保。縮小分は隣の.mymapが吸収する（はみ出し/重なり防止） */
  flex-shrink: 0;
}

.map-nav h4{
  margin: 0 auto;
}

.map-list {
  display: grid;
  grid-template-columns: repeat(2, 120px); /* PC: 2列を左→右(row-first)の順で配置 */
  gap: 10px;
}

.map-area {
  display: block;
  width: 100%;
  padding: 10px 6px;        /* 小さめボタンに合わせてコンパクトに */
  font-size: 14px;          /* 120px幅に収まり不揃いを防ぐ */
  text-align: center;
  white-space: nowrap;      /* 県名を折り返さず1行で揃える */
}

/* 2個目の map-list（近畿全域・各鉄道館）: 1列・幅広にし、1個目との間にドット境界線 */
.map-nav .map-list + .map-list {
  grid-template-columns: 150px;             /* ボタン幅150px（1列）*/
  justify-content: start;                   /* 150pxボタンを左寄せ */
  width: 250px;                             /* 境界線を1個目と同幅(250px)に */
  align-self: flex-start;                   /* 左端を1個目に合わせる */
  padding-top: 16px;
  border-top: 4px dotted var(--color-navy); /* 1個目との境界線（ドット）*/
}

/* 1個目の列定義を2個目に合わせ、列の開始位置を一致させる */
.map-nav .map-list:first-of-type {
  grid-template-columns: repeat(2, 120px);  /* ボタンは120px固定 */
  align-self: stretch;                       /* 2個目と同じ幅(map-nav幅)に広げる */
  justify-content: start;                    /* 列を左端から開始し2個目と揃える */
}

/*----------マップここまで-----------*/

/*--------------テーマ--------------*/

#theme {
  background-color: var(--color-cream);
}

#theme-wrap {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* 枠とボタンを包む親。これを基準にボタンを配置する */
.swiper-outer {
  position: relative;
  max-width: 1090px;
  padding-top: 80px; /* 枠の上にボタンを置くスペースを確保 */
  margin: 20px 20px 0 auto;
}

.swiper-wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
}

.theme-viewport {
  height: 300px !important;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: var(--color-white);
  width: 100%;
  height: 100%;
}

/* ナビボタンを枠の外・右上に配置（基準は .swiper-outer） */
.swiper-button-prev,
.swiper-button-next {
  top: 0; /* .swiper-outer の上端（padding-top で確保した余白内）に置く */
  margin-top: 0; /* デフォルトの中央寄せ(margin-top)を打ち消す */
  left: auto; /* prev のデフォルト left 指定を無効化 */
  width: 30px;
  height: 30px;
  --swiper-navigation-size: 24px; /* 矢印アイコンの大きさ(Swiper7) */
}

/* 右端のボタン(next) */
.swiper-button-next {

  border-radius: 50%;
  border: solid 2px var(--color-navy);
  padding: 30px;
  background-color: var(--color-white);
}

.theme-btn-next {
  right: 0;
}

.swiper-button-next::after {
  color: var(--color-navy) !important;
}

/* next の左に、ボタン幅(30px)＋gap(50px)ぶん離して配置 */
.swiper-button-prev {

  border-radius: 50%;
  border: solid 2px var(--color-navy);
  padding: 30px;
  background-color: var(--color-white);
}

.theme-btn-prev {
  right: 100px; /* 0 + 30 + 50 */
}

.swiper-button-prev::after {
  color: var(--color-navy) !important;
}

/* 詳細ページ ギャラリー：サムネイル型ページネーション
   （renderBulletで各スライド画像を .thumb-bullet として出力） */
.swiper-pagination:has(.thumb-bullet) {
  position: static; /* 画像に重ねず、スライダーの下に並べる */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.thumb-bullet {
  /* Swiper既定の丸ドット装飾を打ち消し、サムネイル枠にする */
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity var(--transition-base);
}

.thumb-bullet img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.thumb-bullet:hover {
  opacity: 0.8;
}

/* 現在表示中のスライドのサムネを強調 */
.swiper-pagination-bullet-active.thumb-bullet {
  opacity: 1;
  outline: 2px solid var(--color-navy);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .thumb-bullet {
    transition: none;
  }
}

/* ナビボタンを画像の左右中央に配置（テーマ用の右上寄せを上書き） */
.detail-img .swiper-button-prev,
.detail-img .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}

.detail-img .swiper-button-prev {
  left: 16px;
  right: auto;
}

.detail-img .swiper-button-next {
  right: 16px;
  left: auto;
}

.theme-row-r {
  margin-left: var(--side-padding);
}

.theme-row-l {
  margin-right: var(--side-padding);
}

.theme-block {
  background-color: var(--color-white);
  max-width: 1140px;
}

/* 右寄せブロック：右端を親に付け、右側の角を丸める */
.r-block {
  margin-left: auto;
  margin-right: 0;
  padding: 50px 0 50px 50px;
  border-top-left-radius: var(--radius-card);
  border-bottom-left-radius: var(--radius-card);
}

/* 左寄せブロック：左端を親に付け、左側の角を丸める */
.l-block {
  margin-left: 0;
  margin-right: auto;
  padding: 50px 50px 50px 20px;
  border-top-right-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
}

.theme-card {
  position: relative;
  background-color: var(--color-black);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.theme-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-lg);
  font-weight: bold;
}

.theme-title p{
  font-size: var(--fs-lg);
  font-weight: bold;
}

.theme-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-yellow);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  line-height: 1.2;
  font-size: 16px;
}

.theme-icon span {
  display: inline;
  font-weight: bold;
}

.en {
  font-size: var(--fs-sub);
}

.dot-line {
  border-bottom: 4px dotted var(--color-navy);
  line-height: 1.5;
}

.theme-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.7;
  /* ホバーでゆっくり拡大させるための下準備 */
  transition: transform 0.4s ease;
  will-change: transform;
}

/* カードにホバーしたら画像だけズーム（overflow:hiddenで枠内に収まる） */
.theme-card:hover img {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .theme-card img {
    transition: none;
  }
  .theme-card:hover img {
    transform: none;
  }
}

.theme-card .tc-overlay {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  padding: 20px 20px;
}

.theme-card .tc-name {
  color: var(--color-white);
  font-size: var(--fs-small);
}

.theme-card .tc-copy {
  margin-top: 2px;
  color: var(--color-white);
  font-weight: bold;

  text-wrap: wrap;
}

.theme-more {
  margin-top: 20px;
  margin-right: 5%;
  display: flex;
  justify-content: right;
}

/*テーマここまで*/

.others-container {
  display: flex;
  justify-content: center;
  gap: 50px;
}

.others-card {
  /* 中身の文字量に関係なく2枚を等幅にし、一緒に縮小させる */
  flex: 1 1 0;
  min-width: 0;
  max-width: 450px;
  border-radius: var(--radius-card);
  overflow: hidden;
  /* 画像＋テキストを縦積みし、カード同士は高い方に揃える */
  display: flex;
  flex-direction: column;
}

.others-img {

  height: 300px;
}

.others-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.others-text {
  background-color: var(--color-navy);
  padding: 30px 24px 34px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* カードの余った高さを埋めて、両カードで高さを揃える */
  flex: 1;

  line-height: 1.8;
}

.others-text p,
.others-text h4 {
  color: var(--color-white);
}

.others-text h4 {
  text-align: center;
}

/* アコーディオン：中身が180pxを超える時だけ折りたたむ。
   判定と max-height の指定はJS側で行う */
.accordion {
  position: relative;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

/* 閉じている間は下端をぼかし、続きがあることを示す */
.accordion.is-collapsible:not(.is-open)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(9, 34, 76, 0), var(--color-navy));
  pointer-events: none;
}

/* 開閉ボタン（JSで生成。折りたたみ不要な時は hidden で非表示） */
.accordion-toggle {
  align-self: flex-start;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--color-white);
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

.accordion-toggle[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .accordion {
    transition: none;
  }
}

.others-link {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
  padding: 0 20px;
}

.others-link a {
  color: var(--color-white);
  position: relative;
}

.others-link a span {
  margin-left: 10px;
}

.others-link a::after {
  background-color: var(--color-white);
  bottom: -4px;
  content: "";
  height: 2px;
  left: 0px;
  position: absolute;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s;
  width: 100%;
}

.others-link a:hover::after {
  transform: scale(1, 1);
}

.arrow {
  position: relative;
  display: inline-block;
  /* ダークパネル(.others-text)内の右下に配置 */
  align-self: flex-end;
  margin-top: auto;
  vertical-align: middle;
  width: 20px;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 10px;
  height: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  transform-origin: calc(100% - 1px) 50%;
}

.arrow::before {
  transform: rotate(45deg);
}

.arrow::after {
  transform: rotate(-45deg);
}

/* ハンバーガーボタン・背景（PCでは非表示、タブレット以下で表示） */
.hamburger {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 101;
  width: 48px;
  height: 48px;
  padding: 12px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-navy);
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}

/* 開いている時は3本線を×印に変形 */
body.nav-open .hamburger span:nth-child(1) {
  transform: translateY(10.5px) rotate(45deg);
}
body.nav-open .hamburger span:nth-child(2) {
  opacity: 0;
}
body.nav-open .hamburger span:nth-child(3) {
  transform: translateY(-10.5px) rotate(-45deg);
}

.nav-backdrop {
  display: none;
}

#pr {
  background-color: var(--color-navy);
}

.pr-banner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.pr-banner a {
  max-width: 300px;
  min-width: 0;
}

.pr-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タブレットサイズ以下：サイドナビをドロワー化し、ハンバーガーで開閉 */
@media (max-width: 1024px) {
  .hamburger {
    display: flex;
  }

  /* flexの隙間を無くしメインを全幅に（ドロワーは position:fixed で残す） */
  #sidenav {
    width: 0;
    min-width: 0;
  }

  #sidenav-overlay {
    width: 100%;
  }

  /* ドロワー本体：普段は左外に隠し、開いたらスライドイン */
  .fixed-area {
    top: 0;
    left: 0;
    min-height: 100vh;
    max-height: 100vh;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    overflow-y: auto; /* 中身が縦に長い場合スクロール可能に */
  }

  body.nav-open .fixed-area {
    transform: translateX(0);
    z-index: 100; /* ドロワー展開時はヘッダー(z-index:100)より前面に */
  }

  /* 背景オーバーレイ：開いた時だけ表示 */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
  }

  body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  #intro {
    height: auto;
  }

  .intro-box {
    flex-direction: column;
    gap: var(--space-clamp);
  }

  .intro-text .yellow-btn {
    margin-left: auto;
    margin-right: auto;
  }

  .section-title-left{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  }

  .section-title-left,.section-title-other{
  margin-top: 100px;
}

  .map-block {
    flex-direction: column-reverse;
  }

  /* スマホでは横並び＋幅に合わせて自由に折り返し（Grid→flexへ上書き） */
  .map-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    grid-template-rows: none; /* Grid指定を無効化 */
  }

  .map-area {
    width: auto; /* 140px固定をやめ、内容幅に合わせる */
  }

  .map-nav .map-list + .map-list {
    width: auto;              /* モバイルは自然幅（flex折り返し）*/
    align-self: stretch;      /* 全幅にして中で中央寄せ（左寄せ解除）*/
    justify-content: center;  /* 画面中央寄せ */
  }

  .map-nav .map-list:first-of-type {
    justify-content: center;   /* モバイルは従来どおり中央寄せ */
  }

}

@media (max-width: 768px) {

  .intro-box img {
    max-height: 160px;
  }

  .category-box {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 旧設定（全要素の下にdotted）: コメントアウト
  .category-item {
    border-right: none !important;
    border-bottom: 4px dotted var(--color-navy);
  }
  */
  /* スマホ：各要素の"間"だけに dotted（2カラムの内側の区切りのみ） */
  .category-item:nth-child(odd) {
    border-right: 4px dotted var(--color-navy); /* 列の間（縦線） */
  }
  .category-item:nth-child(even) {
    border-right: none;
  }
  .category-item {
    border-bottom: 4px dotted var(--color-navy); /* 行の間（横線） */
  }
  .category-item:nth-last-child(-n + 2) {
    border-bottom: none; /* 最下行は線なし */
  }

  .others-container {
    flex-direction: column;
    align-items: center;
  }

  .r-block {
    padding-left: var(--side-padding);
  }

  .l-block {
    padding-right: var(--side-padding);

  }

  .swiper-outer {
    padding-top: 60px;
  }

  .swiper-button-prev,
  .swiper-button-next{
    padding: 20px;
  }

  .theme-btn-prev{
    right: 70px;
  }

  .l-block .swiper-outer {
    margin-right: 0;
  }

  .theme-more {
    justify-content: center;
  }

  .others-card {
    flex: none;
    max-width: none;
  }

}

#breadcrumb {
  background-color: var(--color-navy);
  color: var(--color-white);
  padding: 20px 2%;
}

#breadcrumb-list {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}

#breadcrumb li {
  line-height: 1;
  display: inline;
  position: relative;
}

#breadcrumb li:not(:last-of-type) {
  padding-right: 2.2em;
}

#breadcrumb li:not(:last-of-type)::after {
  content: "";
  background: var(--color-white);
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 1em;
  transform: rotate(45deg);
}

#breadcrumb-list a {
  text-decoration: underline;
  text-decoration-color: var(--color-white);
  text-underline-offset: 4px;
}

#page-head,
#share {
  background: var(--color-navy);
}

#page-head h3,
#page-head p,
#share h3,
#share p {
  color: var(--color-white);
}

#page-head {
  min-height: 137px;
  padding-top: 0;
  padding-bottom: 20px;
  display: grid;
  align-items: flex-end;
}

/* list.html（#result-list を持つページ）のみ page-head を中央寄せ */
body:has(#result-list) #page-head {
  align-items: center;
}

.update-text{
  display: block;
  text-align: right;
  font-size: var(--fs-small);
}

.page-head-logo {
  display: none;
}

.page-head-lead {

  margin-top: 20px;
  max-width: 800px;
}

.page-head-lead p {
  line-height: 1.6;
}

#others-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-clamp);
}

.others-item {
  display: flex;
  flex-direction: row;
  gap: 50px;
  /* 行を親幅いっぱい（最大1000px）に。align-items:center の親でも縮まないよう幅を明示 */
  width: 100%;
  max-width: 1000px;
}

.others-item-img {
  /* 画像とテキストを均等（50%ずつ）に分け、一緒に縮ませる */
  flex: 1 1 0;
  min-width: 0;
  max-width: 500px;
  height: 300px;
}

.others-item-img img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.others-item-text {
  flex: 1 1 0;
  min-width: 0;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.others-item-text-title {
  display: inline-block;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 10px 20px;
  width: 100%;
  border-radius: 10px;
}

.others-item-text dl {
  display: grid;
  grid-template-columns: max-content 1fr;
}

.others-item-text dt,
.others-item-text dd {
  margin: 0;
}

.reverse {
  flex-direction: row-reverse;
}

#share p {
  margin-top: 20px;
  font-size: 1.2em;
}

#share-list {
  display: flex;
  flex-direction: row;
  gap: 50px;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.share-btn {
  display: inline-block;
}

.share-btn .share-link {
  display: block;
  transition: transform var(--transition-base);
}

.share-btn .share-link:hover {
  transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .share-btn .share-link {
    transition: none;
  }
  .share-btn .share-link:hover {
    transform: none;
  }
}

#about-site,
#faq {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.about-site-item,
.faq-item {
  display: flex;
  flex-direction: column;
}

.about-site-item h4,
.faq-item-title {
  margin-bottom: 20px;
}

.about-site-item a {
  text-decoration: underline;
}

.faq-item-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.q-mark {
  display: flex;
  color: var(--color-white);
  background: #09224c;
  border-radius: 50%;
  padding: 13px 10px;
  justify-content: center;
  align-items: center;
}

.faq-item-text {
  width: fit-content;
  background: var(--color-cream);
  padding: 20px var(--side-padding-sp);
  border-radius: 20px;
}

.original-box-shadow {
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.detail-gallery {
  margin-top: 20px;
}

.detail-img {
  width: 100%;
  padding-top: 20px;
}

.detail-img-viewport {
  max-width: 100%;
}

.detail-img-viewport .swiper-slide {
  width: 100%;
  height: 600px;
}

.detail-img-viewport img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.detail-img-btn-prev,
.detail-img-btn-next {
  top: 50% !important;
}

.detail-img-btn-prev {
  left: 20px;
}

.detail-img-btn-next {
  right: 20px;
}

#detail-contents {
  max-width: 1200px;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--section-clamp);
}

.red-tag,
.blue-tag,
.yellow-tag,
.green-tag,
.purple-tag,
.pink-tag {
  display: inline-block;
  padding: 6px 10px;
  border-radius: var(--radius-card);
  color: var(--color-white);
}

.red-tag {
  background: #e94b3c;
}

.blue-tag {
  background: #3d7ee8;
}

.yellow-tag {
  background: #f5b931;
}

.green-tag {
  background: #3dbe8b;
}

.purple-tag {
  background: #9b5de5;
}

.pink-tag {
  background: #f25c8e;
}

#detail-name {
  display: inline-block;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 1.17em;
  font-size: var(--fs-small);

}

#detail-copy {
  margin-top: 20px;
  font-size: var(--fs-clamp);

  text-wrap: wrap;
  line-height: 1.4;
}

#detail-lead-copy {
  background: var(--color-cream);
  border-radius: calc(var(--radius-card)/2);

  padding:40px 4%;
  margin-top: var(--space-clamp);
  font-weight: bold;
  width: fit-content;

}

/* ▼ ページ見出し（左寄せ: about/faq/list/詳細）を clamp 化（不要ならこのブロックを削除で元に戻ります） */
/* 従来は共通 .top-title{ font-size: var(--fs-title) }（最大30px）を継承。
   index等の中央見出し(.section-title)や railway-monument/quasi には影響しない */
.section-title-left .top-title {
  font-size: clamp(22px, 1.33vw + 17px, 34px);
}
/* ▲ */
#detail-info,
.detail-article {
  margin-top: var(--section-clamp);
}

.detail-article{
  margin-left: var(--side-padding-sp);
  margin-right: var(--side-padding-sp);
}

.detail-heading {
  margin-top: var(--space-clamp);
  margin-bottom: 20px;
}

#detail-info dl {
  display: grid;
  grid-template-columns: min(30vw, 15em) auto;
  border: solid 1px var(--color-navy);
  border-radius: var(--radius-card);
  overflow: hidden;
}

#detail-info dt,
#detail-info dd {
  padding: 50px 20px;
  display: flex;
  align-items: center;
}

#detail-info dt {
  background: var(--color-navy);
  color: var(--color-white);
  font-weight: bold;
}

#detail-info dt:not(:last-of-type) {
  border-bottom: solid 1px var(--color-white);
}

#detail-info dd:not(:last-child) {
  border-bottom: solid 1px var(--color-navy);
}

#detail-map iframe {
  width: 100%;
  height: 600px;
  background: var(--color-cream);/* 読み込み中に見える背景（追加） */
  border: 0;/* frameborder=0 のCSS版 */

}

.detail-map-btn-area {
  padding: 50px;
  text-align: center;
}

@media (max-width: 1024px) {
  .page-head-logo {
    display: block;
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    position: fixed;
    top: var(--header-h, 0px);
    left: 0;
    z-index: 5;
    background: var(--color-navy);
    padding: 10px;
  }

  .page-head-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* トップページ：メインビジュアル表示中は非表示。scroll-to-top と同様、スクロールで通過後に is-visible で固定表示 */
  #main-visual + .page-head-logo {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
  }

  #main-visual + .page-head-logo.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 768px) {
  #about{
    line-height: 1.6;
  }

  .gutter {
    padding-left: var(--side-padding-sp);
    padding-right: var(--side-padding-sp);
  }

  .others-item {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  /* スマホでは「タイトル → 画像 → 本文」の縦並びにする。
     テキスト枠を display:contents で透過させ、中の見出し・本文を
     .others-item のフレックスに直接参加させて order で並べ替える */
  .others-item-text {
    display: contents;
  }
  .others-item-text-title {
    order: 1;
    max-width: 500px;
  }
  .others-item-img {
    order: 2;
    flex: none; /* 縦並びでは基準幅0で潰れないよう固定に戻す */
    width: 100%;
    max-width: 500px;
  }
  .others-item-text p {
    order: 3;
    width: 100%;
    max-width: 500px;
  }
  .others-item-text dl {
    order: 4;
    width: 100%;
    max-width: 500px;
  }

  #detail-info dl {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border: 0;
  }

  #detail-info dt,
  #detail-info dd {
    padding: 20px;
    border: 0 !important;
  }

  #detail-info dt {
    border-radius: 20px;
  }

  .detail-img-viewport .swiper-slide {
    height: 400px;
  }

  #detail-map iframe {
    height: 400px;
  }

  .result-list {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* ============================================================
   検索結果一覧（list.html）
   ============================================================ */
#summary-area {
  background: var(--color-cream);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px var(--side-padding);
}

.result-summary {
  display: inline-block;
  font-weight: bold;
}

.result-summary strong {
  color: var(--color-navy);
  font-size: var(--fs-lg);
}

.result-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 30px;
}

/* スマホでもタイル表示は2カラム固定 */
@media (max-width: 768px) {
  .result-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* 1件のカード：サムネ＋カテゴリー＋名称＋コピー */
.result-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: solid 2px var(--color-navy);
  border-radius: var(--radius-card);
  overflow: hidden;
  color: inherit;

}

.result-area{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 10px ;
}

#view-switch {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.tyle-switch-btn,
.list-switch-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.tyle-switch-btn-icon {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  width: fit-content;
  height: fit-content;
}

.list-switch-btn-icon {
  display: grid;
  grid-template-columns: 6px 1fr;
  grid-template-rows: repeat(3, 6px);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  width: fit-content;
  height: fit-content;
}

.square {
  width: 6px;
  height: 6px;
}

.rectangle {
  width: 14px;
  height: 6px;
}

.blue-btn .square,
.blue-btn .rectangle {
  background: var(--color-white);
}

.blue-btn:hover .square,
.blue-btn:hover .rectangle {
  background: var(--color-navy);
}

.white-btn .square,
.white-btn .rectangle {
  background: var(--color-navy);
}

.white-btn:hover .square,
.white-btn:hover .rectangle {
  background: var(--color-white);
}

.result-card-img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.result-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.result-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 左右は4%で伸縮し20pxで頭打ち（= clamp(0px, 4%, 20px) 相当） */
  padding: 16px min(4%, 10px) 24px;
  font-size: 16px;
}

/* カテゴリーのラベル（丸バッジ） */
.result-card-cat {
  align-self: flex-start;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: var(--fs-small);
  font-weight: bold;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
}

.result-card-name {
  font-size: clamp(16px, 0.22vw + 15.2px, 18px);
  line-height: 1.4;
  text-wrap: auto;
}

.result-card-copy {
  font-size: clamp(12px, 2.1vw, 14px);
  line-height: 1.6;
  /* 3行を超えたら省略 */
  display: -webkit-box;

  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.result-empty {
  line-height: 2;
  font-weight: bold;
}

@media (prefers-reduced-motion: reduce) {
  .result-card {
    transition: none;
  }
  .result-card:hover {
    transform: none;
  }
}

/* ============================================================
   検索窓オートコンプリート（サイドナビ）
   ============================================================ */
.search-box {
  position: relative; /* 候補リストの配置基準 */
}

.autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--color-white);
  border: solid 1px var(--color-navy);
  border-radius: 12px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 5;
  box-shadow: 0 6px 16px rgba(9, 34, 76, 0.2);
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-navy);
  font-size: 0.85rem;
  line-height: 1.3;
}

.autocomplete-item:hover,
.autocomplete-item.is-active {
  background: var(--color-cream);
}

.autocomplete-name {
  font-weight: bold;
}

/* ============================================================
   検索結果の表示切替（タイル / リスト）
   ============================================================ */
#summary-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-left: var(--side-padding);
  padding-right: var(--side-padding);

}

#view-switch {
  display: flex;
  gap: 10px;
}

.tyle-switch-btn,
.list-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
}

/* 切替ボタンのアイコン（色は文字色に追従＝currentColor） */
.tyle-switch-btn-icon {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  width: 16px;
  height: 16px;
}
.tyle-switch-btn-icon .square {
  background: currentColor;
  border-radius: 1px;
}

.list-switch-btn-icon {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 3px 4px;
  width: 18px;
}
.list-switch-btn-icon .square {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 1px;
}
.list-switch-btn-icon .rectangle {
  height: 3px;
  background: currentColor;
  border-radius: 1px;
}

/* ---- リスト表示（.is-list 付与で切替）---- */
.result-list.is-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.result-list.is-list .result-card {
  flex-direction: row;
}
.result-list.is-list .result-card-img {
  width: 300px;
  flex-shrink: 0;
  aspect-ratio: 3 / 2;
}
.result-list.is-list .result-card-body {
  flex: 1;
  justify-content: center;
}

@media (max-width: 768px) {
  #summary-area {
    padding-left: var(--side-padding-sp);
    padding-right: var(--side-padding-sp);
  }
  .result-list.is-list .result-card-img {
    width: 100%;
    height: 200px;
  }

  .result-list.is-list .result-card {
    flex-direction: column;
  }

  #view-switch {
    display: none;
  }

  .scroll-down{
    bottom: 80px;
  }
}

/* ============================================================
   画像モーダル（ライトボックス）
   ============================================================ */
.detail-img .swiper-slide img {
  cursor: zoom-in; /* クリックで拡大できることを示す */
}

.image-modal {
  position: fixed;
  inset: 0;
  z-index: 102;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(0 0 0 / 60%);
  /* ふわっと表示：既定は非表示、.is-open でフェードイン */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
}
.image-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.image-modal-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  /* 開くとき軽く拡大しながら現れる */
  transform: scale(0.96);
  transition: transform var(--transition-base);
}
.image-modal.is-open .image-modal-img {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .image-modal,
  .image-modal-img {
    transition: none;
  }
}
.image-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
/* × を2本の線(疑似要素)で描画 */
.image-modal-close::before,
.image-modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 3px;
  background: var(--color-white);
  border-radius: 2px;
}
.image-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.image-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

body.modal-open {
  overflow: hidden;
}

/* ボタンの基本スタイルと非表示設定 */
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: var(--color-navy);
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 1.5em;
  opacity: 0;
  transition:
    opacity 0.3s,
    transform 0.3s;
  pointer-events: none;
  z-index: 5;
  font-size: 0.8rem;
}

/* ボタンが表示されるときのスタイル */
.scroll-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background-color: #4e5e79;
  transform: scale(1.1);
}

.arrow-top {
  position: relative;
  display: inline-block;
  width: 3px;
  height: 28px;
  margin: 0 12px;
  border-radius: 9999px;
  background-color: #ffffff;
}

.arrow-top::before,
.arrow-top::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 1.5px);
  width: 3px;
  height: 20px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: 50% 1.5px;
}

.arrow-top::before {
  transform: rotate(45deg);
}

.arrow-top::after {
  transform: rotate(-45deg);
}

/* ============================================================
   検索結果ページネーション
   ============================================================ */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 50px;
}
.pagination[hidden] {
  display: none;
}
.pagination-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: solid 1px var(--color-navy);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  font-weight: bold;
  cursor: pointer;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}
.pagination-btn:hover:not(:disabled):not(.is-current):not(.pagination-nav) {
  background: var(--color-cream);
}
.pagination-btn.is-current {
  background: var(--color-navy);
  color: var(--color-white);
  cursor: default;
}
.pagination-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
/* 「前へ」「次へ」ボタンは枠線なし・ホバー無効 */
.pagination-btn.pagination-nav {
  border: none;
}

/* 検索結果カードの lead はリスト表示のときだけ表示 */
.result-card-lead {
  display: none;
  background: var(--color-cream);
  border-radius: 10px;
  padding: 10px;
}
.result-list.is-list .result-card-lead {
  margin-top: 8px;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--color-navy);
  display: block; /* 基本ルールの display:none を上書きして表示 */
  /* 高さを1行に固定し、あふれたら … で省略 */
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 80px;
}

/* ============================================================
   マップ「エリアでしぼる」：PC以外(1024px以下)は畳み、見出しクリックで開閉
   ============================================================ */
@media (max-width: 1024px) {
  .map-nav h4 {
    cursor: pointer;
    position: relative;
    user-select: none;
    margin-left: 0;
    margin-right: auto;
    font-size: 1.2em;
  }
  .map-nav h4::after {
    content: "";
    display: inline-block;
    margin-left: 10px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid currentColor;
    vertical-align: middle;
    transition: transform var(--transition-base);
  }
  .map-nav.is-open h4::after {
    transform: rotate(180deg);
  }
  .map-nav:not(.is-open) .map-list {
    display: none;
  }

  #breadcrumb {
    display: none;
  }
}

#list{
  padding-top: var(--space-clamp);
  padding-bottom: var(--space-clamp);
}

/* フッター(SSI)が表示されている間（mainから外れた時）は #scroll-to-top・.page-head-logo・.hamburger を隠し、フッターに重ならないようにする */
body.footer-in-view #scroll-to-top,
body.footer-in-view .scroll-to-top,
body.footer-in-view .page-head-logo,
body.footer-in-view .hamburger {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* header.inc のモバイルメニューを開いている間は、本コンテンツのハンバーガーを非表示
   （2つのメニュー起点の重なり・並存を防ぐ。JR西日本が body.is-toggleActive を付与）*/
body.is-toggleActive .hamburger,
body.is-dropdownActive .hamburger {   /* タブレットのホバー展開(アコーディオン)時も非表示 */
  display: none;
}