@charset "UTF-8";
a.text-icon {
  margin: 0;
  font-size: 1em;
  padding: 0.2em 0.25em 0.2em 0.25em;
  border: 1px solid black;
  background-color: white;
  border-radius: 0.5em;
  color: black;
  cursor: pointer;
}
a.text-icon:hover {
  background-color: black;
  color: white;
}
a.text-icon img {
  display: inline;
  width: 1em;
  height: 1em;
  vertical-align: text-bottom;
}
a.text-icon.LINE-WEIGHT {
  border-width: 2px;
}
a.text-icon.FONT-BOLD {
  font-weight: bold;
}
a.text-icon.LARGE {
  font-size: 1em;
}
a.text-icon.iconSort {
  cursor: grab; /* 通常時（つかめるよ） */
}
a.text-icon.iconSort:active {
  cursor: grabbing; /* ドラッグ中（つかんでるよ） */
}
a.text-icon.RED {
  color: red;
  border-color: red;
  background-color: white;
}
a.text-icon.RED:hover {
  color: white;
  border-color: red;
  background-color: red;
}
a.text-icon.BLUE {
  color: navy;
  border-color: navy;
  background-color: white;
}
a.text-icon.BLUE:hover {
  color: white;
  border-color: navy;
  background-color: navy;
}
a.text-icon.YELLOW {
  color: saddlebrown;
  border-color: saddlebrown;
  background-color: white;
}
a.text-icon.YELLOW:hover {
  color: white;
  border-color: saddlebrown;
  background-color: saddlebrown;
}
a.text-icon.GREEN {
  color: darkgreen;
  border-color: darkgreen;
  background-color: white;
}
a.text-icon.GREEN:hover {
  color: white;
  border-color: darkgreen;
  background-color: darkgreen;
}
a.text-icon.VIOLET {
  color: indigo;
  border-color: indigo;
  background-color: white;
}
a.text-icon.VIOLET:hover {
  color: white;
  border-color: indigo;
  background-color: indigo;
}
a.text-label {
  display: inline-flex; /* アイコンとテキストを横並び */
  align-items: center; /* 縦位置を中央揃え */
  gap: 0.25em; /* アイコンと文字の間隔 */
  padding: 0.125em 0.5em;
  border: 1px solid black; /* 枠線 */
  background-color: lightgray; /* 背景色 */
  text-decoration: none;
  cursor: pointer;
}
a.text-label:hover {
  background-color: silver;
}
a.text-label.RED {
  color: red;
  border-color: red;
  background-color: white;
}
a.text-label.RED:hover {
  color: white;
  border-color: red;
  background-color: red;
}
a.text-label.BLUE {
  color: navy;
  border-color: navy;
  background-color: white;
}
a.text-label.BLUE:hover {
  color: white;
  border-color: navy;
  background-color: navy;
}
a.text-label.YELLOW {
  color: saddlebrown;
  border-color: saddlebrown;
  background-color: white;
}
a.text-label.YELLOW:hover {
  color: white;
  border-color: saddlebrown;
  background-color: saddlebrown;
}
a.text-label.GREEN {
  color: darkgreen;
  border-color: darkgreen;
  background-color: white;
}
a.text-label.GREEN:hover {
  color: white;
  border-color: darkgreen;
  background-color: darkgreen;
}
a.text-label.VIOLET {
  color: indigo;
  border-color: indigo;
  background-color: white;
}
a.text-label.VIOLET:hover {
  color: white;
  border-color: indigo;
  background-color: indigo;
}
a.text-label img {
  display: inline;
  width: 1em;
  height: 1em;
  vertical-align: text-bottom;
}
a.text-label.ROUND {
  border-radius: 0.5em;
}

button {
  margin: 0.25em 1em;
  padding: 0 0.5em;
  border-radius: 0.5em;
  color: black;
  border-color: black;
  background-color: white;
  cursor: pointer;
}
button:hover {
  color: white;
  border-color: silver;
  background-color: black;
}
button:disabled {
  opacity: 0.3; /* 半透明にする */
  cursor: not-allowed; /* カーソルを禁止マークにする */
}
button.SMALL {
  font-size: 0.8em;
}
button.BLUE, button.PRIMARY {
  color: white;
  border: 2px solid navy;
  background-color: royalblue;
}
button.BLUE:hover, button.PRIMARY:hover {
  color: white;
  border-color: mediumblue;
  background-color: dodgerblue;
}
button.BLACK, button.SECONDARY {
  color: black;
  border: 2px solid gray;
  background-color: lightgray;
}
button.BLACK:hover, button.SECONDARY:hover {
  color: black;
  border-color: darkgray;
  background-color: silver;
}
button.GREEN, button.SUCCESS {
  color: white;
  border: 2px solid seagreen;
  background-color: mediumseagreen;
}
button.GREEN:hover, button.SUCCESS:hover {
  color: white;
  border-color: forestgreen;
  background-color: mediumspringgreen;
}
button.YELLOW, button.WARNING {
  color: black;
  border: 2px solid goldenrod;
  background-color: gold;
}
button.YELLOW:hover, button.WARNING:hover {
  color: black;
  border-color: darkgoldenrod;
  background-color: khaki;
}
button.RED, button.DANGER {
  color: white;
  border: 2px solid darkred;
  background-color: crimson;
}
button.RED:hover, button.DANGER:hover {
  color: white;
  border-color: firebrick;
  background-color: tomato;
}
button.LIGTHBLUE, button.INFO {
  color: white;
  border: 2px solid steelblue;
  background-color: deepskyblue;
}
button.LIGTHBLUE:hover, button.INFO:hover {
  color: white;
  border-color: dodgerblue;
  background-color: skyblue;
}

div.caution img {
  width: 1.5em;
  height: 1.5em;
  display: inline;
  margin-right: 0.5em;
}
div.caution h1 {
  font-size: 1.5em;
}
div.caution h2 {
  font-size: 1.125em;
  margin: 1em 0 0 1em;
}
div.caution p.help-line {
  display: flex;
  align-items: flex-start; /* 上端揃え */
  margin: 0.5em 2em;
  line-height: 2em;
}
div.caution p.help-line a.text-icon {
  display: inline-block;
  text-align: center;
  margin: 0 1em 1em 0;
}
div.caution p.help-line span {
  flex: 1; /* 残り幅で折り返す */
  text-align: left;
}
div.caution p.help-line b {
  display: inline-block;
  width: 2em; /* ←ここでアイコン欄の幅を統一 */
  margin-right: 1em;
}

dialog {
  position: relative;
  padding: 1.5em 2em 1em 1em;
  border: 4px groove black;
  border-radius: 14px;
  overflow-x: hidden;
  /* 右上の × ボタン */
}
dialog p {
  font-size: 1.2em;
  line-height: 1.1em;
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}
dialog button.close-btn {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  font-size: 1.25em;
  line-height: 1em;
  padding: 0 0.25em;
  border: 1px solid black;
  border-radius: 1.5em;
  color: white;
  background: black;
  cursor: pointer;
}
dialog button.close-btn:hover {
  color: black;
  background: gray;
}

/*
/// UPLOAD/DOWNLOAD ダイアログ デザイン
dialog.UPLOAD, dialog.DOWNLOAD {
  border-color: steelblue;

  div {
    width: 100%;
    text-align: center;
    margin: 1em 0 0 1em;
    display: inline-block;

    img {
      width: 3em;
      height: 3em;
      display: inline-block;
    }    
  }
}

/// WARNING 注意・確認 ダイアログ デザイン

dialog.WARNING_close_page {
  border-color: goldenrod;

  div.warning-header {
    display: flex;
    align-items: flex-start;
    gap: 1em;
    margin-bottom: 1.5em;

    img {
      width: 2em;
      height: 2em;
    }

    p {
      margin: 0;
      font-size: 1em;
      color: #333;
      line-height: 1.4;
      text-align: left;
    }
  }

  div.action-buttons {
    width: 100%;
    text-align: center;
    margin: 1em 0 0 1em; 

  }
}
*/
dialog.WAIT {
  border-radius: 0;
  border: none;
  background-color: rgba(0, 0, 0, 0);
}
dialog.WAIT img {
  width: 3em;
  height: 3em;
}

table.grid th, table.grid td {
  border: 1px solid black;
  padding: 0.125em 0.5em;
}
table.grid th.UI, table.grid td.UI {
  padding: 0;
}

table.setting {
  border-collapse: separate; /* これが必須 */
  border-spacing: 2px; /* セルの間隔 */
}
table.setting th {
  padding: 0.25em 0.5em;
}
table.setting th.add {
  padding: 0.25em;
  text-align: right;
}
table.setting th.label {
  background-color: black;
  color: white;
}
table.setting th.sort {
  background-color: black;
  color: white;
  text-align: center;
}
table.setting td {
  padding: 0.25em 0.5em;
}
table.setting td.edit {
  padding: 0.25em;
  text-align: right;
}
table.setting td.label {
  margin: 1px;
  border: 1px solid black;
}
table.setting td.sort {
  text-align: center;
}

table.sixDays {
  width: 100%;
}
table.sixDays td {
  border: 2px solid gray;
  padding: 0;
}
table.sixDays td.TODAY {
  background-color: lightyellow;
}
table.sixDays td.HOLIDAY {
  background-color: lightpink;
}
table.sixDays td.SATURDAY {
  background-color: lightblue;
}

div.OneDay {
  width: 100%;
}
div.OneDay p {
  padding: 0;
  margin: 0;
}
div.OneDay table {
  width: 100%;
  background-color: white;
}
div.OneDay table td {
  border: none;
}
div.OneDay table.CalendarDay {
  background-color: transparent;
}
div.OneDay table.CalendarDay td {
  height: 2.25em;
  border-bottom: 2px solid gray;
}
div.OneDay table.CalendarDay td.DateNumber {
  width: 3em;
  text-align: center;
  vertical-align: middle;
}
div.OneDay table.CalendarDay td.DateNumber.FAST {
  width: 4em;
}
div.OneDay table.CalendarDay td.DateNumber span.DayWeek {
  padding: 0 0.25em;
  font-size: 0.6em;
}
div.OneDay table.CalendarDay td.DateLabel {
  padding: 0.125em;
  vertical-align: middle;
}
div.OneDay table.CalendarDay td.DateLabel p {
  font-size: 0.8em;
}
div.OneDay table.WorkShift td {
  border-bottom: 1px solid gray;
  padding: 0.125em 0 0.25em 0;
}
div.OneDay table.WorkShift td.WS-icon {
  min-width: 3em;
  text-align: center;
  white-space: nowrap;
}
div.OneDay table.WorkShift td.WS-term {
  font-size: 0.8em;
  white-space: nowrap;
}
div.OneDay table.WorkShift td.WS-button {
  white-space: nowrap;
}
div.OneDay table.WorkShift td.WS-button a {
  font-size: 0.8em;
  margin: 0 0.125em;
}
div.OneDay table.Plan td.Plan-icon {
  min-width: 3em;
  text-align: center;
  white-space: nowrap;
}
div.OneDay table.Plan td.Plan-term {
  font-size: 0.8em;
  white-space: nowrap;
}
div.OneDay table.Plan td.Plan-button {
  white-space: nowrap;
  padding: 0.125em;
}
div.OneDay table.Plan td.Plan-button a {
  font-size: 0.8em;
  margin: 0 0.125em;
}
div.OneDay table.Plan td.Plan-note {
  border-bottom: 1px dotted gray;
}
div.OneDay table.Plan td.Plan-note p {
  font-size: 0.8em;
  margin: 0 0.5em 0 2em;
}
div.OneDay table.Plan td.Plan-note p.Plan-label {
  text-align: left;
}
div.OneDay table.Plan td.Plan-note p.Plan-remark {
  text-align: right;
}
div.OneDay div.Add-button {
  width: 100%;
  text-align: left;
  padding: 0.25em 0 0.25em 1.5em;
}
div.OneDay div.Add-button a {
  font-size: 0.8em;
}/*# sourceMappingURL=common.css.map */