:root {
  /* テンプレートパネル（1パネル目、2パネル目）の角丸輪郭 */
  --panel-template-border-radius: 0px 20px 20px 0px;
  /* ダイアログやフォームの標準的な角丸輪郭 */
  --dialog-form-default-border-radius: 10px;
  /* ダイアログの上部間隔 */
  --dialog-top-margin: 5rem;
  /* ダイアログの下部間隔 */
  --dialog-bottom-margin: 5rem;
}

/* Edgeでパスワードの目アイコンが重複しないようにしています。 */
::-ms-reveal {
  display: none;
}

/* スクロールバーのデザインを変更します。 */
::-webkit-scrollbar {
  overflow: hidden;
  width: 10px;
  height: 10px;
  background: #fafafa;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-piece {
  background: #eee;
}

::-webkit-scrollbar-thumb {
  overflow: hidden;
  -webkit-border-radius: 5px;
  border-radius: 5px;

  background: #888;
}

/** 効いてないので調整します */
::-webkit-scrollbar-thumb:hover {
  width: 10px;
  height: 10px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #666;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

input[type="color" i] {
  width: 28px;
  height: 25px;
  margin-top: -0.25rem;
  border: none;
  background: none;
}

input[type="color" i]:hover {
  border: none;
  background: none;
}

input[type="color" i]:focus {
  border: none;
  background: none;
}

/* bootstrapのメニューを最前面に表示します */
.ui-menu.ui-front {
    z-index: 9999;
}

/* ルビの読み仮名余白を調整しています */
rt {
  transform: translateY(0.3rem);
}

/* BootStrapの設定を上書きします。角を丸くする */
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-right-radius: 0.25rem !important;
  border-top-left-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

/* デートピッカーのみ表示します */
.calendar-picker {
  border: none !important;
  cursor: pointer;
}

.calendar-picker::-webkit-datetime-edit {
  display: none;
}

/* liのドットを非表示にします */
.li-dot-none {
  list-style-type: none;
}

/* liの付箋 */
.li-sticky {
  min-width: 3px;
  background: #bcd8f6;
  border-radius: 4px;
  margin-right: 0.5rem;
}

/* liの付箋偶数行 */
.li-sticky-even-number {
  /* background: #d1eee7; */
  background: #bcd8f6;
}

/* dateの日付選択ツールを拡張しています */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  background-image: url('../../form/img/calendar-days-regular.svg');
}


.base-float-end {
  clear: both;
}

.panel {
  margin: 0;
}

/* 検索条件エリア */
.condition-usage-standard-width {
  width: 26rem;
}

.condition-usage-exist-select-btn-width {
  width: 24rem;
}

.condition-usage-small-width {
  width: 11rem;
}

/** カレンダーアイコンとリストアイコンが並ぶ場合のみ
    高さ調整のためリストアイコンに適用 */
.list-icon-margin-top {
  margin-top: 0.13rem;
}

/* ----※廃棄予定。下の方に別名称で文字幅の記述があるので、そちらを使用してください---- */
/* より多い文字数の幅 */
.xmany-characters-width {
  width: 24rem;
}

/* 多い文字数の幅 　※代わりに、w-15remを使用。*/
/* .many-characters-width {
  width: 15rem;
} */

/* 標準的な文字数の幅 */
.normal-characters-width {
  width: 9rem;
}

/* 少ない文字数の幅 */
.less-characters-width {
  width: 6rem;
}

/* より少ない文字数の幅 */
.xless-characters-width {
  width: 4rem;
}

/* 入力欄の幅 */

/* 36文字 */
.w-xxmany-characters {
  width: 38.5rem;
}

/* 24文字 */
.w-xmany-characters {
  width: 26.5rem;
}

/* 15文字 */
.w-many-characters {
  width: 17.5rem;
}

/* 9文字 */
.w-normal-characters {
  width: 11.5rem;
}

/* 6文字 */
.w-less-characters {
  width: 8.5rem;
}

/* 4文字 */
.w-xless-characters {
  width: 6.5rem;
}

/* 2文字 */
.w-xxless-characters {
  width: 4.5rem;
}

/* 1文字 */
.w-1-characters {
  width: 3rem;
}

/* 日付 yyyy/mm/dd or yyyy年mm月 */
.w-date-normal-characters {
  width: 10rem;
}

/* 時刻 hh:mm */
.w-time-characters {
  width: 7.7rem;
}

/* 日時分 yyyy/mm/dd hh:mm */
.w-datetime-normal-characters {
  width: 14rem;
}

/* 郵便番号 */
.w-postal-characters {
  /* プレースホルダーの文字列に合わせています */
  width: 11.5rem;
}

/* TEL xxx-xxxx-xxxx */
.w-tel-characters {
  width: 10.5rem;
}

/* 自動サイズ */
.w-auto-characters {
  width: auto;
}

/*
  ------------------------------------------------
  ブックマークバー
  ------------------------------------------------
*/

/* ブックマークバー */
#bookmark-bar {
  border-right: 1px solid;
  border-left: 1px solid;
}

.bookmark-bar {
  background-color: var(--header-bg-color);
  white-space: nowrap;
  overflow: hidden;
  align-items: center;
}

/* ブックマークバー非表示アイコン */
.bookmark-bar-hidelist-icon {
  display: none;
}

/* #region タブリストのホバー時アニメーション 設定 */
.bookmark-bar-label {
  color: var(--header-color);

  position: relative;
  text-align: center;
  display: inline-block;
}

.bookmark-bar-label:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: #fff;
  transition: width 0.25s ease-in;
}

.bookmark-bar-label:hover:before {
  width: 100%;
}

/* #endregion */


.bookmark-bar-icon-frame {
  display: flex;
  align-items: center;
}

/* メニューバー */
.menu-header-bar-area {
  height: 45px;
  border-bottom: 1.5px solid #C2D7E4;
}

.menu-header-bar {
  white-space: nowrap;
  overflow: hidden;
  align-items: center;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* ブックマーク */
/* 検索条件保存 */
.bookmark-icon,
.search-condition-save-icon {
  background-color: var(--bookmark-bg-color);
  color: var(--bookmark-color);
  height: 25px;
  width: 25px;
  border-radius: 50%;
  max-width: 25px;
  min-width: 25px;
  max-height: 25px;
  min-height: 25px;
  /* レイアウトが崩れるのでフォントサイズを固定します*/
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.icon-transform-none {
  transform: none;
}

/* 未登録のブックマーク */
.bookmark-off {
  background-color: #d0dde5;
  color: var(--bookmark-color);
}

.circle-clip {
  background-color: #d0dde5;
  color: var(--bookmark-color);
  height: 25px;
  width: 25px;
  border-radius: 50%;
  max-width: 25px;
  min-width: 25px;
  max-height: 25px;
  min-height: 25px;
  /* レイアウトが崩れるのでフォントサイズを固定します*/
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease-in-out;
}

.circle-clip.pushed-clip {
  background-color: #69c7af;
}

.pushed-clip:not(.clicked-clip) {
  transform: rotate(45deg);
}

.clicked-clip.pushed-clip {
  animation: click-thumbtack 0.5s ease-in-out;
}

.circle-clip:not(.pushed-clip):hover {
  background-color: #69c7af44;
}

.clip-icon {
  transition: transform 0.3s ease-in-out;
}

.circle-clip:not(.pushed-clip):hover>.clip-icon {
  transform: translateY(-1px);
}

.clicked-clip.pushed-clip>.clip-icon {
  animation: push-thumbtack 0.5s ease-in-out;
  animation-fill-mode: forwards;
}

.clicked-clip:not(.pushed-clip)>.clip-icon {
  animation: pull-thumbtack 0.5s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes push-thumbtack {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(45deg) translate(0.5px, -1px);
  }

  60% {
    transform: rotate(45deg) translate(-0.5px, 1px);
  }

  100% {
    transform: rotate(45deg) translate(0, 0);
  }
}

@keyframes pull-thumbtack {
  0% {
    transform: rotate(45deg) translate(0, 0);
  }

  50% {
    transform: rotate(45deg);
  }

  60% {
    transform: rotate(45deg) translate(0.5px, -1px);
  }

  100% {
    transform: rotate(0deg) translate(0, 0);
  }
}

@keyframes click-thumbtack {
  0% {
    box-shadow: 0px 0px 0px 1px #69c7afB3;
  }

  80% {
    box-shadow: #69c7af44;
  }

  100% {
    box-shadow: 0px 0px 0px 14px rgba(241, 146, 16, 0);
  }
}

/* ヘッダのブックマークアイコン */
#bookmark-icon {
  position: absolute;
}

.bookmark-icon-mini {
  height: 20px;
  width: 20px;
  max-width: 20px;
  min-width: 20px;
  max-height: 20px;
  min-height: 20px;
  /* レイアウトが崩れるのでフォントサイズを固定します*/
  font-size: 10px;
}

/* ギアアイコン */
.gear-icon {
  transition: transform 0.4s ease-in-out;
}

.gear-icon:hover {
  transform: rotate(45deg);
}

/* ベルアイコン */
.bell-icon:hover {
  animation: shake 0.4s ease;
}

@keyframes shake {
  0% {
    transform: rotate(0);
  }

  40% {
    transform: rotate(20deg);
  }

  80% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* FAQアイコン */
.faq-icon:hover {
  animation: bounce 0.3s ease-out;
}

@keyframes bounce {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(0, -1px);
    animation-timing-function: ease-in;
  }

  40% {
    transform: translate(0, -2px);
    animation-timing-function: ease-in;
  }

  60% {
    transform: translate(0, -3px);
    animation-timing-function: ease-in;
  }

  100% {
    transform: translate(0, 0);
  }
}

.guide-icon:hover {
  animation: fade 1s linear forwards;
}

@keyframes fade {
  0%,100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/*
  ------------------------------------------------
  パネル
  ------------------------------------------------
*/

/* 第一分割（メイン画面とFAQなどの表示要素の分割） */
/* main_information_template.php */
.main-panel {
  width: 100%;
  height: calc(100vh - 85px);
  left: 0%;
  position: absolute;
}

.information-panel {
  height: calc(100vh - 40px);
  left: 100%;
  position: absolute;
  background-color: #316698;
  overflow: auto;
}

.one-panel {
  height: calc(100vh - 85px);
  width: 100%;
  padding: 2rem 0 0 2rem;
  position: absolute;
  background-color: #ffffff;
  overflow: auto;
}

/* アニメーション付き3パネル（検索条件・出力対象・編集画面）の分割 */
/* three_panel_template_move.php */
.move-first-panel {
  height: calc(100vh - 85px);
  /* 2、3枚目のパネルを少し見せるために100%より小さい値を指定しています。 */
  width: 98%;
  left: 0vw;
  position: absolute;
  background: var(--first-panel-bg-color);
  border-radius: var(--panel-template-border-radius);
  box-shadow: 15px 0px 15px -10px #00000059;
  z-index: 4;
}

/** 1パネル目の「>」戻るボタン表示エリア 2,3パネル共通で定義したいのでid指定*/
#first-panel-frame-sub {
  width: 2rem;
  height: 97%;
  margin-left: auto;
  cursor: pointer;
}

/** 2パネル目の「>」戻るボタン表示エリア 2,3パネル共通で定義したいのでid指定*/
#second-panel-frame-sub-show {
  width: 1rem;
  height: 100%;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

#third-panel-frame-sub-show {
  width: 1rem;
  height: 100%;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

/* 1パネル目の「>」戻るボタン表示 */
.move-first-panel-sub {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 0.5rem;
}

/* 1パネル目の「>」戻るボタン表示のホバー */
.move-first-panel-sub:hover {
  cursor: pointer;
}

/* パネルを開くエリア */
.panel-sub-click-area {
  position: absolute;
  top: 50%;
  right: 1px;
  width: 3rem;
  height: 7.35rem;
  cursor: pointer;
  transform: translate(3rem, -50%);
  background-size: contain;
  background-repeat: no-repeat;
  /* 最前面に来るように大きい数を指定しています */
  z-index: 100;
}

/* パネルを開く矢印 */
.panel-sub-click-arrow {
  position: absolute;
  top: 63%;
  transform: translate(0, -125%);
  font-size: 0.8rem;
}

/* 2パネル目 */
.move-second-panel {
  height: calc(100vh - 85px);
  /* 3枚目のパネルを少し見せるために100%より小さい値を指定しています。 */
  width: 99%;
  position: relative;
  background-color: var(--second-panel-gb-color);
  border-radius: var(--panel-template-border-radius);
  box-shadow: 15px 0px 15px -10px var(--box-shadow-color);
  z-index: 3;
}

/* 3パネル目 */
.move-third-panel {
  height: calc(100vh - 85px);
  width: 100%;
  position: absolute;
  background-color: var(--third-panel-gb-color);
  overflow: auto;
  border-radius: var(--panel-template-border-radius);
  box-shadow: 15px 0px 15px -10px var(--box-shadow-color);
  z-index: 2;
}

/* 4パネル目 */
.move-fourth-panel {
  height: calc(100vh - 85px);
  width: 100%;
  position: absolute;
  background-color: var(--third-panel-gb-color);
  overflow: auto;
  border-radius: var(--panel-template-border-radius);
  box-shadow: 3px 3px 5px var(--box-shadow-color);
  z-index: 1;
}

/* 3パネル目に枠ありのエリアをつける場合に使用します。 */
.move-third-panel-area {
  height: 94.5%;
  width: 98%;
  border-radius: var(--dialog-form-default-border-radius);
  background: #ffffff;
}

/* 帳票パネル */
.move-third-panel-area-print {
  height: 97%;
  position: relative;
  border-radius: var(--dialog-form-default-border-radius);
  background: #ffffff;
}

.move-third-panel-frame {
  height: 100%;
  margin-top: 1.5rem;
  /* margin-bottom: 2rem; */
  margin-left: 2rem;
  margin-right: 0.5rem;
  overflow: auto;
}


/* アニメーション付き2パネル（検索条件・編集画面）の分割 */
/* two_panel_template_move.php */
.move-left-panel {
  height: calc(100vh - 85px);
  width: 100%;
  left: 0%;
  position: absolute;
  background: var(--first-panel-bg-color);
  border-radius: var(--panel-template-border-radius);
  box-shadow: 15px 0px 15px -10px #00000059;
  z-index: 4;
}

.move-right-panel {
  height: calc(100vh - 85px);
  width: 98%;
  left: 100%;
  position: absolute;
  background-color: var(--second-panel-gb-color);
  overflow: auto;
}

/* 固定2パネル（検索条件・帳票操作画面）の分割 */
/* two_panel_template_fix.php */
.fix-left-panel {
  height: calc(100vh - 85px);
  width: 50%;
  background: var(--first-panel-bg-color);
  overflow: auto;
}

.fix-right-panel {
  height: calc(100vh - 85px);
  width: 50%;
  background-color: var(--second-panel-gb-color);
  overflow: auto;
}

.selection-division-box {
  background-color: #a5c1d3;
  color: #fff;
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
}

.user-box {
  background-color: #a5c1d3;
  color: #fff;
  border-radius: 6px;
  padding: 0.1rem 0.5rem;
  width:4rem;
  text-align: center;
}

.student-name-area {
  min-width: 13rem;
  max-width: 30rem;
  overflow: auto;
}

.related-field-box {
  background-color: #C8E1FC;
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  letter-spacing: 0.05rem;
}

.training-place-box {
  background-color: #FBDEB6;
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  letter-spacing: 0.05rem;
}
/*
  ------------------------------------------------
  ドラッグアンドドロップ
  ------------------------------------------------
*/
/* ドラッグアンドドロップパネル */
.drop-panel {
  position: relative;
  height: 12rem;
  width: 26rem;
  text-align: center;
  border-radius: var(--dialog-form-default-border-radius);
}

/* ドロップエリア */
.drop-area {
  cursor : pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px;
  border-style: dashed;
  border-color: #A5C1D3;
  background: #F2F4F5;
  /* ドラック時に0.25秒で色がわかる */
  transition: all 0.25s;
  border-radius: var(--dialog-form-default-border-radius);
}
.drop-area:hover {
  background-color: #69C7AF33;
}
/* ドロップエリアにファイルがドラッグされたときのスタイル */
.drop-area.dragover {
  border: 2px solid #90c1c2;
  background: #90c1c2;
}

/*
  ------------------------------------------------
  ボタン
  ------------------------------------------------
*/
/* #region 出欠系 */

/* 出席ボタン */
.attendance-btn {
  border: 1px solid var(--cancel-btn-hover-color);
  color: var(--cancel-btn-hover-color);
  background-color: var(--cancel-btn-bg-color);
}

/* 出席ボタン選択状態 */
.attendance-btn-selected {
  background-color: #4EBDA0;
  color: #fff;
}

/* 出席ボタン選択状態 */
.attendance-btn:hover,
.attendance-btn-selected:hover {
  background-color: var(--standard-btn-hover-bg-color);
}

/* 欠席ボタン */
.absence-btn {
  border: 1px solid #F84F66;
  color: #F84F66;
  background-color: #fff;

}

/* 欠席ボタン選択状態 */
.absence-btn-selected {
  background-color: #F84F66;
  color: #fff;
}

/* 欠席ボタンホバー */
.absence-btn:hover,
.absence-btn-selected:hover {
  background-color: #F84F6666;
}

/* その他ボタン */
.attendance-other-btn {
  border: 1px solid #F19210;
  color: #F19210;
  background-color: #fff;
}

/* その他ボタン選択状態 */
.attendance-other-btn-selected {
  background-color: #F19210;
  color: #fff;
}

/* その他ボタンホバー */
.attendance-other-btn:hover,
.attendance-other-btn-selected:hover {
  background-color: #F1921066;
}

/* #endregion 出欠系*/

/* 透明ボタン */
.transparent-btn {
  background: var(--transparent-btn-bg-color);
  color: var(--transparent-btn-color);
  border: 1px solid var(--transparent-btn-color);
}

/* 透明ボタンホバー */
.transparent-btn-selected,
.transparent-btn:hover {
  background-color: var(--transparent-btn-bg-color);
  color: var(--transparent-btn-hover-color);
  border: 1px solid var(--transparent-btn-hover-color);
}

/* ホームルームボタン */
.homeroom-btn {
  background-color: var(--homeroom-btn-bg-color);
  color: var(--standard-btn-font-color);
}

.homeroom-btn:hover {
  background-color: var(--homeroom-btn-hover-bg-color);
}

/* タブボタン */
.tab-btn {
  color: var(--tab-btn-color);
  background-color: var(--tab-btn-bg-color);
}

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

/* 帳票ダウンロードエリア */
.report-download-btn-area {
  width: 101.5%;
  background-color: #ffffffcc;
  height: 7rem;
  position: absolute;
  bottom: 0rem;
  left: -3rem;
  box-shadow: 0px -15px 5px -5px #44444433;
}

/* 帳票ダウンロードボタン */
.report-download-btn {
  position: fixed;
  bottom: 2rem;
  font-size: 1.2rem;
  opacity: 0.9;
}

/* 帳票詳細設定のラベル */
.print-detail-setting-label {
  margin-bottom: 0.5rem;
}

#print-preparation-panel-detail-item-list,
#print-preparation-panel-detail-item-spread {
  margin-left: 2rem;
}

/* 縦並びのタブリスト */
.tab-list-vertical {
  position: relative;
  z-index: 1;
  padding: 0 10px;
}

/* 縦並びのメニュータブリスト */
/* #region タブリストのホバー時アニメーション 設定 */
.menu-tab-list-vertical::before {
  background: var(--tab-list-vertical-active-color);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
  z-index: -1;
  border-radius: 4px;
}

.menu-tab-list-vertical:hover {
  color: #fff;
}

.menu-tab-list-vertical:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

/* #endregion タブリストのホバー時アニメーション 設定*/

.tab-list-vertical-active {
  background: var(--tab-list-vertical-active-color);
  color: #fff;
  border-radius: 4px;
}

.tab-list-vertical-active .li-sticky {
  background: transparent;
}

/* 子要素の付箋部分を背景色なしにします。 */
.tab-list-vertical:hover .li-sticky {
  background: transparent;
}

/* #endregion */

/*
  編集ボタンframe
  編集ボタン内のアイコンを中央寄せするために利用します
*/
.edit-btn-frame {
  display: flex;
  align-items: center;
}

/* 編集ボタン */
.edit-btn {
  background-color: var(--sub-btn-bg-color);
  color: var(--sub-btn-color);
  border-radius: 30px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  cursor: pointer;
  border: 1px solid var(--sub-btn-color);
  font-weight: normal;
}

/* 編集ボタンホバー */
.edit-btn:hover {
  background-color: var(--sub-btn-color);
  color: var(--sub-btn-bg-color);
}

/* ログインボタン */
.btn-login {
  width: 265px;
  height: 60px;
  border-radius: 30px;
  font-size: 1.25rem;
  color: #ffffff;
}

#capslock-message {
white-space: nowrap;
padding: 0;
font-size: 0.9rem;
}

/* 保存ボタン */
.btn-save {
  background-color: #405cff;
  color: #ffffff;
}

/* キャンセルボタン */
.btn-cancel {
  background-color: #3ecf65;
  color: #ffffff;
}

.btn-detail-search {
  background-color: #ffffff;
}

.btn-graduate-cancel {
  background-color: var(--graduate-cancel-btn-color);
}

.btn-graduate-cancel:hover {
  background-color: var(--graduate-cancel-btn-color);
}

/* 取込対象届出管理ボタン */
.contact-btn {
  top: 120px;
  left: 539px;
  width: 200px;
  height: 50px;
  font-weight: bold;
  border: 2px solid #9CC5F1;
  border-radius: 10px;
  color: #6996B4;
  background-color: #ffffff;
}

/* 取込対象届出管理ボタン選択状態 */
.contact-btn-selected {
  font-weight: bold;
  border-radius: 10px;
  border: 1px solid #9CC5F1;
  color: #ffffff;
  background-color: var(--selected-contact-btn-bg-color);
}


/* #region 音声読み上げ関係 */
/* 音声読み上げ速度ボタン */
.speech-rate-btn {
  padding: 0.6rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--cancel-btn-hover-color);
  color: var(--cancel-btn-hover-color);
  background-color: var(--cancel-btn-bg-color);
}

/* 音声読み上げ速度ボタン選択状態 */
.speech-rate-btn-selected {
  background-color: #4EBDA0;
  color: #fff;
}

/* 音声読み上げ速度ボタン選択状態 */
.speech-rate-btn:hover,
.speech-rate-btn-selected:hover {
  background-color: var(--standard-btn-hover-bg-color);
}

/* 音声読み上げ速度ボタンが2つ並んだときは0.5文字分余白を開ける */
.speech-rate-btn+.speech-rate-btn {
  margin-left: 0.5rem;
}

/* 音声読み上げ停止ボタン　*/
.speech-stop-btn {
  color: var(--label-stop-color);
  border: 1px solid var(--label-stop-color);
  padding: 0.4rem 1.25rem;
  min-height: 2.5rem;
  max-height: 2.5rem;
}

/* #endregion */

/*
  ------------------------------------------------
  入力
  ------------------------------------------------
*/
/* 大きい入力 */
.input-large {
  margin: var(--large-input-margin);
  padding-top: var(--large-input-padding-height);
  padding-bottom: var(--large-input-padding-height);
  padding-right: var(--large-input-padding-width);
  padding-left: var(--large-input-padding-width);

  font-size: var(--large-input-font-size);
  border: 2px solid var(--standard-input-border-color);
  border-radius: 5px;
}

/* 小さい入力 */
.input-small {
  margin: var(--small-input-margin);
  padding-top: var(--small-input-padding-height);
  padding-bottom: var(--small-input-padding-height);
  padding-right: var(--small-input-padding-width);
  padding-left: var(--small-input-padding-width);

  font-size: var(--small-input-font-size);
}

/* 入力枠あり */
.input-border-add {
  border: 1px;
}

/* 角丸の入力 */
.input-round {
  border: 1px solid;
  border-radius: 20px;
}

/* メニュー検索用のINPUT */
.input-menu-search-area,
.input-search-area {
  border: 1px solid;
  border-radius: 20px;
  overflow: hidden
}

.input-search-area {
  background-color: #fff;
  border: none;
  width: 30%;
}

/* 1パネル目絞り込みの枠 */
.search-condition-filter {
  background-color: #fff;
  border: none;
  width: 8rem;
  border-radius: 20px;
}

.search-condition-filter:hover {
  border: 2px solid var(--tab-btn-hover-bg-color);
}

.search-tab-active {
  border: 2px solid var(--tab-btn-hover-bg-color);
}

.input-menu-search-area:hover,
.input-search-area:hover {
  outline: 2px solid var(--tab-btn-hover-bg-color);
}

/* メニュー検索のアイコン（虫眼鏡） */
.input-menu-search-icon {
  color: var(--tab-btn-hover-bg-color);
  transition: transform 0.4s ease-in-out;
}

/* ホバー時アニメーション */
.input-menu-search-icon:hover {
  transform: scale(1.2);
}

/* 成績の入力枠（3桁がきれいに収まる） */
.input-result {
  width: 7rem;
}

/* 透明の入力枠 */
.input-transparent {
  border: none;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  width: 100%;
}

/* 検索ボックス */
.search-box:has(.standard-input) {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box:has(.standard-input):before {
    content: "\f002";
    font-family: "Font Awesome Kit", "Font Awesome 6 Pro";
    position: absolute;
    left: 16px;
}

.search-box .standard-input {
    border-radius: 16px;
    padding-left: 3rem;
}

/*
  ------------------------------------------------
  ラベル
  ------------------------------------------------
*/
/* 大きいラベル */
.label-large {
  margin: var(--large-label-margin);
  padding-top: var(--large-label-padding-height);
  padding-bottom: var(--large-label-padding-height);
  padding-right: var(--large-label-padding-width);
  padding-left: var(--large-label-padding-width);

  font-size: var(--large-label-font-size);
  vertical-align: middle;
  color: var(--label-color);
}

/* 小さいラベル */
.label-small {
  margin: var(--small-label-margin);
  padding-top: var(--small-label-padding-height);
  padding-bottom: var(--small-label-padding-height);
  padding-right: var(--small-label-padding-width);
  padding-left: var(--small-label-padding-width);

  font-size: var(--small-label-font-size);
  vertical-align: middle;
  color: var(--label-color);
}

/* ホバー設定するラベル */
.label-hover:hover {
  font-weight: bold;
  background-color: #75b5f8;
  border-radius: 5px;
}

/* リンクラベル */
.label-link {
  color: #247FE0;
  cursor: pointer;
}

/* リンクラベル(警告) */
.label-link-attention {
  color: var(--label-attention-color);
  cursor: pointer;
}


/* 滞納ラベル */
.label-arrearage-amount {
  color: var(--label-arrearage-amount-color);
}

/* 警告ラベル */
.label-attention {
  color: var(--label-attention-color);
}

/* 出欠 注意ラベル */
.attendance-attention {
  color: var(--label-attendance-rate-attention-color);
}

/* 出欠 警告ラベル */
.attendance-warning {
  color: var(--label-attendance-rate-warning-color);
}

/* 出欠 危険ラベル */
.attendance-danger {
  color: var(--label-attendance-rate-danger-color);
}

/* 出欠 出席不足ラベル */
.attendance-ng {
  color: var(--label-attendance-rate-ng-color);
}

.attendance-ng-text {
  font-size: 0.95rem;
  line-height: 1rem;
}

.label-student-name {
  font-size: 1.5rem;
}

.label-student-reading {
  font-size: 0.8rem;
  transform: translateY(-.06rem);
}

/* アクセントカラーを使ったラベル */
.accent-label {
  color: var(--standard-btn-bg-color);
}

/* 欠課のラベルカラー */
.label-absence-color {
  color: var(--label-absence-color);
}

/* 遅刻・早退のラベルカラー */
.label-lateness-leave-early-color {
  color: var(--label-lateness-leave-early-color);
}

/* 授業回数のラベルカラー */
.label-lesson-count-color {
  color: var(--label-lesson-count-color);
}

/* 出欠集計のラベル */
.label-attendance-total {
  vertical-align: baseline;
  font-weight: bold;
}

.label-attendance-rate-value {
  font-weight: bold;
  font-size: 1.25rem;
}

/* 成績のラベル */
.label-result {
  vertical-align: baseline;
  font-weight: bold;
}

/* インポートの必須項目のラベルカラー */
.label-import-required-color {
  color: var(--import-required-color);
}

/* 行エラーの背景色 */
.row-error-bg-color {
  background-color:#EBE7E7;
}
/* 列エラーの背景色 */
.column-error-bg-color {
  background-color:#EBE7E7;
}

/* エラーのラベルカラー */
.label-error-color {
  color: var(--label-error-color);
}

/* エラー背景色 */
.error-bg-color {
  background-color: var(--error-bg-color);
}

/* 相違背景色 */
.differ-bg-color {
  background-color: var(--differ-bg-color);
}

/* 読取専用背景色 */
.readonly-bg-color {
  background-color: var(--readonly-bg-color);
}

/* 出席以外のラベルカラー */
.label-attendance-other-color {
  color: var(--label-error-color);
}

/* 休日のラベルカラー */
.label-holiday-color {
  color: var(--holiday-bg-color);
}

/* 行事のラベルカラー */
.label-event-color {
  color: var(--event-bg-color);
}

/* 合格に値する設定以外のラベルカラー */
.label-success-other-color {
  color: var(--label-error-color);
}

/* 相違ラベルカラー */
.label-differ-color {
  color: var(--label-error-color);
}

/* 成績のルビ */
.label-result-ruby {
  vertical-align: top;
  font-size: 0.8rem;
}

/* 内部リンクラベル */
.internal-link {
  color: #247FE0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
  ------------------------------------------------
  テーブル
  ------------------------------------------------
*/
.table-overflow {
  overflow: auto;
  max-height: 77vh;
}
.table-overflow-20 {
  overflow: auto;
  max-height: 20vh;
}
.table-overflow-30 {
  overflow: auto;
  max-height: 30vh;
}
.table-overflow-37 {
  overflow: auto;
  max-height: 37vh;
}
.table-overflow-40 {
  overflow: auto;
  max-height: 40vh;
}
.table-overflow-45 {
  overflow: auto;
  max-height: 45vh;
}
.table-overflow-50 {
  overflow: auto;
  max-height: 50vh;
}
.table-overflow-55 {
  overflow: auto;
  max-height: 55vh;
}
.table-overflow-60 {
  overflow: auto;
  max-height: 60vh;
}
.table-overflow-65 {
  overflow: auto;
  max-height: 65vh;
}
.table-overflow-70 {
  overflow: auto;
  max-height: 70vh;
}
.table-overflow-75 {
  overflow: auto;
  max-height: 75vh;
}
.table-overflow-80 {
  overflow: auto;
  max-height: 80vh;
}
.table-overflow-85 {
  overflow: auto;
  max-height: 85vh;
}

/* テーブルの横幅指定　通常イサイズ */
.table-width-standard {
  width: 30rem;
}

.table-large {
  width: 70%;
}

/* 詳細検索で使用するテーブル */
.search-table-area {
  width: 45rem;
  background-color: #ffffff;
  border-radius: var(--dialog-form-default-border-radius);
  margin: 1rem;
  padding: 1rem;
}

/* 2パネル目表示時用の検索条件 */
.search-table-area-small {
  width: 20rem;
}


.search-table {
  /* エラーになるのでとりあえずフォントだけ指定*/
  font: 1rem;
}

.search-table th {
  background-color: #ffffff;
  border: 0;
  font-weight: normal;
}

/* 学生一覧のテーブル */
.student-list-table {
  /* エラーになるのでとりあえずフォントだけ指定*/
  font: 1rem;
}

.student-list-table th {
  font-size: var(--student-list-table-font-size);
}

.student-list-table td {
  border-bottom: 1px solid var(--table-border-color);
  font-size: var(--student-list-table-font-size);
}

/* 入替の三本バー */
.sortable-bars-color {
  color: var(--sortable-border-bar-color);
}

/* テーブルデータ要素の行固定 */
.table-lock-row {
  position: sticky !important;
  top: 0;
  z-index: 5;
}

.table-lock-row2 {
  position: sticky !important;
  top: 2.4rem;
  z-index: 2 !important;
}

/* ヘッダー1行目にボタンがある場合 */
.table-lock-row2m {
  position: sticky !important;
  top: 2.8rem;
  z-index: 2 !important;
}

.table-lock-row2l {
  position: sticky !important;
  top: 3.85rem;
  z-index: 2 !important;
}

.table-lock-row th,
.table-lock-row2 th,
.table-lock-row2m th,
.table-lock-row2l th {
  position: relative;
  border-left: none;
}

/* テーブルデータ要素の行固定 */
.table-lock-row th::before,
.table-lock-row2m th::before,
.table-lock-row2l th::before,
.table-lock-row2 th::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-left: 3px solid #ffffff;
}

/* 固定された列の編集ボタンに適用されます **/
.table-lock-row th:first-child div {
  z-index: 5;
}

.table-lock-row th:first-child::before {
  border-left: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.fixed-column-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 4;
}

.fixed-column-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background-color: #ffffff;
  transition: background-color 0.2s ease-in-out;
}

.fixed-column-table td:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  /* border-right: 1px solid var(--table-border-color); */
}

.fixed-column-table td:first-child::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  /* border-bottom: 1px solid var(--table-border-color); */
}

.fixed-column-table.table-column-header-border-bottom td:first-child::after {
  border-bottom: 1px solid var(--table-border-color);
}


.fixed-column-table tr:hover td:first-child {
  background-color: var(--table-tr-hover-color);
  transition: background-color 0.2s ease-in-out;
}

.table-error-row td:first-child {
  background-color: #ffeaed !important;
  transition: background-color 0.2s ease-in-out;
}

.table-error-row:hover td:first-child {
  background-color: #fed7dc !important;
  transition: background-color 0.2s ease-in-out;
}


/* .fixed-column-table th:first-child::before { */
  /* border-left: none; */
  /* border-right: 1px solid var(--table-border-color); */
/* } */

.table-lock-column {
  z-index: 1 !important;
  background-color: #ffffff;
}

.white-space-normal {
  white-space: normal;
  overflow-wrap: break-word;
}

.white-space-nowrap {
  white-space: nowrap;
}

.white-space-pre-wrap {
  white-space: pre-wrap;
}

.table-error-row {
  background-color: #ffeaed !important;
  transition: background-color 0.2s ease-in-out;
}

.table-error-row:hover {
  background-color: #fed7dc !important;
  transition: background-color 0.2s ease-in-out;
}

/*
  ------------------------------------------------
  タブ
  ※parts.cssに移動させるか検討中
  ※standard用意するか検討中
  ------------------------------------------------
*/

.edit-dialog-header:has(.tab-menu) {
  padding-left: 0;
}

.tab-menu {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
}

.tab-menu>li:first-child {
  margin-left: 0;
}

/* サブダイアログのタイトル */
.tab-menu-title-small {
  font-size: 1rem;
  color: var(--standard-btn-bg-color);
  white-space: nowrap;
}

@media screen and (max-width: 1620px) {
  .tab-menu-right {
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  .tab-menu-right {
  width: 50%;
  }
}
@media screen and (max-width: 1180px) {
  .tab-menu-right {
    width: 100%;
  }
}

.tab-item {
  background-color: #c7e5e1;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;

  /* widthを同じ比率で分けあう */
  flex-grow: 1;
}

/* アクティブなタブはデザインを変えて選択中であることが解るようにする */
.tab-active {
  color: var(--standard-btn-bg-color);
}

.menu-tab-border {
  position: absolute;
  height: 1px;
  /* width: 62px; */
  background-color: var(--standard-btn-bg-color);
  /* margin-left: 202px; */
  display: block;
}

.tab-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* コンテンツは原則非表示 */
.tab-content {
  display: none;
  width: 100%;
  transition: 0.25s ease-in-out;
}

/* .tab-now-open */
.tab-now-open {
  display: block;
}

/* メニュー左から右にスライドする */
.menu-slide-left {
  transform: translateX(calc(-25vw - 25%));
}

.menu-slide-right {
  transform: translateX(calc(25vw + 25%));
}

.menu-show {
  transform: translateX(0);
}


/*
  ------------------------------------------------
  タブ　メニューグループ
  ※parts.cssに移動させるか検討中
  ※standard用意するか検討中
  ------------------------------------------------
*/
.menu-area {
  color: #444444;
}

.menu-group-list {
  color: #6996B4;
  font-weight: bold;
  font-size: 15px;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}

.menu-group-list:hover {
  background-color: #ebf0f4;
}

.menu-group-list-content-area {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  margin-bottom: 0;
  border-bottom: 1px solid #E0DDD7;
}

.menu-list-item {
  margin-bottom: 0.5rem;
  padding: 0;
  list-style: none;
}

.menu-width {
  width: 20rem;
}

.menu-width-long {
  width: 21.5rem;
}

.menu-history-width {
  width: 22rem;
}

.menu-search-width {
  width: 19rem;
}

/* メニュー検索の検索文字を表示 */
.menu-search-character-searched {
  font-weight: bold;
  border-bottom: solid 1px #ebf0f4;
  margin-bottom: 1rem;
}

.menu-hover :hover {
  cursor: pointer;
  color: #d0dde5;
}

/* 履歴タイトルエリア */
.menu-history-title-area {
  border-bottom: 1.5px solid #E0DDD7;
  margin-bottom: 2rem;
}

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

.font-weight-initial {
  font-weight: initial;
}

.menu-history-date {
  min-width: 5.5rem;
}

.no-use-menu {
  opacity: 0.7;
  cursor: default;
}

/* トップページ */
.top-page-panel {
  min-height: calc(100vh - 40px);
  background: var(--top-page-panel-bg-color);
}

.top-page-portal-area {
  background: #fff;
  border-radius: 17px;
  padding: 15px;
  height: 100%;
}

.top-page-portal-item {
  position: relative;
  flex-wrap: wrap;
  width: 6rem;
  margin: 0 0.2rem;
}

.top-page-portal-item:hover {
  cursor: pointer;
  color: #407EB899;
}

.top-page-portal-icon-group {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #407EB8;
  font-size: 1rem;
}

.top-page-portal-icon-name {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  text-align: center;
}

.badge-icon {
  position: absolute;
  top: 0px;
  right: 18%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #F84F66;
}


/* 全画面表示の場合 */
@media screen and (min-width: 1401px) {
.top-page-portal-icon-name {
  max-width: none;
  visibility: initial;
}
.top-page-portal-icon-wide {
  display: initial;
}
.top-page-portal-icon-slim {
  display: none;
}
.badge-icon {
  right: 20%;
}
}

@media screen and (max-width: 1400px) {
.top-page-portal-icon-name {
    max-width: 60px;
    visibility: initial;
}
.top-page-portal-icon-wide {
  display: initial;
}

.top-page-portal-icon-slim {
  display: none;
}
.badge-icon {
  right: 14%;

}
}

@media screen and (max-width: 1300px) {
.top-page-portal-icon-name {
  max-width: 40px;
  visibility: hidden;
}
.top-page-portal-icon-wide {
  display: none;
}
.top-page-portal-icon-slim {
  display: initial;
}
.badge-icon {
  right: 4%;

}
.top-page-portal-icon-slim.fa-xl {
  font-size: 1.4em;
}

}

#top-page-item-portal {
  background: linear-gradient(to right top, #86B8ED, #B1E1D4);
  padding: 0.3rem;
}

#top-page-item-portal:hover {
  background: linear-gradient(to right top, #5B9FB8, #8ED5C3);
  padding: 0.3rem;
}

/* ポータルを開くボタン */
.top-page-portal-btn {
  background: linear-gradient(90deg, #91BFEF 0%, #B4E3D7 51%, #65B8ED 100%, #65B8ED 200%);
  color: #fff;
  cursor: pointer;
  border: none;
  background-position: 1% 50%;
  background-size: 200% auto;
  /*アニメーションの指定*/
  transition: all 0.3s ease-out;
  text-align: center;
  border-radius: 40px;
  font-size: 1.3rem;
  padding: 0.75rem;
  position: absolute;
  /* bottom: -5px; */
}

.top-page-portal-btn-name {
  width: 100%;
  position: relative;
  text-align: center;
}

.top-page-portal-btn-mark {
  position: absolute;
  top: 0;
  right: 1.2rem;
}


/*hoverした際の、背景の場所とテキスト色の変更*/
.top-page-portal-btn:hover {
  background-position: 100% 20%;
}

#top-page-item-support {
  background: #B0D0F3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#top-page-item-support:hover {
  background: #C3DBF6;
}

.top-page-item-support-title {
  color: #fff;
  font-size: 1.5rem;
  text-align: center;
  font-weight: bold;
}

#top-page-item-support-img-area {
  text-align: center;
}

.top-page-item-support-img {
  width: 100%;
  max-width: 210px;
}


/* トップ左エリア */
.top-page-left-area {
  width: 22%;
  /* 白の70%透過 */
  background: #ffffffB3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: max(0.8%, 1rem);
}

/* トップページ左エリアのアイテム */
.top-page-left-item {
  width: 85%;
  height: 14.5rem;
  background: #fff;
  border-radius: 20px;
  margin-bottom: 1rem;
  padding: 1rem;
  margin-left: auto;
  margin-right: auto;
}

/* トップ右エリア */
.top-page-right-area {
  width: 78%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: max(0.8%, 1rem);
}

/* トップページ右エリアのアイテム */
.top-page-right-item {
  width: 49%;
  height: 30rem;
  background: #fff;
  border-radius: 20px;
  margin-bottom: 1rem;
  margin-right: 1rem;
  padding: 1.5rem;
}

.top-page-right-item-title {
  color: #6996B4;
  font-size: 2rem;
  font-weight: bold;
}

.top-contents-panel {
  width: 80%;
  background-color: #e1e5f2;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  padding: 0.5rem;
  border-radius: var(--dialog-form-default-border-radius);
}

.top-notice-row {
  border-bottom: 1.5px solid #d0dde5;
  padding: 0.3rem 0.4rem;
  margin-left: 0.5rem;
}

.top-notice-title {
  width: 90%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.top-notice-area {
  overflow: auto;
  max-height: 100%;
  padding-right: 0.2rem;
}

.notice-detail p {
  margin-bottom: 0;
}

/*
  ------------------------------------------------
  通知
  ※parts.cssに移動させるか検討中
  ※standard用意するか検討中
  ------------------------------------------------
*/
.notice-clear-icon {
  float: right;
  cursor: pointer;
}

.notice-operation-panel {
  background-color: #f6f8c0;
}

/*
  ------------------------------------------------
  アシストメモ
  ※parts.cssに移動させるか検討中
  ※standard用意するか検討中
  ------------------------------------------------
*/
.assistmemo-edit-icon {
  float: right;
  cursor: pointer;
}

.assistmemo-operation-panel {
  background-color: #ffffff;
  border-radius: 15px;
  margin: 0.5rem;
  margin-top: 0;
}

.assistmemo-menumemo-panel {
  background-color: #EAFEF9;
  border-radius: 15px;
  margin: 0.5rem;
  margin-top: 0;
}

.assistmemo-panel-block {
  padding-bottom: 1rem;
  margin: 0 0.3rem;
  border-bottom: 1px solid var(--table-border-color);
}

.assistmemo-operation-panel .assistmemo-panel-block:last-child,
.assistmemo-menumemo-panel .assistmemo-panel-block:last-child {
  border-bottom: none;
}

/*
  ------------------------------------------------
  学生パネルヘッダ
  ------------------------------------------------
*/
.student-chart-header-panel {
  white-space: nowrap;
  border-bottom: 1.5px solid #707070;
}

/* 学生基本情報表示エリアのflex */
.student-chart-flex {
  display: flex;
  align-items: center;
}

.student-chart-flex-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.student-chart-tab-area-icon {
  font-size: 1.3rem;
  color: var(--standard-btn-bg-color);
  margin-right: 1rem;
  margin-bottom: 0.5rem;
}

.student-chart-tab-area-title {
  font-size: 1.5rem;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
}

.photo-area {
  position: relative;
  height: 100px;
  width: 100px;
  max-width: 100px;
  max-height: 100px;
  min-width: 100px;
  min-height: 100px;
}

/* 写真が納まる要素（幅は写真の幅と合わせてください） */
.face-photo-area {
  width: 100px;
  text-align: center;
  position:relative;
}

/* 写真表示 */
.face-photo {
  height: 100px;
  width: 100%;
  max-width: 100%;
  max-height: 100px;
  min-width: 100%;
  min-height: 100px;
  object-fit: contain;
  transition: 0.2s ease-in-out;
}

/*画面幅に左右されないためのクラス*/
.face-photo-main {
  height: 100px;
  max-height: 100px;
  min-width: 100%;
  min-height: 100px;
  object-fit: contain;
  transition: 0.2s ease-in-out;
}
.face-photo-left {
  height: 100px;
  max-width: 100%;
  max-height: 100px;
  min-height: 100px;
  object-fit: contain;
  transition: 0.2s ease-in-out;
}

.face-photo-small {
  max-height: 80px;
  max-width: 80px;
}

.face-photo-triming-area {
  min-height: 180px;
  width: 100%;
}

.triming-icon {
  width: 22px;
  height: 22px;
  text-align: center;
  margin: 0.2rem 0.5rem;
  cursor: pointer;
}

.face-photo-preview {
  height: 120px;
  width: 120px;
  object-fit: contain;
  overflow: hidden;
}

.face-photo-preview-area {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 120px;
}

.camera-icon {
  background-color: #ffffff;
  color: var(--standard-btn-bg-color);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  max-width: 20px;
  min-width: 20px;
  max-height: 20px;
  min-height: 20px;
  /* レイアウトが崩れるのでフォントサイズを固定します*/
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;

  border: 1px solid var(--standard-btn-bg-color);
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.tab-area {
  white-space: nowrap;
  overflow: hidden;
}

/* 3パネル目の折りたたみパネル */
.chart-panel-area {
  border-bottom: 1.5px solid #707070;
  /* padding-bottom: 1rem; */
  position: relative;
  /* margin-bottom: 1rem; */
}

/* 3パネルの折りたたみパネルのタイトル */
.chart-panel-title {
  padding: 1rem 0;
  font-weight: bold;
}

.chart-panel-title:hover {
  background-color: #69C7AF33;
}

/* 3パネルの折りたたみパネル内サブタイトル */
.chart-panel-sub-title {
  font-weight: bold;
  color: #6996B4;
}


.area-separator-line {
  /* borderの上下余白を取りたいので例外的にTOPmarginを指定します */
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--table-border-color);
}

.right-separator-line {
  padding-right: 0.5rem;
  margin-right: 0.5rem;
  border-right: 1px solid var(--table-border-color);
}

/*
　検索条件の設定でのみ使用中
　右側枠線を追加する設定です。
*/
[data-right-separator='true'] {
  padding-right: 0.5rem;
  margin-right: 0.5rem;
  border-right: 1px solid var(--table-border-color);
}

.merge-icon {
  font-size: 0.9rem;
  padding-top: 0.3rem;
  vertical-align: bottom;
}

/*
  ------------------------------------------------
  保存ポップアップ
  ------------------------------------------------
*/

.save-popup-panel {
  width: 100%;
  position: fixed;
  margin: 0;
  padding: 0;
  left: 0;
  bottom: 0;
  background-color: #000000;
  text-align: center;
  /* 一番手前側に表示したいので大きい値をセットしています。 */
  z-index: 1000;
}

/*
  ------------------------------------------------
  カルテ用パネル
  ------------------------------------------------
*/
.chart-panel {
  height: calc(100vh - 430px);
  overflow-y: auto;
}

.chart-curriculum-panel {
  background-color: var(--panel-sub-title-curriculum-bg-color);
}

/*
  ------------------------------------------------
  帳票用パネル
  ------------------------------------------------
*/
.report-layout-panel {
  min-height: 80vh;
  margin: 0rem 1rem 1rem 1rem;
  padding: 0 0.5rem 5rem 0.5rem;
  background-color: #ffffff;
  /* 角丸 */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.report-layout-title {
  font-size: 1.2rem;
  font-weight: bold;
  /* background-color: var(--third-panel-gb-color); */
}

/* 帳票表示項目、自由項目などのタイトル */
.report-layout-sub-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
  width: 8rem;
  margin-left: 0;
  padding-left: 0;
  margin-right: 0.5rem;
  padding-right: 0;
}

/* 帳票表示項目、自由項目などのタイトルの付箋アイコン */
.report-layout-sub-title-sticky-note {
  background-color: #C2D7E4;
  max-width: 5px;
  min-width: 5px;
  height: 0.9rem;
  /* bootstrapの定義より強くするためimportantを指定 */
  border-radius: 10px !important;
  margin-right: 0.5rem;
}

/* 帳票表示項目、自由項目などの入力欄 */
.report-layout-sub-input {
  width: 27rem;
}


/* 帳票詳細項目エリア */
.print-detail-area {
  background-color: #EBF0F4;
  border-radius: 30px;
  margin-bottom: 2rem;
}

.print-detail-sticky-note {
  width: 5px;
  background: #69C7AF;
  border-radius: 3px;
}

.report-layout-selected {
  background-color: #DEF3EE;
  border-radius: 14px;
  width: 4rem;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.25rem;
}

/* 帳票の設定項目の幅を一括で指定します */
[id^=print-setting-item-style-] {
  width: 95%;
}

[id^=print-preparation-panel-edit-item-print-free-item-] {
  width: 95%;
}

.issue-code-department-title {
  width: 14.5rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-left: 0.3rem;
}

.issue-code-department {
  width: 100%;
}

.issue-code-area {
  max-height: 12rem;
  overflow: auto;
}

.issue-code-department-input {
  width: 7.5rem;
}


/*
  ------------------------------------------------
  選択用パネル
  ------------------------------------------------
*/
.selector-panel {
  margin: 15px;
}

/*
  ------------------------------------------------
  イメージ表示用パネル
  ------------------------------------------------
*/
/* イメージに文字をかぶせる為の位置設定 */
.img-preview-panel {
  position: relative;
  text-align: center;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000080;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 1.5rem;
}

.img-preview-panel:hover .overlay ,
.face-photo-area:hover .overlay {
  opacity: 1;
}

/* 四角で囲線 */
.img-preview-panel-border-1 {
  /* border: 1px solid #444444; */
  box-shadow: 0px 0px 15px #00000029;
}


/* イメージタグのサイズ */
.img-preview-size {
  width: auto;
  height: 65vh;
}

/* イメージタグのサイズ（小さめの幅サイズ） */
.img-preview-size-small-width {
  width: 80px;
}

.img-preview-size-middle-width {
  width: min(15rem,75%);
}

/* イメージに文字をかぶせる設定 */
.img-preview-text-on-img {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  color: #69C7AF;
  font-weight: bold;
  font-size: 4em;
}

/* イメージに文字をかぶせる設定（小さめのサイズ） */
.img-preview-text-on-img-small,
.img-preview-text-on-img-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  color: #69C7AF;
  background-color: #ffffffB3;
  font-weight: bold;
  font-size: 0.6em;
}

.img-preview-text-on-img-middle {
  font-size: 2rem;
}

/* 半コマ */
.harf-lesson {
  background-color: #fefed6;
}

/* 予定回数以上のコマ */
.over-count-lesson {
  background-color: #75b5f8;
}

/* コマ */
.standard-lesson {
  background-color: #d6e7fa;
}

/*
  ------------------------------------------------
  カルテ 顔写真
  ------------------------------------------------
*/
.photo-add-area {
  padding: 2rem;
  margin: auto 0.5rem;
  cursor: pointer;
}


/*
  ------------------------------------------------
  カルテ 出欠カレンダー
  ------------------------------------------------
*/
.attendance-calendar-canvas-area {
  height: 12rem;
  width: 12rem;
  position: relative;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.attendance-calendar-donut-title {
  font-size: 1.2rem;

  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.attendance-calendar-donut-value,
.attendance-calendar-donut-danger-value {
  font-size: 2.5rem;
  color: #69C7AF;
  /* text-decoration: underline; */
  text-underline-offset: 0.5rem;
  /* text-decoration-thickness: 1px; */

  position: absolute;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.attendance-calendar-donut-danger-value {
  color: #FC5D73;
}

.attendance-calendar-donut-value-small {
  font-size: 1.5rem;
}

/*
  ------------------------------------------------
  カルテ 修得単位タブ チャート
  ------------------------------------------------
*/
.obtain-credits-canvas-area {
  height: 15rem;
  width: 15rem;
  position: relative;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.obtain-credits-doughnut-title {
  font-size: 1.4rem;
  text-align: center;
}

.obtain-credits-doughnut-value-numerator {
  font-size: 2.5rem;
  color: #247fe0;
  text-align: center;
  border-bottom: 2px solid #707070;
  position: absolute;
  width: 65%;
  top: 41%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.obtain-credits-doughnut-value-denominator {
  font-size: 2rem;
  text-align: center;

  position: absolute;
  width: 65%;
  top: 66%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}



.obtain-credits-doughnut-value {
  font-size: 2.5rem;
  color: var(--standard-txt-color);
  position: absolute;
  top: 57%;
  left: 50%;
  width: 80%;
  text-align: center;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.obtain-credits-doughnut-value-small {
  font-size: 1rem;
  color: var(--standard-txt-color);
  margin-left: 0.5rem;
}

.obtain-credits-data-area {
  height: 15rem;
  min-width: 12rem;
  max-width: 20rem;
  position: relative;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.obtain-credits-gpa-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.obtain-credits-gpa-title {
  font-size: 1rem;
  margin-right: 0.5rem;
}

.obtain-credits-gpa-value {
  font-size: 1.5rem;
  font-weight: bold;
  width: 4.5rem;
}

/*
  ------------------------------------------------
  カルテ 指導記録タブ
  ------------------------------------------------
*/

.guidance-record-contents {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  /** webkit効かなかった時用*/
  max-height: 6rem;
}

.guidance-record-division {
  font-size: 0.9rem;
}

/* 場所はあとで移動する */
/* タイトルにつける楕円印 */
.title-highlight {
  background: var(--standard-btn-bg-color);
  border-radius: var(--dialog-form-default-border-radius);
  margin-right: 0.5rem;
  width: 0.5rem;
  height: 1rem;
}

/* 四角で囲まれたラベル */
.box-label {
  border: 1px solid var(--label-color);
  border-radius: 5px;
}

/* 空欄の四角 */
.box-label-blank {
  background-color: #E8EBED;
  border: 1px solid #CED4D9;
}

.box-label-blank:before {
  /* スペース文字列 */
  content: "\3000\3000";
}

/* ラベルを繋げる線 */
.connect-line {
  border-bottom: 2px solid var(--standard-btn-bg-color);
  width: 2rem;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}

/* 出欠集計パネルのボックス幅 */
.total-attendance-box {
  width: 7rem;
  height: 6rem;
  padding: 0.5rem 0.3rem 0.3rem 0.3rem;
}

.total-attendance-box-detail {
  width: 7rem;
  height: 6rem;
  padding: 0.5rem 0.1rem 0.3rem 0.1rem;
}

.attendance-detail-date {
  font-size: 0.8rem;
  height: 16.8px;
}

/* 成績のボックス幅 */
.result-box {
  width: 7rem;
  min-height: 6rem;
  padding-top: 1rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* 成績入力欄 */
.result-input {
  width: 5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* ボックス幅 サイズ大 */
.box-large {
  width: 15rem;
  padding: 0.5rem 0.3rem 0.3rem 0.3rem;
}

.box-document {
  color: #6996b4;
  background-color: #EBF0F4;
  border-radius: 15px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

/* 成績評価項目の背景色 */
.result-mark-item {
  background-color: var(--unselected-result-mark-color);
}

/* 成績評価項目で選ばれているものの背景色 */
.selected-result-mark-item {
  background-color: var(--selected-result-mark-color);
}

/* 修得単位タブの修得合計パネル */
.obtain-total-panel {
  background-color: var(--obtain-total-panel-color);
  /* 角丸 */
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
}

/* 修得状況アイコン「修得」 */
.obtain-status-obtained-icon {
  color: var(--obtain-status-obtained-icon-color);
}

/* 修得状況アイコン「既修得」 */
.obtain-status-authorization-icon {
  color: var(--obtain-status-authorization-icon-color);
}

/* 修得状況アイコン「未修得」 */
.obtain-status-not-obtained-icon {
  color: var(--obtain-status-not-obtained-icon-color);
}

/* 修得状況アイコン「無効」 */
.obtain-status-ignore-icon {
  color: var(--obtain-status-ignore-icon-color);
}

/* 修得単位ボックスパネルの上段です。証明書（2ボックス分）、GPが入ります。 */
/* d-flexで再現できないので、この形で再現しています。 */
.obtain-item-boxes-upper-part {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}

/* 修得単位ボックスパネルの下段です。 */
/* d-flexで再現できないので、この形で再現しています。 */
.obtain-item-boxes-lower-part {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

/* 手入力アイコン */
.use-manual-icon {
  width: 7pt;
  height: 7pt;
  border-radius: 50%;
  background-color: var(--use-manual-icon-color);
}

/* 受験資格アイコン「なし」 */
.qualification-exam-ng-icon {
  color: var(--qualification-exam-ng-icon-color);
}

/* 1文字分の空白 */
.width-blank-1 {
  width: 1rem;
}

/* ミートボールメニューのダイアログ */
.meat-ball-menu-dialog {
  display: block;
  position: fixed;
  box-shadow: 0px 3px 6px var(--box-shadow-color);
  background: #ffffff;
}

/* ミートボールメニューの背景幕（Bootstrap のモーダル内で表示する場合のクラス） */
.modal-backdrop-inner-bs-modal {
  z-index: 1060;
  /* Bootstrap のモーダルのz-indexが1055のため。 */
}

/* #region モーダルのアニメーション */
/* モーダルのズームインアウト */
.modal-show {
  animation: showAnimation .3s ease-out;
}

.meet-ball-modal-show {
  animation: meetBallShowAnimation .3s ease-out;
}

/* モーダル閉じる制御用クラス */
.modal-close {
    /* 空のルールは、エラーになるので、記述しなくても自動的に継承となるプロパティを１つ指定しています */
  font-family: inherit;/* 親要素プロパティを継承 */
}

/* モーダル閉じた時のズームアウト */
.modal-fade:not(.modal-show) {
  animation: closeAnimation .3s ease-out;
}

.meet-ball-modal-fade:not(.meet-ball-modal-show) {
  animation: meetBallCloseAnimation .3s ease-out;
}

@keyframes showAnimation {
  0% {
    scale: 0.85;
    opacity: 1;
  }

  100% {
    scale: 1;
  }
}

/* ミートボールモーダル開くアニメーション */
@keyframes meetBallShowAnimation {
  0% {
    opacity: 1;
    height: 0%;
  }

  10% {
    height: 10%;
  }

  20% {
    height: 20%;
  }

  30% {
    height: 30%;
  }

  40% {
    height: 40%;
  }

  50% {
    height: 50%;
  }

  60% {
    height: 60%;
  }

  70% {
    height: 70%;
  }

  80% {
    height: 80%;
  }

  90% {
    height: 90%;
  }

  100% {
    height: 100%;
  }

}

/* モーダル閉じるアニメーション */
@keyframes closeAnimation {
  0% {
    scale: 1;
  }

  100% {
    scale: 0.85;
    opacity: 0;
  }
}

/* テスト */
/* .panel-close {
  animation: meetBallCloseAnimation .3s ease-out;
  height: 10%;
} */

/* ミートボールモーダル閉じるアニメーション */
@keyframes meetBallCloseAnimation {
  0% {
    height: 100%;
  }

  10% {
    height: 90%;
  }

  20% {
    height: 80%;
  }

  30% {
    height: 70%;
  }

  40% {
    height: 60%;
  }

  50% {
    height: 50%;
  }

  60% {
    height: 40%;
  }

  70% {
    height: 20%;
  }

  80% {
    height: 10%;
  }

  90% {
    height: 0%;
  }

  100% {
    height: 0%;
  }

}

/* #endregion モーダルのアニメーション */

/* 編集ダイアログ */
.edit-dialog-main {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 510;
  /* 他のダイアログと衝突しない値を設定 */
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

/* 編集ダイアログのサイズ */
.edit-dialog-size {
  position: relative;
  margin-top: var(--dialog-top-margin);
  margin-bottom: var(--dialog-bottom-margin);
  margin-right: auto;
  margin-left: auto;
  pointer-events: none;
}

/* 編集ダイアログの内容 */
.edit-dialog-content {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--dialog-content-bg-color);
  background-clip: padding-box;
  border: 1px solid var(--dialog-content-border-color);
  border-radius: var(--dialog-form-default-border-radius);
  outline: 0;
  min-height: 50%;
}

/* サブ編集ダイアログの内容 */
.edit-dialog-content-sub {
  display: flex;
  position: relative;
  flex-direction: column;
  pointer-events: auto;
  background-color: var(--dialog-content-bg-color);
  background-clip: padding-box;
  border: 1px solid var(--dialog-content-border-color);
  border-radius: var(--dialog-form-default-border-radius);
  outline: 0;
  min-height: 50%;
  width: 30%;
  margin-right: 0.5rem;
}

#bookmark-mode-change {
  min-width: 9rem;
}

/* メニューダイアログ */
#panel-edit-dialog-template-size {
  display: flex;
}

/* ブックマークの表示非表示を切替え */
.bookmark-change {
  display: none;
}

/* ブックマーク並び替えエリアの非表示設定 */
.panel-edit-dialog-template-body-sub-hide {
  display: none !important;
}

/* ブックマーク並び替えエリアの表示設定 */
.panel-edit-dialog-template-body-sub-show {
  display: block !important;
}

#with-tab-panel-template-panel {
  overflow: auto;
  max-height: 69vh;
}

#with-tab-panel-template-panel.no-header-panel {
  max-height: initial;
}

#panel-edit-dialog-template-body-table-sub-list-view {
  width: 20rem;
}

#panel-edit-dialog-template-body-table-sub {
  width: 20rem;
}

/* 全画面表示の場合 */
@media screen and (min-width: 1401px) {

  /* ブックマーク並び替えエリアの非表示設定 */
  .panel-edit-dialog-template-body-sub-hide {
    display: block !important;
  }
}

/* 小さい面表示の場合　ブックマーク並び替えを横並びから上下に変更します */
@media screen and (max-width: 1400px) {
  .edit-dialog-content,
  .edit-dialog-content-sub {
    position: static;
  }

  .edit-dialog-bookmark-sub {
    margin-left: 1rem;
  }

  /* 横並びから上下表示に変更 */
  #panel-edit-dialog-template-size {
    position: relative;
    flex-direction: column;
  }

  /* 初期状態はブックマーク内容を非表示で表示（表示の切り替えはJS） */
  #panel-edit-dialog-template-body-sub {
    display: none;
  }


  /* 上下表示に変わるので、幅を修正 */
  .edit-dialog-content-sub {
    width: 100%;
    margin-bottom: 1rem;
    min-height: min-content;
  }

  /* ブックマーク表示非表示を切り替えるアイコンを表示します */
  .bookmark-change {
    display: inline;
  }

  #panel-edit-dialog-template-body-table-sub-list-view {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

}


/* 編集ダイアログのヘッダー部 */
.edit-dialog-header {
  width: calc(100% - 2rem);
  /* display: flex; */
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 1rem 1.5rem;
  border-bottom: 1px solid;
  border-image: var(--header-bg-color);
  border-image-slice: 1;
  font-size: 1.1rem;
}

.edit-dialog-header-sub {
  display: flex;
  margin: 0.5rem 1rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1rem 1rem 0.5rem;
  border-bottom: 1px solid;
  border-image: var(--header-bg-color);
  border-image-slice: 1;
  font-size: 1.1rem;
}

.edit-dialog-header-title {
  font-size: 1.3rem;
  cursor: pointer;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ダイアログタイトルのホバー（クラウドにあわせて透明度0.5にしています） */
.edit-dialog-header-title:hover {
  opacity: 0.5;
}

/* サブダイアログのタイトル */
.edit-dialog-header-sub-title {
  font-size: 1.3rem;
  color: var(--standard-btn-bg-color);
  white-space: nowrap;
}

/* 編集ダイアログのボディ部 */
.edit-dialog-body {
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  margin: 1rem 1.8rem;
  padding: 0 0.2rem;
}

/* ダイアログ表示時に横スクロールが発生してしまう問題の回避 */
.meat-ball-menu-dialog-body>.standard-label,
.edit-dialog-body>.standard-label {
  margin-left: 0;
  margin-right: 0;
}

/* 編集サブダイアログのボディ部 */
.edit-dialog-body-sub {
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  margin: 1rem 1rem;
  padding: 0rem 1rem;
  max-height: 100%;
  overflow-y: auto;
}


/* 編集ダイアログのフッター部 */
.edit-dialog-footer {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  padding: 1rem;
  border-top: 1px solid #D2D7DC;
  margin-top: 0.25rem;
}

/* 編集ダイアログの背景幕 */
.edit-dialog-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 500;
  /* 他のダイアログと衝突しない値を設定 */
  width: 100vw;
  height: 100vh;
  background-color: var(--dialog-backdrop-color);
}

/* 編集ダイアログのスクロール */
.edit-dialog-scrollable {
  /* 全体の高さから、ダイアログの上下余白分を引いた値 */
  max-height: calc(100% - (var(--dialog-top-margin) + var(--dialog-bottom-margin)));
}



.edit-dialog-scrollable .edit-dialog-content {
  max-height: 100%;
  /* overflow: hidden; */
}

.edit-dialog-scrollable .edit-dialog-body {
  overflow-y: auto;
}

/*
メニューヘッダ―のボ―タ―
edit-dialog-headerのborder-bottomを打ち消したいので下に定義
*/
.menu-header-border {
  border-bottom: 1px solid #E0DDD7;
  border-image: none;
  /* position: relative; */
}

/* メニューダイアログ 最近使ったメニューボーダー */
.menu-dialog-user-recently-border {
  border-bottom: 1px solid #E0DDD7;

}

/* メニュー名の幅を指定 */
.menu-item {
  max-width: 17rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 0.5rem;
}

.menu-close-btn {
  display: flex;
  position: absolute;
  top: -20px;
  right: -20px;
  border-radius: 50%;
  background-color: var(--bookmark-bg-color);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.menu-close-btn::after {
  pointer-events: none;
  z-index: -1;
}

.bookmark-edit-label-area:active {
  cursor: -webkit-grabbing;
  box-shadow: 0px 0px 10px 0px #44444433;
  animation: sortItemActive 0.1s linear;
  animation-fill-mode: forwards;
  width: 100%;
}

/* 並び替え選択アニメーション */
@keyframes sortItemActive {
  0% {
    padding-left: 0rem;
  }

  100% {
    padding-left: 0.25rem;
  }
}


.bookmark-edit-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 16.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-bottom: 0.25rem;
}

.bookmark-edit-label:hover {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.bookmark-edit-label:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  padding-right: 0rem;
}

.bookmark-edit-label-list {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 16.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-bottom: 0.25rem;
}

.bookmark-padding {
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
}

.bookmark-bar-hidelist-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 17rem;
  text-align: left;
  color: #4291B2;
}

/*
左から右に大きくなるアニメーション
*/
.slide-anime-label-show {
  animation: scale-show 0.3s ease-in-out;
  transform-origin: left;
}

/*
右から左に小さくなるアニメーション
*/
.slide-anime-label-hide {
  animation: scale-hide 0.3s ease-in-out;
  transform-origin: left;
}

/* 高さ指定オート、幅コンテンツ幅にあわせる編集ダイアログ */
/* 注意：動的にコンテンツ幅が変わるダイアログに使用すると、
　　　　 ダイアログ幅が動いてしまい、UXが低下するので使用しないで下さい */
.dialog-size-fit {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 95%;
  height: auto;
}


/* さらにもっと小サイズの編集ダイアログ */
.edit-dialog-very-small {
  width: 20%;
}

/* さらに小サイズの編集ダイアログ */
.edit-dialog-more-small {
  width: 30%;
}

/* 小サイズの編集ダイアログ */
.edit-dialog-small {
  width: 50%;
}

/* 中サイズの編集ダイアログ */
.edit-dialog-medium {
  width: 75%;
}

/* 大サイズの編集ダイアログ */
.edit-dialog-large {
  width: 95%;
}

/* 幅40remの編集ダイアログ */
.edit-dialog-width-40rem {
  width: 40rem;
}

/* 保存した検索条件の編集ダイアログタイトル */
.edit-dialog-original-search-title {
  font-weight: bold;
  color: #6996B4;
}

/* 入力不可 */
.disabled {
  pointer-events: none;
  background-color: #e8ecef;
}

/* ミートボールメニューダイアログ */
.meat-ball-menu-dialog-main {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 710;
  /* 他のダイアログと衝突しない値を設定 */
  /* width: 100%; */
  overflow-x: hidden;
  overflow-y: hidden;
  outline: 0;
  padding-right: 0.5rem;
}

/* ミートボールメニューサブダイアログ */
.meat-ball-menu-dialog-sub {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 730;
  /* 他のダイアログと衝突しない値を設定 */
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

/* ミートボールメニューダイアログのサイズ（標準として15％） */
.meat-ball-menu-dialog-size {
  position: relative;
  pointer-events: none;
  width: fit-content;
}

/* 編集用のミートボールメニューダイアログのサイズ（標準として30％） */
.edit-meat-ball-menu-dialog-size-normal {
  width: 30%;
}

/* 編集用の広いミートボールメニューダイアログのサイズ */
.edit-meat-ball-menu-dialog-size-wide {
  width: 45%;
}

/* ミートボールメニューダイアログの内容 */
.meat-ball-menu-dialog-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--dialog-content-bg-color);
  background-clip: padding-box;
  border: 1px solid var(--dialog-content-border-color);
  border-radius: var(--dialog-form-default-border-radius);
  outline: 0;
  min-height: 20%;
  box-shadow: 5px 3px 5px var(--box-shadow-color);
}

/* ミートボールメニューダイアログのヘッダー部 */
.meat-ball-menu-dialog-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--dialog-border-color);
}

/* ミートボールメニューダイアログのボディ部 */
.meat-ball-menu-dialog-body {
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  padding: 1rem;
}

/* ミートボールメニューダイアログのフッター部 */
.meat-ball-menu-dialog-footer {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  padding: 0.75rem;
  border-top: 1px solid var(--dialog-border-color);
}

/* ミートボールメニューダイアログの背景幕 */
.meat-ball-menu-dialog-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 700;
  /* 他のダイアログと衝突しない値を設定 */
  width: 100vw;
  height: 100vh;
  /* background-color: var(--dialog-backdrop-color); */
}

/* ミートボールメニューサブダイアログの背景幕 */
.meat-ball-menu-dialog-backdrop-sub {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 720;
  /* 他のダイアログと衝突しない値を設定 */
  width: 100vw;
  height: 100vh;
  /* background-color: var(--dialog-backdrop-color); */
}

/* ミートボールメニューダイアログのスクロール */
.meat-ball-menu-dialog-scrollable {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.meat-ball-menu-dialog-scrollable .meat-ball-menu-dialog-content {
  max-height: 90vh;
  overflow: hidden;
}

.meat-ball-menu-dialog-scrollable .meat-ball-menu-dialog-body {
  overflow-y: auto;
}

/* ミートボールメニューのリスト */
.meet-ball-menu-row-item:hover {
  background-color: #69C7AF33;
  border-radius: 3px;
}

.import-btn {
  width: 12rem;
}

/* 顔写真含めた作業エリア */
.import-face-work-area {
  margin-top: 0.5rem;
  width: 100px;
  height: 125px;
  text-align: center;
  display: inline-table;
}

/* 顔写真のインポートで使用する写真サイズ(3対4)*/
.import-face-photo-area {
  width: 82px;
  height: 109px;
  margin: auto;
}

/* 顔写真のインポートで使用する写真下のテキストエリア */
.import-face-photo-text-area {
  width: inherit;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 編集ダイアログに追加エリアを表示する場合のクラス */
.add-panel-edit-dialog-addArea {
  height: fit-content;
  width: 50%;
}

/* 並び替えのアイコン */
.grip-icon {
  color: #C2D7E4;
  width: 14px;
  margin-bottom: 0.25rem;
}

/* 並び替えテーブルの下線 */
.grip-table-border {
  border-bottom: 1px solid #C2D7E4;
}

/* ファイルボックス */
.file-box {
  color: var(--sub-btn-color);
  text-align: center;
  margin-right: 1rem;
  cursor: pointer;
}
/* インフォボックス */
.info-box {
  color: #6996DE;
  text-align: center;
  margin-right: 1rem;
  cursor: pointer;
}

.info-box-icon,
.file-box-icon {
  font-size: 2rem;
}

.info-box-label,
.file-box-label {
  font-size: 0.9rem;
}

/* mapアイコン */
.map-icon {
  font-size: 1.15rem;
  color: var(--sub-btn-color);
  cursor: pointer;
  margin-left: 1rem;
}

/* mapアイコン無効 */
.map-icon-disenable {
  color: #DEF3EE;
  cursor: default;
}

/* 検索条件表示 */
.view-condition-value-area {
  display: flex;
  align-items: center;
}

.view-condition-value {
  overflow: hidden;
  white-space: nowrap;
  max-width: 30rem;
  text-overflow: ellipsis;
}

/* 検索条件 設定条件 */
.view-condition-value-descriptive-txt {
  background-color: #ebf0f4;
  color: #6996B4;
  padding: 0.2rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: 5px;
  font-size: 0.9rem;
}

.scroll-panel {
  height: 94%;
  margin-right: 1rem;
  overflow: auto;
}

.scroll-panel-second {
  height: 90%;
  margin-right: 1rem;
  overflow: auto;
}

.original-search-item-edit-icon {
  color: #fff;
}

.original-search-btn,
.recommend-search-btn {
  margin-left: 2rem;
  margin-bottom: 2rem;
  height: 5rem;
  min-height: 5rem;
  max-height: 5rem;
  min-width: 20rem;
  max-width: 20rem;
  text-align: left;
  color: #444444;
  background-color: #FFFFFF;
  box-shadow: 0px 3px 10px #00000029;
  border-radius: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: 0.2s ease-in-out;
}

.original-search-btn {
  margin-bottom: 3rem;
}

.recommend-search-btn {
  min-height: 10rem;
  max-height: 10rem;
}

.original-search-btn:hover,
.recommend-search-btn:hover {
  background-color: #FFFFFFCC;
}

/* 出欠を入力するの日の出欠の横幅を指定します */
.spread-width-attendance-of-days {
  width: 8rem;
}

/* 成績タブの注目ボックス */
.result-tab-attention-box {
  height: 8rem;
  width: 8rem;
  border: 1px solid #FC3550;
  border-radius: 12px;
  margin-bottom: 2rem;
  margin-right: 1rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

.result-tab-attention-box-number,
.result-tab-attention-box-text {
  font-size: 2rem;
  font-weight: bold;
  color: #FC3550;
}

.result-tab-attention-box-text {
  font-size: 1rem;
}

/** 在籍区分表示Box **/
.division-box {
  color: #fff;
  border-radius: 3px;
  margin-left: 1rem;
  padding-left: 0.2rem;
  padding-top: 0.1rem;
  letter-spacing: 0.25rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* 在籍区分表示 */
.in-division-block {
  width: 100%;
  color: #fff;
  background-color: #75B5F8;
  border-radius: 6px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  letter-spacing: 0.5rem;
}

/** 在籍区分　非在籍者 **/
.in-division-block-not-enrollment {
  background-color: var(--label-attendance-rate-danger-color);
}

/** 在籍区分　留学復学（戻ってくる学生） **/
.in-division-block-return {
  background-color: var(--label-attendance-rate-attention-color);
}

/** 在籍区分　卒業 **/
.in-division-block-graduate {
  background-color: #75B5F8;
}

/** 進級区分　留年 **/
.in-division-block-promotion-repeat-student {
  background-color:  #565656;
}


.select-dialog-spread-area {
  height: 20rem;
  width: 40rem;
  overflow: auto;
}

/* ショートカット検索条件のラベル */
.short-cut-search-label {
  overflow: hidden;
}

.short-cut-search-label>div {
  margin-top: 0;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
}

.short-cut-search-label>div:last-child {
  margin-bottom: 0rem;
}

.short-cut-search-label>div>p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
}


/* 上下余白を合わせるために最終要素の空白を削除します */
.short-cut-search-label>p:last-of-type {
  margin-bottom: 0;
}


/* ショートカット検索条件の付箋アイコン */
.short-cut-search-label-sticky-note {
  background-color: #BCD8F6;
  max-width: 5px;
  min-width: 5px;
  height: 0.9rem;
  /* bootstrapの定義より強くするためimportantを指定 */
  border-radius: 10px !important;
  margin-right: 0.5rem;
}

/* ショートカット検索のタイトル*/
.short-cut-search-item-title {
  color: #fff;
  border-bottom: 1px solid #fff;
  margin-left: 2rem;
}

/* ショートカット検索のグループタイトル*/
.short-cut-search-item-group-title {
  color: #fff;
  margin-left: 2rem;
  font-size: 1.1rem;
}

/* ショートカット検索のエリア幅 */
.short-cut-search-item-width {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 110rem;
}

@media screen and (max-width: 1800px) {
  .short-cut-search-item-width {
    width: 88rem;
  }
}

@media screen and (max-width: 1400px) {
  .short-cut-search-item-width {
    width: 66rem;
  }
}

@media screen and (max-width: 1000px) {
  .short-cut-search-item-width {
    width: 44rem;
  }
}

/* テキストの改行 */
.text-lf {
  white-space: pre-wrap;
}

/* 色指定：白 */
.color-white {
  color: #fff;
}

/* フォントサイズ指定：1.2rem */
.f-size-1-2rem {
  font-size: 1.2rem;
}
/* フォント太文字 */
.f-bold {
  font-weight: bold;
}

.w-105 {
  width: 105%;
}
/* 幅指定95%（Bootstrapに存在しないため追加） */
.w-95 {
  width: 95%;
}

/* 幅指定90%（Bootstrapに存在しないため追加） */
.w-90 {
  width: 90%;
}

/* 幅指定85%（Bootstrapに存在しないため追加） */
.w-85 {
  width: 85%;
}

.w-80 {
  width: 80%;
}

.w-70 {
  width: 70%;
}

.w-60 {
  width: 60%;
}

/* 幅指定40%（Bootstrapに存在しないため追加） */
.w-40 {
  width: 40%;
}

.w-60rem {
  width: 60rem;
  min-width: 60rem;
  max-width: 60rem;
}

.w-50rem {
  width: 50rem;
  min-width: 50rem;
  max-width: 50rem;
}

.w-55rem {
  width: 55rem;
  min-width: 55rem;
  max-width: 55rem;
}

.w-41rem {
  width: 41rem;
  min-width: 41rem;
  max-width: 41rem;
}

.w-40rem {
  width: 40rem;
  min-width: 40rem;
  max-width: 40rem;
}

.w-35rem {
  width: 35rem;
  min-width: 35rem;
  max-width: 35rem;
}

.w-30rem {
  width: 30rem;
  min-width: 30rem;
  max-width: 30rem;
}

.w-28rem {
  width: 28rem;
  min-width: 28rem;
  max-width: 28rem;
}

.w-25rem {
  width: 25rem;
  min-width: 25rem;
  max-width: 25rem;
}

.w-24rem {
  width: 24rem;
  min-width: 24rem;
  max-width: 24rem;
}

.w-20rem {
  width: 20rem;
  min-width: 20rem;
  max-width: 20rem;
}

.w-17rem {
  width: 17rem;
  min-width: 17rem;
  max-width: 17rem;
}

.w-15rem {
  width: 15rem;
  min-width: 15rem;
  max-width: 15rem;
}

.w-12rem {
  width: 12rem;
  min-width: 12rem;
  max-width: 12rem;
}

.w-10-5rem {
  width: 10.5rem;
  min-width: 10.5rem;
  max-width: 10.5rem;
}

.w-10rem {
  width: 10rem;
  min-width: 10rem;
  max-width: 10rem;
}

.w-9-5rem {
  width: 9.5rem;
  min-width: 9.5rem;
  max-width: 9.5rem;
}

.w-8rem {
  width: 8rem;
  min-width: 8rem;
  max-width: 8rem;
}

.w-7rem {
  width: 7rem;
  min-width: 7rem;
  max-width: 7rem;
}

.w-6-5rem {
  width: 6.5rem;
  min-width: 6.5rem;
  max-width: 6.5rem;
}

.w-6rem {
  width: 6rem;
  min-width: 6rem;
  max-width: 6rem;
}

.w-5rem {
  width: 5rem;
  min-width: 5rem;
  max-width: 5rem;
}

.w-4rem {
  width: 4rem;
  min-width: 4rem;
  max-width: 4rem;
}

.w-2rem {
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
}

.w-3rem {
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
}

.h-75vh {
  height: 75vh;
}

.h-2rem {
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
}

.h-8rem {
  height: 8rem;
  min-height: 8rem;
  max-height: 8rem;
}

.h-10rem {
  height: 10rem;
  min-height: 10rem;
  max-height: 10rem;
}

.h-20rem {
  height: 20rem;
  min-height: 20rem;
  max-height: 20rem;
}

.max-w-90 {
  max-width: 90%;
}

.max-w-80 {
  max-width: 80%;
}

.max-w-70 {
  max-width: 70%;
}

.max-w-60 {
  max-width: 60%;
}

.max-w-50 {
  max-width: 50%;
}

.max-w-40 {
  max-width: 40%;
}

.max-w-30 {
  max-width: 30%;
}

.max-w-40rem {
  max-width: 40rem;
}

.max-w-30rem {
  max-width: 30rem;
}

.max-w-17rem {
  max-width: 17rem;
}

.min-w-12rem {
  min-width: 12rem;
}

.min-w-10rem {
  min-width: 10rem;
}

.min-w-7rem {
  min-width: 7rem;
}

/* 3パネル目の大きさを変更するアイコン */
.move-panel-size-change-icon {
  position: absolute;
  margin-left: -1rem;
  top: 1.5rem;
  font-size: 20px;
  color: var(--standard-btn-bg-color);
  transition-duration: 0.3s;
}

.move-panel-size-change-icon:hover {
  transform: scale(1.2);
  transition-duration: 0.3s;
}

/*
  ------------------------------------------------
  ポップオーバー
  ------------------------------------------------
*/

.popover {
  min-width: 4rem;
  border-radius: 10px;
  box-shadow: 0px 3px 10px #00000029;
}

/* Bootstrapの定義を上書きします */
.bs-popover-top>.popover-arrow::after,
.bs-popover-top>.popover-arrow::before {
  border-top-color: #444444;
}
.bs-popover-end>.popover-arrow::after,
.bs-popover-end>.popover-arrow::before {
  border-right-color: #444444;
}

.bs-popover-bottom>.popover-arrow::after,
.bs-popover-bottom>.popover-arrow::before {
  border-bottom-color: #444444;
}

.popover.fade.show {
  animation: popoverShow 0.3s ease;
}

@keyframes popoverShow {
  0% {
    left: -0.2rem;
  }

  50% {
    left: 0.2rem;
  }

  100% {
    left: 0.1rem;
  }
}

.popover-function-description {
  background: #444444;
  border: 2px solid #444444;
  box-shadow: none;
  font-size: 1rem;
  border-radius: 5px;
}

.popover-function-description>.popover-body {
  color: #fff;
  padding: 0.5rem;
}
/*
  ------------------------------------------------
*/

/* クリック状態を保持するテーブル3パネル目にのみ使用します */
/* 複数行選択タイプ */
.keep-click-status-table {
    /* 空のルールは、エラーになるので、記述しなくても自動的に継承となるプロパティを１つ指定しています */
  font-family: inherit;/* 親要素プロパティを継承 */
}
/* 単一行選択（アクティブ行）タイプ */
.keep-active-row-table {
    /* 空のルールは、エラーになるので、記述しなくても自動的に継承となるプロパティを１つ指定しています */
  font-family: inherit;/* 親要素プロパティを継承 */
}

tr.keep-click-status-on,
tr.keep-click-status-on td:first-child {
  background-color: var(--table-active-color);
  transition: background-color 0.2s ease-in-out;
}
tr.keep-click-status-on:hover {
  background-color: var(--table-active-color);
  transition: background-color 0.2s ease-in-out;
}
tr.keep-click-status-on:hover td:first-child {
  background-color: var(--table-active-color);
  transition: background-color 0.2s ease-in-out;
}

tr.keep-click-status-off,
tr.keep-click-status-off td:first-child {
  transition: background-color 0.2s ease-in-out;
}

/* 表示順の項目名 */
.display-order-title {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* 詳細検索のアイコン */
.condition-value-icon {
  display: block;
  position: absolute;
  right: 15px;
  top: 12px;
  z-index: 999;
}

/* 詳細検索エリア */
.search-condition-table-body {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

/* 最近使用したメニューの日付 */
.menu-of-use-recently-day {
  color: #6996B4;
  font-size: 1.1rem;
  font-weight: bold;
}



/* 非表示から一度大きくなってから元のサイズに戻るアニメーション */
@keyframes scale-show {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

/* 一度大きくなってから消えるアニメーション */
@keyframes scale-hide {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(0);
  }
}

/* お知らせアイコンのカウント */
#notice-icon {
  position: relative;
}

#notice-icon .count {
  position: absolute;
  top: 5px;
  right: 0px;
  min-width: 13px;
  height: 13px;
  font-size: 7px;
  line-height: 14px;
  color: white;
  border-radius: 10px;
  background-color: #F84F66;
  padding: 0 2px;
}

/* 使用中ユーザーアイコンのカウント */
#multiple-user-icon {
  position: relative;
}

#multiple-user-icon .multiple-user-count-badge {
  padding-top: 1px;
  position: absolute;
  bottom: 0;
  right: -1.5px;
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0.8rem;
  font-weight: bold;
  color: white;
  border-radius: 80%;
  background-color: #F84F66;
}


/* #region 時間割*/
/* 時間割のコマ */
.timetable-period {
  border: 1px solid #D0DDE5;
  border-radius: 7px;
  width: 6rem;
  padding: 1.8rem 1rem;
}

/* 時間割コマタイトル（1時限など） */
.timetable-period-title {
  color: #A5C1D3;
}

/* 時間割ヘッダ */
.timetable-header {
  background-color: #A5C1D3;
  color: #fff;
  height: 6rem;
}

.timetable-list-item {
  background: #fff;
  border-radius: 10px;
  padding: 0.5rem;
  align-items: center;
  height: 6rem;
  margin: 0 0.5rem 1rem 0.5rem;
}

.timetable-list-item-name-area {
  max-width: 14rem;
  width: 14rem;
}

.timetable-list-item-name {
  width: 90%;
  text-overflow: ellipsis;
  overflow: hidden;
}

.timetable-list-item:hover {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.timetable-list-item:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

/* 時間割編集アイコン */
.timetable-edit-icon {
  color: #4ebda0;
}

/* 時間割授業回数 */
.timetable-lesson-count {
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
  padding: 0 0.5rem;
  width: 5rem;
}

.timetable-border {
  border-bottom: 1px solid #D0DDE5;
  border-left: 2px solid #D0DDE5;
}

.timetable-border-last {
  border-right: 2px solid #D0DDE5;
}

.timetable-height {
  height: 10rem;
}

.width-15rem {
  width: 15rem;
}

/* 時間割授業のフレーム */
.timetable-lesson-item-frame {
  background-color: #EBF0F4;
  border-radius: 10px;
  padding: 0.25rem;
  margin-top: 0.5rem;
  height: 9rem;
  width: 11rem;
}

/* 半コマ授業のフレーム */
.timetable-half-lesson-area {
  border-radius: 10px;
  padding: 0.25rem;
  height: 4rem;
  width: 11rem;
  margin: 0 auto;
}

.timetable-lesson-color {
  background-color: #EBF0F4;
}

/* 半コマ授業の区切り線 */
.timetable-lesson-dividing-line {
  border-bottom: dotted 3px #EBF0F4;
  margin-bottom: 0.25rem;
  margin-top: 0.3rem;
  height: 4%;
}

/* 通常授業の授業名 */
.timetable-lesson-item-frame>.timetable-lesson-item-lesson-name-area {
  margin-top: 1rem;
  height: 3rem;
  align-items: flex-start;
}

/* 半コマ授業の授業名 */
.timetable-lesson-item-frame>.timetable-lesson-item-lesson-name-area {
  margin-top: 0.5rem;
  height: 2rem;
  align-items: flex-start;
}

.timetable-lesson-item-lesson-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 84%;
  text-align: center;
  margin: 0 auto;
}

.timetable-lesson-item-remarks {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-height: 2.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* 表示用の授業名は編集アイコンのエリアを確保する必要が無いので、100%幅にする */
.timetable-calendar-view-area .timetable-lesson-item-lesson-name {
  width: 100%;
}

/* 半コマ授業のフレーム */
.timetable-half-lesson-item-frame {
  background-color: #EBF0F4;
  border-radius: 10px;
  padding: 0.25rem;
  height: 40%;
  width: 10rem;
}

.timetable-half-lesson-item-area {
  margin-top: 0.5rem;
}

.timetable-calendar-item {
  width: 12rem;
}

/* 時間割授業回数のエリア */
.timetable-lesson-counter-area {
  text-align: center;
  min-width: 6rem;
  border-radius: 17px;
  padding: 0.5rem 1rem;
  background-color: #fff;
  text-align: center;
}

/* 時間割コマ回数通常 */
.timetable-lesson-counter-color-select-normal {
  background-color: #EBF0F4;

}

/* 時間割コマ回数一致 */
.timetable-lesson-counter-color-same {
  background-color: #69C7AF;
}

/* 時間割コマ回数オーバー */
.timetable-lesson-counter-color-over {
  background-color: #F7CC91;
}


.timetable-edit-left-area {
  height: 70vh;
  width: 72%;
  margin-top: 1.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0;
  margin-left: 0;
}

.timetable-edit-right-area {

  max-width: 25%;
}

.timetable-selection-area {
  background: #EBF0F4;
  height: 75vh;
  border-radius: 16px;
  overflow-x: auto;
  white-space: nowrap;
  margin-left:0.5rem;
}

.timetable-edit-dialog-content-area {
  height: 97vh;
  max-height: 97vh;
  min-height: 97vh;
}

.timetable-header-text,
.place-text {
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: nowrap;
}

#timetable-body,
#timetable-edit-body {
  font-size: 12px;
}

#timetable-header,
#timetable-edit-header {
  font-size: 0.9rem;
}

#input-timetable-frame {
  position: relative;
  max-height: 75vh;
  overflow: auto;
}

#timetable-header,
#timetable-edit-header {
  position: sticky;
  top: 0;
  z-index: 900;
}

#timetable-period,
#timetable-edit-period {
  position: sticky;
  left: 0;
  z-index: 60;
}

[id^="timetable-period-label-"],
[id^="timetable-edit-period-label-"] {
  background: white;
}

/* スクロール時にヘッダと縦ラベルが交差する角を隠す。
   幅0の sticky コンテナでレイアウトを崩さず、スクロールに追従する基準点を作り、
   その中にマスク要素を absolute で配置して角を覆う */
#timetable-corner-holder{
  position: sticky;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 1000;
}

#timetable-corner-mask{
  position: absolute;
  top: 0;
  left: 0;
  width: 6rem;
  height: 6rem;
  background: white;
}
/* #endregion 時間割*/

/* #region 工程表 */
.recode-training-place-work-schedule-height {
  height: 2rem;
  min-height: 2rem;
}

/* 工程表のヘッダ */
.recode-training-place-work-schedule-header {
  background-color: #EBF0F4;
  border: 1px solid #fff;
}

/* 工程表のヘッダ（年と週番号） */
.recode-training-place-work-schedule-header-days {
  background-color: #A5C1D3;
  color: #fff;
  border: 1px solid #fff;
  height: 2rem;
}

.recode-training-place-work-schedule-header-date {
  background-color: #EBF0F4;
  color: #8BA8BB;
  height: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  font-weight: bold;
  border: 1px solid #fff;
}

/* 日曜日の文字色 */
.recode-training-place-work-schedule-header-date-sun {
  color: #F84F66
}



/* 工程表のボディ */
.recode-training-place-work-schedule-body {
  height: 2rem;
  min-width: 2rem;
  max-width: 2rem;
}

/* 工程表ボーダー */
.recode-training-place-work-schedule-border {
  border-bottom: 1px solid #D0DDE5;
  border-left: 2px solid #D0DDE5;
}

.recode-training-place-work-schedule-border-title,
.recode-training-place-work-schedule-border-bottom {
  border-bottom: 1px solid #D0DDE5;
}

.recode-training-place-work-schedule-add-btn,
.group-icon
{
  color: #69C7AF;
}

.recode-training-place-work-schedule-add-btn:hover {
  color: #69c7af44;
}

/* #endregion 工程表 */


.underline {
  text-decoration: underline;
}

/* spreadヘッダ */
.table-ht-color {
  font-weight: bold;
  background-color: var(--table-ht-color);
}

/* #region 学校カレンダー */
.school-calender-item {
  max-width: 65px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.school-calender-disable-change-month-btn {
  opacity: 50%;
  cursor: default;
}

/* #endregion 学校カレンダー */

/* #region ドラック＆ドロップのカーソルを制御 */
.panel-edit-dialog-table-target-sort:hover {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  background-color: none;
}

.panel-edit-dialog-table-target-sort:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  box-shadow: 0px 10px 10px #44444433 !important;
  animation: sortSearchItemActive 0.1s linear;
  animation-fill-mode: forwards;
}

/* 検索条件並び替え選択アニメーション */
@keyframes sortSearchItemActive {
  0% {
    padding-left: var(--standard-label-padding-width);
  }

  100% {
    padding-left: 1.5rem;
  }
}

/* #region sortablejsのクラスをラッパー */
.sortable-ghost:hover {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

.sortable-chosen:hover {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;

}

.sortable-ghost:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;

}

.sortable-chosen:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

/* #endregion sortablejsのクラスをラッパー */
/* #endregion ドラック＆ドロップのカーソルを制御 */


.spread-target-count {
  position: absolute;
  top: 1rem;
}

/* キーワード検索対象*/
.free-word-search-mark-up {
  margin-left: 1rem;
  font-size: 0.8rem;
  color: #6996B4;
}

.report-layout-table-border {
  border-bottom: 1px solid var(--table-border-color);
}

/* 標準帳票の場合背景色を変えます */
.default-report-tr {
  background-color: #4444441A;
}

.default-report-tr:first-child {
  box-shadow: inset 0px 2px 0px 0px #fff;
}

.default-report-tr:hover {
  background-color: #DFE8E6;
}

#loading {
  background-color: #44444433;
  z-index: 999;
  position: fixed;
  text-align: center;
}

.loading-icon-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading-icon {
  width: 6rem;
  height: 6rem;
  color: #6996B4;
}

.help-icon {
  color: #4f84d9;
  font-size: 0.85em;
  margin-left: 0.25rem;
  transform: translateY(-0.5em);
}

/** タブ選択パネルのメイン */
.tab-area-main {
  max-width: 88%;
}



/** 重要 **/
.important-text-color {
  color: #F84F66;
}

.default-text-color {
  color: var(--standard-txt-color);
}


/** 詳細表示 **/
.show-details-title {
  cursor: pointer;
}

.show-details-title:hover {
  background-color: #69C7AF33;
}



.address-area {
  min-width: 50%;

}

/* スプレッドの内容を（行）を表示するボタン */
.spread-part-view-btn {
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

/** スクロール不可 */
.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-y-auto {
  overflow-y: auto;
}

.advertisement-allowance-icon {
  position: absolute;
  top: 27%;
  right: 6%;
}

.visibility-hidden {
  visibility: hidden;
}

.target-label-box-same {
    color: var(--label-error-color);
    background-color: #fc35501A;
    border-radius: 5px;
    margin-right: 0.5rem;
    padding: 0 0.5rem;
}

.target-label-box-infomation {
    color: #4e7dbf;
    background-color: #4e7dbf1A;
    border-radius: 5px;
    margin-right: 0.5rem;
    padding: 0 0.5rem;
}

.label-information-color {
  color: #4e7dbf;
}

.from-portal-attendance-btn {
  width: 19rem;
}

.from-portal-report-btn {
  width: 12rem;
}

.retirement-box-color {
  width: 6rem;
  padding-left: 0;
  letter-spacing: 0;
  background-color: #44444480;
}

.personal-division-box {
  width: 5.5rem;
  color: #6996b4;
  background-color: #EBF0F4;
  border-radius: 6px;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.privilege-group-color {
color: #6996b4;
font-weight: bold;
}

.class-title {
  width: 6rem;
}

.setting-title {
  width: 11rem;
}

.edit-operational-experience-title {
  height: 8rem;
}
.edit-operational-experience {
  height: 20rem;
}
.operational-experience {
  overflow-wrap: break-word;
  word-break: break-word;
}

.graduation-decide-btn {
  min-height: 2.5rem;
  max-height: 2.5rem;
  letter-spacing: 0.1rem;
}

.graduation-decide-text {
  color: #2DC59E;
  text-align: start;
  letter-spacing: 0.1rem;
  font-size: 1rem;
}

.icon-width {
  width: 15px;
}

.training-report {
  max-width: 40rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.report-preview-img-area {
  width: 18rem;
}

.pursuable-division-box {
  color: #fff;
  border-radius: 3px;
  margin-left: 1rem;
  padding-left: 0.2rem;
  padding-right: 0.1rem;
  padding-top: 0.1rem;
  letter-spacing: 0.1rem;
  white-space: nowrap;
}

/** まとめて履修では上記スタイルとあわせてこちらのスタイルも指定する*/
.pursuable-label {
  background-color: #fff;
  color: initial;
  text-align: center;
  letter-spacing: 0;
  margin-left: 0;
  margin-bottom: 0.2rem;
}


.examination-name {
  text-overflow: ellipsis;
  width: 12rem;
}
.dialog-separator-line {
    border-bottom: 1.5px solid #D0DDE5;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.box-area {
  border: none;
  border-radius: 5px;
  position: relative;
}

.box-normal {
background-color: #D4EAF0;
}

.box-parent {
background-color: #FDD1D7;
z-index: 10;
}

.box-children {
background-color: #FAE1BE;
z-index: 6;
}

.attention-color:hover {
  background-color: #fc355033 !important;
}

.white-border-left-3 {
  border-left: 3px solid #fff;
}

.box-normal::after,
.box-children::after {
  content: "";
  position: absolute;
  top: 1.5em;
  left: -40px;
  width: 40px;
  border-bottom: 1px solid #a5c1d3;
}

.z-index-auto {
  z-index: auto;
}

.z-index-2 {
  z-index: 2 !important;
}


/**
【カリキュラムを決定する】授業タブ ツリー階層表示で使用
*/
.tree-hierarchy {
  padding-bottom: 1rem;
}

.tree-hierarchy ul {
  list-style: none;
}

.tree-hierarchy li {
  position:relative;
  list-style: none;
}

.tree-hierarchy li ul li:before {
  content: "";
  position: absolute;
  top: -1.5em;
  left: -40px;
  width: 30px;
  height: calc(100% + 1em);
  border-left: 1px solid #a5c1d3;
}

.tree-hierarchy li ul li:last-child::before {
  height: calc(2em + 1em);
}


.separator-line {
  border-bottom: 2px solid #6996B4;
}

.fit-content {
  width: fit-content;
}

.circle-area {
  position: relative;
  display: inline-block;
  width: 8rem;
  height: 8rem;
  text-align: center;
  border-radius: 50%;
  border: solid 2px #6996B4;
}

.circle-area .circle-content {
  position: absolute;
  /** ボーダーの太さ分ずらす*/
  left: -10px;
  top: 45%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 9rem;
  text-align: center;
}

.score-color {
color: #6996B4;
/* border-bottom: solid 1px #6996B4; */
}

.separator-total-line {
  border-top: 3px solid var(--table-border-color);
}

.common-subject-box {
  color: #fff;
  border-radius: 3px;
  padding-left: 0.2rem;
  padding-top: 0.1rem;
  letter-spacing: 0.2rem;
  font-size: 0.8rem;
  white-space: nowrap;
  background-color: #6996B4;
}

.annotation-of-detail-setting {
  margin-left: 1rem;
  margin-bottom: 1rem;
  margin-top: -0.7rem;
}

.regulation-panel-title {
  font-size: 1.6rem;
  font-weight: bold;
  color: #6996B4;
}

th.completion-spread-header {
  padding: 0.5rem 1rem 2.5rem;
}

.completion-spread-header-btn {
  position: absolute;
  bottom: 0.5rem;
  right: 1rem;
}

/**------------------------------------------------
  js_ExportExcelUsingExceljs用スタイル
  ------------------------------------------------
*/
.js-export-excel-ignore {
  /* 空のルールは、エラーになるので、記述しなくても自動的に継承となるプロパティを１つ指定しています */
  font-family: inherit;/* 親要素プロパティを継承 */
}


/*------------------------------------------------*/
/* Webから届出情報を取り込む */
/*------------------------------------------------*/
.badge-13-icon {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #F84F66;
}

.nav-tabs {
  border: none;
}

.nav-tabs .nav-link {
  color: var(--standard-txt-color);
  border: none;
  padding-bottom: 3px;
}

.nav-tabs .nav-link:disabled {
  opacity: 0.5;
}

.nav-tabs .nav-link.active {
  color: var(--standard-btn-bg-color);
}

.nav-item i {
  margin-right: 4px;
}

.nav-tabs-line {
  position: absolute;
  height: 2px;
  background-color: var(--standard-btn-bg-color);
}

.nav-item:only-child .action {
  display: none;
}

/* アイテムを標準間隔で配置します（折り返して表示します） */
.item-wrap-grid-standard-gap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, auto));
    align-items: center;
    gap: 12px;
}
/* アイテムを間隔0で配置します（折り返して表示します） */
.item-wrap-grid-gap-0 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, auto));
    align-items: center;
    gap: 0px;
}

/*
  ------------------------------------------------
  進捗表示モーダル
  ------------------------------------------------
*/
.progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-modal {
    background: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    min-width: 300px;
    box-shadow: 0 4px 6px #19191919;
}

.progress-icon {
    margin-bottom: 15px;
}

.progress-message {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}

.progress-subtext {
    margin-top: 15px;
    font-size: 12px;
    color: #666;
}

.coming-soon-btn {
  width: 17.5rem;
  min-height: 4rem;
  max-height: 4rem;
}

.option-icon {
  color: #F19210;
}

.content-title {
  border-left: solid 5px #69C7AF;
  padding-left: 0.5rem;
  margin-bottom: 2rem;
}

.guide-page-header {
  background-image: url("../img/coming_soon_header.png"),
    linear-gradient(to right, #91BFEF 0%, #B4E3D7 100%);
  height: 240px;
  color: var(--header-color);
  background-size: 550px, auto;
  background-repeat: no-repeat;
  background-position: calc(60% + 10rem) 0px, 100%;
  position: relative;
  z-index: 1;
  padding-left: 25%;
}

.guide-page-header-menu {
  height: 5rem;
  background-color: var(--header-color);
  box-shadow: 0 10px 10px #44444433;
}

.guide-page {
  background-color: #E7EFF4;
}

.guide-content {
  width: 1290px;
  margin: 0 auto;
  padding-bottom: 5rem;
}

.guide-list {
  display: flex;
  gap: 30px 30px;
  flex-wrap: wrap;
}

.guide-container {
  width: 400px;
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 0 15px #a5c1d380;
  position: relative;
  cursor: pointer;
  outline: 0 solid #69C7AF;
  transition: none;
}

.guide-container:hover {
  outline: 2px solid #69C7AF;
  box-shadow: 0 0 15px 10px #a5c1d34d;
  transition: box-shadow 0.15s ease,outline 0.1s ease;

}

@media screen and (min-width: 1300px) {
    .guide-page-header {
      padding-left: 25%;
    }

    .guide-list {
      width: 1260px;
    }

    .guide-content {
      max-width: 1290px;
    }
    }

@media screen and (max-width: 1350px) {
  .guide-page-header {
    padding-left: 15rem;
  }

  .guide-list {
    width: 830px;
  }

  .guide-content {
    max-width: 850px;
    width: 850px;
  }

}

@media screen and (max-width: 1100px) and (min-width: 891px) {
  .guide-page-header {
    padding-left: 5rem;
  }

  .guide-content {
    max-width: 850px;
    width: 850px;
  }

  .guide-list {
    width: 830px;
  }
}

@media screen and (max-width: 891px) {
  .guide-page-header {
    padding-left: 5rem;
  }

  .guide-list {
    width: 400px;
  }

  .guide-content {
    max-width: 410px;
    width: 410px;
  }
}

.yen-icon-layers {
  position: relative;
}

.yen-icon-layers>i {
  position: absolute;
  background-color: #fff;
  line-height: 1rem;
  padding: 0.2rem 0.1rem;
  border-radius: 2.5rem;
}

.study-payment-icon {
  top: 8px;
  left: 19px;
}

.scolarship-icon {
  top: 8px;
  left: 16px;
}

.affairs-cost-icon {
  top: -7px;
  left: 2px;
}

.title-color {
  color: #407EB8;
}

.position-right-top-of-option-icon {
  position: absolute;
  top: 1.5rem;
  right: 1rem;

}

/*------------------------------------------------*/
/* 公開書類を管理する */
/*------------------------------------------------*/

.student-public-report-status {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    min-width: 53px;
    max-width: 53px;
    border-radius: 5px;
    font-size: 13px;
    line-height: 1em;
    white-space: nowrap;
    padding: 0 6px;
}

.student-public-report-status[data-status="-2"] {
    background-color: white;
    border: 1px solid currentColor;
    color: #F84F66;
}
.student-public-report-status[data-status="-2"] {
    background-color: white;
    border: 1px solid currentColor;
    color: #F84F66;
}
.student-public-report-status[data-status="0"] {
    background-color: white;
    border: 1px solid currentColor;
    color: #F29423;
}
.student-public-report-status[data-status="1"] {
    background-color: white;
    border: 1px solid currentColor;
    color: #F29423;
}

.student-public-report-status[data-open-status="0"] {
    background-color: white;
    border: 1px solid currentColor;
    color: #747474;
}
.student-public-report-status[data-open-status="1"] {
    background-color: white;
    border: 1px solid currentColor;
    color: #F84F66;
}
.student-public-report-status[data-open-status="2"] {
    background-color: var(--standard-btn-bg-color);
    color: white;
}
.student-public-report-status[data-open-status="3"] {
    background-color: #EBF0F4;
    border: 1px solid #A5C1D3;
}

.student-public-report-status[data-blob-status="0"] {
    background-color: #F84F66;
    border: none;
    color: white;
}

/*
  ------------------------------------------------
  共通設定
  ※※この設定は打消しを行うため、ファイル最後に書きます。※※
  ------------------------------------------------
*/

.overflow-auto-h-100 {
  overflow: auto;
  height: 100%;
}
.overflow-auto {
  overflow: auto;
}

.margin-0 {
  margin: 0;
}

/* 左揃えしたい場合に利用 */
.margin-left-0 {
  margin-left: 0;
}

.padding-left-0 {
  padding-left: 0;
}

.padding-right-0 {
  padding-right: 0;
}

.margin-padding-left-0 {
  margin-left: 0;
  padding-left: 0;
}

.margin-padding-right-0 {
  margin-right: 0;
  padding-right: 0;
}

.margin-padding-top-0 {
  margin-top: 0;
  padding-top: 0;
}

.margin-padding-bottom-0 {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 1em分のマージン
相殺があるので、上マージンは指定しない */
.margin-1 {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.margin-left-right-0 {
  margin-left: 0;
  margin-right: 0;
}

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

.margin-left-right-quarter {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.margin-left-right-half {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.margin-top-bottom-auto {
  margin: auto 0;
}

.margin-top-bottom-half {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.margin-top-bottom-1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* 幅調整用 */
.margin-left-quarter {
  margin-left: 0.25rem;
}

.margin-left-02 {
  margin-left: 0.2rem;
}

.margin-left-03 {
  margin-left: 0.3rem;
}

.margin-left-half {
  margin-left: 0.5rem;
}

.margin-left-three-quarter {
  margin-left: 0.75rem;
}

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

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

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

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

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

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


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

.margin-right-quarter {
  margin-right: 0.25rem;
}

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

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

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

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

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

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

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

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

/* 高さ調整用 余白 */
.margin-top-02 {
  margin-top: 0.2rem;
}

.margin-top-quarter {
  margin-top: 0.25rem;
}

.margin-top-03 {
  margin-top: 0.3rem;
}

.margin-top-04 {
  margin-top: 0.4rem;
}

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

.margin-top-three-quarter {
  margin-top: 0.75rem;
}

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

.margin-top-1-half {
  margin-top: 1.5rem;
}

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

.margin-top-3 {
  margin-top: 3rem;
}

.margin-top-4 {
  margin-top: 4rem;
}

.margin-bottom-0 {
  margin-bottom: 0;
}

.margin-bottom-quarter {
  margin-bottom: 0.25rem;
}

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

.margin-bottom-three-quarters {
  margin-bottom: 0.75rem;
}

.margin-bottom-f85 {
  margin-bottom: 0.85rem;
}

.margin-bottom-07 {
  margin-bottom: 0.7rem;
}

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

.margin-bottom-1-half {
  margin-bottom: 1.5rem;
}

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

.margin-bottom-2-half {
  margin-bottom: 2.5rem;
}

.margin-bottom-3 {
  margin-bottom: 3rem;
}

.padding-bottom-0 {
  padding-bottom: 0;
}

.padding-bottom-03 {
  padding-bottom: 0.3rem;
}

.padding-bottom-half {
  padding-bottom: 0.5rem;
}

.padding-bottom-1 {
  padding-bottom: 1rem;
}

.padding-bottom-1-half {
  padding-bottom: 1.5rem;
}

.padding-bottom-2 {
  padding-bottom: 2rem;
}

.padding-bottom-2-half {
  padding-bottom: 2.5rem;
}

.padding-bottom-3 {
  padding-bottom: 3rem;
}

.padding-top-02 {
  padding-top: 0.2rem;
}

.padding-top-03 {
  padding-top: 0.3rem;
}

.padding-top-half {
  padding-top: 0.5rem;
}

.padding-top-three-quarters {
  padding-top: 0.75rem;
}

.padding-top-1 {
  padding-top: 1rem;
}

.padding-top-1-half {
  padding-top: 1.5rem;
}

.padding-top-2 {
  padding-top: 2rem;
}

.padding-top-2-half {
  padding-top: 2.5rem;
}
.padding-top-3-half {
  padding-top: 3.5rem;
}

.padding-top-bottom-03 {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.padding-top-bottom-half {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.padding-top-bottom-three-quarter {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.padding-top-bottom-1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.padding-top-bottom-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.padding-0 {
  padding: 0;
}

.padding-1 {
  padding: 1rem;
}

.margin-padding-0 {
  margin: 0;
  padding: 0;
}

.width-max {
  width: 100%;
}

.width-95 {
  width: 95%;
}

.width-90 {
  width: 90%;
}

.width-70 {
  width: 70%;
}

.width-60 {
  width: 60%;
}

.width-50 {
  width: 50%;
}

.width-45 {
  width: 45%;
}

.width-40 {
  width: 40%;
}

.width-30 {
  width: 30%;
}

.width-20 {
  width: 20%;
}

.width-19 {
  width: 19%;
}

.height-max {
  height: 100%;
}

/* 数値入力欄のスピンボタンを無効 */
.hide-spin::-webkit-inner-spin-button,
.hide-spin::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}

/* 透明度調整用 〇〇の数値はパーセントになります */
.opacity-90 {
  opacity: 0.9;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-40 {
  opacity: 0.4;
}


/* フォントサイズ調整用 f-〇〇の数値はサイズのパーセントになります */
.f-400 {
  font-size: 4rem;
}

.f-300 {
  font-size: 3rem;
}

.f-250 {
  font-size: 2.5rem;
}

.f-230 {
  font-size: 2.3rem;
}

.f-200 {
  font-size: 2rem;
}

.f-180 {
  font-size: 1.8rem;
}

.f-150 {
  font-size: 1.5rem;
}

.f-140 {
  font-size: 1.4rem;
}

.f-130 {
  font-size: 1.3rem;
}

.f-120 {
  font-size: 1.2rem;
}

.f-110 {
  font-size: 1.1rem;
}

.f-100 {
  font-size: 1rem;
}

.f-95 {
  font-size: 0.95rem;
}

.f-90 {
  font-size: 0.9rem;
}

.f-85 {
  font-size: 0.85rem;
}

.f-80 {
  font-size: 0.8rem;
}

.f-70 {
  font-size: 0.7rem;
}

.f-60 {
  font-size: 0.6rem;
}


/* collarのみの指定 */
/* 削除と編集アイコンの色 */
.color-edit-and-delete-icon {
  color: #6996B4;
}

/* ブロック要素を中央寄せ */
.block-center {
  margin-left: auto;
  margin-right: auto;
}

/* ブロック要素を垂直中央寄せ */
.block-vertical-center {
  margin-top: auto;
  margin-bottom: auto;
}

/* 上段余白自動 */
.margin-top-auto {
  margin-top: auto;
}
/* ブロック要素を右寄せ */
.block-right {
  margin-left: auto;
}

/* ブロック要素を右上 */
.block-right-top {
  margin-left: auto;
  margin-bottom: auto;
}

/* ポジション指定　相対位置 */
.position-relative {
  position: relative;
}

/* ポジション指定　右上 */
.position-right-top {
  position: absolute;
  top: 0;
  right: 0;
}

/* ポジション指定　右上余白付き */
.position-right-top-half-margin {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/* 1パネル目の右上（ポジション指定　右上余白付き） */
.position-right-top-of-first-panel {
  position: absolute;
  top: 1rem;
  right: 2rem;
}

.position-initial {
  position: initial;
}

/* インライン要素を中央寄せ */
.in-line-center {
  text-align: center;
}

/* インライン要素を左寄せ */
.in-line-left {
  text-align: left;
}

/* インライン要素を右寄せ */
.in-line-right {
  text-align: right;
}

/* インライン要素を垂直中央寄せ */
.in-line-vertical-center {
  vertical-align: middle;
}

.in-line-vertical-top {
  vertical-align: top;
}

.in-line-vertical-bottom {
  vertical-align: bottom;
}

/* カーソルポインタ */
.cursor-pointer {
  cursor: pointer;
}

/* カーソルデフォルト */
.cursor-default {
  cursor: default;
}

/* 左側に1文字分（1em）の余白を取ります */
.padding-left-1 {
  padding-left: 1rem;
}

/* 左側に2文字分（2em）の余白を取ります */
.padding-left-2 {
  padding-left: 2rem;
}

.padding-left-4 {
  padding-left: 4rem;
}

.padding-left-6 {
  padding-left: 6rem;
}

.padding-left-8 {
  padding-left: 8rem;
}

/* 左側に0.5文字分（0.5em）の余白を取ります */
.padding-left-half {
  padding-left: 0.5rem;
}

.padding-left-03 {
  padding-left: 0.3rem;
}

.padding-right-2-quarter {
  padding-right: 2.25rem;
}

/* 右側に1文字分（2em）の余白を取ります */
.padding-right-2 {
  padding-right: 2rem;
}

/* 右側に1文字分（1em）の余白を取ります */
.padding-right-1 {
  padding-right: 1rem;
}

/* 右側に0.5文字分（0.5em）の余白を取ります */
.padding-right-half {
  padding-right: 0.5rem;
}

/* 右寄せにします */
.padding-right-0 {
  padding-right: 0;
}

/* 上寄せにします */
.padding-top-0 {
  padding-top: 0;
}

/* 下寄せにします */
.padding-bottom-0 {
  padding-bottom: 0;
}

/* 左右の余白をなくします。 */
.padding-right-left-0 {
  padding-right: 0;
  padding-left: 0;
}

.padding-right-left-half {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.padding-right-left-1 {
  padding-right: 1rem;
  padding-left: 1rem;
}

/* 上下の余白をなくします。 */
.padding-top-bottom-0 {
  padding-top: 0;
  padding-bottom: 0;
}

/* ボーダーを無効にする */
.border-0 {
  border: 0;
  border-image: none;
}

.border-0:focus {
  outline: none;
}

.inline-block{
  display: inline-block;
}

.flex {
  display: flex;
}

/* flexで複数行 */
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/* flexで縦横中央にする */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* flexで左寄せにする */
.flex-start {
  display: flex;
  justify-content: flex-start;
}

/* flexで右寄せにする */
.flex-end {
  display: flex;
  justify-content:flex-end;
}

/* flexで横方向のみ中央にする */
.flex-center-horizontal {
  display: flex;
  justify-content: center;
}

/* flexで縦方向のみ中央にする */
.flex-center-vertical {
  display: flex;
  align-items: center;
}

/* flexで最初の要素は先頭、最後の要素は末尾に配置する */
.flex-space-between {
  display: flex;
  justify-content: space-between;
}

/* 上下方向の中央揃えにする */
.align-items-center {
  align-items: center;
}

/* 上下方向の上揃えにする */
.align-items-flex-start {
  align-items: flex-start;
}

.align-items-flex-end {
  align-items: flex-end;
}

.flex-baseline {
  display: flex;
  align-items: baseline;
}
.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-space-evenly {
  display: flex;
  justify-content:space-evenly;
}

.flex-direction-column {
  flex-direction: column;
}

/** 逆順で改行する*/
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}

.flex-align-content-start {
  flex-wrap: wrap;
  align-content: flex-start;
}

.flex-align-content-end {
  flex-wrap: wrap;
  align-content: flex-end;
}

/* メニューアイコン */
.menu-icon {
  min-width: 1rem;
  min-height: 1rem;
  max-width: 1rem;
  max-height: 1rem;
  text-align: center;
}

.border-1 {
  border: 1px solid var(--label-color);
  border-radius: 2px;
}

.border-bottom-1 {
  border-bottom: 1px solid var(--label-color);
}

.border-right-1 {
  border-right: 1px solid var(--label-color);
}

.border-bottom-2 {
  border-bottom: 2px solid var(--label-color);
}

.border-right-2 {
  border-right: 2px solid var(--label-color);
}

.table-border-bottom-1 {
  border-bottom: 1px solid var(--table-border-color);
}

.tr-no-hover:hover {
  background-color: #ffffff !important;
}

.display-none {
  display: none;
}

.border-bottom-none {
  border-bottom: none !important;
}

/* 警告ラベル */
.label-attention-color {
  color: var(--label-attention-color);
}

.border-attention-color {
  border: 1px solid var(--label-attention-color);
}

/* インフォメーションアイコン */
.information-icon-color {
  color: var(--information-icon-color);
}

/* 編集ボタンパネル 背景色 */
.edit-button-area-bg-color {
  background-color: var(--edit-button-area-bg-color);
}

.letter-spacing-02{
  letter-spacing: 0.2rem;
}

.letter-spacing-half{
  letter-spacing: 0.5rem;
}
/*
  ------------------------------------------------
  共通設定終了
  これより下には追加しないでください。
  ------------------------------------------------
*/