/* お問い合わせフォーム（contact.html だけで読み込む）。色と書体は base.css の変数を使う */
/* 入れ子の先頭が要素名のときは & を付ける（Chrome 119 / Safari 17.1 以前は & 無しを読めない） */
.sec_contact_form {
  padding-block: 98px;
  background: var(--cream);
  @media (max-width: 780px) { padding-block: 65px; }

  .wrap {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
    gap: 80px;
    @media (max-width: 1100px) { gap: 48px; }
    @media (max-width: 900px) { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  }

  .guide {
    .section_label {
      margin-bottom: 28px;
      @media (max-width: 780px) { margin-bottom: 20px; }
    }
    .ttl_ptn_1 { margin-bottom: 32px; }
    .txt {
      font-size: 16px;
      line-height: 2em;
      @media (max-width: 780px) { font-size: 15px; }
    }
    .txt + .txt { margin-top: 16px; }
  }

  .contact_channel { min-width: 0; }

  .contact_tabs {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    & button {
      min-height: 62px;
      padding: 12px 16px;
      background: #fffdf8;
      color: var(--brown);
      font-size: 17px;
      font-weight: 600;
      border: 1px solid var(--gold);
      cursor: pointer;
      transition: background-color .2s ease, color .2s ease;
    }
    & button[aria-selected="true"] { background: var(--brown); color: #fff; border-color: var(--brown); }
    & button:hover:not([aria-selected="true"]) { background: var(--sand); }
    & button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
    @media (max-width: 700px) {
      gap: 8px;
      & button { min-height: 54px; padding-inline: 8px; font-size: 15px; }
    }
  }

  .main {
    padding: 44px;
    background: #fff;
    border: 1px solid var(--line);
    &[hidden] { display: none; }
    @media (max-width: 700px) { padding: 28px 16px; }
  }

  .line_panel {
    .section_label { margin-bottom: 19px; }
    & h3 { color: var(--brown); font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.5em; }
    & p:not(.section_label) { margin-top: 22px; font-size: 16px; line-height: 1.8em; }
    & .btn_ptn_1 { margin-top: 32px; padding-inline: 26px; max-width: 350px; width: 100%; display: flex; }
    & .note { color: var(--muted); font-size: 13px; }
    @media (max-width: 700px) {
      & h3 { font-size: 24px; }
      & p:not(.section_label) { font-size: 15px; }
    }
  }

  .contact_form {
    display: flex;
    flex-direction: column;
    gap: 28px;
    &[hidden] { display: none; }
  }

  .field {
    > label,
    > legend {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--brown);
      font-size: 16px;
      font-weight: 600;
      @media (max-width: 700px) { font-size: 15px; }
    }
    > input,
    > textarea {
      margin-top: 10px;
      padding: 14px 16px;
      width: 100%;
      display: block;
      background: #fffdf8;
      color: var(--ink);
      font-size: 16px;
      line-height: 1.6em;
      border: 1px solid #a08a5e;
      transition: border-color .2s ease;
      &:focus-visible {
        border-color: var(--brown);
        outline: 2px solid var(--gold);
        outline-offset: 1px;
      }
    }
    > textarea { resize: vertical; }
  }

  .req,
  .opt {
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
  }
  .req { background: var(--brown); color: #fff; }
  .opt { color: var(--muted); border: 1px solid var(--line); }

  .choices {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    & label {
      padding: 10px 16px;
      display: flex;
      &[hidden] { display: none; }
      align-items: center;
      gap: 8px;
      background: #fffdf8;
      font-size: 15px;
      border: 1px solid #a08a5e;
      transition: border-color .2s ease, background-color .2s ease;
      cursor: pointer;
      &:has(input:checked) { background: var(--sand); color: var(--brown); font-weight: 600; border-color: var(--brown); }
      &:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
      @media (max-width: 700px) { padding: 9px 14px; font-size: 14px; }
    }
    & input {
      margin: 0;
      width: 16px;
      height: 16px;
      accent-color: var(--brown);
    }
  }

  .privacy {
    padding: 20px 22px;
    background: #fffaf1;
    border-left: 3px solid var(--gold);
    & p { font-size: 13px; line-height: 1.8em; }
    .ttl { margin-bottom: 6px; color: var(--brown); font-size: 14px; font-weight: 600; }
  }

  .consent_row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 18px;
    & > a { color: var(--brown); font-size: 14px; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
    & > a:hover { color: #987346; }
  }

  .consent {
    margin-top: 6px;
    padding-block: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brown);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    & input { margin: 0; width: 18px; height: 18px; accent-color: var(--brown); }
  }

  .foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    @media (max-width: 700px) { align-items: stretch; }
  }

  .btn_ptn_1 {
    padding-inline: 26px;
    min-width: 260px;
    min-height: 62px;
    font-size: 17px;
    border: 0;
    cursor: pointer;
    &:disabled { opacity: .6; cursor: wait; }
    @media (max-width: 700px) { min-width: 0; }
  }

  .form_status {
    margin-top: 14px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8em;
    &:empty { margin-top: 0; }
    &.is_error { color: #a03a2c; font-weight: 600; }
  }

  .form_done {
    padding-block: 8px;
    & p { font-size: 15px; line-height: 1.9em; }
    .ttl {
      margin-bottom: 14px;
      color: var(--brown);
      font-family: var(--serif);
      font-size: 26px;
      font-weight: 600;
      line-height: 1.5em;
      @media (max-width: 700px) { font-size: 22px; }
    }
    &:focus { outline: none; }
  }
}