/* ============================================================================
歩くまち京都 リニューアル — PC(デスクトップ)レイアウト整え
renewal-pc.css ※ min-width:901px のみに適用（モバイルは renewal.css が担当）
----------------------------------------------------------------------------
テーマ系ページ（renewal-pc.js が .contents に rnw-pc-themed を付与し、子を
[テーマメニュー, 本文, 検索ボックス] の順へ並び替え済み）のPC配置:
┌─────────────┬───────────────────────┐
│ テーマメニュー(左上) │ 本文＝選択コンテンツ(右) │
├─────────────┴───────────────────────┤
│ バス・電車の乗換を検索（最下部・全幅） │
└──────────────────────────────────────┘
スマホ幅では本CSSは無効化され、DOM順どおり縦積み（メニュー→本文→検索）。
トップページ等 rnw-pc-themed を持たないページには一切影響しない。
============================================================================ */
/* ============================================================================
フォントサイズのバランス調整（テーマ系ページ／全ビューポート共通）
階層: 黒帯ページタイトル20 ＞ 茶帯/テーマ見出し20-21 ＞ カード見出し18 ＞ 項目14
※ 対象classはテーマ系ページにしか存在しないため他ページに影響しない
============================================================================ */
/* 「テーマでめぐる京都観光」見出し: 16px→20px・太字（小さすぎを解消） */
.left_menu_theme .title { font-size: 20px !important; font-weight: 700 !important; }
/* テーマメニューの項目（大項目・子項目）リンク: 11px→14px（読みやすく） */
.left_menu_theme a { font-size: 14px !important; }
/* ルートカード見出し: 22px→18px（ページタイトル20pxより大きい逆転を解消） */
.route_plan_title span { font-size: 18px !important; }
@media screen and (min-width: 901px) {
/* フロート子を含むよう .contents をクリアフィックス */
.contents.rnw-pc-themed::after { content: ""; display: table; clear: both; }
/* テーマでめぐる京都観光メニュー: 左上 */
.contents.rnw-pc-themed > .left_menu_theme {
float: left;
width: 280px;
margin: 0 24px 28px 0;
box-sizing: border-box;
}
/* メニュー内の旧 width:218px 固定を解除し、280pxカード幅(padding11px内側=258px)
いっぱいに広げる。これをしないと紫タイトル/項目がカード右に約51pxの空白帯を
残す（＝右側マージンがバランス悪く見える原因）。スマホ側は別ブロックで対応済み。 */
.contents.rnw-pc-themed > .left_menu_theme .title,
.contents.rnw-pc-themed > .left_menu_theme .left_menu,
.contents.rnw-pc-themed > .left_menu_theme .left_menu > li,
.contents.rnw-pc-themed > .left_menu_theme .left_submenu,
.contents.rnw-pc-themed > .left_menu_theme .left_submenu > li {
width: auto !important;
box-sizing: border-box !important;
}
/* 選択コンテンツ表示領域: メニューの右側（残り幅）
margin-bottom は下の検索ボックスとの間隔。clear:both 側の margin-top は
クリアランスに吸収され効かない（実測gap=0）ため、float 側で間隔を確保する。 */
.contents.rnw-pc-themed > .contents_main_right {
float: right;
width: calc(100% - 304px) !important; /* 280(メニュー)＋24(余白) */
margin-bottom: 28px !important;
box-sizing: border-box;
}
/* バス・電車の乗換を検索: 左右フロートの下へ全幅で
（間隔は上のフロート margin-bottom が担当。margin-top はクリアランスで無効） */
.contents.rnw-pc-themed > .left_block {
clear: both;
float: none !important;
width: 100% !important;
box-sizing: border-box;
}
/* --- 本文内の横余白を均一化 ---
旧700px列向けの固定幅（.route_guide_title=700px / .route_plan=672px）と
.route_guide_content の左右padding(15px)により、ブラウンの見出し帯とカードの
左右の隙間がバラバラだった。本文カラム幅(.contents_main_right)に揃えて統一する。 */
.contents.rnw-pc-themed > .contents_main_right .route_guide_title { width: auto !important; }
.contents.rnw-pc-themed > .contents_main_right .route_guide_content {
padding-left: 0 !important; padding-right: 0 !important;
}
.contents.rnw-pc-themed > .contents_main_right .route_plan { width: auto !important; }
/* --- ルートカード: 画像とテキストのバランス調整 ---
旧デザインの小さなサムネイル(約82px)＋固定幅セル(115/521/30=666px)で、
大きな22pxタイトルに対し画像が小さく、右に約70pxの空きも出ていた。
画像を行高に合わせた大きめサムネイル(cover)に、タイトル列を可変にして
表をカード幅いっぱいに広げる。 */
/* 灰背景テーブルは margin:2px を持つので、width:100% だと 100%+4px となり
枠(.route_plan border)から右に約1pxはみ出して左右非対称にずれる。
calc(100% - 4px) で margin 込み 100% に収め、枠内に左右対称で配置する。
背景 title_bg.png は 1x90px(縦90px固定の縦グラデ)で、height:auto により行が
約100pxになると下に約10pxの未描画(白帯)が出る。background-size:100% 100% で
行高いっぱいに伸ばし、灰背景を枠内に上下とも均一に充填する。 */
.contents.rnw-pc-themed .route_plan_title {
width: calc(100% - 4px) !important;
height: auto !important;
background-size: 100% 100% !important;
}
/* 画像セル（先頭td）と中のサムネイル */
.contents.rnw-pc-themed .route_plan_title > tbody > tr > td:first-child {
width: 152px !important; padding: 8px 12px 8px 8px !important; vertical-align: middle !important;
}
.contents.rnw-pc-themed .route_plan_title > tbody > tr > td:first-child img {
width: 132px !important; height: 84px !important; object-fit: cover !important;
border-radius: 4px !important; display: block !important; margin: 0 !important;
}
/* タイトル列を可変＝残り幅いっぱいに、見出しテキストもfloat解除で自然配置 */
.contents.rnw-pc-themed .route_plan_title > tbody > tr > td:nth-child(2) {
width: auto !important; padding: 10px 10px 10px 2px !important; vertical-align: middle !important;
}
/* タイトル: 2行になっても読みやすい行間 */
.contents.rnw-pc-themed .route_plan_title span { width: auto !important; float: none !important; line-height: 1.4 !important; }
/* ＋ボタン: 縦中央・端から余白（2行時もテキストと衝突しない） */
.contents.rnw-pc-themed .route_plan_title > tbody > tr > td:last-child {
vertical-align: middle !important; padding-right: 12px !important;
}
/* --- テーマ観光トップ(sightseeing_menu)の4画像メニュー ---
画像テーブルが固定666pxのため、リニューアルで可変になった右列が
666px未満になるPC狭幅(≒901〜1180px)で右へはみ出し、右マージンが
消えてバランスが崩れていた。列幅に追従させ、最大は元の666pxで頭打ちに。 */
.contents.rnw-pc-themed .sightseeing_menu table {
width: 100% !important; max-width: 666px !important;
}
.contents.rnw-pc-themed .sightseeing_menu td { box-sizing: border-box !important; }
.contents.rnw-pc-themed .sightseeing_menu img {
display: block !important; width: 100% !important; height: auto !important;
}
}
/* ============================================================================
スマホ(<=900px): 「テーマでめぐる京都観光」メニューを横幅いっぱいに広げる
（style.css の width:218px 固定群を解除）
============================================================================ */
@media screen and (max-width: 900px) {
.left_menu_theme { width: 100% !important; box-sizing: border-box !important; }
.left_menu_theme .title,
.left_menu_theme .left_menu,
.left_menu_theme .left_menu > li,
.left_menu_theme .left_submenu,
.left_menu_theme .left_submenu > li {
width: auto !important;
box-sizing: border-box !important;
}
}
/* ============================================================================
地図ページ(.map_search) 検索エリアの高さ圧縮（PCのみ / min-width:901px）
----------------------------------------------------------------------------
renewal.css の地図カードは「出発地320px｜日時300px」の2カラム縦積みで、
横幅(1080px中)を640pxしか使わず高さが約321pxに伸びていた。これを
「出発地バンド」「日時バンド」の全幅2段にし、各段を横並びflexに畳んで
高さを圧縮する。renewal.css の後に読まれるため !important で上書き。
スマホ(<=900px)には一切影響しない。
============================================================================ */
@media screen and (min-width: 901px) {
/* カード自体の余白を圧縮 */
.map_search .search_area { padding: 12px 16px !important; margin-bottom: 12px !important; }
.map_search .search_area_title { margin: 0 0 10px 0 !important; padding: 0 0 8px 0 !important; }
/* フォーム = 出発地/日時 を全幅2バンドの縦並び（各バンド内は横flex） */
.map_search form { flex-direction: column !important; flex-wrap: nowrap !important; gap: 10px !important; }
/* 出発地バンド: [出発地チップ][入力欄(伸縮)][地図上に配置] を1行、注意書きは下段全幅 */
.map_search .od_input { width: 100% !important; display: flex !important; flex-wrap: wrap !important;
align-items: center !important; gap: 8px 10px !important; }
.map_search .od_input br { display: none !important; } /* 入力欄直後の
で改行させない */
.map_search .od_input .dep_label { margin: 0 !important; }
.map_search .od_input input { flex: 1 1 260px !important; width: auto !important; margin: 0 !important; }
.map_search .od_input .od_button { margin: 0 !important; white-space: nowrap !important; }
.map_search .od_input .guide { flex: 0 0 100% !important; margin: 0 !important; }
/* 日時バンド: [日時指定][出発/到着…][年月日時分][現在時刻][検索][リセット] を1行(必要なら折返し) */
.map_search .datetime { width: 100% !important; display: flex !important; flex-wrap: wrap !important;
align-items: center !important; gap: 6px 12px !important; }
.map_search .datetime_label { margin: 0 !important; }
.map_search .datetime .radio_btn { margin: 0 !important; display: flex !important; flex-wrap: wrap !important; }
.map_search .datetime .radio_btn label { margin: 0 10px 0 0 !important; }
.map_search .datetime .select_btn { margin: 0 !important; }
.map_search .datetime .select_btn select { margin: 0 4px 0 0 !important; }
.map_search .datetime .curr_time { margin: 0 0 0 2px !important; }
/* 検索/リセットは右端へ寄せる */
.map_search .datetime .map_buttons { margin: 0 0 0 auto !important; }
}
/* ============================================================================
ローディング全画面オーバーレイ(#aky-loader)の背景を少しだけ半透明に
----------------------------------------------------------------------------
renewal.css では不透明のクリーム地(#fbf5e8)で、表示中は背後のページが
完全に隠れる。読み込み中もうっすら背景が見えるようアルファ0.9に。
renewal.css の後に読まれるので !important で上書き（全ビューポート共通）。
============================================================================ */
#aky-loader { background: rgba(251, 245, 232, 0.9) !important; }
/* ============================================================================
京の見所(highlight) 検索フォームのスマホ対応（<=600px）
----------------------------------------------------------------------------
.highlight_search_cond_table はエリア/カテゴリ/スポット名の3列(th 220px固定)で、
スマホでは右にはみ出し、スポット名入力欄と検索/クリアボタンが切れていた。
テーブルを1カラムの grid 化し、tbody/tr を display:contents で透過。各 th/td を
block 化して order で「見出し→内容」のペア順に並べ替え、縦積みにする。
入力欄・ボタンは全幅(指で押せるサイズ)に。renewal.css の縦積み方針に準拠。
============================================================================ */
@media screen and (max-width: 600px) {
.highlight_search_cond_table {
display: grid !important; grid-template-columns: 1fr !important;
border-spacing: 0 !important; margin-top: 4px !important; width: 100% !important;
}
.highlight_search_cond_table > tbody,
.highlight_search_cond_table > tbody > tr { display: contents !important; }
.highlight_search_cond_table > tbody > tr > th,
.highlight_search_cond_table > tbody > tr > td {
display: block !important; width: auto !important; height: auto !important;
}
/* 見出し(th)→内容(td)のペアで縦に並ぶよう order を割当 */
.highlight_search_cond_table > tbody > tr > th:nth-of-type(1) { order: 1 !important; }
.highlight_search_cond_table > tbody > tr > td:nth-of-type(1) { order: 2 !important; margin-bottom: 16px !important; }
.highlight_search_cond_table > tbody > tr > th:nth-of-type(2) { order: 3 !important; }
.highlight_search_cond_table > tbody > tr > td:nth-of-type(2) { order: 4 !important; margin-bottom: 16px !important; }
.highlight_search_cond_table > tbody > tr > th:nth-of-type(3) { order: 5 !important; }
.highlight_search_cond_table > tbody > tr > td:nth-of-type(3) { order: 6 !important; }
/* 内側の選択テーブル（エリア/カテゴリ）は全幅で見やすく */
.highlight_search_area_cond, .highlight_search_category_cond { width: 100% !important; }
/* スポット名入力＆ボタンを全幅・指で押せるサイズに */
.highlight_search_name_cond {
width: 100% !important; box-sizing: border-box !important;
height: 44px !important; font-size: 16px !important; padding: 8px 12px !important;
}
.highlight_search_buttons { margin-top: 14px !important; text-align: center !important; }
.highlight_search_buttons a { display: inline-block !important; }
}
/* ============================================================================
★3 時刻表(timetable) テーブルのスマホ対応
----------------------------------------------------------------------------
.timetable_body table は td に white-space:nowrap＋.min が width:35px 固定の
ため、混雑時間帯(7時・15〜18時等)は分セルが多く、最小内容幅が画面幅を超える。
bus_train_info.css の renewal層は width:100% を当てるが、nowrap＝折返不可なので
100%指定でも内容幅が勝り、親 .timetable_body(overflow-x:visible) で右が切れて
後半の発車分が見えなくなっていた(320:+274 / 375:+219px)。
方針: 親 .timetable_body を横スクロールコンテナ化(overflow-x:auto)し、表を
その自然幅(min-content)で出して全データへスクロール到達できるようにする。
＋ <=600px でフォント/セル余白を縮小し、スクロール量自体も減らす。
bus_train_info.css は別セッション編集中につき触らず、ここで !important 上書き。
デスクトップ(>900px)は max-width ガードで無改変。
============================================================================ */
@media screen and (max-width: 900px) {
/* 親を横スクロールコンテナに。これで表の右側が切れずスクロールで全部見える */
.timetable_main .timetable_body {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
max-width: 100% !important;
}
/* 表は内容に合わせた自然幅(min-content)で。width:100%(=clientW)に縮めると
nowrap で内容がはみ出し再び切れるので、内容幅でスクロールさせる。 */
.timetable_main .timetable_body table {
width: auto !important;
min-width: 100% !important; /* データが少ない時は枠いっぱいに広げる */
max-width: none !important;
}
}
@media screen and (max-width: 600px) {
/* セル余白・フォントを詰めて、スクロール量と1画面の情報密度を改善 */
.timetable_main .timetable_body table th {
font-size: 13px !important;
padding: 8px 6px !important;
white-space: nowrap !important;
}
.timetable_main .timetable_body table td {
font-size: 12px !important;
}
.timetable_main .timetable_body table td .min {
width: 30px !important;
padding: 3px 0 !important;
}
}
/* ============================================================================
★4 経路検索結果(search_result) 詳細テーブルのスマホ対応
----------------------------------------------------------------------------
#result_detail .block table はセル幅が固定(time_2=435px / box-2=482px /
box-8=401px 等)で、合計が画面幅を大きく超え、スマホで右が切れていた
(320:+201 / 375:+146px)。result.css にはモバイル指定が一切無い。
方針(<=600px): td を display:block で縦積み化し、固定幅の各 box-* を
width:auto / max-width:100% に解放して全幅で折り返す。レイアウトは縦積みでも
情報の並び(着発時刻→駅名→運賃→リンク／所要→アイコン→路線名)は保たれる。
result.css は別セッション編集中につき触らず、ここで !important 上書き。
result.css は body内で renewal-pc.css の後に読まれるが !important で確実に勝つ。
デスクトップ(>600px)は無改変。
============================================================================ */
@media screen and (max-width: 600px) {
/* 表自体は枠内に収める(separate/border + padding を維持しつつ全幅) */
#result_detail .block table {
width: 100% !important;
box-sizing: border-box !important;
/* ★fixed にしない★ 概要行の 4 セルがそのまま 4 列になり、縦積みにしても
各セルが 336/4=84px の列に閉じ込められる（実測 81px）。この表は概要行の
4 セル以外すべて 1 セルなので、auto なら 1 列として全幅に広がる。 */
table-layout: auto !important;
}
/* 概要行(発着/所要/乗換運賃/アイコン)を縦積みに
----------------------------------------------------------------------
★セルだけ display:block にしても幅が広がらない★
table-layout:fixed のもとでは、この行の 4 セルがそのまま 4 列を作る。
セルを block にしても各セルの包含ブロックは幅 336/4 = 84px の列のままで、
width:auto は 81px にしかならない（実測）。結果、概要が左の細い柱に
押し込まれ、「所要時 / 間：37分 / (バス 37 / 分、…」のように文字単位で
折り返っていた。
行そのものを display:block にして表のレイアウトから外し、セルの包含ブロックを
表の全幅にする。対象は概要行だけ（行程行は従来どおり表のまま）。 */
#result_detail .block table > tbody > tr:first-child,
#result_detail .block table > tr:first-child {
display: block !important;
width: 100% !important;
}
#result_detail .block table td.time_1,
#result_detail .block table td.time_2,
#result_detail .block table td.time_3,
#result_detail .block table td.time_4 {
display: block !important;
width: 100% !important;
padding: 4px 8px !important;
box-sizing: border-box !important;
}
/* 所要時間の内訳は行内で折り返させる（単語の途中で切らない） */
#result_detail .block table td.time_2,
#result_detail .block table td.time_3 {
word-break: normal !important;
overflow-wrap: anywhere !important;
}
/* 早/安/楽 は横に 3 つ並べる（縦積みの中で更に折り返さないよう詰める） */
#result_detail .block table td.time_4 { white-space: nowrap !important; }
#result_detail .block table td.time_4 img { margin-right: 4px !important; }
/* 行程セル(point)内の固定幅 box-* を解放。inline-block のまま折り返させる */
#result_detail .block table td.point {
padding: 6px 8px !important;
}
#result_detail .block table td.point .box-1,
#result_detail .block table td.point .box-2,
#result_detail .block table td.point .box-3,
#result_detail .block table td.point .box-4,
#result_detail .block table td.point .box-5,
#result_detail .block table td.point .box-6,
#result_detail .block table td.point .box-7,
#result_detail .block table td.point .box-8,
#result_detail .block table td.point .box-9,
#result_detail .block table td.point .box-10 {
width: auto !important;
max-width: 100% !important;
padding-left: 6px !important;
box-sizing: border-box !important;
}
/* 駅名/路線名など長文ブロックは全幅で折り返す */
#result_detail .block table td.point .box-2,
#result_detail .block table td.point .box-8 {
display: block !important;
width: 100% !important;
white-space: normal !important;
word-break: break-word !important;
}
/* 矢印アイコン列(box-5)の左 40px パディングを詰める */
#result_detail .block table td.point .box-5 {
padding-left: 12px !important;
width: auto !important;
}
/* 経路タブ(経路1/地図で見る)は ★9 で扱う。
ここで overflow-x:auto にしていたが、それがスクロール枠を作ってしまい
縦スクロールバーの原因になっていた（理由は ★9 のコメント参照）。 */
#result_detail .block ul.tab { white-space: nowrap !important; }
/* 印刷リンク(absolute)が縦積みの先頭に重ならないよう、ヘッダ右上のまま小さく */
#result_detail .block .print { font-size: 12px !important; }
/* 候補一覧(到着順・所要時間順…)も 1 行 7 セルで狭幅に耐えられない
----------------------------------------------------------------------
番号/発着/所要時間/乗換/運賃/(空)/アイコン の 7 列を 320〜390px へ押し込むため、
「所要時 / 間：37 / 分」のように文字の途中で折り返っていた。
行を flex にして、収まらない項目だけを次の行へ送る。各項目の中では折り返さない。 */
#result_list .panel table { width: 100% !important; table-layout: auto !important; }
#result_list .panel table tr {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 2px 10px !important;
padding: 6px 8px !important;
box-sizing: border-box !important;
}
#result_list .panel table td {
display: block !important;
width: auto !important;
padding: 0 !important;
white-space: nowrap !important; /* 項目の途中では折らない */
}
/* 発着時刻は番号の隣に置き、入り切らない項目だけ次の行へ送る */
#result_list .panel table td.dep_arr { flex: 1 1 auto !important; }
#result_list .panel table td.number { flex: 0 0 auto !important; }
#result_list .panel table td.number p { margin: 0 !important; }
/* 交通機関アイコンは右端へ寄せる */
#result_list .panel table td.icons { margin-left: auto !important; }
/* 中身が空のセルは場所だけ取るので畳む */
#result_list .panel table td.buscard { display: none !important; }
/* 並べ替えタブ(到着順/所要時間順/乗換回数順/安い順/徒歩が少ない順)を 1 行に収める
----------------------------------------------------------------------
タブは a が width:100px 固定、li が float+margin:3px、ul に padding-left:20px。
5 枚で 100*5 + 3*5 + 枠 + 20 ≒ 545px 必要で、それ未満の幅では 2 行へ折り返し、
1 枚だけ次の行に落ちた見た目になっていた。
float をやめて flex の 1 行にし、幅は文字に合わせる（「徒歩が少ない順」が
いちばん長い）。それでも入らない幅では横スクロールにして、折り返さない。
★省略記号にはしない★ 「所要時間順」と「乗換回数順」は先頭が似ており、
途中で切れると見分けが付かなくなる。 */
#result_list ul.tab {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
padding-left: 8px !important;
gap: 2px !important;
}
#result_list ul.tab li {
float: none !important;
margin-right: 0 !important;
flex: 0 0 auto !important;
}
#result_list ul.tab li a {
width: auto !important;
padding: 0 8px !important;
font-size: 12px !important;
white-space: nowrap !important;
}
}
/* ============================================================================
★5 駅構内図(station_detail) アイコン凡例テーブルのスマホ対応
----------------------------------------------------------------------------
.station_icon table は1行に「アイコン＋説明」を5組(=10セル)並べた固定構成。
en は説明ラベルが長く(例 "AED (Automated External Defibrillator)" /
"Wheelchair-accessible (meeting barrier-free standards)")、モバイルで右に
はみ出していた(en 320:+160 / 375:+105 / 414:+66px。ja は短くOK)。
方針(<=600px): table/tr を block＋flex 折り返しにし、説明セルを伸縮(flex:1)させて
「アイコン｜説明」を1組ずつ縦に並べる読みやすい凡例リストに。ja にも無害。
station.css は別セッション領域につき触らず、共有の renewal-pc.css で上書き。
デスクトップ(>600px)は無改変。
============================================================================ */
@media screen and (max-width: 600px) {
.station_icon { overflow-x: hidden !important; }
.station_icon table {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
.station_icon caption {
display: block !important;
text-align: left !important;
}
.station_icon tbody { display: block !important; width: 100% !important; }
.station_icon tr {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
width: 100% !important;
}
.station_icon td {
display: block !important;
border: 0 !important;
}
/* アイコン: 固定幅。直後の説明セルとペアで1行を占める */
.station_icon td.icon {
flex: 0 0 auto !important;
width: 32px !important;
padding: 4px 4px 4px 0 !important;
text-align: center !important;
}
/* 説明: アイコンとの合計がちょうど行幅になる基準幅にする
----------------------------------------------------------------------
★60% では足りなかった★ 基準幅 60% だと 1 行の残りが
アイコン(32) + 説明(60%) + アイコン(32) でぴったり収まってしまい、
「次の組のアイコン」まで同じ行に載る。実測(ja 390px)では
icon 12..44 ／ desc 44..346 ／ icon 346..378 となり、右端のアイコンは
その次の行の説明(12..346)と対になる＝アイコンと説明が 1 行ずつずれて
見え、どのアイコンの説明なのか読み取れなかった。
基準幅を「行幅 - アイコン幅(32px)」にすると 1 組で行がちょうど埋まり、
次のアイコンは必ず折り返る。 */
.station_icon td.desc {
flex: 1 1 calc(100% - 32px) !important;
min-width: 0 !important;
padding: 4px 6px 4px 4px !important;
font-size: 12px !important;
line-height: 1.35 !important;
white-space: normal !important;
word-break: break-word !important;
}
}
/* ============================================================================
★6 経路検索結果 地図表示(search_result_map) のスマホ対応
----------------------------------------------------------------------------
.main_area は min-width:960px / height:600px の表で、左セル(行程)290px と
右セル(地図)が横並び。スマホでは 960px の版面がそのまま入るため、地図が
画面の右にはみ出した細い帯にしかならず、ほとんど見えない。
縦積みにして地図に高さを与え、さらに行程を手で畳めるようにする
（畳むと地図が画面いっぱいになる。ボタンはスマホでだけ出す）。
デスクトップ(>600px)は無改変。
============================================================================ */
.search_result_map .route_toggle { display: none; }
@media screen and (max-width: 600px) {
.search_result_map .route_toggle {
display: block;
margin: 6px 0 0;
text-align: right;
}
.search_result_map .route_toggle button {
font-size: 13px;
padding: 6px 14px;
border: 1px solid #4e41b3;
border-radius: 6px;
background: #fff;
color: #4e41b3;
cursor: pointer;
}
/* 表をやめて縦積みにする（min-width:960px を外すのが要点） */
.search_result_map .main_area,
.search_result_map .main_area > tbody,
.search_result_map .main_area > tbody > tr,
.search_result_map .main_area > tbody > tr > td {
display: block !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
box-sizing: border-box !important;
}
/* 行程は高さを抑えてスクロール。地図に場所を譲る */
.search_result_map .left_area {
padding: 8px !important;
}
.search_result_map .route_box {
height: auto !important;
max-height: 34vh !important;
overflow-y: auto !important;
}
/* 地図に高さを与える（0 のままだと何も見えない） */
.search_result_map .map_area,
.search_result_map .map_area #map {
height: 52vh !important;
min-height: 260px !important;
}
/* 畳んだとき: 行程を隠して地図を画面いっぱいに */
.search_result_map.route-collapsed .left_area { display: none !important; }
.search_result_map.route-collapsed .map_area,
.search_result_map.route-collapsed .map_area #map {
height: 74vh !important;
}
}
/* ============================================================================
★7 駅構内図(station) のブロック幅・左右余白をそろえる
----------------------------------------------------------------------------
station.css は 960px の版面を前提に、左パネル 260px 固定＋地図 650px 固定を
float で横並びにしている。スマホ幅では横並びが崩れて縦に積まれるが、固定幅と
float 用のマージンがそのまま残るため、ブロックごとに幅も左右の余白も違う
階段状の見た目になっていた。実測(ja/en 共通・vw=390、本文幅は .contents の
padding:12px から 366px、基準は見出しと凡例の L=12 / R=12):
station_title 幅366 L= 12 R= 12 ← 本文の基準
left_panel 幅260 L= 27 R=103 (width:260px + margin-left:15px)
map_select 幅260 L= 27 R=103
フロア選択見出し 幅232 L= 27 R=131 (width:232px ＝ PC の 260-28)
表示位置移動見出 幅232 L= 27 R=131
フロア選択 ul 幅258 L= 28 R=104 (margin:0 1px)
移動ポイント ul 幅258 L= 28 R=104
アイコン凡例枠 幅258 L= 28 R=104
同 table 幅256 L= 29 R=105 (width:258px)
map_view(構内図) 幅366 L= -3 R= 27 ★左が画面外★
station_icon 幅366 L= 12 R= 12
幅は 232/256/258/260/366 の 5 種類、左は 12/27/28/29/-3 の 5 種類に散っていた。
とくに構内図(map_view)は float:right ＋ margin-right:15px のため、幅が親いっぱい
(366px)まで広がった状態で右マージン分だけ左へ押され、左枠線が画面外(L=-3)に
出ていた（320/450/600px でも同じく L=-3 / R=27）。
方針(<=600px): 縦積みになっているのだから float と固定幅を解き、.station 直下の
ブロックをすべて親幅いっぱい(=本文と同じ L12/R12)に統一する。ブロック間の
縦の間隔は renewal.css の --rnw-gap(12px) に合わせる。
station.css は旧 CSS(PC前提)につき触らず、ここで !important 上書きする。
デスクトップ(>600px)は無改変。
============================================================================ */
@media screen and (max-width: 600px) {
/* 左パネル: float と 15px の左マージン(横並び用)を解除して全幅に */
.station .left_panel {
float: none !important;
width: 100% !important;
margin: 0 0 var(--rnw-gap, 12px) 0 !important;
box-sizing: border-box !important;
}
/* パネル内の 260px 固定を解除 */
.station .map_select,
.station .move_point { width: 100% !important; }
/* 見出しの 232px 固定(＝PC で 260px から枠線と余白 28px を引いた値)を解除。
枠線 8px を含めて親幅ちょうどになるよう border-box で全幅に。 */
.station .map_select_title,
.station .move_point_title {
width: auto !important;
box-sizing: border-box !important;
}
/* 一覧(ul)の左右 1px マージンを外し、見出しと左右の端をそろえる */
.station .map_select ul,
.station .move_point ul {
margin: 0 !important;
box-sizing: border-box !important;
}
/* アイコン凡例(移動/バリアフリー)の枠と表も同じ幅に。
上下の間隔は 20px から他ブロックと同じ 12px へ。 */
.station .map_icon { margin: var(--rnw-gap, 12px) 0 !important; }
.station .map_icon table { width: 100% !important; }
/* 構内図: float:right と margin-right:15px をやめる。
これが左枠線を画面外(L=-3)へ押し出していた原因。 */
.station .map_view {
float: none !important;
width: 100% !important;
margin: 0 0 var(--rnw-gap, 12px) 0 !important;
box-sizing: border-box !important;
}
/* 下部のアイコン凡例(960px 固定)も親幅に。★5 の縦積み指定と合わせて使う。 */
.station .station_icon,
.station .station_icon table { width: 100% !important; }
/* 駅名見出し: 42px 固定の高さをやめる
----------------------------------------------------------------------
.section_title は height:42px / line-height:42px の1行決め打ち。駅名が
1行に収まらない幅だと、帯(42px)からテキストだけがはみ出して次の見出しに
重なる。実測(en 390px「Yodo Station (Keihan Railway)」)では帯 42px に対し
中の p が 84px(2行)で、帯の下へ 42px あふれ、「Select Floor」の帯に 27px
食い込んでいた(ja の「京阪電気鉄道 淀駅」は1行で収まるため無害)。
高さを内容なりにし、行間を倍数指定にして 2 行以上でも帯が伸びるようにする。
上下 8px は、駅名と鉄道事業者アイコン(28px)が帯の縁に触れないための余白。
結果(実測): ja 390px は帯 42→54px の1行、en 320px は帯 78px の2行になり、
どちらもはみ出し 0・次の見出しとの間隔 23px を確保。
.station_title に限定＝他ページの .section_title には影響しない。 */
.station_title {
height: auto !important;
line-height: 1.35 !important;
padding: 8px 12px 8px 20px !important;
}
}
/* ============================================================================
★8 バス路線図(bus_route_map) の「検索」ボタンが地図に隠れて押せない
----------------------------------------------------------------------------
系統セレクタの帯 .rosen_keito_title は .section_title を継いでおり
height:42px / line-height:42px の「1 行決め打ち」。中身は
アイコン(28+10) ／ バス会社 select(200+10) ／ 系統 select(200+10) ／ 検索(80)
で合計 538px の inline 列なので、スマホ幅では必ず 2 行になる。
実測(ja/en 共通・vw=390。帯の内寸は 390 - 8(左border) - 20(padding) = 362):
帯 .rosen_keito_title t=128..170 (高さ 42 固定)
1行目 アイコン t=135 l= 28..56 ／ バス会社 t=137 l= 72..272
2行目 系統 t=179 l= 28..228 ／ 検索 t=178 l=244..324
.rosen_map(地図) t=170..770 position:relative
2 行目は帯の下端(170)より下の t≈178 に出る＝はみ出すが、height が 42px 固定
なので帯は伸びない。すぐ後ろの .rosen_map は position:relative の地図なので、
はみ出した 2 行目の上に重なって描かれる。
★「画面の右にはみ出している」のではない★ 検索ボタンの right は 324 で
ビューポート(390)の内側。360px 幅でも 324 で収まっている。実際には
document.elementFromPoint(ボタン中心) が CANVAS.maplibregl-canvas を返す＝
地図に覆われている。CDP の Input.dispatchMouseEvent でボタン中心を実際に
押しても guideDiv(「バス会社・系統を選択してください」)は display:block の
ままで routeLabel も空＝検索が走らないことを確認した。
つまり見切れではなく「地図がクリックを横取りしている」不具合。
方針(<=600px): 帯の高さ固定をやめて中身の分だけ伸ばす(min-height だけ残す)。
そのうえで帯を flex-wrap にし、セレクトの基準幅を 200px にして
1 行目=アイコン+バス会社 ／ 2 行目=系統+検索 と自然に 2 段になるようにする。
セレクトと検索ボタンは指で押せるよう高さ 40px を確保する。
map.css / style.css は旧 CSS(PC 前提)につき触らず、ここで !important 上書き。
デスクトップ(>600px)は無改変。
============================================================================ */
@media screen and (max-width: 600px) {
/* ★高さ固定(42px)を外すのが要点★ 外さないと 2 行目が帯の外へ出て地図に潜る */
.section_title.rosen_keito_title {
height: auto !important;
min-height: 42px !important;
line-height: normal !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 12px !important;
box-sizing: border-box !important;
}
/* 余白は帯の gap に一本化する(select の margin-right:10px と二重にしない) */
.rosen_keito_title img.agency_icon { flex: 0 0 auto !important; margin-right: 0 !important; }
/* 基準幅 200px = 2 つ並べると必ず溢れる幅。これで系統が 2 行目に落ち、
残り幅いっぱいまで伸びる(390px で 322px / 254px、360px で 292px / 224px)。 */
.rosen_keito_title select {
flex: 1 1 200px !important;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin-right: 0 !important;
font-size: 16px !important;
box-sizing: border-box !important;
}
/* 指で押せる大きさを確保(26px → 40px)。幅は 2 行目で系統と並ぶ 96px。 */
.rosen_keito_title .search_button {
flex: 0 0 96px !important;
width: 96px !important;
height: 40px !important;
line-height: 40px !important;
}
}
/* ============================================================================
★9 経路検索結果(search_result) スマホ表示の仕上げ
(1)上部3ボタンの折り返し (2)タブの縦スクロールバー
(3)候補一覧の白い筋と区切り線 (4)詳細パネル右上のずれ
----------------------------------------------------------------------------
■(1) 上部3ボタンが折り返す
.box-02 の中は .box-left(時刻) と .box-right(ボタン群) がどちらも float:left、
.box-right には margin-left:30px。ボタン a.link-box は inline-block で
padding:0 20px 0 10px(左右非対称)＋margin-right:10px＋アイコン img(16px+左右5px)。
実測(ja・vw=390。.box-02 の内寸は l=38..352 の 314px):
.box-left l= 38..106
.box-right l= 68..352 (w=284) ★左端が 38 でなく 68★
└ 幅 284 に対しボタンの合計は 137+137+173 + margin 10x3 = 477px
→ 3 つとも別の行に落ちて 3 行になっていた(top=259 / 287 / 315)
.box-right が l=68 から始まるのは、.box-left の隣に入りきらず次の行へ回り、
そこで margin-left:30px が効くため。左端が本文(38)とずれる原因もこれ。
ボタン間の「不自然な隙間」は padding-right:20px と margin-right:10px の合計。
対処: .box-02 を縦並びの flex にして float をやめ、.box-right を横並びの
flex(gap:6px)にする。ボタンは装飾アイコンを消し(alt="" のため情報は落ちない)、
font-size:11px / padding:4px に詰める。
★均等幅(flex:1 1 0)にはしなかった★ 均等 3 分割だと 1 個あたり 390px で 101px /
360px で 91px。ja の「条件を変えて再検索」は 9 文字あり 11px でも 99px 必要で、
どちらの幅でも 2 行に折り返す(実測: ボタン高 36px)。flex:1 1 auto にすると
文字数に応じて配分され、ja は 390/360px とも 1 行に収まった(高さ 28px、
幅 91/91/121 と 81/81/111)。左右の端と間隔はどちらでも揃うので、
「1 行に収める」を優先して auto を採った。
en は「Change conditions and search again」が長く、どの配分でも 1 行には
ならないので 2 行で折り返す(高さ 36px)。3 つのボタンは 1 行に並ぶ。
■(2) タブに縦スクロールバーが出る
★真犯人は旧 CSS の clearfix★ style.css の
.c-fix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
は height:0 だが line-height を潰していないため、見えない "." の行ボックス
(13px フォントで約 19px)が floats の下にはみ出す。visibility:hidden は
見た目を消すだけで、スクロール可能領域には残る。
★4 で #result_detail .block ul.tab に overflow-x:auto を付けた結果、この ul が
スクロール枠になり、その 19px が縦スクロールバーとして現れていた。
実測(vw=390): scrollHeight 58 / clientHeight 38。
:after の content を "" にすると scrollHeight は 39 に落ちる(検証済み)。
#result_list ul.tab 側は ★4 で flex にしてあるため "." の影響は出ず、
代わりに li a.active の height:31px + margin-bottom:-1px が
scrollHeight 31 / clientHeight 30 の 1px 差を作っていた。
対処:
・両方の :after の content を空にして幻の行ボックスを消す。
・経路タブは横スクロール自体が不要(実測 scrollWidth 336 = clientWidth 336)。
overflow を外し、float を含めるためだけに display:flow-root にする。
★overflow:hidden にはしない★ タブの角丸や -1px の重なりが切れるため。
・並べ替えタブは横スクロールが要る(scrollWidth 389 > clientWidth 336)ので
overflow-x:auto は残し、縦だけ overflow-y:hidden で止める。あわせて
a.active の -1px を 0 にして、そもそも縦にはみ出さないようにする。
デスクトップは overflow が visible のままなので、この幻の行ボックスは
今までどおり見えない。>600px は一切触っていない。
■(3) 候補一覧の白い筋と区切り線
★gap から下地が透けているのではない★ 犯人は result.css の
#result_list .panel table td { border-top:4px solid #FFF; }
デスクトップは border-collapse:collapse なので隣り合う td の上罫線が 1 本に
まとまり、候補と候補の間の白い帯になる。★4 で tr を display:flex にしたため
collapse が効かなくなり、td ごとに白い線が出る。実測(vw=390)の td 幅は
24 / 180 / 94 / 60 / 76 / 42px とばらばらで、折り返した 2 段目の td にも
上罫線が付くため、候補の内側にも短い白線が入っていた。
tr 側は border-top:0px none で、候補どうしの区切りは無かった。
なお gap(2px 10px)から見えるのは table の背景 #e8e5fe で、白ではない。
対処: td の上罫線を消し、tr に border-top:4px solid #fff を移す。
★色は白のまま★ 候補の地色 #e8e5fe は淡く、白 4px は「カードの隙間」として
十分読み取れる(修正後の実機描画で確認)。枠色 #4e41b3 を 4px で敷くと帯が
重くなり一覧が分断されて見えるため採らなかった。デスクトップの
collapse された 4px 白帯とも見た目が揃う。
■(4) 詳細パネル右上のずれ
実測(vw=390)では ul.tab の右端 363 と table の右端 363 は一致していて、
ずれていたのは .print(印刷) だけだった。.print は position:absolute の
right:20px で、.block のパディングボックス(12..378)基準のため右端は 358。
表の右端 363 に対して 5px 内側に入る。right:15px にすると 363 で揃う。
(スマホでの「縦線」は (2) の縦スクロールバーだったとみられる。(2) を直すと
ul.tab はスクロール枠でなくなるので、この線は原理的に出なくなる。)
============================================================================ */
@media screen and (max-width: 600px) {
/* --- (1) 上部3ボタンを1行に --- */
.search_cond .box-02 {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
.search_cond .box-02 .box-left { float: none !important; margin: 0 !important; }
.search_cond .box-02 .box-left span { padding: 0 !important; }
/* float と margin-left:30px をやめ、左端を本文(38px)に揃える */
.search_cond .box-02 .box-right {
float: none !important;
margin-left: 0 !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: stretch !important; /* 3 つの高さをそろえる */
gap: 6px !important; /* 間隔を均一に */
}
.search_cond .box-02 .box-right a.link-box {
flex: 1 1 auto !important; /* ★均等割ではなく文字数配分（理由は上のコメント）★ */
min-width: 0 !important;
margin-right: 0 !important;
padding: 4px !important; /* 0 20px 0 10px の非対称をやめる */
height: auto !important;
min-height: 28px !important;
line-height: 1.25 !important;
font-size: 11px !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow-wrap: anywhere !important;
box-sizing: border-box !important;
}
/* 装飾アイコン(alt="")。1 個あたり 26px を占めるので落とす */
.search_cond .box-02 .box-right a.link-box img { display: none !important; }
/* --- (2) タブの縦スクロールバーを止める --- */
/* 幻の "." を消す。これがスクロール可能領域を 19px 押し広げていた */
#result_list ul.tab.c-fix:after,
#result_detail .block ul.tab.c-fix:after {
content: "" !important;
line-height: 0 !important;
font-size: 0 !important;
}
/* 経路タブ: 横スクロールは不要。float の内包だけを flow-root で担保する */
#result_detail .block ul.tab {
display: flow-root !important;
overflow: visible !important;
}
/* 並べ替えタブ: 横は残し、縦だけ止める */
#result_list ul.tab { overflow-y: hidden !important; }
#result_list ul.tab li a.active { height: 30px !important; margin-bottom: 0 !important; }
/* --- (3) 候補一覧の区切り線を tr に移す --- */
#result_list .panel table td { border-top: 0 !important; }
#result_list .panel table tr {
border-top: 4px solid #ffffff !important;
box-sizing: border-box !important;
}
/* --- (4) 印刷リンクの右端を表の右端に揃える(358 → 363) --- */
#result_detail .block .print { right: 15px !important; }
}
/* ============================================================================
★10 スマホ表示の整列まわり4件
(5)バス停検索の左マージン (6)バスの乗り方ガイドのタブとアイコン一覧
(8)京の見所のチェックボックス左位置 (9)施設詳細ポップアップの右見切れ
----------------------------------------------------------------------------
■(5) bus_search: 「系統から選択」から下だけ左マージンがずれる
bus_train_info.css の .keito_sel_box は float:right ＋ margin-right:20px。
スマホでは幅が親いっぱい(366px)まで広がるため、右マージンの分だけ左へ押し出される。
実測(ja・vw=390。本文の基準は .agency_sel_tab の l=12..378):
.agency_sel_tab l= 12..378 ← 基準(バス会社タブ)
.keito_sel_box l= -8..358 ★左が画面外★
.keito_sel_title l= -8..358
.keito_sel_list l= -8..358
.keito_sel_item l= -2..352
★7 の構内図 map_view(L=-3)とまったく同じ型。float と固定幅をやめて全幅にする。
.keito_sel_title(539px) / .keito_sel_list(565px) の PC 固定幅も解除する。
修正後は 12..378 で .agency_sel_tab と一致。
■(6-a) ガイドのタブが階段状にずれる
jQuery UI のタブは li が float:left ＋ width:155px。選択中の li だけ
ui-tabs-active の padding-bottom:1px で 1px 高い(34px / 他は 33px)。
float は「前の float の下端」に引っかかるため、実測(vw=390)では
1行目 [乗車・降車について l= 25..180] [運賃について l=184..339]
2行目 [支払方法について l=184..339] ★左端に戻らない★
3行目 [両替について l= 25..180]
と、2 行目だけ左端(25)ではなく 184 から始まる階段になっていた。
1px の高さ差が原因なので、幅や余白をいじっても直らない。
対処: float をやめて 2 列グリッドにする。折り返し位置が固定され、
タブ幅も高さも必ずそろう。実測後: 18/198 の 2 列 × 2 行、全て 174x34。
★clearfix の :before/:after を消すこと★ 消さないと jQuery UI の
.ui-helper-clearfix が作る箱がグリッドの 1 マス目を占領し、
最初のタブが右列へ回る(実測: 乗車・降車について が l=198 に出た)。
■(6-b) バス会社アイコン一覧のセルがそろわない
.bus_agency_table は td{width:20%} の 5 列固定。スマホ幅では 1 セル 50px しか
なく、アイコン(28px)の横に名称が入らず下へ回り込む。名称の長さがまちまちなので
実測(vw=390)で行の高さが 101px / 164px とばらつき、アイコンの縦位置も
セルごとに変わっていた。最終行には class="empty" の空セル( )が 2 つ残る。
対処: 表をグリッドにして 3 列へ減らし、セルはアイコンの下に名称を積む縦並びに
統一する。tr を display:contents にして td を直接グリッドの升へ流し込むので、
元の 5 列 / 3 列という行の切れ目に縛られない。
★td の width:20% を width:auto で消すこと★ グリッド化すると 20% が升(約104px)
基準になり、セルが 20px まで潰れる(実測)。
★:empty では空セルを拾えない★ 中身が のため。class="empty" で消す。
修正後: 3 列 100px 幅、行内の高さは 62/62/62・89/89/89 とそろう。
■(8) 京の見所: エリアのチェックボックスに左マージンが無い
見出し「エリア」の文字は th span の margin-left:29px で l=41 から始まるのに、
エリアのチェックボックスは l=12(本文の左端)から始まり、29px ずれていた。
実測(vw=390): 見出し span l=41 / input l=12。
★padding では直らない★ .highlight_search_area_cond は border-collapse:collapse
で、この場合テーブルの padding は無視される(padding-left:29px を付けても
computed には乗るが td は l=12 のまま＝実測で確認)。margin-left で寄せる。
修正後: input が l=41 となり見出しの文字と一致(390px / 360px とも)。
・ついでに: ラベルの「洛東・東山
エリア」の
はテンプレート直書きで、
幅が足りずに折り返しているのではない。左寄せ後の幅なら 1 行に収まる
(実測: 最長「洛中・本願寺エリア」で 117px、使える幅は 390px で 152px・
360px で 138px)ので、スマホでは
を無効化して 1 行にした。
★ユーザ指摘外の変更★
■(9) 施設詳細ポップアップの右が見切れる
ポップアップは colorbox のインライン表示で、common.js の
LANDMARK_POPUP_WIDTH='700px' を innerWidth に渡している。colorbox はこの値を
インラインスタイルで書き込むため、実測(vw=390)は
#colorbox width=728px(700+枠28) left=0 → 0..728
#cboxLoadedContent width=700px、#landmark_popup 700px
documentElement.scrollWidth=728 / clientWidth=390 → 横に 338px はみ出す
ポップアップの左端(14)は画面内、右端(714)が画面外＝報告どおりの見え方。
中の表も th{width:120px}+td{width:480px} で 600px 超の固定幅。
対処(CSS のみ。common.js は他エージェントが触る領域なので触らない):
スマホでは colorbox を画面いっぱいの「シート」に置き換える。
★9 分割の飾り枠(#cboxTopLeft 等)は display:none にすること★ colorbox が
付けたインラインの高さが残り、幅だけ直すと中身が下へ押し出されて
閉じるボタンが画面外へ出る(実測: #cboxContent の top が 809 になった)。
★高さは % ではなく vh で頭打ちにすること★ #cboxContent の親(colorbox が作る
行 div)は高さ auto なので % が解決できず、colorbox のインライン高さ(577px)が
そのまま残る。画面が低いと閉じるボタンが画面外へ出た(vh=500 で close top=592)。
calc(100vh - 70px) なら、閉じるボタン(bottom:-30px / 23px)を含めて必ず画面内。
修正後の実測(390px):
横はみ出し 0 ／ 縦は #cboxLoadedContent が scrollHeight 597 > clientHeight で
ポップアップ内スクロール ／ 閉じるボタンは vh=500/640/900 のいずれでも
画面内かつ elementFromPoint がボタン自身を返す。
実座標クリックで #colorbox が display:none になることを ja/en 両方で確認。
いずれも 600px 以下。デスクトップ(>600px)は無改変。
旧 CSS(bus_train_info.css / static.css / style.css / colorbox.css)は触らず、
ここから !important で上書きする。
============================================================================ */
@media screen and (max-width: 600px) {
/* (5) bus_search: 系統から選択のブロックが float:right + margin-right:20px で左へずれる */
.bus_search .keito_sel_box {
float: none !important;
width: 100% !important;
margin: 0 0 20px 0 !important;
box-sizing: border-box !important;
}
.bus_search .keito_sel_title,
.bus_search .keito_sel_list {
width: 100% !important;
box-sizing: border-box !important;
}
/* (6-a) ガイドのタブ: float をやめ 2 列グリッドに */
#container.ui-tabs > ul.ui-tabs-nav {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
padding: 6px !important;
box-sizing: border-box !important;
}
/* jQuery UI の clearfix(:before/:after) がグリッドの1マス目を占領するので消す */
#container.ui-tabs > ul.ui-tabs-nav::before,
#container.ui-tabs > ul.ui-tabs-nav::after { display: none !important; }
#container.ui-tabs > ul.ui-tabs-nav > li {
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
top: 0 !important;
display: flex !important;
}
#container.ui-tabs > ul.ui-tabs-nav > li > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
padding: 8px 6px !important;
font-size: 13px !important;
line-height: 1.3 !important;
text-align: center !important;
float: none !important;
box-sizing: border-box !important;
}
/* (6-b) バス会社アイコン一覧: 5 列 → 3 列、アイコンの上下に名称を積む */
table.bus_agency_table {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px !important;
width: 100% !important;
margin: 10px 0 20px 0 !important;
box-sizing: border-box !important;
}
table.bus_agency_table tbody,
table.bus_agency_table tr { display: contents !important; }
table.bus_agency_table td {
display: flex !important;
width: auto !important; /* 元の width:20% はグリッドマス基準で 20px になる */
border: 0 !important; /* 白 1px 罫の代わりに gap で離す */
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 4px !important;
padding: 8px 4px !important;
font-size: 11px !important;
line-height: 1.3 !important;
text-align: center !important;
box-sizing: border-box !important;
}
/* 空セルは 入りなので :empty では拾えない。class="empty" で消す */
table.bus_agency_table td.empty { display: none !important; }
table.bus_agency_table td img { margin: 0 !important; }
/* (8) 京の見所: エリアのチェックボックスを見出し文字の左端(41px)に合わせる */
/* ★padding は効かない★ border-collapse:collapse のテーブルでは
padding が無視される(実測: padding-left:29px が付いても td は l=12 のまま)。
margin-left で寄せる。 */
table.highlight_search_area_cond {
width: calc(100% - 29px) !important;
margin-left: 29px !important;
box-sizing: border-box !important;
}
/* ラベル中の
(テンプレート直書き)を無効化。左寄せ後なら 1 行に収まる。
★日本語だけ★ 英語は「Higashiyama
Area」で、
を消すと単語が
地続きになり HigashiyamaArea と読めてしまう(実測)。en は 2 行のまま。 */
html[lang="ja"] table.highlight_search_area_cond label br { display: none !important; }
/* (9) 施設詳細ポップアップ(colorbox)を画面内に収める */
#colorbox {
position: fixed !important;
top: 8px !important;
left: 8px !important;
width: calc(100% - 16px) !important;
height: auto !important;
max-width: none !important;
/* ★高さは vh で頭打ちにする★ % では親(colorbox が作る行 div)の高さが auto の
ため解決できず、colorbox が付けた inline の高さ(実測 577px)がそのまま残り、
画面が低いと閉じるボタンが画面外へ出る(vh=500 で close top=592)。 */
max-height: calc(100vh - 70px) !important;
overflow: visible !important;
}
#cboxWrapper {
position: static !important;
width: 100% !important;
height: auto !important;
max-width: none !important;
overflow: visible !important;
}
/* 9 分割の飾り枠は畳む。inline の高さが残って中身を押し下げるため */
#cboxTopLeft, #cboxTopCenter, #cboxTopRight,
#cboxMiddleLeft, #cboxMiddleRight,
#cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight { display: none !important; }
#cboxContent {
position: relative !important;
float: none !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
#cboxLoadedContent {
width: 100% !important;
height: auto !important;
max-height: calc(100vh - 70px) !important; /* ここが実際のスクロール枠 */
margin: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
box-sizing: border-box !important;
}
#cboxClose { position: absolute !important; bottom: -30px !important; right: 0 !important; }
#landmark_popup {
width: auto !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
#landmark_popup .title div { padding: 10px 12px !important; }
#landmark_popup .image { margin: 12px !important; }
#landmark_popup .image img { max-width: 100% !important; height: auto !important; }
#landmark_popup .explanation { margin: 12px !important; letter-spacing: 0 !important; }
#landmark_popup table {
width: calc(100% - 24px) !important;
margin: 0 12px 16px !important;
table-layout: fixed !important;
}
#landmark_popup table th { width: 34% !important; padding: 8px !important; word-break: break-all !important; }
#landmark_popup table td { width: auto !important; padding: 8px !important; word-break: break-all !important; }
#landmark_popup .buttons { padding: 0 12px 16px !important; }
}
/* ============================================================================
★11 スマホ幅で h2 の見出し帯があふれて次の要素に重なる
(あわせて、ガイドのタブの階段崩れが英語版でも同原因であることを確認)
----------------------------------------------------------------------------
■ h2.subsection_title が 1 行決め打ちで、2 行になるとあふれる
style.css の .subsection_title は height:38px / line-height:38px の 1 行決め打ち
(.section_title の 42px と同じ型で、★7 の .station_title で対処したのと同じ)。
英語は見出しが長く 2 行になるため帯からあふれ、次の要素に食い込む。
実測(en「電車の乗り方ガイド」static.php?page=train_guide&lang=en、vw=390/360 とも同じ):
h2.subsection_title「Subway, JR, Keihan, Hankyu, and Kintetsu Railways」
帯の高さ 38px (height:38px 固定)
中身の高さ 56px → 帯から 28px あふれる
次の要素の top は帯の下端 +10px の位置
→ あふれた分と重なる量 = 18px
日本語の同ページ相当では 0 件(あふれ 0 / 重なり 0)。英語だけで出る。
対処: ★7 の .station_title と同じ手を .subsection_title にも当てる。
height を auto にし、1 行のときの見た目(38px の帯)を min-height で保つ。
line-height は 38px のままだと 2 行で行間が開きすぎるので 1.35 にし、
上下 padding で 1 行時の中央寄せを再現する(8px + 20px + 8px = 36px ≒ 38px)。
★影響範囲★ .subsection_title は h2 で 50 か所、次の 13 テンプレートで使われる:
ja/en の bus_guide / bus_search / guide / rule / station / train_search
と en/train_guide (ja に train_guide は無い)。
これら全ページ・ja/en・390/360px であふれと重なりが 0 になること、および
1 行の見出しの帯の高さが 38px のままであることを実測で確認済み。
デスクトップ(>600px)は無改変。
■ ガイドのタブの階段崩れ(英語版)は ★10 (6-a) と同一原因だった
評価環境を ★10 の前の版へ一時的に戻して英語版を実測した結果、
日本語版とまったく同じ値だった(vw=390/360、ja/en 共通):
li[0] 選択中 高さ 34px padding 0 0 1px ← ui-tabs-active の padding-bottom:1px
li[1..3] 高さ 33px padding 0
並び: 1行目 l= 25 と l=184 ／ 2行目 l=184 ★左端に戻らない★ ／ 3行目 l= 25
★崩れるのは「1 番目のタブが選択されている状態」だけ★ 4 つのタブを実際に
クリックして 1 つずつ確かめたところ、階段になるのは選択=0 のときのみで、
選択=1/2/3 では 2 行・左端そろい(25,25)になる。1 番目が既定の選択状態なので、
ページを開いた直後がいちばん崩れて見える。
1px 高い float が行頭にあると次の float が左端まで戻れない、という float の
性質そのものが原因なので、★10 の 2 列グリッド化で選択状態によらず解消する。
★10 適用後は ja/en × 390/360 × 選択 0..3 の全 16 通りで
2 行・左端そろい・幅も高さも一様であることを確認した。
============================================================================ */
@media screen and (max-width: 600px) {
/* 1 行のときは今までどおり 38px の帯。2 行以上なら中身の分だけ伸びる */
.subsection_title {
height: auto !important;
min-height: 38px !important;
line-height: 1.35 !important;
padding: 8px 12px 8px 20px !important;
box-sizing: border-box !important;
}
}
/* ============================================================================
★12 経路詳細の乗換の下矢印が消える（601〜900px の帯だけ）
----------------------------------------------------------------------------
★指示された 600px 以下ではなく 601〜900px に入れている★ 理由は下記。
★★このブロックだけ他と違い max-width:600px の外にある。編集時は注意★★
■ 何が起きているか
result.css の
#result_detail .block table td.point .box-5 { width:25px; padding-left:40px; }
に対し、renewal.css の @media(max-width:900px) が
* { box-sizing: border-box } と img { max-width:100% !important; height:auto !important }
を当てている。border-box では width:25px が「枠込みの幅」になるが、
左パディングだけで 40px あるため中身の幅は 0 に潰れる。
そこへ img{max-width:100%} が効くと 100% = 0px となり、height:auto で
縦横比が保たれるため画像は 0x0 になる。実測(vw=768):
.box-5 box-sizing=border-box width=40px padding-left=40px 内容幅=0
img width=0px height=0px (naturalWidth=25 naturalHeight=35, complete=true)
visibility=visible / opacity=1 / display=inline
→ 要素は存在し、隠されてもいない。「幅 0 に潰れて描かれていない」状態。
■ 「乗換の矢印だけ」ではなかった
★消えるのは乗換行だけではない★ 601〜900px では td.point の下矢印が
全部消える。実測(近鉄・大久保乗換の経路 vw=768)で 12 本中 12 本、
バス経路(京都駅前→銀閣寺道 vw=768)で 13 本中 13 本が 0x0。
乗換行が目立つのは、他の行には矢印の右に「17分」「16分」の文字が残るのに対し、
乗換行は box-6 が空で、矢印が消えると本当に何も無くなるため。
box-6 が空であること自体は原因ではない(乗車行も同じ 0x0)。
■ どの幅で起きるか
1280 / 1080 / 960 / 901px : 正常(box-sizing=content-box、矢印 25x35)
900 〜 601px : 全滅(矢印 0x0) ← ここだけ壊れている
600 〜 320px : 正常(★4 が .box-5 を width:auto にしているため)
つまり 600px 以下は ★4 のおかげで既に直っており、壊れているのは
601〜900px の帯だけ。指示どおり max-width:600px の中に書いても
この不具合は直らないため、やむを得ずこの帯を対象にしている。
■ 対処
.box-5 だけ box-sizing を content-box に戻す。これで width:25px が
中身の幅として効き(合計 25+40=65px)、>900px と同じ寸法になる。
★result.css 全体で「左右パディングの合計 ≧ width」なのは .box-5 だけ★
(ja/en の result.css を機械的に走査して確認)なので、他への波及は無い。
確認: 601/650/700/768/900px で矢印が 25x35 に戻り、
600px 以下と 901px 以上は適用前後で算出値が完全一致(box-sizing / width /
padding / 実寸 / td 内オフセットのすべて)。ja/en、鉄道乗換・バス乗換の
両方で確認済み。
============================================================================ */
@media screen and (min-width: 601px) and (max-width: 900px) {
#result_detail .block table td.point .box-5 {
box-sizing: content-box !important;
}
}
/* ============================================================================
★13 京都市バス路線図: バス停ポップアップの「出発地に設定」だけが 2 行になる
----------------------------------------------------------------------------
■ 現象（iPhone 実機）
路線図のバス停をタップすると出るポップアップ（jQuery UI contextmenu の
#menuOptions / citybus.tpl で定義、citybus.js が open する）で、
赤い「出発地に設定」だけが「出発地に設」＋「定」の 2 行に折り返す。
同じ 6 文字の青い「目的地に設定」は 1 行に収まる。
■ 原因（実測、vw=390 / 評価環境 / 実タッチ＋タップ後の mouseover を再現）
ラベルは 13px の全角 6 文字＝ちょうど 78.00px 必要。
ボタン(.menuItem > a)の左右パディングは citybus.css で 6px 12px。
項目 クラス 枠幅 内容幅 必要幅 行数
目的地に設定 (状態クラス無し) 102px 78.00 78.00 1
出発地に設定 ui-state-active 付き 102px 76.00 78.00 2 ←2px 不足
差が出るのは「1 項目目にだけ ui-state-active が付く」ため。
iOS はタップ後に指の下の要素へ mouseover を送り、ポップアップは
指の位置に出るので 1 項目目が指の下に来る。jQuery UI menu は
mouseenter で項目を focus し ui-state-active を付ける。
（ヘッドレス Edge で touchStart/End の後に同じ座標へ mouseMoved を送ると
実機と同じ「1 行目だけ 2 行」が再現できた。高さ 31.5px → 53px）
では、なぜ ui-state-active が付くと 2px 減るのか。テーマ CSS
(jquery-ui-1.10.4.custom.min.css) は
.ui-widget-content .ui-state-active { border:1px solid ... }
.ui-menu .ui-menu-item a.ui-state-active { margin:-1px }
という組で、「1px の枠を足す代わりに margin:-1px で外へ逃がす」＝
内容幅は変わらない、という設計になっている。ところが renewal.css の
@media(max-width:900px) が * { box-sizing:border-box } を当てているため、
枠の 1px は内容幅から差し引かれる側に回り、逃がした margin の分は
（ポップアップが position:absolute の shrink-to-fit で、内容から幅を
決め直すので）枠幅 102px のまま吸収されて戻ってこない。
結果、内容幅だけが 78 → 76px に減って折り返す。
★PC(901px 以上)では起きない★ box-sizing が content-box のままなので
内容幅は 80px 確保され、実測で 1 行に収まっている（後述の確認参照）。
■ 英語版も同じ原因で折れていた
英語は「Set to Departure」＝109.77px 必要。バス停名が長いページでは
名前がポップアップ幅を決めるので余裕があり折れないが、名前が短い
バス停（例: Gion）では枠が 133.77px しかなく、内容幅 107.77px となって
ちょうど 2px 不足し、日本語と同じく 1 項目目だけ 2 行になっていた。
■ 対処
ボタン 2 つに限って (1) 状態クラスの枠と負マージンを打ち消し
(2) white-space:nowrap でそもそも折り返させない。
citybus.css が状態クラスの border-color を transparent にしているので
枠を 0 にしても見た目は変わらない。nowrap にするとポップアップは
shrink-to-fit でラベル幅まで広がるため、フォントが実機で多少太くても
1 行が保証される（日本語では必要幅がもともと枠幅と一致しており、
ポップアップの実測幅は 108px のまま変わらない＝路線図を余分に隠さない）。
★紫の見出し(#menuHeader)は nowrap にしない★ バス停名は英語で最大 74 文字
（Okazaki Koen Bijutsukan/Heian Jingu Mae (Museum of Art/Heian-jingu Shrine)）
あり、nowrap にすると #menuOptions の overflow:hidden で切れてしまう。
見出しは今までどおり折り返させ、ボタンだけを 1 行に保つ。
★★このブロックは max-width:600px ではなく max-width:900px を対象にしている。
編集時は注意★★ 原因である renewal.css の * { box-sizing:border-box } が
900px 以下に掛かっているため、601〜900px の帯でも 390px と全く同じ
「内容幅 76px / 2 行 / 高さ 53px」が実測された（vw=700 で確認）。
★12 と同じく、直すべき範囲が 600px 以下に収まらない例。
901px 以上には一切掛からない。
■ 確認（評価環境・実タッチ＋タップ後 mouseover・修正前→修正後）
vw=390 ja 出発地に設定 内容幅 76→78 高さ 53→31.5 行数 2→1
vw=360 ja 出発地に設定 内容幅 76→78 高さ 53→31.5 行数 2→1
vw=700 ja 出発地に設定 内容幅 76→78 高さ 53→31.5 行数 2→1
vw=390 en Set to Departure (Gion) 内容幅 107.77→109.77 高さ 53→31.5 行数 2→1
目的地に設定 / Set to Arrival は前後とも 1 行・高さ 31.5 で変化なし。
ポップアップ全体の高さは ja 110.5→91、en(Gion) 106.5→87 と小さくなり、
幅は前後とも同一（ja 108px / en(Gion) 139.8px）＝路線図を余分に隠さない。
ピンチ拡大時も同じ: ポップアップは #mapimage の子ではなく
.citybus_contents 直下に置かれ、transform を持つ祖先も無い（実測で
transformedAncestors=[]）ので、citybus.js の
transform:translate()scale() の影響を受けない。
全体表示 scale=0.191 と拡大 scale=0.670 の両方で寸法が完全一致した。
長いバス停名: ja「岡崎公園 ロームシアター京都・みやこめっせ前」は
ポップアップ 304px・見出し 1 行、en の最長名はポップアップ 390px・
見出し 2 行（高さ 34px）で、いずれも修正前後で見出しの寸法は同一。
★PC 無改変★ vw=1280 の ja/en/長い名前の 3 通りで、修正前後の
ポップアップ幅(110/200/200px)・高さ(91/103/135px)・ボタンの
枠幅(106/104px)・内容幅(80/170px)・行数(すべて 1)が完全一致。
============================================================================ */
@media screen and (max-width: 900px) {
#menuOptions .menuItem > a,
#menuOptions .menuItem > a:hover,
#menuOptions .menuItem > a.ui-state-focus,
#menuOptions .menuItem > a.ui-state-active {
border-width: 0 !important;
margin: 0 !important;
white-space: nowrap !important;
}
}
/* ============================================================================
★14 経路詳細の明細がパネル右端まで届かず、右側に縦長の空白が残る
----------------------------------------------------------------------------
★★このブロックは max-width:600px の外にある。編集時は注意★★
（デスクトップ幅だけの不具合なので、やむを得ずこの帯を対象にしている。
★12 と同じ扱い。600px 以下・601〜900px には一切掛からない。）
■ 何が起きているか
結果一覧(#result_list .panel)は幅 100% のブロックなのでコンテナ右端まで
届くが、経路詳細(#result_detail .block table)は result.css に width 指定が
無く、固定列幅の合計＝内在幅で止まる。実測(評価環境・日本語)：
td.time_1 175px + td.time_2 435px + td.time_3 190px + td.time_4 100px
＋ table の padding 5px+5px ＋ 左右ボーダー 1px+1px ＝ 932px
コンテナ内寸が 932px を超えると、超えた分がそのまま右の空白になる。
vw コンテナ内寸 table 幅 一覧右端 − 詳細表右端
901 831 831 0
1000 930 930 0
1001 931 931 0
1002 932 932 0 ← ここが分かれ目
1010 940 932 8
1020 950 932 18
1080 1010(上限) 932 78
1280 1010(上限) 932 78
1440 1010(上限) 932 78
ずれ始めは vw=1002px（コンテナ内寸が内在幅 932px を超える点）で、
コンテナ内寸が上限 1010px に達する 1080px 以上では 78px で頭打ち。
印刷リンク(.print)は .block 基準の position:absolute; right:20px なので
表とは無関係に右へ出ており、vw=1280 では表の右端より 73px 右にあった。
■ 対処
表をコンテナ幅いっぱいに広げ、印刷リンクも同じ右端にそろえる。
★適用は vw≧1002px だけ★ それ未満では表はすでにコンテナ幅いっぱいで、
width:100% を掛けても表幅は変わらないのに列の配分だけが変わってしまう
（実測: vw=901 で 180/380/168/91 → 190/416/183/30）。
不具合が存在する幅だけに絞ることで、901〜1001px を完全に無改変にできる。
・table は box-sizing:border-box にしてから width:100%。
>900px は box-sizing が content-box のままなので、border-box にしないと
padding 10px + border 2px の 12px 分だけコンテナからはみ出す。
・広がった分は td.time_4（早/安/楽アイコンの列）に吸わせる。
★1 行目の文字位置を動かさないため★ time_1/time_2/time_3 は固定幅の
ままにし、width:auto の列が残りを吸う、という表レイアウトの性質を使う。
アイコンは左寄せなので、伸びるのは行末の余白だけで見た目は変わらない。
（比例配分に任せると time_1..3 も 195/435/190 → 212/472/206 と動いて
1 行目の文字が全部右へずれる。実測して比較した上でこちらを採った）
・明細行はすべて colspan="4" なので、表が広がれば背景も右端まで届く。
■ 確認（評価環境・ja/en）
修正後の「一覧の右端 − 詳細表の右端」は 1002/1010/1020/1080/1280/1440px
すべてで 0。明細行(td.point)の右端も表の内側 6px（table の padding 5px＋
ボーダー 1px）で一様。印刷リンクの右端も表の右端と一致（例 vw=1280:
一覧 1145 / 表 1145 / 印刷 1145。修正前は表 1067 / 印刷 1140）。
列幅は vw=1280 で ja 195/435/190/100 → 195/435/190/178、
en 195/335/290/100 → 195/335/290/178。time_1/2/3 は不変。
★無改変の確認★ vw=360/390/600/601/700/768/900/901/950/1000/1001 の
11 通り（ja）と 601/900/390（en）で、表の右端・表幅・列幅・
印刷リンクの右端・明細行の右端がすべて修正前と完全一致。
★4(tr の flex 化)・★12(.box-5 の box-sizing)の帯にも影響なし。
============================================================================ */
@media screen and (min-width: 1002px) {
#result_detail .block table {
box-sizing: border-box !important;
width: 100% !important;
}
/* 広がった分はアイコン列に吸わせる（1 行目の文字位置を動かさないため） */
#result_detail .block table td.time_4 { width: auto !important; }
/* 印刷リンクも .block の内側パディング(15px)にそろえる＝表の右端と一致 */
#result_detail .block .print { right: 15px !important; }
}
/* ============================================================================
★15 ガイドのタブが 601px 付近で階段状に崩れる
----------------------------------------------------------------------------
★★このブロックは max-width:600px の外にある。編集時は注意★★
（デスクトップ側だけの不具合。600px 以下は ★10 (6-a) の 2 列グリッドのまま
一切触らない。実測でも 600/390/360px は修正前後で完全一致。）
■ 何が起きているか
jQuery UI のタブは li が float:left ＋ width:155px。選択中の li だけ
ui-tabs-active の padding-bottom:1px で 1px 高い（33.19px に対し 34.19px）。
float は「前の float の下端」に引っかかるため、1px 高い float が行の途中に
あると、次の行の先頭が左端まで戻れない。実測（bus_guide vw=601）:
選択=0 1 行目 l=24.58 / 183.77 / 342.95 2 行目 l=183.77 ★左端に戻らない★
選択=1 1 行目 l=24.58 / 183.77 / 342.95 2 行目 l=342.95 ★さらに右へ★
選択=2 1 行目 l=24.58 / 183.77 / 342.95 2 行目 l= 24.58 （正常）
選択=3 同上（正常）
★★★10 の記述「崩れるのは 1 番目のタブが選択されている状態だけ」は
デスクトップ幅では成り立たない★★ 今回 4 タブすべてを実際にクリックして
測り直したところ、601px では選択=0 と選択=1 の 2 通りで崩れる。
「1px 高い li が、その行の最後尾より前にある」ときに崩れる、が正しい。
1 行に 3 つ入る幅なので、選択=2 以降は 1px 高い li が行末か次の行に来て
引っかかりが起きない。
起きる幅は「4 つのタブが 1 行に収まらない帯」だけ。実測で
601 / 620 / 640 / 660 / 662 / 663px … 2 行になり崩れる
680 / 700 / 900 / 901 / 1000 / 1080 / 1280 / 1440px … 1 行で崩れない
（タブ 1 つ分の送りは 159.19px。4 つ＝約 637px 必要）。
■ 対処
★スマホと同じ 2 列グリッドにはしない★ デスクトップは幅によって 1 行に
入るタブ数が変わる（601px で 3 つ、1080px 以上で 4 つ）ため、列数を
決め打ちすると広い画面で不自然に狭くなる。
そこで float をやめて flex-wrap にする。折り返した行は必ず左端から始まり、
1 行に入る数は幅なりに決まるので、見え方は今までと同じまま崩れだけが直る。
・flex: 0 0 auto … 既定の flex-shrink:1 のままだと 4 つを無理に 1 行へ
詰め込んで幅 155px が縮んでしまう（＝今までと違う見え方になる）。
・align-items: flex-start … float と同じ「上そろえ」を再現する。
・★clearfix の :before/:after を消すこと★ ★10 と同じ罠で、消さないと
jQuery UI の .ui-helper-clearfix が作る箱が flex アイテムとして
1 マス目を占領し、最初のタブが右へずれる。
■ 確認（評価環境 / bus_guide・guide・train_guide × ja/en ×
601/620/640/660/662/663/680/700/900/901/1000/1080/1280/1440/600/390/360px ×
タブを実際にクリックして選択 0..3 の全通り = 85 ケース × 4 選択）
・崩れは 30 ケース（601〜663px の帯）→ 0 ケース。
修正後はどの選択でも全行の左端が 24.58 でそろう。
・タブの幅（155px）と高さ（33.19 / 選択中 34.19px）は修正前後で完全一致。
・680px 以上および 600px 以下の 55 ケースは、行数・各行の左端・
各 li の top・幅・高さのすべてが修正前と完全一致（＝無改変）。
・rule / station にはタブが無いことも確認（.ui-tabs 自体が無い）。
============================================================================ */
@media screen and (min-width: 601px) {
#container.ui-tabs > ul.ui-tabs-nav {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
}
/* clearfix の箱が flex アイテムになって 1 マス目を占領するので消す（★10 と同じ罠） */
#container.ui-tabs > ul.ui-tabs-nav::before,
#container.ui-tabs > ul.ui-tabs-nav::after { display: none !important; }
#container.ui-tabs > ul.ui-tabs-nav > li {
float: none !important;
flex: 0 0 auto !important; /* 既定の flex-shrink:1 だと 155px が縮む */
}
}
/* ============================================================================
★16 見出し(.subsection_title)の中のアイコンが原寸になり、帯から 2px あふれる
----------------------------------------------------------------------------
★★このブロックは max-width:600px の外にある。編集時は注意★★
（対象は 601〜900px の帯だけ。600px 以下は ★10 で帯を height:auto に
してあり、あふれは既に 0。901px 以上はもともと正常。）
■ 何が起きているか
指摘は「train_search 英語版の Kyoto City Subway が 2px あふれる」。
実測すると、あふれるのは幅 601〜900px の帯だけで、
★1280px ではあふれていない★（指摘の「1280px でもあふれる」は再現せず）。
vw h2 の枠 中身(scrollHeight) あふれ
601 38px 40px 2px
768 38px 40px 2px
900 38px 40px 2px
901 38px 38px 0
1000 38px 38px 0
1080 38px 38px 0
1280 38px 38px 0
1440 38px 38px 0
原因は ★12 とまったく同じ型で、renewal.css の @media(max-width:900px) の
img { max-width:100% !important; height:auto !important }
が、bus_train_info.css / station.css の
.station_list_title .agency_icon { height:28px }
.letter_sel_title .busstop_icon { height:28px }
を打ち消してしまうこと。アイコンの原寸は 38x38（バス停アイコンは 19x38）
なので、601〜900px ではアイコンが 28px ではなく 38px で描かれる。
.subsection_title は style.css で height:38px / line-height:38px の
1 行決め打ちなので、38px のアイコンを含む行ボックスは 39.89px になり、
38px の帯から約 2px はみ出す（bus_search 英語版では次の要素と 2px 重なる）。
■ 対処
601〜900px でだけ、見出しの中のアイコンを本来の 28px に戻す。
帯の高さ(38px)も line-height も触らないので、901px 以上とまったく同じ
見え方になる。★600px 以下には掛けない★ 600px 以下は ★10 で帯を
height:auto / min-height:38px にしてあり、38px のアイコンでも
あふれない作りになっているため、ここでアイコンを縮めると
スマホの見た目が変わってしまう。
■ 確認（評価環境）
.subsection_title を持つ 7 ページ（train_search / bus_search /
static.php?page=bus_guide,guide,rule,train_guide / station）× ja/en ×
601/768/900/1080/1280/1440px の 84 ケースで、
・あふれ（scrollHeight − clientHeight > 0）と次要素との重なりは
修正後 0 件（修正前は 601/768/900px の英語版で 9 件）。
・1 行の見出しの帯の高さは修正前後とも 38px のまま。
・901px 以上の見出しは寸法・アイコン寸法とも修正前と完全一致。
・390px / 600px（スマホ）はアイコン 38px のまま完全一致＝無改変。
・601〜900px ではアイコンが 38x38 → 28x28（バス停アイコンは
19x38 → 14x28）となり、901px 以上と同じ寸法にそろった。
日本語版はあふれてはいなかったが、アイコンが原寸のままだったので
同じくそろう（901px 以上と同じ見え方になる方向の変更）。
============================================================================ */
@media screen and (min-width: 601px) and (max-width: 900px) {
.subsection_title .agency_icon,
.subsection_title .busstop_icon {
height: 28px !important;
width: auto !important;
}
}