.common-contact {
  .cont {
    padding: 40px 0 0;

    .box {
      max-width: 100%;

      .contact-area {
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow: hidden;

        @media screen and (max-width: 991px) {
          display: flex;
          flex-direction: column;
        }
      }

      .contact-tel,
      .contact-form {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        overflow: hidden;

        .contact-bg {
          position: absolute;
          inset: 0;
          z-index: 0;

          & img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.5);
            transition: filter 0.4s ease;
          }
        }

        &:hover .contact-bg img {
          filter: brightness(0.4);
        }

        .contact-inner {
          position: relative;
          z-index: 1;
          text-align: center;
          border: 1px solid #fff;
          width: 100%;
          height: 240px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-radius: 10px;
        }
      }

      .contact-tel {
        .tel-label {
          color: #fff;
          font-size: 13px;
          transition: color 0.4s ease;
        }

        .tel-number {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          text-decoration: none;
          transition: color 0.4s ease;

          & p {
            color: #fff;
            font-size: 36px;
            font-weight: 700;
            transition: color 0.4s ease;
            line-height: 1;
            margin-bottom: 6px;
          }

          & img {
            width: 100%;
            max-width: 40px;
          }

          .tel-icon {
            display: inline-flex;
            transform-origin: center center;
            animation: none;
            position: relative;

            &::before {
              content: "";
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 40px;
              height: 40px;
              border-radius: 50px;
              background-color: #ffffff56;
              z-index: -1;
            }
          }
        }

        .tel-hours {
          color: rgba(255, 255, 255, 0.8);
          font-size: 13px;
          margin: 0;
          transition: color 0.4s ease;
        }

        &:hover {
          .tel-number {
            .tel-icon {
              animation: tel-shake 0.4s ease forwards;
            }
          }
        }
      }

      .contact-form {
        .form-btn {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          background: #f90;
          color: #fff;
          font-size: 20px;
          font-weight: 700;
          padding: 16px 40px;
          border-radius: 9999px;
          text-decoration: none;
          transition:
            gap 0.3s ease,
            padding 0.3s ease;
          position: relative;

          &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #ffffff56;
            width: 103%;
            height: 112%;
            z-index: -1;
            border-radius: 50px;
          }

          & i {
            font-size: 22px;
            transition: transform 0.3s ease;
          }

          &:hover {
            gap: 18px;
            padding: 16px 48px;

            & i {
              transform: rotate(15deg) scale(1.2);
            }
          }
        }
      }
    }
  }
}

@keyframes tel-shake {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-20deg);
  }
  40% {
    transform: rotate(20deg);
  }
  60% {
    transform: rotate(-20deg);
  }
  80% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.cont.head {
  padding: 140px 32px 0;

  @media screen and (max-width: 991px) {
    padding: 100px 16px 0;
  }
  .box {
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;

      .ttl-eng {
        font-size: clamp(2rem, 0rem + 4.1667vw, 5rem);
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        line-height: 1;
        text-transform: uppercase;
      }

      .ttl-jpn {
        font-size: clamp(1rem, 0.6667rem + 0.6944vw, 1.5rem);
        font-weight: 600;
        color: #aaaaaa;
        line-height: 1;
      }
    }
  }
}

.fv-img {
  margin-top: 80px;

  @media screen and (max-width: 991px) {
    margin-top: 40px;
  }
}

.cont.sub-ttl {
  .box {
    .ttl-area {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 36px;

      @media screen and (max-width: 991px) {
        margin-bottom: 16px;
      }

      .ttl-eng {
        font-size: clamp(1.5rem, 0.8333rem + 1.3889vw, 2.5rem);
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 900;
        line-height: 1.2;
        text-transform: uppercase;
      }

      .ttl-jpn {
        font-size: clamp(1rem, 0.8333rem + 0.3472vw, 1.25rem);
        font-weight: 600;
        color: #aaaaaa;
        line-height: 1;
      }
    }
  }
}

.cont.service-head {
  padding: 160px 32px 80px;

  @media screen and (max-width: 991px) {
    padding: 120px 16px 40px;
  }

  .box {
    max-width: 1560px;

    .item {
      display: flex;
      flex-direction: column;
      gap: 24px;

      @media screen and (max-width: 991px) {
        gap: 16px;
      }

      .ttl-eng {
        font-size: clamp(1rem, 0.6667rem + 0.6944vw, 1.5rem);
        font-weight: 900;
        font-family: Arial, Helvetica, sans-serif;
        color: #ff6600;
        text-transform: uppercase;
        line-height: 1.2;
      }

      .ttl-jpn {
        font-size: clamp(2rem, 0.8333rem + 2.4306vw, 3.75rem);
        font-weight: 600;
        line-height: 1.2;
      }
    }

    .des {
      width: 100%;
      max-width: 45%;

      @media screen and (max-width: 991px) {
        max-width: 100%;
      }
    }
  }
}