/* body */

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-weight: 500;
  color: #414143;
  background-color: #f0f5ff;
}

input,
textarea {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

button {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

select {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

pre {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  white-space: pre-wrap;
  word-break: break-word;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @supports (-webkit-appearance: none) and (not (font: -apple-system-body)) {
    .required {
      font-size: 0.5vw !important;
    }
  }
}

input[type="number"] {
  -moz-appearance: textfield; /* Firefox 用 */
}

/* header */

header {
  background-color: #fff;
  height: 4.42vw;
  border-bottom: solid 0.18vw #0041bc;
  overflow: hidden;
  position: relative;

  a {
    color: #414143;
    text-decoration: none;
  }

  h2 {
    margin: 0;
    float: left;
    font-size: 0.95vw;
    line-height: 4.7vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    background-color: #0041bc;
    color: #fff;
    width: 8.3vw;
    text-align: center;

    a {
      color: #fff;
    }
  }
}

.header_top {
  margin: 0;
  font-size: 0.75vw;
  line-height: 4.7vw;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding-left: 2.1vw;
  float: left;

  img {
    width: 1.25vw;
    vertical-align: -0.23vw;
    margin-right: 0.6vw;
  }
}

.user-menu-area {
  float: right;
  padding-right: 4.1vw;
}

.username {
  float: left;
  font-size: 0.75vw;
  line-height: 4.7vw;
  letter-spacing: 0.08em;
  padding-right: 0.55vw;
}

.user-menu {
  float: left;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 4.7vw;
  }

  li {
    float: left;
  }
}

.user-menu-area li {
  &:nth-child(1) {
    padding-right: 2vw;

    img {
      width: 1.7vw;
      vertical-align: -0.2vw;
      cursor: pointer;
    }
  }

  &:nth-child(2) {
    padding-right: 2vw;

    img {
      width: 1.5vw;
      vertical-align: -0.15vw;
      cursor: pointer;
    }

    button {
      border: none;
      background-color: transparent;
      padding: 0;
    }
  }

  &:nth-child(3) img {
    width: 1.35vw;
    vertical-align: -0.25vw;
    cursor: pointer;
  }

  &.manual_li {
    padding-right: 0vw !important;

    img {
      width: 1.35vw !important;
      vertical-align: -0.25vw !important;
      cursor: pointer !important;
    }
  }
}

header .arrow {
  float: left;
  line-height: 4.7vw;
  margin: 0vw 0.9vw 0vw 0.75vw;

  img {
    width: 0.32vw;
    vertical-align: 0.1vw;
  }
}

header .next_nav {
  margin: 0;
  float: left;
  font-size: 0.75vw;
  line-height: 4.7vw;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* ログイン login-content */

.login-content {
  text-align: center;
  padding-top: 11.25vw;
  padding-bottom: 11.25vw;

  @media (max-width: 960px) {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  .form-group {
    text-align: left;
    width: 37.1%;
    margin: auto;
    padding-top: 1.45vw;

    &:nth-of-type(1) {
      padding-top: 0vw;
    }

    @media (max-width: 960px) {
      width: 95%;
      padding-top: 16px;
    }
  }

  .h4_1 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 1.3vw;
    color: #0041bc;

    @media (max-width: 960px) {
      font-size: 16px;
      padding-bottom: 12px;
    }
  }

  label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;

    @media (max-width: 960px) {
      font-size: 16px;
    }
  }

  form {
    margin-bottom: 1.93vw;

    @media (max-width: 960px) {
      margin-bottom: 48px;
    }
  }

  input {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.6vw;
    margin-top: 0.4vw;
    color: #414143;

    @media (max-width: 960px) {
      font-size: 12px;
      height: 48px;
      border-radius: 8px;
      padding: 0 16px;
      margin-top: 10px;
    }
  }

  input::placeholder {
    color: #b4b4b7;
  }

  .login-button {
    border: none;
    background-color: #f57b00;
    color: #fff;
    padding: 0;
    width: 16.7vw;
    margin: auto;
    display: block;
    line-height: 2.13vw;
    font-size: 0.83vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    border-radius: 99999px;
    cursor: pointer;
    margin-top: 3.3vw;

    @media (max-width: 960px) {
      width: 95%;
      line-height: 36px;
      font-size: 16px;
      margin-top: 32px;
    }
  }

  .message_div.error {
    margin: auto;
    margin-top: 0.9vw;

    @media (max-width: 960px) {
      width: 95%;
      margin-top: 16px;
    }

    img {
      @media (max-width: 960px) {
        width: 28px;
        margin-right: 8px;
      }
    }

    span {
      @media (max-width: 960px) {
        font-size: 16px;
      }
    }
  }

  .h4_2 {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin: 0;
    display: inline-block;
    color: #414143;
    padding-right: 0.25vw;

    @media (max-width: 960px) {
      font-size: 16px;
      padding-right: 4px;
    }
  }

  i.required {
    @media (max-width: 960px) {
      font-size: 12px !important;
      vertical-align: 0;
      margin-left: 2px;
    }
  }
}

.ldap_div {
  margin: 0;
  display: inline-block;

  a {
    color: #00a7ff;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;

    @media (max-width: 960px) {
      font-size: 16px;
    }
  }
}

/* サインアップ signup-content */

.signup-content {
  text-align: center;
  padding-top: 4.25vw;
  padding-bottom: 11.25vw;

  @media (max-width: 960px) {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  .form-group {
    text-align: left;
    width: 37.1%;
    margin: auto;
    padding-top: 1.45vw;

    &:nth-of-type(1) {
      padding-top: 0vw;
    }

    @media (max-width: 960px) {
      width: 95%;
      padding-top: 16px;

      span {
        font-size: 18px;
      }
    }
  }

  .h4_1 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 1.3vw;
    color: #0041bc;

    @media (max-width: 960px) {
      font-size: 16px;
      padding-bottom: 12px;
    }
  }

  p {
    font-size: 0.83vw;
    padding-bottom: 1.3vw;

    @media (max-width: 960px) {
      font-size: 18px;
      padding-bottom: 12px;
    }
  }

  label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;

    @media (max-width: 960px) {
      font-size: 16px;
    }
  }

  form {
    margin-bottom: 1.93vw;

    @media (max-width: 960px) {
      margin-bottom: 48px;
    }
  }

  input {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.6vw;
    margin-top: 0.4vw;
    color: #414143;

    @media (max-width: 960px) {
      font-size: 12px;
      height: 48px;
      border-radius: 8px;
      padding: 0 16px;
      margin-top: 10px;
    }
  }

  input::placeholder {
    color: #b4b4b7;
  }

  .signup-button {
    border: none;
    background-color: #f57b00;
    color: #fff;
    padding: 0;
    width: 16.7vw;
    margin: auto;
    display: block;
    line-height: 2.13vw;
    font-size: 0.83vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    border-radius: 99999px;
    cursor: pointer;
    margin-top: 3.3vw;

    @media (max-width: 960px) {
      width: 95%;
      line-height: 36px;
      font-size: 16px;
      margin-top: 32px;
    }
  }

  .message_div.error {
    margin: auto;
    margin-top: 0.9vw;

    @media (max-width: 960px) {
      width: 95%;
      margin-top: 16px;
    }

    img {
      @media (max-width: 960px) {
        width: 28px;
        margin-right: 8px;
      }
    }

    span {
      @media (max-width: 960px) {
        font-size: 16px;
      }
    }
  }

  i.required {
    @media (max-width: 960px) {
      font-size: 12px !important;
      vertical-align: 0;
      margin-left: 2px;
    }
  }
}

/* トップページ top-content */

.top-content {
  width: 61.5%;
  margin: auto;
  padding-top: 11.25vw;
  padding-bottom: 10.18vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  a {
    color: #414143;
    text-decoration: none;
  }

  div {
    width: calc(86% / 3);
    margin-right: 7%;
    float: left;
    text-align: center;

    &:nth-of-type(3n) {
      margin-right: 0%;
    }
  }

  h2 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.15vw;
    color: #0041bc;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  li {
    background-color: #fff;
    width: 100%;
    font-size: 0.75vw;
    line-height: 5.2vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: 1.2vw;
    border-radius: 0.4vw;
    box-shadow: 0.1vw 0.1vw 0.2vw rgba(0, 0, 0, 0.12);
    position: relative;

    img {
      position: absolute;
      top: 0;
      right: 0;
      width: 0.8vw;
    }

    a {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}

/* テナント一覧 tenant-content */

.tenant-content {
  width: 83.6%;
  margin: auto;
  padding-top: 4.1vw;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.15vw;
    color: #0041bc;
  }

  .tenant-under-title {
    padding-top: 1.8vw;
  }

  .search-input-all div {
    float: left;
    width: 43%;
    margin-top: 1.7vw;
    margin-bottom: 1.85vw;

    &:nth-of-type(1) {
      margin-right: 2.1%;
    }
  }

  .tenant-list {
    clear: both;
  }

  .list-header {
    float: right;
    margin-top: 3.3vw;
    margin-bottom: 1vw;
  }

  .tenant-list-table thead tr th:nth-child(1) {
    width: 35.3%;
  }
  .tenant-list-table thead tr th:nth-child(2) {
    width: 39%;
  }
  .tenant-list-table thead tr th:nth-child(3) {
    width: 25.7%;
    padding-right: 4.15%;
  }

  .tenant-list-table tbody tr td:nth-child(3) {
    padding-right: 4.15%;
  }
}

/* テナント詳細更新 tenant-detail-content */

.tenant-detail-content {
  padding-top: 4.25vw;
  width: 83.3%;
  margin: auto;
  padding-bottom: 11.1vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  .left {
    width: 44.5%;
    float: left;
  }

  .right {
    width: 44.5%;
    float: right;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.75vw;
    color: #0041bc;
  }

  .form-group {
    text-align: left;
    width: 100%;
    margin: auto;
    padding-top: 1.45vw;

    &:nth-of-type(1) {
      padding-top: 0vw;
    }
  }

  label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;
  }

  input {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
  }

  input::placeholder {
    color: #b4b4b7;
  }

  input#representativePhoneNumber {
    width: 25.2%;
  }

  div:nth-of-type(2n) {
    margin-right: 0%;
  }

  .right ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .right li {
    background-color: #fff;
    font-size: 0.75vw;
    line-height: 5.2vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: 1.2vw;
    border-radius: 0.4vw;
    box-shadow: 0.1vw 0.1vw 0.2vw rgba(0, 0, 0, 0.12);
    position: relative;

    width: calc(95% / 2);
    margin-right: 5%;
    float: left;
    text-align: center;
    box-sizing: border-box;
    color: #414143;
  }

  .right ul li:nth-of-type(2n) {
    margin-right: 0%;
  }

  .right li img {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.8vw;
  }

  .right ul li a {
    color: #414143;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
  }

  .button-all .message_div {
    float: right;
  }
}

/* サービス一覧 service-content */

.service-content {
  width: 83.6%;
  margin: auto;
  padding-top: 4.1vw;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 1.5vw;
    color: #0041bc;
  }

  .service-list-top {
    position: relative;
    padding-bottom: 1.7vw;
    height: 2.13vw;
  }

  .service-list-top:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  .regist-button {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .service-list {
    clear: both;
  }

  .list-header {
    float: right;
    margin-top: 0.4vw;
    margin-bottom: 0vw;
  }

  .service-list-table thead tr th:nth-child(1) {
    width: 50.25%;
  }

  .service-list-table thead tr th:nth-child(2) {
    width: 24%;
  }

  .service-list-table thead tr th:nth-child(3) {
    width: 25.75%;
    padding-right: 4.15%;
  }

  .service-list-table tbody tr td:nth-child(3) {
    padding-right: 4.15%;
  }
}

/* サービス詳細更新 service-detail-content */

.service-detail-content {
  padding-top: 4.25vw;
  width: 83.3%;
  margin: auto;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  .left {
    width: 44.5%;
    float: left;
    margin-bottom: 10.9vw;
  }

  .right {
    width: 44.5%;
    float: right;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.75vw;
    color: #0041bc;
  }

  .form-group {
    text-align: left;
    width: 100%;
    margin: auto;
    padding-top: 1.45vw;

    &:nth-of-type(1) {
      padding-top: 0vw;
    }
  }

  label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;
  }

  .left input {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
  }

  .left input::placeholder {
    color: #b4b4b7;
  }

  .left input#representativePhoneNumber {
    width: 25.2%;
  }

  .left input[type="date"] {
    width: 27.4%;
    padding: 0vw 1.27vw;
    cursor: pointer;
    display: flex;
  }

  .left .date_img_div {
    position: relative;
  }

  .left .date_img_div img {
    position: absolute;
    top: 1.1vw;
    left: 1.48vw;
    width: 0.9vw;
    cursor: pointer;
  }

  div:nth-of-type(2n) {
    margin-right: 0%;
  }

  .right ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .right li {
    background-color: #fff;
    font-size: 0.75vw;
    line-height: 5.2vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: 1.2vw;
    border-radius: 0.4vw;
    box-shadow: 0.1vw 0.1vw 0.2vw rgba(0, 0, 0, 0.12);
    position: relative;

    width: calc(95% / 2);
    margin-right: 5%;
    float: left;
    text-align: center;
    box-sizing: border-box;
    color: #414143;
  }

  .right ul li:nth-of-type(2n) {
    margin-right: 0%;
  }

  .right li img {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.8vw;
  }

  .right ul li a {
    color: #414143;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
  }

  .button-all .message_div {
    float: right;
  }

  .bottom {
    clear: both;
    width: 100%;
  }

  .bottom_table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: solid 0px #778ca3;
    background-color: #fff;
    text-align: left;
    table-layout: fixed;
  }
  .bottom_table tbody tr {
    border-top: solid 0.07vw #b4b4b7;
  }
  .bottom_table th {
    background: #ededed;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    line-height: 3.05vw;
    padding-left: 2.65%;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }
  .bottom_table td {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    line-height: 3.05vw;
    padding-left: 2.65%;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bottom_table thead tr th:nth-child(1) {
    width: 22.3%;
  }

  .bottom_table thead tr th:nth-child(2) {
    width: 68.45%;
  }

  .bottom_table thead tr th:nth-child(3) {
    width: 9.25%;
    padding-right: 0;
  }

  .bottom_table tbody tr td:nth-child(3) {
    padding-right: 0%;
    text-align: center;
  }

  .bottom input {
    width: 99%;
    border: none;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: auto;
    padding: 0vw;
    margin: 0vw;
    color: #414143;
    display: block;
    margin-top: 1.1vw;
  }

  .bottom input::placeholder {
    color: #b4b4b7;
  }

  .bottom input[type="date"] {
    width: 100%;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    float: left;
    height: 100%;
    text-align: left;
    padding-left: 0.18vw;
    padding-right: 0.18vw;
    margin: 0;
  }

  .bottom input[type="date"]:focus {
    outline: none;
  }

  .bottom input[type="date"].hidden-text {
    color: transparent;
  }

  .bottom .date_img_div {
    position: relative;
    width: 47%;
    border: solid 0.1vw #414143;
    height: 1.5vw;
    margin-top: 0.6vw;
    margin-bottom: 0.7vw;
  }

  .bottom input.displaynewtoken {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: initial;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin: 0.4vw 0vw;
    color: #f57b00;
  }

  .bottom .delete-button {
    border: none;
    background-color: transparent;
    cursor: pointer;
  }
  .bottom .delete-button img {
    width: 1.37vw;
    vertical-align: -0.43vw;
  }

  .bottom .add-button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    margin-top: 0.7vw;
  }

  .bottom .add-button img {
    width: 1.37vw;
    vertical-align: -0.43vw;
  }

  .bottom_table .addform_tr td {
    line-height: normal;
    vertical-align: top;
  }
}

/* サービス属性一覧 service-attr-content */

.service-attr-content {
  width: 83.6%;
  margin: auto;
  padding-top: 4.1vw;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 1.5vw;
    color: #0041bc;
  }

  .service-list-top {
    position: relative;
    padding-bottom: 1.7vw;
    height: 2.13vw;
  }

  .service-list-top:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  .regist-button {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .service-list {
    clear: both;
  }

  .list-header {
    float: right;
    margin-top: 0.4vw;
    margin-bottom: 0vw;
  }

  .list-table thead tr th:nth-child(1) {
    width: 30%;
  }

  .list-table thead tr th:nth-child(2) {
    width: 25%;
  }

  .list-table thead tr th:nth-child(3) {
    width: 15%;
    padding-right: 4.15%;
  }

  .list-table tbody tr td:nth-child(3) {
    padding-right: 4.15%;
  }
}

/* サービス属性詳細更新 service-attr-detail-content */

.service-attr-detail-content {
  padding-top: 4.25vw;
  width: 37%;
  margin: auto;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.75vw;
    color: #0041bc;
  }

  .form-group {
    text-align: left;
    width: 100%;
    margin: auto;
    padding-top: 1.45vw;

    &:nth-of-type(1) {
      padding-top: 0vw;
    }
  }

  label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;
  }

  input {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
  }

  input::placeholder {
    color: #b4b4b7;
  }

  div:nth-of-type(2n) {
    margin-right: 0%;
  }

  .form-group-checkbox {
    margin-bottom: 0.4vw;
  }

  .form-group-checkbox label {
    cursor: pointer;
  }

  .checkbox_label {
    position: relative;
    padding: 0 0 0 0;
    margin-left: 0.87vw;
    vertical-align: 0.1vw;
    cursor: pointer;
  }

  .button-all .message_div {
    float: right;
  }
}

/* サービスお知らせ一覧 service-notice-content */

.service-notice-content {
  width: 83.6%;
  margin: auto;
  padding-top: 4.1vw;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 1.5vw;
    color: #0041bc;
  }

  .service-list-top {
    position: relative;
    padding-bottom: 1.7vw;
    height: 2.13vw;
  }

  .service-list-top:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  .regist-button {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .service-list {
    clear: both;
  }

  .list-header {
    float: right;
    margin-top: 0.4vw;
    margin-bottom: 0vw;
  }

  .list-table thead tr th:nth-child(1) {
    width: 30%;
  }

  .list-table thead tr th:nth-child(2) {
    width: 20%;
  }

  .list-table thead tr th:nth-child(3) {
    width: 20%;
    padding-right: 4.15%;
  }

  .list-table tbody tr td:nth-child(3) {
    padding-right: 4.15%;
  }
}

/* サービスお知らせ詳細更新 service-notice-detail-content */

.service-notice-detail-content {
  padding-top: 4.25vw;
  width: 37%;
  margin: auto;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.75vw;
    color: #0041bc;
  }

  .form-group {
    text-align: left;
    width: 100%;
    margin: auto;
    padding-top: 1.45vw;

    &:nth-of-type(1) {
      padding-top: 0vw;
    }
  }

  label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;
  }

  input {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
  }

  textarea {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    border-radius: 0.5vw;
    padding: 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
  }

  input::placeholder {
    color: #b4b4b7;
  }

  div:nth-of-type(2n) {
    margin-right: 0%;
  }

  input[type="datetime-local"] {
    width: 33%;
    padding: 0vw 1.27vw;
    cursor: pointer;
    display: flex;
  }

  .button-all .message_div {
    float: right;
  }
}

/* サービス共通機能設定 service-component-content */

.service-component-content {
  padding-top: 4.25vw;
  width: 37%;
  margin: auto;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.75vw;
    color: #0041bc;
  }

  .form-group {
    text-align: left;
    width: 100%;
    margin: auto;
    padding-top: 1.45vw;

    &:nth-of-type(1) {
      padding-top: 0vw;
    }
  }

  label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;
  }

  input {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
  }

  input::placeholder {
    color: #b4b4b7;
  }

  div:nth-of-type(2n) {
    margin-right: 0%;
  }

  .form-group-checkbox {
    margin-bottom: 0.4vw;
  }

  .form-group-checkbox label {
    cursor: pointer;
  }

  .checkbox_label {
    position: relative;
    padding: 0 0 0 0;
    margin-left: 0.87vw;
    vertical-align: 0.1vw;
    cursor: pointer;
  }

  .button-all .message_div {
    float: right;
  }
}

/* サービスステータス status-content */

.status-content {
  width: 83.6%;
  margin: auto;
  padding-top: 4.1vw;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 1.5vw;
    color: #0041bc;
  }

  .h3_margin {
    padding-top: 4.1vw;
  }

  .list-table thead tr th:nth-child(1) {
    width: 10%;
  }

  .list-table thead tr th:nth-child(2) {
    width: 30%;
  }

  .list-table thead tr th:nth-child(3) {
    padding-right: 4.15%;
  }

  .list-table tbody tr td {
    vertical-align: top;
  }

  .list-table tbody tr td:nth-child(2) {
    line-height: 1.5vw;
    white-space: inherit;
    padding-top: 0.9vw;
    padding-bottom: 0.9vw;
  }

  .list-table tbody tr td:nth-child(3) {
    line-height: 1.5vw;
    white-space: pre-line;
    padding-top: 0.9vw;
    padding-bottom: 0.9vw;
  }
}

/* サービス契約一覧 service-contract-content */

.service-contract-content {
  width: 83.6%;
  margin: auto;
  padding-top: 4.1vw;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.15vw;
    color: #0041bc;
  }

  .search-input-all div {
    float: left;
    width: 43%;
    margin-top: 1.7vw;
    margin-bottom: 1.85vw;

    &:nth-of-type(1) {
      margin-right: 2.1%;
    }
  }

  .service-contract-list-top {
    position: relative;
    padding-bottom: 1.7vw;
    height: 2.13vw;
  }

  .service-contract-list-top:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  .service-contract-list {
    clear: both;
  }

  .list-header {
    float: right;
    margin-top: 3.3vw;
    margin-bottom: 1vw;
  }

  .service-contract-list-table thead tr th:nth-child(1) {
    width: 34.8%;
  }

  .service-contract-list-table thead tr th:nth-child(2) {
    width: 39%;
  }

  .service-contract-list-table thead tr th:nth-child(3) {
    width: 11.05%;
  }

  .service-contract-list-table thead tr th:nth-child(4) {
    width: 15.15%;
    padding-right: 4.15%;
  }

  .service-contract-list-table tbody tr td:nth-child(4) {
    padding-right: 4.15%;
  }
}

/* 個人情報詳細更新 usersetting-detail-content */

.usersetting-detail-content {
  padding-top: 4.25vw;
  width: 37%;
  margin: auto;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.75vw;
    color: #0041bc;
  }

  .form-group {
    text-align: left;
    width: 100%;
    margin: auto;
    padding-top: 1.45vw;

    &:nth-of-type(1) {
      padding-top: 0vw;
    }
  }

  label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;
  }

  input {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
  }

  input::placeholder {
    color: #b4b4b7;
  }

  .message_div {
    float: right;
  }
}

/* ユーザ認証詳細 user-cert-detail-content */

.user-cert-detail-content {
  padding-top: 4.25vw;
  width: 83.3%;
  margin: auto;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.75vw;
    color: #0041bc;
  }

  .token_table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: solid 0px #778ca3;
    background-color: #fff;
    text-align: left;
    table-layout: fixed;
  }
  .token_table tbody tr {
    border-top: solid 0.07vw #b4b4b7;
  }
  .token_table th {
    background: #ededed;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    line-height: 3.05vw;
    padding-left: 2.65%;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }
  .token_table td {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    line-height: 3.05vw;
    padding-left: 2.65%;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .token_table thead tr th:nth-child(1) {
    width: 22.3%;
  }

  .token_table thead tr th:nth-child(2) {
    width: 11.2%;
  }

  .token_table thead tr th:nth-child(3) {
    width: 46.15%;
  }

  .token_table thead tr th:nth-child(4) {
    width: 9.25%;
    padding-right: 0;
  }

  .token_table tbody tr td:nth-child(4) {
    padding-right: 0%;
    text-align: center;
  }

  input {
    width: 99%;
    border: none;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: auto;
    padding: 0vw;
    margin: 0vw;
    color: #414143;
    display: block;
    margin-top: 1.1vw;
  }

  input::placeholder {
    color: #b4b4b7;
  }

  input[type="text"] {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    letter-spacing: initial;
    height: 2.23vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin: 0.4vw 0vw;
  }

  input[type="date"] {
    width: 100%;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    float: left;
    height: 100%;
    text-align: left;
    padding-left: 0.18vw;
    padding-right: 0.18vw;
    margin: 0;
  }

  input[type="date"]:focus {
    outline: none;
  }

  input[type="date"].hidden-text {
    color: transparent;
  }

  .date_img_div {
    position: relative;
    width: 94%;
    border: solid 0.1vw #414143;
    height: 1.5vw;
    margin-top: 0.6vw;
    margin-bottom: 0.7vw;
  }

  input.displaynewtoken {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: initial;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin: 0.4vw 0vw;
    color: #f57b00;
  }

  .delete-button {
    border: none;
    background-color: transparent;
    cursor: pointer;
  }
  .delete-button img {
    width: 1.37vw;
    vertical-align: -0.43vw;
  }

  .add-button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    margin-top: 0.7vw;
  }

  .add-button img {
    width: 1.37vw;
    vertical-align: -0.43vw;
  }

  .token_table .addform_tr td {
    line-height: normal;
    vertical-align: top;
  }
}

/* テナント側管理者一覧 tenant-admin-list-content */

.tenant-admin-list-content {
  width: 83.6%;
  margin: auto;
  padding-top: 4.1vw;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.15vw;
    color: #0041bc;
  }

  .tenant-under-title {
    padding-top: 1.8vw;
  }

  .search-input-all div {
    float: left;
    width: 43%;
    margin-top: 1.7vw;
    margin-bottom: 1.85vw;
  }

  .search-input-all div:nth-of-type(1) {
    margin-right: 2.1%;
  }

  .tenant-list {
    clear: both;
  }

  .list-header {
    float: right;
    margin-top: 3.3vw;
    margin-bottom: 1vw;
  }

  .tenant-list-table thead tr th:nth-child(1) {
    width: 29.4%;
  }

  .tenant-list-table thead tr th:nth-child(2) {
    width: 32.3%;
  }

  .tenant-list-table thead tr th:nth-child(3) {
    width: 38.3%;
    padding-right: 4.15%;
  }

  .tenant-list-table tbody tr td:nth-child(3) {
    padding-right: 4.15%;
  }
}

/* テナント側管理者詳細更新 tenant-admin-detail-content */

.tenant-admin-detail-content {
  padding-top: 4.25vw;
  width: 37%;
  margin: auto;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.75vw;
    color: #0041bc;
  }

  .form-group {
    text-align: left;
    width: 100%;
    margin: auto;
    padding-top: 1.45vw;

    &:nth-of-type(1) {
      padding-top: 0vw;
    }
  }

  label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;
  }

  input {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
  }

  input::placeholder {
    color: #b4b4b7;
  }

  div:nth-of-type(2n) {
    margin-right: 0%;
  }

  .button-all .message_div {
    float: right;
  }

  .form-group_div {
    position: relative;
  }

  .form-group_div button {
    position: absolute;
    left: 1.5vw;
    top: 50%;
    transform: translateY(-50%);
    width: 4.75vw;
    height: 1.6vw;
    line-height: 1.6vw;
  }

  .form-group_div button img {
    width: 0.93vw;
    margin-left: 0.48vw;
    float: left;
    margin-top: 0.3vw;
  }

  .form-group_div input {
    padding: 0vw 1.45vw 0vw 7.35vw !important;
    color: #f57b00 !important;
  }
}

/* 契約サービス一覧 tenant-service-content */

.tenant-service-content {
  width: 83.6%;
  margin: auto;
  padding-top: 4.1vw;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 1.5vw;
    color: #0041bc;
  }

  .tenant-service-list-top {
    position: relative;
    padding-bottom: 1.7vw;
    height: 2.13vw;
  }

  .tenant-service-list-top:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  .regist-button {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .tenant-service-list {
    clear: both;
  }

  .list-header {
    float: right;
    margin-top: 0.4vw;
    margin-bottom: 0vw;
  }

  .tenant-service-list-table thead tr th:nth-child(1) {
    width: 28.78%;
  }

  .tenant-service-list-table thead tr th:nth-child(2) {
    width: 33%;
  }

  .tenant-service-list-table thead tr th:nth-child(3) {
    width: 11.05%;
  }

  .tenant-service-list-table thead tr th:nth-child(4) {
    width: 11%;
  }

  .tenant-service-list-table thead tr th:nth-child(5) {
    width: 16.17%;
    padding-right: 4.15%;
  }

  .tenant-service-list-table tbody tr td:nth-child(5) {
    padding-right: 4.15%;
  }
}

/* 契約サービス詳細更新 tenant-service-detail-content */

.tenant-service-detail-content {
  padding-top: 4.25vw;
  width: 63.9%;
  margin: auto;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  .left {
    width: 58%;
    float: left;
  }

  .right {
    width: 27.6%;
    float: right;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.75vw;
    color: #0041bc;
  }

  .h3_margin {
    padding-top: 7.1vw;
  }

  .form-group {
    text-align: left;
    width: 100%;
    margin: auto;
    padding-top: 1.45vw;
    clear: both;

    &:nth-of-type(1) {
      padding-top: 0vw;
    }
  }

  label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;
  }

  .left input {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
  }

  .left textarea {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    border-radius: 0.5vw;
    padding: 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
  }

  .left input::placeholder {
    color: #b4b4b7;
  }

  .left input#representativePhoneNumber {
    width: 25.2%;
  }

  .form-group-date {
    float: left;
    clear: none;
    width: 27.4%;
    margin-right: 5.5%;
  }

  .form-group-date2 {
    margin-right: 0%;
  }

  .left input[type="date"] {
    width: 100%;
    padding: 0vw 1.27vw;
    cursor: pointer;
    display: flex;
  }

  .left .date_img_div {
    position: relative;
  }

  .left .date_img_div img {
    position: absolute;
    top: 1.1vw;
    left: 1.48vw;
    width: 0.9vw;
    cursor: pointer;
  }

  .right ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .right li {
    background-color: #fff;
    width: 100%;
    font-size: 0.75vw;
    line-height: 5.2vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: 1.2vw;
    border-radius: 0.4vw;
    box-shadow: 0.1vw 0.1vw 0.2vw rgba(0, 0, 0, 0.12);
    position: relative;

    margin-right: 0;
    float: left;
    text-align: center;
    box-sizing: border-box;
    color: #414143;
  }

  .right ul li:nth-of-type(2n) {
    margin-right: 0%;
  }

  .right li img {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.8vw;
  }

  .right ul a {
    color: #414143;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
  }

  .right .h3_margin {
    padding-top: 4.1vw;
    clear: both;
  }

  .button-all .message_div {
    float: right;
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
  }

  select.serviceId_select {
    -webkit-appearance: none;
    appearance: none;
    text-align-last: left;
    text-align: left;
    cursor: pointer;
    outline: none;
    background-image: url("../img/select-arrow-bottom.png");
    background-repeat: no-repeat;
    background-size: 0.75vw auto;
    background-position: bottom 1vw right 1.68vw;

    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
    background-color: #fff;
  }

  .date_message_div {
    float: right;
    margin-top: 3.62vw;
    width: 13.2vw;
  }

  .date_message_div span {
    color: #e80000;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    float: right;
    width: auto;
    line-height: 1.25vw;
  }

  .date_message_div img {
    width: 1.37vw;
    margin-right: 0;
    float: left;
    margin-top: 0.4vw;
  }
}

/* サービス利用者一括登録 tenant-service-user-content */

.tenant-service-user-content {
  padding-top: 4.25vw;
  width: 83.3%;
  margin: auto;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  .left {
    width: 44.5%;
    float: left;
    margin-bottom: 10.9vw;
  }

  .right {
    width: 44.5%;
    float: right;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.75vw;
    color: #0041bc;
  }

  h4 {
    padding-bottom: 1.9vw;
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    color: #0041bc;
  }

  .form-group {
    text-align: left;
    width: 100%;
    margin: auto;
    padding-top: 1.45vw;

    &:nth-of-type(1) {
      padding-top: 0vw;
    }
  }

  label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;
  }

  .left input {
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
  }

  .left input::placeholder {
    color: #b4b4b7;
  }

  .left input#representativePhoneNumber {
    width: 25.2%;
  }

  .left input[type="date"] {
    width: 27.4%;
    padding: 0vw 1.27vw;
    cursor: pointer;
    display: flex;
  }

  .left .date_img_div {
    position: relative;
  }

  .left .date_img_div img {
    position: absolute;
    top: 1.1vw;
    left: 1.48vw;
    width: 0.9vw;
    cursor: pointer;
  }

  .button-all .message_div {
    float: right;
    margin-top: 0.25vw;
    width: 28vw;
    text-align: left;
  }
  .button-all .message_div span {
    color: #e80000;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    width: auto;
  }

  .button-all .message_div img {
    width: 1.37vw;
    margin-right: 0.5vw;
    margin-top: 0;
    vertical-align: -0.35vw;
  }

  .left input[type="date"].hidden-text {
    color: transparent;
  }

  .left .date_img_div {
    position: relative;
  }

  .left .fake-placeholder {
    position: absolute;
    top: 0%;
    left: 3.05vw;
    pointer-events: none;
    z-index: 1;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    line-height: 3.2vw;
    height: 3.15vw;
  }

  .right .search-title span {
    width: 84.8%;
  }

  .right .search-all .search-input-all-margin {
    box-sizing: border-box;
    width: 84.8%;
    margin: auto;
  }

  .right .search-input-all div {
    float: none;
    width: 100%;
    margin-top: 1.7vw;
    margin-bottom: 1.7vw;
  }

  .right .search-input-all .checkbox_div {
    float: left;
    width: 70%;
    margin-top: 0;
    margin-bottom: 1.5vw;
  }

  .right .search-input-all div:nth-of-type(1) {
    margin-right: 2.1%;
  }

  .right .search-all button {
    width: 23.2%;
    margin-top: 2.96vw;
  }

  .right .search-input-all .checkbox_label {
    padding: 0 0 0 1.95vw;
  }

  .right .search-input-all div p.label_p {
    padding-bottom: 1vw;
  }

  .bottom {
    clear: both;
    width: 100%;
  }

  .bottom_left {
    width: 44.5%;
    float: left;
  }

  .bottom_center {
    width: 11%;
    float: left;
  }

  .bottom_right {
    width: 44.5%;
    float: left;
  }

  .bottom_table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: solid 0px #778ca3;
    background-color: #fff;
    text-align: left;
    table-layout: fixed;
  }
  .bottom_table tbody tr {
    border-top: solid 0.07vw #b4b4b7;
  }
  .bottom_table th {
    background: #ededed;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    line-height: 3.05vw;
    padding-left: 3%;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }
  .bottom_table td {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    line-height: 0.95vw;
    padding-left: 3%;
    font-weight: 500;
    min-height: 3.05vw;
    word-break: break-all;
    padding-top: 1.2vw;
    padding-bottom: 1.2vw;
  }

  .bottom_table thead tr th:nth-child(1) {
    width: 7.3%;
    text-overflow: clip;
  }

  .bottom_table thead tr th:nth-child(2) {
    width: 23.4%;
  }

  .bottom_table thead tr th:nth-child(3) {
    width: 19.25%;
  }

  .bottom_table thead tr th:nth-child(4) {
    width: 23.6%;
  }

  .bottom_table thead tr th:nth-child(5) {
    padding-right: 0%;
    width: 26.45%;
  }

  .bottom_table tbody tr td:nth-child(2) {
    padding-right: 0.6%;
  }

  .bottom_table tbody tr td:nth-child(3) {
    padding-right: 0.6%;
  }

  .bottom_table tbody tr td:nth-child(4) {
    padding-right: 0.6%;
  }

  .bottom_table tbody tr td:nth-child(5) {
    padding-right: 3%;
  }

  .bottom .tenant-list {
    clear: both;
  }

  .bottom .list-header {
    float: right;
    margin-top: 0.75vw;
    margin-bottom: 1vw;
  }

  .bottom label:after {
    border: solid 0.07vw #b4b4b7;
    border-radius: 0.2vw;
    z-index: 1;
    background-color: #fff;
  }

  .bottom label {
    padding: 0 0 0 1.95vw;
    margin-top: 0;
    margin-bottom: 0;
  }

  .bottom label:after,
  .bottom label:before {
    top: -0.18vw;
  }

  .bottom_table tbody tr:has(input:checked) {
    background-color: #fffdd0;
  }

  .bottom_center .add-user-controlls {
    text-align: center;
  }

  .bottom_center .add-user-controlls button {
    border: none;
    color: #fff;
    padding: 0;
    width: 4.7vw;
    margin: auto;
    display: block;
    line-height: 1.7vw;
    height: 1.7vw;
    border-radius: 0.3vw;
    cursor: pointer;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 400;
  }

  .bottom_center #adduser-btn {
    background-color: #0041bc;
    padding-right: 0.5vw;
    margin-top: 4.35vw;
  }

  .bottom_center #remuser-btn {
    background-color: #e80000;
    padding-left: 0.5vw;
    margin-top: 2.1vw;
  }

  .bottom_center #adduser-btn img {
    width: 0.95vw;
    margin-right: 0.65vw;
    vertical-align: middle;
  }

  .bottom_center #remuser-btn img {
    width: 0.95vw;
    margin-left: 0.65vw;
    vertical-align: middle;
  }

  .bottom_center #adduser-btn span {
    vertical-align: middle;
  }

  .bottom_center #remuser-btn span {
    vertical-align: middle;
  }

  .bottom_center .add-user-controlls button:disabled {
    opacity: 0.3;
  }
}

.hidden-placeholder {
  display: none;
}

/* サービス利用者一覧 tenant-user-list-content */

.tenant-user-list-content {
  width: 83.6%;
  margin: auto;
  padding-top: 4.1vw;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.15vw;
    color: #0041bc;
  }

  .regist-buttons {
    display: flex;
  }

  .tenant-under-title {
    padding-top: 1.8vw;
  }

  .search-input-all div {
    float: left;
    width: 43%;
    margin-top: 2.05%;
    margin-bottom: 2.3%;
  }

  .search-input-all div:nth-of-type(1) {
    margin-right: 2.1%;
  }

  .tenant-list {
    clear: both;
  }

  .list-header {
    float: right;
    margin-top: 3.3vw;
    margin-bottom: 1vw;
  }

  .tenant-list-table thead tr th:nth-child(1) {
    width: 29.4%;
  }

  .tenant-list-table thead tr th:nth-child(2) {
    width: 32.3%;
  }

  .tenant-list-table thead tr th:nth-child(3) {
    width: 38.3%;
    padding-right: 4.15%;
  }

  .tenant-list-table tbody tr td:nth-child(3) {
    padding-right: 4.15%;
  }
}

/* サービス利用者詳細更新 tenant-user-detail-content */

.tenant-user-detail-content {
  padding-top: 4.25vw;
  width: 83.3%;
  margin: auto;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  .left {
    width: 44.5%;
    float: left;
  }

  .right {
    width: 44.5%;
    float: right;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.75vw;
    color: #0041bc;
  }

  .left .form-group {
    text-align: left;
    width: 100%;
    margin: auto;
    padding-top: 1.45vw;

    &:nth-of-type(1) {
      padding-top: 0vw;
    }
  }

  .left label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;
  }

  .left input {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
  }

  .left input::placeholder {
    color: #b4b4b7;
  }

  .left div:nth-of-type(2n) {
    margin-right: 0%;
  }

  .left .form-group_div {
    position: relative;
  }

  .left .form-group_div button {
    position: absolute;
    left: 1.5vw;
    top: 50%;
    transform: translateY(-50%);
    width: 4.75vw;
    height: 1.6vw;
    line-height: 1.6vw;
  }

  .left .form-group_div button img {
    width: 0.93vw;
    margin-left: 0.48vw;
    float: left;
    margin-top: 0.3vw;
  }

  .left .form-group_div input {
    padding: 0vw 1.45vw 0vw 7.35vw !important;
    color: #f57b00 !important;
  }

  .left .checkbox_label {
    position: relative;
    padding: 0 0 0 2.15vw;
    font-weight: 500;
    font-size: 0.83vw;
    margin-top: 1.55vw;
    margin-bottom: 0.78vw;
    display: block;
    cursor: pointer;
  }

  .button-all .message_div {
    float: right;
  }

  .right_table th {
    padding-left: 2.55%;
  }
  .right_table td {
    padding-left: 2.55%;
  }

  .right_table thead tr th:nth-child(1) {
    width: 42.3%;
    padding-left: 6%;
  }

  .right_table thead tr th:nth-child(2) {
    width: 25.8%;
  }

  .right_table thead tr th:nth-child(3) {
    width: 22.55%;
  }

  .right_table thead tr th:nth-child(4) {
    padding-left: 0%;
    padding-right: 0;
  }

  .right_table tbody tr td:nth-child(1) {
    padding-left: 6%;
  }

  .right_table tbody tr td:nth-child(4) {
    padding-left: 0%;
    padding-right: 1.8%;
    text-align: center;
  }

  .right input {
    width: 100%;
    border: none;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: auto;
    padding: 0vw;
    margin: 0vw;
    color: #414143;
    display: block;
    padding-top: 1.1vw;
  }

  .right input::placeholder {
    color: #b4b4b7;
  }

  .right input[type="date"] {
    width: 100%;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    float: left;
    height: 100%;
    text-align: left;
    padding-left: 0.18vw;
    padding-right: 0.18vw;
  }

  @-moz-document url-prefix() {
    /* Firefox専用のCSSはここに書く */
    .right input[type="date"] {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .is-safari & .right input[type="date"] {
    padding-top: 0.18vw;
    padding-bottom: 0.18vw;
  }

  .right input[type="date"]:focus {
    outline: none;
  }

  .right input[type="date"].hidden-text {
    color: transparent;
  }

  .right .date_img_div {
    position: relative;
    width: 85.5%;
    border: solid 0.1vw #414143;
    height: 1.65vw;
    margin-top: 0.7vw;
    margin-bottom: 0.7vw;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
  }

  .right_table tbody tr td:nth-child(3) .date_img_div {
    width: 100%;
  }

  .right .date_img_div_span {
    float: right;
    border-left: solid 0.1vw #414143;
    height: 100%;
    width: 20.4%;
    text-align: center;
    line-height: normal;
  }

  .right .date_img_div img {
    width: 0.87vw;
    cursor: pointer;
    line-height: normal;
    vertical-align: -0.5vw;
  }

  .right .fake-placeholder {
    position: absolute;
    top: 0%;
    left: 6%;
    pointer-events: none;
    z-index: 1;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    line-height: 1.65vw;
    height: 1.65vw;
  }

  .right .hidden-placeholder {
    display: none;
  }

  .right .delete-button {
    border: none;
    background-color: transparent;
    cursor: pointer;
  }
  .right .delete-button img {
    width: 1.37vw;
    vertical-align: -0.43vw;
  }

  .right .add-button {
    border: none;
    background-color: transparent;
    margin-top: 0.7vw;
    cursor: pointer;
  }

  .right .add-button img {
    width: 1.37vw;
    vertical-align: -0.43vw;
  }

  .right_table .addform_tr td {
    line-height: normal;
    vertical-align: top;
  }

  .right select#tenantContractId {
    -webkit-appearance: none;
    appearance: none;
    text-align-last: left;
    text-align: left;
    cursor: pointer;
    outline: none;
    background-image: url("../img/select-arrow-bottom_b.png");
    background-repeat: no-repeat;
    background-size: 0.75vw auto;
    background-position: bottom 0.3vw right 0.5vw;
    width: 100%;
    border: solid 0.1vw #414143;
    height: 1.65vw;
    margin-top: 0.7vw;
    margin-bottom: 0.7vw;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    border-radius: 0vw;
    padding: 0vw 1.6vw 0vw 0.5vw;
    color: #414143;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #fff;
  }

  .right_table .addform_tr td:nth-child(2) {
    overflow: initial;
  }

  .right .message_div.error {
    clear: both;
    margin-top: 0.9vw;
    margin-bottom: 0.75vw;
    width: 16.18vw;
  }

  .right .message_div.error:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  .right .message_div.error span {
    float: right;
    width: auto;
    line-height: 1.25vw;
    white-space: normal;
  }
}

/* テナントサービス利用者一括登録 tenant-user-bulk-content */

.tenant-user-bulk-content {
  padding-top: 4.25vw;
  width: 37%;
  margin: auto;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.75vw;
    color: #0041bc;
  }

  .form-group {
    text-align: left;
    width: 100%;
    margin: auto;
    padding-top: 1.45vw;

    &:nth-of-type(1) {
      padding-top: 0vw;
    }
  }

  input {
    width: 80%;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
  }

  input::file-selector-button {
    border: none;
    background-color: #0041bc;
    color: #fff;
    padding: 0;
    width: 33.2%;
    display: inline-block;
    line-height: 2.13vw;
    font-size: 0.83vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    border-radius: 99999px;
    cursor: pointer;
    margin-right: 1vw;
  }

  label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;
  }

  label span {
    font-size: 0.63vw;
    margin-left: 0.38vw;
  }

  .checkbox_label {
    position: relative;
    padding: 0vw 0 0 0;
    margin-left: 1.02vw;
    vertical-align: 0.1vw;
    cursor: pointer;
  }

  .import_div div {
    margin-top: 1.75vw;
  }
  button {
    margin-top: 1.75vw;
  }

  .message_div_group {
    margin-top: 1.75vw;
    float: right;
  }

  .import_div .message_div {
    float: right;
  }

  .list-header {
    background-color: inherit;
  }
}

/* LDAP認証情報一覧 tenant-service-ldap-content */

.tenant-service-ldap-content {
  width: 55.3%;
  margin: auto;
  padding-top: 4.1vw;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 1.5vw;
    color: #0041bc;
  }

  .tenant-service-list-top {
    position: relative;
    padding-bottom: 1.7vw;
    height: 2.13vw;
  }

  .tenant-service-list-top:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  .regist-button {
    width: 30.4%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .tenant-service-list {
    clear: both;
  }

  .list-header {
    float: right;
    margin-top: 0.4vw;
    margin-bottom: 0vw;
  }

  .tenant-service-list-table thead tr th:nth-child(1) {
    width: 40.6%;
  }

  .tenant-service-list-table thead tr th:nth-child(2) {
    width: 37.35%;
  }

  .tenant-service-list-table thead tr th:nth-child(3) {
    width: 22.05%;
    padding-right: 6%;
  }

  .tenant-service-list-table tbody tr td:nth-child(3) {
    padding-right: 6%;
  }
}

/* LDAP認証情報詳細更新 tenant-ldap-detail-content */

.tenant-ldap-detail-content {
  padding-top: 4.25vw;
  width: 55.25%;
  margin: auto;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  .left {
    width: 67.1%;
    float: left;
  }

  .right {
    width: 16.25%;
    float: right;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.75vw;
    color: #0041bc;
  }

  .left .form-group {
    text-align: left;
    width: 100%;
    margin: auto;
    padding-top: 1.45vw;

    &:nth-of-type(1) {
      padding-top: 0vw;
    }
  }

  .left label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;
  }

  .left input {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
  }

  .left input::placeholder {
    color: #b4b4b7;
  }

  .left div:nth-of-type(2n) {
    margin-right: 0%;
  }

  .left .form-group-checkbox {
    margin-bottom: 0.4vw;
  }

  .left .form-group-checkbox label {
    cursor: pointer;
  }

  .left .checkbox_label {
    position: relative;
    padding: 0 0 0 0;
    margin-left: 0.87vw;
    vertical-align: 0.1vw;
    cursor: pointer;
  }

  .left .button-all .message_div {
    float: right;
  }

  .right label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;
  }

  .right label span {
    font-size: 0.63vw;
    margin-left: 0.38vw;
  }

  .right .checkbox_label {
    position: relative;
    padding: 0vw 0 0 0;
    margin-left: 1.02vw;
    vertical-align: 0.1vw;
    cursor: pointer;
  }

  .right .import_div div {
    margin-top: 1.75vw;
  }
  .right .import_div button {
    margin-top: 1.75vw;
  }

  .right .message_div {
    width: 22.85vw;
    white-space: nowrap;
    margin-top: 1.5vw;
  }

  .right .import_label {
    cursor: pointer;
  }
}

/* テナントサービス属性詳細更新 tenant-service-attr-content */

.tenant-service-attr-content {
  padding-top: 4.25vw;
  width: 37%;
  margin: auto;
  padding-bottom: 7.2vw;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  h3 {
    font-size: 0.97vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 3.75vw;
    color: #0041bc;
  }

  .form-group {
    text-align: left;
    width: 100%;
    margin: auto;
    padding-top: 1.45vw;

    &:nth-of-type(1) {
      padding-top: 0vw;
    }
  }

  label {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;
  }

  input {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.15vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    margin-top: 0.4vw;
    color: #414143;
    display: block;
  }

  input::placeholder {
    color: #b4b4b7;
  }

  .message_div {
    float: right;
  }
}

/* common */

/* 項目タイトル */
h3 {
  font-size: 0.97vw;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin: 0;
  color: #0041bc;
}

/* 上部ボタン */
.regist-button {
  border: none;
  background-color: #f57b00;
  color: #fff;
  padding: 0;
  width: 20%;
  margin: auto;
  display: block;
  line-height: 2.13vw;
  font-size: 0.83vw;
  letter-spacing: 0.08em;
  font-weight: 500;
  border-radius: 99999px;
  cursor: pointer;
}

/* 検索フォーム */
.search-all {
  background-color: #fff;

  &:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
  }

  form {
    width: 100%;
    padding-left: 4.15%;
    padding-right: 4%;
    box-sizing: border-box;
  }

  button {
    float: right;
    border: none;
    background-color: #0041bc;
    color: #fff;
    padding: 0;
    width: 9.9%;
    margin: auto;
    display: block;
    line-height: 2.13vw;
    font-size: 0.83vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    border-radius: 99999px;
    cursor: pointer;
    margin-top: 3.68vw;
  }
}

.search-title {
  background-color: #0041bc;
  color: #fff;

  span {
    line-height: 3.3vw;
    font-size: 0.83vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    color: #fff;
    width: 91.7%;
    margin: auto;
    display: block;
  }
}

.search-input-all {
  div p {
    margin: 0;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding-bottom: 0.4vw;
  }

  input[type="text"] {
    width: 100%;
    border: solid 0.07vw #b4b4b7;
    box-sizing: border-box;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    height: 3.25vw;
    border-radius: 0.5vw;
    padding: 0vw 1.45vw;
    color: #414143;
  }

  input::placeholder {
    color: #b4b4b7;
  }
}

/* 下部ボタン */
.button-all {
  margin-top: 4.9vw;
  display: inline-flex;
  align-items: flex-start;

  button {
    border: none;
    color: #fff;
    padding: 0;
    width: 7.55vw;
    display: block;
    line-height: 2.13vw;
    font-size: 0.83vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    border-radius: 99999px;
    cursor: pointer;
    float: left;
  }

  .update-button {
    background-color: #0041bc;
    margin-right: 2.6vw;
  }

  .delete-button {
    background-color: #e80000;
    margin-right: 2.6vw;
  }

  .register-button {
    background-color: #f57b00;
    margin-right: 2.6vw;
  }
}

/* その他ボタン */
.command-button {
  background-color: #f57b00;
  border-radius: 0.3vw;
  border: none;
  color: #fff;
  padding: 0;
  margin: 0;
  width: 8.95vw;
  height: 1.6vw;
  line-height: 1.65vw;
  cursor: pointer;
  font-size: 0.75vw;
  letter-spacing: 0.08em;
  font-weight: 400;
  box-sizing: border-box;
}

.command-button:disabled {
  background-color: #fff;
  border: solid 0.07vw #b4b4b7;
  color: #b4b4b7;
  line-height: 1.6vw;
}

/* メッセージ */
.message_div {
  .message_span {
    display: inline-flex;
    align-items: center;
  }

  &.info {
    background-color: #fff;
    border: solid 0.1vw #f57b00;
    width: 12.88vw;
    text-align: center;

    .message {
      color: #f57b00;
      line-height: 2vw;
      font-size: 0.83vw;
      letter-spacing: 0.08em;
    }
  }

  &.error {
    margin-top: 0vw;
    margin-bottom: 0.45vw;
    width: 26.3vw;

    span {
      color: #e80000;
      font-size: 0.75vw;
      letter-spacing: 0.08em;
      font-weight: 500;
    }
  }

  img {
    width: 1.35vw;
    margin-right: 0.7vw;
    vertical-align: -0.35vw;
  }
}

/* ページャー */
.list-header {
  float: right;
  background-color: #fff;

  span {
    font-size: 0.5vw;
    letter-spacing: 0.08em;
    font-weight: 500;
    display: block;
    float: left;
    width: 1.65vw;
    height: 100%;
    text-align: center;
    line-height: 1.7vw;
  }

  span a {
    text-decoration: none;
    color: #414143;
  }

  .pager_left img {
    width: 0.32vw;
    vertical-align: -0.13vw;
  }

  .current {
    background-color: #0041bc;
    color: #fff;
  }

  .pager_right img {
    width: 0.32vw;
    vertical-align: -0.13vw;
  }
}

/* テーブル */
.list-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: solid 0px #778ca3;
  background-color: #fff;
  text-align: left;
  table-layout: fixed;

  tbody tr {
    border-top: solid 0.07vw #b4b4b7;
  }

  th {
    background: #ededed;
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    line-height: 3.05vw;
    padding-left: 4.15%;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }

  td {
    font-size: 0.75vw;
    letter-spacing: 0.08em;
    line-height: 3.05vw;
    padding-left: 4.15%;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &.selectable tbody tr:hover {
    background-color: #fffdd0;
    cursor: pointer;
  }
}

/* フォームの固定テキスト */
.form-group span {
  font-size: 0.83vw;
  letter-spacing: 0.08em;
  font-weight: 500;
  display: block;
  margin-top: 1.6vw;
  margin-bottom: 1vw;
  margin-left: 1.4vw;
}

/* 必須マーク */
.form-group .required {
  font-family: "Roboto";
  font-style: normal;
  font-size: 0.7vw;
  vertical-align: 0.09vw;
  color: #0041bc;
  margin-left: 0.05vw;
}

/* チェックボックス */
.form-group input[type="checkbox"],
.checkbox_div input[type="checkbox"] {
  display: none;

  &:checked ~ .checkbox_label:before {
    opacity: 1;
  }

  &:checked ~ .checkbox_label:after {
    background-color: #0041bc;
  }
}

.checkbox_label {
  position: relative;
  padding: 0 0 0 2.15vw;
  font-weight: 500;
  font-size: 0.83vw;
  margin-top: 1.55vw;
  margin-bottom: 0.78vw;
  cursor: pointer;

  &:after {
    border: solid 0.07vw #b4b4b7;
    border-radius: 0.2vw;
    z-index: 1;
    background-color: #fff;
  }

  &:after,
  &:before {
    position: absolute;
    content: "";
    display: block;
    top: -0.1vw;
    left: 0;
    width: 1.22vw;
    height: 1.22vw;
    margin: 0;
  }

  &:before {
    background-image: url("../img/square-check-solid.png");
    background-size: 100%;
    opacity: 0;
    z-index: 2;
    background-position: center 1.22vw;
    border: solid 0.07vw rgba(0, 0, 0, 0);
  }
}
