@charset "UTF-8";
/** app css */

:root {
  --body-bgcolor: #f1f1f1;
  --content-bgcolor: #fff;

  --dai-main-color: #C7363B;
  --dai-sub-color: #3E3420;
  --dai-ttl-color: #FFFF00;

  --dai-pri: #C7363B;
  --dai-pri-hover: #C7363BB2;
  --dai-sec: #FFAA00;
  --dai-sec-hover: #FFAA00B2;
  --dai-ter: #555555;
  --dai-ter-hover: #555555B2;
  --dai-cancel: #CCCCCC;
  --dai-cancel-hover: #CCCCCCB2;
  --dai-del: #EF0D0D;
  --dai-del-hover: #EF0D0DB2;

  --dai-main-fs: 16px;
  --dai-sub-fs: 12px;

  --dai-row-dan: #C7363B4d;
  --dai-row-wrn: #FFAA004d;
  --dai-row-cau: #F9F1574d;
}

body { background-color: var(--body-bgcolor); }
.content { min-height: calc(100dvh - 1px); background-color: var(--content-bgcolor); }

/* --- _cmn系を上書き --- */
h1 { font-weight: 700; font-size: 42px; }
h2 { font-weight: 700; font-size: 32px; }
h3 { font-weight: 700; font-size: 24px; }
h4 { font-weight: 700; font-size: 20px; }
.fs-m { font-weight: 400; font-size: var(--dai-main-fs); }
.fs-s { font-weight: 400; font-size: var(--dai-sub-fs); }
a { text-decoration: none; color: #3366FF; }
a:hover { text-decoration: underline; color: #3366FFB2; }
input, textarea, select { padding: 4px 16px; -webkit-appearance: none; appearance: none; background-color: #fff; border: 1px solid #ccc; }
/* numberのスピンボタン無し */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
input[type="time"] { padding: 3px 16px; } /* 時計の分高さがでてしまう */
table.list-tbl tr td input { padding: 4px 16px; }
/* 入力欄なしのセル調整 */
.form-readonly,
.shop-link-fc-name
 { padding: 2px 16px; border: 1px solid transparent; min-height: 30px; font-size: 15px; }
input, select { border-radius: 24px; }
select { min-width: 80px; }
textarea { border-radius: 8px; }
input:disabled { cursor: default; background-color: #eee; }
form [readonly]:not(.datepicker-here) { pointer-events: none; }
.btn {
  padding: 4px 22px;
  text-decoration: none;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: var(--dai-main-color);
  transition: .4s;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  text-align-last: justify;
}
.btn.len2 { padding: 4px 62px; }
.btn.len3 { padding: 4px 52px; }
.btn.len4 { padding: 4px 42px; }
.btn.len5 { padding: 4px 32px; }
.btn.len6 { padding: 4px 22px; }

.btn.lrg { min-width: 200px; font-size: 16px; }
.btn.lmm { min-width: 160px; font-size: 16px; }
.btn.lss { min-width: 80px; font-size: 14px; }
.required_clm::after { display: none; }
.inp-sel-box .srh-box:hover .angle { background-color: transparent; }
form .val-err { display: none; }
form [type="password"] + .val-err { display: block; }
.datepicker-here-wrap .date-clear-btn.btn.bdg.min { right: 0; }

/* message */
.msgbox-outer { z-index: 99; position: fixed; top: 80px; left: 50%; transform: translateX(-50%); font-size: 16px; max-height: 850px; border: 2px solid #000; padding: 8px 12px; letter-spacing: 0.1em; min-width: 350px; border-radius: 6px; max-height: 400px; overflow-y: auto; }
.msgbox-outer:empty { display: none; }
.msgbox-outer.mb-err { background-color: rgb(255, 233, 233, 0.9); border-color: var(--dan); color: var(--dan); }
.msgbox-outer.mb-wrn { background-color: rgb(255, 255, 233, 0.9); border-color: var(--war); color: var(--war); }
.msgbox-outer.mb-cmp { background-color: rgb(233, 255, 233, 0.9); border-color: var(--suc); color: var(--suc); }
.msgbox-outer > li { overflow: visible; text-overflow: clip; white-space: break-spaces; font-size: 15px; }

/* 共通エラー画面 */
.err-box { min-width: 350px; max-width: 850px; }
.err-box h1 { font-size: 25px; font-weight: bold; padding: 10px 10px; }
.err-box p { padding: 0 10px; }

/** 共通css上書き(_table.css) */
.l2d-list .tbl-outer { border-bottom: 0; }
table tr[onclick]:hover { cursor: pointer; }
table.list-tbl tr th, table.tbl-th tr th { text-align: left; background-color: #fff; color: #666; border: none; border-bottom: 1px solid var(--tbl-br-color); }
table tr td { padding: 16px 8px; border: none; }
table tr~tr td { border-top: 1px solid var(--tbl-br-color); }

/* ヘッダー */
header { padding: 16px 40px; height: 70px; display: flex; justify-content: space-between; align-items: center; color: #fff; background-color: var(--dai-main-color); }
header > .sys-name { font-size: 24px; }
header > .sys-name span { font-size: 16px; margin-right: 0.5em; }
header > .hd-r-wrap { display: flex; flex-wrap: nowrap; gap: 40px; }
header [data-notice-cnt] { position: relative; width: 28px; }
header [data-notice-cnt]::before { content: '\f0f3'; font-family: 'Font Awesome 5 Free'; font-size: 22px; }
header [data-notice-cnt]::after { content: attr(data-notice-cnt); font-size: 11px; position: absolute; top: 0; right: 0; color: var(--dai-main-color); background-color: #fff; display: block; width: 16px; height: 16px; text-align: center; border-radius: 50%; cursor: pointer; }
header [data-notice-cnt="0"]::after { display: none; cursor: default; }

/* タイトル */
.pg-ttl-wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.pg-ttl-wrap > ul { display: flex; align-items: baseline; }
.pg-ttl-wrap > ul > li ~ li::before {
  content: '\f053';
  padding: 0 12px;
  font-size: 18px;
  font-family: "Font Awesome 5 Free";
  -moz-osx-font-smoothing: grascale;
  -webkit-font-smoothing: antialiased;
  font-weight: 900;
}
.pg-ttl-wrap > ul > li[onclick] { color: #3366FF; cursor: pointer; }
.pg-ttl-wrap > ul > li[onclick]:hover { opacity: 0.8; text-decoration: underline; }
.pg-ttl-wrap > ul > li:last-of-type { font-weight: 700; font-size: 32px; }
.pg-ttl-wrap > ul > li:last-of-type:empty:after { content: '新規登録'; }

:is(.sub-ttl, .det-wrap h4) {
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: bold;
  border-left: 8px solid var(--dai-main-color);
  padding-left: 16px;
  line-height: 1.3;
}

/* ボタン */
.btn-wrap-v { display: flex; justify-content: center; gap: 20px; padding-bottom: 5px; }
.btn-wrap-h { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-bottom: 5px; }
.btn.edit { background-color: var(--dai-ter); }
.btn.edit:hover { background-color: var(--dai-ter-hover); }
.btn.reg { background-color: var(--dai-pri); }
.btn.reg:hover { background-color: var(--dai-pri-hover); }
.btn.del { background-color: var(--dai-del); }
.btn.del:hover { background-color: var(--dai-del-hover); }
.btn.next { background-color: var(--dai-sec); }
.btn.next:hover { background-color: var(--dai-sec-hover); }
.btn.cancel { background-color: var(--dai-cancel); }
.btn.cancel:hover { background-color: var(--dai-cancel-hover); }
.btn.def { border: 1px solid #aaa; }

/* ラジオ */
.rdo [type="radio"]+label, [type="radio"].rdo+label { padding-left: 1.2em; }
.rdo [type="radio"]+label::before, [type="radio"].rdo+label::before { width: 12px; height: 12px; }
.rdo [type="radio"]+label::after, [type="radio"].rdo+label::after { left: 3px; }
.rdo.dai [type="radio"]+label::before,
[type="radio"].rdo.dai+label::before,
.rdo.dai [type="radio"]+label:hover::before,
[type="radio"].rdo.dai+label:hover::before
  { border-color: #ccc; }
.rdo.dai [type="radio"]:checked+label::after,
[type="radio"].rdo.dai:checked+label::after,
.rdo.dai [type="radio"]+label:hover::after,
[type="radio"].rdo.dai+label:hover::after
  { background-color: var(--dai-main-color); }
.rdo.dai [type="radio"]+label,
[type="radio"].rdo.dai+label,
.rdo.dai [type="radio"]+label:hover,
[type="radio"].rdo.dai+label:hover
  { color: #555; }

/* チェックボックス */
input[type="radio"]+label, input[type="checkbox"]+label { color: #555; }
.chk label::after { border: 1px solid #ccc; border-radius: 4px; }
.chk.dai label::before {
  border: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background-color: var(--dai-main-color);
  transform: translateY(-50%);
  left: 3px;
}
.chk.dai input[type=checkbox]:checked+label::after { border-color: #ccc; }
.chk.dai input[type=checkbox]:checked+label,
.chk.dai input[type=checkbox]:hover+label { color: #555; }

/* 色・アイコン説明 */
.explanation-list { display: flex; gap: 28px; font-size: 14px; }
.explanation-list > li label::before { content: '・・・'; margin: 0 0.3em 0 0.1em; letter-spacing: -0.5em; } /* …にすると下寄せになってしまう */

/* 非同期ローディング */
.l2d-det > .kurukuru,
.searchResult.kurukuru,
#rent2.kurukuru {
  text-align: center;
  font-size: 64px;
}
.l2d-det > .kurukuru {
  margin-top: 40px;
}

/* 横並び */
.fromto-box.jc-l::after { margin: 0 0.5em; }

/* テーブル ＞ 警告色 */
tr.dan { background-color: var(--dai-row-dan); }
tr.wrn { background-color: var(--dai-row-wrn); }
tr.cau { background-color: var(--dai-row-cau); }
tr.del { background-color: var(--dai-cancel); }
/* テーブル ＞ データなし */
.list-box[data-empty-ttl]:not(:has(tbody tr)) table { display: none; }
.list-box[data-empty-ttl]:not(:has(tbody tr))::before { content: attr(data-empty-ttl)'はありません'; }
/* テーブル ＞ 金額 */
.list-box tr .u-jyen { text-align: right; padding-right: 2em; }
/* テーブル ＞ ソート */
.list-box thead .sort .sort-sub { margin-left: 1.5em; font-size: 12px; }

/* 画像 */
.bgimg, .photo-box img { height: 100px; max-width: 280px; } /* 各画面で設定すること */
.bgimg[style=""] { background-color: #eee; position: relative; }
.bgimg[style=""]::before { content: 'NO IMAGE'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #999; }
.photo-box img { cursor: auto; }

/* 入力フォーム */
[data-ie="init"] .edit-only,
[data-ie="edit"] .init-only,
[data-ie="init"] .required_clm::after,
[data-ie="init"] .angle,
[data-ie="init"] .datepicker-here-wrap.icn-cal::after,
[data-ie="init"] .date-clear-btn,
[data-ie="init"] .fjtime-box::before,
[data-ie="init"] [type="radio"]:not(:checked) + label,
[data-ie="init"] [type="radio"] + label:not([class*="u-"])::before,
[data-ie="init"] [type="radio"] + label:not([class*="u-"])::after,
[data-ie="init"] [type="checkbox"]:not(:checked) + label
 { display: none !important; }
[data-ie="init"] input,
[data-ie="init"] textarea :not(.memo-editable),
[data-ie="init"] select,
[data-ie="init"] [type="radio"] + label,
[data-ie="init"] [type="checkbox"] + label
 { border-color: transparent; pointer-events: none; background-color: transparent; }
[data-ie="init"] [type="radio"] + label,
[data-ie="init"] [type="checkbox"] + label
 { color: #555 !important; }
[data-ie="init"] .band-rdo input[type="radio"]:checked + label
 { background-color: transparent !important; width: 100% !important; padding: 0; }
[data-ie="init"] .band-rdo input[type="checkbox"]:checked + label
 { background-color: transparent !important; padding: 0; }
[data-ie="init"] select { appearance: none; }
[data-ie="init"] .inp-wrap dl dl dd > *:has(:not(.edit-only)),
[data-ie="edit"] .inp-wrap dl dl dd > *:has(:not(.init-only))
 { flex: 1; }

[data-ie="init"] [placeholder]:empty { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
[data-ie="init"] :placeholder-shown { color: transparent; }
[data-ie="init"] ::-webkit-input-placeholder { color: transparent; } /* Google Chrome, Safari, Opera 15+, Android, iOS */
[data-ie="init"] :-moz-placeholder { color: transparent; opacity: 0; } /* Firefox 18- */
[data-ie="init"] ::-moz-placeholder { color: transparent; opacity: 0; } /* Firefox 19+ */
[data-ie="init"] :-ms-input-placeholder { color: transparent; } /* IE 10+ */

/* 編集 */
.inp-wrap .sub-ttl { margin-bottom: 0; }
.inp-wrap + .inp-wrap { margin-top: 52px; }

.inp-wrap { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: 80px; }
.inp-wrap.sep1 > dl { width: 100%; }
.inp-wrap.sep2 > dl { width: 50%; }
.inp-wrap > dl,
#mainte-box:not(.g-row) #mainteChk-wrap /* 法定点検用 */
  { display: flex; flex-wrap: wrap; gap: 20px; }
.inp-wrap > dl > dl,
#mainte-box > div > dl /* 法定点検用 */
  { width: 100%; display: flex; align-items: flex-start; gap: 12px; }
.inp-wrap > dl > dl > dt,
.inp-wrap > dl > dl > dt div
  { width: 194px; font-weight: bold; text-align: left; }
.inp-wrap dl dl dd
  { min-width: 260px; max-width: 380px; min-height: 30px; flex: 1; display: flex; align-items: center; }
.inp-wrap dl dl dd[class^="u-"] { display: flex; justify-content: space-between; align-items: center; }
.inp-wrap dl dl dd[class^="u-"] > *:is(:not(span)) { width: 88%; }
.inp-wrap dl > dd > div[data-dtarget] { padding: 4px 16px; }
.l2d-det[data-ie="edit"] .inp-wrap dl:has([data-vc-type*="required"]) > dt:not(.not-reqd):after,
.det-wrap dl:has([data-vc-type*="required"]) > dt:not(.not-reqd):after,
.reqd-clm:after
  { content: '*'; color: var(--dai-main-color); }

/* 編集 ＞ パスワード */
[data-pw-edit="0"] [type="password"],
[data-pw-edit="1"] [type="button"] {
  display: none;
}
[data-vc-pwsame-name] { margin-top: 4px; }

/* ステータス／FC／店舗 */
.sts-shop-box { margin-top: 40px; border-bottom: 1px dashed #ccc; padding-bottom: 8px; }
.sts-shop-box > div { display: flex; gap: 80px; }
.sts-shop-box > div ~ div { margin-top: 20px; }
.sts-shop-box dl { display: flex; width: 50%; }
.sts-shop-box dt { width: 104px; font-weight: bold; }
.sts-shop-box div[data-sale-sts] { min-width: 160px; padding: 4px 12px; font-size: 16px; }

/* 金額欄 */
.price-wrap { margin-bottom: 20px; display: flex; justify-content: space-evenly; border: 1px solid #ccc; border-radius: 10px; }
.price-wrap > dl { flex-grow: 1; padding: 8px 12px; text-align: center; }
.price-wrap > dl ~ dl { border-left: 1px solid #ccc; }
.price-wrap > dl > dd { margin-top: 8px; display: flex; gap: 2px; align-items: center; text-align: right; justify-content: center; font-size: 20px; }
.price-wrap > dl > dt { font-weight: bold; }
.price-wrap + .inp-wrap { margin-top: 40px; }
.price-wrap .form-readonly { width: 100%; }


/* ステータス */
td:has(
 :is(
  [data-vehicle-sts],
  [data-rentacar-sts],
  [data-sale-sts]
 )
) { text-align: center; }

:is(
 [data-vehicle-sts],
 [data-rentacar-sts],
 [data-sale-sts]
) {
  display: inline-block;
  min-width: 80px;
  text-align: center;
  font-size: var(--dai-sub-fs);
  padding: 2px;
  border-radius: 4px;
}

/* ステータス ＞ 車両 */
[data-vehicle-sts="0"]  { background-color: #D9D9D9; }
[data-vehicle-sts="1"] { background-color: #69c77c; color: #fff; }
[data-vehicle-sts="9"] { background-color: #555555; color: #fff; }

/* ステータス ＞ カレンタ契約 */
[data-rentacar-sts="0"]  { background-color: #F9F157; }
[data-rentacar-sts="9"]  { background-color: #555555; color: #fff; }
[data-rentacar-sts="10"]  { background-color: #85C9F3; color: #fff; }
[data-rentacar-sts="110"]  { background-color: #85acf3; color: #fff; }
[data-rentacar-sts="111"]  { background-color: #69c77c; color: #fff; }
[data-rentacar-sts="19"]  { background-color: #777777; color: #fff; }
[data-rentacar-sts="20"]  { background-color: #D9D9D9; }

/* ステータス ＞ クレカーズ */
/*
 ・契約まで「黄→青→緑」
 ・完済「濃緑」
 ・NG・キャンセル「灰」
 ・特殊対応「赤」
*/
[data-sale-sts="100"] { background-color: #F4F47C; }
[data-sale-sts="101"] { background-color: #85C9F3; color: #fff; }
[data-sale-sts="102"] { background-color: #89B2EF; color: #fff; }
[data-sale-sts="111"] { background-color: var(--gre-tn); color: #fff; }
[data-sale-sts="201"] { background-color: var(--sec-tn); color: #fff; }
[data-sale-sts="211"] { background-color: var(--sec); color: #fff; }
[data-sale-sts="219"] { background-color: var(--war-br); color: #fff; }
[data-sale-sts="300"],
[data-sale-sts="301"]
  { background-color: var(--tea-br); color: #fff; }
[data-sale-sts="109"],
[data-sale-sts="119"],
[data-sale-sts="199"],
[data-sale-sts="209"]
  { background-color: #777777; color: #fff; }
[data-sale-sts="155"],
[data-sale-sts="555"]
  { background-color: var(--dan); color: #fff; }

/* 印刷 */
.print-only,
.print-mode :is(header, .section-content .l, .pg-ttl-wrap, .l2d-list, .det-wrap)
 { display: none; }
.print-mode .print-only { display: block; }
.print-mode .main-content > .section-content.lr { display: block; }
.print-mode .main-content > .section-content.lr > .r > section { min-width: auto; max-width: none; }
.print-mode .l2d-outer { overflow: auto; }
.print-mode .l2d-inner { width: auto; display: block; overflow: auto; }
.print-mode .l2d-inner .l2d-det { left: auto; width: auto; position: static; }

@media print {
  @page {
    margin : 0 auto;
    size: A4 landscape;
  }
  body { -webkit-print-color-adjust: exact; } /* 色が付く（一部ブラウザ？） */
  body.print-mode-cal { zoom: 1.0; } /* 必要に応じて */

  #page-list > li ~ li { break-before: page; }
}


/* For SmartPhone & Tablet */
@media screen and (max-width: 1050px) {

  /* 顧客側_cstmr_cmn.cssからコピー...精査していない */
/*  header { padding: 16px 8px; }*/
/*  main { padding: 6px 8px; }*/

}

/* For SmartPhone */
@media screen and (max-width: 767px) {

  .loading-content { display: none !important; } /* スマホはアニメーションが固まることがあるので文字なし */
  .sp-ta-l { text-align: left !important; }
  .sp-font-size12 { font-size: 12px !important; }

  .inp-wrap.sep2 { flex-wrap: wrap; gap: 12px; }
  .sts-shop-box > div { gap: 20px; flex-wrap: wrap; }
  .inp-wrap.sep2 > dl,
  .sts-shop-box dl
    { width: 100%; }

  .inp-wrap > dl > dl, #mainte-box > div > dl {
    flex-wrap: wrap;
  }

  .pg-ttl-wrap > ul > li:last-of-type { font-size: 24px; }
  .sts-shop-box { margin-top: 20px; }

  .inp-wrap > dl > dl > dt:not(.sub-ttl),
  .inp-wrap > dl > dl > dt, .inp-wrap > dl > dl > dt div,
  .inp-wrap dl dl dd {
    width: 100%;
  }
  .inp-wrap dl dl dd {
    width: 100%;
    min-width: auto;
    max-width: none;
    padding-left: 20px;
  }

}