/* Flexible Mail Forms public styles. */

.fmf-form { box-sizing: border-box; width: 100%; }
.fmf-form .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.fmf-field { margin: 0 0 24px; padding: 0; border: 0; }
.fmf-field__label { display: block; margin-bottom: 8px; font-weight: 700; }
.fmf-required { display: inline-block; margin-left: 0.55em; padding: 0.2em 0.55em; border-radius: 999px; color: #fff; background: #b32d2e; font-size: 0; font-weight: 700; line-height: 1.2; vertical-align: 0.12em; white-space: nowrap; }
.fmf-required::before { content: "必須"; font-size: 12px; letter-spacing: 0.04em; }
.fmf-field__error { color: #b32d2e; }
.fmf-field--error input[type="text"], .fmf-field--error input[type="email"], .fmf-field--error input[type="tel"], .fmf-field--error input[type="file"], .fmf-field--error select, .fmf-field--error textarea { border-color: #b32d2e; }
.fmf-field input[type="text"], .fmf-field input[type="email"], .fmf-field input[type="tel"], .fmf-field input[type="file"], .fmf-field select, .fmf-field textarea { box-sizing: border-box; width: 100%; max-width: 100%; padding: 10px 12px; border: 1px solid #8c8f94; border-radius: 3px; background: #fff; font: inherit; }
.fmf-field input:focus, .fmf-field select:focus, .fmf-field textarea:focus, .fmf-button:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.fmf-field textarea { resize: vertical; }
.fmf-field__description, .fmf-heading-description, .fmf-field__availability, .fmf-file-rules, .fmf-file-replace-note { margin: 8px 0 0; color: #646970; font-size: 0.92em; }
.fmf-field__error { margin: 8px 0 0; font-weight: 700; }
.fmf-heading { margin: 32px 0 8px; }
.fmf-heading:first-child { margin-top: 0; }
.fmf-description { margin: 0 0 24px; }
.fmf-choice-list { display: grid; gap: 8px; }
.fmf-choice { display: flex; align-items: flex-start; gap: 8px; }
.fmf-choice input { margin-top: 0.25em; }
.fmf-retained-file { margin-top: 12px; padding: 12px 14px; border: 1px solid #c3c4c7; border-radius: 3px; background: #f6f7f7; }
.fmf-retained-file p { margin: 0 0 8px; }
.fmf-retained-file p:last-child { margin-bottom: 0; }
.fmf-notice, .fmf-development-note, .fmf-error-summary { padding: 12px 16px; border-left: 4px solid #dba617; background: #fff8e5; }
.fmf-error-summary { margin: 0 0 24px; border-left-color: #b32d2e; background: #fcf0f1; }
.fmf-error-summary__title { margin: 0 0 8px; font-weight: 700; }
.fmf-error-summary ul { margin: 0; padding-left: 1.5em; }
.fmf-development-note { margin-top: 24px; }
.fmf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fmf-button { box-sizing: border-box; min-height: 44px; padding: 10px 20px; border: 1px solid #2271b1; border-radius: 3px; cursor: pointer; font: inherit; font-weight: 700; }
.fmf-button--primary { color: #fff; background: #2271b1; }
.fmf-button--secondary { color: #2271b1; background: #fff; }
.fmf-button[disabled] { cursor: wait; opacity: 0.65; }

.fmf-section { box-sizing: border-box; margin: 0 0 28px; padding: 20px 22px 0; border: 1px solid #c3c4c7; border-radius: 3px; }
.fmf-section__title { margin: 0 0 10px; padding: 0 0 10px; border-bottom: 2px solid currentColor; font-size: 1.2em; }
.fmf-section__description { margin: 0 0 18px; color: #50575e; line-height: 1.7; }
.fmf-section__fields > .fmf-heading:first-child { margin-top: 0; }
.fmf-section__fields > .fmf-field:last-child, .fmf-section__fields > .fmf-description:last-child { margin-bottom: 20px; }

.fmf-confirmation__title { margin-top: 0; }
.fmf-confirmation__lead { margin-bottom: 24px; }
.fmf-confirmation__groups { display: grid; gap: 24px; }
.fmf-confirmation__list { margin: 0; border-top: 1px solid #dcdcde; }
.fmf-confirmation__row { display: grid; grid-template-columns: minmax(160px, 30%) 1fr; border-bottom: 1px solid #dcdcde; }
.fmf-confirmation__row dt, .fmf-confirmation__row dd { box-sizing: border-box; margin: 0; padding: 14px 16px; }
.fmf-confirmation__row dt { font-weight: 700; background: #f6f7f7; }
.fmf-confirmation-section { box-sizing: border-box; padding: 20px 22px; border: 1px solid #c3c4c7; border-radius: 3px; }
.fmf-confirmation-section__title { margin: 0 0 10px; padding: 0 0 10px; border-bottom: 2px solid currentColor; font-size: 1.15em; }
.fmf-confirmation-section__description { margin: 0 0 18px; color: #50575e; line-height: 1.7; }

.fmf-availability, .fmf-admin-preview { box-sizing: border-box; margin: 0 0 20px; padding: 16px 18px; border-left: 4px solid #8c8f94; background: #f6f7f7; }
.fmf-availability--before { border-left-color: #dba617; background: #fff8e5; }
.fmf-availability--after { border-left-color: #646970; background: #f0f0f1; }
.fmf-availability--invalid { border-left-color: #b32d2e; background: #fcf0f1; }
.fmf-availability__message { line-height: 1.8; }
.fmf-admin-preview { border-left-color: #2271b1; background: #f0f6fc; }

.fmf-completion { box-sizing: border-box; padding: 28px; border: 1px solid #9ec5a5; border-radius: 4px; background: #f0f8f1; }
.fmf-completion__title { margin: 0 0 12px; }
.fmf-completion__message { line-height: 1.8; }

@media (max-width: 640px) {
    .fmf-section, .fmf-confirmation-section { padding: 16px 14px 0; }
    .fmf-confirmation-section { padding-bottom: 16px; }
    .fmf-confirmation__row { display: block; }
    .fmf-confirmation__row dt, .fmf-confirmation__row dd { padding: 12px; }
    .fmf-actions .fmf-button { width: 100%; }
}
