@import url(lower.css);

main {
  background-color: var(--bg-c);
}

.main {
  padding-top: max(3vw, 30px);
}

.lead {
  text-align: center;
  font-weight: 500;
  line-height: 2;
  font-size: clamp(16px, 1.5vw, 22px);
}

.contact-form {
  margin-top: max(5vw, 30px);
  width: min(100%, 800px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: max(3vw, 30px);

  button {
    align-self: center;
    font-size: clamp(16px, 1.5vw, 22px);
    display: flex;
    gap: 1em;
    padding: 1em 5em 0.8em;
    margin-block: 3vw max(3vw, 40px);
    color: #fff;
    background-color: #000;
    border-radius: 2em;
    transition: opacity 0.4s;

    &:hover {
      opacity: 0.6;
    }

    .arrow {
      width: 2em;
      transform: skew(45deg);
      height: 0.5em;
      border-bottom: 1px solid;
      border-right: 2px solid;
      margin-top: 0.2em;
    }
  }
}

input,
textarea {
  border: 2px solid #666;
  padding: 0.6em 1em;
  border-radius: 8px;
  background-color: #fff;
  width: 100%;
  font-size: 16px;

  &::placeholder {
    color: #ccc;
  }
}

.check-box {
  position: relative;
  display: grid;

  &::before {
    position: absolute;
    pointer-events: none;
    inset: 20%;
    background-color: var(--primary-c);
    content: "";
    border-radius: 3px;
    scale: 0;
    transition: scale 0.3s;
  }

  &:has(input:checked)::before {
    scale: 1;
  }

  input {
    width: 26px;
    border-radius: 0;
    aspect-ratio: 1;
    padding: 0;
  }
}

.input-area {
  display: flex;
  gap: 1.4em;
  align-items: start;
  font-family: "Noto Sans JP", sans-serif;

  &:has(.check-box) .required {
    padding-top: .1em;
  }
}

.required,
.optional {
  width: 11em;
  display: flex;
  justify-content: end;
  position: relative;
  padding-top: 0.6em;
  font-weight: 500;

  +* {
    flex: 1;
  }
}

.required {
  &:after {
    color: var(--primary-c);
    content: "(必須)";
  }
}

.optional {
  &:after {
    content: "(任意)";
  }
}

.message .optional:after {
  display: none;
}

label:has(.check-box) {
  display: flex;
  width: 260px;
  gap: 0.6em;
  align-items: center;
  font-size: clamp(15.5px, 1.4vw, 20px);
}

.contact-type {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.note {
  font-size: 14px;
}

.postal-code {
  display: flex;
  align-items: center;
  gap: 1em;

  input {
    width: 10em;
    margin-bottom: 0.3em;
  }

  span:first-child {
    font-size: 20px;
  }
}

.has-note {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kana .note {
  align-self: center;
}

.contact-method {
  display: flex;

  label {
    width: 160px;
  }
}

.learned {
  text-transform: none;

  .required {
    display: block;
    line-height: 1.8;
    text-align: end;
  }

  label {
    width: 100%;
  }
}

.agree {
  background-color: #fff;
  border-radius: 1em;
  padding: clamp(1em, 3vw, 46px);
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  align-items: center;

  p {
    text-align: center;
    line-height: 2;
  }

  a {
    color: #009fe8;
    border-bottom: 1px solid;
    transition: opacity 0.4s;

    &:hover {
      opacity: 0.6;
    }
  }

  label {
    width: auto;

    .check-box {
      padding-block: 0 .2em;
    }
  }
}

@media (width < 768px) {
  .lead {
    word-break: keep-all;

    .pc {
      display: none;
    }
  }

  .contact-form {
    gap: 0;

    button {
      margin-top: 0;
    }
  }

  .input-area {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8em;
    padding-block: 3em 4em;
    border-bottom: 1px solid #999;

    &:has(.contact-type) {
      padding-bottom: 3em;
    }
  }

  .required,
  .optional {
    width: auto;
    justify-content: start;
  }

  input,
  textarea {
    border-width: 1px;
    padding-inline: 0.7em;
  }

  .check-box input {
    width: 16px;
  }

  .required,
  .optional {
    font-size: 15px;
  }

  .kana .note {
    align-self: start;
  }

  .contact-type {
    margin-top: 10px;

    label {
      width: calc((100% - 1em) / 2);
      align-items: start;
      word-break: keep-all;

      &:nth-child(5),
      &:nth-child(7) {
        margin-top: -1.2em;
      }
    }
  }

  .address {
    .pc {
      display: none;
    }

    .sp {
      display: flex;
      flex-direction: column;
      gap: 1.6em;
    }
  }

  .contact-method {
    margin-top: 10px;

    label {
      width: 100px;
    }
  }

  .learned .required {
    text-align: start;

    .sp {
      display: none;
    }
  }

  .agree {
    padding: 50px 0;
    background-color: transparent;

    p {
      word-break: keep-all;
      font-size: 14px;
    }

    input {
      width: 1.3em;
      border-width: 2px;
    }

    label {
      font-size: 17px;
    }
  }
}

/* ========== thanks ========== */

.thanks {
  padding-top: max(3vw, 30px);

  h2 {
    text-align: center;
    letter-spacing: 0.1em;
    font-size: max(2.6vw, 22px);
    margin-bottom: 1rem;
    color: var(--primary-c);
  }

  .lead {
    color: var(--primary-c);
    margin-bottom: 3vw;
  }

  p {
    text-align: center;
    line-height: 2;
    word-break: keep-all;
  }

  a {
    align-self: center;
    font-size: clamp(1em, 1.5vw, 22px);
    display: flex;
    width: fit-content;
    gap: 1em;
    padding: 1em 4em 0.8em;
    margin: max(5vw, 36px) auto max(3vw, 40px);
    color: #fff;
    background-color: #000;
    border-radius: 2em;
    transition: opacity 0.4s;

    &:hover {
      opacity: 0.6;
    }

    .arrow {
      align-self: center;
      width: 0.7em;
      aspect-ratio: cos(30deg) / 1;
      clip-path: polygon(0 0, 100% 50%, 0 100%);
      background-color: #fff;
      margin-bottom: 0.2em;
    }
  }
}

@media (width < 768px) {
  .thanks .lead {
    .pc {
      display: none;
    }

    .sp {
      display: block;
    }
  }
}