@charset "UTF-8";

.technician-tel-box {
  padding: min(8.53vw, 40px) min(4.26vw, 32px);
  background-color: var(--color-gold-light);
  width: 100%;

  p {
    b,
    strong {
      font-weight: 400;
      display: inline;
      background: linear-gradient(transparent 70%, var(--color-gold-middle02) 70%);
    }
  }

  .tel {
    font-family: var(--font-serif);
    font-size: min(5.33vw, 28px);
    color: var(--color-gold-dark);
    line-height: 1.8;
    text-align: center;
    margin-top: min(5.33vw, 20px);
  }
}

@media screen and (min-width: 768px) {
  .technician-tel-box {
    text-align: center;
  }
}

.technician-address-box {
  margin: min(10.66vw, 40px) auto;
  padding: min(8.53vw, 40px) min(4.26vw, 32px);
  background-color: var(--color-gray-light);
  border: .5px solid var(--color-gray);
  width: 100%;

  .title {
    display: inline-block;
    padding: 0 min(4.26vw, 16px);
    margin-bottom: min(2.13vw, 8px);
    line-height: min(5.33vw, 24px);
    border: 1px solid var(--color-gray-dark);
    font-family: var(--font-serif);
    font-size: min(4vw, 15px);
  }

  p {
    margin-bottom: min(6.4vw, 24px);
    font-size: min(3.46vw, 14px);

    b,
    strong {
      font-weight: 400;
      display: inline;
      background: linear-gradient(transparent 70%, var(--color-gold-light03) 70%);
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.layout-sub-table {
  .th-title {
    background-color: var(--color-gray-light02);
    font-family: var(--font-serif);
    font-weight: 500;
  }

  b,
  strong {
    font-weight: 400;
    display: inline;
    background: linear-gradient(transparent 70%, var(--color-gold-light03) 70%);
  }
}

@media screen and (min-width: 768px) {

  .layout-sub-table {

    th {
      width: 30%;
    }

    td {
      text-align: left;
    }
  }
}