@charset "utf-8";
/* =====================================================================
   さきほこる
   style-contact.css  ―  お問い合わせページ専用スタイル
   ※ 共通スタイルは style-common.css を先に読み込んでください。
   ===================================================================== */

/* ---------- 1. お問い合わせフォーム --------------------------------- */
.contact-form{
  margin-top:8px;background-color:var(--paper-2);border:1px solid var(--rule);
  padding:26px 20px 30px;
}
@media (min-width:640px){.contact-form{padding:36px 42px 42px}}
.form-block{margin-bottom:28px}
.form-block:last-of-type{margin-bottom:0}
.form-label{
  display:block;font-family:var(--round);font-weight:700;font-size:14.5px;
  color:var(--ink);margin-bottom:12px;
}
.form-label .req,.form-label .opt{
  display:inline-block;font-family:var(--sans);font-weight:700;font-size:10.5px;
  padding:1px 7px;margin-left:8px;vertical-align:2px;
}
.form-label .req{color:#B4432B;background-color:var(--coral-pale);border:1px solid var(--coral)}
.form-label .opt{color:var(--ink-3);font-weight:500;background-color:var(--paper);border:1px solid var(--rule)}

.attr-choices{
  list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:560px){.attr-choices{grid-template-columns:repeat(4,1fr)}}
.attr-choices input{position:absolute;opacity:0;width:1px;height:1px}
.attr-choices label{
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  font-size:12.5px;color:var(--ink-2);background-color:var(--paper);
  border:1.5px solid var(--rule);padding:15px 8px;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,color .15s ease;
}
.attr-choices label svg{width:26px;height:26px}
.attr-choices input:checked + label{
  border-color:var(--green);background-color:var(--leaf-pale);
  color:var(--green-deep);font-weight:700;
}
.attr-choices input:focus-visible + label{outline:3px solid var(--coral);outline-offset:2px}

.field-input,.field-textarea{
  width:100%;padding:12px 12px;font-family:var(--sans);font-size:15px;color:var(--ink);
  background-color:var(--paper);border:1.5px solid var(--rule);border-bottom:2px solid var(--green);
}
.field-input:focus,.field-textarea:focus{outline:none;border-color:var(--green)}
.field-textarea{resize:vertical;min-height:160px;line-height:1.85}
.char-count{
  display:block;text-align:right;font-size:12px;color:var(--ink-3);
  margin-top:6px;font-variant-numeric:tabular-nums;
}

.consent-row{
  display:flex;align-items:flex-start;gap:10px;font-size:13.5px;
  color:var(--ink-2);margin-top:32px;line-height:1.8;
}
.consent-row input{margin-top:4px;flex:none}
.consent-row a{color:var(--green-deep)}

.form-submit{margin-top:28px;text-align:center}
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-alert{
  margin:0 0 26px;padding:12px 14px;color:#8A2E1B;background:var(--coral-pale);
  border-left:4px solid var(--coral);font-size:13.5px;font-weight:700;
}
.field-error{margin:7px 0 0;color:#A43A25;font-size:12.5px;line-height:1.6}
.has-error .field-input,.has-error .field-textarea{border-color:var(--coral)}
.form-fieldset{border:0;padding:0;min-width:0}
.form-fieldset .form-label{padding:0}
.consent-error{margin-left:26px}
.confirm-list{margin:8px 0 30px}
.confirm-list dt{
  margin-top:18px;font-family:var(--round);font-size:13px;font-weight:700;color:var(--green-deep);
}
.confirm-list dd{margin:4px 0 0;padding:0 0 14px;border-bottom:1px dashed var(--rule);font-size:14px;overflow-wrap:anywhere}
.confirm-message{white-space:normal}
.confirm-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.confirm-actions .btn{margin-top:0}
.btn[disabled]{cursor:wait;opacity:.65;transform:none}
.contact-status{
  padding:42px 24px;text-align:center;background:var(--paper-2);border:1px solid var(--rule);
}
.contact-status .sec-label{justify-content:center}
.contact-status p:not(.sec-label){color:var(--ink-2);margin-bottom:28px}
.contact-alt{
  margin-top:40px;padding-top:30px;border-top:1px dashed var(--rule);
  text-align:center;
}
.contact-alt p{font-size:13.5px;color:var(--ink-2);margin:0 0 14px}
.sns-links{list-style:none;display:flex;gap:14px;justify-content:center;margin:0;padding:0}
.sns-links a{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1.5px solid var(--rule-strong,var(--rule));color:var(--green-deep);
  border-radius:50%;
}
.sns-links svg{width:20px;height:20px}

.qr-links{list-style:none;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:0;padding:0}
.qr-links li{display:flex;flex-direction:column;align-items:center;gap:8px}
.qr-link{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none}
.qr-link:hover .qr-label{color:var(--green);text-decoration:underline}
.qr-img{
  width:96px;height:96px;object-fit:contain;background-color:#fff;
  border:1.5px solid var(--rule-strong,var(--rule));border-radius:10px;padding:6px;
}
.qr-label{font-size:12px;font-weight:600;color:var(--ink-2)}