/* Figma 1072:3173. Existing setting.css supplies type, spacing and colors. */
#site-faq .faq-wrap { width: calc(100% - 48px); max-width: 1440px; margin-inline: auto; }
#site-faq :is(h1,h2,p) { margin-bottom: 0; }
#site-faq a { color: inherit; text-decoration: none; }
#site-faq .faq-search input[type="search"] { flex: 1 1 auto; min-width: 0; background: var(--white); color: var(--main-color); }
#site-faq .faq-search input::placeholder { color: var(--main-color); opacity: .8; }
#site-faq .faq-search button { flex: 0 0 176px; }
#site-faq .faq-categories { flex-wrap: wrap; }
#site-faq .faq-categories a { flex: 1 0 170px; border: 1px solid var(--gray-300); color: var(--main-color); white-space: nowrap; }
#site-faq .faq-categories a.is-active { background: var(--main-color); color: var(--white); border-color: var(--main-color); }
#site-faq .faq-item { border: 1px solid var(--gray-200); background: var(--gray-100); }
#site-faq .faq-item[open] { background: var(--white); border-color: var(--sub2-color, var(--sub-color)); }
#site-faq .faq-item summary { display: grid; grid-template-columns: 32px 140px minmax(0,1fr) 24px; align-items: center; gap: 20px; cursor: pointer; list-style: none; }
#site-faq .faq-item summary::-webkit-details-marker { display: none; }
#site-faq .faq-number,
#site-faq .faq-toggle { color: var(--sub2-color, var(--sub-color)); }
#site-faq .faq-toggle { text-align: center; }
#site-faq .faq-toggle::before { content: '+'; }
#site-faq .faq-item[open] .faq-toggle::before { content: '×'; }
#site-faq .faq-question,
#site-faq .faq-answer { overflow-wrap: anywhere; word-break: keep-all; }
#site-faq .faq-answer { padding-left: 52px; }
#site-faq .faq-contact a { flex-shrink: 0; min-width: 328px; }
#site-faq :is(a,button,input,summary):focus-visible { outline: 3px solid var(--sub2-color, var(--sub-color)); outline-offset: 4px; }
#site-faq [hidden] { display: none !important; }
@media (max-width: 767px) {
    #site-faq .faq-wrap { width: calc(100% - 40px); }
    #site-faq .faq-search { gap: 8px; }
    #site-faq .faq-search button { flex-basis: 68px; padding-inline: 12px; }
    #site-faq .faq-categories a { flex: 1 0 calc(50% - 12px); padding: 12px; }
    #site-faq .faq-result { flex-direction: column; align-items: flex-start !important; gap: 8px; }
    #site-faq .faq-item summary { grid-template-columns: 24px minmax(0,1fr) 20px; gap: 8px 12px; }
    #site-faq .faq-number { grid-column: 1; grid-row: 1; }
    #site-faq .faq-group { grid-column: 2; grid-row: 1; }
    #site-faq .faq-question { grid-column: 1 / 3; grid-row: 2; }
    #site-faq .faq-toggle { grid-column: 3; grid-row: 1 / 3; }
    #site-faq .faq-answer { padding-left: 0; }
    #site-faq .faq-contact { flex-direction: column; }
    #site-faq .faq-contact a { min-width: 0; }
}

/* Keep legacy footer containers within narrow FAQ viewports. */
@media (max-width: 767px) {
    #site-faq ~ #footer02 .u-fluid { min-width: 0; max-width: 100%; }
    #site-faq ~ #footer02 .u-fluid > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
}