@charset "utf-8";

:root {
  --base: #ffffff;
  --action: #343a40;
  --active: #24b6f7;
  --red: #c94030;
  --gray: #c9c9c9;

  /* header */
  --header_bg: #454545;
  --header_height: 70px;

  /* sidenav*/
  --nav_bg: #212529;
  --nav2_bg: #24282b;
  --nav_active: #3059c9;
  --nav_hover: #4a7afb;

  /* tab */
  --tab_disabled: #f9f9f9;
  --tab_border: #e5e9ed;

  /* form */
  --input_border_color: #e1e6ea;
  --input_shadow: 1px 4px 8px 0px #d6e7f773;
  --required: #ff3838;

  /* toggle */
  --toggle_1_bg: #ccd7ee;
  --toggle_1_color: #3876e1;
  --toggle_2_bg: #eeccce;
  --toggle_2_color: #e13838;
  --toggle_3_bg: #5a5a5a;

  /* table */
  --thead_bg: #dfedff;
  --thead_border: #343a40;
  --tbody_th_bg: #f3f8ff;
  --tbody_striped_bg: #f8f8f8;

  /* focus */
  --focus_shadow: #40c2fa6f;

  /* panel */
  --panel_shadow: 0 0 22px 0px #8c8c8c73;
}

body {
  background-color: var(--base);
  color: var(--action);
  font-family: Hiragino Kaku Gothic Pro, Hiragino Sans, Meiryo, メイリオ,
    sans-serif;
  overflow-x: hidden;
  letter-spacing: 0.01em;
}

h1,
h2,
h3,
h4,
h5 {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 1rem;
}

main {
  flex: 1;
  background-color: var(--base);
  border-right: 1px solid var(--layout_border);
  /* max-width: 100vw; */
  max-width: calc(100% - 200px);
  width: calc(100% - 200px);
}

@media screen and (max-width: 768px) {
  main {
    max-width: 100vw;
  }
}

a {
  color: var(--action);
  transition: color 0.2s, background-color 0.2s;
  text-decoration: none;
  /* vertical-align: middle;
    display: inline-block;
    padding: .3rem; */
}

a:hover {
  color: var(--action);
  /* background-color: var(--focus_shadow); */
}

/* リンク, フォーム、ボタン フォーカス */
a:focus,
a:focus-within {
  outline: 1px solid var(--active);
}

dl,
dd {
  margin-bottom: 0;
}

ul,
li {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

input {
  border-color: var(--input_border_color);
}

input::placeholder,
.form-control::placeholder {
  color: var(--gray);
}

label {
  font-weight: bold;
  margin-bottom: 0.2rem;
}

legend {
  font-weight: bold;
  margin-bottom: 0.2rem;
  font-size: 1rem;
}

.no-wrap td,
.no-wrap th {
  white-space: nowrap;
}

/*
bootstrap
ボタン
*/
.btn {
  align-self: center;
}

/*
イベントがボタンの中のアイコンなどの子要素で発生することを防ぐ
*/
.btn > * {
  pointer-events: none;
}

/* 
bootstrap
input,select
*/
.form-control {
  box-shadow: var(--input_shadow);
}

.form-control:focus,
.form-select:focus,
.form-control:focus-visible,
.form-select:focus-visible,
.btn:focus {
  border-color: var(--active);
  box-shadow: 0 0 0 0.25rem var(--focus_shadow);
}

/* 
bootstrap
チェックボックス
*/
.form-check-input[type='checkbox'] {
  border-radius: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  max-width: 1.5rem;
  max-height: 1.5rem;
  border-color: var(--gray);
  margin-top: 0;
}

.form-check-input:focus {
  border-color: var(--active);
  box-shadow: none;
}

.form-check-input:checked {
  background-color: var(--active);
  border-color: var(--active);
}

/* 
bootstrap
ラジオボタン
*/
.form-check-input[type='radio'] {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  max-width: 1.5rem;
  max-height: 1.5rem;
  border-color: var(--gray);
  margin-top: 0;
}

.form-check-input:focus[type='radio'] {
  border-color: var(--active);
  box-shadow: none;
}

.form-check-input:checked[type='radio'] {
  background-color: var(--base);
  border-color: var(--active);
  background-image: none;
  position: relative;
}

.form-check-input:checked[type='radio']:after {
  content: '';
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background-color: var(--active);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*
bootstrap
 トグルボタングループ
 居室チェックリストなど
 */
.Input_On + label,
.Input_Off + label,
.Input_Necessary + label {
  border: 1px solid var(--input_border_color);
  font-size: 0.8rem;
  line-height: 1.2;
  width: 90px;
  max-width: 30vw;
}

.Input_On:checked + label {
  color: var(--toggle_1_color);
  background-color: var(--toggle_1_bg);
}

.Input_Off:checked + label {
  color: var(--toggle_2_color);
  background-color: var(--toggle_2_bg);
}

.Input_Necessary:checked + label {
  color: var(--base);
  background-color: var(--toggle_3_bg);
}

/* 
bootstrap
タブ切り替え
*/
/* タブ */
.nav-tabs .nav-link {
  margin-bottom: -1px;
  background: var(--tab_disabled);
  border: 2px solid var(--tab_border);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-weight: bold;
  color: var(--action);
  margin-left: 0.5rem;
}

.nav-tabs:first-of-type {
  margin-left: 0;
}

/* アクティブタブ */
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--active);
  background-color: var(--base);
  border-color: var(--active) var(--active) var(--base);
}

.nav-link:focus {
  outline: 0;
}

/* タブパネル */
.tab-content.Panel {
  padding-bottom: 2rem;
}

@media screen and (min-width: 768px) {
  .tab-pane {
    /* min-height: 700px; */
    position: relative;
  }
}

/* 
bootstrap
アコーディオン
*/
.accordion-item {
  background-color: var(--input_border_color);
  color: var(--action);
  box-shadow: var(--input_shadow);
}

/* 開いているとき  */
.accordion-button:not(.collapsed) {
  background-color: var(--base);
  color: var(--action);
  border: 1px solid var(--input_border_color);
}

/* 折りたたまれているとき  */
.accordion-button {
  color: var(--action);
  background-color: var(--base);
  border: 1px solid var(--input_border_color);
}

.accordion-button:focus {
  z-index: 3;
  border: 1px solid var(--);
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--focus_shadow);
}

/* cheveron 三角アイコン */
.accordion-button:not(.collapsed)::after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f078';
  background-image: none;
}

.accordion-button::after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f078';
  background-image: none;
}

/* 
component
パネル
 */
.Panel {
  box-shadow: var(--panel_shadow);
  padding: 1rem;
  border-radius: 5px;
}

/*
画面レイアウトベース
*/
.Layout_Base {
  display: flex;
  padding-top: 70px;
  position: relative;
}

/*
header*/
.Pt_Header {
  padding-top: var(--header_height);
}

/* 
メインコンテナ 
*/
.Main.container {
  margin-left: 0;
  margin-right: auto;
}

/* 
メインレイアウトグリッド
*/
.Main_Grid {
  display: grid;
  grid-template-columns: calc(50% - 20px) calc(50% - 20px);
  column-gap: 40px;
  height: 100%;
}

.Sub_Grid {
  display: grid;
  grid-template-columns: calc(33% - 20px) calc(33% - 20px) calc(33% - 20px);
  column-gap: 40px;
  height: 100%;
}

@media screen and (max-width: 992px) {
  .Main_Grid {
    display: block;
  }

  .Main_Grid > div:first-child {
    margin-bottom: 2rem;
  }
}

.Position_XYEnd {
  position: absolute;
  right: 0;
  bottom: 0;
}

.Position_XYEnd_Basic {
  position: absolute;
  right: 0;
  bottom: -3;
}

/*
helper
文字色
*/
.TxtAction {
  color: var(--action) !important;
}

.TxtAcive {
  color: var(--nav_active) !important;
}

.TxtDanger {
  color: var(--red) !important;
}

.TextDisabled {
  color: var(--gray) !important;
}

/*
helper
文字サイズ
*/
.Fs_S {
  font-size: 0.8rem;
}

.Fs_x15 {
  font-size: 1.5rem;
}

.Fs_x2 {
  font-size: 2rem;
}

/*
helper
テキストリンク
*/
.Link_Text {
  color: var(--active);
  text-decoration: underline;
}

.Link_Text:hover {
  color: var(--active);
  text-decoration: none;
}

/*
component
label&input
*/
.Form_Group {
  margin-bottom: 0.8rem;
}

/*
helper
input幅
*/
.Cols_7 {
  width: 7rem;
}

.Cols_10 {
  width: 10rem;
}

/* 
component
必須
 */
.Required {
  color: var(--required);
  font-size: 0.7rem;
  font-weight: bold;
}

/*
helper
レイアウト
*/
.Flex_Column_Between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
}

/*
helper 
通知アイコン
 */
.Notice_Count {
  position: relative;
}

.Notice_Count > span {
  position: absolute;
  background-color: var(--red);
  border-radius: 50%;
  /* padding: 5px; */
  width: 2em;
  min-width: 2em;
  max-width: 2em;
  height: 2em;
  min-height: 2em;
  max-height: 2em;
  right: -8px;
  top: -8px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

/*
component
ボタンはbootstrapの.btnと使用
*/
.btn.Icon_Right {
  position: relative;
  padding: 0.5rem 2rem 0.5rem 1rem;
}

.btn.Icon_Right > i {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* 
アクションボタン
 */
.Action_Btn {
  border: 2px solid var(--action);
  color: var(--base);
  background-color: var(--action);
  font-weight: bold;
  padding: 0.3rem 1rem;
  min-width: 110px;
}

.Action_Btn:hover,
.Action_Btn:focus,
.Action_Btn:focus-within {
  color: var(--base);
  background-color: var(--action);
}

.Action_Btn:focus,
.Action_Btn:focus-within {
  border-color: var(--active);
  box-shadow: 0 0 0 0.25rem var(--focus_shadow);
}

/* 
アウトラインボタン
 */
.Line_Btn {
  border: 2px solid var(--action);
  color: var(--action);
  background-color: var(--base);
  font-weight: bold;
  padding: 0.3rem 1rem;
  /* width: 120px; */
  min-width: 120px;
}

/* 
削除ボタン
 */
.Del_Btn {
  border: 2px solid var(--red);
  color: var(--base);
  background-color: var(--red);
  font-weight: bold;
  padding: 0.3rem 1rem;
  /* width: 120px; */
  min-width: 120px;
}

.Del_Btn:hover,
.Del_Btn:focus,
.Del_Btn:focus-within {
  color: var(--base);
  background-color: var(--red);
}

.Del_Btn:focus,
.Del_Btn:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 0.25rem var(--focus_shadow);
}

.Inline_Btn:hover,
.Inline_Btn:focus,
.Inline_Btn:focus-within {
  color: var(--base);
  background-color: var(--nav_hover);
}

.Inline_Btn:focus,
.Inline_Btn:focus-within {
  border-color: var(--nav_hover);
  box-shadow: 0 0 0 0.25rem var(--focus_shadow);
}

/* 削除ボタン アウトラインタイプ */
.Del_Line_Btn {
  border: 2px solid var(--red);
  color: var(--red);
  background-color: var(--base);
  font-weight: bold;
  padding: 0.3rem 1rem;
  min-width: 120px;
}

.Del_Line_Btn:hover,
.Del_Line_Btn:focus,
.Del_Line_Btn:focus-within {
  color: var(--red);
  background-color: var(--base);
}

.Del_Line_Btn:focus,
.Del_Line_Btn:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 0.25rem var(--focus_shadow);
}

/* 戻るボタン */
.Return_Btn {
  border: 2px solid var(--header_bg);
  color: var(--base);
  background-color: var(--header_bg);
  font-weight: bold;
  padding: 0.3rem 1rem;
  min-width: 120px;
}

.Return_Btn:hover,
.Return_Btn:focus,
.Return_Btn:focus-within {
  color: var(--base);
  background-color: var(--header_bg);
}

.Return_Btn:focus,
.Return_Btn:focus-within {
  border-color: var(--header_bg);
  box-shadow: 0 0 0 0.25rem var(--focus_shadow);
}

/* 
ボタン幅固定300px
*/
.Btn_W300 {
  width: 300px;
  min-width: 300px;
}

/* 
ボタン幅固定140px
*/
.Btn_W140 {
  width: 140px;
  min-width: 120px;
}

/*
 中サイズ
 tableの中のボタンなど
 */
.Btn_Medium {
  font-size: 0.9rem;
  line-height: 1.2;
  min-width: 100px;
}

/*
幅100%ボタン
*/
.Btn_W100 {
  min-width: auto;
  width: 100%;
}

/*
幅100%中サイズボタン
*/
.Btn_Medium_W100 {
  min-width: auto;
  width: 100%;
  font-size: 0.9rem;
  line-height: 1.2;
}

/*
幅autoのボタン
*/
.W_Auto {
  min-width: auto;
  width: auto;
  max-width: none;
}

/* 横棒 */
.Y_Partition {
  margin: 2rem 0;
  border: 1px solid var(--input_border_color);
}

/* 画像ページの横棒 */
.Img_Y_Partition {
  margin: 4rem 0;
  border: 1px solid var(--input_border_color);
}

/* 
ハンバーガーメニュー
*/
.Hamburger_Wrap {
}

.Hamburger_Btn {
  color: #ffffff;
  font-size: 2em;
  display: none;
}

@media screen and (max-width: 768px) {
  .Hamburger_Btn {
    display: block;
  }
}

/*  */
.Sp_MenuList {
  text-align: center;
}

.Sp_MenuList li {
  margin-top: 20px;
}

.Sp_MenuList_Title {
  width: 100%;
  padding: 5px;
  background-color: var(--nav_bg);
  color: #ffffff;
}

.Sp_MenuList_Home {
  font-size: 2em;
  text-align: center;
}

/* 
component
header
 */
header {
  background-color: var(--header_bg);
  color: var(--base);
  font-size: 1rem;
  height: 70px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  /* padding: 0 1rem; */
  z-index: 100;
}

.Header_L,
.Header_C,
.Header_R {
  height: 70px;
}

.Header_C {
}

.Header_L,
.Header_R {
  display: flex;
  justify-content: center;
  /* 水平方向の中央揃え */
  align-items: center;
  /* 垂直方向の中央揃え */
}

.Top_SiteName {
  padding-top: 15px;
  text-align: center;
}

.Top_SiteName a {
  color: var(--base);
}

.Top_Staff_Name {
  padding-top: 5px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--base);
}

headerS h1 {
  text-align: center;
  font-size: 1rem;
}

headerS h1 a {
  display: inline-block;
  color: var(--base);
  font-size: 1rem;
  vertical-align: middle;
  padding: 1rem;
  border-radius: 5px;
}

.Header_Grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

@media screen and (max-width: 768px) {
  .Header_Grid {
    grid-template-columns: 15% 1fr 15%;
  }
}

.Header_Return_Btn {
  font-weight: bold;
  cursor: pointer;
}

.Header_Return_Btn_Icn {
  font-size: 2em;
}

.Header_Return_Btn > * {
  pointer-events: none;
}

.Header_User_Nav {
  display: inlin-block;
  /* margin-left: auto; */
  margin: auto;
  height: 100%;
  position: relative;
  width: 130px;
}

/*
 ログインナビゲーションボタン
 */
.Header_User_Btn {
  /* cursor: pointer; */
  /* height: 100%; */
  /* background-color: var(--header_bg);
    color: var(--base); */
  text-align: center;
}

.Header_User_Btn:hover {
  background-color: var(--header_bg);
  color: var(--base);
}

/*
ログインナビゲーション
*/
.Header_User_Nav > ul {
  background-color: var(--header_bg);
  color: var(--base);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0.2rem 0;
  transition: opacity 0.2s;
}

.Header_User_Nav:hover > ul {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  width: 100%;
}

/* ログインナビ各種ボタン */
.Header_User_Nav > ul a,
.Header_User_Nav > ul button {
  color: var(--base);
  padding: 1rem;
  border-radius: 0;
  width: 100%;
  display: block;
  text-align: left;
}

.Header_User_Nav > ul a:hover,
.Header_User_Nav > ul button:hover {
  color: var(--base);
  padding: 1rem;
  background-color: var(--nav_hover);
}

.Staff_Logout_Btn {
  font-size: 1em;
}

/* 
component
グローバルナビ
*/
.Global_Nav {
  height: calc(100vh - 70px);
  width: 200px;
  max-width: 200px;
  min-width: 150px;
  color: var(--base);
  background-color: var(--nav_bg);
  position: sticky;
  top: 70px;
  left: 0;
  z-index: 100;
}

@media screen and (max-width: 768px) {
  .Global_Nav {
    display: none;
  }
}

.With_Nav > a {
  cursor: default;
}

.Global_Nav ul,
.Global_Nav li {
  display: block;
  font-size: 14px;
}

.Global_Nav li > a {
  color: var(--white);
  display: block;
  padding: 1em 1em 1em 1.5em;
  font-weight: bold;
}

.Global_Nav li > a.Active {
  background-color: var(--nav_active);
}

.Global_Nav li > a:hover {
  background-color: var(--nav_hover);
}

.Global_Nav_Main_Nav {
  width: 100%;
}

/* 子ナビゲーションあり */
.Global_Nav_Main_Nav > ul > li.With_Nav {
  position: relative;
}

.Global_Nav_Main_Nav > ul > li.With_Nav > a.Active::before {
  content: '';
  position: absolute;
  background-color: var(--base);
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
}

/* active */
/* 縦線 */
.Global_Nav_Main_Nav > ul > li.With_Nav > a.Active::after {
  content: '';
  position: absolute;
  background-color: var(--base);
  right: -2px;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
  height: calc(tan(50deg) * 10px / 2);
  width: 10px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* hover時 */
/* 子ナビの左に出る左向きの三角形 */
.Global_Nav_Main_Nav > ul > li.With_Nav > a:hover::after {
  content: '';
  position: absolute;
  background-color: var(--nav_bg);
  right: -2px;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
  height: calc(tan(50deg) * 10px / 2);
  width: 10px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.Global_Nav_Main_Nav > ul > li.With_Nav > a,
.Global_Navr_Main_Nav > ul > li.With_Nav > div {
  display: flex;
  align-items: center;
  justify-content: start;
}

.Global_Nav_Main_Nav > ul > li.With_Nav > div:hover,
.Global_Nav_Main_Nav > ul > li.With_Nav > div.Active {
  background-color: var(--nav_hover);
}

.Global_Nav_Main_Nav > ul > li.With_Nav > a > i {
  color: var(--white);
}

/* 子ナビ */
.Global_Nav_Main_Nav > ul > li.With_Nav ul {
  position: absolute;
  left: 100%;
  right: -100%;
  top: 0;
  background-color: var(--nav_bg);
  border-left: 1px solid var(--gray);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
}

/* hover子ナビ表示 */
.Global_Nav_Main_Nav > ul > li.With_Nav:hover ul,
.Global_Nav_Main_Nav > ul > li.With_Nav ul:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: visible;
}

.Global_Nav_Main_Nav > ul > li.With_Nav ul a {
  color: var(--white);
  transition: none;
  /* margin: .5em 0; */
}

.Global_Nav_Main_Nav > ul > li.With_Nav ul a:hover {
  color: var(--white);
  background-color: var(--nav_hover);
}

/*
conponent
ページタイトル
*/
.PageTtl {
  background-color: var(--gray);
  padding: 1rem;
}

.PageTtl > .container {
  margin-left: 0;
  margin-right: auto;
}

.PageTtl h2 {
  color: var(--nav_bg);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-weight: bold;
  font-size: 1rem;
}

/*
セクションタイトル
*/
.SecTtl {
  font-weight: bold;
  padding-left: 1.5rem;
  position: relative;
}

.SecTtl::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: var(--action);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/*
チェックシートテーブルの
overflow scroll
*/
.TaskSheet_Scroll {
  height: calc(100vh - (var(--header_height) + 32rem));
  overflow-y: scroll;
  margin-bottom: 1rem;
  border: 1px solid var(--input_border_color);
}

@media screen and (max-width: 768px) {
  .TaskSheet_Scroll {
    height: calc(100vh - (var(--header_height) + 12rem));
  }
}

.UserList_Scroll {
  /* height: calc(100vh - (var(--header_height) + 30rem)); */
  height: 300px;
  overflow-y: scroll;
  /* margin-bottom: 1rem; */
  border: 1px solid var(--input_border_color);
}

@media screen and (max-width: 768px) {
  .UserList_Scroll {
    height: calc(100vh - (var(--header_height) + 12rem));
  }
}

/* リンクのスタイル */
.User_Info_Link {
  color: blue;
  /* リンクのデフォルトの文字色を設定 */
  text-decoration: underline;
  /* リンクの下線を表示 */
  cursor: pointer;
  /* リンクをクリック可能であることを示すカーソルを設定 */
}

/* リンクにホバーした際のスタイル */
.User_Info_Link:hover {
  color: red;
  /* リンクにホバーした際の文字色を設定 */
}

/*
conponent
table
*/
.Table_Wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

.table thead {
  background-color: var(--thead_bg);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
}

.table thead:after {
  content: '';
  width: 100%;
  height: 2px;
  border-bottom: 2px solid var(--thead_border);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
}

.table th,
.table td {
  vertical-align: middle;
  font-weight: bold;
  padding: 0.5rem 1rem;
}

.Min_Table.table th,
.Min_Table.table td {
  vertical-align: middle;
  font-weight: bold;
  padding: 0.5rem 0.6rem;
}

.TaskSheet_Table_Grid tr td {
  display: flex;
  align-items: center;
}

/* 電子契約一覧 */
.ElectContract_Table_Grid tr {
  width: 100%;
  display: grid;
  /* grid-template-columns: repeat(3, 23%) 1fr; */
  grid-template-columns: repeat(3, 33%) 1fr;
}

.ElectContract_Table_Grid td {
  display: flex;
  align-items: center;
}

/*
component
相談内容
*/
.TextCard {
  margin-bottom: 1rem;
}

.TextCard_Header {
  display: flex;
  align-items: center;
  border: 1px solid var(--input_border_color);
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  padding: 0.5rem;
  box-shadow: var(--input_shadow);
}

.TextCard_Header dl {
  display: flex;
  align-items: center;
  font-weight: bold;
  margin-right: 0.3rem;
}

.TextCard_Header dt {
  margin-right: 0.5rem;
}

.TextCard_Description {
  min-height: 150px;
  border: 1px solid var(--input_border_color);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: var(--input_shadow);
  padding: 0.5rem;
  line-height: 1.8;
}

/*
 スマホページ
 */
/* header */
.Header_Sp {
  width: 100vw;
  overflow-x: hidden;
}

/* スマホの横にスライドする画面の囲み */
.Page_Wrap {
  position: relative;
  width: 100vw;
  overflow-x: clip;
}

/* ページ */
.Page {
  width: 100vw;
  background-color: var(--base);
  height: calc(100vh - var(--header_height));
  transition: 0.4s;
  position: absolute;
  top: 70px;
}

/* ２ページ目 */
.Page:nth-child(2) {
  left: 100%;
  pointer-events: none;
  visibility: hidden;
}

/*
 新規入居者保護等申請チェック 
 スマホ版テーブル
 tableではなく<dl>で記述
*/
.TaskSheet_SP {
  border: 1px solid var(--gray);
}

/* thead */
.TaskSheet_SP_Header {
  display: grid;
  grid-template-columns: 7.6rem 1fr;
  background-color: var(--thead_bg);
  border-bottom: 2px solid var(--thead_border);
}

.TaskSheet_SP_Header > div {
  font-weight: bold;
  padding: 0.5rem 1rem;
}

.TaskSheet_SP_Header > div:first-child {
  border-right: 1px solid var(--gray);
}

.TaskSheet_SP_Body {
  height: calc(100vh - (var(--header_height) + 17rem));
  overflow-y: scroll;
}

/* tbody */
.TaskSheet_SP_TaskGroup:nth-child(odd) {
  /* 縞々背景 */
  background-color: var(--tbody_striped_bg);
}

.TaskSheet_SP_Row {
  display: grid;
  grid-template-columns: 7.6rem 1fr;
  border-bottom: 1px solid var(--gray);
}

.TaskSheet_SP_Row > dt,
.TaskSheet_SP_Row > dd {
  font-weight: bold;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
}

.TaskSheet_SP_Row > dt {
  border-right: 1px solid var(--gray);
}

.TaskSheet_SP_Acco dt {
  background-color: var(--tbody_th_bg);
}

/* 居住詳細 */
.Col2_Tbl {
  border-top: 1px solid var(--gray);
  border-right: 1px solid var(--gray);
  border-left: 1px solid var(--gray);
}

.Col2_Tbl > div {
  display: grid;
  grid-template-columns: 40% 60%;
  border-bottom: 1px solid var(--gray);
}

.Col2_Tbl > div > dt,
.Col2_Tbl > div > dd {
  padding: 0.5rem;
}

.Col2_Tbl > div > dt {
  border-right: 1px solid var(--gray);
  background-color: var(--thead_bg);
}

/* 顔写真 */
.UserLiveDetImg {
  max-width: 122px;
  max-height: 178px;
  width: 100%;
  height: 100%;
  min-width: 120px;
  max-height: auto;
}

.UserLiveDetImg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}

/* 身分証画像 */
.FaceSheetImg {
  max-width: 240px;
  max-height: 178px;
  width: 100%;
  height: 100%;
  min-width: 120px;
  max-height: auto;
}

.FaceSheetImg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}

/* 契約書画像 */
.FaceSheetContract {
  max-width: 240px;
  max-height: 178px;
  width: 100%;
  height: 100%;
  min-width: 120px;
  max-height: auto;
}

.FaceSheetContract img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}

/* .Table_Wrapper {
    transform: rotateX(180deg);
} */
/* .Table_Content {
    transform: rotateX(180deg);
} */

/* フォーム追加ボタン */
.Text_Link {
  border: none;
  background: 0;
  padding: 0;
}

/* select2のスタイル */
.select2-selection__rendered {
  line-height: 36px !important;
}

.select2-container .select2-selection--single {
  height: 36px !important;
}

.select2-selection__arrow {
  height: 36px !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  padding-left: 12px !important;
}

/* カレンダー */
#Calendar_Month_Wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52.3px;
  font-weight: bold;
}

#Calendar_Month_Wrap h3 {
  font-weight: bold;
}

#Calendar_Month_Wrap a {
  display: flex;
  align-items: center;
}

#Calendar_Month_Wrap .Arrow {
  margin: 0 10px;
  /* Adjust margin as needed for spacing */
}

.Red {
  color: red;
}

.Green {
  color: #0dff6a;
}

.Gray {
  color: #c9c9c9;
}

/* 丸い円のスタイル */
.Circle {
  display: inline-block;
  width: 4rem;
  /* 直径を指定 */
  height: 4rem;
  /* 直径を指定 */
  background-color: #4a7afb;
  /* 背景色を指定 */
  color: white;
  /* 文字色を指定 */
  text-align: center;
  /* テキストを中央寄せ */
  line-height: 2rem;
  /* テキストの行の高さを直径と同じにする */
  border-radius: 50%;
  /* 円形にする */
  font-size: 1rem;
  /* フォントサイズを調整 */
}

/* アイコンのスタイル */
.Circle i {
  font-size: 2rem;
  /* アイコンのフォントサイズを調整 */
  line-height: 4rem;
  /* アイコンを中央に配置するための行の高さ */
}

.Calendar_Content {
  position: fixed;
  /* 画面上での固定位置に配置する場合 */
  top: 130px;
  /* 画面上部からの位置（必要に応じて調整） */
  left: 10;
  /* 画面左端からの位置（必要に応じて調整） */
  width: 4rem;
  /* 幅を画面幅いっぱいに設定 */
  height: 4rem;
  /* 高さを画面高さいっぱいに設定 */
  z-index: 90;
  /* 他の要素よりも前面に配置するための値 */
}

.NewLine {
  display: block;
}

/* ページネーション */
a:link {
  text-decoration: none;
}

a.page_number:visited {
  color: black;
  text-decoration: none;
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 15px;
}

.page_feed {
  width: 30px;
  margin: 0 10px;
  padding: 5px 10px;
  text-align: center;
  background: #b8b8b8;
  color: black;
}

.first_last_page {
  width: 30px;
  margin: 0 10px;
  padding: 5px 10px;
  text-align: center;
  background: #f0f0f0;
  color: black;
}

a:link {
  text-decoration: none;
}

a.page_number:visited {
  color: black;
  text-decoration: none;
}

.page_number {
  width: 50px;
  margin: 0 10px;
  padding: 5px;
  text-align: center;
  background: #b8b8b8;
  color: black;
}

.now_page_number {
  width: 50px;
  margin: 0 10px;
  padding: 5px;
  text-align: center;
  background: #f0f0f0;
  color: black;
  font-weight: bold;
}

.Number {
  text-align: center;
}

.First_Btn a {
  /* width: 30px; */
  /* margin: 0 10px;
    padding: 5px 10px; */
  text-align: center;

  color: black;
}

.First_Btn {
  background: #b8b8b8;
}

.Btn_Dell {
  color: var(--warning_color);
  border: solid 1px var(--warning_color);
}

.btn {
  font-weight: bold;
}

/* 不足金回収予定 */
.Collection_Schedule_Content {
  margin-bottom: 2rem;
  position: relative;
  /* 親要素の位置を基準にするために設定 */
  padding-bottom: 1rem;
  /* ラインと要素の間にスペースを設定（必要に応じて調整） */
}

.Collection_Schedule_Content::after {
  content: '';
  /* 擬似要素にコンテンツを設定 */
  position: absolute;
  /* 親要素を基準に絶対位置を設定 */
  bottom: 0;
  /* 親要素の下端に配置 */
  left: 0;
  /* 親要素の左端に配置 */
  width: 100%;
  /* 親要素の幅いっぱいに設定 */
  height: 1px;
  /* ラインの高さを設定（必要に応じて調整） */
  background-color: rgb(226, 226, 226);
  /* ラインの色を設定 */
  z-index: 1;
  /* 他の要素よりも前面に表示させるため */
}

#Invoice_Table thead .Fixed_Th {
  position:sticky; 
  /* left:0px;  */
  background-color:#dfedff; 
  z-index: 1;
  /* border-color:inherit;
  border-style:solid;
  border-width:0; */
}

#Invoice_Table tbody .Fixed_Td {
  position:sticky; 
  /* left:0px;  */
  background-color:#fff; 
  z-index: 1;
  /* border-color:inherit;
  border-style:solid;
  border-width:0; */
}

@media screen and (width < 768px) {
  .Btn_ScrollX_Sp {
    overflow-x: scroll;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}


.Invoice_Add_User_List{
  height: 80vh;
  overflow-y: scroll;
}

.Invoice_Add_User_All_Check{
  background-color: #F0F0F0;
}

.Invoice_Edit_User_List{
  height: 80vh;
  overflow-y: scroll;
}

.Invoice_Edit_User_All_Check{
  background-color: #F0F0F0;
}
 /* 背景の透けたグレー */
 .Gif_Area,
 .Gif_Area_View {
  position: fixed; /* スクロールしても固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* 縦方向に並べる */
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5); /* 背景を半透明のグレーに設定 */
  z-index: 9999; /* 最前面に表示 */
}

/* GIF 画像とテキスト */
.Gif_Area img,
.Gif_Area_View img {
  max-width: 100px; /* 画像の最大幅 */
  height: auto;
}

.Gif_Area p,
.Gif_Area_View p {
  margin-top: 20px; /* GIF 画像との間に余白 */
  font-size: 18px;
  color: #fff; /* テキストの色を白に */
}

.BadgeColor{
  background-color: #dfedff;
  background-color: #b1cdee;
}