.contact {
  position: fixed;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  border-radius: 30px;
  border-bottom: 10px solid #abcdef;
  border-left: 10px solid #abcdef;
  background: var(--MAIN-COLOR, #1860cc);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  z-index: 1;

  .en {
    color: #abcdef;
    font-family: Khand;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
  }

  .ja {
    color: #fff;
    font-family: "Sawarabi Gothic";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .contact_svg {
    width: 28px;
    height: 22px;
    background-image: url("../../images/contact.svg");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
  }
}

@media (width <= 1300px) {
  .contact {
    width: 140px;
    height: 140px;
  }
}

@media (width <= 768px) {
  .contact {
    width: 65px;
    height: 65px;
    border-radius: 15px;
    border-bottom: 5px solid #abcdef;
    border-left: 5px solid #abcdef;

    .en {
      font-size: 8px;
    }

    .ja {
      font-size: 10px;
    }

    .contact_svg {
      width: 10px;
      height: 8px;
      background-image: url("../../images/contact_sp.svg");
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: contain;
      cursor: pointer;
    }
  }
}