/*==============================*/
/*===          map           ===*/
/*==============================*/

/* map header */
.map_header_container_wrapper {
    border-bottom: solid 1px #999;
}
.header_logo_nav_wrapper.map {
    height: 40px;
}
.header_logo_nav_wrapper.map .header_logo_wrapper {
    width: 200px;
}
.header_logo_nav_wrapper.map .header_title_wrapper h1 {
    color: #333;
}
.header_logo_nav_wrapper.map .header_detail_btn_wrapper {
}


h1 {
    margin: 0;
    padding: .4rem 0 .1rem 0;
    text-align: center;
    font-size: 1.5rem;
    color: #eee;
}
.header_title_wrapper h1 a,
.header_title_wrapper h1 a:hover {
    color: inherit;
}



.map_menus_wrapper {
    display: flex;
}
.map_area {
    width: calc(100% - 400px);
    background-color: #fff;
    order: 2;
    z-index: 10;
    transition: margin .3s;
}
.main_wrapper {
    width: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    order: 1;
}


#map {
    height: 100vh;
    width: 100%;
}






.tab_wrapper {
    padding: 5px 5px 0 5px;
}
.tab_wrapper .nav-item {
    width: 50%;
    text-align: center;
}
.nav-tabs .nav-link {
    padding: .25rem 0 .3rem;
    color: #0f528c;
    font-size: .9rem;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: #0e5490;
    color: #FFF;
}
#ban_menus {
    margin-top: .8rem;
}
.menu_area {
    width: 300px;
    min-height:1560px;
    float: left;
    background-color: #fff;
    border-right: 1px solid #AAA;
}
.map_top {
    min-height: 75px;
    border-bottom: 1px solid #AAA;
}

.map_bottom {
    text-align: right;
    font-size: .8rem;
    height: 20px;
}
@media (max-width: 714px) {
    .menu_area {
        width: 100%;
        float: none;
        background-color: #fff;
        border-right: none;
    }
    .map_area {
        width: 100%;
        height: 450px;
        float: none;
        background-color: #fff;
    }
    .map_top {
        margin-top: 1rem;
    }
}
.menu_title {
    text-align: center;
    background-color: #FB9966;
    padding: .2rem 0;
    margin-bottom: .4rem;
    font-weight: bold;
}
.birthday_box select {
    font-size: 16px !important;
    transform: scale(0.8);
}
@media (max-width: 991px) {
    .birthday_box label {
        font-size: .8rem;
    }
    .birthday_box #sct_year {
        margin-left: -5px;
    }
}
@media (max-width: 767px) {
    .birthday_box label {
        font-size: inherit;
    }
}

.ban_super_wrapper {
    overflow: hidden;
    position: relative;
    width: 300px;
    margin: auto;
}
#ban {
    overflow: hidden;
    text-align: center;
}
.ban_box {
    overflow: hidden;
    margin: 0;
}
.ban_span_time {
    line-height: 2;
}
.ban_needle {
    position: absolute;
    top: 49%;
    left: 42%;
}
.chg_birthday_box {
    margin: .3rem 0 .5rem 0;
}
.ninestar_box {
    margin: .3rem 0 .6rem 0;
    font-size: .9rem;
}
.date_ctrl_box {
    width: 300px;
    margin: auto;
}
.ytd_box,
.tmr_box {
    width: 25%;
    text-align: center;
    margin-top: .1rem;
}
.date_box {
    width: 50%;
    text-align: center;
    margin-bottom: .1rem;
    font-size: 16px;
    transform: scale(0.9);
    padding-top: 1px;
}
#ban_btn {
    width: 300px;
    margin: auto;
    margin-bottom: .5rem;
}
.bef_ban_box,
.nxt_ban_box {
    width: 50%;
    text-align: center;
    margin-top: .2rem;
}
.bef_ban_box {
    text-align: left;
    padding-left: 10px;
}
.nxt_ban_box {
    text-align: right;
    padding-right: 10px;
}
.map_ctrl_lbl_box {
    width: 300px;
    margin: auto;
}
.map_ctrl_lbl_box label {
    margin: .3rem .5rem;
}
.map_ctrl_lbl_box label.circle_radius_rabel {
    margin-left: -2rem;
}
.map_ctrl_distance_box {
    margin: .3rem .5rem;
}
/*
.map_ctrl_btn_box {
    text-align: center;
}
.map_ctrl_btn_box button {
    margin: .3rem 0;
}
*/
.map_ctrl_btn_box div {
    display: inline-block;
    margin-left: .5rem;
    margin-top: .5rem;
    font-size: .9rem;
}
.map_ctrl_btn_box div:last-child {
    margin-bottom: .5rem;
    margin-top: 0
}
.map_ctrl_btn_box div.spacer {
    margin-left: -0.0rem;
    margin-right: -0.1rem;
}
.map_ctrl_btn_box div button {
    font-size: 0.8rem;
}
.map_ctrl_btn_box #circle_distance {
    width: 70px;
}
#henkaku_year,
#circle_distance {
    font-size: 16px;
    transform: scale(0.8);
}

.map_ctrl_btn_br {
    display: none;
}
@media (max-width: 410px) {
    .map_top {
        /*height: 70px;*/
    }
    .map_ctrl_btn_br {
        /*display: inline;*/
    }
}

#adrs_menus {
    margin-top: .5rem;
}
#adrs_menus .input_forms {
    padding: 5px;
    text-align: center;
    padding-bottom: 0;
}
#adrs_menus .input_forms #address_input {
    display: block;
    width: 90%;
    margin: 0 auto;
    font-size: 16px;
}
#adrs_menus .input_forms button {
    margin: .5rem .2rem;
}