html,
body {
  height: 100%;
}


.pc-show {
  display: block;
}

.sp-show {
  display: none;
}

.margin-none {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

body {
  padding: 0;
}

.date-font {
  font-family: "ヒラギノ角ゴ" !important;
}

.date-font--semiBold {
  font-family: "ヒラギノ角ゴ" !important;
  font-weight: 600 !important;
}

.h1 {
  font-size: 28px;
  line-height: 34px;
}

.h1,
.h2,
.h3 {
  margin-bottom: 0 !important;
}

/* タグ関連 */

.tag-box,
.workflow-option-box,
.add-box {
  display: flex;
  gap: 16px;
  align-items: center;
}

.tag-items {
  display: flex;
  gap: 8px;
}

.tag-box ::selection,
.workflow-option-box ::selection,
.add-box::selection {
  color: #fff;
  background: #4285f4;
}

.tag-box .wrapper,
.workflow-option-box .wrapper,
.add-box .wrapper {
  position: relative;
}

/* .tag-box .wrapper,
#mention-wrap .wrapper {
  position: relative;
} */

.overlay,
.mention_overlay,
.workflow-overlay,
.add-box-overlay {
  position: fixed;
  /* 画面全体を覆う */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  /* デフォルトでは非表示 */
  z-index: calc(var(--header-z-index) + 1);
  /* 他の要素より前面に表示 */
}

.tag-box .tag-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#est-create-setting-accordion {
  overflow-y: auto;
}

.tag-box .wrapper .select-btn,
.tag-box .wrapper li,
#mention-wrap .wrapper .select-btn,
#mention-content li,
#est-create-setting-accordion .options li,
.workflow-option-box .wrapper .select-btn,
.workflow-option-box .wrapper li,
.add-box .wrapper .select-btn,
.add-box .wrapper li {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.tag-box .wrapper .content {
  width: 300px;
  display: none;
  margin-top: 15px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  position: absolute;
}

.workflow-option-box .wrapper .content {
  width: 400px;
  display: none;
  margin-top: 15px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  position: absolute;
}

.add-box .wrapper .content {
  width: 300px;
  display: none;
  margin-top: 15px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid #e3e3ea;
  position: absolute;
}

#mention-content {
  width: 300px;
  display: none;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.tag-box .wrapper.active .content,
.workflow-option-box .wrapper.active .content,
.add-box .wrapper.active .content {
  z-index: calc(var(--header-z-index) + 2);
  display: block;
}

.tag-box .content .search,
#mention-content .search,
.workflow-option-box .content .search,
.add-box .content .search {
  position: relative;
  border-bottom: 1px solid #e3e3ea;
  padding: 16px;
}

.tag-box .search i,
#mention-content .search i,
.workflow-option-box .search i,
.add-box .search i {
  top: 50%;
  left: 15px;
  color: #999;
  font-size: 20px;
  pointer-events: none;
  transform: translateY(-50%);
  position: absolute;
}

.tag-box .search input:focus,
#mention-content .search input:focus,
.workflow-option-box .search input:focus,
.add-box .search input:focus {
  padding-left: 10px;
  border: 2px solid #4285f4;
}

.tag-box .search input::placeholder,
#mention-content .search input::placeholder,
.workflow-option-box .search input::placeholder,
.add-box .search input::placeholder {
  color: #bfbfbf;
}

.tag-box .content .options,
#mention-content .options,
.workflow-option-box .content .options,
.add-box .content .options {
  max-height: 250px;
  overflow-y: auto;
  padding-right: 9px;
  padding-left: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}

#est-create-setting-accordion .options {
  max-height: 250px;
  overflow-y: auto;
  padding: 8px;
  border-bottom: 1px solid #e3e3ea;
  border-top: 1px solid #e3e3ea;
}

.tag-box .options::-webkit-scrollbar,
#mention-content .options::-webkit-scrollbar,
.workflow-option-box .options::-webkit-scrollbar,
#est-create-setting-accordion .options::-webkit-scrollbar,
.add-box .options::-webkit-scrollbar {
  width: 7px;
}

.tag-box .options::-webkit-scrollbar-track,
#mention-content .options::-webkit-scrollbar-track,
.workflow-option-box .options::-webkit-scrollbar-track,
#est-create-setting-accordion .options::-webkit-scrollbar-track,
.add-box .options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 25px;
}

.tag-box .options::-webkit-scrollbar-thumb,
#mention-content .options::-webkit-scrollbar-thumb,
.workflow-option-box .options::-webkit-scrollbar-thumb,
#est-create-setting-accordion .options::-webkit-scrollbar-thumb,
.add-box .options::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 25px;
}

.tag-box .options::-webkit-scrollbar-thumb:hover,
#mention-content .options::-webkit-scrollbar-thumb:hover,
.workflow-option-box .options::-webkit-scrollbar-thumb:hover,
#est-create-setting-accordion .options::-webkit-scrollbar-thumb:hover,
.add-box .options::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3;
}

.tag-box .options li,
#mention-content .options li,
.workflow-option-box .options li,
.add-box .options li {
  min-height: 40px;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #d9d9d9;
}

#est-create-setting-accordion .options li {
  min-height: auto;
  display: flex;
  padding: 4px 16px;
  border-bottom: 1px solid #e3e3ea;
  align-items: baseline;
}

#est-create-setting-accordion .options li .checkboxButton {
  margin: 0;
}

.tag-box .options li:last-child,
#mention-content .options li:last-child,
.workflow-option-box .options li:last-child,
#est-create-setting-accordion .options li:last-child,
.add-box .options li:last-child {
  border-bottom: none;
}

.tag-box .options li:hover:not(.no-result),
.tag-box li.checked:not(.no-result),
#mention-content .options li:hover:not(.no-result),
#mention-content li.checked:not(.no-result),
.workflow-option-box .options li:hover:not(.no-result),
.workflow-option-box li.checked:not(.no-result),
#est-create-setting-accordion .options li:hover:not(.no-result),
#est-create-setting-accordion li.checked:not(.no-result),
.add-box .options li:hover:not(.no-result),
.add-box li.checked:not(.no-result) {
  border-radius: 5px;
  background: #f2f2f2;
}

/* 追加 */
.tag-box .item .checkbox,
#mention-content .item .checkbox,
.add-box .item .checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  width: 16px;
  border-radius: 4px;
  border: 1.5px solid #c0c0c0;
  transition: all 0.3s ease-in-out;
}

.tag-box .item.checked .checkbox,
#mention-content .item.checked .checkbox,
.add-box .item.checked .checkbox {
  background-color: #4070f4;
  border-color: #4070f4;
}

.tag-box .checkbox .check-icon,
#mention-content .checkbox .check-icon,
.add-box .checkbox .check-icon {
  color: #fff;
  font-size: 11px;
  transform: scale(0);
  transition: all 0.2s ease-in-out;
}

.tag-box .item.checked .check-icon,
#mention-content .item.checked .check-icon,
.add-box .item.checked .check-icon {
  transform: scale(1);
}

.tag-box .bottom-content,
#mention-content .bottom-content,
.workflow-option-box .bottom-content,
.add-box .bottom-content {
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 8px;
  border-top: 1px solid #e3e3ea;
  cursor: pointer;
}

.workflow-option-box .bottom-content {
  justify-content: space-between;
}

#mention-content .item .checkbox {
  min-width: 16px;
}

/* コメント */

/* 各機能の上部（案件情報） */
.property-content-top-container .h1 {
  font-size: 28px;
  line-height: 34px;
}

/* ヘッダー部分 */
header {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: var(--header-z-index);
}

/* ラベルタグ */
.label-tag {
  width: auto;
  height: 20px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #2fb531;
  background-color: #f4ffef;
  color: #2fb531;
  border-radius: 4px;
}

.label-tag .btn-close {
  padding: 0;
  width: 8px;
  height: 8px;
  color: #2fb531;
}

/* 未読数などのバッジ */
.alert-counts {
  width: var(--alert-counts-width);
  height: var(--alert-counts-height);
  background: red;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.alert-counts.comment-all {
  background: #ffffff;
  color: #0877e8;
  border: 1px solid #0877e8;
}

.alert-counts.hidden {
  background: transparent;
  color: transparent;
  border: 1px solid transparent;
}

.alert-counts.hidden span {
  display: none;
}

/* メニュー */
.add-texts {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* チェックボックスのマージン */
.checkboxButton {
  margin: 0;
}

.property-content-top-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.property-content-top-container .info-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.property-content-wrapper {
  width: calc(100% - var(--left-menu-width-pc));
  position: relative;
  left: var(--left-menu-width-pc);
  top: var(--header-height-pc);
  padding: 24px 40px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color: #f2f4f6;
}

.cancel-btn-wrap {
  display: flex;
  justify-content: flex-end;
  gap: 8px;

}

/* 通知 */
.alert-count {
  background: red;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  display: inline-block;
  text-align: center;
  position: absolute;
  top: -4px;
  left: 15px;
  min-width: 20px;
  min-height: 18px;
  line-height: 18px;
  font-size: 10px;
}

.alert-count-menu {
  top: 0px;
  left: 25px;
}

.midoku-list-item {
  display: flex;
  gap: 4px;
}

/* 通知 */
.alert-count-zero {
  background: #fff;
  width: 20px;
  border-radius: 50%;
  color: rgba(0, 0, 0);
  font-size: 10px;
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

.system-notice {
  width: 100%;
  padding-top: calc(var(--header-height-pc) + 24px);
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  background: #f2f4f6;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}

.top-content-notice-box {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

.top-content-notice-box.bottom-padding {
  padding-bottom: 24px !important;
}

.system-notice-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.system-notice-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  padding: 8px;
  border: 1px solid #999;
  border-radius: 8px;
  background-color: #fff;
}

@media screen and (max-width: 1800px) {
  .property-content-wrapper {
    width: 100%;
    left: 0;
  }

  .property-content-wrapper .property-content-top-container {
    padding-left: 24px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1599px) {

  .md-fontsize-12 {
    font-size: 12px !important;
  }

  .md-fontsize-14 {
    font-size: 14px !important;
  }

  .md-fontsize-16 {
    font-size: 16px !important;
  }
}


@media screen and (max-width: 768px) {

  .property-content-wrapper .property-content-top-container {
    padding-left: 0px;
  }

  .pc-show {
    display: none;
  }

  .sp-show {
    display: block;
  }

  .label1 {
    font-size: 10px;
    line-height: 14px;
  }

  .body1 {
    font-size: 14px;
    line-height: 20px;
  }

  #right-side-wrap {
    display: none;
  }

  .alert-counts {
    width: var(--alert-counts-width-sp);
    height: var(--alert-counts-height-sp);
  }

  .property-content-wrapper {
    padding: 24px 16px 160px 16px;
    top: var(--header-height-top-sp);
  }

  .property-content-top-container .h1 {
    font-size: 20px;
    line-height: 26px;
  }

  .property-content-top-container .h2_secondary {
    font-size: 14px;
    line-height: 20px;
  }

  .tag-box .wrapper .content,
  .add-box .wrapper .content {
    width: calc(100vw - 32px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
  }

  .tag-box .wrapper .content .options,
  .add-box .wrapper .content .options {
    background-color: rgba(242, 244, 246, 1);
    padding-bottom: 64px;
  }

  .tag-box .wrapper .content .options li,
  .add-box .wrapper .content .options li {
    background-color: #fff;
  }

  .overlay {
    background-color: rgba(0, 0, 0, 0.7);
  }

  .tag-box-sp-title {
    padding: 8px 16px 0 16px;
    text-align: center;
  }

  .system-notice {
    display: none;
  }
}