@charset "utf-8";

:root {
  /* body色 */
  --base: #fff;

  /* 企業カラー */
  --primary: #56930b;
  --primary_hover: #3a6802;
  --primary_thin: #e3edd7;

  /* テキストカラー */
  --normal_color: #404040;

  /* 強調テキストカラー */
  --strong_color: #101214;

  /* --action_rgb: #64b0cc10; */

  /* 背景が白いときのhover背景 等 */
  --lightgray1: #eeeeee;
  --lightgray2: #ebebeb;
  --lightgray3: #cccccc;
  --lightgray4: #c3c4ca;
  --lightgray5: #a7aaae;
  --gray: #858688;

  /* 
  ナビゲーション 
  */
  /* --nav_bg: #343951; */
  --nav_bg: #212529;
  /* --nav_color: #f9fbfd; */
  --nav_color: #f7f7f7;
  /* --nav_link_active: #545c81; */
  --nav_link_active: #404040;

  /*
  レイアウトフレーム 
  */
  --frame_bg: #f7f7f7;
  --frame_border: #dedfe0;

  /*
  セマンティックカラー
  */
  /* 通常ボタン、編集、登録、了解 */
  --action: #5791f4;
  --action_hover: #2067e2;
  --action_thin: #dae5fa;
  /* 成功、済 */
  --success: #4cc4a0;
  --success_hover: #4cc4a0;
  --success_thin: #b9e1d5;
  /* 削除、 必須項目、 警告 */
  --danger: #cc6465;
  --danger_hover: #b12325;
  --danger_thin: #f8d7da;
  /* 注意 */
  --warning: #b4a605;
  --warning_hover: #bbb504;
  --warning_thin: #f5f3ca;
  /* 非活性 */
  --disabled: #bbbbbb;
  --disabled_hover: #b2b2b2;
  --disabled_thin: #f1f1f1;

  /* focus時のbuttonやa,inputやselectなどフォーム要素のアウトライン */
  --focus_box_shadow: 0 0 0 0.25rem #00abc173;
  /* input,textareaのプレースホルダーテキストカラー */
  --placeholder: rgb(190, 190, 190);
}

html {
  font-size: 1rem;
}

body {
  background-color: var(--frame_bg);
  color: var(--normal_color);
  font-family: Hiragino Kaku Gothic Pro, Hiragino Sans, Meiryo, メイリオ, sans-serif;
  overflow-x: hidden;
  font-feature-settings: "palt";
  font-size: 1rem;
  letter-spacing: 0.05em;
}

main {
  flex: 1;
  min-width: 1200px;
  /* background-color: var(--base); */
  background-color:#eeeeee;
  border-right: 1px solid var(--frame_border);
  position: relative;
  padding-top: 32px;
  padding-bottom: 50px;
}

@media screen and (max-width: 1024px) {
  main {
    width: 100%;
    padding-top: 60px;
    min-width: inherit;
  }
}

pre {
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
}

p {
  margin-bottom: 0;
  padding-bottom: 0;
}

strong {
  font-weight: bold;
}

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

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

/* フォーム、ボタン フォーカス */

a {
  color: var(--action);
  transition: color 0.2s, background-color 0.2s;
  text-decoration: none;
  outline: none;
}

a:hover {
  color: var(--action_hover);
}

a:focus,
a:focus-within {
  outline: 1px solid var(--action_hover);
}

button {
  transition: color 0.2s, background-color 0.2s;
}

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

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

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

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

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

.container-fluid {
  max-width: 1800px;
}

.btn:focus,
.btn:focus-within {
  border-color: var(--action_hover);
  box-shadow: var(--focus_box_shadow);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--action_hover);
  box-shadow: var(--focus_box_shadow);
}

.form-control:focus-visible,
.form-select:focus-visible {
  border-color: var(--action_hover);
}

/* 
helper
display-flex

bootstrapのバージョンが古いものを読み込んでいて
bootstraのcssが効かないページの場合

*/
.D_Flex {
  display: flex;
}

.Justify_Content_Between {
  justify-content: space-between;
}

.Justify_Content_End {
  justify-content: flex-end;
}

.Align_Items_Center {
  align-items: center;
}

.Pb_5 {
  padding-bottom: 3rem;
}

.Mt_2 {
  margin-top: 0.5rem;
}

.Mt_3 {
  margin-top: 1rem;
}

.Mb_2 {
  margin-bottom: 0.5rem;
}

.Mb_3 {
  margin-bottom: 1rem;
}

.Px_3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

@media (min-width: 1400px) {
  .Px_Xxl_5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
}

/* 
helper
フレーム
*/
.Frame {
  background-color: var(--frame_bg);
  border: 2px solid var(--frame_border);
  border-radius: 2px;
}

/* 
helper
ボーダー
*/
.Boder_R {
  border-right: 1px solid var(--lightgray3);
}

/* 
component
ページタイトル
*/

.Page_Heading {
  /* min-height: 32px; */
  margin-bottom: 30px;
}

@media (min-width: 1024px) {
  .Page_Heading {
    min-height: auto;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}

.Page_Heading_Btn_Wrap {
  display: flex;
  justify-content: end;
  padding-left: 50px;
  margin-bottom: 10px;
}

@media (min-width: 1024px) {
  .Page_Heading_Btn_Wrap {
    margin-bottom: 0;
  }
}

.Page_Heading_Btn_Wrap a {
  white-space: normal;
}

/* 
helper
ページ名
*/
.PageTtl {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--primary);
  letter-spacing: 1px;
}

/* 
helper
各所タイトル
*/
.Heading {
  font-size: 1rem;
  color: var(--strong_color);
  background-color: var(--lightgray2);
  padding: 0.6em;
  border-radius: 4px;
}

.Sub_Heading {
  font-size: 1.2rem;
  color: var(--nav_bg);
}

/* 
helper
小タイトル
フォーム等のタイトル
*/
.Form_Heading {
  font-size: 0.9rem;
  color: var(--strong_color);
  border-bottom: 1px solid var(--lightgray3);
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

/* 
helper
ただのテキストリンク
*/
.Text_Link {
  color: var(--action);
  border: none;
  background: 0;
  padding: 0;
}

.Text_Link:hover {
  color: var(--action);
  text-decoration: none;
  opacity: 1;
}

/* 
helper
フォントサイズ
*/
.Fs_Micro {
  font-size: 0.7rem;
}

.Fs_SS {
  font-size: 0.8rem;
}

.Fs_Normal {
  font-size: 1rem;
}

.Fs_L {
  font-size: 1.1rem !important;
}

/* 
helper
text-wrap
*/
.Text_Nowrap {
  text-wrap: nowrap;
}

/* 
helper
文字色
*/
.Text_Normal {
  color: var(--normal_color);
}

.Text_Strong {
  color: var(--strong_color);
}

.Text_Action {
  color: var(--action);
}

.Text_Submit {
  color: var(--action);
}

.Text_Disabled {
  color: var(--disabled);
}

.Text_Danger {
  color: var(--danger);
}

/* 
component
バッチ
*/
.Batch_Normal {
  display: inline-flex;
  color: var(--normal_color);
  background-color: var(--lightgray1);
  padding: 0.1em 0.5em;
  font-size: 0.9rem;
  border-radius: 1em;
}

.Batch_Primary {
  display: inline-flex;
  color: var(--primary);
  background-color: var(--primary_thin);
  padding: 0.1em 0.5em;
  font-size: 0.9rem;
  border-radius: 1em;
}

.Batch_Action {
  display: inline-flex;
  color: var(--action);
  background-color: var(--action_thin);
  padding: 0.1em 0.5em;
  font-size: 0.9rem;
  border-radius: 1em;
}

.Batch_Danger {
  display: inline-flex;
  color: var(--danger);
  background-color: var(--danger_thin);
  padding: 0.1em 0.5em;
  font-size: 0.9rem;
  border-radius: 1em;
}

.Batch_Warning {
  display: inline-flex;
  color: var(--warning);
  background-color: var(--warning_thin);
  padding: 0.1em 0.5em;
  font-size: 0.9rem;
  border-radius: 1em;
}

/* 
helper
チェックボックス
*/
.form-check-input {
  width: 1.2rem;
  height: 1.2rem;
  border-color: var(--lightgray1);
}

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

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

/* 
radio
ラジオ
*/
.form-check-input {
  width: 1.2rem;
  height: 1.2rem;
  border-color: var(--lightgray3);
}

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

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

/* 
helper
display:grid;
*/
.D_grid_5_5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.D_grid_4_6 {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
}

.D_grid_3_7 {
  display: grid;
  grid-template-columns: 0.3fr 0.7fr;
}

.D_grid_8_2 {
  display: grid;
  grid-template-columns: 0.8fr 0.2fr;
}

.D_grid_R3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.Gap_2 {
  gap: 20px;
}

/* 
component
横スクロール
*/
.OverflowX {
  overflow-x: scroll;
}

/* 
component
プルダウン
*/
.Pulldown_Wrap {
  position: relative;
  /* width: 100px; */
}

.Pulldown_List {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 100%;
  opacity: 0;
  visibility: none;
  pointer-events: none;
  background-color: var(--base);
  border-radius: 4px;
  border: 1px solid var(--frame_border);
  width: 200px;
}

.Pulldown_List.Other {
  width: 280px;
}

.Pulldown_List li {
  display: block;
  margin: 0.5em 0;
}

.Pulldown_List a,
.Pulldown_List button {
  display: block;
  padding: 0.5em 1em;
  color: var(--normal_color);
}

.Pulldown_List a:hover,
.Pulldown_List button:hover {
  background-color: var(--lightgray1);
}

.Pulldown_List.Show {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* -------------------------- */

/* 
component
アラート
*/
.Alert {
  border-radius: 2px;
  padding: 0.5rem;
  border-radius: 4px;
  padding-left: 2rem;
}

.Alert i {
  position: absolute;
  top: 0.8rem;
  left: 0.5rem;
  font-size: 0.8rem;
}

/* その他アラート */
.Alert_Light {
  background-color: var(--frame_bg);
  border: 1px solid var(--frame_border);
}

/* 
component
ボタン
*/
.btn {
  border-radius: 4px;
  transition: color 0.4s, background-color 0.4s, opacity 0.2s;
  white-space: nowrap;
}

/* プライマリカラーボーダーボタン */
.Base_Btn {
  color: var(--action);
  font-weight: bold;
  border: solid 1px var(--action);
  background-color: var(--base);
}

.Base_Btn:hover {
  color: var(--action_hover);
  border: solid 1px var(--action_hover);
}

.Base_Btn.Small {
  font-weight: 400;
  font-size: 0.9rem;
  padding: 0.2em 0.8em;
}

/* モノトーンボーダーボタン */
.Border_Btn {
  font-weight: bold;
  /* font-size: .8rem; */
  /* padding: .2em .8em; */
  background-color: var(--base);
  border: 1px solid var(--lightgray3);
}

.Border_Btn.Thin {
  font-weight: Bold;
  font-size: 0.8rem;
  color: var(--normal_color);
  padding: 0.4em 0.8em;
  background-color: var(--base);
  border: 1px solid var(--lightgray3);
}

.Action_Btn {
  color: var(--base);
  font-weight: bold;
  background-color: var(--action);
  letter-spacing: 1px;
}

/* ボタン ホバー */
.Action_Btn:hover {
  color: var(--base);
  background-color: var(--action_hover);
}

/* プライマリカラー塗りつぶしボタン */
.Submit_Btn {
  font-weight: bold;
  color: var(--base);
  background-color: var(--action);
}

.Submit_Btn.Small {
  font-size: 0.8rem;
  padding: 0.2em 0.8em;
  font-weight: 400;
}

.Submit_Btn:hover {
  color: var(--base);
  background-color: var(--action_hover);
}

.Return_Btn {
  font-weight: bold;
  color: var(--base);
  background-color: var(--normal_color);
}

/* 戻るボタン ホバー */
.Return_Btn:hover {
  color: var(--base);
  opacity: 0.6;
}

/* 削除ボタン 塗りつぶし */
.Delete_Btn {
  font-weight: bold;
  color: var(--base);
  background-color: var(--danger);
  border: 1px solid var(--danger);
}

/* 削除ボタン ライン */
.Delete_Outline_Btn {
  font-weight: bold;
  color: var(--danger);
  background-color: var(--base);
  border: 1px solid var(--danger);
}

.Delete_Btn.Small,
.Delete_Outline_Btn.Small {
  font-weight: 400;
  font-size: 0.8rem;
  padding: 0.2em 0.8em;
}

.Delete_Btn:hover {
  color: var(--base);
  background-color: var(--danger_hover);
  border: 1px solid var(--danger_hover);
}

.Delete_Outline_Btn:hover {
  color: var(--danger_hover);
  border: 1px solid var(--danger_hover);
}

.Base_Btn.Small {
  font-weight: 400;
  font-size: 0.8rem;
  padding: 0.2em 0.8em;
}

.Border_Btn.Small {
  font-weight: 400;
  font-size: 0.8rem;
  padding: 0.2em 0.8em;
  background-color: var(--base);
  border: 1px solid var(--lightgray3);
}

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

/* 
component
トップページボタン
 */
.Index_Nav_Link {
  padding: 1rem;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 1.2rem;
  color: var(--normal_color);
  min-height: 130px;
  letter-spacing: 1px;
}

@media screen and (max-width: 768px) {
  .Index_Nav_Link {
    font-size: 1rem;
    min-height: auto;
    white-space: normal;
  }
}

/* 
component
header
 */
/* ハンバーガーメニュー */
#SP_Sidebar_Toggle_Wrap {
  display: none;
}

@media screen and (max-width: 1024px) {
  #SP_Sidebar_Toggle_Wrap {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
  }

  .Header {
    display: none;
    transition: 0.5s all;
  }

  .Header.OpenMenu {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
  }

  #SP_Sidebar_Toggle_Wrap button {
    background-color: var(--action);
    color: var(--base);
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 48px;
    height: 48px;
    padding: 10px;
  }

  #SP_Sidebar_Toggle_Wrap button span {
    font-size: 10px;
  }

  .Header.OpenMenu .Header_Logo {
    height: 119px;
    padding: 77px 10px 10px 10px;
  }
}

/* サイドメニュー */
.Header {
  height: 100vh;
  min-height: 670px;
  z-index: 100;
  bottom: 0;
  width: 200px;
  max-width: 200px;
  min-width: 200px;
  color: var(--nav_color);
  background-color: var(--nav_bg);
  border-right: 1px solid var(--frame_border);
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  overflow-y: scrolls;
}

/* ヘッダーロゴ */
.Header_Logo {
  width: 100%;
  height: 60px;
  padding: 10px;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--frame_bg);
}

.Header_Logo > a {
  font-weight: bold;
  color: var(--primary);
}

.Header_Logo > a:hover {
  color: var(--primary);
}

/* ロゴ画像 */
.Header_Logo > a > img {
  display: inlin-block;
  max-width: 100%;
  padding: 0.5em;
}

/* ヘッダーログインユーザー */
.Header_User_Nav {
  padding: 0.5em;
}

.Header_User {
  display: flex;
  align-items: center;
  font-size: 16px;
  padding: 0.5em;
  font-weight: bold;
}

/* ヘッダーログインユーザーアイコン */
.Header_User i {
  background-color: var(--nav_link_active);
  border-radius: 50%;
  padding: 8px;
}

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

.Header li > a {
  display: block;
  color: var(--nav_color);
  padding: 0.5em 0.5em 0.5em 1.2em;
  border-radius: 4px;
}

.Header li > a.Active {
  background-color: var(--nav_link_active);
}

.Header ul > li > a:hover {
  background-color: var(--nav_link_active);
}

.Header_Main_Nav {
  width: 100%;
  padding: 0 0.5rem 0.5rem 0.5rem;
}

.Header_Main_Nav > ul {
  border-top: 1px solid var(--nav_link_active);
  border-bottom: 1px solid var(--nav_link_active);
}

.Header_Main_Nav > ul > li {
  padding: 0.5em 0;
}

/* 子ナビゲーションあり */
.Header_Main_Nav > ul > li.With_Nav::after {
  content: "";
}

.Header_Main_Nav > ul > li.With_Nav {
  position: relative;
}

.Header_Main_Nav > ul > li.With_Nav > a,
.Header_Main_Nav > ul > li.With_Nav > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em 0.5em 0.5em 1.2em;
  border-radius: 4px;
}

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

/* 矢印アイコン */
.Header_Main_Nav > ul > li.With_Nav > a > i {
  color: var(--lightgray1);
}

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

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

.Header_Main_Nav > ul > li.With_Nav ul a {
  color: var(--normal_color);
  transition: none;
  margin: 0.5em 0;
}

.Header_Main_Nav > ul > li.With_Nav ul a:hover {
  color: var(--normal_color);
  background-color: var(--lightgray1);
}

.Header_Sub_Nav {
  padding: 0 0.5rem 0.5rem 0.5rem;
}

.Header_Sub_Nav > li > a {
  margin-bottom: 0.2em;
}

.Header_Sub_Nav > li > a {
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}

.Header_Support_Nav {
  width: 100%;
  padding: 0.5rem;
  /* position: absolute; */
  bottom: 0;
  left: 0;
  margin-bottom: 10px;
}

.Header_Support_Nav > ul {
  padding-top: 10px;
  border-top: 1px solid var(--nav_link_active);
}

/* リッチエディタ */
.RichEditor span {
  display: inline;
}

.RichEditor2 span {
  display: inline;
}

.ql-editor h1 {
  font-size: 20px !important;
}

.ql-editor h2 {
  font-size: 18px !important;
}

.Disable_Link {
  pointer-events: none;
  opacity: 0.5;
}

/*

page
ログイン

*/
#Login_Page_Wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 0 16px;
}

#Login_Page_Inner {
  width: 100%;
  margin: auto;
  max-width: 720px;
}

#Login_Form_Box {
  background-color: var(--base);
  padding: 48px 16px;
  border-radius: 8px;
}

/*

page
打刻ページ

*/
.Attendance_Record_Wrap {
  height: 100svh;
  min-height: 900px;
}

@media screen and (min-width: 576px) {
  .Attendance_Record_Wrap {
    display: flex;
    flex-direction: column;
    height: auto;
  }
}

.Attendance_Record_Content_Wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.Attendance_Record_Content_Inner {
  max-width: 900px;
  width: 100%;
}

.DataTime_Wrap {
  margin-bottom: 32px;
  text-align: center;
}

.Today_Date {
  font-size: 18px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.Today_Times {
  font-size: 64px;
  font-weight: bold;
  letter-spacing: 3px;
  line-height: 1;
}

/* 打刻ボタン囲み */
.AttendanceBtn_List {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  row-gap: 1rem;
  -moz-column-gap: 30px;
       column-gap: 30px;
}

@media screen and (min-width: 576px) {
  .AttendanceBtn_List {
    display: flex;
    justify-content: center;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}

.AttendanceBtn_ListItem {
  display: inline-flex;
  flex-direction: column;
  align-items: end;
  justify-content: end;
  text-align: center;
}
/* 1番目 */
.AttendanceBtn_ListItem:nth-of-type(1) {
  align-items: end;
  justify-content: start;
}
/* 2番目 */
.AttendanceBtn_ListItem:nth-of-type(2) {
  align-items: start;
  justify-content: start;
}
/* 3番目 */
.AttendanceBtn_ListItem:nth-of-type(3) {
  align-items: end;
  justify-content: start;
}
/* 4番目 */
.AttendanceBtn_ListItem:nth-of-type(4) {
  align-items: start;
  justify-content: start;
}

@media screen and (min-width: 576px) {
  .AttendanceBtn_ListItem,
  .AttendanceBtn_ListItem:nth-of-type(1),
  .AttendanceBtn_ListItem:nth-of-type(2),
  .AttendanceBtn_ListItem:nth-of-type(3),
  .AttendanceBtn_ListItem:nth-of-type(4) {
    align-items: center;
    justify-content: top;
  }
}

/* 打刻ボタン */
.clockInButton,
.clockOutButton,
.breakTimeButton,
.endBreakButton {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 108px;
  height: 108px;
  border-radius: 108px;
  border: none;
  font-size: 18px;
  font-weight: bold;
  color: var(--base);
  background: var(--lightgray3);
  letter-spacing: 6px;
}

/* 出勤 */
.clockInButton.Clock_Btn_active {
  color: var(--base);
  background: var(--action);
  border: 1px solid var(--action);
}

.clockInButton.Clock_Btn_active:hover {
  background: var(--action_hover);
  border: 1px solid var(--action_hover);
}

/* 退勤 */
.clockOutButton.Clock_Btn_active {
  background: var(--base);
  color: var(--action);
  border: 1px solid var(--action);
}

.clockOutButton.Clock_Btn_active:hover {
  color: var(--action_hover);
  border: 1px solid var(--action_hover);
}

/* 休憩入 */
.breakTimeButton.Clock_Btn_active {
  border: 1px solid var(--normal_color);
  background-color: var(--normal_color);
  color: var(--base);
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.breakTimeButton.Clock_Btn_active:hover {
  background-color: var(--strong_color);
  border: 1px solid var(--strong_color);
  color: var(--base);
}

/* 休憩終 */
.endBreakButton.Clock_Btn_active {
  border: 1px solid var(--normal_color);
  background-color: var(--base);
  color: var(--normal_color);
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.endBreakButton.Clock_Btn_active:hover {
  border: 1px solid var(--strong_color);
  color: var(--strong_color);
}

/* 
component
テーブル
 */

/*　テーブル
 --------------------- */
/* レスポンシブするさいに<table>をこのクラスをつけたdivで囲む */
.Overflow_Table_Wrap {
  width: 100%;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  overflow-x: scroll;
  overflow-y: clip;
  padding-bottom: 72px;
}

.Table {
  width: 100%;
  cursor: default;
}

Table.Cursol_Pointer tbody > tr {
  cursor: pointer;
}

/* テーブル thead */
.Table > thead {
  border-bottom: 1px solid var(--lightgray3);
  background-color: var(--base);
}

/* テーブル tbody */
.Table > tbody {
  background-color: var(--base);
}

/* テーブル thead th */
.Table > thead > tr > th {
  font-size: 0.9rem;
  font-weight: 400;
  padding: 0.7rem;
  padding-bottom: 1rem;
  white-space: nowrap;
}

/* テーブル tbody td */
.Table > tbody > tr > td {
  font-size: 0.9rem;
  font-weight: 400;
  padding: 0.7rem;
  vertical-align: top;
}

/* テーブル tbody td */
.Table > tbody > tr {
  border-bottom: 1px solid var(--lightgray3);
}

.Table > tbody > tr:hover {
  background-color: var(--lightgray1);
}

/* テーブルステータス */
.Tbl_Status_Btn {
  font-size: 0.8rem;
  padding: 0.1em;
  border: 1px solid var(--lightgray3);
  background-color: var(--base);
  position: relative;
  border-radius: 0;
  width: 4.8rem;
}

/* テーブル ステータス */
.Tbl_Status_Btn:hover {
  opacity: 1;
}

.Tbl_Status_Btn > i {
  display: none;
}

/* テーブル ステータス変更済み */
.Tbl_Status_Btn.Checked {
  padding: 0.1em 0.5em;
  background-color: var(--success);
  color: var(--base);
  border-color: var(--success);
}

/* チェックアイコン */
.Tbl_Status_Btn.Checked > i {
  display: inline-block;
  color: var(--base);
}

/* 選択肢囲み */
.Tbl_Status_Select {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  z-index: 2;
  padding-top: 2px;
  transition: opacity 0.3s;
  box-shadow: #c9caca8c 3px 3px 3px 3px;
}

.Tbl_Status_Btn:hover > .Tbl_Status_Select,
.Tbl_Status_Select:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* 選択肢ボタン */
.Tbl_Status_Choice {
  text-align: left;
  white-space: nowrap;
  font-size: 0.7rem;
  padding: 0.5em 1.5em;
  background-color: var(--base);
  border-radius: 0;
  border-bottom: 1px solid var(--lightgray1);
}

.Tbl_Status_Choice:hover {
  opacity: 1;
  background-color: var(--frame_bg);
}

.Tbl_Cell_Name {
  width: 500px;
}

textarea:focus,
textarea:focus-within,
textarea:focus-visible {
  outline: 0;
}

/* 件名文末処理 */
/* .Table .Tbl_Cell_Name a {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  display: block;
  max-width: 400px;
} */

/* 
component
タブ
 */
.Tabs_Wrap {
  border-bottom: 1px solid var(--lightgray3);
}

.Tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
}

.Tab {
  padding: 5px 10px;
  border-bottom: 2px solid transparent;
}

.Tab.Active {
  border-bottom: 2px solid var(--action);
}

.Tab:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

.Tab_Btn {
  font-size: 0.8rem;
  padding: 0.2em 0.9em;
  transition: 0s;
}

.Tab_Btn:hover {
  /* background-color: var(--lightgray1); */
}

.Tab_Panel {
  padding-top: 2rem;
}

/* 
component
通常フォーム
*/
.form_Group {
  margin-bottom: 0.5rem;
}

.form_Group label {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--strong_color);
  margin-bottom: 2px;
}

.form_Group.Radio label {
  font-size: 1rem;
  font-weight: 400;
  color: var(--strong_color);
  margin-left: 5px;
}

/* チェックボックスやラジオボタンのラベル */
.form_Group .Label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--strong_color);
  margin-bottom: 0.5rem;
}

.form_Group .Label > small {
  font-weight: 400;
}

.form_Group label .Required {
  font-size: 0.7rem;
  font-weight: bold;
  display: inline-block;
  background-color: var(--danger);
  color: var(--base);
  padding: 0 0.4em;
  border-radius: 4px;
  margin-left: 0.4em;
}

.form_Group input:not(input[type="checkbox"], input[type="radio"]),
.form_Group select {
  padding: 0.2rem 0.75rem;
}

.form_Group small {
  display: block;
  font-size: 0.7rem;
  color: var(--normal_color);
  margin-bottom: 0.3rem;
}

/* 
component
モーダル 
*/
.Modal {
  background-color: var(--base);
  border: 1px solid var(--lightgray3);
  border-radius: 6px;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 31;
  transition: opacity 0.4s;
}

.ModalA {
  width: calc(1200px - 3rem);
  max-width: calc(100% - 200px - 3rem);
  left: calc(200px + 2rem);
}

.ModalB {
  width: calc(100% - 3rem);
  max-width: calc(100% - 3rem);
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
  .ModalB {
    width: 590px;
  }
}

@media (min-width: 1024px) {
  .ModalB {
    left: calc(50% + 100px);
    width: 590px;
  }
}

.ModalB > .Modal_Body {
  height: auto;
}

.Modal.Show {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

.Modal_Header {
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--lightgray3);
}

.Modal_Ttl {
  font-size: 1.2em;
  color: var(--strong_color);
  font-weight: bold;
}

.Modal_Body {
  max-height: 70vh;
  height: auto;
  overflow: auto;
}

.Modal_Body.Scroll > .Modal_Body_Inner {
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
}

.Modal_Body_Inner > div {
  padding: 1rem;
}

.Modal_Footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 400px;
  padding: 16px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: var(--frame_bg);
  border-top: 1px solid var(--lightgray3);
}

/* モーダル背景
クリックでモーダルを閉じる */
.Modal_Bg {
  height: 100%;
  width: 100%;
  background-color: #1625337a;
  position: fixed;
  left: 0;
  top: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
}

.Modal_Bg.Show {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

/*

component
ページネーション

*/
.Pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  align-items: center;
}

/*
ページネーションボタンリンク
bootstrapの　.btn　と一緒に記述して使う
 */
.Pagination_Btn {
  color: var(--normal_color);
  /* border: 1px solid var(--lightgray3); */
  padding: 5px 8px;
  line-height: 1.2;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.3s;
  margin: 0 4px;
  background-color: var(--base);
  font-size: 0.9rem;
  min-width: 1.7rem;
}

.Pagination_Btn:hover {
  color: var(--strong_color);
  border: 1px solid var(--lightgray3);
}

.Pagination_Btn.active {
  background-color: var(--lightgray4);
  color: var(--base);
  border: 1px solid var(--lightgray4);
  font-weight: bold;
}

.Pagination_Disabled {
  color: var(--normal_color);
  /* border: 1px solid var(--lightgray3); */
  padding: 5px 8px;
  line-height: 1.2;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.3s;
  margin: 0 4px;
  background-color: var(--base);
  color: var(--disabled);
  font-size: 0.9rem;
  min-width: 1.7rem;
  cursor: default;
}

/*

デバッグ時表示パーツ 

*/

aside {
  width: 100%;
  display: none;
}

/* カテゴリー 色 */
/* p>span { */
/* width: 16px; */
/* 丸の幅 */
/* height: 16px; */
/* 丸の高さ */
/* color: #fff; */
/* 文字色 */
/* border-radius: 50%; */
/* 丸の形状（円形） */
/* display: inline-block;
    vertical-align: top;
    margin-left: 5px; */
/* 丸とテキストの間隔 */
/* } */

/* .Icelandblue>span {
    background-color: #b6d1e1;
    color: #002752;
}

.Indigo>span {
    background-color: #0a0a2d;
    color: #fff;
}

.Seagreen>span {
    background-color: #00a9a7;
    color: #fff;
}

.Carnival>span {
    background-color: #c8002b;
    color: #fff;
}


.Mimosa>span {
    background-color: #ffcd25;
    color: #38380b;
}

.Ilis>span {
    background-color: #8a80af;
    color: #fff;
}

.Rose>span {
    background-color: #FF8686;
    color: #fff;
} */


.Change_BusinessDepart_Wrap {
  background-color: #dddddd;
  padding: 20px;
}
.Calendar_Month_Wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.Calendar_Month {
  font-size: 24px;
}

.Case_Calendar_Wrap {
  overflow-x: scroll;
  padding-bottom: 10px;
}
.Case_Calendar_Wrap::-webkit-scrollbar {
  background: var(--primary);
  height: 8px;
}
.Case_Calendar_Wrap::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}
.Case_Calendar_Wrap::-webkit-scrollbar-track-piece {
  background: #ffffff;
}
.Case_Calendar {

}
.Case_Calendar_Thead {
  overflow-x: scroll;
}
.Case_Calendar_Tbody {
  overflow-y: scroll;
  height: calc(100vh - 360px);
  margin-top: -1px;
}
.Case_Calendar_Tr {
  display: flex;
}
.Case_Calendar_Tbody .Case_Calendar_Tr {
  margin-top: -1px;
}
.Case_Calendar_Th {
  border: 1px solid #999;
  border-right: none;
  width: calc(100% / 8);
  padding: 10px;
  text-align: center;
  font-size: 11px;
}
.Case_Calendar_Th:last-child {
  border-right: 1px solid #999;
}
.Case_Calendar_Td {
  border: 1px solid #999;
  border-right: none;
  width: calc(100% / 8);
  padding: 10px;
}
.Case_Calendar_Td:last-child {
  border-right: 1px solid #999;
}

.Case_MonthCalendar_Th {
  border: 1px solid #999;
  border-right: none;
  min-width: 150px;
  max-width: 150px;
  padding: 10px;
  text-align: center;
}
.Case_MonthCalendar_Td {
  border: 1px solid #999;
  border-right: none;
  min-width: 150px;
  max-width: 150px;
  padding: 10px;
}
.Case_MonthCalendar_Th:last-child {
  border-right: 1px solid #999;
}
.Case_MonthCalendar_Td:last-child {
  border-right: 1px solid #999;
}

.Case_Tag {
  /* display: flex; */
  border: 1px solid #999999;
  text-align: center;
  padding: 0 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  margin-bottom: 5px;
}

.Case_Tag_Wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #999;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.Case_Tag_Box {
  margin-right: 15px;
}
.Case_Tag_Box span:first-child {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
}
.Case_Cate {
  /* padding: 5px 0; */
  font-size: 14px;
}
.Case_Ttl {
  padding-top: 5px;
  line-height: 18px;
}
.Case_Time {
  margin-top: 5px;
  padding: 5px 0;
  border-top: 1px solid #999;
  font-size: 14px;
  line-height: 12px;
  /* display: flex;
  justify-content: center; */
}
.Case_Time span {
  display: block;
}
.Case_Detail .Case_Time{
  display: flex;
  justify-content: center;
}

.Case_Detail_Box {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  padding: 10px;
  border: 1px solid #999;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.Case_Date_Box {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  margin-bottom: 15px;
}
.Case_Date {

}
.Case_UserName {

}

.Case_Detail {
  padding: 10px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.Saturday{
  color: #5791F4;
}
.Sunday{
  color: #d84a00;
}


@media (max-width: 768px) {
  .Case_Calendar_Th {
    min-width: 150px;
    max-width: 150px;
  }
  .Case_Calendar_Td {
    min-width: 150px;
    max-width: 150px;
  }
}

.Privacy {
  background-color: var(--primary_thin);
  border-color: var(--primary);
}