@charset "UTF-8";
/*
DEV_JACCS_IMPORTER-649 No.168 編集ボタンを押して該当ページに戻った際、該当ページ以降のページは画面上部ステータス上グレー表記（未済状態）となるため、クリックによる遷移ができずそこからまた「次へ」で進んでいくしていくしかない。
*/
.jacss-steps__box--active.entered .jacss-steps__checked {
  background-color: #c4c4c4;
}
.jacss-steps__box--active.entered .jacss-steps__checked i {
  color: #c4c4c4;
}
.jacss-steps__box--active.entered .jacss-steps__checked:after, .jacss-steps__box--active.entered .jacss-steps__checked:before {
  background-color: #c4c4c4;
}

.jacss-steps__box .jacss-steps__checked:after, .jacss-steps__box .jacss-steps__checked:before,
.jacss-steps__box .jacss-steps__blank:after,
.jacss-steps__box .jacss-steps__blank:before {
  /* .mainの幅/8を算出 */
  width: calc(10vw + 20px);
}
.jacss-steps__box .jacss-steps__checked:after,
.jacss-steps__box .jacss-steps__blank:after {
  z-index: -5;
}
.jacss-steps__box .jacss-steps__checked:before,
.jacss-steps__box .jacss-steps__blank:before {
  z-index: -10;
}

@media screen and (max-width: 900px) {
  .jacss-steps .jacss-steps__box {
    min-width: 80px;
  }
  .jacss-steps .jacss-steps__box:not(:first-child) {
    margin-left: 0px;
  }
  .jacss-steps .jacss-steps__box .jacss-steps__checked:after, .jacss-steps .jacss-steps__box .jacss-steps__checked:before,
.jacss-steps .jacss-steps__box .jacss-steps__blank:after,
.jacss-steps .jacss-steps__box .jacss-steps__blank:before {
    /* .固定値として算出 */
    width: 100px;
  }
}
/*
DSN-5035 DEV_JACCS_IMPORTER-424 No.7 TBを縦型にするとステップ表示がすべて表示されない
*/
.jacss-steps ul {
  width: 100%;
  justify-content: space-between;
}
.jacss-steps .jacss-steps__box:not(:first-child) {
  margin-left: 10px;
}

@media screen and (max-width: 900px) {
  .jacss-steps {
    overflow-x: auto;
  }
}
/*
DEV_JACCS_IMPORTER-414 No.2 フッターの帯高さ調整
※ DEV_JACCS_IMPORTER-444 No.27 画面を横にした時の「保存する」「次へ」の帯の縦幅が太すぎる と同様のCSSです
*/
@media screen and (min-width: 768px) {
  button.footer_button-label {
    font-size: 22px;
    font-weight: bold;
  }
}
/*
DSN-5034 DEV_JACCS_IMPORTER-433 No.16 TBを縦型にするとファイナンス商品名のタブが不揃いになる

flexが設定されている.boxTypeOne（ .boxTypeOne__elemone などの親側のdiv ）に .loan-plan を設定する想定です。
*/
.loan-plan {
  flex-direction: row;
}

@media screen and (max-width: 736px) {
  .loan-plan {
    flex-direction: column;
  }
}
/* DEV_JACCS_IMPORTER-443 No.26 項目名と値の表示方法にメリハリがなく、項目名と値の判別がしにくい */
.jo_form-title {
  color: #5B5B5B;
}
.jo_form-title p {
  margin-bottom: 0.5rem;
}

@media screen and (min-width: 768px) {
  .jo_form-title p {
    margin-bottom: 1rem;
  }
}
/*
DEV_JACCS_IMPORTER-708 プラン選択文言の余白設定
CSSの「 DEV_JACCS_IMPORTER-445 No.28 お客様情報や車両基本情報などの帯の縦幅を少し狭めて欲しい 」に
記載されている「.heading-title { margin-bottom: 0px; }」」とコンフリクトしていますが、
上記のCSSは制作側で作成したCSSではありませんので、上書きしてください。
*/
.heading-title {
  margin-bottom: 1rem;
}
.heading-title + div {
  padding-top: 0;
  margin-top: 0;
}
.heading-title + div.alertBox {
  padding-top: 1rem;
}

/* DEV_JACCS_IMPORTER-445 No.28 お客様情報や車両基本情報などの帯の縦幅を少し狭めて欲しい */
@media screen and (max-width: 767px) {
  .heading-title {
    padding: 9px 40px 9px 30px;
  }
}
/* DEV_JACCS_IMPORTER-449 No.32 お支払プラン名のフォントが小さい */
.custom-checkbox input[type=radio]:checked + label .boxTypeOne .boxTypeOne__elemone {
  font-size: 24px;
  font-weight: 700;
}

/* DEV_JACCS_IMPORTER-518 No.99 郵便番号入力欄の幅が広い */
.form-control.postal,
.form-control.postal2,
.form-control.postal3 {
  width: 6em;
  flex: inherit;
}

@media screen and (min-width: 992px) {
  .form-control.postal {
    width: 100%;
    flex: 1 0 0%;
  }
}
/* DEV_JACCS_IMPORTER-584 No.161 申込者情報を一通り入力完了後、画面全体を縮小もしくはスクロールしないと「次へ」ボタンが見えない */
@media screen and (max-width: 767px) {
  html, body {
    font-size: 16px;
  }
}
/* DEV_JACCS_IMPORTER-655 No.174 ページ下部の2つのダウンロードボタンのサイズが異なるため揃えていただきたい

インラインCSSを削除し、外部化*/
.jaccs-btn {
  cursor: pointer;
}

/* DEV_JACCS_IMPORTER-668 No.187 住所入力結果の住所を太字にして欲しい。*/
.jo_form-bold {
  font-weight: bold;
}

/*
DEV_JACCS_IMPORTER-435 No.18 連携後の画面で項目名と連携された値の縦並びがわかり辛い
・jo_border-list > div > .jo_form-title, .jo_form-contentの構成想定です
・「主な使用目的」からは「.jo_form-title」を削除してください。「使用者区分」には該当クラスがないため。
*/
@media screen and (max-width: 900px) {
  .jo_border-list > div {
    border-bottom: 1px solid #ccc;
  }
  .jo_border-list > div .jo_form-title {
    text-align: left;
    margin-top: 0.5em;
  }
  .jo_border-list > div .jo_form-content {
    text-align: right;
  }
  .jo_border-list > div .jo_form-content p {
    margin-bottom: 0.5em;
  }
}
/*
DEV_JACCS_IMPORTER-651 No.170 「お申込者と世帯主の関係」と入力内容の間のスペースが狭すぎて、項目名の改行の結果以下のように表示されてしまう。
*/
@media screen and (max-width: 900px) {
  .jo-application-list {
    justify-content: space-between;
  }
  .jo-application-list .jo-application-data {
    padding-left: 2rem;
  }
}
/*
DEV_JACCS_IMPORTER-711 エラートーストメッセージのデザインを修正する
*/
#toast-container > .toast-error {
  background-image: url(/assets/toastr.png) !important;
}

.toast-error {
  background-color: #FFFBE6 !important;
}

/*# sourceMappingURL=jo-theme.css.map */