/*------ フォーム関連 -------*/
input,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: var(--font-size);
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 6px;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

select {
  height: 30px;
  border-radius: 5px;
  border: 1px solid #d3d3d3;
  background: linear-gradient(360deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 100%), #fff;
}

input:focus,
select:focus,
textarea:focus {
  /*border: #393f4d 1px solid;*/
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='month'],
input[type='date'],
input[type='time'],
select {
  height: 3.8rem;
}

input[type='number'] {
  text-align: right;
}

input[type='radio'] {
  margin-right: 0.5rem;
}

.form-item-label {
  padding-left: 0.2rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: left;
  color: var(--font-color);
}

.form-item-label:empty {
  margin-bottom: 0;
}

table .form-item-label {
  margin-bottom: 0.2rem;
}

.th-width-500 {
  width: 500px;
}

.form-item-info {
  margin-top: 1rem;
}

.form-item-info:empty {
  margin-top: 0;
}

/*------ requiredクラスの前に必須マークを付与する。 -------*/
.required-text {
  color: #db4437;
  font-size: var(--font-size-small);
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0;
  text-align: left;
}

.required::before {
  content: '※';
  color: #db4437;
  font-size: var(--font-size-small);
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0;
  text-align: left;
  padding-right: 8px;
}

.form-required-badge {
  height: 15px;
  width: 30px;
  line-height: 15px;
  text-align: center;
  color: white;
  font-size: var(--font-size-small);
  font-weight: bold;
  background-color: #d67659;
  border-radius: 4px;
  display: none;
}

.form-required-badge.required {
  display: block;
}

/*------ requiredバッチを非表示 -------*/
.form-required-badge.required.hide-required-badge {
  display: none;
}

.all-check {
  font-size: 15px;
  margin-top: 1rem;
  margin-bottom: 0.1rem;
}

.all-check input {
  margin-right: 0.5rem;
}

.align-checkbox label,
.align-radio label {
  font-size: 15px;
  margin-top: 0.1rem;
  margin-bottom: 0;
  padding-right: 1.5rem;
}

.align-checkbox label input,
.align-radio label {
  margin-right: 0.5rem;
}

.area-checkbox-label {
  font-weight: bold;
  padding-right: 0.5rem;
}

.label-box {
  padding-left: 1rem;
}

/*------ ボタン関連 -------*/
button {
  margin-bottom: 0;
}

.form-group-title {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

/*------ ボタン関連 -------*/
.add-button {
  height: 3.8rem;
  font-size: var(--font-size-small);
  line-height: 3.8rem;
  background-color: var(--main-color);
  border-radius: 0.4rem;
}

.cancel-button {
  height: 4.4rem;
  padding: 0 3.8rem;
  font-size: var(--font-size-small);
  line-height: 4.4rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0;
  color: #fff;
  border: none;
  background-color: #d1d1d1;
  border-radius: 2.2rem;
  transition: background-color 0.15s ease-in-out;
}

.cancel-button:hover {
  color: #fff;
  background-color: var(--sync-gray);
}

.save-button {
  height: 4.4rem;
  padding: 0 3.8rem;
  font-size: var(--font-size-small);
  line-height: 4.4rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0;
  color: #fff;
  background-color: var(--sync-blue);
  border: none;
  border-radius: 2.2rem;
  transition: background-color 0.15s ease-in-out;
}

.save-button:hover {
  background-color: var(--sync-dark-blue);
}

.download-button {
  height: 38px;
  background-color: var(--sync-blue);
  border: none;
  border-radius: 80px;
  color: #fff;
  text-align: center;
  padding: 0 38px;
  font-size: var(--font-size-small);
  font-weight: 600;
  line-height: 38px;
  letter-spacing: 0;
}

.long {
  width: 48%;
}

.round-button {
  display: inline-block;
  height: 2.5rem;
  margin-bottom: 0;
  padding: 0 1.3rem 0 0.8rem;
  font-size: var(--font-size-small);
  line-height: 2.3rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--sync-blue);
  background-color: #fff;
  border: 1px solid var(--sync-blue);
  border-radius: 1.3rem;
}

.round-button:hover {
  color: #fff;
  background-color: var(--sync-blue);
}

/* 追加ボタン */
.add {
  height: 3.7rem;
  padding: 0 1.7rem 0 1.5rem;
  line-height: 3.5rem;
  border-radius: 1.9rem;
}

/* 詳細ボタン */
.view {
  padding: 0 10px 0 11px;
}

.edit {
  padding: 0 13px 0 8px;
}

/* 詳細検索ボタン */
.detailed-search {
  height: 30px;
  padding: 0 20px 0 20px;
  background: #9d9d9d;
  color: #fff;
  border: none;
  line-height: 30px;
  letter-spacing: 0;
  text-align: center;
  right: 0;
  font-size: var(--font-size-small);
  border-radius: 19px;
}

/* 削除ボタン */
.delete {
  height: 37px;
  padding: 0 20px 0 20px;
  background: #9d9d9d;
  color: #fff;
  border: none;
  line-height: 37px;
  letter-spacing: 0;
  text-align: center;
  right: 0;
  font-size: var(--font-size-small);
  border-radius: 19px;
}

/* 行削除ボタン */
.row-delete-button {
  width: fit-content;
  height: 25px;
  background-color: #9d9d9d;
  border: none;
  color: #fff;
  padding: 0 12px 0 8px;
  line-height: 25px;
  text-align: center;
}

.left-mr-4 {
  margin-left: 4px;
  font-size: 10px;
}

.right-mr-4 {
  margin-right: 4px;
  font-size: 10px;
}

/*------ パスワード関連 -------*/
.fa-eye,
.fa-eye-slash {
  cursor: pointer;
}

/*------ 削除ボタン -------*/
.delete-item-link {
  cursor: pointer;
}

/*------ 要素下余白をなくす -------*/
.none-margin-bottom {
  margin-bottom: 0;
}

/*------ 業務カラーのサンプル表示 -------*/
.sample-text {
  display: inline-block;
  width: 120px;
  height: 30px;
  margin: 0;
  font-size: var(--font-size);
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0;
  text-align: center;
  border-radius: 60px;
  color: #539b64;
  background-color: #cae1dd;
}

/* # 検索欄
   ----------------------------------------------------------------- */
.search-box {
  padding: 2rem 2rem 0 2rem;
  margin: 2rem 0;
  border-radius: 0.4rem;
  border: 1px solid #caced5;
}

input[type='text'].search-input {
  z-index: 1;
  width: 320px;
  height: 38px;
  background-color: #fff;
  border-radius: 0.4rem;
  border: 1px solid var(--sync-gray);
  font-weight: 300;
  /*padding: 9px;*/
}

input[type='date'].search-input,
input[type='month'].search-input {
  height: 38px;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid var(--sync-gray);
  font-weight: 300;
  padding: 10px;
}

.search-input::placeholder {
  color: #727272;
}

.search-input-normal {
  background-color: white;
  border-radius: 6px;
  border: 0.1rem solid #caced5;
}

input[type='text'].search-input-modal {
  border-radius: 5px;
}

.search-button {
  height: 38px;
  min-width: 70px;
  padding: 1rem 1.5rem;
  border-radius: 5px;
  border: 1px solid var(--sync-blue);
  background-color: #f5f6f8;
  color: var(--sync-blue);
  font-size: var(--font-size-small);
  font-weight: 600;
}

.search-button:hover {
  height: 3.8rem;
  padding: 1rem 1.5rem;
  border-radius: 6px;
  border: 0.1rem solid var(--main-color);
  color: white;
  background-color: var(--main-color);
}

.search-button-normal {
  height: 3.8rem;
  line-height: 3.8rem;
  border-radius: 6px;
  border: 0.1rem solid #caced5;
  background-color: #f8f7f7;
  color: var(--main-color);
  font-size: var(--font-size-small);
  font-weight: 600;
}

/* 詳細条件セレクトコンテナ */
.detailed-search-items-pr-1-1 {
  padding-right: 223px;
}

.detailed-search-items-pr-1-2 {
  padding-right: 383px;
}

.detailed-search-items-pr-2-1 {
  padding-right: 394px;
}

.detailed-search-items-pr-2-2 {
  padding-right: 555px;
}

.detailed-search-items-pr-3 {
  padding-right: 279px;
}

/* セレクトボックス */
.search-select {
  appearance: none;
  height: 38px;
  /*width: 100px;*/
  border-radius: 5px;
  min-width: 15rem;
}

/* セレクトボックスの矢印 */
.select-box {
  position: relative;
}

.select-box::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -1px;
  width: 4px;
  height: 4px;
  border-top: solid 1px #aeaeaf;
  border-right: solid 1px #aeaeaf;
  transform: translateY(-50%) rotate(135deg);
}

.select-box select,
.select-form-box select {
  background: linear-gradient(360deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 100%), #fff;
}

/* クリアボタン */
.clear-button {
  height: 38px;
  width: 70px;
  padding: 1rem 1.5rem;
  border-radius: 5px;
  border: 1px solid var(--sync-blue);
  background-color: #f5f6f8;
  color: var(--sync-blue);
  font-size: var(--font-size-small);
  font-weight: 600;
}

.clear-button:hover {
  height: 3.8rem;
  padding: 1rem 1.5rem;
  border-radius: 6px;
  border: 0.1rem solid var(--main-color);
  color: white;
  background-color: var(--main-color);
}

.export-button {
  height: 3.8rem;
  background-color: var(--main-color);
  color: white;
}

.form-optional-badge {
  height: 15px;
  width: 30px;
  line-height: 15px;
  text-align: center;
  color: white;
  font-size: var(--font-size-small);
  font-weight: bold;
  background-color: #ababab;
  border-radius: 4px;
  display: block;
}

.content {
  padding: 3rem;
  background: #fff;
  border: 1px solid #e3e3e3;
  box-shadow: 0 3px 7px 1px #00000005;
  border-radius: 10px;
}

.table-content {
  padding: 3rem;
  background: #fff;
  border: 1px solid #e3e3e3;
  box-shadow: 0 3px 7px 1px #00000005;
  border-radius: 10px;
}

.non-border-content {
  font-weight: 600;
  padding: 41px 39px 41px 41px;
}

.content thead {
  height: 40px;
}

td:last-child {
  padding-right: 30px;
}

.table-wrapper {
  margin-bottom: 30px;
}

.footer-wrapper {
  display: flex;
  margin-top: 2rem;
  justify-content: space-between;
}

.header-text.required {
  color: var(--font-color);
}

.header-text.required::before {
  padding-right: 0;
}

/* # チェックボックス
   ----------------------------------------------------------------- */
/* チェックボックスを丸デザインに変更するCSS-start */
/* デフォルトのチェックボックスを非表示に */
input[type='checkbox'] {
  display: none;
}

.circle-checkbox-label {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  margin-bottom: 0;
  font-size: var(--font-size);
  font-weight: normal;
}

table .circle-checkbox-label {
  white-space: nowrap;
}

.circle-checkbox-label:after,
.circle-checkbox-label:before {
  display: block;
  top: 0;
  bottom: 0;
  margin: auto 0;
  position: absolute;
  content: '';
}

/* チェックボックス外側デザイン */
.circle-checkbox-label:before {
  width: 20px;
  height: 20px;
  left: 5px;
  border: 1px solid #aeaeaf;
  border-radius: 20%;
}

/* チェックボックス内側デザイン */
.circle-checkbox-label::after {
  position: absolute;
  left: 10px;
  width: 9px;
  height: 12px;
  border-radius: 20%;
  content: '';
  opacity: 0;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  transform: rotate(45deg);
}

input[type='checkbox']:checked + .circle-checkbox-label::before {
  background: var(--sync-blue);
  border: none;
}

input[type='checkbox']:checked + .circle-checkbox-label::after {
  opacity: 1;
}

/* チェックボックスを丸デザインに変更するCSS-end */

/* # ラジオボタン
   ----------------------------------------------------------------- */
/* ラジオボタンを丸デザインに変更するCSS-start */
.circle-radio-label input[type='radio'] {
  display: none;
}

.circle-radio-label label {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  margin-bottom: 0;
  font-size: var(--font-size);
  /*font-weight: bold;*/
  line-height: 18px;
}

/* ラジオボタン外側デザイン */
.circle-radio-label label:before {
  width: 20px;
  height: 20px;
  left: 5px;
  border: 1px solid #aeaeaf;
  border-radius: 50%;
  margin-top: -1px;
}

.circle-radio-label label:after,
.circle-radio-label label:before {
  position: absolute;
  content: '';
}

/* ラジオボタン内側デザイン */
.circle-radio-label label::after {
  position: absolute;
  left: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--sync-blue);
  content: '';
  margin-top: 4px;
  opacity: 0;
}

.circle-radio-label label:has(input[type='radio']:checked)::after {
  opacity: 1;
}

/* ラジオボタンを丸デザインに変更するCSS-end */

/*.search-input-wrapper {*/
/*  width: 400px;*/
/*  margin-right: 50px;*/
/*}*/

/*.view-link {*/
/*  text-align: right;*/
/*}*/

.td-date-time {
  color: var(--sync-light-gray);
}