.sec_contact_details {
  #cf-form { margin-top: 25px; }
  .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
  .field { min-width: 0; }
  .full { grid-column: 1 / -1; }
  .field label { margin-bottom: 7px; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.5em; }
  .required, .optional { padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; line-height: 1.4em; }
  .required { color: #dcc9ff; background: #7755c65c; }
  .optional { color: #a8c4e3; background: #37517190; }

  .field input, .field select, .field textarea {
    padding: 12px 14px;
    width: 100%;
    min-height: 45px;
    border: 1px solid #617a9a;
    border-radius: 5px;
    outline: none;
    color: #f5f9ff;
    background: #1a3557;
    font: 14px/1.6em var(--font-jp);
    transition: border-color .2s, box-shadow .2s;

    &::placeholder { color: #99adcb; opacity: 1; }
    &:focus-visible { border-color: #6dc6ff; box-shadow: 0 0 0 3px #4999ed35; }
    &[aria-invalid="true"] { border-color: #ec8fa4; box-shadow: 0 0 0 3px #e2617930; }
  }

  .field select { padding-right: 40px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23b8d1f4' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; cursor: pointer; option { color: #f5f9ff; background: #18304e; } }
  .field textarea { min-height: 115px; resize: vertical; }
  .help { margin-top: 5px; color: #a4bad6; font-size: 11px; line-height: 1.5em; }
  .error { margin-top: 5px; color: #ffc0d0; font-size: 12px; line-height: 1.5em; &:empty { display: none; } }

  .consent {
    margin-top: 2px;
    label { display: flex; align-items: center; gap: 9px; color: #e4efff; font-size: 13px; line-height: 1.6em; cursor: pointer; }
    input { position: absolute; width: 1px; height: 1px; opacity: 0; }
    .check { width: 21px; height: 21px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #7da5d5; border-radius: 3px; color: transparent; background: #152d4c; font-size: 14px; line-height: 1em; }
    input:checked + .check { border-color: #599eff; color: #fff; background: linear-gradient(120deg, #2b9aef, #7553fa); }
    input:focus-visible + .check { outline: 2px solid #91d4ff; outline-offset: 3px; }
    input[aria-invalid="true"] + .check { border-color: #ec8fa4; }
    a { color: #99ceff; text-decoration: underline; text-underline-offset: 3px; &:hover, &:focus-visible { color: #fff; } }
  }

  .actions { margin-top: 1px; }
  #cf-submit { padding: 13px 22px; width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #7b8aff; border-radius: 5px; color: #fff; background: linear-gradient(100deg, #2b9def, #455bef 60%, #6342e6); font-family: var(--font-jp); font-size: 15px; font-weight: 700; line-height: 1.4em; cursor: pointer; transition: filter .2s, transform .2s; &:hover, &:focus-visible { filter: brightness(1.14); transform: translateY(-2px); } &:disabled { cursor: wait; opacity: .72; transform: none; } }
  .cf-spinner { width: 16px; height: 16px; display: none; border: 2px solid #ffffff70; border-top-color: #fff; border-radius: 50%; animation: contact-spin .7s linear infinite; }
  #cf-submit.is-sending { .cf-spinner { display: block; } .cf-submit-text { font-size: 0; &::after { content: "送信中…"; font-size: 15px; } } }
  .recaptcha-note { margin-top: 16px; color: #9aafca; font-size: 11px; line-height: 1.8em; text-align: center; a { color: #b6d5f5; text-decoration: underline; text-underline-offset: 3px; } }
  .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

  @media (max-width: 600px) {
    #cf-form { margin-top: 22px; }
    .fields { grid-template-columns: 1fr; gap: 17px; }
    .field label { font-size: 13px; }
    .field input, .field select, .field textarea { font-size: 16px; }
    .consent label { align-items: flex-start; }
  }

  @media (prefers-reduced-motion: reduce) { #cf-submit { transition: none; &:hover { transform: none; } } .cf-spinner { animation: none; } }
}

@keyframes contact-spin { to { transform: rotate(360deg); } }
.grecaptcha-badge { visibility: hidden; }