/* ==========================================================================
   View Mode ローテーション機能用CSS
   情報モード・分割モード・地図モードの3つのビューに対応
   ========================================================================== */

/* 横画面（landscape）のスタイル */
@media (orientation: landscape) {

    /* 情報モード：パネル全幅、地図非表示 */
    body.mode-info .pnl_info {
        width: 100%;
        left: 0;
        z-index: 100;
    }

    body.mode-info .pnl_map {
        display: none;
    }

    /* 分割モード：現在の実装を維持（左右分割） */
    body.mode-split .pnl_info {
        display: block;
        z-index: 100;
    }

    /* 分割モード：地図パネルを右側に配置し、表示領域内でコントローラーを中央に */
    body.mode-split .pnl_map {
        display: block;
        width: 34.583%;
        /* 100% - 65.417% (info panel width) */
        position: absolute;
        right: 0;
        left: auto;
    }

    /* 分割モード：地図コントローラーを地図パネル内で中央に配置 */
    body.mode-split .pnl_map .controller {
        left: 50%;
        transform: translateX(-50%);
    }

    /* 地図モード：全画面表示 */
    body.mode-map .pnl_info {
        display: none !important;
    }

    body.mode-map .pnl_map {
        display: block;
        width: 100%;
        height: 100%;
        left: 0;
    }

    /* 地図モード：コントローラーを中央に戻す */
    body.mode-map .pnl_map .controller {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}

/* 縦画面（portrait）のスタイル */
@media (orientation: portrait) {

    /* 縦画面の基本: メインコンテナをflexboxで上下分割管理 */
    #common_main {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 7rem - 8rem) !important;
        /* viewport - header - footer */
        overflow: hidden !important;
    }

    /* 情報モード：パネル全高、地図非表示 */
    body.mode-info .pnl_info {
        position: relative;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    body.mode-info .pnl_map {
        display: none !important;
    }

    /* 分割モード：上下分割 50/50 */
    body.mode-split .pnl_info {
        position: relative;
        width: 100%;
        height: 50%;
        left: 0;
        top: 0;
        overflow: hidden;
    }

    body.mode-split .pnl_map {
        display: block;
        position: relative;
        width: 100%;
        height: 50%;
        left: 0;
    }

    /* 地図モード：全画面表示 */
    body.mode-map .pnl_info {
        display: none !important;
    }

    body.mode-map .pnl_map {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        left: 0;
    }
}

/* フッターボタンのアクティブ状態 */
/* フッターボタンのアクティブ状態 */
body.mode-split #js-mode-view.on {
    background-color: transparent !important;
}

/* 地図モード時のフッター項目 */
body.mode-map .footer_item.view {}

body.mode-map #js-mode-view.on {
    background-color: transparent !important;
}

/* 地図モード時スクロールボタン非表示（位置ずれ防止のためvisibility使用） */
body.mode-map .footer_item.scroll {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 戻るボタン（デフォルト非表示、停留所一覧モードのみ表示） */
.footer_item.back {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 停留所一覧表示時は戻るボタンを表示 */
body.stoplist-mode .footer_item.back {
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   レスポンシブ対応 - 縦画面（タブレット・スマートフォン）
   ========================================================================== */
@media (orientation: portrait) {

    /* グローバルオーバーフロー制御 - 縦・横スクロール抑制 */
    html {
        overflow: hidden !important;
        height: 100vh !important;
        max-width: 100vw !important;
    }

    body {
        overflow: hidden !important;
        height: 100vh !important;
        max-width: 100vw !important;
    }

    .container {
        overflow: hidden !important;
        max-width: 100vw !important;
        height: 100vh !important;
    }

    /* モーダル要素を非表示時に折りたたむ */
    .modal_overlay:not(.active) {
        display: none !important;
    }

    .modal_inner,
    .modal_bottom {
        max-width: 100vw !important;
        max-height: 100vh !important;
    }

    /* ヘッダーのレスポンシブ調整 */
    #common_header {
        max-width: 100vw !important;
    }

    #common_header .header_inner {
        flex-wrap: nowrap !important;
        height: 7rem !important;
        overflow: visible !important;
        /* Allow badges to show outside header */
    }

    #common_header .header_inner .header_item {
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        padding: 0.5rem !important;
    }

    #common_header .header_inner .header_item.date {
        flex: 1 1 auto !important;
        padding: 0 0.5rem !important;
        font-size: 1.8rem !important;
        justify-content: center !important;
    }

    #common_header .header_inner .header_item.date time {
        font-size: 1.8rem !important;
    }

    #common_header .header_inner .header_item .btn {
        width: auto !important;
        min-width: 10rem !important;
        max-width: 15rem !important;
        height: 5rem !important;
    }

    #common_header .header_inner .header_item .btn .label {
        font-size: 2rem !important;
    }

    #common_header .header_inner .header_item.gps {
        flex: 1 1 auto !important;
    }

    #common_header .header_inner .header_item.gps .badge span {
        font-size: 1.6rem !important;
    }

    /* フッターのレスポンシブ調整 */
    #common_footer {
        max-width: 100vw !important;
    }

    #common_footer .footer_inner {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 6rem !important;
    }

    #common_footer .footer_inner .footer_item {
        /* width: auto !important; */
        /* min-width: 0 !important; */
        flex: 1 1 auto !important;
        padding: 0.3rem 0.5rem !important;
    }

    #common_footer .footer_inner .footer_item .btn {
        width: auto !important;
        min-width: 8rem !important;
        max-width: 14rem !important;
        height: 6rem !important;
    }

    #common_footer .footer_inner .footer_item .btn .label {
        font-size: 2.4rem !important;
    }

    #common_footer .footer_inner .footer_item.map {
        flex: 2 1 auto !important;
    }

    #common_footer .footer_inner .footer_item.map .map_type {
        flex-wrap: wrap !important;
        gap: 0.3rem !important;
    }

    /* フッターの全体地図ボタンを非表示（地図コントローラーに移動済み） */
    #common_footer .footer_inner .footer_item.map .view_all_button {
        display: none !important;
    }

    /* フッタースクロールボタン */
    #common_footer .footer_inner .footer_item.scroll {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
        flex: 0 0 auto !important;
    }

    /* 地図モード時スクロールボタン非表示（縦画面） */
    body.mode-map #common_footer .footer_inner .footer_item.scroll {
        display: none !important;
    }

    #common_footer .footer_inner .footer_item.scroll .btn {
        width: 5rem !important;
        min-width: 5rem !important;
        max-width: 5rem !important;
        height: 5rem !important;
    }

    /* メインコンテンツエリアのオーバーフロー制御 */
    #common_main {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        margin-top: 7rem !important;
        /* Portrait header height */
    }

    .pnl_info {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* 便一覧のレスポンシブ調整 */
    .info_content.buslocation.services {
        overflow-x: hidden !important;
    }

    .service_item_inner {
        padding: 1rem !important;
    }

    .service_header {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .service_info .service_name {
        font-size: 1.6rem !important;
        flex-wrap: wrap !important;
    }

    .service_info .service_time {
        font-size: 1.4rem !important;
    }

    .service_stats {
        flex-direction: row !important;
        gap: 1rem !important;
    }

    .stat_item .value {
        font-size: 1.8rem !important;
    }

    /* 地図コントローラーを縦画面でもコンパクトに */
    .pnl_map .controller {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0 0.5rem !important;
    }

    .pnl_map .controller .btn.zoomin,
    .pnl_map .controller .btn.zoomout {
        width: 5rem !important;
        height: 5rem !important;
        margin-right: 0.5rem !important;
    }

    .pnl_map .controller .btn.location {
        width: auto !important;
        min-width: 5.5rem !important;
        height: 5rem !important;
        padding: 0 0.3rem !important;
    }

    .pnl_map .controller .btn.location .label {
        font-size: 1.8rem !important;
    }

    .pnl_map .controller .btn.location .icon::after {
        width: 1.8rem !important;
        height: 1.8rem !important;
    }

    /* 全体地図ボタン - 現在地と同じサイズ */
    .pnl_map .controller .btn.view_all {
        width: auto !important;
        min-width: 5.5rem !important;
        height: 5rem !important;
        margin-left: 0.2rem !important;
        padding: 0 0.3rem !important;
    }

    .pnl_map .controller .btn.view_all .label {
        font-size: 1.8rem !important;
    }

    .pnl_map .controller .btn.view_all .icon::after {
        width: 1.8rem !important;
        height: 1.8rem !important;
    }

    .pnl_map .controller .btn.heading_toggle {
        width: 5.5rem !important;
        height: 5rem !important;
    }

    .pnl_map .controller .btn.heading_toggle .icon::after {
        width: 1.8rem !important;
        height: 1.8rem !important;
    }

    /* 地図コントローラー4ボタンを1行に収める */
    .pnl_map .controller {
        flex-wrap: nowrap !important;
        gap: 0.2rem !important;
        padding: 0 0.2rem !important;
    }

    .pnl_map .controller .btn.zoomin .icon::after,
    .pnl_map .controller .btn.zoomout .icon::after {
        width: 2.2rem !important;
        height: 2.2rem !important;
    }

    /* 更新ボタンの封印を維持 */
    body.buslocation-mode .js-header-update {
        display: none !important;
    }

    /* ==========================================================
       情報パネル・サービスリストのレスポンシブ対応
       ========================================================== */

    /* 情報パネルを画面幅いっぱいに */
    .pnl_info {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* サービスリストのコンテナ */
    .info_content.buslocation {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-bottom: 10rem !important;
    }

    .service_list,
    .stop_list {
        max-width: 100% !important;
    }

    /* サービスアイテムのレイアウト調整 */
    .service_item_inner {
        padding: 10px !important;
    }

    .service_header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .service_info .service_name {
        font-size: 18px !important;
        flex-wrap: wrap !important;
    }

    .service_info .service_time {
        font-size: 14px !important;
    }

    .service_info .series {
        font-size: 14px !important;
    }

    .service_stats {
        flex-direction: row !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .stat_item {
        text-align: left !important;
        flex: 1 !important;
    }

    .stat_item .label {
        font-size: 12px !important;
    }

    .stat_item .value {
        font-size: 18px !important;
    }

    /* 停留所アイテム */
    .stop_item_inner {
        padding: 10px !important;
    }

    .stop_header {
        flex-wrap: wrap !important;
    }

    .stop_name {
        font-size: 16px !important;
    }

    .stop_address {
        font-size: 12px !important;
    }

    .scheduled_time {
        font-size: 14px !important;
    }

    /* 停留所アクション */
    .stop_actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .passenger_btn_group {
        flex: 1 1 30% !important;
        min-width: 80px !important;
    }

    .passenger_btn_group .value {
        font-size: 24px !important;
    }

    .passenger_btn_group .label {
        font-size: 12px !important;
    }

    .arrival_btn_group {
        flex: 1 1 100% !important;
    }

    .arrival_btn_group .arrival.btn04 {
        min-height: 6rem !important;
    }

    /* info_head調整 */
    .pnl_info .info_head {
        padding: 10px 15px !important;
        height: auto !important;
        min-height: 6rem !important;
    }

    /* info_item調整 */
    .pnl_info .info_item_head {
        padding: 10px 15px !important;
    }

    .pnl_info .info_item_head .info_item_head_title {
        font-size: 2rem !important;
    }

    .pnl_info .info_item_head .info_item_head_action {
        padding: 0.5rem 1rem !important;
    }

    /* モーダル調整 */
    .modal_content.numpad_content {
        width: 95% !important;
        max-width: 100vw !important;
    }

    /* ステータスバッジ */
    .status_badge {
        font-size: 12px !important;
        padding: 2px 6px !important;
    }

    /* カレンダーウィジェットのオーバーフロー制御 */
    .ui-datepicker,
    .ui-datepicker-inline {
        max-width: 100vw !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 3rem !important;
    }

    /* モーダルのオーバーフロー制御 */
    .modal_inner {
        max-width: 100vw !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .modal_content {
        max-width: 95vw !important;
        width: 100% !important;
    }

    /* カレンダーモーダル */
    #modal_calendar .modal_content,
    #workdate_calendar {
        max-width: 100vw !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    #workdate_calendar .ui-datepicker {
        font-size: 2.5rem !important;
    }

    /* ==========================================================================
       モーダル レスポンシブ対応
       ========================================================================== */

    /* 共通モーダル調整 */
    .modal {
        top: 7rem !important;
        /* header height */
        height: calc(100vh - 7rem - 8rem) !important;
        /* viewport - header - footer */
        overflow-y: auto !important;
    }

    .modal_inner {
        padding: 2rem 3rem !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .modal_title .label {
        font-size: 2.8rem !important;
    }

    .modal_title .icon::after {
        width: 3rem !important;
        height: 3rem !important;
    }

    .modal_top .btn,
    .modal_bottom .btn {
        width: 80% !important;
        max-width: 30rem !important;
        height: 6rem !important;
    }

    .modal .btn .label {
        font-size: 2.4rem !important;
    }

    /* 設定モーダル */
    #modal_setting .modal_inner {
        padding: 2rem !important;
    }

    #modal_setting .modal_content {
        flex-direction: column !important;
        align-items: center !important;
        gap: 2rem !important;
    }

    #modal_setting .modal_content .font_size {
        width: 100% !important;
    }

    #modal_setting .modal_content .font_size_title {
        font-size: 2.4rem !important;
        margin-bottom: 1.5rem !important;
    }

    #modal_setting .modal_content .btn {
        width: 100% !important;
        max-width: none !important;
        height: 6rem !important;
    }

    #modal_setting .modal_content .font_size_btn {
        row-gap: 1.5rem !important;
        flex-direction: row !important; /* Force row for grid */
        flex-wrap: wrap !important;
    }

    #modal_setting .modal_content .menu_position_btn {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 1.5rem !important;
        width: 100% !important;
    }

    /* Override 100% width for grid items */
    #modal_setting .modal_content .font_size_btn .btn,
    #modal_setting .modal_content .menu_position_btn .btn {
        width: calc(50% - 0.75rem) !important;
        min-width: 0 !important;
    }

    #modal_setting .modal_content .other_btn {
        row-gap: 3rem !important;
        width: 100% !important;
    }

    #modal_setting .modal_content .payment_btn {
        flex-direction: column !important;
        row-gap: 1rem !important;
        width: 100% !important;
    }

    /* 連絡事項モーダル */
    #modal_contact .modal_head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    #modal_contact .modal_title {
        padding-right: 0 !important;
    }

    #modal_contact .modal_desc {
        padding: 1rem 0 1rem 2rem !important;
        font-size: 2rem !important;
    }

    #modal_contact .scroll {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: center !important;
    }

    #modal_contact .contact_list {
        max-height: 50vh !important;
    }

    #modal_contact .contact_item {
        padding: 2rem !important;
    }

    #modal_contact .contact_item .controller {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    #modal_contact .contact_item .controller .btn {
        width: 100% !important;
        max-width: none !important;
        height: 6rem !important;
    }

    #modal_contact .contact_item .controller .btn .label {
        font-size: 2.4rem !important;
    }

    /* 確認ダイアログ */
    .modal#modal_confirm_dialog .modal_inner {
        width: 90vw !important;
        min-height: auto !important;
        max-height: 80vh !important;
        margin: 10vh auto !important;
        padding: 2rem !important;
    }

    .modal#modal_confirm_dialog #modal_confirm_list {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .modal#modal_confirm_dialog #modal_confirm_list .btn {
        width: 100% !important;
        height: 6rem !important;
    }

    .modal#modal_confirm_dialog #modal_confirm_list .btn .label {
        font-size: 2.4rem !important;
    }

    /* 縦画面ボタン高さ調整 */
    .pnl_info .info_content .btn.logout,
    .pnl_info .info_item_head_bottom .btn.update_service_notification {
        height: 10rem !important;
    }

    /* ユーザーモーダル */
    #modal_user .modal_content {
        flex-direction: column !important;
    }

    #modal_user .user_item {
        width: 100% !important;
    }

    #modal_user .table_content {
        max-height: 40vh !important;
    }

    /* 決済モーダル */
    #modal_payment .modal_head .js-modal-close {
        width: 100% !important;
        max-width: 20rem !important;
        height: 5rem !important;
    }

    #modal_payment .amounts_billed {
        font-size: 5rem !important;
    }

    #modal_payment .payment_list {
        flex-direction: column !important;
    }

    #modal_payment .payment_item {
        padding: 2rem !important;
    }

    #modal_payment .payment_item .controller {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    #modal_payment .payment_item .controller .btn {
        width: 100% !important;
        height: 6rem !important;
    }

    #modal_payment .payment_item .controller .btn .label {
        font-size: 2.4rem !important;
    }

    /* カレンダーモーダルの閉じるボタン */
    #modal_calendar .modal_head .js-modal-close {
        width: 100% !important;
        max-width: 20rem !important;
        height: 5rem !important;
    }
}

/* ==========================================================
   ヘッダー日付・時刻表示のスタイル
   ========================================================== */

/* 日付の年と曜日を70%サイズに（太字にしない） */
/* 日付の年と曜日を70%サイズに（太字にしない） */
#calendar_date .date_year {
    display: block;
    /* 年の後に改行 */
    font-size: 0.7em;
    font-weight: normal;
    line-height: 1.2;
}

#calendar_date .date_weekday {
    font-size: 0.7em;
    font-weight: normal;
}

/* ヘッダー時計のスタイル */
.header_clock {
    margin-left: 1rem;
    font-size: 2.8rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
}

/* 縦レイアウト用のヘッダー時計調整 */
@media (orientation: portrait) {
    .header_clock {
        font-size: 2.4rem;
    }

    /* ==========================================================
       info_headの文字サイズ拡大（便一覧タイトルと同じ）
       ========================================================== */
    .info_head {
        font-size: 2.7rem !important;
    }

    .info_head .route_name,
    .info_head .series_name,
    .info_head .service_name {
        font-size: 2.7rem !important;
    }

    /* ==========================================================
       停留所一覧のテキストサイズ調整
       （便一覧の.service_route .fromと同じ21pxに）
       ========================================================== */
    .stop_name {
        font-size: 21px !important;
    }

    .stop_address {
        font-size: 21px !important;
    }

    .scheduled_time,
    .scheduled_time .time_label,
    .scheduled_time .time_value {
        font-size: 21px !important;
    }

    /* ==========================================================
       便一覧のtime_valueも同じサイズに
       ========================================================== */
    .service_info .time_value {
        font-size: 21px !important;
    }

    /* ==========================================================
       便一覧・停留所一覧のスクロールエリア修正
       最下部まで表示されるように
       ========================================================== */
    .info_content.buslocation {
        max-height: none !important;
        height: 100% !important;
        overflow-y: auto !important;
        padding-bottom: 15rem !important;
    }

    /* 便一覧サービスリストのスクロール */
    .info_content.buslocation.services {
        padding-bottom: 15rem !important;
    }

    /* pnl_info_innerにスクロールを任せる */
    .pnl_info_inner {
        height: 100% !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .pnl_info_inner .info_head {
        flex-shrink: 0 !important;
    }

    .pnl_info_inner .info_content {
        flex: 1 !important;
        overflow-y: auto !important;
    }
}

/* ==========================================================
   UI調整（共通・縦・横） - 修正版
   ========================================================== */

/* --- 共通 (Global) --- */

/* 戻るボタンのサイズ調整（ヘッダーボタンと同等の6rem） - 縦横共通 */
.info_head.buslocation .btn.btn_back_to_list {
    height: 6rem !important;
    line-height: normal !important;
    margin-right: 0.5em !important;
    width: auto !important;
    min-width: 8rem !important;
    padding: 0 !important;
}

.info_head.buslocation .btn.btn_back_to_list .btn_inner {
    padding: 0 1.5rem !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.info_head.buslocation .btn.btn_back_to_list .label {
    font-size: 1.6rem !important;
    line-height: 1 !important;
}

/* 停留所一覧の出発・到着ボタン（高さ6remに縮小） - 縦横共通 */
.info_content.buslocation .btn_service_start,
.arrival_btn_group .arrival.btn04 {
    height: 6rem !important;
    min-height: 0 !important;
}

.info_content.buslocation .btn_service_start {
    margin: 1rem auto !important;
}

/* 乗降ボタン（横並び・高さ抑制・Padding半減） - 縦横共通 */
.passenger_btn_group {
    padding: 0.25rem 0.5rem !important;
    min-height: auto !important;
}

.passenger_btn_inner {
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 0.5em !important;
}

.passenger_btn_group .label {
    font-size: 1.6rem !important;
    margin-bottom: 0 !important;
}

.passenger_btn_group .value {
    font-size: 2.8rem !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
}

.passenger_btn_group .unit {
    font-size: 1.4rem !important;
}

/* ボタン高さ抑制 */
.stop_actions .passenger_btn_group {
    height: 6rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* フッター▼▲ボタン幅調整 (8rem) */
.footer_inner .footer_item.scroll .btn {
    width: 8rem !important;
    max-width: none !important;
}

/* フッター▼▲ボタンコンテナの幅制限解除 */
.footer_inner .footer_item.scroll {
    max-width: none !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 1rem !important;
    /* 少し余白確保 */
}

/* フッター分割ボタンデザイン統一 (Info/Mapボタンに合わせる) */
.footer_inner .footer_item .map_type .btn {
    width: 100% !important;
    max-width: 18vw !important;
    height: 8rem !important;
    /* 背景色などは通常のボタンクラスに準拠させるが、サイズを強制 */
}


/* マップボタンコンテナ調整 */
.footer_item.map_type {
    background: transparent !important;
}


/* --- 縦レイアウト (Portrait) --- */
@media (orientation: portrait) {

    /* info_head 高さを調整・文字サイズ拡大 */
    .info_head {
        font-size: 3.0rem !important;
        padding: 0.5rem 1rem !important;
    }

    .info_head .route_name,
    .info_head .series_name,
    .info_head .service_name {
        font-size: 3.0rem !important;
    }

    .info_head .route_info_combined {
        font-size: 3.0rem !important;
    }

    /* 停留所一覧のinfo_head調整 */
    .info_head.buslocation {
        min-height: auto !important;
    }

    /* テキスト情報の改行防止 */
    .info_head.buslocation .route_info p {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
        margin-bottom: 0.2rem !important;
    }

    /* 設定パネル（スクロール・余白） */
    #modal_setting .modal_content {
        overflow-y: auto !important;
        max-height: calc(100vh - 15rem) !important;
        padding-bottom: 12rem !important;
    }

    /* ボタン配置の窮屈さ解消 */
    #modal_setting .other_btn {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 1em !important;
    }

    #modal_setting .other_btn .btn {
        margin: 0 !important;
        /*flex: 1 1 45% !important;*/
    }

    #modal_setting .font_size_btn {
        /*gap: 1em !important;*/
    }

    /* メニュー配置ボタン用（Settings Modal） */
    .menu_position_btn {
        display: flex;
        gap: 10px;
    }

    .menu_position_btn .btn {
        flex: 1;
    }

}

/* --- 横レイアウト (Landscape) --- */
@media (orientation: landscape) {

    /* 設定パネルの表示調整 - コンテンツ高さを減らす */
    #modal_setting .modal_content {
        max-height: calc(100vh - 12rem) !important;
        overflow-y: auto !important;
        padding-bottom: 2rem !important;
        gap: 1em !important;
        /* コンテンツ間の隙間 */
    }

    /* 各カラムの調整（3カラム構成） */
    #modal_setting .modal_content>div {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        /* Flex縮小用 */
    }

    /* 横レイアウト時のボタンサイズ調整（幅を縮小） */
    #modal_setting .modal_content .btn {
        width: 100% !important;
        max-width: 28rem !important;
        /* 幅を制限 */
    }

    /* 2x2グリッド用オーバーライド (Landscape) */
    #modal_setting .modal_content .font_size_btn .btn,
    #modal_setting .modal_content .menu_position_btn .btn {
        width: calc(50% - 0.75rem) !important;
        max-width: none !important;
    }

    #modal_setting .modal_content .font_size_btn,
    #modal_setting .modal_content .menu_position_btn {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 1.5rem !important;
    }

    /* modal_bottomの間隔調整 */
    #modal_setting .modal_bottom {
        margin-top: 1rem !important;
        padding-top: 0 !important;
    }

    /* 下部ボタンサイズ調整 */
    #modal_setting .modal_bottom .btn {
        margin-top: 0 !important;
        height: 6rem !important;
    }

    #modal_contact .scroll {
        gap: 3rem !important;
        flex-direction: column !important;
    }

}