@charset "utf-8";
/*CSS Document　注文中画面*/
/*-------------------------------*/
/*配車画面*/
.wrapAll.disp02 .contAreaOrder02 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 10px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.wrapAll.disp02 .contAreaOrder01 {
  position: relative;
  display: flex;
  flex-direction: column;
}
/*スマホ用：配車画面*/
@media screen and (max-width:799px) {
  .wrapAll.disp02 .contAreaOrder02 {
    flex-direction: column-reverse;
  }
  .wrapAll.disp02.showMap .orderBody:not(.show) + #order-kakunin .contAreaOrder01, .wrapAll.disp02.pageId-taxiOrderConfirm #order-kakunin .contAreaOrder01 {
    height: calc(30vh - 36px);
    /*マイナス：クーポンボタンの初期表示の高さ*/
  }
  .wrapAll.disp02.showMap .orderBody.show + #order-kakunin .contAreaOrder01 {
    height: 18vh;
  }
  .wrapAll.disp02 .contAreaOrder01.wrapOrderInfo {
    height: auto;
    padding: clamp(10px, 1.6vh, 20px) clamp(15px, 3.6vw, 20px);
  }
  /*ご乗車ありがとうございます。*/
  .wrapAll.disp02.pageId-taxiOrderRide .contAreaOrder01 {
    min-height: 30vh;
  }
  .wrapAll.disp02.pageId-taxiOrderRide .contAreaOrder01.wrapOrderInfo {
    min-height: inherit;
  }
}
/*PC用：配車画面*/
@media screen and (min-width:800px) {
  .wrapAll.disp02 .contAreaOrder01 {
    border-bottom: 1px solid #dedede;
  }
  #order-kakunin .contAreaOrder01 {
    max-height: calc(96vh - 670px);
  }
  .wrapAll.disp02.pageId-taxiOrderConfirm #order-kakunin .contAreaOrder01 {
    max-height: calc(96vh - 495px);
  }
  .wrapAll.disp02.pageId-taxiOrderWait_1 #order-kakunin .contAreaOrder01, .wrapAll.disp02.pageId-taxiOrderWait_2 #order-kakunin .contAreaOrder01 {
    max-height: calc(96vh - 690px);
  }
  @-moz-document url-prefix() {
    #order-kakunin .contAreaOrder01 {
      height: 100%;
    }
  }
  /*PCで高さが900px以下*/
  @media screen and (max-height: 900px) {
    #order-kakunin .contAreaOrder01 {
      max-height: calc(96vh - 560px);
    }
    .wrapAll.disp02.pageId-taxiOrderConfirm #order-kakunin .contAreaOrder01 {
      max-height: calc(96vh - 420px);
    }
    .wrapAll.disp02.pageId-taxiOrderWait_1 #order-kakunin .contAreaOrder01, .wrapAll.disp02.pageId-taxiOrderWait_2 #order-kakunin .contAreaOrder01 {
      max-height: calc(96vh - 590px);
    }
  }
  /*PCで高さが800px以下*/
  @media screen and (max-height: 800px) {
    #order-kakunin .contAreaOrder01 {
      max-height: calc(97vh - 540px);
    }
    .wrapAll.disp02.pageId-taxiOrderConfirm #order-kakunin .contAreaOrder01 {
      max-height: calc(97vh - 390px);
    }
    .wrapAll.disp02.pageId-taxiOrderWait_1 #order-kakunin .contAreaOrder01, .wrapAll.disp02.pageId-taxiOrderWait_2 #order-kakunin .contAreaOrder01 {
      max-height: calc(97vh - 570px);
    }
  }
  /*PCで高さが700px以下*/
  @media screen and (max-height: 700px) {
    #order-kakunin .contAreaOrder01 {
      max-height: calc(98vh - 495px);
      min-height: 80px;
    }
    .wrapAll.disp02.pageId-taxiOrderConfirm #order-kakunin .contAreaOrder01 {
      max-height: calc(98vh - 360px);
      min-height: 80px;
    }
    .wrapAll.disp02.pageId-taxiOrderWait_1 #order-kakunin .contAreaOrder01, .wrapAll.disp02.pageId-taxiOrderWait_2 #order-kakunin .contAreaOrder01 {
      max-height: calc(98vh - 520px);
      min-height: 80px;
    }
  }
  .wrapOrderInfo {
    padding: 10px 0;
  }
  .wrapAll.disp02 .contAreaOrder01.wrapOrderInfo {
    padding: clamp(20px, 3vh, 30px);
  }
}
/*-------------------------------*/
.wrapPanelOrder {
  display: flex;
  flex-direction: column;
  position: relative;
}
.panelBase {
  display: flex;
  flex-direction: column;
  position: relative;
  font-size: 12px;
}
.pageId-taxiOrderSelect .panelBase {
  padding-bottom: 1px;
}
.wrapAll.disp01 .wrapPanelOrder .orderBody {
  background: #efefef;
}
.wrapPanelOrder .orderOption {
  padding: 5px 0 0;
}
.wrapPanelOrder .orderBtn {
  background: #efefef;
}
@media screen and (min-width:800px) {
  .wrapAll.disp01 .wrapPanelOrder .panelBase {
    flex-direction: column-reverse;
  }
  .wrapPanelOrder .orderInitial {
    padding: 30px 0;
  }
  .wrapAll.disp01 .wrapPanelOrder .orderInitial {
    padding-bottom: 25px;
  }
  .wrapPanelOrder .orderInitial.orderBtn {
    padding: 10px 0 20px 0;
    padding: 0;
  }
  .wrapPanelOrder .orderOption {
    display: flex;
    flex-direction: column-reverse;
    padding: 10px 0 30px 0;
    background: #efefef;
    border-top: 1px solid #d2d2d2;
  }
  .wrapAll.disp01 .wrapPanelOrder .orderOption {
    padding: 20px 0;
  }
  .wrapAll.disp01 .panelBase .collapse:not(.show), .wrapAll.disp02 .panelBase .collapse:not(.show), .wrapAll.disp03.showMap .panelBase .collapse:not(.show), #shioriItem-taximenu.collapse:not(.show) {
    display: block;
  }
  .wrapAll.disp01 .panelBase button[data-bs-toggle="collapse"], .wrapAll.disp03.showMap .panelBase button[data-bs-toggle="collapse"] {
    pointer-events: none;
  }
}
/*-------------------------------*/
/*入力フォーム　基本*/
.layInput01 input[type="text"], .layInput01 input[type="date"], .layInput01 input[type="time"], .layInput01 select, .layInput01 button {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  position: relative;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1;
}
.layInput01 button {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  font-size: 10px;
  color: #656565;
  line-height: 1;
  border: 1px solid #dedede;
  border-radius: 5px;
}
.layInput01 input[type=date] {
  position: relative;
}
.layInput01 input[type=date]::-webkit-calendar-picker-indicator, .layInput01 input[type=time]::-webkit-calendar-picker-indicator {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
@media screen and (max-height:850px) {
  .layInput01 input[type="text"], .layInput01 input[type="date"], .layInput01 input[type="time"], .layInput01 select, .layInput01 button {
    height: clamp(30px, 4.5vh, 38px);
  }
}
/*-------------------------------*/
/*入力フォーム　レイアウト*/
.layInput01 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
}
.layInput01 + .layInput01 {
  margin-top: 4px;
}
.layInput01 dt {
  width: 80px;
  padding: 0 15px 0 0;
  text-align: right;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}
.layInput01 dt.adjLeft {
  text-align: left;
}
.layInput01 dd {
  position: relative;
  width: calc(100% - 80px);
  font-size: 13px;
}
.layInput01 dd a {
  display: block;
  width: 100%;
  padding-right: 30px;
}
/*一体型：支払方法、クーポン*/
.layInput01.adjBond {
  height: 38px;
  background: #ffffff;
  border: 1px solid #dedede;
  border-radius: 5px;
}
.contAreaOrder02 + .layInput01.adjBond {
  margin-top: 8px;
}
.layInput01.adjBond dt {
  width: 98px;
}
.layInput01.adjBond dd, .orderOption .layInput01.adjBond dd {
  position: relative;
  margin-left: 10px;
  width: auto;
  width: calc(100% - 110px);
  height: 100%;
}
@media screen and (max-width:360px) {
  .layInput01.adjBond dd, .orderOption .layInput01.adjBond dd {
    flex-grow: 1;
  }
}
.layInput01.adjBond dd:before, .orderOption .layInput01.adjBond dd:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -13px;
  width: 1px;
  height: 26px;
  background: #dedede;
}
.layInput01.adjBond dd .wrapFormTyp01 {
  height: 100%;
  border-radius: 0;
}
.layInput01.adjBond dd a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 10px;
  cursor: pointer;
}
/*クーポン選択済み：クーポンボタンの下に規約への同意チェックエリアを連続して表示する*/
.layInput01.adjBond.couponSelected {
  border-radius: 5px 5px 0 0;
}
.layInput01.adjBond.couponSelected + .btnTypCheck {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  height: 38px;
  background: #ffffff;
  border-radius: 0 0 5px 5px;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  border-left: 1px solid #dedede;
}
@media screen and (max-width:360px) {
  .layInput01 dt {
    width: 60px;
    padding: 0 10px 0 0;
    font-size: 11px;
  }
  .layInput01.adjBond dt {
    width: 78px;
  }
  .layInput01 dd {
    width: calc(100% - 60px);
    font-size: 12px;
  }
}
@media screen and (min-width:800px) {
  orderInitial .layInput01 dt {}
  .layInput01 dt {
    width: 72px;
  }
  .orderOption .layInput01 dd {
    width: calc(100% - 72px);
  }
}
/*目的地入力済みの表示で使用*/
.layInput01 dd .status-entered a {
  width: calc(100% - 38px);
  padding-right: 0;
}
/*確認画面でのクーポン 入力済みで使用*/
.layInput01.adjBond dd .status-entered a {
  width: 100%;
  padding-right: 30px;
}
.layInput01 dd.status-entered {
  display: flex;
}
@media screen and (min-width:800px) {
  .layInput01 + .layInput01 {
    margin-top: 20px;
  }
}
@media screen and (max-height:850px) {
  .layInput01 + .layInput01 {
    margin-top: clamp(4px, 1vh, 10px);
  }
}
@media screen and (max-height:700px) {
  .layInput01 + .layInput01 {
    margin-top: clamp(4px, 0.5vh, 10px);
  }
}
.wrapInputPoint .layInput01 + .layInput01 {
  margin-top: 0;
}
/*入力フォーム　装飾*/
.wrapFormTyp01 {
  display: flex;
  position: relative;
  background: #ffffff;
  border: 1px solid #dedede;
  border-radius: 5px;
  overflow: hidden;
}
/*一体型：支払方法、クーポン*/
.layInput01.adjBond .wrapFormTyp01 {
  background: none;
  border: none;
}
.wrapInputPoint .wrapFormTyp01 {
  margin-top: 0;
}
.lay-width-50pct {
  width: 50%;
}
.wrapFormTyp01 .status-indelible, .wrapFormTyp01 .status-unspecified, .wrapFormTyp01 .status-entered {
  display: flex;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.wrapFormTyp01 .status-indelible .layIconArrow {
  position: relative;
  display: block;
  width: 38px;
}
.wrapFormTyp01 .status-indelible a:after, .wrapFormTyp01 .status-unspecified a:after, .layInput01.adjBond .wrapFormTyp01 .status-entered a:after, .wrapFormTyp01 .status-indelible .layIcon:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -5px;
  width: 6px;
  height: 10px;
  background: url("../img/ico_arrow.svg") no-repeat 0 0 / 6px 10px;
  z-index: 1;
}
/*出発地と目的地*/
.wrapInputPoint {
  position: relative;
  background: url("../img/line_01.svg") no-repeat 5px 50% / 1px auto;
}
.layIconOrigin01 {
  background: url("../img/ico_point_departure.svg") no-repeat 0 30% / 12px 12px;
}
.layIconDestination01 {
  background: url("../img/ico_point_destination.svg") no-repeat 0 30% / 12px 14px;
}
.layIconOrigin02 {
  padding: 0 0 0 16px;
  background: url("../img/ico_point_departure_white.svg") no-repeat 0 50% / 12px 12px;
}
.layIconDestination02 {
  padding: 0 0 0 16px;
  background: url("../img/ico_point_destination_white.svg") no-repeat 0 50% / 12px 14px;
}
/*出発地と目的地　テキスト入力欄のようなリンクボタン*/
.wrapInputPoint .layInput01.nth-01 + .layInput01.nth-02 {
  margin-top: -1px;
}
.wrapInputPoint .layInput01.nth-01 .wrapFormTyp01 {
  border-radius: 5px 5px 0 0;
}
.wrapInputPoint .layInput01.nth-02 .wrapFormTyp01 {
  border-radius: 0 0 5px 5px;
}
.wrapInputPoint .layInput01.nth-02 .wrapFormTyp01:before {
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  left: 0;
  width: 10px;
  height: 3px;
  background: #ffffff;
}
.wrapInputPoint .likeBtnPoint {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 5px 0 15px;
}
@media screen and (max-width:340px) {
  .wrapInputPoint .likeBtnPoint {
    padding-right: 0;
    padding-left: 10px;
  }
}
@media screen and (max-height:850px) {
  .wrapInputPoint .likeBtnPoint {
    height: clamp(28px, 5.5vh, 48px);
  }
}
/*出発地と目的地　入れ替えボタン*/
.wrapInputPoint .layIconChange {
  position: absolute;
  top: 50%;
  left: 50px;
  margin-top: -10px;
}
.wrapInputPoint .layIconChange button {
  width: 50px;
  height: 20px;
  padding: 0 5px 0 23px;
  text-align: center;
  font-size: 10px;
  background: #ffffff url("../img/ico_change.svg") no-repeat 5px 50% / 16px auto;
  /*border: 1px solid #dedede;*/
  border-radius: 6px;
  transition: background-color 0.2s ease-out, border 0.2s ease-out;
}
.wrapInputPoint .layIconChange button:hover {
  background-color: #e8f0ff;
  transition: background-color 0.2s ease-out;
}
@media screen and (min-width:800px) {
  .wrapInputPoint .layIconChange {
    left: 60px;
    margin-top: -18px;
  }
  .wrapInputPoint .layIconChange button {
    width: 36px;
    height: 36px;
    padding: 17px 0 0;
    background-position: 50% 4px;
  }
}
@media screen and (max-width:360px) {
  .wrapInputPoint .layIconChange {
    left: 30px;
  }
}
/*予約、車種選択、支払方法*/
.layIconYoyaku:before, .layIconCar:before, .layIconPay:before, .layIconCoupon:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 12px;
  margin-top: -12px;
  width: 27px;
  height: 24px;
}
.layIconYoyaku:before {
  background: url("../img/ico_yoyaku_palegray.svg") no-repeat 0 0 / 27px auto;
}
.layIconCar:before {
  background: url("../img/ico_order_palegray.svg") no-repeat 0 0 / 27px auto;
}
.layInput01 dt.layIconPay, .layInput01 dt.layIconCoupon {
  padding-left: 45px;
  padding-right: 0;
}
.layIconPay:before {
  background: url("../img/ico_pay_palegray.svg") no-repeat 0 0 / 27px 25px;
}
.layIconCoupon:before {
  background: url("../img/ico_coupon_palegray.svg") no-repeat 0 0 / 24px 25px;
}
.layInput01 .layIconYoyaku input, .layInput01 .layIconCar input {
  padding-left: 50px;
  text-overflow: ellipsis;
}
@media screen and (max-width:360px) {
  .layIconYoyaku:before, .layIconCar:before, .layIconPay:before, .layIconCoupon:before {
    left: 8px;
    margin-top: -7px;
    background-size: 16px auto;
  }
  .layIconPay:before, .layIconCoupon:before {
    margin-top: -10px;
    background-size: 18px auto;
  }
  .layInput01 dt.layIconPay, .layInput01 dt.layIconCoupon {
    padding-left: 0;
  }
  .layInput01 .layIconYoyaku input, .layInput01 .layIconCar input {
    padding-left: 30px;
  }
}
/*入力内容削除ボタン*/
.layIconDelete {
  flex-shrink: 0;
  width: 38px;
  height: 100%;
}
.layIconDelete button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff url("../img/ico_cross_palegray.svg") no-repeat 50% 50% / 10px 10px;
  border: none;
  border-radius: 0;
}
.layIconDelete button:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -10px;
  width: 1px;
  height: 20px;
  background: #dedede;
}
/*-------------------------------*/
.disp01 .contAreaOrder01 {
  padding: 4px 20px 0;
}
@media screen and (min-width:800px) {
  .disp01 #shiori-02 .contAreaOrder01 {
    padding-top: 14px;
    padding-bottom: 10px;
  }
  .disp01 .layInput01 + .layInput01 {
    margin-top: 14px;
  }
}
.contAreaOrder01 + .opItemBtn {
  padding-top: 5px;
}
@media screen and (max-width:799px) {
  .disp01 .opItemBtn {
    padding-left: clamp(15px, 4vw, 20px);
    padding-right: clamp(15px, 4vw, 20px);
  }
}
@media screen and (min-width:800px) {
  .opItemBtn {
    padding: 0 30px 10px;
  }
  .opItemBtn.adjWide100 {
    padding: 0 0 10px;
  }
  .disp01 .opItemBtn {
    padding-bottom: 25px;
  }
  .contAreaOrder01 + .opItemBtn {
    padding-top: 0;
  }
}
@media screen and (max-height:850px) {
  .contAreaOrder01 {
    padding-top: clamp(2px, 0.5vh, 5px);
    padding-bottom: clamp(2px, 0.5vh, 5px);
  }
}
@media screen and (max-height:700px) {
  .contAreaOrder01 {
    padding-top: clamp(2px, 0.25vh, 5px);
    padding-bottom: clamp(2px, 0.25vh, 5px);
  }
}
/*-------------------------------*/
/*タクシーを呼ぶ機能　初期表示*/
.orderInitial {
  display: flex;
  flex-direction: column-reverse;
}
@media screen and (max-width:799px) {
  .orderInitial {
    flex-direction: column;
  }
}
/*-------------------------------*/
/*注文データ表示*/
table.taxiOrderData {
  width: 100%;
}
.layInput01.adjBond + table.taxiOrderData {
  margin-top: 15px;
}
table.taxiOrderData th {
  padding: 10px 0 8px;
  font-size: 10px;
  color: #174e9e;
  border-top: 1px solid #dedede;
  white-space: nowrap;
}
table.taxiOrderData td {
  padding: clamp(5px, 1vh, 10px) 0 clamp(5px, 1vh, 8px) 15px;
  font-size: clamp(12px, 1.4vh, 14px);
  border-top: 1px solid #dedede;
}
table.taxiOrderData tr:first-child th, table.taxiOrderData tr:first-child td {
  padding-top: 0;
  border-top: none;
}
table.taxiOrderData tr:last-child th, table.taxiOrderData tr:last-child td {
  padding-bottom: 0;
}
table.taxiOrderData td div.lay {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
table.taxiOrderData.history tr.layTypAddOption td div.lay {
  flex-shrink: 0;
  width: auto;
}
@media screen and (max-width:350px) {
  table.taxiOrderData.history tr.layTypAddOption td .layAdd01 div.lay {
    margin: 0 0 0 5px;
  }
}
/*注文データ表示　履歴詳細*/
table.taxiOrderData.history tr, table.taxiOrderData.history th, table.taxiOrderData.history td {
  display: block;
}
table.taxiOrderData.history th, table.taxiOrderData.history tr:first-child th, table.taxiOrderData.history tr:last-child th {
  padding: 20px 20px 0;
}
table.taxiOrderData.history td, table.taxiOrderData.history tr:first-child td, table.taxiOrderData.history tr:last-child td {
  padding: 5px 20px 18px;
  border-top: none;
}
table.taxiOrderData.history tr.adjTop {
  margin-top: -10px;
}
table.taxiOrderData.history tr.adjTop th {
  border-top: none;
}
/*注文データ表示　履歴詳細＞タクシー料金 クーポン使用表示、決済方法 エラー表示*/
table.taxiOrderData.history tr.layTypAddOption td:first-child {
  padding: 20px 20px 18px;
  border-top: 1px solid #dedede;
}
table.taxiOrderData.history tr.layTypAddOption td .layAdd01 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
table.taxiOrderData.history tr.layTypAddOption td .layAdd01 .layTh {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
table.taxiOrderData.history tr.layTypAddOption td .layAdd01 .layTh .layTxt01 {
  padding: 0 0 5px;
  font-size: 10px;
  color: #174e9e;
  white-space: nowrap;
}
table.taxiOrderData.history tr.layTypAddOption td .layAdd01 .layTh .layTxt02 {
  display: flex;
  align-items: center;
}
table.taxiOrderData.history tr.layTypAddOption td .layAdd01 .layTh .layTxt02 .layOrderMsg {
  display: flex;
  align-items: center;
  margin: 0 0 0 10px;
  padding: 0 0 0 10px;
  border-left: 1px solid #c7dee0;
}
@media screen and (max-width:340px) {
  table.taxiOrderData.history tr.layTypAddOption td .layAdd01 .layTh .layTxt02 .layOrderMsg {
    margin: 0 0 0 5px;
    padding: 0 0 0 5px;
  }
}
/*注文データ表示　履歴詳細＞タクシー料金 クーポンを使用できませんでした*/
table.taxiOrderData.history tr.layTypAddOption td .layAdd02 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 0;
  width: 100%;
  padding: 12px 0 0;
  color: #d73f3f;
  border-top: 1px dotted #f6cece;
}
table.taxiOrderData.history tr.layTypAddOption td .layAdd02 .layTh {
  flex-grow: 1;
}
/*注文データ表示　履歴詳細　＞　お気に入り登録ボタン、領収書発行ボタン*/
table.taxiOrderData.history td div.lay .wrapBtn {
  flex-shrink: 0;
  margin-left: 10px;
  min-width: 87px;
}
table.taxiOrderData.history td div.lay .wrapBtn a, table.taxiOrderData.history td div.lay .wrapBtn button {
  display: flex;
  align-items: center;
  min-height: 40px;
  width: 100%;
  padding: 4px;
  font-size: 10px;
  border: 1px solid #1c4da2;
  border-radius: 6px;
  transition: background 0.2s ease-out;
}
table.taxiOrderData.history td div.lay .wrapBtn a:hover, table.taxiOrderData.history td div.lay .wrapBtn button:hover {
  background: #e8f0ff;
  transition: background 0.2s ease-out;
}
/*注文データ表示　履歴詳細　＞　クーポン使用エラー時のお問い合わせボタン*/
table.taxiOrderData.history tr.layTypAddOption td .layAdd02 .wrapBtn a, table.taxiOrderData.history tr.layTypAddOption td .layAdd02 .wrapBtn button {
  justify-content: center;
  min-height: 27px;
  color: #e82d35;
  border: 1px solid #e82d35;
}
table.taxiOrderData.history tr.layTypAddOption td .layAdd02 .wrapBtn a:hover, table.taxiOrderData.history tr.layTypAddOption td .layAdd02 .wrapBtn a:active, table.taxiOrderData.history tr.layTypAddOption td .layAdd02 .wrapBtn button:hover {
  background: rgba(232, 45, 53, 0.1) !important;
  transition: background 0.2s ease-out;
}
/*注文データ表示　履歴詳細　＞　タクシーを呼ぶ*/
.taxiRirekiOrder {
  display: flex;
  align-items: center;
  width: 100%;
}
.taxiRirekiOrder dt {
  display: flex;
  margin: 0 15px 0 0;
  font-size: 12px;
  color: #1c4da2;
}
.taxiRirekiOrder dt .layTxt01, .taxiRirekiOrder dt .layTxt02 {
  white-space: nowrap;
}
.taxiRirekiOrder dd {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  width: 30%;
}
.taxiRirekiOrder dd + dd {
  margin-left: 1px;
}
.taxiRirekiOrder dd button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-size: 12px;
  color: #ffffff;
  background: #1c4da2;
  border-radius: 50px;
  transition: background 0.2s ease-out;
}
.taxiRirekiOrder dd button:hover {
  background: #316fda;
  transition: background 0.2s ease-out;
}
.taxiRirekiOrder dd button .layTxt02 {
  white-space: nowrap;
}
.taxiRirekiOrder dd:first-of-type button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.taxiRirekiOrder dd:last-of-type button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
@media screen and (max-width:440px) {
  .taxiRirekiOrder dt {
    flex-direction: column;
  }
}
/*-------------------------------*/
/*配車されるタクシー情報*/
section.orderInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.orderInfo h1 {
  font-size: clamp(15px, 2vh, 18px);
  color: #1c4da2;
}
.orderInfo h1 + .layTxtCtr {
  margin-top: clamp(5px, 1.4vh, 25px);
  font-size: clamp(11px, 1.6vh, 12px);
  line-height: 1;
}
.orderInfo .taxiVehicle {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: clamp(2px, 1.4vh, 15px) 0 clamp(5px, 1.4vh, 25px);
}
.orderInfo .layCancelCtr {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: clamp(2px, 1.4vh, 15px) 0 clamp(5px, 1.4vh, 25px);
  font-size: clamp(14px, 4vw, 16px);
}
/*配車されるタクシー情報　ナンバープレート*/
.orderInfo .taxiVehicle .taxiPlate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 120px;
  padding: clamp(1px, 1vh, 8px) 0;
  color: #ffffff;
  background: #257a5e;
  border-radius: 5px;
}
.orderInfo .taxiVehicle .taxiPlate .layTxt01 {
  font-size: 10px;
  line-height: 1;
  font-weight: bold;
}
.orderInfo .taxiVehicle .taxiPlate .layTxt02 {
  display: flex;
  align-items: flex-end;
  margin-top: clamp(1px, 1vh, 8px);
  line-height: 1;
}
.orderInfo .taxiVehicle .taxiPlate .layTxt02_1 {
  font-size: clamp(11px, 1.6vh, 12px);
  line-height: 20px;
  font-weight: bold;
}
.orderInfo .taxiVehicle .taxiPlate .layTxt02_2 {
  margin: 0 0 0 5px;
  font-size: clamp(13px, 2.8vh, 24px);
  line-height: 1;
  font-weight: bold;
}
/*配車されるタクシー情報　車両イメージ*/
.orderInfo .taxiVehicle .taxiCar img {
  width: auto;
  height: clamp(40px, 7vh, 48px);
}
.orderInfo .taxiVehicle .taxiPlate + .taxiCar {
  margin-left: 20px;
}
/*配車されるタクシー情報　到着予定時刻*/
.orderInfo .layTime {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 320px;
  color: #ffffff;
  background: #1c4da2;
  border-radius: 5px;
}
.orderInfo .layTime dt {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  width: 7em;
  padding: clamp(3px, 1.5vh, 6px) 0;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.orderInfo .layTime dd {
  flex-grow: 1;
  text-align: center;
  padding: clamp(3px, 1.5vh, 6px) 0;
  font-size: 14px;
  line-height: 1;
  border-left: 1px solid #ffffff;
}
@media screen and (max-width:799px) {
  .orderInfo .layTime {
    min-width: 250px;
    max-width: 320px;
    width: auto;
  }
  .orderInfo .layTime dt {
    font-size: clamp(10px, 2.2vw, 11px);
  }
  .orderInfo .layTime dd {
    padding: clamp(3px, 1.5vh, 6px) 2vw;
    font-size: clamp(11.5px, 3.3vw, 14px);
  }
}
/*配車されるタクシー情報　下部メッセージ*/
.orderInfo .layTime + .layTxtMsg {
  margin-top: clamp(5px, 1vh, 10px);
  font-size: clamp(10px, 1.4vh, 12px);
}
/*配車されるタクシー情報　到着済*/
.orderInfo.taxiArrived h1 {
  color: #00a395;
}
.orderInfo.taxiArrived .layTime {
  background: #00a395;
}
.orderInfo.taxiArrived .layTxtMsg {
  color: #00a395;
}
/*-------------------------------*/
/*依頼中アニメーション*/
.wrapOrderLoading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 140px;
  padding: 10px 0;
  overflow: hidden;
}
.wrapOrderLoading.anime1 iframe {
  width: 160px;
  height: 140px;
}
.wrapOrderLoading.anime2 iframe {
  width: 240px;
  height: 120px;
}
/*-------------------------------*/
/*予約予告*/
.wrapOrderYoyakuInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
}
.wrapOrderYoyakuInfo p {
  text-align: center;
  font-size: clamp(14px, 4vw, 16px);
}
.wrapOrderYoyakuInfo p strong {
  color: #4d840f;
}
/*-------------------------------*/
/*目的地を指定すると、運賃・料金等を確認できます*/
.inputPointInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 7px;
}
.inputPointInfo p {
  text-align: center;
  color: #ab4671;
  font-size: 12px;
}
@media screen and (max-height: 850px) {
  .inputPointInfo {
    margin-top: clamp(4px, 0.7vh, 7px);
  }
}
/*タクシー料金　事前確定運賃orメーター運賃*/
.layTxtFareType {
  display: block;
  color: #656565;
}
table.taxiOrderData td div.lay.layTxtFare01 {
  justify-content: flex-start;
  font-size: clamp(22px, 3.2vh, 24px);
  font-weight: bold;
  letter-spacing: -0.04em;
  line-height: 1;
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
}
table.taxiOrderData td div.lay.layTxtFare01 .customTxtSmall {
  font-size: 70%;
}
/*タクシー料金　遠距離割引前：0,000円、+有料道路料金（降車時に確定）、迎車料金等込み*/
.layTxtFare02 {
  margin-top: clamp(4px, 0.5vh, 7px);
  font-size: clamp(11px, 1.6vh, 12px);
}
.layTxtFare03 {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
}
/* 注文確認エリアのスクロールバーを常時表示 */
#order-kakunin .contScrl .simplebar-scrollbar {
  opacity: 1 !important;
  visibility: visible !important;
}

#order-kakunin .contScrl .simplebar-scrollbar::before {
  opacity: 1 !important;
}

/* 地図拡大/縮小ボタン */
#mapExpandButton {
  display: none;
}
@media (max-width: 800px) {
  #mapExpandButton {
    position: absolute;
    right: 10px;
    bottom: 18px;
    z-index: 100;
    width: 40px;
    height: 40px;
    padding: 8px;
    background-color: #fff;
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
   }
  #mapExpandButton:hover {
    background-color: #f5f5f5;
  }
  #mapExpandButton svg {
    color: #666;
  }
  #mapExpandButton .expand-icon {
    display: block;
  }
  #mapExpandButton .collapse-icon {
    display: none;
  }
  #mapExpandButton[aria-expanded="false"] .expand-icon {
    display: none;
  }
  #mapExpandButton[aria-expanded="false"] .collapse-icon {
    display: block;
  }
}
/*-------------------------------*/
/*end*/