/* SUFFIX 公開フォーム専用 CSS v1.56.3
 * 対象: input / confirm / complete
 * 既存サイトの wrapper CSSを尊重し、不足するフォーム部品だけを補完する。
 */
.cf-form .field { margin-bottom: 20px; }
.cf-form .field label { display: block; font-weight: bold; margin-bottom: 6px; }
.cf-form .field .req, .cf-form .c-field__req { color: #dc2626; font-size: 12px; margin-left: 6px; }
.cf-form .c-field { margin-bottom: 20px; }
.cf-form .c-field__label { display: block; font-weight: bold; margin-bottom: 6px; }
.cf-form input[type=text], .cf-form input[type=email], .cf-form input[type=tel],
.cf-form input[type=url], .cf-form input[type=number], .cf-form input[type=date],
.cf-form textarea, .cf-form select {
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: inherit; font-size: 15px;
}
.cf-form textarea { min-height: 120px; }
.cf-form .c-field__name { display: flex; gap: 8px; }
.cf-form .c-field__zip { max-width: 160px; }
.cf-form .c-field__zip-btn { margin-left: 8px; padding: 8px 14px; cursor: pointer; }
.cf-form .c-field__error { color: #dc2626; font-size: 13px; margin: 4px 0 0; }
.cf-form .c-field__help, .cf-form .field .help { font-size: 13px; color: #666; margin-top: 4px; }
.cf-form .steps { display: flex; gap: 8px; margin: 16px 0 24px; font-size: 13px; justify-content: center; }
.cf-form .steps span { padding: 4px 12px; border-radius: 16px; background: #eee; color: #888; }
.cf-form .steps span.active { background: #111; color: #fff; }
.cf-form .errors { background: #fee2e2; border: 1px solid #dc2626; color: #991b1b; padding: 12px; border-radius: 4px; margin-bottom: 20px; }
.cf-form .errors ul { margin: 0; padding-left: 20px; }
.cf-form .btn { display: inline-block; min-width: 220px; padding: 14px 32px; background: #000; color: #fff; border: 1px solid #000; border-radius: 0; font-size: 16px; font-weight: 700; line-height: 1.5; text-align: center; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.cf-form .btn:hover, .cf-form .btn:focus-visible { background: #222; border-color: #222; }
.cf-form .btn-secondary { background: #444; border-color: #444; }
.cf-form .btn-secondary:hover, .cf-form .btn-secondary:focus-visible { background: #666; border-color: #666; }
.cf-form .btn-row { display: flex; gap: 12px; margin-top: 24px; justify-content: center; }
.cf-form .confirm-table { width: 100%; border-collapse: collapse; margin: 16px 0; table-layout: fixed; }
.cf-form .confirm-table th, .cf-form .confirm-table td { border: 1px solid #ddd; padding: 10px; text-align: left; vertical-align: top; word-break: break-word; overflow-wrap: anywhere; }
.cf-form .confirm-table th { background: #f5f5f5; width: 30%; }
.cf-form .hp { position: absolute; left: -9999px; }
.cf-form .complete-box { background: #f5f5f5; border: 1px solid #444; padding: 20px; border-radius: 0; }
.cf-form .confirmation_btn { background: #000; color: #fff; border: 1px solid #000; border-radius: 0; }
.cf-form .confirmation_btn:hover, .cf-form .confirmation_btn:focus-visible { background: #222; border-color: #222; }
@media (max-width: 767px) {
    .cf-form .btn { width: 100%; min-width: 0; }
    .cf-form .btn-row { flex-direction: column; }
    .cf-form .btn-row form { width: 100%; }
}

/* SUFFIX入力画面固有 */
/* フォーム項目間の余白を圧縮（現行 default.min.css の 50px を legacy では 25px に） */
.contactdetail__box .contactdetail__list { margin-bottom: 25px; }
/* 導入文は既存サイトの contactdetail__caption に揃え、ここでは上書きしない。 */
/* お名前: 姓/名を左右2カラムに */
.contactdetail__item--nameSplit { display: flex; gap: 12px; }
.contactdetail__item--nameSplit > .contactdetail__item--inputText { flex: 1 1 0; min-width: 0; }
@media (max-width: 767px) { .contactdetail__item--nameSplit { gap: 8px; } }
/* エラー時の赤枠（現行の入力欄赤枠に寄せる） */
.contactdetail__list.is-error .contactdetail__item--inputText,
.contactdetail__list.is-error textarea,
.contactdetail--agreement.is-error { outline: 2px solid #d00; outline-offset: 1px; }
/* 添付ファイルの D&D ドロップゾーン */
.contactdetail__item--dropzone {
    border: 2px dashed #b8b8b8; border-radius: 4px; background: #fafafa;
    padding: 24px; text-align: center; cursor: pointer; transition: background .15s, border-color .15s;
}
.contactdetail__item--dropzone.is-dragover { border-color: #333; background: #f0f0f0; }
.contactdetail__item--dropzoneText { margin: 0; color: #555; line-height: 1.7; }
.contactdetail__item--dropzoneBtn { display: inline-block; background: #1a1a1a; color: #fff; padding: 6px 18px; border-radius: 2px; }
.contactdetail__item--uploadedFiles {
    display: none;
    margin: 14px 0 0;
    padding: 0;
    border: 1px solid #b8b8b8;
    background: #fff;
    list-style: none;
}
.contactdetail__item--uploadedFiles:not(:empty) { display: block; }
.contactdetail__item--uploadedFile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border-bottom: 1px solid #ddd;
}
.contactdetail__item--uploadedFile:last-child { border-bottom: 0; }
.contactdetail__item--uploadedFileInfo { min-width: 0; }
.contactdetail__item--uploadedStatus {
    display: block;
    margin-bottom: 3px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}
.contactdetail__item--uploadedName {
    display: block;
    overflow-wrap: anywhere;
    font-weight: 700;
}
.contactdetail__item--fileDelete {
    flex: 0 0 auto;
    min-width: 76px;
    padding: 8px 14px;
    border: 1px solid #333;
    border-radius: 0;
    background: #fff;
    color: #111;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}
.contactdetail__item--fileDelete:hover,
.contactdetail__item--fileDelete:focus-visible {
    background: #333;
    color: #fff;
}
/* ご用件: 横並びのチェックボックス。補足欄は選択時のみ表示。 */
.contactdetail__checkboxGroupOptions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 46px; }
.contactdetail__checkboxGroupLabel { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.contactdetail__checkboxGroupNotes { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 24px; }
.contactdetail__checkboxGroupNotes [hidden] { display: none !important; }
.contactdetail__checkboxGroupNotes .contactdetail__item--groupNote { width: 300px; max-width: 100%; }
@media (max-width: 767px) {
    .contactdetail__checkboxGroupOptions { gap: 14px 24px; }
    .contactdetail__checkboxGroupNotes .contactdetail__item--groupNote { width: 100%; }
}
/* 郵便番号: 入力欄とボタンを横並びに（現行サイト共通CSSでは縦並び。ユーザビリティのため上書き） */
.contactdetail__list .contactdetail__item--inputTextZipcode { width: auto; max-width: 180px; display: inline-block; vertical-align: middle; }
.contactdetail__list .contactdetail__btn--zipCode { display: inline-block; vertical-align: middle; margin-left: 8px; margin-top: 0; }
.contactdetail__list .contactdetail__item--zipMsg { display: inline-block; vertical-align: middle; margin-left: 12px; }
@media (max-width: 767px) {
    .contactdetail__list .contactdetail__item--inputTextZipcode { max-width: 160px; }
    .contactdetail__list .contactdetail__btn--zipCode { margin-left: 6px; }
    .contactdetail__list .contactdetail__item--zipMsg { display: block; margin: 6px 0 0; }
}

/* ネイティブfile inputはD&D UIから操作する。 */
#scfile {
    display: none;
}