#contact {
  /*====================================================
  COMMON
  ====================================================*/
  .contact-common-title {
    font-size: 2.6rem;
    font-weight: 600;
    position: relative;
    padding-left: 0.8em;
    border-bottom: 1px solid;
    padding-block: 0.4em;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0.5em;
      height: auto;
      aspect-ratio: 1 / 1;
      background-color: var(--color-orange);
      border-radius: 50%;
    }
    &:has(+ .mw_wp_form) {
      margin-bottom: 1.5em;
    }
    @media screen and (max-width: 767px) {
      font-size: 1.8rem;
    }
  }

  /*====================================================
  ====================================================*/

  padding-bottom: 14.2rem;

  .inner {
    width: 1100px;
  }
  .breadcrumb {
    padding-block: 2.4rem;
    margin-bottom: 2.6rem;
  }

  /* INDEX */
  .pageHead {
    margin-bottom: 4.4em;
  }
  .bgGrayTit {
    margin-bottom: 1.5em;
  }
  .contact__list {
    row-gap: 6.2rem;
  }
  .contact__list_item {
    width: 100%;
    &:where(.--half) {
      width: 46%;
    }
  }
  .entryBlock {
    font-size: 16px;
    justify-content: flex-start;
    gap: 2em calc((100% - 19.4375em * 3) / 2);
    padding-inline: 3.2em;
  }
  .branchList {
    width: 19.4375em;
    border: 1px solid #000;
    border-radius: 0.375em;
    background-color: #fff;
    text-align: center;
    padding-block: 1.375em;
    dt {
      font-weight: 700;
    }
    .tel {
      font-size: 1.5em;
      font-family: 'Rowdies', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: 0.5em;
      line-height: 1.3;
      /* &::before {
        content: '';
        background-image: url(../img/common/icon_phone_black.svg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 0.7em;
        height: auto;
        aspect-ratio: 1/1;
      } */
    }
    .url {
      margin-top: 0.1em;
      display: inline-block;
      font-size: 0.9375em;
    }
    .form {
      align-items: center;
      background: var(--color-orange);
      border-radius: 9999px;
      display: grid;
      grid-template-columns: auto 1fr;
      margin: 0.6em auto 0;
      padding-inline: 1em 2.775em;
      position: relative;
      overflow: hidden;
      width: fit-content;
      padding-block: 0.9em;
      column-gap: 0.4em;

      &:hover {
        opacity: 1;
        &::before {
          transform: scaleX(1);
          transform-origin: left center;
        }
      }
      &::before {
        position: absolute;
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background: #3e3e3e;
        top: 0px;
        left: 0px;
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform 0.5s;
      }
      .dot {
        background: #fff;
        border-radius: 50%;
        display: block;
        height: auto;
        width: 0.625em;
        position: relative;
        aspect-ratio: 1/1;
      }
      .text {
        color: #fff;
        font-weight: 700;
        line-height: 1;
        transform: translateY(0.0625em);
      }
      .arrow::after {
        position: absolute;
        content: '';
        background-image: url(../img/common/arrow_right_white_dashed.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        top: 50%;
        transform: translateY(-50%);
        height: auto;
        width: 1.5em;
        aspect-ratio: 128/71;
        right: 0.8em;
      }
    }
  }

  /* FORM */
  .contact__company {
    font-weight: 700;
    color: var(--color-orange);
    background-color: #fff;
    text-decoration: underline;
    border: 2px solid;
    padding: 0.5em 2.8em;
    display: inline-block;
  }
  --table-max-width: 912px;
  .contact__company_wrap {
    text-align: right;
    margin-block: 3.6rem;
    max-width: var(--table-max-width);
    margin-inline: auto;
    width: 100%;
  }
  .mw_wp_form {
    font-size: 1.8rem;
    &:where(:has(+ .contact__thanks)) {
      display: none;
    }
    * {
      font-weight: inherit;
    }
    table {
      max-width: var(--table-max-width);
      margin-inline: auto;
      width: 100%;
      line-height: 1.35;
      display: block;
    }
    tr {
      display: grid;
      grid-template-columns: 24.8% 1fr;
      column-gap: 4%;
      justify-content: space-between;
    }
    th {
      position: relative;
      span {
        font-size: 0.83333333em;
        background-color: var(--color-orange);
        color: #fff;
        padding: 0.2em 0.5em;
        margin-left: 0.5em;
        position: absolute;
        right: 0;
      }
    }
    tbody {
      display: grid;
      row-gap: 1.2em;
      grid-template-columns: 100%;
    }
    input[type='text'],
    textarea,
    select {
      background-color: #fff;
      width: 100%;
      border: 1px solid #d1cfcf;
      border-radius: 0.5rem;
      height: 100%;
      padding: 0.7em;
    }
    textarea {
      height: 10em;
    }
    .pp {
      background-color: #fff;
      margin-top: 6.6rem;
      padding: 3.88888889em 4%;

      &:where(.mw_wp_form_preview &) {
        display: none;
      }
    }
    .ppTx {
      font-size: 1.22222222em;
      text-align: center;
      margin-bottom: 2.4em;
    }
    .ppCont {
      background-color: #f7f6f6;
      box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 0.06);
      overflow: auto;
      height: 38.4rem;
    }
    .contact__privacy {
      padding: 4rem 6.2rem;
    }
    .contact__privtxt--bold {
      font-weight: 700;
      &:first-child {
        margin-bottom: 0.8em;
      }
      &:nth-child(n + 2 of &) {
        font-size: 0.88888889em;
        margin-block: 0.7em;
      }
    }
    .contact__privtxt {
      &:nth-child(n + 2 of &) {
        font-size: 0.88888889em;
      }
      &:last-child {
        text-align: right;
      }
    }
    [type='submit'] {
      align-items: center;
      background: var(--color-orange);
      border-radius: 9999px;
      margin: 2.8em auto 0;
      padding-inline: 3.5em 6em;
      position: relative;
      width: fit-content;
      padding-block: 1.2em;
      color: #fff;
      background-image: url(../img/common/arrow_right_white_dashed.png);
      background-position: right 3.3em center;
      background-repeat: no-repeat;
      background-size: 1.5em;
      display: block;
      &:hover {
        background-color: #3e3e3e;
      }
      &:where([name='submitBack']) {
        background-color: #3e3e3e;
        color: #fff;
        background-position: left 3.3em center;
        padding-inline: 6em 3.5em;
        background-image: url(../img/common/arrow_left_white_dashed.png);
        &:hover {
          background-color: var(--color-orange);
        }
      }
    }
    .ppAagree {
      font-size: 0.88888889em;
      margin-top: 2em;

      label {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 1em;
        width: fit-content;
        margin-inline: auto;

        input {
          width: auto;
          transform: translateY(-6%);
        }
        .mwform-checkbox-field-text {
          line-height: 1;
        }
      }
    }
    div {
      &:where(:has(> [type='submit'])) {
        display: flex;
        justify-content: center;
        column-gap: 1em;

        [type='submit'] {
          margin-inline: 0;
        }
      }
    }
  }

  /* THANKS */
  .contact__thanks {
    font-size: 1.8rem;
    margin-top: 2.4em;
  }

  /*====================================================
  WEB予約
  ====================================================*/
  .formSchool {
    p {
      font-size: 1.2em;
      background-color: var(--color-orange);
      color: #fff;
      padding: 0.5em;
      text-align: center;
    }
    a {
      text-decoration: underline;
      margin-top: 0.6em;
      display: block;
      width: fit-content;
      font-size: 1em;
      &:hover {
        @media (hover: hover) {
          opacity: 1;
          text-decoration: none;
        }
      }
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1158px) {
    .entryBlock {
      font-size: 1.38169257vw;
    }
  }
  @media screen and (max-width: 767px) {
    padding-block: 19vw 25vw;
    .pageHead {
      margin-bottom: 1.4em;
    }
    .bgGrayTit {
      margin-bottom: 1em;
    }
    /* INDEX */
    .entryBlock {
      padding-inline: 3%;
      font-size: 1.5rem;
      row-gap: 0.7em;
    }
    .branchList {
      width: 100%;
      padding-block: 0.8em;
      .tel {
        font-size: 1.4em;
        line-height: 1;
      }
      .url {
        font-size: 0.73333333em;
        margin-top: 0.2em;
        display: block;
        width: fit-content;
        margin-inline: auto;
      }
      .form {
        font-size: 0.86666667em;
        padding-block: 0.7em;
        padding-inline: 0.8em 2.775em;

        .dot {
          width: 0.5em;
        }
        .arrow {
          &::after {
            width: 0.9em;
          }
        }
      }
    }
    .contact__list {
      row-gap: 5vw;
    }
    .contact__list_item {
      width: 100%;
    }

    /* FORM */
    .contact__company_wrap {
      text-align: center;
      margin-block: 7vw;
    }
    .contact__company {
      font-size: 1.3rem;
    }
    .mw_wp_form {
      font-size: 1.4rem;
      margin-top: 1.4em;

      th {
        width: fit-content;
        span {
          left: 100%;
          display: block;
          white-space: nowrap;
          width: fit-content;
          top: 50%;
          transform: translateY(-50%);
        }
        br.pcVer {
          display: none;
        }
      }
      tr {
        grid-template-columns: 100%;
        row-gap: 0.6em;
      }
      tbody {
        row-gap: 1.8em;
      }
      .pp {
        margin-top: 3.4em;
        padding: 2.6em 1.5em 3.6em;
      }

      .ppTx {
        margin-bottom: 1em;
      }
      .contact__privacy {
        padding: 1.6em 1.3em;
      }
      div {
        &:where(:has(> [type='submit'])) {
          [type='submit'] {
            font-size: 1.4rem;
            padding-inline: 2.2em 4.6em;
            background-position: right 2.4em center;
            &:where([name='submitBack']) {
              padding-inline: 4.6em 2.2em;
              background-position: left 2.4em center;
            }
          }
        }
      }
    }

    /* THANKS */
    .contact__thanks {
      font-size: 1em;
      margin-top: 1em;
    }
  }
}