@charset "utf-8";
/* CSS Document */
/* -------------------------------------------
   業者専用フォーム UI向上スタイル（修正版）
------------------------------------------- */
.vendor-form {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
}

/* 必須マーク */
.vendor-form .required {
    background: #e60012;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
    font-weight: normal;
    white-space: nowrap; /* 必須バッジ自体の改行を防ぐ */
}

/* 行のレイアウト（デスクトップ） */
.form-row {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #ddd;
    margin: 0;
}
.form-row:last-of-type {
    border-bottom: 1px solid #ddd;
}

/* 左側：ラベル部分（幅を38%に拡大） */
.form-row dt {
    width: 38%; 
    background: #f9fbfd;
    padding: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    line-height: 1.4;
    white-space: nowrap; /* 文字の折り返しを禁止 */
}

/* 右側：入力エリア */
.form-row dd {
    width: 62%;
    margin: 0;
    padding: 15px 20px;
    box-sizing: border-box;
}

/* 入力フォーム装飾 */
.vendor-form input[type="text"],
.vendor-form input[type="email"],
.vendor-form input[type="tel"],
.vendor-form select,
.vendor-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

/* 添付ファイル欄の調整 */
.vendor-form input[type="file"] {
    font-size: 14px;
}

/* 送信ボタン */
.form-submit {
    text-align: center;
    margin-top: 40px;
}
.form-submit input[type="submit"] {
    background: #0073aa;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 18px 60px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
		font-family: YakuHanJP_Narrow,  "Noto Sans JP","Murecho", serif, sans-serif;
}

/* スマホ用（画面幅767px以下） */
@media screen and (max-width: 767px) {
    .form-row dt {
        width: 100%;
        white-space: normal; /* スマホでは折り返しを許可 */
        background: #f9fbfd;
        padding: 10px 15px;
    }
    .form-row dd {
        width: 100%;
        padding: 10px 15px 20px;
    }
}

/* -------------------------------------------
   エラーメッセージ（下部）のスタイル
------------------------------------------- */
/* 入力内容に問題があります... のボックス */
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-acceptance-missing {
    border: 2px solid #f5c2c7 !important; /* 控えめな赤色のボーダー */
    background-color: #fff5f5 !important; /* 非常に薄い赤の背景色 */
    color: #842029 !important;           /* 文字色も落ち着いた赤に */
    margin: 20px 0 0 !important;
    padding: 15px !important;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}

/* スピンローダー（送信中アイコン）の位置調整（必要に応じて） */
.wpcf7-spinner {
    display: block;
    margin: 10px auto 0;
}


.wpcf7 form .wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 0.5em 1em !important;
    border: 2px solid #ff717c !important;
    text-align: center;
}

/* -------------------------------------------
   ラベル部分（dt）のレイアウト修正
------------------------------------------- */
.form-row dt {
    width: 38%; 
    background: #f9fbfd;
    padding: 20px;
    font-weight: bold;
    display: flex;
    flex-direction: row;    /* 横並びにする */
    align-items: center;    /* 垂直方向中央揃え */
    flex-wrap: wrap;        /* 幅が狭い場合は適宜ラップを許可 */
    box-sizing: border-box;
    line-height: 1.4;
    white-space: nowrap;    /* デスクトップでは改行させない */
}

/* -------------------------------------------
   注釈（※5MBまで）の青枠スタイル
------------------------------------------- */
.vendor-form .file-note {
    display: inline-block;
    margin-left: 12px;       /* 項目名との間隔 */
    padding: 4px 6px;       /* 「必須」と同じ余白 */
    border: 1px solid #0073aa; /* 青い1pxの線 */
    color: #0073aa;         /* 文字色も青に */
    background: #fff;       /* 背景は白 */
    font-size: 14px;        /* 「必須」と同じサイズ */
    border-radius: 3px;     /* 「必須」と同じ角丸 */
    font-weight: normal;
    line-height: 1;         /* 高さを詰める */
    vertical-align: middle;
}

/* 必須バッジの微調整（file-noteと揃えるため） */
.vendor-form .required {
    display: inline-block;
    background: #e60012;
    color: #fff;
    font-size: 11px;
    padding: 3px 6px;       /* 線がない分、少しだけ調整 */
    border-radius: 3px;
    margin-left: 8px;
    vertical-align: middle;
    font-weight: normal;
    line-height: 1;
}

/* スマホ用（画面幅767px以下） */
@media screen and (max-width: 767px) {
    .form-row dt {
        width: 100%;
        white-space: normal;
        padding: 15px;
    }
}

/* 送信中のスピナー（ぐるぐる）を完全に非表示にする */
.wpcf7-spinner {
    display: none !important;
}