@charset "utf-8";

.p-login__check {
  display: flex;
  justify-content: center;
  width: 100%;
}

.p-login__or {
  margin-top: calc(24* var(--width-ratio));
}

.p-login__or__head {
  position: relative;
  font-size: calc(14* var(--width-ratio));
  text-align: center;
  color: #999;
}

.p-login__or__head::before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #999;
}

.p-login__or__head span {
  position: relative;
  padding: 0 calc(24* var(--width-ratio));
  background: #fff;
}

.p-login__or__link {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(16* var(--width-ratio));
  margin-top: calc(24* var(--width-ratio));
}

.p-login__or__link a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16* var(--width-ratio));
  width: calc(50% - 8 * var(--width-ratio));
  border: solid 1px #ccc;
  border-radius: calc(4 * var(--width-ratio));
  padding: calc(18 * var(--width-ratio));
  font-size: calc(14 * var(--width-ratio));
  font-weight: 700;
}

.p-login__or__link a:hover {
  opacity: 0.6;
}

.p-login__or__href {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: calc(28 * var(--width-ratio));
  text-align: center;
}

.p-login__or__href a {
  font-size: calc(14 * var(--width-ratio));
  font-weight: 700;
  color: #274875;
}

.p-login__or__href a:hover {
  opacity: 0.6;
}

@media screen and (max-width: 767px) {
  .p-login__or__link a {
    width: 100%;
  }
  .p-login__or__href {
    flex-wrap: wrap;
    gap: 20px;
  }
  .p-login__or__href a {
    width: 100%;
  }
}