@charset "utf-8";



/*-- 

module

====================================================== --*/


/*--------------- btn ---------------*/
.btn {
    width: 100%;
    position: relative;
}

.btn a,
.btn button {
    color: var(--c-white);
    position: relative;
    width: 100%;
    height: 100%;
}

.btn a::after,
.btn button::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0.4rem;
    z-index: 5;
    border-radius: 1rem;
}

.btn .btn_inner {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.btn .icon {
    margin-right: 0.5rem;
}

/* read-more read-close */
.read-more,
.read-close {
    width: 20rem;
    height: 5rem;
    margin-top: 1rem;
}

/* hover と on */
/* hover と on */
@media (hover: hover) {

    .btn a:hover,
    .btn button:hover {
        color: var(--c-btn-on-text1);
    }
}

.btn a:active,
.btn button:active,
.btn.on a,
.btn.on button {
    color: var(--c-btn-on-text1);
}

.btn.on,
.btn.on a,
.btn.on button {
    /*
    pointer-events: none;
*/
}

@media (hover: hover) {

    .btn a:hover .btn_inner,
    .btn button:hover .btn_inner {
        top: 0.4rem;
        outline: unset;
        outline-offset: unset;
        box-shadow: inset 0 0.7rem 1.5rem var(--c-btn-on-inSide_shadow);
    }
}

.btn a:active .btn_inner,
.btn button:active .btn_inner,
.btn.on a .btn_inner,
.btn.on button .btn_inner {
    top: 0.4rem;
    outline: unset;
    outline-offset: unset;
    box-shadow: inset 0 0.7rem 1.5rem var(--c-btn-on-inSide_shadow);
}

@media (hover: hover) {

    .btn a:hover .btn_inner::after,
    .btn button:hover .btn_inner::after {
        display: none;
    }
}

.btn a:active .btn_inner::after,
.btn button:active .btn_inner::after,
.btn.on a .btn_inner::after,
.btn.on button .btn_inner::after {
    display: none;
}


/*-- btn01 黒 --*/
.btn01 a,
.btn01 button {
    color: var(--c-white);
}

.btn01 a::after,
.btn01 button::after {
    background: var(--c-btn-black-outSide_shadow);
}

.btn01 a .btn_inner,
.btn01 button .btn_inner {
    background: var(--c-btn-black-grad);
    outline: 0.2rem solid var(--c-btn-black-border);
    outline-offset: -0.2rem;
    box-shadow: inset 0 -0.2rem 1rem var(--c-btn-black-inSide_shadow);
}

/* hover */
/* hover */
@media (hover: hover) {

    .btn01 a:hover .btn_inner,
    .btn01 button:hover .btn_inner {
        background: var(--c-btn-black-on);
    }
}

.btn01 a:active .btn_inner,
.btn01 button:active .btn_inner,
.btn01.on a .btn_inner,
.btn01.on button .btn_inner {
    background: var(--c-btn-black-on);
}


/*-- btn02 白 --*/
.btn02 a,
.btn02 button {
    color: var(--c-navy);
}

.btn02 a::after,
.btn02 button::after {
    background: var(--c-btn-white-outSide_shadow);
}

.btn02 a .btn_inner,
.btn02 button .btn_inner {
    background: var(--c-btn-white-grad);
    outline: 0.2rem solid var(--c-btn-white-border);
    outline-offset: -0.2rem;
    box-shadow: inset 0 -0.2rem 1rem var(--c-btn-white-inSide_shadow);
}

/* hover */
/* hover */
@media (hover: hover) {

    .btn02 a:hover,
    .btn02 button:hover {
        color: var(--c-btn-on-text2);
    }
}

.btn02 a:active,
.btn02 button:active,
.btn02.on a,
.btn02.on button {
    color: var(--c-btn-on-text2);
}

@media (hover: hover) {

    .btn02 a:hover .btn_inner,
    .btn02 button:hover .btn_inner {
        background: var(--c-btn-white-on);
    }
}

.btn02 a:active .btn_inner,
.btn02 button:active .btn_inner,
.btn02.on a .btn_inner,
.btn02.on button .btn_inner {
    background: var(--c-btn-white-on);
}


/*-- btn03 赤 --*/
.btn03 a::after,
.btn03 button::after {
    background: var(--c-btn-red-outSide_shadow);
}

.btn03 a .btn_inner,
.btn03 button .btn_inner {
    background: var(--c-btn-red-grad);
    outline: 0.2rem solid var(--c-btn-red-border);
    outline-offset: -0.2rem;
    box-shadow: inset 0 -0.2rem 1rem var(--c-btn-red-inSide_shadow);
}

/* hover */
/* hover */
@media (hover: hover) {

    .btn03 a:hover .btn_inner,
    .btn03 button:hover .btn_inner {
        background: var(--c-btn-red-on);
    }
}

.btn03 a:active .btn_inner,
.btn03 button:active .btn_inner,
.btn03.on a .btn_inner,
.btn03.on button .btn_inner {
    background: var(--c-btn-red-on);
}


/*-- btn04 緑 --*/
.btn04 a::after,
.btn04 button::after {
    background: var(--c-btn-green-outSide_shadow);
}

.btn04 a .btn_inner,
.btn04 button .btn_inner {
    /*background: var(--c-btn-green-grad);
    outline: 0.2rem solid var(--c-btn-green-border);
    outline-offset: -0.2rem;
    box-shadow: inset 0 -0.2rem 1rem var(--c-btn-green-inSide_shadow);*/
}

/* hover */
/* hover */
@media (hover: hover) {

    .btn04 a:hover .btn_inner,
    .btn04 button:hover .btn_inner {
        background: var(--c-btn-green-on);
    }
}

.btn04 a:active .btn_inner,
.btn04 button:active .btn_inner,
.btn04.on a .btn_inner,
.btn04.on button .btn_inner {
    background: var(--c-btn-green-on);
}


/*-- btn05 茶 --*/
.btn05 a::after,
.btn05 button::after {
    background: var(--c-btn-brown-outSide_shadow);
}

.btn05 a .btn_inner,
.btn05 button .btn_inner {
    background: var(--c-btn-brown-grad);
    outline: 0.2rem solid var(--c-btn-brown-border);
    outline-offset: -0.2rem;
    box-shadow: inset 0 -0.2rem 1rem var(--c-btn-brown-inSide_shadow);
}

/* hover */
/* hover */
@media (hover: hover) {

    .btn05 a:hover .btn_inner,
    .btn05 button:hover .btn_inner {
        background: var(--c-btn-brown-on);
    }
}

.btn05 a:active .btn_inner,
.btn05 button:active .btn_inner,
.btn05.on a .btn_inner,
.btn05.on button .btn_inner {
    background: var(--c-btn-brown-on);
}


/*-- btn06 青 --*/
.btn06 a::after,
.btn06 button::after {
    background: var(--c-btn-blue-outSide_shadow);
}

.btn06 a .btn_inner,
.btn06 button .btn_inner {
    background: var(--c-btn-blue-grad);
    outline: 0.2rem solid var(--c-btn-blue-border);
    outline-offset: -0.2rem;
    box-shadow: inset 0 -0.2rem 1rem var(--c-btn-blue-inSide_shadow);
}


/* hover */
/* hover */
@media (hover: hover) {

    .btn06 a:hover .btn_inner,
    .btn06 button:hover .btn_inner {
        background: var(--c-btn-blue-on);
    }
}

.btn06 a:active .btn_inner,
.btn06 button:active .btn_inner,
.btn06.on a .btn_inner,
.btn06.on button .btn_inner {
    background: var(--c-btn-blue-on);
}


/*-- btn07 黄色 --*/
.btn07 a::after,
.btn07 button::after {
    background: var(--c-btn-yellow-outSide_shadow);
}

.btn07 a .btn_inner,
.btn07 button .btn_inner {
    background: var(--c-btn-yellow-grad);
    outline: 0.2rem solid var(--c-btn-yellow-border);
    outline-offset: -0.2rem;
    box-shadow: inset 0 -0.2rem 1rem var(--c-btn-yellow-inSide_shadow);
    color: var(--c-black);
}


/* hover */
/* hover */
@media (hover: hover) {

    .btn07 a:hover .btn_inner,
    .btn07 button:hover .btn_inner {
        background: var(--c-btn-yellow-on);
    }
}

.btn07 a:active .btn_inner,
.btn07 button:active .btn_inner,
.btn07.on a .btn_inner,
.btn07.on button .btn_inner {
    background: var(--c-btn-yellow-on);
}


/*-- btn 非アクティブ --*/
.btn.inactive a,
.btn.inactive button {}

/*-- btn マップタイル有効状態 --*/
.btn.on_tile a,
.btn.on_tile button {
    /*
    pointer-events: none;
*/
}

.btn.inactive a::after,
.btn.inactive button::after,
.btn.on_tile a::after,
.btn.on_tile button::after {
    display: none;
}

.btn.inactive a .btn_inner,
.btn.inactive button .btn_inner,
.btn.on_tile a .btn_inner,
.btn.on_tile button .btn_inner {
    background: var(--c-BB);
    color: var(--c-48);
    outline: 0.2rem solid var(--c-99);
    outline-offset: -0.2rem;
    box-shadow: none;
}

.info_item_head_action.inactive {
    pointer-events: none;
}

.info_item_head_action.inactive .label {
    color: var(--c-BB);
}

.info_item_head_action.inactive .icon.open {
    opacity: 0.4;
}

.btn.on_tile a .btn_inner,
.btn.on_tile button .btn_inner {
    background: var(--c-btn-green-grad);
    outline: 0.2rem solid var(--c-btn-green-outSide_shadow);
    color: var(--c-DD);
    /*color: #5Ba650;*/
}





/*--------------- icon ---------------*/
.icon::after {
    content: "";
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* 閉じる */
.icon.close::after {
    background-image: url(/drivers/assets/img/icon_close.svg);
    width: 5rem;
    height: 5rem;
}

/* ひらく */
.icon.open::after {
    background-image: url(/drivers/assets/img/icon_open.svg);
    width: 5rem;
    height: 5rem;
}

/* 更新 */
.icon.update::after {
    background-image: url(/drivers/assets/img/icon_update.svg);
    width: 3.2rem;
    height: 3.2rem;
}

.btn a:hover .icon.update::after,
.btn.on .icon.update::after {
    background-image: url(/drivers/assets/img/icon_update_active.svg);
}

.btn.inactive a .icon.update::after {
    background-image: url(/drivers/assets/img/icon_update_inactive.svg);
}

/* 連絡事項 */
.icon.contact::after {
    background-image: url(/drivers/assets/img/icon_contact.svg);
    width: 3.2rem;
    height: 3.2rem;
}

.btn a:hover .icon.contact::after,
.btn.on .icon.contact::after {
    background-image: url(/drivers/assets/img/icon_contact_active.svg);
}

.btn.inactive a .icon.contact::after {
    background-image: url(/drivers/assets/img/icon_contact_inactive.svg);
}

/* 乗車 */
.icon.getin::after {
    background-image: url(/drivers/assets/img/icon_getin.svg);
    width: 5.315rem;
    height: 3.7rem;
}

.btn a:hover .icon.getin::after,
.btn.on .icon.getin::after {
    background-image: url(/drivers/assets/img/icon_getin_active.svg);
}

.btn.inactive a .icon.getin::after {
    background-image: url(/drivers/assets/img/icon_getin_inactive.svg);
}

/* 降車 */
.icon.getout::after {
    background-image: url(/drivers/assets/img/icon_getout.svg);
    width: 5.38rem;
    height: 3.7rem;
}

.btn a:hover .icon.getout::after,
.btn.on .icon.getout::after {
    background-image: url(/drivers/assets/img/icon_getout_active.svg);
}

.btn.inactive a .icon.getout::after {
    background-image: url(/drivers/assets/img/icon_getout_inactive.svg);
}

/* 不在 */
.icon.absent::after {
    background-image: url(/drivers/assets/img/icon_absent.svg);
    width: 3.643rem;
    height: 3.7rem;
}

.btn a:hover .icon.absent::after,
.btn.on .icon.absent::after {
    background-image: url(/drivers/assets/img/icon_absent_active.svg);
}

.btn.inactive a .icon.absent::after {
    background-image: url(/drivers/assets/img/icon_absent_inactive.svg);
}

/* ナビ */
.icon.navi::after {
    background-image: url(/drivers/assets/img/icon_navi.svg);
    width: 3.083rem;
    height: 3.7rem;
}

.btn a:hover .icon.navi::after,
.btn.on .icon.navi::after {
    background-image: url(/drivers/assets/img/icon_navi_active.svg);
}

.btn.inactive a .icon.navi::after {
    background-image: url(/drivers/assets/img/icon_navi_inactive.svg);
}

/* 詳細アラート */
.icon.exclamation::after {
    background-image: url(/drivers/assets/img/icon_exclamation.svg);
    width: 0.654rem;
    height: 2.418rem;
}

.btn a:hover .icon.exclamation::after,
.btn.on .icon.exclamation::after {
    background-image: url(/drivers/assets/img/icon_exclamation_active.svg);
}

.btn.inactive a .icon.exclamation::after {
    background-image: url(/drivers/assets/img/icon_exclamation_inactive.svg);
}

/* 拡大 */
.icon.zoomin::after {
    background-image: url(/drivers/assets/img/icon_zoomin.svg);
    width: 5.2rem;
    height: 5.2rem;
}

.btn a:hover .icon.zoomin::after,
.btn.on .icon.zoomin::after {
    background-image: url(/drivers/assets/img/icon_zoomin_active.svg);
}

.btn.inactive a .icon.zoomin::after {
    background-image: url(/drivers/assets/img/icon_zoomin_inactive.svg);
}

/* 縮小 */
.icon.zoomout::after {
    background-image: url(/drivers/assets/img/icon_zoomout.svg);
    width: 5.2rem;
    height: 5.2rem;
}

.btn a:hover .icon.zoomout::after,
.btn.on .icon.zoomout::after {
    background-image: url(/drivers/assets/img/icon_zoomout_active.svg);
}

.btn.inactive a .icon.zoomout::after {
    background-image: url(/drivers/assets/img/icon_zoomout_inactive.svg);
}

/* 現在地 */
.icon.location::after {
    background-image: url(/drivers/assets/img/icon_location.svg);
    width: 4rem;
    height: 4rem;
}

.btn a:hover .icon.location::after,
.btn.on .icon.location::after {
    background-image: url(/drivers/assets/img/icon_location_active.svg);
}

.btn.inactive a .icon.location::after {
    background-image: url(/drivers/assets/img/icon_location_inactive.svg);
}

/* 翌営業日 */
.icon.tomorrow::after {
    background-image: url(/drivers/assets/img/icon_tomorrow.svg);
    width: 3.7rem;
    height: 3.2rem;
}

.btn a:hover .icon.tomorrow::after,
.btn.on .icon.tomorrow::after {
    background-image: url(/drivers/assets/img/icon_tomorrow_active.svg);
}

.btn.inactive a .icon.tomorrow::after {
    background-image: url(/drivers/assets/img/icon_tomorrow_inactive.svg);
}

/* 情報 */
.icon.info::after {
    background-image: url(/drivers/assets/img/icon_info.svg);
    width: 4rem;
    height: 4rem;
}

.btn a:hover .icon.info::after,
.btn.on .icon.info::after {
    background-image: url(/drivers/assets/img/icon_info_active.svg);
}

.btn.inactive a .icon.info::after {
    background-image: url(/drivers/assets/img/icon_info_inactive.svg);
}

/* 地図 */
.icon.map::after {
    background-image: url(/drivers/assets/img/icon_map.svg);
    width: 4rem;
    height: 4rem;
}

.btn a:hover .icon.map::after,
.btn.on .icon.map::after {
    background-image: url(/drivers/assets/img/icon_map_active.svg);
}

.btn.inactive a .icon.map::after {
    background-image: url(/drivers/assets/img/icon_map_inactive.svg);
}

/* 設定 */
.icon.setting::after {
    background-image: url(/drivers/assets/img/icon_setting.svg);
    width: 4rem;
    height: 4rem;
}

.btn a:hover .icon.setting::after,
.btn.on .icon.setting::after {
    background-image: url(/drivers/assets/img/icon_setting_active.svg);
}

.btn.inactive a .icon.setting::after {
    background-image: url(/drivers/assets/img/icon_setting_inactive.svg);
}

/* 戻る */
/* 戻る */
.icon.back::after {
    content: "";
    -webkit-mask-image: url(/drivers/assets/img/icon_arrow_left.svg);
    mask-image: url(/drivers/assets/img/icon_arrow_left.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: currentColor;
    display: inline-block;
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.2rem;
}

.btn a:hover .icon.back::after,
.btn.on .icon.back::after {
    /* bg color changes automatically via currentColor */
}

/* 矢印 上 */
.icon.arrow_up::after {
    background-image: url(/drivers/assets/img/icon_arrow_up.svg);
    width: 3.2rem;
    height: 2.2rem;
}

/* コンパス (Simple text based icon for now) */
.icon.compass::after {
    background-image: url(/drivers/assets/img/icon_map_compass_white.svg);
    width: 3rem;
    height: 3rem;
}

/* ヘディングアップ時はアイコン変更などのスタイル（必要に応じて） */
.btn.on .icon.compass::after {
    /* content: "H"; */
}

.btn a:hover .icon.arrow_up::after,
.btn.on .icon.arrow_up::after {
    background-image: url(/drivers/assets/img/icon_arrow_up_active.svg);
}

.btn.inactive a .icon.arrow_up::after {
    background-image: url(/drivers/assets/img/icon_arrow_up_inactive.svg);
}

/* 矢印 下 */
.icon.arrow_down::after {
    background-image: url(/drivers/assets/img/icon_arrow_down.svg);
    width: 3.2rem;
    height: 2.2rem;
}

.btn a:hover .icon.arrow_down::after,
.btn.on .icon.arrow_down::after {
    background-image: url(/drivers/assets/img/icon_arrow_down_active.svg);
}

.btn.inactive a .icon.arrow_down::after {
    background-image: url(/drivers/assets/img/icon_arrow_down_inactive.svg);
}

/* 非表示 */
.icon.hidden::after {
    background-image: url(/drivers/assets/img/icon_hidden.svg);
    width: 4rem;
    height: 4rem;
}

.btn a:hover .icon.hidden::after,
.btn.on .icon.hidden::after {
    background-image: url(/drivers/assets/img/icon_hidden_active.svg);
}

.btn.inactive a .icon.hidden::after {
    background-image: url(/drivers/assets/img/icon_hidden_inactive.svg);
}



/*--------------- badge ---------------*/
.badge {
    background-color: var(--c-red);
    color: var(--c-white);
    outline: 0.4rem solid var(--c-white);
    outline-offset: -0.4rem;
    border-radius: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 5rem;
    min-height: 5rem;
    padding: 0.7rem 1.7rem 1.1rem 1.7rem;

    position: absolute;
    left: -1.5rem;
    bottom: -3.5rem;
    z-index: 500;
    /* Above header/footer (100) but below modals (999+) */
}




/*--------------- scroll ---------------*/
.scroll {
    display: flex;
    justify-content: center;
    column-gap: 3rem;
}

.scroll .btn {
    width: 15rem;
    height: 6rem;
}

.scroll .btn .icon {
    margin-right: 0;
}




/*--------------- table_content ---------------*/
.table_content {
    overflow-y: scroll;
}

.table_content table {
    width: 100%;
}

.table_content th,
.table_content td {
    padding: 2rem 1rem;
    line-height: 1.4;
}

.table_content th {
    background-color: var(--c-navy);
    border-bottom: 0.2rem solid var(--c-CC);
    color: var(--c-white);
    width: 20rem;
    text-align: center;
    vertical-align: middle;
}

.table_content th.important {
    background-color: var(--c-red);
}

.table_content th:first-child {
    border-bottom: 0.2rem solid var(--c-white);
}

.table_content td {
    background-color: var(--c-white);
    border-bottom: 0.2rem solid var(--c-CC);
    padding: 2rem 3rem;
}

.table_content tr:last-child th:first-child {
    border-bottom: none;
}

.table_content tr:last-child td {
    border-bottom: none;
}





/*-- ti --*/
.ti_1em,
.ti_1-5em,
.ti_2em,
.ti_3em,
.ti_item {
    margin-bottom: .5em;
}

.ti_item:last-child {
    margin-bottom: 0;
}

p.ti_1em::before,
ul.ti_1em>.ti_item::before,
p.ti_1-5em::before,
ul.ti_1-5em>.ti_item::before,
p.ti_2em::before,
ul.ti_2em>.ti_item::before,
p.ti_3em::before,
ul.ti_3em>.ti_item::before,
.ico_mark {
    display: inline-block;
    text-indent: 0;
}

.ti_1em ul,
.ti_1-5em ul,
.ti_2em ul,
.ti_3em ul {
    margin-top: .5em;
}

/*-- ti_1em --*/
p.ti_1em,
ul.ti_1em>.ti_item {
    text-indent: -1em;
    padding-left: 1em;
}

p.ti_1em::before,
ul.ti_1em>.ti_item::before,
p.ti_1em>.ico_mark,
ul.ti_1em>.ti_item>.ico_mark {
    width: 1em;
}

/*-- ti_1em --*/
p.ti_1-25em,
ul.ti_1-25em>.ti_item {
    text-indent: -1.25em;
    padding-left: 1.25em;
}

p.ti_1-25em::before,
ul.ti_1-25em>.ti_item::before,
p.ti_1-25em>.ico_mark,
ul.ti_1-25em>.ti_item>.ico_mark {
    width: 1.25em;
}

/*-- ti_1-5em --*/
p.ti_1-5em,
ul.ti_1-5em>.ti_item {
    text-indent: -1.5em;
    padding-left: 1.5em;
}

p.ti_1-5em::before,
ul.ti_1-5em>.ti_item::before,
p.ti_1-5em>.ico_mark,
ul.ti_1-5em>.ti_item>.ico_mark {
    width: 1.5em;
}

/*-- ti_2em --*/
p.ti_2em,
ul.ti_2em>.ti_item {
    text-indent: -2em;
    padding-left: 2em;
}

p.ti_2em::before,
ul.ti_2em>.ti_item::before,
p.ti_2em>.ico_mark,
ul.ti_2em>.ti_item>.ico_mark {
    width: 2em;
}

/*-- ti_3em --*/
p.ti_3em,
ul.ti_3em>.ti_item {
    text-indent: -3em;
    padding-left: 3em;
}

p.ti_3em::before,
ul.ti_3em>.ti_item::before,
p.ti_3em>.ico_mark,
ul.ti_3em>.ti_item>.ico_mark {
    width: 3em;
}

.hide {
    display: none;
}

.badge_off {
    visibility: hidden;
}

.another_day_mode .pnl_info_inner {
    background-color: #FFEE94;
}

.header_inner .header_item .btn.btn_update_nextday.today_mode {
    width: 32rem;
    letter-spacing: -0.4rem;
}

img.home_icon {
    width: 1em;
}

.from-icon {
    background-color: var(--c-green);
    color: var(--c-white);
    border-radius: 5rem;
    min-width: 5rem;
    min-height: 5rem;
    position: relative;
}

.mode-info .from-icon {
    outline: 0.4rem solid var(--c-white);
    outline-offset: -0.4rem;
    padding: 0.4rem 1.3rem 0.8rem 1.3rem;
    font-size: 2.4rem;
    top: -0.5rem;
}

.mode-map .from-icon {
    outline: 0.2rem solid var(--c-white);
    outline-offset: -0.2rem;
    padding: 0.2rem 0.8rem 0.6rem 0.8rem;
    font-size: 1.8rem;
    top: -0.4rem;
}

.mode-info .done .from-icon {
    background-color: var(--c-btn-green-on);
    color: var(--c-99);
    outline: 0.4rem solid var(--c-99);
}

.to-icon {
    background-color: #FF69B4;
    color: var(--c-white);
    border-radius: 5rem;
    min-width: 5rem;
    min-height: 5rem;
    position: relative;
}

.mode-info .to-icon {
    outline: 0.4rem solid var(--c-white);
    outline-offset: -0.4rem;
    padding: 0.4rem 1.3rem 0.8rem 1.3rem;
    font-size: 2.4rem;
    top: -0.5rem;
}

.mode-map .to-icon {
    outline: 0.2rem solid var(--c-white);
    outline-offset: -0.2rem;
    padding: 0.2rem 0.8rem 0.6rem 0.8rem;
    font-size: 1.8rem;
    top: -0.4rem;
}

.mode-info .done .to-icon {
    background-color: #A34373;
    color: var(--c-99);
    outline: 0.4rem solid var(--c-99);
}

.op_zone_from-icon {
    background-color: var(--c-green);
    color: var(--c-white);
    border-radius: 5rem;
    min-width: 5rem;
    min-height: 5rem;
    position: relative;
}

.mode-info .op_zone_from-icon {
    outline: 0.4rem solid var(--c-white);
    outline-offset: -0.4rem;
    padding: 0.4rem 1.3rem 0.8rem 1.3rem;
    font-size: 2.4rem;
    top: -0.5rem;
}

.mode-map .op_zone_from-icon {
    outline: 0.2rem solid var(--c-white);
    outline-offset: -0.2rem;
    padding: 0.2rem 0.8rem 0.6rem 0.8rem;
    font-size: 1.8rem;
    top: -0.4rem;
}

.mode-info .done .op_zone_from-icon {
    background-color: var(--c-btn-green-on);
    color: var(--c-99);
    outline: 0.4rem solid var(--c-99);
}

.op_zone_to-icon {
    background-color: #FF69B4;
    color: var(--c-white);
    border-radius: 5rem;
    min-width: 5rem;
    min-height: 5rem;
    position: relative;
}

.mode-info .op_zone_to-icon {
    outline: 0.4rem solid var(--c-white);
    outline-offset: -0.4rem;
    padding: 0.4rem 1.3rem 0.8rem 1.3rem;
    font-size: 2.4rem;
    top: -0.5rem;
}

.mode-map .op_zone_to-icon {
    outline: 0.2rem solid var(--c-white);
    outline-offset: -0.2rem;
    padding: 0.2rem 0.8rem 0.6rem 0.8rem;
    font-size: 1.8rem;
    top: -0.4rem;
}

.mode-info .done .op_zone_to-icon {
    background-color: #A34373;
    color: var(--c-99);
    outline: 0.4rem solid var(--c-99);
}

.area_description {
    font-size: 80%;
    font-weight: normal;
}

/*--------------- トースト通知 ---------------*/
.toast-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 2rem 4rem;
    border-radius: 1rem;
    font-size: 3rem;
    font-weight: 700;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.toast-notification.show {
    opacity: 1;
}

/*--------------- 到着ボタンステータス色 ---------------*/
/* 未着 (デフォルト) - 薄いオレンジ背景、黒文字 */
.btn.btn04.arrival .btn_inner,
.btn.btn04.arrival a::after {
    background: linear-gradient(180deg, #ffe0b2 0%, #ffcc80 100%) !important;
    color: #333 !important;
}

.btn.btn04.arrival .btn_inner {
    outline: 0.4rem solid #ffb74d !important;
}

.btn.btn04.arrival .label {
    color: #333 !important;
    text-shadow: none !important;
}

/* 到着済み - 深い緑 */
.btn.btn04.arrival.status_arrived .btn_inner,
.btn.btn04.arrival.status_arrived a::after {
    background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%) !important;
    color: #fff !important;
}

.btn.btn04.arrival.status_arrived .btn_inner {
    outline: 0.4rem solid #1b5e20 !important;
}

.btn.btn04.arrival.status_arrived .label {
    color: #fff !important;
}

/* 通過 - 水色に黒文字 */
.btn.btn04.arrival.status_passed .btn_inner,
.btn.btn04.arrival.status_passed a::after {
    background: linear-gradient(180deg, #4fc3f7 0%, #29b6f6 100%) !important;
}

.btn.btn04.arrival.status_passed .btn_inner {
    outline: 0.4rem solid #29b6f6 !important; /* Fixed border color to match button */
}

.btn.btn04.arrival.status_passed .label {
    color: #000 !important;
    text-shadow: none !important;
}

/*--------------- フッタースクロールボタン色 ---------------*/
#common_footer .footer_item.scroll .btn .icon::after {
    filter: brightness(0) !important;
}

/*--------------- 全体アイコン白色 ---------------*/
.pnl_map .controller .btn.view_all .icon.map::after {
    filter: brightness(0) invert(1) !important;
}

/*--------------- 乗降客集計テーブル ---------------*/
.passenger_summary {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 2rem auto;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 1rem;
    max-width: 40rem;
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}

.passenger_summary .summary_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.passenger_summary .summary_label {
    font-size: 2rem;
    color: #555;
    font-weight: 500;
}

.passenger_summary .summary_value {
    font-size: 4rem;
    font-weight: 700;
    color: #1976d2;
}

.passenger_summary .summary_unit {
    font-size: 1.8rem;
    color: #666;
}