/* ============================================================================
   歩くまち京都 リニューアル — デザイン基盤 + レスポンシブ層
   renewal.css
   ----------------------------------------------------------------------------
   方針:
     - 追加レイヤー（既存 style.css / 各ページCSS の後に読み込む）
     - デスクトップ表示は無改変にするため、レイアウト変更は
       すべて @media (max-width: 900px / 600px) 内に閉じ込める
     - 後続で読まれる top.css 等にも勝てるよう、レイアウト確定値は !important
     - :root のデザイントークンは今後のPC側刷新でも共通利用する
   ============================================================================ */

:root {
  /* --- ブランド/カラートークン（ローダーと統一: クリーム地＋紫/赤/ピンク/金） --- */
  --rnw-primary:        #7d5ba6;   /* 紫（キーカラー） */
  --rnw-primary-dark:   #5f4485;
  --rnw-primary-light:  #f0eaf7;
  --rnw-accent:         #d94c5c;   /* 赤（差し色） */
  --rnw-pink:           #e98aac;   /* ピンク */
  --rnw-gold:           #d8a93a;   /* 金 */
  --rnw-ink:            #2a2330;   /* 文字 */
  --rnw-ink-sub:        #6b6470;
  --rnw-line:           #e6ddca;   /* 罫線（クリームに合う暖色グレー） */
  --rnw-bg:             #fbf5e8;   /* クリーム地（サイト背景） */
  --rnw-card:           #ffffff;

  /* --- 余白/角丸/影トークン --- */
  --rnw-gap:            12px;
  --rnw-radius:         10px;
  --rnw-radius-sm:      6px;
  --rnw-shadow:         0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);

  /* --- タッチターゲット最小寸法（指で押せる高さ） --- */
  --rnw-touch:          44px;
}

/* サイト背景: タイル画像(content_back.png 等)を撤去しクリーム地に統一（全ビューポート） */
html, body { background-image: none !important; background-color: var(--rnw-bg) !important; }

/* ハンバーガーボタンは既定（PC）では非表示。モバイル時のみ表示する */
.rnw-navtoggle { display: none; }
/* 検索ボタンのテキストラベルは既定(PC)では非表示＝PCは従来の画像ボタンのまま */
.search_btn .rnw-btn-label { display: none; }
/* フッターのリンク矢印 mark.png(13x13 低解像) → SVG に差替（全ビューポートで鮮明） */
.footer_menu table td.link { background-image: url("../img/footer/mark.svg") !important; background-size: 14px 14px !important; }
/* お知らせ一覧の●アイコン title_mark_small.png(13x13 低解像) → SVG に差替 */
.information_area li { background-image: url("../img/contents/icon_news.svg") !important;
                      background-repeat: no-repeat !important; background-position: 0 10px !important;
                      background-size: 14px 14px !important; }

/* === 駅名・バス停サジェスト(autocomplete)を今風に（全ビューポート共通） === */
.ui-autocomplete.ui-menu {
  border: 1px solid #cdd6e0 !important; border-radius: 0 !important; padding: 0 !important;
  background: #ffffff !important; box-shadow: 0 8px 24px rgba(20,40,70,.18) !important;
  max-height: 62vh !important; overflow-x: hidden !important; overflow-y: auto !important; z-index: 1000 !important;
}
.ui-autocomplete .ui-menu-item { margin: 0 !important; border: 0 !important; background: transparent !important; list-style: none !important; }
/* カテゴリ見出し（駅 / バス停） */
.ui-autocomplete li.ui-autocomplete-category {
  background: #e9f1fb !important; color: #15487e !important; font-weight: bold !important; font-size: 14px !important;
  padding: 9px 14px !important; line-height: 1.4 !important; border-bottom: 1px solid #d4e1f0 !important;
  position: sticky !important; top: 0 !important;
}
.ui-autocomplete li.ui-autocomplete-category img { vertical-align: middle !important; margin-right: 8px !important; }
/* 候補項目 */
.ui-autocomplete li.ui-menu-item:not(.ui-autocomplete-category) > a {
  display: block !important; position: relative !important; margin: 0 !important;
  padding: 8px 34px 8px 16px !important; font-size: 15px !important; line-height: 1.25 !important;
  color: #16529c !important; text-decoration: none !important; background: #fff !important;
  border: 0 !important; border-bottom: 1px solid #eef1f5 !important; cursor: pointer !important;
}
.ui-autocomplete li.ui-menu-item.rnw-type-station:not(.ui-autocomplete-category) > a,
.ui-autocomplete li.ui-menu-item.rnw-type-bus:not(.ui-autocomplete-category) > a { padding-left: 46px !important; }
.ui-autocomplete li.ui-menu-item:not(.ui-autocomplete-category) > a.ui-state-active,
.ui-autocomplete li.ui-menu-item:not(.ui-autocomplete-category) > a:hover {
  background: #eaf4ff !important; color: #0c427f !important;
}
/* 種別アイコン（左） */
.ui-autocomplete li.rnw-type-station > a::before,
.ui-autocomplete li.rnw-type-bus > a::before {
  content: "" !important; position: absolute !important; left: 14px !important; top: 50% !important;
  width: 22px !important; height: 22px !important; transform: translateY(-50%) !important;
  background: center / contain no-repeat !important;
}
.ui-autocomplete li.rnw-type-station > a::before { background-image: url("../img/contents/icon_station.svg") !important; }
.ui-autocomplete li.rnw-type-bus > a::before { background-image: url("../img/contents/icon_busstop.svg") !important; }
/* chevron（右） */
.ui-autocomplete li.ui-menu-item:not(.ui-autocomplete-category) > a::after {
  content: "" !important; position: absolute !important; right: 16px !important; top: 50% !important;
  width: 7px !important; height: 7px !important;
  border-top: 2px solid #a7bcd4 !important; border-right: 2px solid #a7bcd4 !important;
  transform: translateY(-50%) rotate(45deg) !important;
}
/* 候補名の後ろの読み仮名（カッコ付き・小さめグレー） */
.ui-autocomplete .rnw-yomi { margin-left: 6px !important; color: #7c8896 !important; font-size: 13px !important; font-weight: normal !important; }

/* 地図ページ: 右側の案内ボックス(.right_guide「出発地・目的地を…クリックしてください」)を
   エリアごと削除（PC/スマホ共通）。同内容は入力エラー時のダイアログで案内されるため不要。 */
.map_search .right_guide { display: none !important; }

/* 地図ページ: 検索入力欄のラベルチップ（出発地=赤／目的地=青）を角丸チップに（全ビューポート共通）。
   単一入力欄のラベル #od_label は toggleOd() で dep_label⇔arr_label を切替えるため、両方に適用する
   （dep_label だけ角丸化していると「目的地」状態で旧map.cssの角丸無し青チップが出る）。 */
.map_search .od_input .dep_label,
.map_search .od_input .arr_label {
  display: inline-block !important; width: auto !important; height: auto !important; line-height: 1.2 !important;
  margin: 0 0 8px 0 !important; padding: 5px 12px !important; box-sizing: border-box !important;
  border-radius: var(--rnw-radius-sm) !important; font-size: 14px !important; text-align: center !important;
}
/* a11y(1.4.3 AA): 白文字16pxには --rnw-accent(#d94c5c=3.7:1)では不足するため、
   この赤チップだけ AA 準拠の濃い赤 #c0392b(白on=4.95:1) にする。見た目はほぼ同系。 */
.map_search .od_input .dep_label { background-color: #c0392b !important; }   /* 出発地=赤(AA準拠) */
.map_search .od_input .arr_label { background-color: #2e55b8 !important; }              /* 目的地=青 */

/* 周辺地図: 「スポット表示」パネル(#category_sel)が MapLibre のズーム/全画面コントロール
   (右上・右端から約49px)と重なるため、コントロール列の左へずらす（全ビューポート共通）。 */
.area_map #category_sel { right: 68px !important; }

/* === 地図ページ: 地図上の「検索/リセット」を現在時刻の下へ（全ビューポート共通） ===
   renewal.js setupMapButtons() が .map_buttons を .datetime 末尾へ移動。
   元は地図上に position:absolute だったのを、カード内の横並びボタン行に整える。
   .datetime 配下に来た時だけ当てる＝JS未実行(移動前)は元の地図上配置にフォールバック。
   #btn_search の <img> は src 差替(有効/グレー)を維持するため温存。 */
.map_search .datetime .map_buttons {
  position: static !important; top: auto !important; right: auto !important;
  display: flex !important; gap: 10px !important; align-items: center !important;
  margin: 12px 0 0 0 !important; width: auto !important;
}
.map_search .datetime .map_buttons p { margin: 0 !important; padding: 0 !important; }
/* 元のPNGボタン画像は隠し、CSSボタン(アイコン::before＋ラベル::after)に置換 */
.map_search .datetime .map_buttons img { display: none !important; }
.map_search .datetime .map_buttons a {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 7px !important; box-sizing: border-box !important; padding: 10px 18px !important; min-height: 44px !important;
  border-radius: var(--rnw-radius-sm) !important; font-size: 16px !important; font-weight: bold !important;
  letter-spacing: .04em !important; line-height: 1.2 !important; white-space: nowrap !important;
  text-decoration: none !important; cursor: pointer !important;
}

/* --- 検索(=#btn_search を含む a): トップの検索ボタンと同じ紫グラデ＋虫眼鏡SVG＋「検索」 --- */
.map_search .datetime .map_buttons a:has(#btn_search) {
  border: 1px solid rgba(0,0,0,.12) !important;
  background: linear-gradient(180deg, var(--rnw-primary) 0%, var(--rnw-primary-dark) 100%) !important;
  color: #ffffff !important; box-shadow: var(--rnw-shadow) !important;
}
.map_search .datetime .map_buttons a:has(#btn_search)::before {
  content: "" !important; flex: 0 0 auto !important; width: 20px !important; height: 20px !important;
  background: url("../img/contents/icon_search.svg") center / contain no-repeat !important;
}
.map_search .datetime .map_buttons a:has(#btn_search)::after { content: "検索" !important; }
.map_search .datetime .map_buttons a:has(#btn_search):active { filter: brightness(.92) !important; }
/* 地点未配置=グレーアウト(map_search_input.js が src を *_gray.png に差替える)。
   トップと同じ形のまま無効見た目に切替（押下時の挙動は元のまま=onclickは温存）。 */
.map_search .datetime .map_buttons a:has(#btn_search[src*="gray"]) {
  background: linear-gradient(180deg, #c9c4d0 0%, #aaa3b3 100%) !important;
  color: #f3f0f7 !important; box-shadow: none !important; cursor: default !important;
}
.map_search .datetime .map_buttons a:has(#btn_search[src*="gray"])::before { opacity: .75 !important; }

/* --- リセット(=#btn_search を含まない a): セカンダリ(白地＋枠)＋↺アイコン＋「リセット」 --- */
.map_search .datetime .map_buttons a:not(:has(#btn_search)) {
  background: var(--rnw-card) !important; border: 1px solid var(--rnw-line) !important;
  color: var(--rnw-ink-sub) !important;
}
.map_search .datetime .map_buttons a:not(:has(#btn_search))::before {
  content: "" !important; flex: 0 0 auto !important; width: 16px !important; height: 16px !important;
  background: url("../img/contents/icon_reset.svg") center / contain no-repeat !important;
}
.map_search .datetime .map_buttons a:not(:has(#btn_search))::after { content: "リセット" !important; }
.map_search .datetime .map_buttons a:not(:has(#btn_search)):active { background: var(--rnw-bg) !important; }


/* ============================================================================
   地図バルーン(maplibregl Popup)の × 閉じるボタンを大きく・押しやすく（全地図ページ共通）
   ============================================================================ */
.maplibregl-popup-close-button {
  width: 30px !important; height: 30px !important;
  font-size: 24px !important; line-height: 26px !important;
  padding: 0 2px 2px 0 !important; color: #444 !important;
  border-radius: 0 6px 0 6px !important;
}
.maplibregl-popup-close-button:hover { background: rgba(0,0,0,0.08) !important; color: #000 !important; }
/* 大きくした × が本文に重ならないよう内容に右上の余白を付与 */
.maplibregl-popup-content { padding-right: 28px !important; padding-top: 12px !important; }


/* バスロケ情報連携が停止中のため「バス現在位置を表示する」操作パネル(#buslocDiv)を非表示。
   bus_route_map.js が isBusLocAvailable() 時に $('#buslocDiv').show() でインライン display:block を
   付与するため、!important で確実に隠す（未チェックのままなのでバスロケのポーリングも起動しない）。
   連携再開時はこのルールを削除すれば復活する。 */
#buslocDiv { display: none !important; }


/* ============================================================================
   タブレット/スマートフォン (<= 900px)
   固定960pxレイアウトを流動化し、2カラムを縦積みに、操作系を指サイズに
   ============================================================================ */
@media screen and (max-width: 900px) {

  /* --- 全体: 固定幅・最小幅を解除して画面幅に追従 --- */
  /* 旧 html,body{height:100%} と overflow-x:hidden の併用で body が独自スクロール化
     （overflow-x:hidden により overflow-y が auto に昇格＋高さ100%固定）し、
     ドキュメントのスクロールと合わせて二重スクロールになる。
     height:auto(min-heightで最低全画面は維持)に上書きして1本化する。 */
  html, body { margin: 0 !important; padding: 0 !important; overflow-x: hidden !important;
               height: auto !important; min-height: 100% !important; }
  body { -webkit-text-size-adjust: 100%; background: var(--rnw-bg) !important; }

  /* === 横はみ出し安全網 ============================================
     固定960px等の「深い子要素」が画面外へ突き出すのを全面的に抑止する。
     #body_wrapper 配下のみに限定（body直下のjQuery-UIサジェスト等は除外）。
     これで個別未対応ページでも横スクロール(崩れ)は発生しなくなる。 */
  #body_wrapper, #body_wrapper * {
    max-width: 100% !important;
    min-width: 0 !important;        /* style.css/map.css の min-width:960px を無効化 */
    box-sizing: border-box !important;
  }
  /* 主要ラッパ/見出しバー/パンくずを流動化（コンテンツ系ページ含む） */
  #body_wrapper .main, #body_wrapper .main_contents,
  .pankuzu, .page_title, .page_top, .page_no_title, .top_no_title,
  .contents_main, .contents_main_left, .contents_main_right, .contents_main_map,
  .map_search, .search_area, .result_area,
  .appli_link, .recommend, .recommend .title, .recommend table,
  .information_area, .information, .traffic,
  .left_search_box .title, .left_block .title {
    width: 100% !important;
    float: none !important;
  }

  #body_wrapper,
  .header, .header_content,
  .contents,
  .footer, .footer_content{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 画像・地図は枠内に収める（横スクロール防止） */
  img { max-width: 100% !important; height: auto !important; }
  table { max-width: 100% !important; }

  /* --- ヘッダー --- */
  /* 元CSSの height:120px 固定を解除。開いたメニュー分だけ伸びてコンテンツを押し下げる
     （固定だとメニューが溢れて出発地入力等に重なるため） */
  .header { position: relative !important; height: auto !important; background: var(--rnw-card) !important;
            box-shadow: var(--rnw-shadow) !important; }
  .header_content { display: block !important; height: auto !important; min-height: 52px !important;
                    box-sizing: border-box !important; padding: 8px 56px 8px 12px !important; }
  .header_left, .header_logo, .header_left_bg { position: static !important;
            float: none !important; width: auto !important; height: auto !important; }
  .header_left_bg { display: none !important; }            /* 季節背景は省略 */
  .header_logo img { max-height: 40px !important; width: auto !important; }
  .header_righttop { position: static !important; float: none !important;
            margin-top: 6px !important; text-align: left !important; }
  .header_righttop img { max-height: 30px !important; }
  .header_back_img { display: none !important; }

  /* ハンバーガー（renewal.js が .header 先頭に挿入） */
  .rnw-navtoggle {
    display: block !important;
    /* top:50%中央寄せにするとメニュー展開で背の高くなった.headerの中央へ動くため、上端固定に */
    position: absolute !important; top: 6px !important; right: 10px !important; transform: none !important;
    width: 40px !important; height: 40px !important; padding: 9px !important;
    border: 1px solid var(--rnw-line); border-radius: var(--rnw-radius-sm);
    background: var(--rnw-card); cursor: pointer; z-index: 30;
  }
  .rnw-navtoggle span {
    display: block; height: 2px; margin: 4px 0;
    background: var(--rnw-primary); border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
  body.rnw-nav-open .rnw-navtoggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  body.rnw-nav-open .rnw-navtoggle span:nth-child(2){ opacity: 0; }
  body.rnw-nav-open .rnw-navtoggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  /* グローバルメニュー: 既定は折りたたみ、開いたら縦リスト */
  .header_menu { max-height: 0 !important; overflow: hidden !important;
                 transition: max-height .3s ease !important;
                 background: var(--rnw-card) !important; }
  /* overflow:hidden＋全項目が収まる高さ＝メニュー内スクロールバーを出さない
     （ページ全体は通常どおりスクロール。header:auto と併せ重なりも解消） */
  body.rnw-nav-open .header_menu { max-height: 600px !important; overflow: hidden !important;
                 border-top: 1px solid var(--rnw-line) !important; }
  .header_menu table, .header_menu tbody, .header_menu tr { display: block !important; width: 100% !important; }
  .header_menu td { display: block !important; width: 100% !important;
                 border-bottom: 1px solid var(--rnw-line) !important; }
  .header_menu td a { display: block !important; padding: 14px 16px !important;
                 font-size: 16px !important; color: var(--rnw-ink) !important;
                 text-decoration: none !important; min-height: var(--rnw-touch);
                 box-sizing: border-box; }
  .header_menu td a:active { background: var(--rnw-primary-light) !important; }

  /* ハンバーガー内へ移動した「使い方」「言語選択」（renewal.js が .header_menu へ移動） */
  .header_menu .header_righttop { position: static !important; width: 100% !important; float: none !important;
                 padding: 14px 12px !important; text-align: center !important; box-sizing: border-box !important;
                 border-top: 1px solid var(--rnw-line) !important; background: var(--rnw-card) !important; }
  .header_menu .header_righttop > a { display: inline-block !important; }
  .header_menu .header_righttop img { float: none !important; display: inline-block !important;
                 max-height: 34px !important; width: auto !important; margin: 0 0 12px 0 !important; }
  .header_menu .select_language { display: block !important; width: auto !important;
                 background: transparent !important; font-size: 13px !important; }
  .header_menu .select_language a { margin: 0 4px !important; }

  /* --- メインの2カラムを縦積み --- */
  .contents { display: block !important; float: none !important;
              padding: var(--rnw-gap) !important; }
  .left_block, .contents_main_right,
  .contents_left, .contents_right {
    display: block !important; float: none !important;
    width: 100% !important; margin: 0 0 var(--rnw-gap) 0 !important;
    box-sizing: border-box !important;
  }

  /* トップページのモバイル並び替え（画像→先頭／アプリ導線→検索の直下）は、
     別コンテナ跨ぎでCSS orderでは不可のため renewal.js (rnwSetupTopOrder) でDOMを移動。
     画面幅で切替（PC幅では元位置へ復帰）。 */

  /* --- 検索ボックス（最重要: 指で使えるサイズに） --- */
  .left_search_box {
    width: 100% !important; box-sizing: border-box !important;
    background: var(--rnw-card) !important; border: 1px solid var(--rnw-line) !important;
    border-radius: var(--rnw-radius) !important; box-shadow: var(--rnw-shadow) !important;
    padding: 14px !important; height: auto !important;   /* 旧 height:408px固定を解除（中身が溢れる原因） */
  }
  .left_search_box .title { font-size: 17px !important; margin-left: 0 !important; }
  /* 見出し/ラベルの固定左マージン(装飾オーバーハング)を解消 */
  .contents .title, .page_title, .pankuzu { margin-left: 0 !important; margin-right: 0 !important; }
  /* アプリDLボックス: 固定height:54pxを解除しバッジを箱内へ収める（下の帯への重なり防止） */
  .appli_link { height: auto !important; line-height: normal !important; text-align: center !important;
                padding: 12px !important; box-sizing: border-box !important; }
  .appli_link span { display: block !important; width: auto !important; margin: 0 0 10px 0 !important; }
  .appli_link a { display: inline-block !important; }
  .appli_link a img { max-height: 42px !important; width: auto !important; margin: 4px 6px !important; }
  .od_input { position: relative !important; margin-left: 0 !important; margin-right: 0 !important; }
  .od_input .search_input {
    display: block !important; width: 100% !important; box-sizing: border-box !important;
    height: var(--rnw-touch) !important; margin: 0 0 10px 0 !important;
    padding: 10px 12px !important;
    font-size: 16px !important;                 /* iOSの自動ズーム防止 */
    border: 1px solid var(--rnw-line) !important; border-radius: var(--rnw-radius-sm) !important;
  }
  /* 入れ替えボタン: 出発地⇄目的地の継ぎ目・右端に円形で重ねて配置 */
  .od_input .change_btn { position: absolute !important; right: 6px !important; top: 49px !important;
                          transform: translateY(-50%) !important; margin: 0 !important;
                          width: 40px !important; height: 40px !important; z-index: 3 !important;
                          background: #fff !important; border: 1px solid var(--rnw-line) !important;
                          border-radius: 50% !important; box-shadow: var(--rnw-shadow) !important;
                          display: flex !important; align-items: center !important; justify-content: center !important; }
  .od_input .change_btn a { display: block !important; width: 100% !important; height: 100% !important;
                            background-image: url("../img/contents/change_od_renewal.svg") !important;
                            background-repeat: no-repeat !important; background-position: center !important;
                            background-size: 22px 22px !important; }
  /* 元のグレー背景PNGは隠し、透明SVGアイコンに置換（白丸ボタンと馴染ませる） */
  .od_input .change_btn img { display: none !important; }

  /* --- 日時指定ブロック（カード内に収め、ラベル全幅・現在時刻をインライン化） --- */
  .datetime { margin-top: 10px !important; position: static !important; }
  /* 元CSSの固定左マージン(15px等)をカードpaddingに合わせて解消 */
  .datetime, .datetime_label, .radio_btn, .select_btn { margin-left: 0 !important; }
  /* 「[ 日時指定 ]」帯を固定215px→全幅に */
  .datetime_label { width: auto !important; display: block !important;
                    height: auto !important; line-height: 1.5 !important;   /* 固定24pxを解除し上下中央に */
                    margin: 0 0 8px 0 !important; padding: 6px 10px !important; box-sizing: border-box !important; }
  .datetime .radio_btn { margin: 6px 0 !important; }
  .datetime .radio_btn label { display: inline-block !important; width: auto !important;
                    margin: 4px 14px 4px 0 !important; font-size: 15px !important; }
  .datetime .select_btn { width: 100% !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; }
  /* 月/日/時/分 を改行なしで横並びに（selectの直後の<br>のみ無効化。
     「現在時刻」ボタン内の <br>(現在/時刻) は残すため子セレクタ > で限定） */
  .datetime .select_btn > br { display: none !important; }
  .datetime .select_btn select {
    height: var(--rnw-touch) !important; font-size: 16px !important;
    width: auto !important; max-width: none !important;
    margin: 4px 4px 6px 0 !important; padding: 6px 4px !important; vertical-align: middle !important;
    border: 1px solid var(--rnw-line) !important; border-radius: var(--rnw-radius-sm) !important;
  }
  .datetime .select_btn select.select_hour { margin-left: 0 !important; }
  /* 現在時刻ボタン: 時刻の右に収まればその行、収まらなければ次行右へ（margin-left:auto） */
  .datetime .curr_time { position: static !important; display: flex !important; align-items: center !important;
                    width: auto !important; margin: 4px 0 6px auto !important; right: auto !important; top: auto !important; }
  /* 「現在時刻」: 改行なしの横長ボタン＋時計アイコン */
  .datetime .curr_time a { display: inline-flex !important; align-items: center !important;
                    justify-content: center !important; width: auto !important; min-width: 0 !important;
                    padding: 8px 14px !important; min-height: var(--rnw-touch) !important;
                    line-height: 1.2 !important; white-space: nowrap !important; box-sizing: border-box !important; }
  .datetime .curr_time a br { display: none !important; }   /* 「現在/時刻」の改行を解除し1行に */
  .datetime .curr_time a::before { content: "" !important; flex: 0 0 auto !important;
                    width: 16px !important; height: 16px !important; margin-right: 5px !important;
                    background: url("../img/contents/icon_clock.svg") center / contain no-repeat !important; }

  /* 検索ボタン: 画像(全幅拡大でボケる)→鮮明なCSSボタン(紫グラデ＋SVG虫眼鏡＋テキスト) */
  .search_btn { text-align: center !important; margin-top: 14px !important; }
  .search_btn a { display: flex !important; align-items: center !important; justify-content: center !important;
                  gap: 8px !important; width: 100% !important; max-width: 360px !important; margin: 0 auto !important;
                  box-sizing: border-box !important; padding: 14px 16px !important; min-height: var(--rnw-touch) !important;
                  border-radius: var(--rnw-radius-sm) !important; border: 1px solid rgba(0,0,0,.12) !important;
                  background: linear-gradient(180deg, var(--rnw-primary) 0%, var(--rnw-primary-dark) 100%) !important;
                  color: #ffffff !important; font-size: 18px !important; font-weight: bold !important;
                  letter-spacing: .06em !important; text-decoration: none !important;
                  box-shadow: var(--rnw-shadow) !important; }
  .search_btn a::before { content: "" !important; flex: 0 0 auto !important;
                  width: 20px !important; height: 20px !important;
                  background: url("../img/contents/icon_search.svg") center / contain no-repeat !important; }
  .search_btn a img { display: none !important; }
  .search_btn .rnw-btn-label { display: inline-block !important; }
  .search_btn a:active { filter: brightness(.92) !important; }

  /* --- おすすめコンテンツ: 4枚を2x2に --- */
  .recommend table, .recommend tbody, .recommend tr { display: block !important; width: 100% !important; }
  .recommend tr { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .recommend td { display: block !important; width: calc(50% - 4px) !important;
                  box-sizing: border-box !important; padding: 0 !important; }
  .recommend td img { width: 100% !important; height: auto !important; }

  /* --- お知らせ/運行情報 --- */
  .information_area { display: block !important; }
  .information_area .information, .information_area .traffic {
    width: 100% !important; float: none !important; margin: 0 0 var(--rnw-gap) 0 !important;
    box-sizing: border-box !important;
  }
  .information_area ul { width: 100% !important; box-sizing: border-box !important; }

  /* --- フッター: 元の濃色背景(#242424)＋白文字を維持したまま縦積み --- */
  /*    （白背景に上書きすると白文字が不可視になるため背景は変更しない） */
  .footer_content { padding: 16px var(--rnw-gap) !important; display: flex !important; flex-direction: column !important; }
  .footer_left, .footer_right, .footer_copyright {
    display: block !important; float: none !important; width: 100% !important;
    box-sizing: border-box !important; text-align: center !important;
  }
  /* [問合せ](.footer_left)をリンク(.footer_right)より下のフッターへ移動 */
  .footer_right { order: 1 !important; }
  .footer_left { order: 2 !important; margin-top: 8px !important; }
  .footer_copyright { order: 3 !important; }
  .footer_menu table, .footer_menu tbody, .footer_menu tr { display: block !important; width: 100% !important; }
  .footer_menu td { display: block !important; width: 100% !important; }
  .footer_menu td.sep { display: none !important; }
  .footer_menu td.link { background-position: 6px center !important; }   /* 矢印アイコンを縦中央へ */
  .footer_menu td.link a { display: block !important; padding: 12px 4px !important;
                           font-size: 15px !important; color: #ffffff !important;
                           border-bottom: 1px solid rgba(255,255,255,.15) !important;
                           min-height: var(--rnw-touch); box-sizing: border-box; }

  /* ダイアログ系（jQuery UI）が画面外に出ないように */
  .ui-dialog { max-width: 94vw !important; left: 3vw !important; }

  /* ページトップへ（固定960px/右寄せを解除し、フッター前に中央配置＝重なり防止） */
  .page_top { width: 100% !important; height: auto !important; clear: both !important;
              margin: 12px 0 !important; text-align: center !important; }
  /* 繰り返し背景画像(page_top.png 134x22)が四隅に白い影を出すため撤去し、クリーンなボタン＋SVG上矢印に */
  .page_top a { display: inline-flex !important; align-items: center !important; gap: 6px !important;
                width: auto !important; height: auto !important; padding: 10px 18px !important;
                min-height: var(--rnw-touch) !important; box-sizing: border-box !important;
                white-space: nowrap !important; line-height: 1.4 !important; text-decoration: none !important;
                background-image: none !important; background-color: #6e6e6e !important;
                color: #ffffff !important; border-radius: var(--rnw-radius-sm) !important; }
  .page_top a::before { content: "" !important; flex: 0 0 auto !important; width: 14px !important; height: 14px !important;
                background: url("../img/contents/icon_arrow_up.svg") center / contain no-repeat !important; }

  /* === 地図ページ(.map_search): 960px固定背景(虫眼鏡)＋float多用で崩れる → 縦積みに === */
  /* 別コンテナ(.contents_main_map)ゆえ .contents の余白が効かない→左右ガターを付与 */
  .contents_main_map { padding-left: var(--rnw-gap) !important; padding-right: var(--rnw-gap) !important;
                       box-sizing: border-box !important; }
  .map_search .search_area { width: 100% !important; height: auto !important; background-image: none !important; }
  .map_search .search_area_title { margin-left: 0 !important; height: auto !important;
                 line-height: 1.4 !important; font-size: 16px !important; padding: 6px 0 !important; }
  .map_search .od_input { float: none !important; width: 100% !important; margin: 8px 0 0 0 !important; box-sizing: border-box !important; }
  .map_search .od_input input { width: 100% !important; box-sizing: border-box !important;
                 height: var(--rnw-touch) !important; font-size: 16px !important; line-height: normal !important;
                 border: 1px solid var(--rnw-line) !important; border-radius: var(--rnw-radius-sm) !important;
                 padding: 8px 10px !important; margin: 0 0 8px 0 !important; }
  .map_search .od_input .od_button { float: none !important; display: block !important; width: 100% !important;
                 max-width: 360px !important; height: auto !important; line-height: normal !important;
                 margin: 0 auto 8px auto !important; padding: 12px 16px !important; box-sizing: border-box !important; text-align: center !important; }
  .map_search .od_input .guide { float: none !important; width: 100% !important; margin: 8px 0 0 0 !important; font-size: 13px !important; }
  .map_search .datetime { float: none !important; width: 100% !important; margin: 12px 0 0 0 !important; }
  .map_search .datetime_label { width: auto !important; height: auto !important; line-height: 1.5 !important;
                 margin: 0 0 8px 0 !important; padding: 6px 10px !important; box-sizing: border-box !important; }
  .map_search .select_btn { margin-left: 0 !important; }
  .map_search .right_guide { float: none !important; width: 100% !important; box-sizing: border-box !important;
                 margin: 12px 0 0 0 !important; }
  .map_search .map_area { min-width: 0 !important; height: 360px !important; }
  .map_search .map_buttons { right: 12px !important; }

  /* === ★3 時刻表テーブル: 混雑時間帯の発車分が画面外に切れる問題の根治 ===
     旧: td が white-space:nowrap＋.min 35px固定の横並びで、混雑時(7/15〜18時)は
         分セルが多く min-content 幅(513px)が画面幅を超過 → 320:+205/375:+150px。
     renewal-pc.css は親を overflow-x:auto にしたが、それは横スクロールを足すだけで
     表自体は画面外に残り(検出器の getBoundingClientRect で依然はみ出し検出)、
     モバイルでの横スクロールUXも悪い。
     根治: tr を flex-wrap 化し、時(th)を固定ラベル列・分セル(td)を折り返させる。
     空の穴埋め td(:empty)は隠してグリッドを詰める。これで表が画面幅に収まり、
     混雑時間帯の発車分は次行に折り返って全部見える(横スクロール不要)。
     renewal-pc.css は後に読まれ width 系を上書きするが、display:block＋tr/td の
     flex 化(下記)はこちらだけが定義するので有効。デスクトップ(>900px)は無改変。 */
  .timetable_main .timetable_body { overflow-x: visible !important; }
  .timetable_main .timetable_body table,
  .timetable_main .timetable_body table tbody {
    display: block !important;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
  }
  .timetable_main .timetable_body table tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-top: 1px solid #4e41b3 !important;
  }
  .timetable_main .timetable_body table th {
    flex: 0 0 40px !important;
    box-sizing: border-box !important;
    border-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .timetable_main .timetable_body table td {
    flex: 0 0 auto !important;
    border-top: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* 分のない穴埋めセルは隠して詰める（行ごとのセル数を揃える穴埋めが横幅を食う） */
  .timetable_main .timetable_body table td:empty { display: none !important; }
  .timetable_main .timetable_body table td .min {
    width: auto !important; min-width: 26px !important; padding: 4px 4px !important;
  }
  /* 備考行(colspan のセル)は折り返し列ではなく1ブロックとして全幅に */
  .timetable_main .timetable_body table td[colspan] { flex: 1 1 100% !important; }

  /* === bus_search 50音セレクタ: 320px で右に +8px はみ出す問題 ===
     .letter_sel_box は bus_train_info.css で float:left + margin-left:20px。
     その 20px 左マージンで box が右へ押し出され、最狭320pxで本文ガターを超えて
     +8px(docOverflow も8)はみ出す。モバイルでは float/左マージンを解除し全幅に。 */
  #cid-200 .letter_sel_box,
  .letter_sel_box {
    float: none !important;
    margin-left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ============================================================================
   スマートフォン (<= 600px) — 1カラム前提の微調整
   ============================================================================ */
@media screen and (max-width: 600px) {
  .recommend td { width: calc(50% - 4px) !important; }
  /* セレクトは内容幅のまま（≤600でも幅制約を掛けず、月/日/時/分を横並び維持） */
  .datetime .select_btn select { max-width: none !important; padding: 6px 2px !important; }
  .header_logo img { max-height: 34px !important; }
  /* メイン画像の余白詰め */
  .contents_main_right .main_image { text-align: center !important; }
  .appli_link { text-align: center !important; }
  .appli_link img { max-height: 44px !important; width: auto !important; }
}


/* ============================================================================
   ぽよんローダー（共通パーツ） — ①検索待ちダイアログ ②初回/遅い読み込みの全画面
   ----------------------------------------------------------------------------
   配色はサイトの紫#7d5ba6 / 赤#d94c5c / ピンク#e98aac / 金#d8a93a。
   ドット本体は .aky-poyon に共通化し、検索ダイアログ・全画面の両方で使う。
   ============================================================================ */

/* --- ぽよんドット本体（どこでも使える共通パーツ） --- */
.aky-poyon { display: flex; gap: 13px; align-items: flex-end; justify-content: center; height: 52px; }
.aky-poyon i {
  width: 18px; height: 18px; border-radius: 50%;
  animation: aky-poyon .58s ease-in-out infinite;   /* 待ちなしで連続して弾む */
}
.aky-poyon i:nth-child(1) { background: #7d5ba6; }                        /* 紫 */
.aky-poyon i:nth-child(2) { background: #d94c5c; animation-delay: .12s; } /* 赤 */
.aky-poyon i:nth-child(3) { background: #e98aac; animation-delay: .24s; } /* ピンク */
.aky-poyon i:nth-child(4) { background: #d8a93a; animation-delay: .36s; } /* 金 */
@keyframes aky-poyon {
  0%, 100% { transform: translateY(0) scale(1); }              /* 着地（丸） */
  30%      { transform: translateY(-33px) scaleY(1.12) scaleX(.9); } /* 伸びて上昇（高さ1.5倍） */
  60%      { transform: translateY(0) scaleY(.8) scaleX(1.2); } /* 着地でぷにっ */
}
@media (prefers-reduced-motion: reduce) {
  .aky-poyon i { animation: none; }
}

/* --- ① 検索待ちダイアログ（既存 #searching_message を“ぽよん”化） ---
   jQuery UI dialog(dialogClass:ui-dialog-notitle=検索専用)。renewal.js が
   #searching_message の中へぽよんドットを差し込み、ここで見た目を整える。 */
.ui-dialog.ui-dialog-notitle {
  background: #fbf5e8 !important;        /* クリーム地 */
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(60,40,80,.25) !important;
  padding: 22px 26px !important;
  height: auto !important;   /* 幅は jQuery UI の指定(=中央寄せ計算)に合わせ触らない */
}
.ui-dialog.ui-dialog-notitle .ui-dialog-titlebar { display: none !important; }
.ui-dialog.ui-dialog-notitle #searching_message {
  height: auto !important; width: auto !important; padding: 0 !important;
  background: transparent !important; border: none !important; overflow: visible !important;
  display: flex !important; flex-direction: column; align-items: center; gap: 14px;
}
#searching_message .aky-poyon { height: 44px; }
#searching_message .aky-poyon i { width: 16px; height: 16px; }
#searching_message .message {
  margin: 0 !important; color: #7d5ba6; font-size: 15px; font-weight: bold;
  letter-spacing: .08em; text-align: center;
}

/* === 汎用メッセージダイアログ(ShowMessage の .message_dialog)をリニューアル基調に ===
   jQuery UI 1.13(JS)とテーマCSS(1.10系)の差で .ui-button が素のネイティブボタン化
   （×が「Close」文字＋outset枠、閉じるも灰色の素ボタン）になる。タイトルバーは旧テーマ紫
   #553e85。これをリニューアルの紫グラデ＋クリーンな×＋テーマボタンに統一する。
   検索待ち(.ui-dialog-notitle)は別途専用スタイルがあるため :has(.message_dialog) で限定。 */
.ui-dialog:has(.message_dialog) {
  border: none !important; border-radius: var(--rnw-radius) !important; padding: 0 !important;
  overflow: hidden !important; background: var(--rnw-card) !important;
  box-shadow: 0 12px 32px rgba(60,40,80,.28) !important;
}
.ui-dialog:has(.message_dialog) .ui-dialog-titlebar {
  margin: 0 !important; padding: 12px 46px 12px 18px !important; border: none !important; border-radius: 0 !important;
  background: linear-gradient(180deg, var(--rnw-primary) 0%, var(--rnw-primary-dark) 100%) !important;
}
.ui-dialog:has(.message_dialog) .ui-dialog-title {
  float: none !important; margin: 0 !important; color: #ffffff !important;
  font-size: 16px !important; font-weight: bold !important; letter-spacing: .04em !important; line-height: 1.4 !important;
}
/* 閉じる(×)ボタン: ネイティブ枠/「Close」文字/アイコンを消し、白い×の丸ボタンに */
.ui-dialog:has(.message_dialog) .ui-dialog-titlebar-close {
  position: absolute !important; top: 50% !important; right: 12px !important; transform: translateY(-50%) !important;
  width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important;
  border: none !important; border-radius: 50% !important; background: rgba(255,255,255,.18) !important;
  -webkit-appearance: none !important; appearance: none !important; overflow: hidden !important;
  font-size: 0 !important; color: transparent !important; cursor: pointer !important;
}
.ui-dialog:has(.message_dialog) .ui-dialog-titlebar-close:hover { background: rgba(255,255,255,.34) !important; }
.ui-dialog:has(.message_dialog) .ui-dialog-titlebar-close .ui-icon,
.ui-dialog:has(.message_dialog) .ui-dialog-titlebar-close .ui-button-icon-space { display: none !important; }
.ui-dialog:has(.message_dialog) .ui-dialog-titlebar-close::before {
  content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important;
  width: 13px !important; height: 13px !important; transform: translate(-50%, -50%) !important;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.8'%20stroke-linecap='round'%3E%3Cpath%20d='M6%206l12%2012M18%206L6%2018'/%3E%3C/svg%3E") !important;
}
/* 本文 */
.ui-dialog:has(.message_dialog) .message_dialog.ui-dialog-content {
  margin: 0 !important; padding: 20px 18px !important; border: none !important; background: transparent !important;
  font-size: 15px !important; line-height: 1.7 !important; color: var(--rnw-ink) !important;
}
/* ボタンペーン */
.ui-dialog:has(.message_dialog) .ui-dialog-buttonpane {
  margin: 0 !important; padding: 0 18px 16px !important; border: none !important; background: transparent !important; text-align: right !important;
}
.ui-dialog:has(.message_dialog) .ui-dialog-buttonpane .ui-dialog-buttonset { float: none !important; }
/* 閉じる ボタン: リニューアルの紫ボタンに */
.ui-dialog:has(.message_dialog) .ui-dialog-buttonpane button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 100px !important; min-height: 40px !important; margin: 0 !important; padding: 8px 22px !important;
  border: 1px solid rgba(0,0,0,.12) !important; border-radius: var(--rnw-radius-sm) !important;
  -webkit-appearance: none !important; appearance: none !important;
  background: linear-gradient(180deg, var(--rnw-primary) 0%, var(--rnw-primary-dark) 100%) !important;
  color: #ffffff !important; font-size: 15px !important; font-weight: bold !important; letter-spacing: .04em !important;
  box-shadow: var(--rnw-shadow) !important; cursor: pointer !important;
}
.ui-dialog:has(.message_dialog) .ui-dialog-buttonpane button .ui-button-text { padding: 0 !important; }
.ui-dialog:has(.message_dialog) .ui-dialog-buttonpane button:hover { filter: brightness(1.06) !important; }
.ui-dialog:has(.message_dialog) .ui-dialog-buttonpane button:active { filter: brightness(.92) !important; }

/* --- ② 全画面オーバーレイ（初回/遅い読み込み時だけ表示。速い遷移では出さない＝フラッシュ無し） ---
   既定は非表示。renewal.js が「読み込みが一定時間を超えたら」.is-active を付けて表示する。
   JS無効時も既定の非表示のままなので、ページは普通に使える。 */
#aky-loader {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: #fbf5e8;                       /* サイトのクリーム地 */
  opacity: 0; visibility: hidden;            /* 既定は出さない */
  transition: opacity .45s ease, visibility .45s ease;
}
#aky-loader.is-active { opacity: 1; visibility: visible; }   /* 遅い読み込み時のみ表示 */


/* ============================================================================
   PC(デスクトップ >900px) リニューアル
   中央寄せ1080px・整ったGrid 2カラム・スマホと同じ清潔感（カード/ボタン/アイコン）
   ============================================================================ */
@media screen and (min-width: 901px) {
  /* --- 中央寄せ最大1080px（主要ブロックの内容幅） --- */
  /* 旧設計の固定 width:960px も width:auto で解除（901–979px帯のはみ出し対策を兼ねる） */
  .header_content, .header_menu table,
  .contents, .footer_content, .page_top {
    width: auto !important; max-width: 1080px !important;
    margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important;
  }
  /* 左右ガター（コンテナ幅未満のビューポートでも端に張り付かないよう） */
  .contents, .footer_content { padding-left: 20px !important; padding-right: 20px !important; }

  /* 901–979px帯対策: 旧960px固定設計の min-width:960px が残る要素を流動化。
     これが無いと PC幅(>=901)でフッター/ページトップ/お知らせ等が画面外へ突き出す。 */
  #body_wrapper, .header, .header_content, .contents, .contents_main, .contents_main_map,
  .footer, .footer_content,
  .page_top, .information_area, .information, .traffic, .recommend, .pankuzu, .page_title {
    min-width: 0 !important;
  }

  /* --- ヘッダー: 白基調のクリーンに（タイル/季節背景を撤去） --- */
  .header { min-width: 0 !important; height: auto !important;
            background: var(--rnw-card) !important; box-shadow: var(--rnw-shadow) !important; }
  .header_left_bg, .header_back_img { display: none !important; }
  .header_content { position: relative !important; height: auto !important; padding: 8px 20px !important; }
  .header_left, .header_logo { position: static !important; float: left !important; height: auto !important; }
  .header_logo img { height: 38px !important; width: auto !important; }
  .header_righttop { position: absolute !important; top: 8px !important; right: 20px !important; width: auto !important; }
  .header_righttop img { max-height: 30px !important; }
  .select_language { background: transparent !important; }
  .header_menu { clear: both !important; background: transparent !important; }
  .header_menu table { width: 100% !important; border-collapse: separate !important; }
  .header_menu td { border: 0 !important; width: auto !important; }
  .header_menu { clear: both !important; background: transparent !important; margin-top: 2px !important; }
  .header_menu td a { color: var(--rnw-ink) !important; background: transparent !important;
                      height: 38px !important; line-height: 38px !important; border-radius: var(--rnw-radius-sm) !important;
                      font-weight: bold !important; }
  .header_menu td a:hover { background: var(--rnw-primary-light) !important; color: var(--rnw-primary-dark) !important;
                      opacity: 1 !important; filter: none !important; }

  /* --- メイン: Grid 2カラム（トップページ限定: .main_image を含む .contents のみ） --- */
  .contents:has(.main_image) { display: grid !important; grid-template-columns: 360px minmax(0, 1fr) !important;
              gap: 24px !important; align-items: start !important; padding: 24px 20px !important; }
  .contents:has(.main_image) > .left_block { float: none !important; width: auto !important; }
  .contents:has(.main_image) > .contents_main_right { float: none !important; width: auto !important; }
  .contents:has(.main_image) > .c-both { display: none !important; }
  .top_no_title { display: none !important; }
  .contents:has(.main_image) > .recommend,
  .contents:has(.main_image) > .information_area { grid-column: 1 / -1 !important; max-width: none !important; }

  /* --- 検索ボックス カード --- */
  .left_search_box { width: auto !important; height: auto !important; background: var(--rnw-card) !important;
    border: 1px solid var(--rnw-line) !important; border-radius: var(--rnw-radius) !important;
    box-shadow: var(--rnw-shadow) !important; padding: 18px !important; box-sizing: border-box !important;
    background-image: none !important; }
  .left_search_box .title { width: auto !important; margin-left: 0 !important; height: auto !important;
    line-height: 1.4 !important; font-size: 17px !important; }
  .od_input { position: relative !important; }
  .od_input .search_input { display: block !important; width: 100% !important; box-sizing: border-box !important;
    height: 44px !important; margin: 0 0 10px 0 !important; padding: 10px 12px !important; font-size: 15px !important;
    border: 1px solid var(--rnw-line) !important; border-radius: var(--rnw-radius-sm) !important; }
  .od_input .change_btn { position: absolute !important; right: 6px !important; top: 49px !important;
    transform: translateY(-50%) !important; margin: 0 !important; width: 40px !important; height: 40px !important;
    z-index: 3 !important; background: #fff !important; border: 1px solid var(--rnw-line) !important;
    border-radius: 50% !important; box-shadow: var(--rnw-shadow) !important; display: flex !important;
    align-items: center !important; justify-content: center !important; }
  .od_input .change_btn a { display: block !important; width: 100% !important; height: 100% !important;
    background: url("../img/contents/change_od_renewal.svg") center / 22px 22px no-repeat !important; }
  .od_input .change_btn a img { display: none !important; }
  /* 日時指定は検索ボックス(.left_search_box)限定にスコープ＝地図ページ(.map_search)には適用せず */
  .left_search_box .datetime { position: static !important; margin-top: 10px !important; }
  .left_search_box .datetime_label { width: auto !important; height: auto !important; line-height: 1.5 !important;
    margin: 0 0 8px 0 !important; padding: 6px 10px !important; box-sizing: border-box !important; }
  .left_search_box .datetime .radio_btn { margin: 6px 0 !important; }
  .left_search_box .datetime .radio_btn label { width: auto !important; margin: 4px 12px 4px 0 !important; }
  .left_search_box .datetime .select_btn { margin-left: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; }
  .left_search_box .datetime .select_btn > br { display: none !important; }
  .left_search_box .datetime .select_btn select { height: 40px !important; font-size: 14px !important; width: auto !important; max-width: none !important;
    margin: 4px 4px 6px 0 !important; padding: 6px 3px !important;
    border: 1px solid var(--rnw-line) !important; border-radius: var(--rnw-radius-sm) !important; }
  .left_search_box .datetime .select_btn select.select_hour { margin-left: 0 !important; }
  .left_search_box .datetime .curr_time { position: static !important; display: flex !important; align-items: center !important;
    width: auto !important; margin: 4px 0 6px auto !important; right: auto !important; top: auto !important; }
  .left_search_box .datetime .curr_time a { display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: auto !important; padding: 7px 12px !important; white-space: nowrap !important; box-sizing: border-box !important; }
  .left_search_box .datetime .curr_time a br { display: none !important; }
  .left_search_box .datetime .curr_time a::before { content: "" !important; width: 16px !important; height: 16px !important; margin-right: 5px !important;
    background: url("../img/contents/icon_clock.svg") center / contain no-repeat !important; }
  /* 検索ボタン（CSSボタン＋SVG虫眼鏡・紫グラデ） */
  .search_btn { text-align: center !important; margin-top: 14px !important; }
  .search_btn a { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    width: 100% !important; box-sizing: border-box !important; padding: 13px 16px !important;
    border-radius: var(--rnw-radius-sm) !important; border: 1px solid rgba(0,0,0,.12) !important;
    background: linear-gradient(180deg, var(--rnw-primary) 0%, var(--rnw-primary-dark) 100%) !important;
    color: #fff !important; font-size: 17px !important; font-weight: bold !important; letter-spacing: .05em !important;
    text-decoration: none !important; box-shadow: var(--rnw-shadow) !important; }
  .search_btn a::before { content: "" !important; width: 20px !important; height: 20px !important; flex: 0 0 auto !important;
    background: url("../img/contents/icon_search.svg") center / contain no-repeat !important; }
  .search_btn a img { display: none !important; }
  .search_btn .rnw-btn-label { display: inline-block !important; }

  /* --- 右カラム: メイン画像・アプリDL --- */
  .main_image img { max-width: 100% !important; height: auto !important; border-radius: var(--rnw-radius) !important; }
  .appli_link { width: auto !important; height: auto !important; line-height: normal !important;
    background: var(--rnw-card) !important; border: 1px solid var(--rnw-line) !important;
    border-radius: var(--rnw-radius) !important; padding: 14px !important; text-align: center !important; box-sizing: border-box !important; }
  .appli_link span { width: auto !important; margin: 0 0 12px 0 !important; display: block !important; }
  .appli_link a { display: inline-block !important; }
  .appli_link a img { max-height: 44px !important; width: auto !important; margin: 0 8px !important; }

  /* --- おすすめコンテンツ --- */
  .recommend .title { width: auto !important; height: auto !important; line-height: 1.4 !important;
    background: none !important; padding: 0 0 10px 0 !important; margin-bottom: 14px !important;
    border-bottom: 2px solid var(--rnw-line) !important; }
  .recommend .title span { margin-left: 0 !important; font-size: 18px !important; font-weight: bold !important;
    display: inline-block !important; padding-left: 12px !important; border-left: 5px solid var(--rnw-primary) !important; }
  .recommend table { width: 100% !important; background: transparent !important; border: 0 !important; padding: 0 !important; }
  .recommend td img { max-width: 100% !important; height: auto !important; border-radius: var(--rnw-radius-sm) !important; }

  /* --- お知らせ/運行情報 --- */
  .information_area { background: var(--rnw-card) !important; border: 1px solid var(--rnw-line) !important;
    border-radius: var(--rnw-radius) !important; padding: 16px !important; box-sizing: border-box !important; }
  /* 固定 width:928px/450px の2カラムを流動化して縦積みに（901–979px帯のはみ出し対策） */
  .information_area .information, .information_area .traffic {
    float: none !important; width: auto !important; margin-left: 0 !important; }
  .information_area .traffic { margin-top: var(--rnw-gap) !important; }

  /* ========================================================================
     地図ページ(.map_search) PC: トップと同じカード基調に揃える
     ・960px固定＋虫眼鏡背景(search_wide.png)＋float多用 →
       中央寄せ1080px・白カード・flexの整列に置換（map.css を上書き）
     ======================================================================== */
  /* パンくず・ページ見出しも本文と同じ1080px幅で中央寄せ（サブページ共通で整列）
     固定 width:960px は width:auto で解除（901–979px帯のはみ出し対策） */
  .pankuzu, .page_title { width: auto !important; max-width: 1080px !important; margin-left: auto !important; margin-right: auto !important;
    padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; }
  /* 見出し帯の内側<p>も固定 width:938px を解除して流動化 */
  .page_title p { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }

  /* メインコンテナを中央寄せ1080pxに（min-width:960pxの固定を解除）。
     ※「地図から調べる」(map_search)だけ＝検索カード＋地図のレイアウト用。
       周辺地図/経路地図/路線図(area_map/search_result_map/rosen_map)は地図を全幅・全高で
       使うため、このパディング＋1080中央寄せは当てない（上下のクリーム余白で地図が縮む・
       スクロール時に上端/下端が狭く見える問題の回避）。min-width:0 は上の一括リセットで担保。 */
  .contents_main_map.map_search { width: auto !important; max-width: 1080px !important;
    margin: 0 auto !important; padding: 8px 20px 24px !important; box-sizing: border-box !important; }

  /* バス路線図(rosen_map): 地図とその上の系統セレクタ帯を本文と同じ1080px幅で中央寄せ
     （ユーザ要望: 地図の左右マージンを本文に合わせる）。縦 padding は付けない＝地図の縦が
     クリーム余白で縮む/上下が狭く見える問題(area_map等で懸念した件)を避け、左右だけ整える。 */
  .section_title.rosen_keito_title,
  .contents_main_map.rosen_map { width: auto !important; max-width: 1080px !important;
    margin-left: auto !important; margin-right: auto !important;
    padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; }

  /* 検索エリア = 白カード（虫眼鏡の装飾背景を撤去） */
  .map_search .search_area { width: auto !important; height: auto !important; margin: 0 0 16px 0 !important;
    background: var(--rnw-card) !important; background-image: none !important;
    border: 1px solid var(--rnw-line) !important; border-radius: var(--rnw-radius) !important;
    box-shadow: var(--rnw-shadow) !important; padding: 18px 20px !important; box-sizing: border-box !important; }
  .map_search .search_area_title { height: auto !important; line-height: 1.4 !important; margin: 0 0 14px 0 !important;
    padding: 0 0 10px 0 !important; font-size: 16px !important; font-weight: bold !important;
    border-bottom: 2px solid var(--rnw-line) !important; }
  .map_search .search_area_title span { display: inline-block !important; padding-left: 12px !important;
    border-left: 5px solid var(--rnw-primary) !important; }

  /* フォーム内の2ブロック(出発地/日時)を横並びflexに（案内.right_guideは全幅で非表示） */
  .map_search form { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 20px !important; }
  .map_search .od_input { float: none !important; width: 320px !important; margin: 0 !important; box-sizing: border-box !important; }
  .map_search .datetime { float: none !important; width: 300px !important; margin: 0 !important; position: static !important; box-sizing: border-box !important; }

  /* 出発地/目的地ラベルチップ(dep_label/arr_label)は全ビューポート共通でグローバル定義（上方参照） */
  /* 出発地: 全幅入力＋「地図上に配置」ボタン */
  .map_search .od_input input { display: block !important; width: 100% !important; box-sizing: border-box !important;
    height: 44px !important; line-height: normal !important; margin: 0 0 10px 0 !important; padding: 8px 12px !important;
    font-size: 15px !important; vertical-align: baseline !important;
    border: 1px solid var(--rnw-line) !important; border-radius: var(--rnw-radius-sm) !important; }
  .map_search .od_input .od_button { float: none !important; display: inline-flex !important; align-items: center !important;
    justify-content: center !important; width: auto !important; height: auto !important; line-height: 1.2 !important;
    margin: 0 !important; padding: 10px 18px !important; box-sizing: border-box !important; text-decoration: none !important;
    background: var(--rnw-primary-light) !important; border: 1px solid var(--rnw-primary) !important; border-radius: var(--rnw-radius-sm) !important; }
  .map_search .od_input .od_button span { color: var(--rnw-primary-dark) !important; font-size: 14px !important; font-weight: bold !important; }
  .map_search .od_input .guide { float: none !important; width: 100% !important; margin: 12px 0 0 0 !important;
    font-size: 12px !important; line-height: 1.5 !important; color: var(--rnw-ink-sub) !important; }

  /* 日時指定（トップの検索ボックスと同じ見た目に） */
  .map_search .datetime_label { width: auto !important; height: auto !important; line-height: 1.5 !important;
    margin: 0 0 8px 0 !important; padding: 6px 10px !important; box-sizing: border-box !important; text-align: left !important;
    background-color: var(--rnw-gold) !important; border-radius: var(--rnw-radius-sm) !important; }
  .map_search .datetime .radio_btn { margin: 6px 0 !important; }
  .map_search .datetime .radio_btn label { width: auto !important; margin: 4px 12px 4px 0 !important; }
  .map_search .datetime .select_btn { position: static !important; margin-left: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; }
  .map_search .datetime .select_btn > br { display: none !important; }
  .map_search .datetime .select_btn select { width: auto !important; height: 40px !important; font-size: 14px !important;
    margin: 4px 4px 6px 0 !important; padding: 6px 3px !important; vertical-align: middle !important;
    border: 1px solid var(--rnw-line) !important; border-radius: var(--rnw-radius-sm) !important; }
  .map_search .datetime .select_btn select.select_month { width: auto !important; }
  .map_search .datetime .select_btn select.select_hour { margin-left: 0 !important; }
  .map_search .datetime .curr_time { position: static !important; top: auto !important; right: auto !important;
    display: flex !important; align-items: center !important; width: auto !important; margin: 4px 0 6px auto !important; }
  .map_search .datetime .curr_time a { display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: auto !important; padding: 7px 12px !important; line-height: 1.2 !important; white-space: nowrap !important;
    box-sizing: border-box !important; text-decoration: none !important; }
  .map_search .datetime .curr_time a br { display: none !important; }
  .map_search .datetime .curr_time a::before { content: "" !important; width: 16px !important; height: 16px !important;
    margin-right: 5px !important; background: url("../img/contents/icon_clock.svg") center / contain no-repeat !important; }

  /* 地図エリア: 角丸＋枠で本文に馴染ませる */
  .map_search .map_area { min-width: 0 !important; border: 1px solid var(--rnw-line) !important;
    border-radius: var(--rnw-radius) !important; overflow: hidden !important; }
}

/*****************************************************************************/
/* 印刷用レイアウト                                                          */
/* style.css/renewal-pc.css は共に @media screen 配下のため、印刷時は新PC・   */
/* モバイル両レイアウトが無効化され旧PCレイアウト(style.css)へフォールバック  */
/* する＝「古いPCレイアウト」で印刷されてしまう。印刷では新レイアウト相当の   */
/* 素のコンテンツのみを残し、ヘッダー・フッター・操作UIを非表示にする。 */
/*****************************************************************************/
@media print {

  /* 地色をクリーム→白に（line38 の body 背景指定を印刷向けに上書き） */
  html, body {
    background: #fff !important;
    background-image: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000 !important;
  }

  /* --- 画面用クロム・操作UIは印刷しない --- */
  .header, .header_content, .header_menu,
  .page_top,
  .footer, .footer_content,
  /* 時刻表ページの操作系（系統/行先選択＋検索ボタン・日付変更・印刷ボタン自体） */
  .timetable_dest_title,
  .timetable_datesel,
  .timetable_subtitle .print {
    display: none !important;
  }

  /* --- 本文を全幅・白背景に。旧 min-width:960/固定幅を解除 --- */
  #body_wrapper, #body_wrapper * {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  #body_wrapper, .main, .main_contents,
  .contents, .contents_main, .contents_main_left, .contents_main_right {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  /* --- パンくず: 文脈として残しつつ控えめに --- */
  .pankuzu {
    margin: 0 0 6px 0 !important;
    padding: 4px 0 !important;
    font-size: 12px !important;
    color: #444 !important;
  }

  /* --- 見出し（バス停名/駅名）: 旧・黒帯→新レイアウト風の紫アクセント見出し --- */
  .page_title {
    width: auto !important;
    height: auto !important;
    background: #fff !important;
    border-left: 6px solid var(--rnw-primary) !important;
    margin: 0 0 10px 0 !important;
    padding: 2px 0 2px 12px !important;
  }
  .page_title p, .page_title span {
    color: #000 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
  }

  /* --- 時刻表本体: 全幅で出力 --- */
  .timetable_main { padding: 0 !important; background: #fff !important; }
  .timetable_subtitle, .timetable_dest, .timetable_body { width: auto !important; }
  .timetable_dest { margin: 0 0 8px 0 !important; }
  .timetable_body { margin: 8px 0 0 0 !important; }
  .timetable_body table { width: 100% !important; }
  /* タブ: 上の #body_wrapper * の box-sizing:border-box により height:25px固定だと
     パディングが内側に押し込まれて文字が潰れる。height:auto で実寸に戻す。
     幅も auto にして英語の長いラベル(Sunday&Holiday 等)が切れないようにする。 */
  .timetable_body ul.tab li {
    width: auto !important;
    height: auto !important;
    line-height: 1.2 !important;
    padding: 7px 14px 9px 14px !important;
  }

  /* --- 紫の見出しバー/タブ/表ヘッダの地色を印刷でも保持（背景印刷OFF対策） --- */
  .timetable_dest,
  .timetable_body ul.tab li,
  .timetable_body table th,
  .timetable_body table tr.gray {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ============================================================================
   WCAG 2.1 AA アクセシビリティ補正（全ビューポート共通・renewal.css 所有）
   ----------------------------------------------------------------------------
   テンプレで足せない/CSSで直すべき a11y 項目をここに集約。色や outline の
   見た目変更だが、フォーカスリングは :focus-visible 限定（マウス操作では
   出ない）なのでデスクトップの通常表示は無改変。確定値は後勝ち用に !important。
   ※ 金帯コントラスト(.datetime_label)は renewal-a11y.css が担当（重複回避）。
   ============================================================================ */

/* --- ユーティリティ: 視覚的に隠す h1/見出し（SR には読ませる） --- */
.rnw-visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* --- ★B スキップリンク（Tab で最初に出現。通常は画面外、フォーカスで表示） --- */
.rnw-skip-link {
  position: absolute !important; left: 8px; top: -48px;
  z-index: 10000;
  background: var(--rnw-primary, #7d5ba6); color: #fff !important;
  padding: 8px 16px; border-radius: 0 0 6px 6px;
  font-size: 14px; font-weight: bold; text-decoration: none !important;
  transition: top .15s ease;
}
.rnw-skip-link:focus { top: 0; outline: 3px solid #ffd54a; outline-offset: 2px; }

/* --- ★C フォーカスの可視化（2.4.7 AA） ---
   お知らせ一覧・jQuery UI タブ等の outline:none を打ち消し、キーボード操作時に
   可視リングを出す。:focus-visible 限定なのでマウスクリックでは出ない。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.information_area .information ul a:focus-visible,
.ui-tabs .ui-tabs-nav li:focus-visible,
.ui-tabs .ui-tabs-nav li a:focus-visible {
  outline: 3px solid #1b66c9 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 1px #fff !important;
}

/* --- ★2/色 タブのコントラスト（1.4.3 AA） ---
   時刻表(平日/土曜/日祝) と 経路結果(到着順/出発順 等)の未選択タブは
   白文字 on #7c72c7 = 3.67:1 で不足。同系の濃い紫 #5b50ad(白on=5.2:1)へ。
   選択タブ(白地に濃字)は元から合格のため触らない。 */
.timetable_body ul.tab li,
#result_list ul.tab li a,
#result_detail ul.tab li a {
  background-color: #5b50ad !important;
}
.timetable_body ul.tab li.selected,
#result_list ul.tab li a.active,
#result_detail ul.tab li a.active {
  background-color: #ffffff !important;   /* 選択タブは白地（濃字）を維持 */
}

/* --- ★D ターゲットサイズ（2.5.8 AA, WCAG2.2） ---
   出発/到着/始発/終電 の 13px ラジオを、見た目はそのままにクリック領域を
   ラベルごと最小 24px 高に。タップ判定を label が担うので操作性も向上。 */
.left_search_box .radio_btn label,
.map_search .radio_btn label,
.datetime .radio_btn label {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 2px 4px !important;
}