﻿:root {
    --main-bg-color: #1f4e78;
    --main-btn-color: #154b97;
    --main-btnhover-color: #103A75;
}

body {
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 420px;
}

/* 入力共通 */
.form-control {
    height: 26px;
}

.btn-primary {
    background-color: var(--main-btn-color);
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--main-btnhover-color);
    }

/* Responsive: Portrait tablets and up */
/*@media screen and (min-width: 768px) {
.jumbotron {
    margin-top: 20px;
}
.body-content {
    padding: 0;
}
}*/
.main-navbar {
    background-color: var(--main-bg-color);
}

.language {
    float: right;
    padding: 0;
    margin: 0 1rem 0 0;
}

    .language select {
        font-size: 0.8rem;
        padding: 0;
        width: 14rem;
        padding: 0.2rem 1rem 0.2rem 1rem;
        border-radius: 13px !important;
        vertical-align: middle;
    }

.jumbotron {
    margin-top: 1rem;
    margin-bottom: 1.6rem;
}

/* 必須入力バッジ */
.badge-req {
    float: right;
    background-color: #ff0000;
    margin-top: 3px;
}



#loading {
    display: table;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: 0.9;
}

    #loading .loadingMsg {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        padding-top: 200px;
        background: url("../img/common/loading.gif") center center no-repeat;
    }


.top_message {
    font-size: 1.2rem;
    text-align: center;
    color: firebrick;
}

.dispatch_error_comment {
    font-size: 1.2rem;
    text-align: center;
    margin: 20px 0 20px 0;
}

.dispatch_error_message {
    font-size: 1.2rem;
    text-align: center;
    font-weight: bold;
    margin: 0 0 20px 0;
}

.cancel_error_message {
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    margin: 0 0 20px 0;
    color: firebrick;
}


.notice {
    display: block;
    font-size: 80%;
    line-height: 1.5em;
}

.content_group {
    width: 100%;
    margin-left: auto;
    margin-bottom: 12px;
}

    .content_group .row {
        padding: 1px 1px 1px 1px;
        border: 1px solid #cccccc;
        border-collapse: collapse;
        margin-bottom: -1px;
    }


.col_th {
    min-height: 28px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: #ffffff;
    background-color: #144c9c;
    display: flex;
    align-items: center;
}

.col_th_text {
    width: 100%;
}

.col_td {
    padding-top: 4px;
    padding-bottom: 4px;
}

.content_group select {
    font-size: 80%;
    padding: 0;
}

.content_group .radio {
    margin: 0 0 0 0;
    padding-left: 26px;
}

    .content_group .radio label {
        margin: 0 6px 0 6px;
    }

@media screen and (min-width: 992px) {

    .row-eq-height {
        display: flex;
        /*flex-wrap: wrap;*/
    }

    .col_th {
        /* padding-top: 13px;*/
        border-right: none;
    }
}

.cartype tr {
    height: 40px;
}

.cartype td {
    border: none;
    padding: 0px 8px 0px 8px;
}

.carImage {
    height: 150px;
}

.inq_span {
    padding: 4px 4px 0 4px;
}

.inq-table1 {
    width: 100%;
}

    .inq-table1 input {
        max-width: 100%;
    }

.message_area {
    padding-top: 90px;
    padding-bottom: 90px;
}

/* 送迎ルートタイトル */
.inq-title2 {
    color: #333;
    text-align: center;
    margin: 1rem 0 1.5rem 0;
}


/* 入力メッセージ */
.inq-title3 {
    color: #333;
    font-size: 1.6rem;
    font-weight: normal;
    text-align: center;
    margin: 1rem 0 1rem 0;
}

/* 中項目タイトル */
.inq-title4 {
    color: #333;
    font-size: 1.4rem;
    font-weight: normal;
}

/* 小項目タイトル */
.inq-title5 {
    color: #333;
    font-size: 1.2rem;
    font-weight: normal;
    margin-bottom: 4px;
}

.inq-table1 {
    width: 100%;
}

    .inq-table1 input {
        max-width: 100%;
    }

.inq-table2 td {
    padding: 2px 6px 2px 4px;
}

.inq-table3 td {
    padding: 2px 6px 2px 4px;
}


/*.inq-table4 {
    min-width: 500px;
}*/

.content_group select {
    font-size: 80%;
    padding: 0;
}

.content_group .radio {
    margin: 0 0 0 0;
    padding-left: 16px;
}

    .content_group .radio label {
        margin: 0 6px 0 6px;
    }

.inq-sends {
    text-align: center;
}

.btn_main {
    width: 220px;
    height: 50px;
    margin: 20px;
}

.link_btn {
    display: inline-block;
    border-radius: 5%;
    width: 220px;
    height: 50px;
    margin: 20px;
    background: #d3d3d3;
    padding-top: 0.75rem;
}

/* ステップ情報 */
.step_area {
    width: 100%;
    margin: 1rem 0 1rem 0;
}

.step {
    text-align: center;
    color: #333;
    margin: 0 0 8px 0;
    background-color: #E0E0E0;
}

.step_current {
    color: #ffffff;
    background-color: #144c9c;
}

#map1 {
    width: 100%;
    height: 320px;
    margin: 8px 0 8px 0;
}

.modal-map {
    width: 100%;
    height: 360px;
    margin: 8px 0 8px 0;
}

#map3 {
    width: 100%;
    height: 280px;
    margin: 8px 0 8px 0;
}

.mapArea {
    width: 100%;
    height: 280px;
    margin: 8px 0 8px 0;
}

.footerFixed {
    min-height: 100vh; /* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */
    position: relative; /* ←相対位置 */
    padding-bottom: 60px; /* ←フッターの高さを指定 */
    box-sizing: border-box;
    /* ↑ヘッダーやフッターを含むすべての要素の高さ＝min-height:100vhになるように指定 */
}

footer {
    border-top: 1px solid #cccccc;
    position: absolute; /* ←絶対位置 */
    bottom: 0;
    /* 以下 背景色やテキストカラーなどはお好みで指定してください */
    /*background: #1d1b3f;*/
    /*color: #fff;*/
    text-align: center;
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/************************************
    タブ
*************************************/
.tabs {
    padding-bottom: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
}

.tab_item_group {
    width: 100%;
    display: table;
    table-layout: fixed;
}

.tab_item {
    height: 40px;
    border-bottom: 3px solid white;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    display: table-cell;
    background-color: #17a2b8;
    color: #ffffff;
}

    .tab_item.selected {
        background-color: #144c9c;
        color: #ffffff;
    }

    .tab_item:hover {
        opacity: 0.75;
    }

.tab_content {
    padding: 10px 20px 0;
    clear: both;
    overflow: hidden;
}

/************************************
    タクシー用
*************************************/
.taxi .body-content {
    padding-left: 0;
    padding-right: 0;
}

.taxi .pickupContents {
    z-index: 2;
    position: absolute;
    width: 100%;
}

.taxi .mapContents {
    z-index: 1;
    width: 100%;
    position: relative;
}

.taxi .orderContents {
    z-index: 3;
    position: absolute;
    right: 255px;
    bottom: 58px;
}

.taxi .orderDetailContents {
    z-index: 99;
    position: absolute;
    right: 35px;
    bottom: 58px;
}

.taxi .favContents {
    position: absolute;
    top: 0;
    height: 100%;
}
/*.taxi .optionContents {
    z-index: 2;
    position: absolute;
    width: 100%;
}*/


.taxi .pickup-notification {
    background-color: #FFDD27;
    /*padding: 15px 10px 15px 10px;*/
}

.taxi .pickup-subbar {
    background-color: #FEFEFE;
    /*padding: 15px 10px 15px 10px;*/
}

.taxi .pickup-searchbar {
    background-color: #F2F2F2;
    /*padding: 15px 10px 15px 10px;*/
}

.taxi .map {
    height: 300px;
}

.taxi select {
    font-size: 80%;
    padding: 0;
}

.taxi .pickup-searchTextBox {
    width: 70%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.taxi .pickup-searchTextBox_sp {
    width: 75%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.taxi .pickup-searchButton {
    color: #eeeeee;
    background-color: #144c9c;
    border-color: #0A0624;
    font-weight: bold;
    text-align: center;
}

.taxi .pickup-searchButton_sp {
    width: 20%;
    color: #eeeeee;
    background-color: #144c9c;
    border-color: #0A0624;
    font-weight: bold;
    text-align: center;
}

.taxi .orderButton {
    color: #eeeeee;
    background-color: #144c9c;
    border-color: #0A0624;
    font-weight: bold;
    text-align: center;
    padding: 20px 0px 20px 0px;
}

.taxi .orderButtonColor {
    color: #eeeeee;
    background-color: #144c9c;
    border-color: #0A0624;
    font-weight: bold;
}

.taxi .orderButton:hover,
.taxi .orderButton:focus,
.taxi .orderButton:active,
.taxi .orderButton.active {
    color: #144c9c;
    background-color: #FFDD27;
    border-color: #0A0624;
}

.taxi .orderButtonDisabled {
    color: #eeeeee;
    background-color: #696764;
    border-color: #0A0624;
    font-weight: bold;
    padding: 20px 30px 20px 30px;
}

    .taxi .orderButtonDisabled:hover,
    .taxi .orderButtonDisabled:focus,
    .taxi .orderButtonDisabled:active,
    .taxi .orderButtonDisabled.active {
        color: #eeeeee;
        background-color: #696764;
        border-color: #0A0624;
    }

.taxi .favContents label.favMarker {
    width: 160px;
    text-align: center;
    vertical-align: middle;
    background: #144c9c;
    position: absolute;
    display: block;
    height: 80px;
    cursor: pointer;
    color: #FFFFFF;
    z-index: 1;
    top: 100px;
    left: 0;
    transform-origin: center left;
    transform: rotate(90deg);
    padding: 8px 8px 8px 8px;
}

.taxi .favContents input:checked ~ label.favMarker {
    margin: 0 350px;
}

.taxi .favContents label.favMarker:hover {
    background: #0A0624;
}

.taxi .favContents label.favMarker:before {
    color: #FFFFFF;
    font-family: "FontAwesome";
    content: "★";
}

.taxi .favContents input:checked ~ label.favMarker::before {
    color: #FFFFFF;
    font-family: "FontAwesome";
    content: "★";
}

.taxi .favContents .ac-1 {
    display: none;
}

.taxi .favContents .favmenu {
    background: rgba(255, 255, 255, 1);
    overflow: hidden;
    width: 0px;
    position: absolute;
    z-index: 2;
    /*z-index: 10;*/
    height: 100%;
    top: 0px;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}

/*.taxi .favmenu-padding {
    padding: 0 15px 0 15px;
}

.taxi .favmenu-padding .row {
    padding: 3px 0 3px 0;
}*/

.taxi .favContents input:checked ~ div.favmenu {
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}

.taxi .favContents input:checked ~ div.favmenu {
    width: 350px;
}


.taxi .optionContents label.optionMarker {
    /*width: 100px;*/
    text-align: center;
    background: #144c9c;
    position: absolute;
    display: block;
    /*height: 30px;*/
    cursor: pointer;
    color: #FFFFFF;
    z-index: 50;
    right: 340px;
    bottom: 0px;
    margin-bottom: 0px;
    padding: 6px 22px 6px 22px;
}

.taxi .optionContents input:checked ~ label.optionMarker {
    margin: 0 0px 210px;
}

.taxi .optionContents label.optionMarker:hover {
    background: #0A0624;
}

.taxi .optionContents label.optionMarker:after {
    color: #FFFFFF;
    font-family: "FontAwesome";
    content: "▲";
}

.taxi .optionContents input.ac-2:checked ~ label.optionMarker::after {
    color: #FFFFFF;
    font-family: "FontAwesome";
    content: "▼";
}

.taxi .optionContents .ac-2 {
    display: none;
}

.taxi .optionContents div.optionmenu {
    display: none;
    background: rgba(255, 255, 255, 1);
    /*overflow: hidden;*/
    width: 100%;
    height: 0px;
    padding: 0 15px 0 15px;
    position: absolute;
    z-index: 20;
    bottom: 0;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}

.taxi .optionContents input.ac-2:checked ~ div.optionmenu {
    display: block;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}

.taxi .optionContents input.ac-2:checked ~ div.optionmenu {
    height: 210px;
}

/* Pickup mobile */
.taxi .mobile-favContents label.favMarker {
    /*width: 100px;*/
    text-align: center;
    vertical-align: middle;
    background: #144c9c;
    position: absolute;
    display: block;
    /*height: 60px;*/
    cursor: pointer;
    color: #FFFFFF;
    z-index: 5;
    top: 100px;
    left: 0;
    transform-origin: center left;
    transform: rotate(90deg);
}

.taxi .mobile-favContents input:checked ~ label.favMarker {
    margin: 0 80%;
}

.taxi .mobile-favContents label.favMarker:hover {
    background: #0A0624;
}

.taxi .mobile-favContents label.favMarker:before {
    color: #FFDD27;
    font-family: "FontAwesome";
    content: "★";
}

.taxi .mobile-favContents input:checked ~ label.favMarker::before {
    color: #FFDD27;
    font-family: "FontAwesome";
    content: "★";
}

.taxi .mobile-favContents .ac-1 {
    display: none;
}

.taxi .mobile-favContents .mobile-favmenu {
    background: rgba(255, 255, 255, 1);
    overflow: hidden;
    width: 0px;
    position: absolute;
    z-index: 10;
    height: 100%;
    top: 0px;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}

.taxi-table-header {
    background-color: #144c9c;
    color: white;
}

/*.taxi .mobile-favmenu-padding {
    padding: 0 15px 0 15px;
}

.taxi .mobile-favmenu-padding .row {
    padding: 3px 0 3px 0;
}*/

.taxi .mobile-favContents input:checked ~ div.mobile-favmenu {
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}

.taxi .mobile-favContents input:checked ~ div.mobile-favmenu {
    width: 80%;
}


/************************************
    GridView選択用
*************************************/
.bg-selected-gridrow {
    background-color: #EEEEEE;
}

.bg-not-selected-gridrow {
    background-color: #FFFFFF;
}

.default-cursor {
    cursor: default
}


/************************************
    受注履歴 OrderTypeラベル
*************************************/
.navbar {
    min-height: 42px;
}

.order-label {
    display: inline-block;
    vertical-align: middle;
    font-weight: 400;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}

.order-label-taxi {
    background-color: #F0F0F0;
}

.order-label-airporttransfer {
    background-color: #F0F8FF;
}

.order-label-sightseeing {
    background-color: #FFF0F5;
}

.order-label-otherhire {
    background-color: #FFFACD;
}

.order-label-golf {
    background-color: #f0fff0;
}

.order-label-modelcourse {
    background-color: #faf0e6;
}

.order-label-sightseeingcourse {
    background-color: #e6e6fa;
}
