@charset "UTF-8";

/* 基本設定 */
:root {
	--mfp-required-color: #C00;
	--mfp-optional-color: #06C;
	--mfp-error-color: #F00;
	--mfp-border-color: #CCC;
	--mfp-focus-color: #0068B7;
	--mfp-bg-light: #F6F7F9;
}

form#mailformpro,
form#mailformpro * {
	box-sizing: border-box;
}

/* フォーム全体 */
form#mailformpro {
	padding: 10px 0;
}

/* フォームレイアウト (Gridシステム) */
form#mailformpro dl.mailform {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 1rem 0.5rem;
	border-top: 1px solid var(--mfp-border-color);
	padding-top: 1rem;
}

form#mailformpro dl dt,
form#mailformpro dl dd {
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

form#mailformpro dl dt {
	grid-column: 1 / 2;
	justify-content: flex-end;
	text-align: right;
	padding-right: 1rem;
	font-size: 14px;
	font-weight: bold;
}

form#mailformpro dl dd {
	grid-column: 2 / 3;
}

/* 必須・任意ラベル */
.must, .optionally {
	display: inline-block;
	padding: 2px 8px;
	font-size: 12px;
	color: #FFF;
	border-radius: 4px;
	margin-right: 8px;
}
.must { background-color: var(--mfp-required-color); }
.optionally { background-color: var(--mfp-optional-color); }


/* 入力要素のスタイル */
.mfp_element_all {
	max-width: 100%;
}
.mfp_element_text,
.mfp_element_number,
.mfp_element_select-one,
.mfp_element_email,
.mfp_element_tel,
.mfp_element_textarea,
.mfp_element_date,
.mfp_element_password {
	border: 1px solid var(--mfp-border-color);
	border-radius: 4px;
	padding: 8px 10px;
	font-size: 16px;
	width: 100%;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.mfp_element_text:focus,
.mfp_element_number:focus,
.mfp_element_select-one:focus,
.mfp_element_email:focus,
.mfp_element_tel:focus,
.mfp_element_textarea:focus,
.mfp_element_date:focus,
.mfp_element_password:focus {
	outline: none;
	border-color: var(--mfp-focus-color);
	box-shadow: 0 0 5px rgba(0, 104, 183, 0.5);
}
.mfp_element_textarea {
	min-height: 120px;
}
.mfp_element_checkbox,
.mfp_element_radio {
	margin-right: 5px;
	vertical-align: middle;
}
form#mailformpro label {
	display: inline-flex;
	align-items: center;
	margin-right: 15px;
	cursor: pointer;
}

/* 複数カラム入力欄 (名前など) */
.mfp_rows {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
}
.mfp_rows > div {
	flex: 1;
	min-width: 150px;
}

/* 送信ボタン */
div.mfp_buttons {
	clear: both;
	padding: 20px 0;
	text-align: center;
	border-top: 1px solid var(--mfp-border-color);
	margin-top: 1rem;
}
.mfp_element_submit {
	border-radius: 5px;
	padding: 12px 30px;
	border: none;
	background: var(--mfp-focus-color);
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.mfp_element_submit:hover {
	opacity: 0.8;
}

/* エラー表示 */
div.mfp_err {
	clear: both;
	display: none;
	text-align: left;
	margin: 5px 0 0 0;
	padding: 5px 0 5px 20px;
	color: var(--mfp-error-color);
	font-size: 12px;
	background: url(_images/mfp_error.gif) no-repeat left center;
	width: 100%;
}
.mfp_parent_error {
	border: 2px solid var(--mfp-error-color) !important;
	background-color: #fff8f8;
}
div#mfp_error {
	background-color: #fee;
	border: 1px solid var(--mfp-error-color);
	padding: 15px;
	display: none;
	border-radius: 5px;
	margin-bottom: 1rem;
}
div#mfp_error p {
	padding: 0;
	margin: 0;
	font-size: 14px;
	text-align: center;
}
div#mfp_error p strong {
	font-size: 18px;
	color: var(--mfp-error-color);
}

/* 確認画面 */
table#mfp_confirm_table {
	border-collapse: collapse;
	width: 100%;
	font-size: 14px;
}
table#mfp_confirm_table tr.mfp_colored { background-color: var(--mfp-bg-light); }
table#mfp_confirm_table tr th,
table#mfp_confirm_table tr td {
	text-align: left;
	border-top: 1px solid var(--mfp-border-color);
	padding: 15px 10px;
	vertical-align: top;
}
table#mfp_confirm_table tr th {
	font-weight: bold;
	width: 200px;
}
table#mfp_confirm_table tr td {
	line-height: 1.6;
	word-break: break-all;
}


/* レスポンシブ設定 (スマートフォン向け) */
@media screen and (max-width: 800px) {
	form#mailformpro dl.mailform {
		grid-template-columns: 1fr; /* 1カラムレイアウト */
		gap: 0;
		border-top: none;
	}

	form#mailformpro dl dt {
		grid-column: 1 / -1;
		justify-content: flex-start;
		text-align: left;
		padding: 10px 5px 5px 5px;
		border-top: 1px solid #eee;
	}
	form#mailformpro dl.mailform > dt:first-of-type {
		border-top: none;
	}

	form#mailformpro dl dd {
		grid-column: 1 / -1;
		padding: 5px;
	}

	.mfp_element_text,
	.mfp_element_number,
	.mfp_element_email,
	.mfp_element_tel,
	.mfp_element_textarea,
	.mfp_element_date,
	.mfp_element_password,
	.mfp_element_select-one {
		width: 100%; /* 親要素の幅に合わせる */
		font-size: 16px;
	}
	
	/* 確認画面テーブル */
	table#mfp_confirm_table tr th,
	table#mfp_confirm_table tr td {
		display: block;
		width: 100%;
		border-top: none;
	}
	table#mfp_confirm_table tr th {
		padding: 10px 10px 5px;
		background-color: var(--mfp-bg-light);
	}
	table#mfp_confirm_table tr td {
		padding: 5px 10px 10px;
		border-bottom: 1px solid var(--mfp-border-color);
	}
}