@charset "UTF-8";
/** app css */

:root {
  --body-bgcolor: #fff;
  --content-width: auto;
  --content-bgcolor: #fff;

  --main-color: #FEF3C2;
  --sub-color: #FBB828;

  --app-font-color: #333333;
  --sub-font-color: #777777;

  --font-size-LL: 26px;
  --font-size-L: 22px;
  --font-size-M: 16px;
  --font-size-NML: 14px;
  --font-size-S: 12px;

  --btn-nml-bgcolor: #36BBED;
  --btn-ccl-bgcolor: #D9D9D9;
  --btn-del-bgcolor: #CA3838;
  --btn-cmd-bgcolor: #D9D9D9;

  --srv-tp-1-color: #48AE0C;
  --srv-tp-2-color: #E8629C;
  --srv-tp-4-color: #47B5DB;
  --srv-tp-8-color: #8164E3;

  --use-tp-901-color: #BFBFBF;
  --use-tp-909-color: #7F7F7F;

  --link-color: #5269D2;

  --normal-color: #259A42;
  --error-color: #CA3838;

  --form-border: 1px solid #D9D9D9;
  --tbl-br-color: #D9D9D9;

  --hover-color: rgb(254 243 194 / 30%);
}

body { background-color: var(--body-bgcolor); color: var(--app-font-color); font-size: var(--font-size-NML); }
.content { width: var(--content-width); max-width: var(--content-width); min-height: calc(100vh - 1px); margin: 0 auto; background-color: var(--content-bgcolor); }
.content:not(.-view) { position: relative; }
.content:not(.-view)::before { content: ' '; position: absolute; z-index: 999; top: 0; bottom: 0; left: 0; right: 0; background: #fff; }

/* メッセージ */
.msgbox-outer { z-index: 99; position: fixed; top: 70px; left: 50%; transform: translateX(-50%); font-size: 16px; max-height: 850px; }
.msgbox-err, .msgbox-wrn, .msgbox-cmp { border: 2px solid #000; padding: 10px 20px; letter-spacing: 0.1em; min-width: 350px; border-radius: 7px; max-height: 400px; overflow-y: auto; }
.msgbox-err:empty, .msgbox-wrn:empty, .msgbox-cmp:empty { display: none; }
.msgbox-err { background-color: rgb(255, 233, 233, 0.8); border-color: var(--danger); color: var(--danger); }
.msgbox-wrn { background-color: rgb(255, 255, 233, 0.8); border-color: var(--warning); color: var(--warning); }
.msgbox-cmp { background-color: rgb(233, 255, 233, 0.8); border-color: var(--secondary); color: var(--secondary); }
.msgbox-err>*, .msgbox-wrn>*, .msgbox-cmp>* { overflow: visible; text-overflow: clip; white-space: break-spaces; }

/* 共通エラー画面 */
.err-box { min-width: 350px; max-width: 850px; margin: auto; margin-top: 40px; text-align: center; }
.err-box h1 { font-size: 26px; font-weight: bold; padding: 10px 10px; }

/* アイコン */
.icn-mng::before,
.icn-user::before {
  font-family: 'Font Awesome 5 Free';
  margin-right: 0.5em;
  color: var(--sub-color);
  font-size: var(--font-size-M);
  font-weight: 900;
}
.icn-mng::before { content: '\f508'; }
.icn-user::before { content: '\f007'; }

[class^="srv-tp-"] {
  display: inline-block;
  padding: 2px 6px;
  border: 2px solid;
  border-radius: 4px;
  width: 60px;
  text-align-last: justify;
  background-color: #fff;
}

.srv-tp-1 { color: var(--srv-tp-1-color); }
.srv-tp-2 { color: var(--srv-tp-2-color); }
.srv-tp-4 { color: var(--srv-tp-4-color); }
.srv-tp-8 { color: var(--srv-tp-8-color); }
.-serviceType1-severeChildFlg1::after { content: '(重)'; font-size: 11px; }
.srv-tp-1.-serviceType1-severeChildFlg1 { position: relative; }
.srv-tp-1.-serviceType1-severeChildFlg1::after { background-color: #fff; position: absolute; top: 50%; transform: translateY(-50%); right: 2px; }

.mini[class^="srv-tp-"], .mini[class^="use-tp-"] { width: 20px; height: 20px; padding: 0; text-align-last: center; font-size: var(--font-size-S); }
.mini.srv-tp-1:after { content: '放'; }
.mini.srv-tp-2:after { content: '児'; }
.mini.srv-tp-4:after { content: 'シ'; }
.mini.srv-tp-8:after { content: '生'; }
.mini.srv-tp- { display: none; }
.mini[class^="use-tp-"] { display: inline-block; background-color: var(--use-tp-901-color); border-color: var(--use-tp-901-color); border-radius: 4px; }
.mini.use-tp-901:not(.sp-only):after, .mini.use-tp-909:not(.sp-only):after { content: '　'; background-color: var(--use-tp-901); }
.mini.use-tp-909:not(.sp-only) { background-color: var(--use-tp-909-color); border-color: var(--use-tp-909-color); }

[data-sf="st"]::before { content: '迎え'; }
[data-sf="fin"]::before { content: '送り'; }

/* フォントサイズ */
.fs-LL { font-size: var(--font-size-LL) !important; }
.fs-L { font-size: var(--font-size-L) !important; }
.fs-M { font-size: var(--font-size-M) !important; }
.fs-S { font-size: var(--font-size-S) !important; }

.u-binCnt:not(:empty)::after { content: '便目'; font-size: 80%; margin-left: 0.1em; }

/* ボタン */
.btn:not(.bdg):focus { outline: none; }
.btn { border: none; text-shadow: none; box-shadow: none; }
.btn.nml { background-color: var(--btn-nml-bgcolor); }
.btn.ccl { background-color: var(--btn-ccl-bgcolor); }
.btn.del { background-color: var(--btn-del-bgcolor); }
.btn.cmd { background-color: var(--btn-cmd-bgcolor); color: var(--app-font-color); }
button ~ button { margin-left: 32px; }

/* 時間入力 */
input[type="time"][step="300"], input[type="time"][step="60"] { width: 100px; }

/* ラジオボタン・チェックボックス */
.rdo [type="radio"]:checked+label::after,
[type="radio"].rdo:checked+label::after {
  background-color: #4c65d1;
}
.rdo [type="radio"]+label::before, [type="radio"].rdo+label::before,
.rdo [type="radio"]:checked+label::before, [type="radio"].rdo:checked+label::before {
  border-color: #999;
}
.chk label::before {
  border-right-color: var(--normal-color);
  border-bottom-color: var(--normal-color);
}
.chk input[type=checkbox]:checked+label::after {
  border-color: #ccc;
}
.vc-radio-grp.box-err,
.vc-checkbox-grp.box-err
 { box-shadow: none; }

.flg-icon { margin-left: 6px; font-family: 'Font Awesome 5 Free'; font-weight: 400; vertical-align: baseline; }
.flg-icon.circle::before, .flg-icon.flg1::before { content: '\f111'; font-size: var(--font-size-M); }
.flg-icon.cross::before { content: '\f00d'; font-weight: 900; font-size: 18px; }
.flg-icon.hyphen::before, .flg-icon.flg0::before { content: '\f068'; font-weight: 900; font-size: var(--font-size-S); }


/* Form */
input, textarea, select { font-size: var(--font-size-NML); }
.datepicker-here-wrap.icn-cal::after { bottom: unset; top: 50%; transform: translateY(-50%); }
.required_clm::after { display: none; }
.required_clm:not(.in-textarea), .ctrlenter_clm:not(.in-textarea) { width: 100%; }

/* 見出し */
h1 { font-size: var(--font-size-LL); font-weight: bold; }
h2 { font-size: var(--font-size-L); font-weight: bold; }
h3 { font-size: var(--font-size-M); font-weight: bold; }

/* リンク */
a { color: var(--link-color); }
a:hover { opacity: 0.8; }
[title="クリックして詳細へ"] { cursor: pointer;}

/** %を表示させる際に「-NaN」などを表示させない */
.u-per.divide-0 { color: transparent; }

/* 詳細・編集テーブル */
[data-det-edit] { width: 1000px; }
[data-det-edit="det"] .-edit,
[data-det-edit="edit"] .-det {
  display: none;
}
table.inpt-tbl tr th { width: 200px; padding-left: 8px; background-color: var(--main-color); border: var(--form-border); }
table.inpt-tbl tr:not(.subth) th:first-child { border-left: var(--form-border); }
table.inpt-tbl tr th, table.inpt-tbl tr th div { text-align: left; }
table.inpt-tbl tr td { border: var(--form-border); padding-left: 12px; }
[data-det-edit="edit"] table.inpt-tbl tr td { padding: 4px 8px; }
[data-det-edit="det"] table.inpt-tbl input,
[data-det-edit="det"] table.inpt-tbl select,
[data-det-edit="det"] table.inpt-tbl label
 { border: 0; padding: 0; pointer-events: none; -webkit-appearance: none; appearance: none; cursor: auto; }
[data-det-edit="det"] table.inpt-tbl select { min-height: auto; }
[data-det-edit="det"] .rdo [type="radio"] + label .flg-icon { margin-left: 0; }
[data-det-edit="det"] table.inpt-tbl input[type="radio"]:checked + label::before,
[data-det-edit="det"] table.inpt-tbl input[type="radio"]:checked + label::after,
[data-det-edit="det"] table.inpt-tbl input[type="radio"]:not(:checked) + label,
[data-det-edit="det"] .rdo [type="radio"] + label .flg-icon.flg0,
[data-det-edit="det"] table.inpt-tbl input[type="checkbox"]:checked + label::before,
[data-det-edit="det"] table.inpt-tbl input[type="checkbox"]:checked + label::after,
[data-det-edit="det"] table.inpt-tbl input[type="checkbox"]:not(:checked) + label,
[data-det-edit="det"] table.inpt-tbl .chk-wrap .rdo:not(.is-checked),
[data-det-edit="det"] table.inpt-tbl .chk-wrap .chk:not(.is-checked)
 { display: none; }
table.inpt-tbl + .btn-outer { margin-top: 24px; padding-right: 24px; }
table.inpt-tbl + .btn-outer .-det, table.inpt-tbl + .btn-outer .-edit { text-align: center; }
.sw-flash { animation: flsh0 0.9s ease; }
[data-det-edit="det"] :placeholder-shown { color: transparent; }
[data-det-edit="det"] ::-webkit-input-placeholder { color: transparent; } /* Google Chrome, Safari, Opera 15+, Android, iOS */
[data-det-edit="det"] :-moz-placeholder { color: transparent; opacity: 0; } /* Firefox 18- */
[data-det-edit="det"] ::-moz-placeholder { color: transparent; opacity: 0; } /* Firefox 19+ */
[data-det-edit="det"] :-ms-input-placeholder { color: transparent; } /* IE 10+ */
table.inpt-tbl select { width: auto; }
.inpt-tbl .chk-wrap { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; }
.inpt-tbl .chk label { vertical-align: baseline; }
[data-det-edit="edit"] .vc-radio-grp .rdo ~ .rdo { margin-top: 6px; }

/* 一覧テーブル */
.list-box .tbl-outer { max-height: calc(100vh - 210px); }
table.list-tbl tr th, table.tbl-th tr th { background-color: transparent; color: var(--app-font-color); text-align: left; border: none; padding: 4px; }
table.list-tbl tr td { border-left: none; border-right: none; height: 40px; }
table.list-tbl tr td:not(:last-of-type) { padding-right: 8px; }
.vertical-border table.tbl-th tr > th { border: 1px solid var(--app-font-color); background-color: var(--main-color); text-align: center; }
.vertical-border table.list-tbl tr td { padding: 2px 4px; border: 1px solid var(--app-font-color); border-top-color: transparent; text-align: center; }

/* 絞り込み */
ul.filter-inp-box { display: flex; margin-bottom: 32px; }
ul.filter-inp-box li { padding: 20px 24px 4px 4px; position: relative; }
ul.filter-inp-box li::before { content: attr(data-ttl); position: absolute; top: 0; }

/* 戻る・ボタン付きのヘッダー */
.head-box { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; }
.head-box, .pn-box, .head-w { max-width: 1000px; }

/* 前へ・次へ */
.pn-box { padding: 2px 0; display: flex; justify-content: space-between; align-items: flex-end; }
.pn-box li:first-of-type,
.pn-box li:last-of-type,
.pn-box li:first-of-type label,
.pn-box li:last-of-type label {
  color: var(--link-color);
  cursor: pointer;
}
.pn-box li:first-of-type:hover,
.pn-box li:last-of-type:hover {
  opacity: 0.8;
}
.pn-box li:first-of-type::before { content: '\f536　'; font-family: 'Font Awesome 5 Free'; font-weight: 900; letter-spacing: -2px; }
.pn-box li:last-of-type::after { content: '　\f531'; font-family: 'Font Awesome 5 Free'; font-weight: 900; letter-spacing: -4px; margin-right: 4px; }
.pn-box .datepicker-here { text-align: center; }

/* 絞り込み */
form[name="searchForm"] { margin: 20px 0; }
form[name="searchForm"] > dl { margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; }
form[name="searchForm"] > dl > dt { width: 100px; font-size: var(--font-size-M); line-height: var(--font-size-M); }
form[name="searchForm"] > .btn-outer { text-align: center; }
dl.sevt-wrap > dd { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
dl.office-wrap > dd { width: 300px; }
dl.rsv-office-wrap { margin: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 32px; }
dl.rsv-office-wrap:first-of-type { margin-top: 16px; }
dl.rsv-office-wrap:last-of-type { margin-bottom: 16px; }
dl.rsv-office-wrap ~ .rsv-office-wrap { margin-top: 8px; }
dl.rsv-office-wrap > dt { min-width: 50px; }
dl.rsv-office-wrap > dd { display: flex; flex-wrap: wrap; }
dl.rsv-office-wrap select { min-width: 160px; }

/* カレンダー */
.cal-box { display: flex; flex-wrap: wrap; width: 980px; }
.cal-box > li { width: 140px; border-right: 1px solid; border-bottom: 1px solid; }
.cal-box > li:nth-of-type(7n+1) { color: red; border-left: 1px solid; border-color: var(--app-font-color); }
.cal-box > li:nth-of-type(7n+7) { color: blue; border-color: var(--app-font-color); }
.cal-box > li.holiday { color: red; border-color: var(--app-font-color); }
.cal-box > li.yobi-jp:nth-of-type(7n+1) { background-color: #ffcdcd; }
.cal-box > li.yobi-jp:nth-of-type(7n+7) { background-color: var(--saturday); }
.cal-box .yobi-jp, .cal-box .day-num { font-weight: bold; text-align: center; }
.cal-box .yobi-jp { border-top: 1px solid; }
.cal-box .day-num { min-height: 22px; background-color: var(--main-color); border-bottom: 1px solid var(--app-font-color); }
.cal-box .rsv-box {
  min-height: 100px; color: var(--app-font-color);
  -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}

/* 印刷モード */
.print-mode .content.g-row.sep2 { grid-template-columns: max-content; overflow: hidden; }
body:not(.print-mode) .print-only,
.print-mode .side-menu.clm1,
.print-mode .head-box .back-btn,
.print-mode .head-box button,
.print-mode .pn-box,
.print-mode .sp-only
 { display: none; }
.print-mode.print-mode-cal main section:not(.print-cal),
.print-mode.print-mode-cal .pankuzu li:not(:last-of-type),
.print-mode.print-mode-cal .pankuzu li::before,
.print-mode.print-mode-cal .cal-box.user-rsv .rsv-box.-empty-rsv .st-fin-wrap:not(.not-cng)::before
 { display: none; }
.print-mode.print-mode-cal .pankuzu { margin-bottom: 0; }
.print-mode .head-box h1,
.print-mode .head-box h2,
.print-mode .head-box h3
 { width: 100%; }
.print-mode .head-box,
.print-mode .head-w
 { max-width: none; }
.print-mode .head-box { padding-bottom: 0; }
.print-mode .data-wrap .list-box { margin-top: 0; }

.print-mode-cal .main-content { padding: 0; margin: 0 auto; min-width: auto; }
.print-data { font-size: var(--font-size-M); }

@media print {
  @page {
    margin : 0;
    size: A4 landscape;
  }
  body { -webkit-print-color-adjust: exact; } /* 色が付く（一部ブラウザ？） */
  body.print-mode-cal { zoom: 0.8; } /* デフォルト0.8倍にする 収まらない場合は印刷設定で手動変更をお願いします */
/*  .print-cal, .print-cal .cal-box { margin: auto; }*/
}
