@charset 'utf-8';

:root {
  /* 固定値
    ----------------------------------------------*/
  --color-white: #fff;
  --color-red: #f00;
  --color-blue: #00f;
  /* デフォルトの文字色 */
  --color-text-default: #343434;
  --color-text-placeholder: hsl(0, 0%, 75%);
  /* 入力例 */
  --color-text-entry-example: #808080;
  /* 影 */
  --color-box-shadow: #ddd;
  /* 枠線 */
  --color-border-default: #a0a0a0;
  --color-border-input-default: #bfbfbf;
  --color-checkbox-check: #008080;
  --color-background-button-default: #efefef;
  /* フォントサイズ */
  --font-size-default: 16px;
  /* カレンダー */
  --color-background-saturday: #c0e0ff;
  --color-background-sunday: #ffd0e0;
  /* テーマごとの色（カスタマイズ用）
    ----------------------------------------------*/
  --color-background-body: #f0f0ff;
  /* ロゴ */
  --color-border-logo: transparent;
  --color-background-logo: transparent;
  /* ヘッダー */
  --color-border-header: #0c51d2;
  --color-background-header: #40c0b0;
  --color-text-header: var(--color-white);
  --color-background-sub-header: #f5f5f5;
  --color-text-sub-header: var(--color-text-default);
  /* ステップ */
  --color-background-step: #f5f5f5;
  --color-background-step-active: #0070bd;
  --color-text-step: #999;
  --color-text-step-active: var(--color-white);
  /* フッター */
  --color-text-footer: var(--color-text-default);
  --color-border-footer: #4f6cc4;
  --color-background-footer: var(--color-white);
  /* 選択肢 */
  --color-border-choice: #4f6cc4;
  --color-background-choice: #f5f5f5;
  --color-background-choice-hover: #abdbf9;
  /* ボタン */
  --color-background-previews-button: #ff80c0;
  --color-background-next-button: #60cf80;
  /* 表 */
  --color-background-time-table-th: #f0f0ff;
  /* テーブル */
  --color-background-table-th: #f8f8ff;
  /* 申し込み日時選択リストヘッダー */
  --color-primary-date-select-button: #000080;
  --color-background-date-select-button: #f0f0ff;
  /* 高さ、幅
    ----------------------------------------------*/
  /* ロゴ */
  --height-tb-header-logo: 170px;
  --height-mb-header-logo: 80px;
  /* 入力フォームのテーブルヘッダー */
  --width-tb-page-entry-th: 160px;
  --width-mb-page-entry-th: 124px;
  /* 内容確認のテーブルヘッダー */
  --width-tb-page-confirm-th: 160px;
  --width-mb-page-confirm-th: 124px;
  /* 申込完了のテーブルヘッダー */
  --width-tb-page-result-th: 160px;
  --width-mb-page-result-th: 124px;
  /* パス
    ----------------------------------------------*/
  --url-logo: url(../images/logo.png);
}

/* 全体設定
-------------------------------------------------------------- */

html {
  font: 12px verdana, 'ヒラギノ丸ゴ ProN W4', 'Hiragino Maru Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', Sans-Serif;
  font-size: var(--font-size-default);
}

body {
  background-color: var(--color-background-body);

  color: var(--color-text-default);
}

.txt,
.txa {
  border: solid 1px var(--color-border-input-default);
  border-radius: 2px;
}

.txt {
  width: 100%;
  padding: 4px;
}

.txt:not(.w_fill) {
  max-width: 260px;
}

.txt::placeholder {
  color: var(--color-text-placeholder);
}

.txa {
  padding: 3px;

  resize: none;
}

.ch {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 14px;
  height: 14px;
  margin-right: .5rem;
  border: 1px solid var(--color-border-input-default);
  border-radius: 3px;

  background: var(--color-white);

  outline: none;
}

.ch:checked:before {
  display: inline-block;
  position: absolute;
  top: 2px;
  left: 1px;
  transform: rotate(-45deg);

  width: 9px;
  height: 6px;
  border-bottom: 2px solid var(--color-checkbox-check);
  border-left: 2px solid var(--color-checkbox-check);

  font-size: 20px;
  line-height: 15px;
  text-align: center;

  content: '';
}

.bt {
  padding: 0 3px;
  border: solid 1px var(--color-border-input-default);
  border-radius: 3px;

  background-color: var(--color-background-button-default);
}

.sel {
  width: 100%;
  max-width: 260px;
  padding: 4px;
  border: solid 1px var(--color-border-input-default);
  border-radius: 2px;

  -webkit-appearance: menulist-button;
  appearance: menulist-button;
}

.rb+.la {
  position: relative;

  padding-left: 23px;
}

.rb+.la:before {
  display: block;
  position: absolute;
  top: 4px;
  left: 0;

  width: 16px;
  height: 16px;
  border: 1px solid var(--color-border-input-default);
  border-radius: 25px;

  content: ' ';
}

.rb:checked+.la:after {
  display: block;
  position: absolute;
  top: 8px;
  left: 4px;

  width: 8px;
  height: 8px;
  border-radius: 25px;

  background-color: var(--color-checkbox-check);

  content: ' ';
}

/* リンク設定
------------------------------------------------------------*/
a {
  color: var(--color-blue);

  text-decoration: none;
}

a:active,
a:focus {
  outline: 0;
}

/* リンクにつける画像 */
a img {
  vertical-align: middle;
}

/* wrapper, inner
------------------------------------------------------------*/
#wrapper,
.inner {
  max-width: 900px;
}

.inner {
  width: 100%;
  margin: 0 auto;
}


/* タブレット */
@media (min-width: 768px) {
  #wrapper {
    width: 98%;
    margin: 0 auto;
    padding: 0 1%;
  }
}

/*************
 * ヘッダー
*************/
#header .inner {
  overflow: hidden;

  border: 1px solid var(--color-border-logo);

  background-color: var(--color-background-logo);
}

/* コンテンツヘッダー */
.content_header {
  margin-bottom: 20px;
}

.content_header .heading {
  margin: 0;
}

h3.heading {
  padding: 5px 10px;
  border-top: 5px solid var(--color-border-header);

  background-color: var(--color-background-header);

  color: var(--color-text-header);
}

h4.heading {
  padding: 5px 20px;

  background-color: var(--color-background-sub-header);

  color: var(--color-text-sub-header);
}

/* ステップ */
.content_steps {
  display: flex;
}

.content_steps .content_step {
  flex-grow: 1;
  position: relative;

  height: 48px;
  padding: 10px 0;

  background-color: var(--color-background-step);

  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.content_steps .content_step.active {
  z-index: 1;

  background-color: var(--color-background-step-active);
}

.content_steps .content_step .content_step_text {
  color: var(--color-text-step);
}

.content_steps .content_step.active .content_step_text {
  color: var(--color-text-step-active);
}

.content_steps .content_step:not(:last-child)::before,
.content_steps .content_step:not(:last-child)::after {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 2;

  margin: auto;
  border: 24px solid transparent;
  border-left: 12px solid var(--color-background-step);

  content: '';
}

.content_steps .content_step:not(:last-child)::before {
  margin-left: 1px;
  border-left-color: var(--color-white);
}

.content_steps .content_step.active:not(:last-child)::after {
  border-left-color: var(--color-background-step-active);
}

.content_steps .content_step.active:not(:last-child)::before {
  border-left: none;
}

@media (min-width: 768px) {
  .content_steps .content_step {
    height: 64px;
    padding: 13px 0;

    font-size: 14px;
    line-height: 1.2;
  }

  .content_steps .content_step:not(:last-child)::before,
  .content_steps .content_step:not(:last-child)::after {
    border-width: 32px;
    border-left-width: 20px;
  }
}

/*************
 * ロゴ
*************/
#header .logo {
  height: var(--height-mb-header-logo);

  background-image: var(--url-logo);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

/* タブレット */
@media (min-width: 768px) {
  #header .logo {
    height: var(--height-tb-header-logo);
  }
}

/*************
 * メイン コンテンツ
*************/
section.content {
  overflow: hidden;

  margin-bottom: 20px;
  padding-bottom: 10px;
  box-shadow: 0 0 3px var(--color-box-shadow);

  background-color: var(--color-white);
}

/*************
 * フッター
*************/
#footer .inner {
  overflow: hidden;

  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  border-top: 2px solid var(--color-border-footer);
  border-bottom: 2px solid var(--color-border-footer);

  background-color: var(--color-background-footer);
}

#footer .copyright {
  color: var(--color-text-footer);

  font-size: 14px;
  text-align: right;
}

/*************
 * 選択リスト
*************/
.selection_list {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 4px;

  text-align: left;
}

.selection_list .selection_item {
  margin-bottom: 5px;
  border-left: solid 8px var(--color-border-choice);

  background-color: var(--color-background-choice);

  color: var(--color-text-default);
}

.selection_list .selection_item a {
  display: block;

  padding: .5em;

  color: var(--color-text-default);
}

.selection_list .selection_item a:hover {
  background-color: var(--color-background-choice-hover);
}

/*************
 * テーブル
*************/
.tbl {
  width: calc(100% - 8px);
  margin-right: auto;
  margin-bottom: 24px;
  margin-left: auto;
}

.tbl th,
.tbl td {
  height: 32px;
  padding: 1px 4px;
  border: solid 1px var(--color-border-default);

  vertical-align: middle;
  word-break: break-all;
}

.tbl th {
  background-color: var(--color-background-table-th);

  text-align: center;
}

/* タブレット */
@media (min-width: 768px) {
  .tbl {
    width: 80%;
  }

  .tbl th,
  .tbl td {
    padding-right: 16px;
    padding-left: 16px;
  }
}


/*************
 * 申し込み日時選択リストヘッダー
*************/
.date_select {
  margin-bottom: 24px;
}

.date_select span {
  margin: 0 8px;
}

.date_select a {
  padding: 2px 8px;
  border: solid 1px var(--color-primary-date-select-button);
  border-radius: 6px;

  background-color: var(--color-background-date-select-button);

  color: var(--color-primary-date-select-button);
}

/* タブレット */
@media (min-width: 768px) {
  .date_select span {
    margin: 0 16px;
  }
}

/*************
画面下部ボタン
*************/
.button_area {
  display: flex;
  justify-content: space-between;

  margin-top: 25px;
  margin-bottom: 10px;
  padding: 0 10px;
}

.next_button {
  padding: 8px 12px;
  border-radius: 12px;

  background-color: var(--color-background-next-button);

  color: var(--color-white);
}

.previous_button {
  padding: 8px 12px;
  border-radius: 12px;

  background-color: var(--color-background-previews-button);

  color: var(--color-white);
}

/*************
 * メッセージボックス
*************/
.message {
  margin: 0 4px;
  padding: 4px;
  border: 1px solid var(--color-border-default);

  font-size: 12px;
}

.message .message_title {
  margin-bottom: 16px;

  font-weight: bold;
  text-align: center;
}

/* タブレット */
@media (min-width: 768px) {
  .message {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* page_selectshop
------------------------------------------------------------*/


/* page_selectcourse
------------------------------------------------------------*/


/* page_selectdate
------------------------------------------------------------*/
#page_selectdate .calendar {
  width: calc(100% - 8px);
  margin: 0 auto;
}

#page_selectdate .calendar th,
#page_selectdate .calendar td {
  border: solid 1px var(--color-border-default);
}

#page_selectdate .calendar th.youbi {
  text-align: center;
}

#page_selectdate .saturday {
  background-color: var(--color-background-saturday);
}

#page_selectdate .sunday {
  background-color: var(--color-background-sunday);
}

#page_selectdate .cal_day {
  height: 20px;
  padding-left: 6px;
}

#page_selectdate .cal_status {
  min-height: 40px;
  padding-top: 6px;
  padding-bottom: 6px;

  font-size: 18px;
  text-align: center;
}

#page_selectdate .cal_status a {
  display: block;

  font-weight: bold;
}

/* タブレット */
@media (min-width: 768px) {
  #page_selectdate .calendar {
    width: 70%;
  }
}

/* page_selecttime
------------------------------------------------------------*/
#page_selecttime .time_table th,
#page_selecttime .time_table td {
  border: solid 1px var(--color-border-default);
}

#page_selecttime .time_table th {
  background-color: var(--color-background-time-table-th);
}

/* page_entry
------------------------------------------------------------*/
#page_entry .txa_memo {
  width: 100%;
  height: 120px;
}

#page_entry .flex_h {
  display: flex;
  flex-wrap: wrap;
}

#page_entry .flex_v {
  display: flex;
  flex-direction: column;
}

#page_entry .flex_h :not(:first-of-type) {
  margin-left: 4px;
}

#page_entry .la_usesms {
  float: left;
}

#page_entry .txt_tourokubangou1 {
  width: 84px;
}

#page_entry .txt_tourokubangou2 {
  width: 40px;
}

#page_entry .txt_tourokubangou3 {
  width: 28px;
}

#page_entry .txt_tourokubangou4 {
  width: 48px;
}

#page_entry .txt_expiryDate_1 {
  width: 84px;
}

#page_entry .txt_expiryDate_2 {
  width: 40px;
}

#page_entry .txt_expiryDate_3 {
  width: 40px;
}

#page_entry .txt_expiryDate_4 {
  width: 40px;
}

#page_entry .txt_postcode1 {
  width: 40px;
}

#page_entry .txt_postcode2 {
  width: 48px;
}

#page_entry .txt_loanerCarMemo {
  width: 100%;
}

#page_entry .postcode_hyphen {
  display: inline-block;

  margin-left: 4px;

  line-height: 28px;
}

#page_entry .bt_search_address {
  margin-left: 4px;
}

#page_entry .input_info {
  font-size: 12px;
}

#page_entry .alert {
  width: calc(100% - 8px);
  margin: 0 auto;

  color: var(--color-red);
}

#page_entry .hissu th::after {
  color: var(--color-red);

  font-size: 12px;

  content: '*';
}

#page_entry .tbl th {
  width: var(--width-mb-page-entry-th);
}

/* タブレット */
@media (min-width: 768px) {
  #page_entry .alert {
    width: 80%;
  }

  #page_entry .tbl th {
    width: var(--width-tb-page-entry-th);
  }
}

/* page_confirm
------------------------------------------------------------*/
#page_confirm .tbl th {
  width: var(--width-mb-page-confirm-th);
}

#page_confirm .message_top {
  margin-bottom: 12px;
  margin-bottom: 28px;

  font-size: 14px;
  text-align: center;
}

#page_confirm .message_top p {
  margin-bottom: 5px;
}

/* タブレット */
@media (min-width: 768px) {
  #page_confirm .tbl th {
    width: var(--width-tb-page-confirm-th);
  }

  #page_confirm .message_top {
    font-size: var(--font-size-default);
  }
}

/* page_result
------------------------------------------------------------*/
#page_result .message_top,
#page_result .message_bottom {
  width: 100%;
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 4px;

  font-size: 14px;
}

#page_result .message_top {
  margin-top: 24px;
  margin-bottom: 28px;
}

#page_result .message_bottom {
  margin-top: 24px;
}

#page_result .message_top p,
#page_result .message_bottom p {
  margin-bottom: 5px;
}

#page_result .message_top p {
  text-align: center;
}

#page_result .tbl th {
  width: var(--width-mb-page-result-th);
}

/* タブレット */
@media (min-width: 768px) {

  #page_result .message_top,
  #page_result .message_bottom {
    font-size: var(--font-size-default);
  }

  #page_result .tbl th {
    width: var(--width-tb-page-result-th);
  }
}