@charset "utf-8";
/* ==============================================
   明和住宅 駅の交通案内（バス・時刻表・駐輪場）専用CSS（transit.css）
   第1版 2026-09-17 SB1（343回目・社長ご指示「フッターにGoogleマップが内蔵されていない旧ホームページを、
     ファイル名はそのままで今時のHTMLファイルに作り直し。ヘッダーとページの横幅・デザインは会社概要、
     フッターは個人情報保護方針と同じ。フッターの上に売買4種目と賃貸一覧へのリンク」）
   ★使っているページ＝/station/ の下の46ページ（bus 2・chubus 15・keiosen 2・nanbusen 2・tyurinjou 25）と
     /my_errors/ の2ページ。フッターの上の「府中市の物件一覧」は別ファイル css/lists-nav.css（ほかのページとも共用）。直したら代表のページ（chubus/tama・keiosen/bubaigawaraKeiosen・
     tyurinjou/FuchuT・chubus/BunBus）で見た目を確かめる
   ----------------------------------------------
   読み込み順（厳守・各ページの head）:
   /css/jquery.bxslider.min.css → /css/meiwa-colors.css → /css/category1.css →
   /css/profile.css → /css/station.css → /css/transit.css（必ず最後）
   ・土台は会社概要と同じ category1.css（横幅・フッターの見え方＝標準5-2）＋ profile.css 第1章（スライダー）。
     章の帯・写真の並び・名前と所在地の一覧は街の情報と同じ station.css（.town-sec・.town-photos・dl.town-list）。
     このファイルは「交通案内だけの部品」を足すだけ。
   ・フッター（.backline～#pageTop）の指定はここに書かない（標準5-2＝抜粋移植の禁止）。
   ----------------------------------------------
   記号:【G】Google基準【W】WCAG【社】当社ルール
   守る数値（下げる変更は不可）: 文字16px以上／PC本文20px／
   行間1.5以上／見出し20px以上／タップ48px以上・隣と8px以上／
   コントラスト 通常文字4.5:1（地の色はクリーム #FFF3DB）
   ============================================== */

/* ================================
   1. 読み上げだけの文字（表の見出し caption 等）
   ================================ */
.tr-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ================================
   2. 文字の色（旧ページの色分けを、クリーム地 #FFF3DB で 4.5:1 以上の色に置き換え）
   ================================
   時刻表の列車・バスの種類、乗車時間の表の駅名、路線名の色。色の意味はページの「色の見方」に文字でも書く */
.t-red    { color: #E10900; }   /* 赤（標準21の文字の赤）4.50:1 */
.t-green  { color: #008147; }   /* 緑（標準21）4.51:1 */
.t-orange { color: #BC4200; }   /* オレンジ（旧 #FF6600＝2.8:1 を濃く）4.87:1 */
.t-blue   { color: #0044CC; }   /* 青（旧 #0000FF）7.08:1 */
.ln-keio     { color: #C400C4; }   /* 京王線（旧と同じ）4.61:1 */
.ln-seibu    { color: #CC3333; }   /* 西武多摩川線（旧 #FF6666＝2.9:1 を濃く）4.67:1 */
.ln-nanbu    { color: #990101; }   /* 南武線（旧と同じ）8.09:1 */
.ln-musashino { color: #00753A; }  /* 武蔵野線（旧 #1CAC56＝2.7:1 を濃く）5.30:1 */

/* ================================
   3. お知らせの枠（.tr-notice）＝時刻表・路線図が掲載時点のものであることの案内など
   ================================ */
.tr-notice {
  max-width: 720px;
  margin: 10px auto;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 2px solid #BC4200;
  border-radius: 8px;
}
.tr-notice p { margin: 4px 0; }
@media (min-width: 768px) {
  .tr-notice { max-width: 800px; font-size: 20px; }
}

/* ================================
   4. 路線図・時刻表などの大きな画像（figure.tr-fig）＝本文の幅いっぱい
   ================================
   画像は押すと元の画像を別のタブで開く（文字の細かい図を拡大して読めるように）。
   width/height 属性で縦横比を先に確保＝読み込み中にずれない【G】CLS */
.tr-fig {
  max-width: 800px;
  margin: 10px auto 12px;
  padding: 0 4px;
  text-align: center;
}
.tr-fig img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  background: #FFFFFF;
}
.tr-fig figcaption {
  margin: 4px 0 0;
  font-size: 16px;               /* 【G】16px下限 */
  line-height: 1.5;
}
.tr-fig .tr-zoom { display: inline-block; color: #4D4D4D; }   /* 7.7:1 */
.tr-fig a:hover, .tr-fig a:focus { background: transparent; }  /* 画像だけのリンクはホバーの青地を出さない（category1.css と同じ考え方） */
@media (min-width: 768px) {
  .tr-fig figcaption { font-size: 18px; }
}

/* ================================
   5. 時刻表（table.tr-tt）＝「時」「平日」「土・休日」の3列
   ================================
   スマホでも横にはみ出さない（分は空白の所で折り返す）。見出しの帯は緑 #008147 に白の太字（4.96:1）。
   時の列は幅を固定して、分の列を広く */
table.tr-tt {
  width: calc(100% - 8px);
  max-width: 800px;
  margin: 8px auto 6px;
  border-collapse: collapse;
  table-layout: fixed;
  background: #FFFFFF;
  line-height: 1.6;
  line-break: strict;            /* 「センタ／ー」のように長音の前で折り返さない */
}
table.tr-tt caption {
  padding: 4px 4px 6px;
  font-weight: bold;
  text-align: left;
}
table.tr-tt th,
table.tr-tt td {
  padding: 6px 6px;
  border: 1px solid #B87A00;     /* 装飾の線（会社概要の表と同じ色） */
  vertical-align: top;
  overflow-wrap: anywhere;
}
table.tr-tt thead th {
  background: #008147;
  color: #FFFFFF;
  text-align: center;
}
table.tr-tt thead th:first-child { width: 2.6em; }
table.tr-tt tbody th {
  text-align: center;
  font-weight: bold;
  background: #FFF3DB;
}
table.tr-tt td {
  word-spacing: .35em;
  word-break: keep-all;          /* 「山13」「高山28」を途中で折り返さない（分と分の間の空白だけで折り返す） */
}
@media (min-width: 768px) {
  table.tr-tt { font-size: 20px; }
  table.tr-tt thead th:first-child { width: 3em; }
}

/* ================================
   6. 乗車時間とバス停所在地の表（table.tr-stops）＝「乗車時間」「停留所名」「バス停所在地」
   ================================
   4列の旧表（2方向）は2つの表に分けて .tr-pair に入れる（スマホ＝上下・768px以上＝左右） */
table.tr-stops {
  width: calc(100% - 8px);
  max-width: 800px;
  margin: 8px auto 6px;
  border-collapse: collapse;
  table-layout: fixed;
  background: #FFFFFF;
  line-height: 1.5;
  line-break: strict;            /* 「センタ／ー」のように長音の前で折り返さない */
}
table.tr-stops caption {
  padding: 4px 4px 6px;
  font-weight: bold;
  text-align: left;
}
table.tr-stops th,
table.tr-stops td {
  padding: 6px 6px;
  border: 1px solid #B87A00;
  vertical-align: middle;
  text-align: left;
  overflow-wrap: anywhere;
}
table.tr-stops thead th {
  background: #008147;
  color: #FFFFFF;
  text-align: center;
}
table.tr-stops thead th:first-child { width: 3.2em; }
table.tr-stops tbody th { font-weight: normal; }
table.tr-stops td.tr-min { text-align: center; }
.tr-pair {
  max-width: 800px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  table.tr-stops { font-size: 20px; }
  table.tr-stops thead th:first-child { width: 3.6em; }
  .tr-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    align-items: start;
  }
  .tr-pair table.tr-stops { width: 100%; }
}

/* ================================
   7. 色の見方・路線の順（p.tr-legend）
   ================================ */
p.tr-legend { color: #333333; }

/* ================================
   8. 駐輪場の一覧（dl.town-list.park-list）＝名前（dt）の下に所在地・電話・料金（dd）
   ================================
   街の情報の dl.town-list（名前と所在地の2列）を、説明が長い駐輪場向けに「名前の下に説明」の形へ。
   ボット（town-chat.js）は dl.town-list > div の dt／dd を読むので class は両方付ける */
dl.town-list.park-list > div {
  display: block;
  min-height: 0;
  padding: 8px 0;
}
dl.town-list.park-list dt { font-weight: bold; }
dl.town-list.park-list dd span { display: block; }
@media (min-width: 768px) {
  dl.town-list.park-list > div { display: block; min-height: 0; }
}

/* ================================
   9. ほかのルートなどのリンクの一覧（ul.tr-links）＝1行に1つ・押し領域48px【G】
   ================================ */
ul.tr-links {
  max-width: 720px;
  margin: 6px auto;
  padding: 0 8px;
  list-style: none;
}
ul.tr-links li { margin: 0; }
ul.tr-links a,
ul.tr-links .tr-here {
  display: inline-block;
  min-height: 48px;
  padding: 10px 4px;
}
@media (min-width: 768px) {
  ul.tr-links { max-width: 800px; font-size: 20px; }
  ul.tr-links a, ul.tr-links .tr-here { padding: 7px 4px; }
}

/* ================================
   10. h1 の文節（span.hw）＝「ちゅうバス多磨町ルートの」「路線図・時刻表」の区切りだけで折り返す（標準43）
   ================================ */
#header h1 .hw { display: inline-block; }
/* ================================================
   微調整のあとの再確認メモ
   □ 文字16px未満・見出し20px未満になっていないか
   □ タップ高さ48px未満・リンク同士の間隔8px未満がないか
   □ 画像の width/height 属性（CLS対策）を消していないか
   □ 表が幅320pxで横にはみ出していないか（標準43）
   □ フッターの指定をこのファイルに足していないか（標準5-2）
   ================================================ */