@charset "utf-8";
@import url("https://www.jsp21.co.jp/form/nnm_utf8/mfp.statics/mailformpro.css");

#mailformpro { font-size: 14px;}

/* 項目名 */
#mailformpro > p {
	margin: 0 0 5px;
    font-weight: bold;}

/* 必須 */
#mailformpro .reqmk {
	display: inline-block;
	margin: 0 0 0 10px; padding: 2px;
	border: solid 1px #C74A4C;
	color: #C74A4C; font-weight: bold;}

/* 入力欄（基本） */
#mailformpro input:not([type="file"]),
#mailformpro textarea,
#mailformpro select {
	box-sizing: border-box; padding: 8px;
	border: solid 1px #ccc; border-radius: 3px;
	color: #000; font-size: 16px;}

/* 入力欄（幅） */
#mailformpro input[type="text"],
#mailformpro input[type="email"],
#mailformpro input[type="tel"],
#mailformpro textarea { width: 100%;}

/* 入力欄（高） */
#mailformpro input[type="text"],
#mailformpro input[type="email"],
#mailformpro input[type="tel"],
#mailformpro select { height: 34px;}

/* 郵便番号（select） */
#mailformpro #zip { width: auto;}

/* ラジオボタン・チェックボックス */
#mailformpro input[type="radio"],
#mailformpro input[type="checkbox"] { 
    width: 16px; height: 16px; margin: 0 5px 0 0; padding: 0; 
    vertical-align: middle;}

#mailformpro label:has(input[type="radio"]),
#mailformpro label:has(input[type="checkbox"]) { 
    display: inline-block;
    margin: 0 20px 10px 0;}

/* 送信ボタン */
#mailformpro input[type="submit"],
#mailformpro input[type="button"]{
    height: auto; padding: 10px 15px; 
    border-color: #767676;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.4s;}
    
#mailformpro input[type="submit"]:hover,
#mailformpro input[type="button"]:hover { opacity: 0.5;}


/* 欄内の入力例 */
#mailformpro input::placeholder,
#mailformpro textarea::placeholder,
#mailformpro select::placeholder { color: #888;}

/* 入力欄下のテキスト */
#mailformpro input ~ p,
#mailformpro textarea ~ p { color: #737373; line-height: 1.5em;}

/* 添付ファイル */
#mailformpro input[type="file"] {
    max-width: 280px; padding: 10px;
	border: solid 1px #ccc; border-radius: 3px;
	background: #eee;}

/* 添付ファイルサムネイル用 */
#mailformpro div.mfp_attached_thumbnails li { display: inline-block; float: none; vertical-align: middle;}

#mailformpro div.mfp_attached_thumbnails img { max-width: 100px;}

/* 添付ファイルリセット用 */
button.mfp_attached_reset { margin: 10px 0 0;}

/* 添付ファイル下のテキスト */
#mailformpro input[type="file"] ~ p { position: relative; margin: 5px 0; padding: 0 0 0 18px;}
#mailformpro input[type="file"] ~ p::before {content:'※'; position: absolute; top: 0; left: 0;}

@media screen and (max-width:767px){
    #mailformpro p.pc { display: none;}
}

/* 入力欄（必須） */
*[required],
.required {background: rgba(255, 221, 221, 0.7);}

/* 入力欄（入力不可） */
*[required].dealed,
.required.dealed { background: rgba(223, 240, 216, 1);}

/*--オートコンプリート用--*/
input:-webkit-autofill {box-shadow: 0 0 0px 1000px rgba(223, 240, 216, 1) inset;}


/* 入力欄（表示専用） */
*[readonly] {
	cursor: not-allowed;
	background-color: #eee;
}

/* 入力エラー */
div.mfp_err {
	padding-left: 0;
    background: none;
}


/* LastUp2025.09.17_kimata */