/*
 * CSS Style Sheet for JAPAN JIMNY JAM Official Website
 *
 * This stylesheet implements the design based on the provided screenshot,
 * focusing on responsiveness, accessibility, and modern web standards.
 *
 * - Reset and Base Styles
 * - Layout (Container, Sections)
 * - Header & Navigation
 * - Main Visual
 * - Section Titles & Text
 * - Tables
 * - Buttons
 * - Alert Boxes
 * - Content Items (Talk Shows, Live)
 * - Access Section
 * - Footer
 * - Utility Classes
 * - Media Queries for Responsiveness
 * - Accessibility Enhancements
 */

/* ==========================================================================
   Base Styles & Reset
   ========================================================================== */
:root {
  /* Colors */
  --color-primary: #EE421D;
  /* Red */
  --color-secondary: #FFFFFF;
  /* Dark Blue for header/footer */
  --color-text-dark: #333;
  --color-text-light: #fff;
  --color-background-light: #f8f8f8;
  /* Light gray for section titles */
  --color-border: #ddd;
  --color-table-stripe: #f2f2f2;

  --color-hover-bg: #f0f0f0;
  /* ホバー時の薄いグレー色 */
  /* この行はコメントではなく、有効なCSSとして残す */


  /* Typography */
  --font-family-base: 'Noto Sans JP', sans-serif, Arial, Helvetica;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* Spacing */
  --spacing-small: 10px;
  --spacing-medium: 20px;
  --spacing-large: 40px;
  --spacing-section: 60px;
  /* Equivalent to mt60 from original */
}

/* Basic Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-dark);
  background-color: #fff;
  /* Main background is white */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utility for preventing scroll when mobile nav is open */
body.no-scroll {
  overflow: hidden;
}

/* Text selection style */
::selection {
  color: #fff;
  background: var(--color-primary);
  /* Use primary color for selection */
}

::-webkit-selection {
  color: #fff;
  background: var(--color-primary);
}

::-moz-selection {
  color: #fff;
  background: var(--color-primary);
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity 0.3s ease;
  /* Smoother hover effect */
}

a:hover,
a:focus {
  text-decoration: underline;
  opacity: 0.8;
  outline: none;
  /* Remove focus outline on click, for better UX on hover */
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  /* Prevents extra space below images */
}

/* Accessibility: Visually hidden text for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Layout & Containers
   ========================================================================== */
.container {
  max-width: 1200px;
  /* Adjust as per typical max-width */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
}

.section-padding {
  padding-top: var(--spacing-section);
  padding-bottom: var(--spacing-section);
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
/* Header Section */
.site-header {
  background-color: var(--color-secondary);
  /* ★変更済みの白が適用される */
  padding: var(--spacing-small) var(--spacing-medium);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.site-header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-header__logo img {
  height: 20px;
  /* Fixed height as per original */
  width: auto;
  /* Original had margin-left: -5px; for logo, keeping it for visual match */
  margin-left: 0px;
  margin-bottom: 10px;
  /* 上に10px食い込ませる */
}

.main-navigation {
  display: none;
  /* Hidden by default on mobile */
  width: 100%;
  text-align: center;
}

.main-navigation.is-active {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-secondary);
  width: 100%;
  padding-bottom: var(--spacing-medium);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}

.main-navigation__list {
  list-style: none;
}

.main-navigation__item {
  margin-bottom: var(--spacing-small);
}

.main-navigation__link {
  display: block;
  padding: var(--spacing-small) var(--spacing-medium);
  color: var(--color-text-dark);
  /* ★変更★ ナビゲーションリンクの文字色を濃い色に */
  font-weight: 700;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.main-navigation__link:hover,
.main-navigation__link:focus {
  background-color: rgba(0, 0, 0, 0.05);
  /* ★調整★ ホバー時の背景色を濃い色ベースで透明度調整 */
  text-decoration: none;
}

/* Hamburger Menu Toggle */
.menu-toggle {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-small);
  position: relative;
  z-index: 1100;
}

.menu-toggle__icon {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--color-text-dark);
  /* ★変更★ ハンバーガーアイコンの色を濃い色に */
  position: relative;
  transition: background-color 0.3s ease;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: '';
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--color-text-dark);
  /* ★変更★ ハンバーガーアイコンの色を濃い色に */
  position: absolute;
  transition: transform 0.3s ease, top 0.3s ease;
}

.menu-toggle__icon::before {
  top: -8px;
}

.menu-toggle__icon::after {
  top: 8px;
}

/* Animation for active state (X icon) */
.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
  background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
  transform: rotate(45deg);
  top: 0;
  background-color: var(--color-primary);
  /* ★オプション★ Xアイコンのアクティブ色は赤など強調色にしても良い */
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
  transform: rotate(-45deg);
  top: 0;
  background-color: var(--color-primary);
  /* ★オプション★ Xアイコンのアクティブ色は赤など強調色にしても良い */
}


/* ==========================================================================
   Main Visual
   ========================================================================== */
.main-visual {
  width: 100%;
  overflow: hidden;
  /* Ensure image doesn't overflow */
}

.main-visual__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  /* Ensures image covers area without distortion */
}

/* ==========================================================================
   Section Titles & Text
   ========================================================================== */
.section-title {
  font-size: 1.6rem;
  /* モバイルのセクションタイトルを少し小さくしてバランス調整 */
  font-weight: 700;
  color: var(--color-text-dark);
  text-align: left;
  padding-bottom: var(--spacing-small);
  margin-bottom: var(--spacing-medium);
  position: relative;
  background-color: #ffffff;
  padding: var(--spacing-small) var(--spacing-medium);
  /* 上下パディングを小さくしてグレーの高さ調整 */
  margin-left: calc(-1 * var(--spacing-medium));
  margin-right: calc(-1 * var(--spacing-medium));
  border-bottom: 2px solid #00409C;
}

/* Override for direct text below section title (e.g., ABOUT section) */
.section-about .section-text {
  margin-top: var(--spacing-medium);
}

.subsection-title {
  font-size: 1.25rem;
  /* モバイルでのデフォルト */
  font-weight: 700;
  margin-top: var(--spacing-large);
  margin-bottom: var(--spacing-small);
  /* ここで調整されている */
  color: var(--color-text-dark);
  text-align: left;
}

@media (min-width: 768px) {
  .subsection-title {
    font-size: 1.1rem;
    /* タブレットでのサイズ */
  }
}

@media (min-width: 992px) {
  .subsection-title {
    font-size: 1.1rem;
    /* PCでのサイズ */
  }
}

/* Specific text color for red highlighted text */
.text-red {
  color: var(--color-primary);
}

.mb-medium {
  margin-bottom: var(--spacing-medium);
}

/* ==========================================================================
   Tables - テーブル (ベーススタイル)
   ========================================================================== */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  /* Allows horizontal scrolling on small screens */
  -webkit-overflow-scrolling: touch;
  /* Smooth scrolling on iOS */
  margin-bottom: var(--spacing-large);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  /* セルのボーダーを重ねて表示 */
  margin-top: var(--spacing-medium);
  background-color: #fff;
  /* テーブル全体の背景は白 */
  min-width: 600px;
  /* Ensures table doesn't get too narrow on mobile */
  border-radius: 5px;
  /* テーブル全体を角丸にする */
  overflow: hidden;
  /* 角丸を適用するために必要 */
  /* ここにbox-shadowを追加して、テーブル全体に影をつけることも可能 */
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

.data-table th,
.data-table td {
  border: 1px solid var(--color-border);
  /* 細い罫線（上下左右）を入れる */
  padding: var(--spacing-small) var(--spacing-medium);
  text-align: left;
  vertical-align: top;
  /* 上揃えを維持 */
  font-size: var(--font-size-base);
  line-height: 1.6;
  background-color: #fff;
  /* セルごとの背景色を白に明示 */
}

/* ★追加★ ホバー時の背景色変化をthとtdに直接適用 */
.data-table tr:hover th,
.data-table tr:hover td {
  background-color: var(--color-hover-bg);
  /* ホバー色 */
  cursor: default;
  /* ポインターを削除したため、デフォルトカーソルに */
}

.data-table th {
  background-color: var(--color-background-light);
  /* 見出しの背景色は薄いグレー */
  font-weight: 700;
  width: 30%;
}

/* ストライプの背景色を適用しない（全て白に近くなる） */
.data-table tr:nth-child(even) {
  background-color: #fff;
  /* 全ての行の背景を白に戻す */
}

/* ホバー時の背景色変化 */
/* .data-table tr:hover {
  background-color: var(--color-hover-bg); 
  transition: background-color 0.2s ease; 
} */

/* thead部分のスタイル (HTMLで<thead>を追加している場合) */
.data-table thead th {
  background-color: var(--color-background-light);
  color: var(--color-text-dark);
  font-weight: 700;
  text-align: left;
  padding: var(--spacing-small) var(--spacing-medium);
  border-radius: 0;
  /* thead内部のセルには角丸を適用しない */
}

/* tbody内のthは太字にする */
.data-table tbody th {
  font-weight: 700;
  color: var(--color-text-dark);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.entry-button-area {
  text-align: center;
  margin-top: var(--spacing-section);
  margin-bottom: var(--spacing-section);
  /* ★追加/修正点★ */
  width: 100%;
  /* 親要素の幅いっぱいに広げる */
  padding-left: var(--spacing-medium);
  /* 左右にコンテナのパディングを合わせる */
  padding-right: var(--spacing-medium);
}

.button {
  display: inline-block;
  /* padding: var(--spacing-small) var(--spacing-large); */
  /* 元のパディング */
  padding: var(--spacing-small) var(--spacing-medium);
  /* ★変更★ 左右パディングを少し減らす */
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  white-space: normal;
  /* ★変更★ テキストを折り返すようにする */
  vertical-align: middle;
  cursor: pointer;
  /* リンクなのでポインターで良い */
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  /* 親要素の幅を超えないようにする */
}

.button--danger {
  color: var(--color-text-light);
  background-color: var(--color-primary);
  /* Red */
  border-color: var(--color-primary);
}

.button--danger:hover,
.button--danger:focus {
  background-color: #c9302c;
  /* Darker red on hover */
  border-color: #ac2925;
  text-decoration: none;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* ==========================================================================
   Alert Box (Warnings/Notices)
   ========================================================================== */
.alert-box {
  border: 2px solid var(--color-primary);
  /* Red border */
  background-color: #fff;
  /* White background as seen in screenshot */
  padding: var(--spacing-medium);
  margin-top: var(--spacing-large);
  margin-bottom: var(--spacing-large);
}

.alert-box__title {
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--spacing-small);
}

.alert-box__list {
  list-style: none;
  /* Remove default bullet points */
  padding-left: var(--spacing-small);
  /* Indent list items */
}

.alert-box__list li {
  position: relative;
  margin-bottom: var(--spacing-small);
  padding-left: var(--spacing-medium);
  /* Space for custom bullet */
  font-size: 0.95rem;
  /* Slightly smaller text for list items */
  line-height: 1.5;
}

/* Custom bullet point for list items */
.alert-box__list li::before {
  content: '・';
  /* Japanese bullet point */
  position: absolute;
  left: 0;
  color: var(--color-primary);
  /* Red bullet */
}

/* ==========================================================================
   Content Items (Talk Shows, Live)
   ========================================================================== */
.contents-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* アイテム間の余白 */
  margin-bottom: var(--spacing-section);
}

.content-item {
  display: flex;
  align-items: center;
  gap: 30px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.content-item__image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-item__text {
  flex: 2;
  padding: 30px;
}

.content-item__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.contents-item__title {
  margin-top: 0;
  margin-bottom: 15px;
}

/* PC: .reverse クラスで左右の配置を逆転 */
.content-item.reverse {
  flex-direction: row-reverse;
}

/* ==========================================================================
   Content Items for Mobile
   ========================================================================== */
@media (max-width: 768px) {

  .content-item,
  /* ▼▼▼ この行を追加しました ▼▼▼ */
  .content-item.reverse {
    flex-direction: column;
    /* すべて縦積みに変更 */
  }

  .content-item__text {
    padding: 25px;
  }
}

/* ==========================================================================
   13. FOOD GRID
   ========================================================================== */

/* --- グリッド全体のスタイル --- */
.food-grid {
  display: grid;
  gap: 20px;
  /* アイテム間の余白 */
  /* PC表示 (デフォルト): 4カラム */
  grid-template-columns: repeat(4, 1fr);
}

/* --- 各アイテムのスタイル --- */
.food-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.food-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  /* 300x200px の比率を維持 */
  object-fit: cover;
  /* 比率を保ったままトリミング */
  display: block;
}

/* --- キャプションのスタイル --- */
.food-item__caption {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  /* キャプションを中央揃え */
  padding: 15px 10px;
  margin: 0;
}

/* --- スマートフォン向けのスタイル --- */
/* 画面幅が768px以下の場合に適用 */
@media (max-width: 768px) {
  .food-grid {
    /* スマホ表示: 2カラム */
    grid-template-columns: repeat(2, 1fr);
  }

  .food-item__caption {
    font-size: 0.9rem;
    padding: 12px 8px;
  }
}

/* ==========================================================================
   Access Section
   ========================================================================== */
.access-content {
  display: flex;
  flex-direction: column;
  /* Stack vertically on mobile */
  margin-top: var(--spacing-medium);
}

.access-content__text {
  flex: 1;
  margin-bottom: var(--spacing-medium);
  /* Space between text and map on mobile */
}

.access-guide-list {
  list-style: none;
  /* Remove default list styling */
  padding: 0;
}

.access-guide-list li {
  margin-bottom: var(--spacing-large);
  /* Space between guide points */
}

/* アクセスセクション内のサブタイトルのスタイル調整 */
.access-guide-list li .subsection-title {
  margin-top: 0;
  /* Remove top margin from subsection title within list */
  margin-bottom: var(--spacing-small);
  /* Add space below guide title */
  /* ここにフォントサイズを追加または変更 */
  font-size: 1rem;
  /* 例: 少し小さくする */
  /* あるいは、より大きくしたい場合は 1.6rem など */
}

/* 必要であれば、メディアクエリ内でデバイスごとのサイズも調整できます */
@media (min-width: 768px) {
  .access-guide-list li .subsection-title {
    font-size: 1.3rem;
    /* タブレットでのサイズ */
  }
}

@media (min-width: 992px) {
  .access-guide-list li .subsection-title {
    font-size: 1.3rem;
    /* デスクトップでのサイズ */
  }
}


.access-content__image {
  flex: 1;
  width: 100%;
  display: flex;
  /* Use flex to center image if smaller */
  justify-content: center;
  /* Center map horizontally if narrower than container */
  align-items: center;
  /* Center map vertically if shorter than container */
}

.map-image {
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background-color: #001f3f;
  /* ★変更★ フッターの背景色を元の暗い青に固定 */
  padding: var(--spacing-medium);
  text-align: center;
  margin-top: var(--spacing-section);
}

.site-footer__copyright {
  color: var(--color-text-light);
  /* 白のまま */
  font-size: 0.9rem;
  font-weight: 300;
  margin: 0;
}

/* ==========================================================================
   Media Queries for Responsiveness - メディアクエリ
   ========================================================================== */

/* Tablet and larger devices (e.g., width >= 768px) */
@media (min-width: 768px) {

  /* Header & Navigation - ヘッダーとナビゲーション */
  .site-header__logo img {
    height: 25px;
  }

  /* ロゴサイズ調整 */
  .menu-toggle {
    display: none;
  }

  /* ハンバーガー非表示 */
  .main-navigation {
    display: block;
    /* ナビゲーション表示 */
    width: auto;
    text-align: right;
    position: static;
    /* 位置リセット */
    box-shadow: none;
    padding-bottom: 0;
  }

  .main-navigation__list {
    display: flex;
  }

  /* 横並び */
  .main-navigation__item {
    margin-bottom: 0;
    margin-left: var(--spacing-medium);
  }

  .main-navigation__link {
    padding: var(--spacing-small) 0;
    background-color: transparent;
  }

  /* Section Titles & Text - セクションタイトルとテキスト */
  .section-title {
    font-size: 1.8rem;
    /* セクションタイトルサイズ */
    padding: var(--spacing-medium);
    /* パディングを元に戻す */
  }

  .subsection-title {
    font-size: 1.15rem;
  }

  /* サブタイトルサイズ */

  /* Tablet and larger devices (e.g., width >= 768px) */
  @media (min-width: 768px) {
    /* ...他のセクションのスタイルは省略... */

    /* Tables - テーブル */
    .table-responsive {
      overflow-x: visible;
      /* 横スクロール不要 */
    }

    .data-table th,
    .data-table td {
      /* デスクトップのデフォルト (display: table-cell;) が適用されるため、display: block; は不要 */
      /* borderとpaddingはベーススタイルで定義済みなので、ここでは特別な変更がない限り不要 */
      /* ただし、明確にするため、元のpadding設定を再記述しても良い */
      padding: var(--spacing-small) var(--spacing-medium);
    }

    .data-table thead {
      /* theadはベーススタイルでdisplay: none;になっている可能性があるため、ここで表示に戻す */
      position: static;
      clip: auto;
      height: auto;
      margin: 0;
      overflow: auto;
      padding: 0;
      width: auto;
    }

    .data-table td::before {
      content: none;
      /* data-label非表示 */
    }

    .data-table td {
      padding-left: var(--spacing-medium);
      /* 左寄せに戻すためのパディング */
      text-align: left;
      /* 左寄せに戻す */
    }

    .data-table td:last-child {
      border-bottom: 1px solid var(--color-border);
      /* 下線表示 */
    }
  }


  /* Content Items - コンテンツ項目 */
  .content-item {
    flex-direction: row;
    align-items: center;
  }

  /* 横並び */
  .content-item:nth-child(even) {
    flex-direction: row-reverse;
  }

  /* 交互配置 */
  .content-item__text {
    margin-bottom: 0;
    padding: 0 var(--spacing-large);
    order: unset;
  }

  .content-item__image {
    margin-bottom: 0;
    order: unset;
  }

  /* Access Section - アクセスセクション */
  .access-content {
    flex-direction: row;
    align-items: flex-start;
  }

  .access-content__text {
    margin-bottom: 0;
    padding-right: var(--spacing-large);
  }
}

/* Desktop and larger devices (e.g., width >= 992px) */
@media (min-width: 992px) {

  /* Header & Navigation */
  .site-header__logo img {
    height: 30px;
  }

  /* ロゴサイズ調整 */
  .main-navigation__item {
    margin-left: var(--spacing-large);
  }

  /* Section Titles & Text */
  .section-title {
    font-size: 2.0rem;
  }

  /* セクションタイトルサイズ */
  .subsection-title {
    font-size: 1.2rem;
  }

  /* サブタイトルサイズ */

  /* Content Items */
  .content-item__text {
    padding: 0 var(--spacing-section);
  }
}

/* モバイルデバイス (幅が767px以下の場合) のボタン調整 */
@media (max-width: 767px) {
  .button {
    font-size: 0.95rem;
    /* モバイルでのボタンフォントサイズを小さくする */
    padding: var(--spacing-small);
    /* パディングもモバイル用に調整 */
  }
}