/* Scoped native support form: white surfaces, clear steps, no personal data outside this page. */
.support-contact { color:#17191c; max-width:1260px; margin:auto; }
.support-contact [hidden] { display:none !important; }
/* First paint = the scripted layout: until support-contact.js un-hides them (or DOMContentLoaded at the latest), the inline script of
   inc/fit-contact-support.php marks <html> with .contact-js-pending and the three blocks are shown already, with their own display values (no shift).
   Without JS, or once the class is gone (the confirm / complete steps, a failed script), [hidden] applies as before. */
.contact-js-pending .support-contact [data-support-topics] { display:flex !important; }
.contact-js-pending .support-contact [data-contact-progress] { display:grid !important; }
.contact-js-pending .support-contact [data-contact-form] { display:block !important; }
.support-contact .eyebrow { color:#656b74; margin:0 0 14px; font-size:10px; }
.support-contact .contact-heading { margin:20px 0 46px; }
.support-contact .contact-heading h1 { margin:0 0 20px; font-size:clamp(32px,3.3vw,48px); line-height:1.55; letter-spacing:.01em; font-weight:650; }
.support-contact .contact-heading>p:last-child { color:#666c75; font-size:14px; line-height:1.95; }
.support-contact .contact-layout { display:grid; grid-template-columns:minmax(250px,.72fr) minmax(0,1.5fr); gap:34px; align-items:start; }
.support-contact .contact-sidebar,.support-contact .contact-main { min-width:0; }
.support-contact .contact-guide,.support-contact .contact-card { background:#fff; border:1px solid #e0e3e7; border-radius:22px; padding:clamp(22px,3vw,38px); }
.support-contact .contact-guide { padding:26px; }
.support-contact .contact-guide h2,.support-contact .contact-quick-links h2 { font-size:17px; font-weight:650; letter-spacing:0; line-height:1.65; }
.support-contact .contact-topic-options { display:flex; flex-wrap:wrap; gap:7px; margin:20px 0; }
.support-contact .contact-topic-options button { min-height:42px; padding:9px 13px; border:1px solid #e1e4e8; border-radius:999px; background:#f6f7f8; color:#4c525b; font:inherit; font-size:11px; cursor:pointer; }
.support-contact .contact-topic-options button[aria-pressed="true"] { background:#17191c; border-color:#17191c; color:#fff; }
.support-contact .contact-guidance { margin-top:20px; padding-top:20px; border-top:1px solid #e7e9ec; }
.support-contact .contact-guidance h3 { margin:0 0 12px; font-size:13px; line-height:1.8; font-weight:650; }
.support-contact .contact-guidance ul { padding-left:19px; margin:0; font-size:12px; color:#5c636c; line-height:2; }
.support-contact .contact-guidance-note { margin-top:18px; font-size:11px; color:#727780; }
.support-contact .contact-quick-links { margin:30px 6px; }
.support-contact .contact-quick-links h2 { font-size:14px; margin-bottom:12px; }
.support-contact .contact-quick-links a { display:flex; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid #dfe2e7; font-size:12px; }
.support-contact .contact-reply-note { display:grid; gap:7px; padding:0 6px; color:#6a7078; font-size:11px; line-height:1.9; }
.support-contact .contact-reply-note>span { font-family:Arial,sans-serif; font-size:9px; letter-spacing:.18em; }
.support-contact .contact-reply-note strong { color:#2b3037; font-size:14px; font-weight:600; }
.support-contact .contact-progress { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 30px; padding:0; }
.support-contact .contact-progress li { display:flex; align-items:center; justify-content:center; gap:9px; padding-bottom:16px; border-bottom:2px solid #e7e9ed; font-size:12px; color:#70767f; }
.support-contact .contact-progress li span { font-size:10px; font-family:Arial,sans-serif; }
.support-contact .contact-progress li[aria-current] { border-color:#17191c; color:#17191c; font-weight:700; }
.support-contact .contact-form-heading { margin-bottom:28px; }
.support-contact .contact-form-heading h2,.support-contact .contact-nojs h2 { margin:0 0 12px; font-size:22px; font-weight:650; line-height:1.6; letter-spacing:0; }
.support-contact .contact-form-heading p,.support-contact .contact-nojs p { font-size:12px; line-height:1.9; color:#6a7078; }
.support-contact fieldset { border:0; padding:0; margin:0 0 32px; min-width:0; }
.support-contact legend { display:block; width:100%; padding:0 0 12px; margin:0 0 20px; border-bottom:1px solid #e5e7eb; color:#2d3239; font-size:13px; font-weight:650; }
.support-contact .contact-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; }
.support-contact .contact-field { min-width:0; }
.support-contact .contact-field-wide { grid-column:1/-1; }
.support-contact .contact-field label { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:8px; font-size:12px; font-weight:600; }
.support-contact .contact-requirement { color:#71767e; font-size:9px; font-weight:400; }
.support-contact .contact-field input,.support-contact .contact-field textarea,.support-contact .contact-field select { width:100%; max-width:100%; min-width:0; border:1px solid #d7dce2; border-radius:10px; background:#fafbfc; padding:13px 14px; color:#17191c; font:inherit; font-size:16px; line-height:1.6; }
.support-contact .contact-field textarea { display:block; resize:vertical; min-height:160px; }
.support-contact .contact-field input::placeholder,.support-contact .contact-field textarea::placeholder { color:#6b727d; font-size:13px; opacity:1; }
.support-contact .contact-field [aria-invalid="true"] { border-color:#aa3834; background:#fffafa; }
.support-contact .contact-field-hint { color:#71767e; font-size:11px; line-height:1.8; margin:0 0 10px; }
.support-contact .contact-field-error { color:#a6312d; font-size:11px; line-height:1.75; margin:6px 0 0; }
.support-contact .contact-status { color:#6b3d12; font-size:12px; line-height:1.95; margin:0 0 24px; padding:16px 18px; background:#fff9ee; border:1px solid #ead9bc; border-radius:12px; overflow-wrap:anywhere; }
.support-contact .contact-submit-note { margin:0 0 20px; color:#717781; font-size:11px; line-height:1.9; }
/* Privacy policy note of the confirm step (owner decision H9, page-contacts.php): right under the「この内容で送信する」note, 4px apart
   (the margins collapse: 20px - 16px), so the two notes read as one block above the Turnstile box and the buttons. keep-all: the line
   breaks only after「、」(no <wbr> in the sentence); a phrase wider than the line (very large text) may still break (anywhere).
   The link is underlined as the fallback links below the card, a little darker than the note. */
.support-contact .contact-privacy-note { margin:0 0 20px; color:#717781; font-size:11px; line-height:1.9; word-break:keep-all; overflow-wrap:anywhere; }
.support-contact .contact-submit-note+.contact-privacy-note { margin-top:-16px; }
.support-contact .contact-privacy-note a { color:#363c45; text-decoration:underline; text-underline-offset:4px; }
.support-contact .contact-privacy-note a:hover { color:#17191c; }
/* Its keyboard focus does not use the shared ring below (3px outline, 3px offset): on a link inside a sentence that ring reaches 6px
   to each side and covers half of「、」and「を」. Instead a light fill and a 3px bar under the link, only up and down (no sideways
   reach; #526f91 is 5.2:1 on the white card, 4.3:1 on the fill). The transparent outline is the ring in forced-colours mode, where
   backgrounds and shadows are dropped. Paint only: no layout change on focus. */
.support-contact .contact-privacy-note a:focus-visible { outline:3px solid transparent; outline-offset:0; color:#17191c; background:#e3eaf2; box-shadow:0 -2px #e3eaf2,0 3px #526f91; text-decoration:none; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.support-contact .contact-button { display:flex; justify-content:center; align-items:center; gap:18px; min-height:52px; padding:15px 22px; border:1px solid #17191c; border-radius:12px; font:inherit; font-size:12px; font-weight:600; line-height:1.6; text-align:center; cursor:pointer; width:100%; }
.support-contact .contact-button-primary { background:#17191c; color:#fff; }
.support-contact .contact-button-primary:hover { background:#353a42; }
.support-contact .contact-button-secondary { background:#fff; border-color:#d5d9df; color:#363c45; }
.support-contact .contact-button-secondary:hover { background:#f1f3f5; }
.support-contact button:disabled { opacity:.48; cursor:default; }
.support-contact .contact-actions { display:grid; grid-template-columns:.85fr 1.25fr; gap:12px; }
/* Cloudflare Turnstile (only with CF7 Turnstile keys): widget above the buttons, 65px reserved (normal/flexible height) so the buttons do not jump.
   line-height:0: the widget's iframe is inline; with the card's 28.5px line box it sat on a line 74.5px tall (9.5px jump when it rendered). */
.support-contact .contact-turnstile { margin:0 0 20px; }
.support-contact .contact-turnstile-widget { min-height:65px; line-height:0; }
.support-contact .contact-turnstile[data-state="unavailable"] .contact-turnstile-widget { min-height:0; }
.support-contact .contact-turnstile-hint { margin:10px 0 0; color:#717781; font-size:11px; line-height:1.9; }
.support-contact .contact-turnstile:is([data-state="error"],[data-state="unavailable"]) .contact-turnstile-hint { color:#a6312d; }
.support-contact .contact-summary { margin:0 0 28px; }
.support-contact .contact-summary>div { padding:17px 0; border-bottom:1px solid #e7e9ed; }
.support-contact .contact-summary dt { margin:0 0 7px; font-size:11px; color:#71767e; }
.support-contact .contact-summary dd { margin:0; font-size:14px; line-height:1.95; white-space:pre-wrap; overflow-wrap:anywhere; }
.support-contact .contact-complete { padding:24px 0 10px; text-align:center; }
.support-contact .contact-complete-icon { display:flex; align-items:center; justify-content:center; width:54px; height:54px; margin:0 auto 26px; border-radius:50%; background:#17191c; color:#fff; font-size:25px; }
.support-contact .contact-complete h2 { font-size:clamp(21px,2.1vw,26px); font-weight:650; line-height:1.6; margin:0 0 20px; letter-spacing:0; }
.support-contact .contact-complete>p:not(.eyebrow) { color:#6a7078; font-size:12px; line-height:2; margin:0 0 16px; }
/* Auto-reply note (owner decision G7, page-contacts.php): lines break only at its <br> and the <wbr> between phrases, in every browser
   (keep-all stops breaks inside a phrase); a phrase that alone is wider than the line (very large text) may still break (anywhere). */
.support-contact .contact-complete>p.contact-complete-note { word-break:keep-all; overflow-wrap:anywhere; }
.support-contact .contact-complete .contact-button { margin-top:28px; }
.support-contact .contact-fallback { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin:22px 4px 0; color:#676e77; font-size:11px; }
.support-contact .contact-fallback p,.support-contact .contact-fallback small { flex-basis:100%; }
.support-contact .contact-fallback a { text-decoration:underline; text-underline-offset:4px; }
.support-contact .contact-fallback small { font-size:10px; color:#6d737c; }
.support-contact :is(button,input,select,textarea,a):focus-visible { outline:3px solid #526f91; outline-offset:3px; }
.support-contact :is(h2,.contact-status):focus { outline:none; }
.support-contact .contact-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:900px) {
 .support-contact .contact-layout { grid-template-columns:1fr; gap:24px; }
 .support-contact .contact-sidebar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
 .support-contact .contact-guide { grid-row:span 2; }
 .support-contact .contact-quick-links { margin:0; align-self:end; }
 .support-contact .contact-reply-note { padding:0; }
}
@media(max-width:560px) {
 .support-contact .contact-heading { margin:12px 0 28px; }
 .support-contact .contact-heading h1 { font-size:30px; margin-bottom:16px; }
 .support-contact .contact-heading>p:last-child { font-size:12px; }
 .support-contact .contact-sidebar { display:block; }
 .support-contact .contact-guide { padding:20px; border-radius:18px; }
 .support-contact .contact-guide h2 { font-size:15px; }
 .support-contact .contact-topic-options { gap:5px; margin:16px 0; }
 .support-contact .contact-topic-options button { padding:9px 10px; font-size:10px; }
 .support-contact .contact-guidance { margin-top:16px; padding-top:16px; }
 .support-contact .contact-guidance-note { margin-top:12px; }
 .support-contact .contact-quick-links { margin:22px 4px; }
 .support-contact .contact-quick-links h2 { font-size:12px; }
 .support-contact .contact-quick-links a { padding:9px 0; font-size:11px; }
 .support-contact .contact-reply-note { padding:0 4px; font-size:10px; }
 .support-contact .contact-card { padding:22px 18px; border-radius:18px; }
 .support-contact .contact-progress { gap:9px; margin-bottom:24px; }
 .support-contact .contact-progress li { font-size:11px; gap:7px; padding-bottom:12px; }
 .support-contact .contact-form-heading h2 { font-size:19px; }
 .support-contact .contact-form-heading p { font-size:11px; }
 .support-contact .contact-fields { grid-template-columns:1fr; gap:19px; }
 .support-contact fieldset { margin-bottom:26px; }
 .support-contact .contact-actions { grid-template-columns:1fr; }
 .support-contact .contact-actions .contact-button-primary { grid-row:1; }
 /* Turnstile hint: two lines reserved, so 送信 does not move up when the two-line "pending" text becomes the one-line "ready" text. */
 .support-contact .contact-turnstile-hint { min-height:3.8em; }
 .support-contact .contact-fallback { gap:14px; margin-left:2px; margin-right:2px; }
 .support-contact .contact-status { padding:14px; }
}
@media(prefers-reduced-motion:no-preference) {
 .support-contact button,.support-contact input,.support-contact textarea,.support-contact select { transition:background-color .18s,border-color .18s; }
}