/* ===================================================================
   ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ヒーローレイアウトモジュール↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
   =================================================================== */
.hero-layout-body {
  width: 100%;
  padding: 20px 0;
  background-color: #f0f0f0;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr; /* 左を2、右を1の比率に */
  gap: 15px; /* 写真の間の隙間 */
  padding: 0 15px;
}

/* 各スライダーの共通設定 */
.hero-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠いっぱいに画像を広げる */
  display: block;
}

.hero-left {
  width: 100%;
}

.hero-left .left-image-body {
  height: auto;
}

.left-image,
.left-image a,
.left-image img {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-right {
  display: grid;
  gap: 5px;
  min-width: 0;
  max-height: 96%;
  overflow:hidden;
}

.hero-right-top, .hero-right-bottom {
  width:100%;
  min-width:0;
  overflow:hidden;
}

.hero-right-bottom .swiper-body { height: 100%;}
/*.hero-right-bottom .mySwiper .swiper-wrapper {
  align-items: flex-end !important;
  height: 100% !important;
}*/

.hero-right .swiper {
  width: 100%;
  height: 100%;
}

.swiper-body { max-width: none; background-color: #f0f0f0; height: 100%; }
.mySwiper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  display: block !important;
}
.mySwiper .swiper-wrapper {
  display: flex !important;
  align-items: stretch;
  height: 100%;
  transition-timing-function: linear !important;
}
.mySwiper .swiper-slide {
  display: flex;
  flex-shrink: 0 !important;
  height: auto !important;
}
.hero-right-top .mySwiper .swiper-slide {
  justify-content: space-around;
}
.mySwiper .swiper-slide img {
  width:100%;
  height:100%;
  object-fit:contain;
}


/* スマホ表示（929px以下）の設定 */
@media (max-width: 929px) {
  .hero-container {
    grid-template-columns: 1fr; /* 縦1列にする */
    height: auto;
  }
  .left-image-body {
    width: 100%; aspect-ratio: 1 / 0.7 !important;
  }
  .left-image, .left-image a, .left-image img {
    object-fit: cover;
    object-position: center top;
  }
  .hero-right {
    display: flex !important;
    flex-direction: column;
  }

  .hero-right .pdfSwiper {
    aspect-ratio: 1 / 0.7;
    height: 100%;
  }
  /*.hero-right .trainSwiper {
    aspect-ratio: 16 / 4.5;
    height: 100%;
  }*/

  .pdfSwiper .swiper-wrapper {
    height: 100% !important;
    width: 50%;
  }
  /*.trainSwiper .swiper-wrapper {
    height: 100% !important;
    width: 33%;
  }*/

  /*.mySwiper .swiper-slide {
    width: 100% !important;
    height: 100% !important;
  }*/
  .mySwiper .swiper-slide img, 
  .pdfSwiper img, 
  .trainSwiper img {
    height: 100%;
    width: 100%;
    object-fit: fill;
  }
}

/* 矢印ボタンの中央揃え（Swiperのデフォルトを補正） */
.swiper-button-next, .swiper-button-prev {
  top: 50% !important;
  transform: translateY(-50%);
}


/* 車両スライド用 */
.vehicle-card-link {
  text-decoration: none;
  display: flex;
  transition: opacity 0.3s;
}
.vehicle-card-link:hover {
  opacity: 0.8;
}
.vehicle-card {
    display: flex;
    box-sizing: border-box;
    background-color: #ffffff;
}
.vehicle-card-label {
    display: flex;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    align-items: center;
    justify-content: flex-start;
    margin-right: 10px;
    color: #ffffff;
    padding: 5px 2px;
}
.vehicle-card-label.train-color {
  background-color: var(--train-color);
}
.vehicle-card-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.vehicle-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
    padding: 4px;
}
.vehicle-card-header.train-color {
  border-bottom: 2px solid var(--train-color);
}
.vehicle-card-title {
    margin: 0;
    font-size: 32px;
    color: black;
    font-family: fantasy;
	transform: scaleY(1.4);
}
.vehicle-card-meta {
    font-size: 11px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}
.vehicle-card-badge {
  display: flex;
  flex-direction: column;
  color: #ffffff;
  width: 44px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 10%;
}
.vehicle-card-badge .badge-top-text {
  font-size: 12px;
  font-weight: bold;
}
.vehicle-card-badge .badge-bottom-text {
  font-size: 10px;
}
.vehicle-card-badge.m-linear {
  background-color: var(--color-bg-card-badge-linear);
}
.vehicle-card-badge.m-rubber {
  background-color: var(--color-bg-card-badge-rubber);
}
.vehicle-card-line.train-color {
  color: var(--train-color);
}
@media (max-width: 1300px) {
  .vehicle-card-title {
    font-size: 22px;
  }
  .vehicle-card-meta {
    font-size: 9px;
  }
}
/* スマホ表示 */
@media (max-width: 929px) {
  .vehicle-card-label {
    margin-right: 7px;
    padding: 4px 3px;
    font-size: 12px;
  }
  .vehicle-card-header {
    margin-bottom: 3px;
    padding: 1px;
  }
  .vehicle-card-title {
    font-size: 20px;
    font-weight: 400;
  }
  .vehicle-card-meta {
    font-size: 10px;
  }
  .vehicle-card-badge {
    width: 33px;
    height: 20px;
  }
  .vehicle-card-badge .badge-top-text,
  .vehicle-card-badge .badge-bottom-text {
  font-size: 7px;
  font-weight: normal;
  }

}
/* 車両スライド用 */


/* ===================================================================
   ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ヒーローレイアウトモジュール↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
   =================================================================== */

/* ===================================================================
   ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓PDFリストモジュール↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
   =================================================================== */
/* ===================================================================
   共通・ベース
   =================================================================== */
.pdf-list-body { max-width: none; background-color: #f8f8f8; }
.pdf-section-wrapper { padding: 40px 15px; }
.section-title {
  font-size: 28px; font-weight: bold; color: #333; text-align: center;
  margin: 0 auto 30px auto; max-width: 300px; border-bottom: 5px solid #004da1;
}
.pdf-tabs-container { max-width: 1200px; margin: 0 auto; }

/* 1段目：親カテゴリ */
.pdf-parent-tabs {
  display: flex; justify-content: space-around;
  border-bottom: 2px solid #ddd; overflow: visible; white-space: nowrap;
  -ms-overflow-style: none; scrollbar-width: none; /* スクロールバー非表示 */
}
/* Chrome, Safari用のスクロールバー非表示設定 */
.pdf-parent-tabs::-webkit-scrollbar {
  display: none;
}
.parent-tab-btn {
  /* 均等に配置 */
  flex: 1;
  /* ボタン内のレイアウト調整 */
  display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;

  /* 余白とフォント設定 */
  padding: 8px 0; font-size: 16px; line-height: 1.3; color: #888;
  background: none; border: none; font-weight: bold; 
  cursor: pointer; padding: 10px 5px; position: relative;
}
.parent-tab-btn.is-active { color: #007bff; }
.parent-tab-btn.is-active::after {
  content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 3px; background-color: #007bff;
}

.pdf-tab-panel { background: #fff; border: 1px solid #ccc; overflow: hidden; }

/* ===================================================================
   コンテンツ（リスト）の共通スタイル（画像レイアウト統合）
   =================================================================== */
.pdf-list-item {
  height: 72px; padding: 0; border-bottom: 1px dotted #eee; /* 点線境界 */
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.pdf-date { font-size: 12px; color: #888; font-weight: bold; }
.pdf-item-bottom { display: flex; align-items: center; }

/* アイコン（画像に合わせて調整） */
.pdf-link-icon {
  width: 12px; height: 12px; border: 2px solid #007bff; border-radius: 50%; /* 青い○ */
  margin-right: 10px; flex-shrink: 0; display: inline-block;
}

.pdf-link {
  color: #333 !important; text-decoration: none !important; font-size: 15px;
  font-weight: 500; display: flex; align-items: center; line-height: 1.3;
}
.pdf-link-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
}
.pdf-link:hover { color: #007bff !important; text-decoration: underline !important; }

/* もっと見るボタン */
.more-btn-container {
  height: 60px; display: flex; align-items: center; justify-content: flex-end; /* 右下配置 */
  border-top: 1px solid #eee; padding-right: 20px;
}
.more-btn {
  padding: 6px 20px; border: 1px solid #007bff; color: #007bff !important;
  border-radius: 4px; font-size: 13px; text-decoration: none;
}

/* ===================================================================
   スマホレイアウト (929px以下) - 年度タブは「左サイド垂直」
   （画像2枚目の状態へ修正）
   =================================================================== */
@media screen and (max-width: 929px) {
  .pdf-flex-main { display: flex; flex-direction: row; } /* 左右に分割 */
  
  /* 左サイドの年度ナビ */
  .pdf-tabs-nav-responsive {
    width: 90px; /* 左側の固定幅 */
    display: flex;
    flex-direction: column; /* 垂直に並べる */
    background-color: #f0f0f0; /* 薄グレー */
    border-right: 1px solid #ccc;
    flex-shrink: 0;
  }
  
  .pdf-tab-btn {
    padding: 15px 5px;
    border: none;
    border-bottom: 1px solid #ddd;
    background: none;
    color: #666;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    flex: 0 0 20%;
  }
  
  .pdf-tab-btn.is-active {
    background-color: #fff;
    color: #007bff;
    border-left: 4px solid #007bff; /* 左側の青いアクセント線 */
    position: relative;
    z-index: 2;
  }

  /* 右側のコンテンツエリア */
  .pdf-tabs-content { flex: 1; padding: 0 10px; display: flex; flex-direction: column; overflow: hidden; }
  .pdf-list-area { height: auto !important; min-height: 350px; } /* スマホは高さ固定解除 */
  .pdf-list-item { height: auto; min-height: 72px; padding: 0; }
  
  /* スマホは文字幅が狭いため、2行まで許容 */
  .pdf-link-text { -webkit-line-clamp: 2; }
}

/* ===================================================================
   PCレイアウト (930px以上) - 年度タブは「水平（横並び）」
   （画像1枚目から左サイドタブを除去）
   =================================================================== */
@media screen and (min-width: 930px) {
  .pdf-flex-main { display: flex; flex-direction: column; } /* 上下に配置 */
  /* タブ部分の改行なし */
  .pc-br { display: none;}

  /* 上部の年度ナビ */
  .pdf-tabs-nav-responsive {
    display: flex;
    flex-direction: row; /* 水平並び */
    width: 100%;
    background-color: #eee;
    border-bottom: 1px solid #ccc;
    flex: 0 0 auto; /* 高さを内容に合わせる */
  }

  .pdf-tab-btn {
    padding: 15px 25px;
    border: none;
    border-right: 1px solid #ddd; /* 垂直境界線 */
    background-color: #eee;
    color: #666;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
    flex: 0 0 20%;
  }

  .pdf-tab-btn.is-active {
    background-color: #fff;
    color: #007bff;
    box-shadow: inset 0 3px 0 #007bff; /* 上部の青いアクセント線 */
    position: relative; z-index: 2;
  }

  /* 下部のリストエリア */
  .pdf-tabs-content { padding: 0 30px; display: flex; flex-direction: column; height: 420px; box-sizing: border-box; }
  .pdf-list-area { flex: 0 0 360px; margin-top: 10px; overflow: hidden; } /* 5件分の高さ固定 */

  /* もっと見るボタンエリア（ここを60pxに固定） */
  .more-btn-container {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右下配置 */
    padding-right: 20px;
    border-top: 1px solid #eee;
    margin-top: auto; /* リストが少なくても最下部に固定 */
  }
}
/* ===================================================================
   ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑PDFリストモジュール↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
   =================================================================== */

/* ===================================================================
   ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓メインコンテンツグリッドモジュール↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
   =================================================================== */
.content-grid-body { max-width: none; background-color: #f0f0f0; }
/* グリッド全体のコンテナ */
.content-grid {
  display: grid;
  /* 列の幅を自動調整（最小250px、最大1カラム） */
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px 0; /* アイテム間の余白 */
  padding: 20px;
}

/* 各カードのスタイル */
.content-card {
  width: 100%;
  padding: 10px;
}

/* 4番目（右端）の仕切り線を消す */
.card-link:nth-child(4n) {
  border-right: none;
}

.card-link {
  display: flex;
  text-decoration: none !important;
  text-align: center;
  transition: opacity 0.2s;
  border-right: 1px solid #ccc;
  padding: 0 10px
}

.card-link:hover {
  opacity: 0.6;
}

.card-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3; /* 画像のアスペクト比を統一 */
  object-fit: cover;
}

.card-title h3 {
  font-size: 1.1rem;
  margin: 10px 0 5px;
}

.card-text p {
  font-size: 0.85rem;
  color: #666;
}

/* --- レスポンシブ対応（スマホ表示） --- */
@media (max-width: 929px) {
  .content-grid {
    /* スマホでは2列にする */
    grid-template-columns: repeat(2, 1fr);
  }
  
  .card-link:nth-child(4n) {
    border-right: 1px solid #ccc; /* PCで消した線を復活 */
  }
  
  .card-link:nth-child(2n) {
    border-right: none; /* 2列目の右線を消す */
  }
}
/* ===================================================================
   ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑メインコンテンツグリッドモジュール↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
   =================================================================== */

/* ===================================================================
   ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓インフォグリッドモジュール↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
   =================================================================== */
.info-grid-body { max-width: none; background-color: #f8f8f8; }
/* グリッドコンテナ */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列に並べる */
  gap: clamp(30px, 10vw, 150px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 個別のカード */
.info-card {
  text-decoration: none;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央寄せ */
  transition: opacity 0.3s;
}

.info-card:hover {
  opacity: 0.8; /* ホバー時に少し薄くする */
}

/* 丸い写真の枠 */
.info-circle-img {
  width: 200px;  /* サイズは適宜調整 */
  height: 200px;
  border-radius: 50%; /* ★重要：正方形を円にする */
  overflow: hidden;
  border: 2px solid #000; /* 黒い縁取り */
  margin-bottom: 20px;
}

.info-circle-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を歪ませずに円に収める */
}

/* 下のボタン風ラベル */
.info-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  max-width: 280px;
  height: 3em;
  line-height: 1.5;
  overflow: hidden;
  padding: 10px 10px;
  border: 2px solid #000; /* 黒い縁取り */
  border-radius: 50px;    /* ★重要：角を丸くしてカプセル型に */
  background-color: #fff;
  font-weight: bold;
  font-size: 0.95rem;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 少し影をつけると立体的になります */
}

/* レスポンシブ：スマホでは縦並び */
@media (max-width: 929px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .info-circle-img {
    width: 160px;
    height: 160px;
  }
}
/* ===================================================================
   ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑インフォグリッドモジュール↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
   =================================================================== */