@charset "UTF-8";:root {
  /* ブルー系 */
  --common-color-blue: #007bff;
  --common-color-blue-primary: #4169e1d4;
  /*--common-color-light-blue: #03A9F4;*/
  --common-color-light-blue: #4A90E2;
  --common-color-blue-tint: #1a355d0d;
  --common-color-royal-blue: #4169E1;
  --common-color-blue-dark: #0056b3;
  --common-color-blue-transparent: #007bff21;
    /* グリーン系 */
  --common-color-green: #00836b;
  --common-color-green-secondary: #00994d;
  --common-color-green-dark: #006b3f;
  --common-color-green-light-transparent: #A0D87F7F;
  --common-color-green-mid-transparent: #6fb52a7f;
  --common-color-dark-green: #2E4E3F;
    /* グレー系 */
  --common-color-medium-gray-alt: #767676;
  --common-color-gray: #535353;
  /*--common-color-light-gray: #cccaca;*/
  --common-color-light-gray: #d5d5d5;
  --common-color-dark-gray: #3f3f3f;
  --common-color-deep-gray: #333;
  /*--common-color-light-gray-bg: #f1f1f1;*/
  --common-color-medium-gray: #666666;
  --common-color-dark-gray-bg: #333333;
  --common-color-light-gray-bg: #f9f9f9;
  --common-color-gray-light-solid: #DDDDDDFF;
  --common-color-gray-light-transparent: #dddddd7f;
  --common-color-gray-medium-solid: #BBBBBBFF;
  /* ピンク系 */
  --common-color-pink: #fdeaef;
  --common-color-pink-transparent: #fdeaef85;
  --common-color-pink-medium: rgba(253, 234, 239, 0.86);
  --common-color-pink-accent-transparent: #FF557E33;
  /* オレンジ系 */
  --common-color-warning-orange: #ff851b;
  --common-color-orange-tint: #ff9a000d;
  --common-color-accent-orange: #d5850c78;
  --common-color-orange-dark: #cc6f16;
  --common-color-orange-light-transparent: #FDD8A07F;
  --common-color-orange-mid-transparent: #d59a2a7f;
  /* レッド系 */
  /*--common-color-error-red: #d9534f;*/
  --common-color-danger-red: #ff4d4d;
  --common-color-red-dark: #b32400;
  /*--common-color-alert-red: #dc3545;*/
  /* パープル系 */
  --common-color-focus-purple: #6200ea;
  /* その他 */
  --common-color-white: #ffffff;
  --common-color-light: #f0f4f7d4;
  --common-color-yellow: #d5b82a;
  --common-color-yellow-light: #d5b82a7f;
  --common-color-light-yellow-transparent: #FDF1C97F;
  --common-color-black-transparent: #00000019;
  --common-color-black-semi-transparent: #0000007F;

  --outlook-brand-color: #0078D4;
  --backlog-brand-color: #42CE9F;
  --pleasater-brand-color: #71696C;


  --background-color-blue-transparent: rgba(65, 105, 255, 1);
  --background-color-pink-transparent: rgba(255, 85, 126, 0.2);
  --background-color-shadow: rgba(0, 0, 0, 0.1);
  --background-color-overlay: rgba(0, 0, 0, 0.5);


  /* ベース */
  --base-color: var(--common-color-gray);
  --base-background-color: var( --common-color-light);
  /* ヘッダー */
  --header-color: var(--common-color-white);
  --header-background-color: var(--common-color-blue-primary);
  --header-link-hover-color: var(--common-color-light-blue);
  /* ボーダーイメージ */
  --border-image-linear-gradient-start: var(--common-color-pink);
  --border-image-linear-gradient-end: var(--common-color-royal-blue);
  /* サイドメニュー */
  --sidebar-background-color: var(--common-color-pink-transparent);
  --sidebar-color: var(--common-color-gray);
  --sidebar-link-hover-color: var(--common-color-light-gray);
  --sidebar-selected-menu-background-color: var(--common-color-pink-accent-transparent);
  --sidebar-tooltip-color: var(--common-color-white);
  --sidebar-tooltip-background-color: var(--common-color-gray);
  /* フッター（スマホ版） */
  --footer-background-color: var(--common-color-pink-medium);
  /* ポータルお知らせ */
  --portal-message-background-color: var(--common-color-white);
  --portal-message-category-color: var(--common-color-white);
  --portal-message-category-information-background-color: var(--common-color-green-secondary);
  --portal-message-category-maintenance-background-color: var(--common-color-warning-orange);
  --portal-message-category-obstacle-background-color: var(--common-color-danger-red);
  --portal-message-image-tooltip-color: var(--common-color-white);
  --portal-message-image-tooltip-background-color: var(--common-color-medium-gray-alt);
  --portal-message-close-btn-color: var(--common-color-gray);
  --portal-message-close-btn-hover-color: var(--common-color-light-gray);
  /* セクション */
  --section-background-color: var(--common-color-white);
  --section-box-shadow-color: var(--common-color-black-transparent);
  /* ul */
  --ul-li-color: var(--common-color-gray);
  --ul-li-background-color: var(--common-color-light-gray-bg);
  --ul-li-box-shadow-color: var(--common-color-black-transparent);
  --ul-li-link-hover-color: var(--common-color-light-gray);
  /* table */
  --table-thead-background-color: var(--common-color-blue-tint);
  --table-th-background-color: var(--common-color-blue-tint);
  --table-th-border-color: var(--common-color-gray-light-solid);
  --table-td-border-color: var(--common-color-gray-light-solid);
  --table-td-link-hover-color: var(--common-color-light-gray);
  /* form-card */
  --form-card-border-color: var(--common-color-light-gray);
  /* input-field */
  --input-field-border-color: var(--common-color-light-gray);
  --input-field-focus-color: var(--common-color-focus-purple);
  /* tab */
  --tab-color: var(--common-color-gray);
  --tab-background-color: var(--common-color-white);
  --tab-border-color: var(--common-color-gray-light-solid);
  --tab-hover-background-color: var(--common-color-light-gray-bg);
  --tab-box-shadow-color: var(--common-color-black-transparent);
  --tab-selected-border-color: var(--common-color-warning-orange);
  /* user-selection */
  --user-selection-border-color: var(--common-color-gray-light-solid);
  --user-selection-tag-background-color: var(--common-color-blue);
  --user-selection-color: var(--common-color-white);
  --user-selection-user-list-border-color: var(--common-color-gray-light-solid);
  --user-selection-user-list-background-color: var(--common-color-white);
  --user-selection-user-list-box-shadow-color: var(--common-color-black-transparent);
  --user-selection-user-list-hover-background-color: var(--common-color-light-gray-bg);
  --user-selection-user-list-clear-background-color: var(--common-color-danger-red);
  /* モーダル */
  --modal-background-color: var(--common-color-black-semi-transparent);
  --modal-content-background-color: var(--common-color-white);
  --search-icon-tooltip-color: var(--common-color-white);
  --search-icon-tooltip-background-color: var(--common-color-medium-gray-alt);
  /* error-message */
  --error-border-color: var(--common-color-danger-red);
  --error-message-color: var(--common-color-danger-red);
  --error-message-border-color: var(--common-color-danger-red);
  /* flash-notice */
  --flash-notice-color: var(--common-color-white);
  --flash-notice-background-color: var(--common-color-green-secondary);
  /* caution-color */
  --caution-color: var(--common-color-danger-red);
  /* important-color */
  --important-color: var(--common-color-warning-orange);
  /* アイコンツールチップ */
  --image-tooltip-color: var(--common-color-white);
  --image-tooltip-background-color: var(--common-color-medium-gray-alt);
  /* 行き先掲示板 */
  --info-icon-color: var(--common-color-gray-medium-solid);
  --info-icon-hover-color: var(--common-color-blue-primary);
  --destination-tooltip-color: var(--common-color-white);
  --destination-tooltip-background-color: var(--common-color-gray);
  /* ヒント */
  --hint-icon-color: var(--common-color-gray-medium-solid);
  --hint-icon-hover-color: var(--common-color-blue-primary);
  --hint-tooltip-color: var(--common-color-white);
  --hint-tooltip-background-color: var(--common-color-gray);
  /*
    ボタンは個別でレイアウトの変更が起きる可能性が高いのでここでは管理せず個別管理とする
  */
}

/* ==========================================================
   基底スタイル
========================================================== */
* {
  margin: 0;
  /*padding: 0;*/
  box-sizing: border-box;
  font-family: SegoeUI-SemiBold-final, Segoe UI Semibold, SegoeUI-Regular-final, Segoe UI, "Segoe UI Web (West European)", Segoe, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Tahoma, Helvetica, Arial, sans-serif;
  --100vw: 1963px;
  --100vh: 945px;
}

a {
  color: #00836b;
  text-decoration: none;
}

html {
  font-size: 95%;
}

/* ボディスタイル */
.body {
  color: var(--base-color);
}

#Bg-picture {
  background-image: url(/_common/themes/admin/images/geometric_pattern_05.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#Bg_smart_phone-picture {
  background-image: url(/_common/themes/admin/images/geometric_pattern_smart_phone_05.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/*@keyframes bg-rotate {*/
/*  0% {*/
/*    transform: rotate(0deg);*/
/*  }*/

/*  100% {*/
/*    transform: rotate(360deg);*/
/*  }*/
/*}*/

/*#Bg {*/
/*  --bg-easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);*/
/*  color: #505050;*/
/*  padding: 2rem;*/
/*  --bg-width: var(--100vw);*/
/*  --bg-height: var(--100vh);*/
/*  --bg-easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);*/
/*  pointer-events: none;*/
/*  position: fixed;*/
/*  transition: top cubic-bezier(0.34, 0.34, 0.22, 1) 3s;*/
/*  transform: translate3d(0, 0, 0);*/
/*  top: 0;*/
/*  left: 0;*/
/*  z-index: 0;*/
/*  width: var(--bg-width);*/
/*  !*height: var(--bg-height);*!*/
/*  filter: blur(calc(var(--bg-width) / 10));*/
/*  height: 100%;*/
/*}*/

/*#Bg::before,#Bg::after {*/
/*  content: "";*/
/*  position: absolute;*/
/*  display: block;*/
/*  aspect-ratio: 1;*/
/*  z-index: 0;*/
/*  width: var(--100vw);*/
/*  opacity: .4*/
/*}*/

/*#Bg::before {*/
/*  background-image: radial-gradient(#FF557E 0%, transparent 66%);*/
/*  animation: bg-rotate 9s cubic-bezier(0.8, 0.2, 0.2, 0.8) infinite;*/
/*  top: calc(50% - var(--100vh)* .3);*/
/*  left: calc(50% - var(--100vh)* 1.2);*/
/*  transform-origin: calc(var(--100vh)* .75);*/
/*  width: var(--100vh);*/
/*  min-width: calc(var(--100vw)* 1.1);*/
/*}*/

/*#Bg::after {*/
/*  background-image: radial-gradient(#4169E1 0%, transparent 66%);*/
/*  animation: bg-rotate 12s cubic-bezier(0.8, 0.2, 0.2, 0.8) infinite;*/
/*  bottom: calc(0% - var(--100vh)* .55);*/
/*  left: calc(80% - var(--100vh)* .5);*/
/*  transform-origin: calc(var(--100vh)* .7);*/
/*  width: calc(var(--100vh)* 1.1);*/
/*  min-width: calc(var(--100vw)* 1.2);*/
/*}*/

.frame {
  padding: 2rem 2rem 0 2rem;
  height: 100vh;
}

.frame-content {
  /* background-color: #f0f4f7; */
  position: relative;
  height: 100%;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 4px 8px var(--section-box-shadow-color);
}

.container {
  position: relative;
  background-color: var(--base-background-color);
  /*height: 92%;*/
  height: 89%;
  min-height: 89vh;
}

/* コンテナ全体 */
.main-container {
  display: flex;
  flex: 1;
  height: 100%;
}

/* ==========================================================
   ヘッダースタイル
========================================================== */
.header {
  color: var(--header-color);
  background-color: var(--header-background-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  border-bottom: 5px solid;
  border-image: linear-gradient(to right, var(--border-image-linear-gradient-start), var(--border-image-linear-gradient-end)) 1;
  border-radius: 8px 8px 0 0;
  /*height: 8%;*/
}

.header-logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.header-logo a {
  color: var(--header-color);
}

.header-user-group {
  display: flex;
  align-items: center;
}

.header-user-group-attendance {
  margin-right: 1rem;
}

.header-user-group-name {
  margin-right: 1rem;
}

.header-user-group-name {
  position: relative;
  font-size: 1rem;
}

.header-user-group-times {
  display: flex;
  gap: 1rem;
  margin-top: 0.2rem;
}

.header-user-group-times-content {
  background-color: var(--common-color-danger-red);
}

.header-user-group-logout a {
  color: var(--header-color);
  font-weight: bold;
}

.header-user-group-logout a i {
  margin-right: 5px;
}

.header a:hover,
.header-user-group-logout a:hover {
  color: var(--header-link-hover-color);
}

/* ==========================================================
   サイドメニュースタイル
========================================================== */
.sidebar {
  background-color: var(--sidebar-background-color);
  padding: 20px;
  transition: width 0.1s;
  position: relative;
  height: 100%;
  overflow-y: auto;
  min-width: 80px;
  font-size: 0.95rem;
}

.no-transition {
  transition: none !important;
}

.sidebar.sidebar-expanded {
  width: 250px;
}

.sidebar.sidebar-hidden {
  width: 80px;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar ul li {
  margin-bottom: 10px;
  position: relative;
}

.sidebar ul li a {
  color: var(--sidebar-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  transition: background-color 0.3s;
  position: relative;
}

.sidebar ul li a i {
  margin-right: 10px;
}

.sidebar ul li a span {
  transition: opacity 0.3s;
  display: inline-block;
}

.sidebar ul li a:hover {
  color: var(--sidebar-link-hover-color);
}

.sidebar ul li a.sidebar-selected-menu {
  background-color: var(--sidebar-selected-menu-background-color);
}

/* サイドバーが閉じている時はテキストを完全に非表示にする */
.sidebar.sidebar-hidden ul li a span,
.sidebar.sidebar-hidden .toggle-btn span {
  display: none;
}

.toggle-btn {
  display: flex;
  align-items: center;
  border: none;
  padding: 10px;
  cursor: pointer;
  text-align: left;
  margin-bottom: 15px;
  transition: background-color 0.3s;
}

.toggle-btn i {
  margin-right: 10px;
}

.toggle-btn:hover {
  color: var(--sidebar-link-hover-color);
}

/* ==========================================================
   ポータルお知らせメッセージスタイル
========================================================== */
.portal-message-content {
  background-color: var(--portal-message-background-color);
  /*visibility: visible;*/
  /*opacity: 1;*/
  overflow: hidden;
  max-height: 0;
  /*max-height: 15%;*/
  /*overflow-y: auto;*/
  position: relative;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.portal-message-content.portal-message-content-expanded {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  max-height: 15%;
  overflow-y: auto;
  opacity: 1;
}

.portal-message-group {
  position: relative;
  list-style: none;
  align-items: center;
  line-height: 1.5;
  padding: 3px 40px 3px 10px;
}

.portal-message {
  display: flex;
  align-items: center;
  margin-bottom: 0.2rem;
}

.portal-message-category {
  color: var(--portal-message-category-color);
  display: inline-block;
  text-align: center;
  border-radius: 20px;
  padding: 2px 10px;
  line-height: 1.9rem;
  white-space: nowrap;
  flex: 150px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 0.5rem;
  box-sizing: border-box;
  font-size: 0.85rem;
}

.maintenance {
  background-color: var(--portal-message-category-maintenance-background-color);
}

.information {
  background-color: var(--portal-message-category-information-background-color);
}

.obstacle {
  background-color: var(--portal-message-category-obstacle-background-color);
}

.portal-message-detail {
  font-size: 0.95rem;
  margin-right: 0.5rem;
}

.portal-message-close-btn {
  color: var(--portal-message-close-btn-color);
  position: absolute;
  top: 5px;
  right: 20px;
  cursor: pointer;
  font-size: 1.5rem;
  z-index: 9;
}

.portal-message-close-btn:hover {
  color: var(--portal-message-close-btn-hover-color);
}

.portal-message-content.hidden {
  display: none;
}

.portal-message-icon {
  position: absolute;
  cursor: pointer;
  font-size: 1.4rem;
  padding: 5px;
  /*right: 15px;*/
  /*background-color: var(--common-color-white);*/
  color: var(--common-color-blue-primary);
  font-weight: bold;
  border-radius: 50%;
  margin: 5px;
  /*position: relative;*/
  display: inline-flex;
  transition: transform 0.3s;
}

.portal-message-icon:hover {
  transform: rotate(-3deg);
}

.portal-message-icon.hidden {
  display: none;
}

/* ==========================================================
   セクションスタイル
========================================================== */
.section {
  background-color: var(--section-background-color);
  box-shadow: 0 4px 8px var(--section-box-shadow-color);
  padding: 1.5rem;
  border-radius: 8px;
}

/* ==========================================================
   ul共通レイアウトスタイル
========================================================== */
.ul {
  list-style: none;
  padding-left: 0;
}

.ul li {
  background-color: var(--ul-li-background-color);
  box-shadow: 0 2px 4px var(--ul-li-box-shadow-color);
  /*border-radius: 8px;*/
  border-radius: 5px;
  padding: 1rem;
  margin-bottom: 0.5rem;
  position: relative;
  border: 1px solid var(--common-color-light-gray);
}

.ul li a {
  color: var(--ul-li-color);
}

.ul li a:hover {
  color: var(--ul-li-link-hover-color);
}

/* ==========================================================
   table共通レイアウトスタイル
========================================================== */
.filter-options {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  align-items: center;
}

.filter-options label {
  margin-right: 0.5rem;
}

.filter-options select,
.filter-options input {
  margin-right: 1rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.table-paging {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  border: 1px solid var(--common-color-light-gray);
  box-shadow: 0 2px 4px var(--ul-li-box-shadow-color);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
}

.table thead {
  background-color: var(--table-thead-background-color);
}

.table th {
  background-color: var(--table-th-background-color);
  border-bottom: 1px solid var(--table-th-border-color);
  padding: 10px;
  text-align: center;
  font-weight: normal;
  text-transform: uppercase;
}

.table-paging tbody tr :not(.not-text-align),
.table tbody tr :not(.not-text-align) {
  text-align: center;
}

.table tbody tr td.not-text-align * {
  text-align: left;
}

.sort thead tr :not(.not-sort) {
  cursor: pointer;
}

.sort th.sort-asc::after {
  content: " ▲";
}

.sort th.sort-desc::after {
  content: " ▼";
}

.table-paging td,
.table td {
  border-bottom: 1px solid var(--table-td-border-color);
  padding: 10px;
}

.table-paging td.no-border,
.table td.no-border {
  border-bottom: 0;
}

.not-text-align a {
  text-align: left;
}

.table-paging td a:hover,
.table td a:hover {
  color: var(--table-td-link-hover-color);
}

/* ==========================================================
   h2スタイル
========================================================== */
.h2 {
  border-image: linear-gradient(to right, var(--border-image-linear-gradient-start), var(--border-image-linear-gradient-end)) 1;
  border-bottom: 5px solid;
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

/* ==========================================================
   入力項目スタイル
========================================================== */
.form-card {
  border-bottom: 1px solid var(--form-card-border-color);
  padding: 0.2rem;
  margin-bottom: 0.5rem;
}

.form-group {
  margin-bottom: 0.5rem;
}

.form-group label {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
  font-weight: bold;
}

.input-field {
  border: 2px solid var(--input-field-border-color);
  padding: 0.75rem;
  font-size: 1rem;
  border-radius: 8px;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.input-field:focus {
  border-color: var(--input-field-focus-color);
  outline: none;
}

.input-default-width {
  width: 100%;
  overflow-wrap: break-word;
}

.input-mini-width {
  overflow-wrap: break-word;
}

.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 1rem;
  height: 150px;
  resize: vertical;
}

.input-readonly {
  padding: 0.2rem;
  font-size: 1rem;
  min-height: 24px;
}

.checkbox-group {
  display: inline-block;
  vertical-align: middle;
}

/*
  回覧板，書庫などのエディタにはフリーの「summernote」を使用
  しているが，追加制御が必要だたため以下に記載
*/
.note-editor.note-frame.card {
  border: 2px solid var(--input-field-border-color);
}

.note-editor.note-frame:focus-within {
  border-color: var(--input-field-focus-color);
  outline: none;
}

/* ==========================================================
   タブ共通スタイル
========================================================== */
.tab-container {
  overflow-x: auto;
  white-space: nowrap;
  padding-top: 1rem;
  margin-bottom: 1.5rem;
}

.tab-group {
  display: flex;
}

.tab-group a {
  color: var(--tab-color);
}

.tab {
  background-color: var(--tab-background-color);
  border-left: 1px solid var(--tab-border-color);
  border-bottom: 1px solid var(--tab-border-color);
  display: block;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: background-color 0.3s;
}

.tab:hover {
  background-color: var(--tab-hover-background-color);
}

.tab.active {
  border-top: 3px solid var(--tab-selected-border-color);
  border-bottom: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.tab-end.active {
  border-right: 1px solid var(--tab-border-color);
}

.tab-disabled {
  pointer-events: none;
}

/* ==========================================================
   ユーザー選択共通スタイル
========================================================== */
.user-selection {
  border: 2px solid var(--user-selection-border-color);
  padding: 0.75rem;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  bottom: 0;
  width: 100%;
  z-index: 10;
  min-height: 63px;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.user-selection input {
  border: none;
  outline: none;
  padding: 5px;
  flex: 1;
  min-width: 100px;
  background: transparent;
  cursor: pointer;
}

.user-selection:focus-within {
  border-color: var(--input-field-focus-color);
  outline: none;
}

.user-tag {
  /*color: var(--common-color-gray);*/
  background-color: var(--common-color-blue-transparent);
  padding: 5px 10px;
  margin-right: 5px;
  margin-top: 2.5px;
  margin-bottom: 2.5px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
}

.user-tag .remove {
  margin-left: 5px;
  cursor: pointer;
  font-weight: bold;
}

.user-list {
  border: 1px solid var(--user-selection-user-list-border-color);
  background-color: var(--user-selection-user-list-background-color);
  box-shadow: 0 4px 8px var(--user-selection-user-list-box-shadow-color);
  height: 200px;
  overflow-y: auto;
  position: absolute;
  top: -210px;
  width: 100%;
  right: 1px;
  z-index: 20;
  border-radius: 8px;
}

.user-list div {
  padding: 10px;
  cursor: pointer;
}

.user-list div:hover {
  background-color: var(--user-selection-user-list-hover-background-color);
}

.hidden {
  display: none;
}

.block {
  display : block;
}

.inline {
  display : inline;
}

.clear-btn {
  background-color: var(--user-selection-user-list-clear-background-color);
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-left: 10px;
}

/* ==========================================================
   検索アイコン，検索リセットアイコン，検索モーダルスタイル
========================================================== */
.section-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-icons {
  display: flex;
  gap: 0.5rem;
}

.modal {
  background-color: var(--modal-background-color);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: var(--modal-content-background-color);
  padding: 20px;
  width: 80%;
  max-width: 500px;
  border-radius: 5px;
}

.modal-close {
  float: right;
  font-size: 1.5rem;
  cursor: pointer;
}

/* ==========================================================
   エラー表示共通スタイル
========================================================== */
.border-error {
  border: 2px solid var(--error-border-color);
}

.errorExplanation h2 {
  color: var(--error-message-color);
  border-bottom: 2px solid var(--error-message-border-color);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

/* ==========================================================
   完了表示共通スタイル
========================================================== */
.flash-notice {
  color: var(--flash-notice-color);
  background-color: var(--flash-notice-background-color);
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 1000;
}

.flash-notice.show {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================
   新着アイコン共通スタイル
========================================================== */
.position-center {
  display: flex;
  align-items: center;
}

.message-new {
  /*display: -webkit-inline-box;*/
  /*display: -ms-inline-flexbox;*/
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--common-color-white);
  background-color: var(--common-color-warning-orange);
  border-radius: 4px;
  white-space: nowrap;
  /* outline: 1px solid var(--backgroundColorSchemeBase); */
  font-size: 0.7rem;
  /* line-height: 1.5rem; */
  padding: 1px 4px;
}

/* ==========================================================
   層優先表示共通スタイル
========================================================== */
.display-top {
  z-index: 1000;
}

.display-second {
  z-index: 10;
}

.display-none {
  display: none;
}

/* ==========================================================
   固定共通スタイル
========================================================== */
.position-sticky {
  position: sticky;
  top: 0;
}

/* ==========================================================
   「※」メッセージ共通スタイル
========================================================== */
.caution-message {
  display: block;
  font-size: 0.9rem;
}

.caution-color {
  color: var(--caution-color);
}

.important-color {
  color: var(--important-color);
}

/* ==========================================================
   ボタン共通スタイル
========================================================== */
.button-group {
  display: flex;
  margin-bottom: 1rem;
}

.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.button i {
  margin-right: 5px;
}

.button-wide {
  width: 100%;
}

.button-disabled {
  pointer-events: none;
}

.button-question-add,
.button-answer,
.button-open,
.button-file-add,
.button-submit,
.button-create,
.button-save,
.button-login {
  color: var(--common-color-white);
  background-color: var(--common-color-blue);
}

.button-question-add:hover,
.button-answer:hover,
.button-open:hover,
.button-file-add:hover,
.button-submit:hover,
.button-create:hover,
.button-save:hover,
.button-login:hover {
  background-color: var(--common-color-blue-dark);
}

.button-state-forward {
  color: var(--common-color-white);
  background-color: var(--common-color-light-blue);
}

.button-state-forward:hover {
  background-color: var(--common-color-blue-primary);
}

.button-download,
.button-folder-add,
.button-search,
.button-draft,
.button-clone,
.button-commute {
  color: var(--common-color-white);
  background-color: var(--common-color-green-secondary);
}

.button-download:hover,
.button-folder-add:hover,
.button-search:hover,
.button-draft:hover,
.button-clone:hover,
.button-commute:hover {
  background-color: var(--common-color-green-dark);
}

.button-lock,
.button-clock-out {
  color: var(--common-color-white);
  background-color: var(--common-color-danger-red);
}

.button-lock:hover,
.button-clock-out:hover {
  background-color: var(--common-color-red-dark);
}

.button-clear {
  color: var(--common-color-gray);
  border: 1px solid var(--common-color-yellow);
  background-color: var(--common-color-light-yellow-transparent);
}

.button-clear:hover {
  background-color: var(--common-color-yellow-light);
}

.button-cancel {
  color: var(--common-color-white);
  background-color: var(--common-color-medium-gray);
}

.button-cancel:hover {
  background-color: var(--common-color-dark-gray-bg);
}

.button-select,
.button-print,
.button-back {
  color: var(--common-color-gray);
  border: 1px solid var(--common-color-dark-gray-bg);
  background-color: var(--common-color-gray-light-transparent);
}

.button-select:hover,
.button-print:hover,
.button-back:hover {
  background-color: var(--common-color-gray-medium-solid);
}

.button-state-back,
.button-edit {
  color: var(--common-color-white);
  background-color: var(--common-color-warning-orange);
}

.button-state-back:hover,
.button-edit:hover {
  background-color: var(--common-color-orange-dark);
}

.button-correction,
.button-export {
  color: var(--common-color-gray);
  border: 1px solid var(--common-color-orange-dark);
  background-color: var(--common-color-orange-light-transparent);
}

.button-correction:hover,
.button-export:hover {
  background-color: var(--common-color-orange-mid-transparent);
}

.button-delete {
  color: var(--common-color-white);
  background-color: var(--common-color-danger-red);
}

.button-delete:hover {
  background-color: var(--common-color-red-dark);
}

.button-forward,
.button-confirm {
  color: var(--common-color-gray);
  border: 1px solid var(--common-color-green-dark);
  background-color: var(--common-color-green-light-transparent);
}

.button-forward:hover,
.button-confirm:hover {
  background-color: var(--common-color-green-mid-transparent);
}

/* ==========================================================
   余白共通スタイル
========================================================== */
.margin-top-1rem {
  margin-top: 1rem;
}

.margin-top-05rem {
  margin-top: 0.5rem;
}

.margin-right-05rem {
  margin-right: 0.5rem;
}

.margin-right-1rem {
  margin-right: 1rem;
}

.margin-right-2rem {
  margin-right: 2rem;
}

.margin-left-1rem {
  margin-left: 1rem;
}

.margin-left-2rem {
  margin-left: 2rem;
}

.margin-bottom-05rem {
  margin-bottom: 0.5rem;
}

.margin-both-ends-05rem {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

/* ==========================================================
   アップロードファイルアイコン共通スタイル
========================================================== */
.attachIcon {
  width: 40px;
  text-align: center;
}

.iconFile,
.iconDefault {
  display: inline-block;
  /*padding: 0px 15px 0px 30px;*/
  background-repeat: no-repeat;
  /*background-image: url(/_common/images/icons/default.png);*/
  /*line-height: 1.9;*/
  /*background-repeat: no-repeat;*/
  padding: 1rem;
  background-position: center;
}

.iconBmp {
  background-image: url(/_common/images/icons/icon24/bmp.png);
}

.iconCsv {
  background-image: url(/_common/images/icons/icon24/csv.png);
}

.iconDoc, .iconDocx, .iconDocm, .iconDotx, .iconDotm {
  background-image: url(/_common/images/icons/icon24/doc.png);
}

.iconGif {
  background-image: url(/_common/images/icons/icon24/gif.png);
}

.iconJpg {
  background-image: url(/_common/images/icons/icon24/jpg.png);
}

.iconJpe {
  background-image: url(/_common/images/icons/icon24/jpg.png);
}

.iconJpeg {
  background-image: url(/_common/images/icons/icon24/jpg.png);
}

.iconJtd {
  background-image: url(/_common/images/icons/icon24/jtd.png);
}

.iconLzh {
  background-image: url(/_common/images/icons/icon24/lzh.png);
}

.iconPdf {
  background-image: url(/_common/images/icons/icon24/pdf.png);
}

.iconPng {
  background-image: url(/_common/images/icons/icon24/png.png);
}

.iconPpt, .iconPptx, .iconPptm, .iconPotx, .iconPotm, .iconPpam, .iconPpsx, .iconPpsm {
  background-image: url(/_common/images/icons/icon24/ppt.png);
}

.iconTxt {
  background-image: url(/_common/images/icons/icon24/txt.png);
}

.iconXls, .iconXlsx, .iconXlsm, .iconXltx, .iconXltm, .iconXlam {
  background-image: url(/_common/images/icons/icon24/xls.png);
}

.iconZip {
  background-image: url(/_common/images/icons/icon24/zip.png);
}

.iconVbs {
  background-image: url(/_common/images/icons/icon24/vbs.png);
}

.iconExe {
  background-image: url(/_common/images/icons/icon24/exe.png);
}

.iconOdb {
  background-image: url(/_common/images/icons/icon24/odb.gif);
}

.iconOdf {
  background-image: url(/_common/images/icons/icon24/odf.gif);
}

.iconOdg, .iconOtg {
  background-image: url(/_common/images/icons/icon24/odg.gif);
}

.iconOdp, .iconOtp {
  background-image: url(/_common/images/icons/icon24/odp.gif);
}

.iconOds, .iconOts {
  background-image: url(/_common/images/icons/icon24/ods.gif);
}

.iconOdt, .iconOtt {
  background-image: url(/_common/images/icons/icon24/odt.gif);
}

.iconMap {
  background-image: url(/_common/images/icons/icon24/map.png);
}

.iconPptx, .pptx {
  background-image: url(/_common/images/icons/icon24/pptx.png);
}

.iconXlsx, .xlsx {
  background-image: url(/_common/images/icons/icon24/xlsx.png);
}

.iconDocx, .docx {
  background-image: url(/_common/images/icons/icon24/docx.png);
}

.breadcrumb-list {
  font-weight: bold;
}

.breadcrumb-list:hover {
  color: var(--common-color-light-gray);
}

.state-forward a {
  color: var(--common-color-light-blue);
}

.state-forward a:hover {
  color: var(--common-color-blue-primary);
}

.state-back a {
  color: var(--common-color-warning-orange);
}

.state-back a:hover {
  color: var(--common-color-orange-dark);
}

/* チップスのスタイル */
.sidebar-tooltip {
  color: var(--sidebar-tooltip-color);
  background-color: var(--sidebar-tooltip-background-color);
  visibility: hidden;
  text-align: center;
  border-radius: 8px;
  padding: 7px 10px;
  position: fixed;
  z-index: 2000;
  /*top: 50%;*/
  /*left: 100%;*/
  left: 100px;
  /*transform: translateY(-50%);*/
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
  font-size: 0.7rem;
}

/* チップスの矢印スタイル */
.sidebar-tooltip::before {
  border: 5px solid transparent;
  border-right-color: var(--sidebar-tooltip-background-color);
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
}

/* サイドバーが閉じている時だけツールチップ表示 */
.sidebar.sidebar-hidden ul li a:hover .sidebar-tooltip {
  visibility: visible;
  opacity: 1;
}

/* ポータルお知らせ */
.portal-message-tooltip {
  color: var(--portal-message-image-tooltip-color);
  background-color: var(--portal-message-image-tooltip-background-color);
  /*color: var(--common-color-gray);*/
  /*background-color: var(--common-color-white);*/
  /*border: 3px solid var(--portal-message-image-tooltip-background-color);*/
  visibility: hidden;
  position: absolute;
  border-radius: 8px;
  padding: 7px 10px;
  left: 100%;
  margin-left: 8px;
  font-size: 0.8rem;
  white-space: nowrap;
  transition: opacity 0.3s, visibility 0.3s;
  opacity: 0;
  z-index: 10;
}

/* チップスの矢印スタイル */
.portal-message-tooltip::before {
  border: 5px solid transparent;
  border-right-color: var(--portal-message-image-tooltip-background-color);
  /*border-right-color: var(--portal-message-image-tooltip-background-color);*/
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  /*margin-left: 2px;*/
  transform: translateY(-50%);
}

.portal-message-icon:hover .portal-message-tooltip {
  visibility: visible;
  opacity: 1;
}

.info-icon {
  color: var(--info-icon-color);
  cursor: pointer;
  position: relative;
  right: 0;
  transition: color 0.3s ease;
}

.destination-tooltip {
  /* テキスト色 */
  color: var(--destination-tooltip-color);
  /* 背景色 */
  background-color: var(--destination-tooltip-background-color);
  /* 初期状態は非表示 */
  visibility: hidden;
  /* ツールチップの幅 */
  width: 100%;
  max-width: 300px;
  /* 角を丸くする */
  border-radius: 8px;
  /* 内部余白 */
  padding: 10px;
  /* 絶対位置 */
  position: fixed;
  /* 他の要素の上に表示 */
  z-index: 2000;
  /* リスト項目の中央に揃える */
  /* top: 50%; */
  /* リスト項目の右側に表示 */
  /* left: 100%; */
  /* リスト項目との隙間 */
  margin-left: 2rem;
  /* 初期状態は透明 */
  opacity: 0;
  /* フェードインのアニメーション */
  transition: opacity 0.3s;
  /* 縦方向で中央揃え */
  transform: translateY(-65%);
  font-size: 0.7rem;
  white-space: nowrap;
}

.destination-tooltip::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--destination-tooltip-background-color);
}

.info-icon:hover+.destination-tooltip {
  visibility: visible;
  opacity: 1;
}

.info-icon:hover {
  color: var(--info-icon-hover-color);
}

.search-icon-tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.search-icon-tooltip .tooltip-text {
  color: var(--search-icon-tooltip-color);
  background-color: var(--search-icon-tooltip-background-color);
  visibility: hidden;
  padding: 5px 10px;
  text-align: center;
  border-radius: 5px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  right: 20%;
  transform: translateX(20%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
  font-size: 0.7rem;
}

.search-icon-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.image-tooltip {
  position: relative;
  display: inline-block;
}

.image-tooltip .image-tooltip-text {
  color: var(--image-tooltip-color);
  background-color: var(--image-tooltip-background-color);
  visibility: hidden;
  font-size: 0.7rem;
  text-align: center;
  border-radius: 5px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* アイコンの上に表示 */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
  white-space: nowrap;
  margin-bottom: 0.5rem;
}

.image-tooltip .image-tooltip-text::before {
  border-color: var(--image-tooltip-background-color) transparent transparent transparent;
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
}

.image-tooltip:hover .image-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.hint-icon {
  color: var(--hint-icon-color);
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
}

.hint-tooltip {
  display: none;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--hint-tooltip-background-color);
  color: var(--hint-tooltip-color);
  padding: 7px 10px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 1000;
  margin-left: 10px;
  transition: opacity 0.3s, visibility 0.3s;
  font-size: 0.7rem;
  line-height: 1.6;
}

.hint-tooltip::before {
  border: 5px solid transparent;
  border-right-color: var(--hint-tooltip-background-color);
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
}

.hint-icon:hover {
  color: var(--hint-icon-hover-color);
}

.hint-icon:hover .hint-tooltip {
  display: block;
}

.narrow-column {
  width: 10%;
}

.narrow-column-50 {
  width: 50%;
}

.narrow-column-px {
  max-width: 200px;
}

.narrow-column-date {
  width: 200px;
}

/* プロフィール画像のスタイル */
.profile-img {
  border-radius: 50%;
  margin-right: 0.3rem;
}

.iframe-width {
  width: 100%;
}

.introjs-section {
  padding: 0.5rem;
  border: 3px solid var(--common-color-blue);
}

/* 日付スタイル */
.normal {
  color: var(--common-color-gray);
  text-decoration: none;
}

.saturday {
  color: var(--common-color-blue-dark);
  font-weight: bold;
  text-decoration: none;
}

.sunday {
  color: var(--common-color-danger-red);
  font-weight: bold;
  text-decoration: none;
}

.holiday {
  color: var(--common-color-danger-red);
  font-weight: bold;
  text-decoration: none;
}

.today-date {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.today-date .day {
  font-size: 2rem;
  margin-right: 0.5rem;
}

.today-date .weekday {
  font-size: 1rem;
}

.date-header {
  font-size: 16px;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 5px;
  /*color: #ff8c00;*/
}

.event-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.event {
  background-color: var(--ul-li-background-color);
  box-shadow: 0 2px 4px var(--ul-li-box-shadow-color);
  /*border-radius: 8px;*/
  border-radius: 5px;
  padding: 1rem;
  margin-bottom: 0.5rem;
  position: relative;
  border: 1px solid var(--common-color-light-gray);
}

.no-event {
  /*background-color: var(--ul-li-background-color);*/
  /*box-shadow: 0 2px 4px var(--ul-li-box-shadow-color);*/
  /*border-radius: 8px;*/
  /*border-radius: 5px;*/
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  position: relative;
  /*border: 1px solid var(--common-color-light-gray);*/
}

.event-time {
  font-size: 14px;
  /*color: #b0b0b0;*/
}

.event-title {
  font-size: 14px;
  /*color: #ffffff;*/
  flex-grow: 1;
  margin-left: 10px;
}

.event.important .event-title {
  color: #ff4444;
  font-weight: bold;
}

.caution {
  color: #ffa500;
}

.color-red {
  color: var(--common-color-danger-red);
}

@media (max-width: 768px) {
  .html {
    font-size: 95%;
  }
  .h2 {
    font-size: 1.2rem;
  }
  .form-group label {
    font-size: 0.9rem;
  }
  .input-readonly {
    font-size: 0.9rem;
  }
  .button span {
    font-size: 0.8rem;
  }
  .not-text-align a {
    font-size: 0.8rem;
  }
  .table th {
    font-size: 0.9rem;
  }
  .errorExplanation h2 {
    font-size: 1rem;
  }
  .caution-color {
    font-size: 0.85rem;
  }
  .position-sticky {
    position: unset;
  }
  .display-top {
    z-index: 10;
  }
}