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

:root {
  --body-bgcolor: var(--tmt-op10);
  --content-width: 1300px;
  --content-bgcolor: #fff;

  --tbl-hd-bgcolor: var(--tmt-br);
}

.hidhid { display: none !important; }

body { background-color: var(--body-bgcolor); }
.content { width: var(--content-width); max-width: var(--content-width); min-height: calc(100vh - 1px); min-height: calc(100dvh - 1px); margin: 0 auto; background-color: var(--content-bgcolor); }
main { padding: 12px 20px; }

/* message */
.msgbox-outer { z-index: 99; position: fixed; top: 70px; 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; }

/* 共通部品 */
input, select { font-size: 16px; padding: 4px 8px; }
textarea { font-size: 14px; padding: 4px 8px; max-height: 200px; }
.btn.icn.i-prv::before { content: '\f03e'; font-weight: normal; }/* プレビューボタン */
.datepicker-here-wrap.icn-cal::after { top: 50%; transform: translateY(-50%); bottom: auto; right: 10px; }
.required_clm:has(.datepicker-here-wrap) { width: fit-content; }
.content > h1 {
  font-weight: bold;
  padding: 6px 8px 2px;
  position: relative;
  font-size: 18px;
  border-bottom: 3px solid;
  color: var(--tmt);
}

table th {
  letter-spacing: 0.2em;
  text-align: left;
  padding-left: 20px;
}
table th .kk-wrap::before, table th .kk-wrap::after { font-size: 100%; }
table th:has([data-sort].fs-sml) { position: relative; }
table th:has([data-sort].fs-sml) :is(span, a:not(:last-of-type)) { margin-right: 30px; }
table th [data-sort].fs-sml { position: absolute;  bottom: 1px; right: 8px; letter-spacing: 0; }
table tr td { padding: 6px 8px; }
table th label:has(div.kk-wrap) { line-height: 1; }
table th div.kk-wrap { display: flex; justify-content: center; font-size: 13px; letter-spacing: 0; }
table th span.kk-wrap { display: inline-flex; margin-left: 0.8em; vertical-align: baseline; font-size: 13px; letter-spacing: 0; }
.list-box .tbl-outer { max-height: calc(100vh - 192px); max-height: calc(100dvh - 192px); }
td:has(.to-det-btn) { text-align: center; }
tr.for-new-row { display: none; }
[data-empty-ttl]:not(:has(li))::before { color: #999; }

.filter-inp-box > ul {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 6px;
}
.filter-inp-box > ul li:has([data-ftarget="keyword"]) {
  position: relative;
}
.filter-inp-box > ul li:has([data-ftarget="keyword"])::before {
  content: '\f002';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #999;
}
.filter-inp-box > ul [data-ftarget="keyword"] {
  padding-left: 28px;
  width: 360px;
}
.filter-wrap:not(:has(.del-row)) li:has(#chk_delFlg0) {
  display: none;
}
.to-det-btn[data-det-id="0"] {
  position: absolute;
  right: 0;
}

/* テーブル ＞ テーブル内リスト */
table:has(.sub-list) tr td {
  height: 47px;
}
td .sub-list {
  font-size: 13px;
  display: flex;
  flex-wrap: wrap-reverse;
  position: relative;
}
td .sub-list li {
  width: 100%;
  display: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
td .sub-list li:nth-last-of-type(-n+2) {
  display: list-item;
}
td .sub-list li:nth-last-of-type(2) {
  margin-right: 40px;
}
td .sub-list::before {
  content: '他 'attr(data-etc-cnt)'件';
  color: #777;
  position: absolute;
  right: 0;
  bottom: -4px;
}
td .sub-list:not(:has(li:nth-of-type(3)))::before {
  display: none;
}
.list-box[data-empty-ttl]:not(:has(tbody tr))::before {
  display: block;
  padding: 20px;
  color: #555;
}

/* テーブル ＞ 自分の担当 */
/*tr.my-row td,*/
/*.list-box table tr.my-row:last-of-type td {*/
/*  border-bottom: 2px solid var(--blu);*/
/*  padding-bottom: 2px;*/
/*}*/

/* リンク */
[data-mv], div[onclick^="mv("] { cursor: pointer; color: var(--blu-br); }
[data-mv]:hover, div[onclick^="mv("]:hover { color: var(--blu-tn); }
[data-mv]:is([data-btm-num=""], [data-btm-num="0"]) { color: #555; pointer-events: none; }

/* タイトル */
.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: '\f054';
  padding: 0 12px;
  font-size: 18px;
  font-family: "Font Awesome 5 Free";
  -moz-osx-font-smoothing: grascale;
  -webkit-font-smoothing: antialiased;
  font-weight: 900;
  color: #999;
}
.pg-ttl-wrap > ul > :is(.to-list-btn, li[onclick]) { color: var(--blu-br); cursor: pointer; }
.pg-ttl-wrap > ul > :is(.to-list-btn, li[onclick]):hover { color: var(--blu-tn); text-decoration: underline; }
.pg-ttl-wrap > ul > li:last-of-type { font-weight: bold; font-size: 24px; }
.pg-ttl-wrap > ul > li:last-of-type:empty:after { content: '新規登録'; }

/* 詳細 */
.det-content {
  margin: 32px 0;
}
.det-content.kurukuru {
  font-size: 72px;
  min-height: 200px;
  text-align: center;
  padding: 60px;
}
.attr-box.clm1 {
  border-right: 2px solid #999;
  padding-right: 20px;
}
.attr-box+.clm2 {
  padding-left: 20px;
}
.attr-box .g-row { gap: 28px; }
.attr-box dl.w50 { width: 47%; }
.attr-box dl.w60 { width: 58%; }
.attr-box dl ~ dl,
dl:has(.autohi) {
  margin-top: 24px;
}
.attr-box dl dt {
  font-size: 14px;
  font-weight: bold;
}
.attr-box dl dd {
  padding-left: 20px;
  margin-top: 2px;
  min-height: 46px;
}
.attr-box dl dd .toggle-chk {
  height: 30px;
  margin-left: 9px;
}
.attr-box [data-pw-edit] > div {
  min-height: 46px;
}
.attr-box form > .btn-outer {
  margin-top: 40px;
  text-align: center;
}
.gmap-wrap {
  border: var(--tbl-br);
  min-height: 182px;
  border-radius: 4px;
}
[data-ie="edit"] .gmap-wrap,
.gmap-wrap:empty {
  background-color: #f1f1f1;
  text-align: center;
  padding: 80px 0;
  color: #777;
}
[data-ie="edit"] .gmap-wrap::before,
.gmap-wrap:empty::before {
  content: '登録すると地図が表示されます。';
}
.addinfo-box {
  margin-top: 20px;
}
.staff-img-box {
  width: 36px;
  height: 36px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: 1px solid #ccc;
}
.staff-img-box:empty {
  background-image: url(/resources/iside/img/facephoto-noimg.png);
}
.det-content ul[data-empty-ttl]:has([data-buil-id]) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}

/* アイコン */
header [onclick] a::before,
.content > h1::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 0.2em;
}
header [onclick*="dashboard"] a::before,
.content[data-jsp-path*="dashboard"] > h1::before {
  content: '\f3fd';
}
header [onclick*="task"] a::before,
.content[data-jsp-path*="task"] > h1::before {
  content: '\f0ae';
}
header [onclick*="cstmr"] a::before,
.content[data-jsp-path*="cstmr"] > h1::before {
  content: '\e065';
}
header [onclick*="buil"] a::before,
.content[data-jsp-path*="buil"] > h1::before {
  content: '\f1ad';
}
header [onclick*="nego"] a::before,
.content[data-jsp-path*="nego"] > h1::before {
  content: '\f086';
}
header [onclick*="staff"] a::before,
.content[data-jsp-path*="staff"] > h1::before {
  content: '\f0c0';
}

/* 分数 */
td:has([data-top-num]) {
  text-align: center;
}
[data-top-num]::before,
[data-btm-num]::after {
  min-width: 52px;
  text-align: center;
}
[data-top-num]::before {
  content: attr(data-top-num);
  margin-right: 0.2em;
}
[data-btm-num]::after {
  content: attr(data-btm-num);
  margin-left: 0.2em;
}
[data-top-num=""]::before {
  content: '0';
}
[data-btm-num=""]::after {
  content: '0';
}

/* 商談フェーズ */
.band-rdo :is([name="nego.phase"], [data-ftarget="phase"])+label { padding: 8px 10px; text-align-last: justify; width: 72px; }
.band-rdo :is([name="nego.phase"], [data-ftarget="phase"]):is([value="11"], [value="21"])+label { padding: 8px 12px; }
.band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="91"]+label { padding: 8px 6px; }
.band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="10"]:checked+label, .band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="10"]:hover+label { background-color: var(--red); }
.band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="11"]:checked+label, .band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="11"]:hover+label { background-color: var(--blu); }
.band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="21"]:checked+label, .band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="21"]:hover+label { background-color: var(--suc); }
.band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="91"]:checked+label, .band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="91"]:hover+label { background-color: var(--tea); }
.band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="99"]:checked+label, .band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="99"]:hover+label { background-color: var(--gra); }

.band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="10"].chkstyle+label, .band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="10"].chkstyle:hover+label { background-color: var(--red); }
.band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="11"].chkstyle+label, .band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="11"].chkstyle:hover+label { background-color: var(--blu); }
.band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="21"].chkstyle+label, .band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="21"].chkstyle:hover+label { background-color: var(--suc); }
.band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="91"].chkstyle+label, .band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="91"].chkstyle:hover+label { background-color: var(--tea); }
.band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="99"].chkstyle+label, .band-rdo :is([name="nego.phase"], [data-ftarget="phase"])[value="99"].chkstyle:hover+label { background-color: var(--gra); }

.phase-lbl {
  display: inline-block;
  padding: 2px 12px;
  border: 2px solid;
  border-radius: 8px;
  width: 80px;
  font-size: 15px;
  font-weight: bold;
  text-align-last: justify;
  text-align: center;
}
.phase-lbl[data-phase="10"] { color: var(--red-br); background-color: var(--red-tntn); }
.phase-lbl[data-phase="11"] { color: var(--blu-br); background-color: var(--blu-tntn); }
.phase-lbl[data-phase="21"] { color: var(--suc-br); background-color: var(--suc-tntn); }
.phase-lbl[data-phase="91"] { color: var(--tea-br); background-color: var(--tea-tntn); padding: 2px 6px; }
.phase-lbl[data-phase="99"] { color: var(--gra-br); background-color: var(--gra-tntn); }
.nego-list-wrap [data-phase] .acrd-btn button {
  background-color:
  var(--ora-tntn);
  border-color: var(--ora-br);
  padding-left: 8px;
  color: #555;
  gap: 0.5em;
}
.nego-list-wrap [data-phase="10"] .acrd-btn button { background-color: var(--red-tntn); border-color: var(--red-br); }
.nego-list-wrap [data-phase="11"] .acrd-btn button { background-color: var(--blu-tntn); border-color: var(--blu-br); }
.nego-list-wrap [data-phase="21"] .acrd-btn button { background-color: var(--suc-tntn); border-color: var(--suc-br); }
.nego-list-wrap [data-phase="91"] .acrd-btn button { background-color: var(--tea-tntn); border-color: var(--tea-br); }
.nego-list-wrap [data-phase="99"] .acrd-btn button { background-color: var(--gra-tntn); border-color: var(--gra-br); }
.nego-list-wrap [data-phase] .acrd-body { border-color: var(--ora-br); }
.nego-list-wrap [data-phase="10"] .acrd-body { border-color: var(--red-br); }
.nego-list-wrap [data-phase="11"] .acrd-body { border-color: var(--blu-br); }
.nego-list-wrap [data-phase="21"] .acrd-body { border-color: var(--suc-br); }
.nego-list-wrap [data-phase="91"] .acrd-body { border-color: var(--tea-br); }
.nego-list-wrap [data-phase="99"] .acrd-body { border-color: var(--gra-br); }

/* 状況 */
.band-rdo [data-ftarget="status"] + label {	min-width: 60px; }

/* タスク・活動 */
[data-ie="edit"] + .clm2 .taac-list-wrap {
  display: none;
}
.taac-list-wrap {
  font-size: 14px;
}
.taac-list-wrap {
  height: calc(100dvh - 198px);
  height: calc(100vh - 198px);
  overflow: auto;
}
.taac-list-wrap:has([data-ie="edit"]) {
  height: auto;
}
.taac-list-wrap > li ~ li {
  margin-top: 20px;
}
.taac-list-wrap li .tab-content {
  max-height: none;
}
.taac-list-wrap .init-view {
  border-radius: 4px;
  border: 1px solid;
}
.taac-list-wrap .init-view:has(.actv-icn) {
  border-color: var(--blu);
  background-color: var(--blu-tntn);
}
.taac-list-wrap .init-view:has(.task-icn) {
  border-color: var(--suc);
  background-color: var(--suc-tntn);
}
.taac-list-wrap [data-ie="edit"] .init-view {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.taac-list-wrap :not(.i-add) ~ .edit-only .tab-content {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.taac-list-wrap .init-view dt {
  display: flex;
  align-items: center;
  gap: 4px;
}
.taac-list-wrap .init-view dt [date-fmt] {
  font-size: 12px;
  margin-left: auto;
  margin-right: 4px;
}
.taac-list-wrap .init-view dt div:has(a) {
  max-width: 352px;
  overflow: auto;
  text-overflow: clip;
  white-space: normal;
  word-break: break-all;
  line-height: 1.2;
}
.taac-list-wrap .init-view dt a {
  cursor: pointer;
  color: var(--blu);
}
.taac-list-wrap .init-view dt a:hover {
  color: var(--blu-tn);
}
.taac-list-wrap .init-view dd {
  position: relative;
  margin-left: 26px;
}
.taac-list-wrap .init-view dd .staff-name {
  position: absolute;
  top: 1px;
  right: 8px;
  color: #000;
  border-bottom: 1px dashed;
  font-size: 13px;
}
.taac-list-wrap .init-view dd .staff-name:empty::before {
  content: '担当未登録';
}
.taac-list-wrap .init-view dd .txa-box {
  min-height: auto;
  font-size: 12px;
  line-height: 1.2;
  padding: 20px 8px 2px;;
}
.task-icn, .actv-icn {
  display: inline-block;
  width: 22px;
  padding: 2px;
  border-radius: 4px;
  text-align: center;
  color: #fff;
}
.task-icn {
  background-color: var(--suc);
}
.actv-icn {
  background-color: var(--blu);
}
.task-icn::before,
.tab-nav [data-tab-id^="task_"]::before,
.actv-icn::before,
.tab-nav [data-tab-id^="actv_"]::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
.task-icn::before,
.tab-nav [data-tab-id^="task_"]::before {
  content: '\f0ae';
}
.actv-icn::before,
.tab-nav [data-tab-id^="actv_"]::before {
  content: '\f70c';
}
.taac-list-wrap [data-ie="edit"] .init-view > dd,
.taac-list-wrap [data-ie="edit"] .init-view > dt > div:is(.chk, [date-fmt]) {
  display: none;
}
.attr-box dl dd:has([name$=".status"]) {
  min-height: auto;
}
.band-rdo:has([name$=".status"]) {
  gap: 0 24px;
  width: 300px;
}

/* 商談リスト と それに紐づくタスク・活動 */
.attr-box+.clm2:has(.nego-list-wrap) {
  padding-left: 16px;
}
.nego-list-wrap > li {
  margin: 0 4px;
}
.nego-list-wrap > li ~ li {
  margin-top: 32px;
}
.nego-list-wrap > li:has(.acrd-box[data-op="open"]) {
  outline: 4px solid var(--tmt);
  border-radius: 4px;
/*  background-color: var(--tmt-tntn);*/
}
.nego-list-wrap .acrd-box[data-icn-position="left"] .acrd-btn .btn::before {
  width: 6px;
}
.nego-list-wrap [data-phase] .acrd-btn button a {
  font-size: 13px;
}
.nego-list-wrap [data-phase] .attr-box dl ~ dl, dl:has(.autohi) {
  margin-top: auto;
}
.nego-list-wrap .acrd-btn button {
  width: 100%;
  text-align-last: auto;
  text-align: left;
  letter-spacing: 0;
}
.nego-list-wrap .acrd-btn button [date-fmt="ngp"] {
	font-size: 13px;
    min-width: 100px;
}
.nego-list-wrap .acrd-box[data-op="open"] .acrd-btn button {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.nego-list-wrap .acrd-body {
  padding: 8px 4px 4px;
  border: 1px solid #ccc;
  border-top: none;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}



@media print {
  @page {
    margin : 0 auto;
    /* サイズ 縦向き=portrait／横向き=landscape */
/*    size: A4 landscape;*/
  }

  /* 色が付く（一部ブラウザ？） */
  body { -webkit-print-color-adjust: exact; }

  /* 倍率 ※必要に応じて */
/*  body.print-mode-cal { zoom: 1.0; } */

  /* ページ単位 */
  .page-list > li ~ li { break-before: page; }
}

@media screen and (max-width: 767px) {
  .content {
    width: 100%;
    max-width: 450px;
  }

  .loading-content span { display: none; } /* スマホだとメッセージがきれいに表示されない */
}