@charset "UTF-8";

* {
	font-family: "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Yu Gothic", "游ゴシック", "Meiryo", "メイリオ", sans-serif;
	box-sizing: border-box;
}

body {
	background: linear-gradient(135deg, #faf9f7 0%, #ffffff 100%);
	margin: 0;
	padding: 20px;
	text-align: center;
	min-height: 100vh;
}

div#wrapper {
	padding: 0;
	width: 800px;
	max-width: 100%;
	text-align: left;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	border: 1px solid rgba(212, 175, 55, 0.1);
}

div#wrapper div#header {
	background: linear-gradient(135deg, #d4af37 0%, #f4e4bc 100%);
	color: #2c2c2c;
	padding: 50px 40px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

div#wrapper div#header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(212, 175, 55, 0.95) 0%, rgba(244, 228, 188, 0.95) 100%);
	z-index: 1;
}

div#wrapper div#header::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	z-index: 2;
	animation: shimmer 8s ease-in-out infinite;
}

@keyframes shimmer {
	0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
	50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

div#wrapper div#header h1,
div#wrapper div#header p {
	position: relative;
	z-index: 3;
}

div#wrapper div#header h1 {
	font-size: 32px;
	padding: 0;
	margin: 0 0 15px 0;
	line-height: 1.2;
	font-weight: 700;
	color: #2c2c2c;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
	letter-spacing: 0.5px;
}

div#wrapper div#header p {
	font-size: 16px;
	margin: 0;
	padding: 0;
	color: #4a4a4a;
	line-height: 1.6;
	font-weight: 400;
}

div#wrapper div#footer {
	text-align: center;
	padding: 20px;
	background: #faf9f7;
	border-top: 1px solid #e8e6e0;
}

div#wrapper div#footer p {
	font-size: 12px;
	color: #8a8a8a;
	margin: 0;
}

div#wrapper table {
	border-spacing: 0px;
	border-collapse: collapse;
}

div#wrapper table tr th,div#wrapper table tr td {
	background: #FFF;
	font-size: 12px;
	padding: 5px 10px;
	border: solid 1px #CCC;
}

div#wrapper div#container {
	margin: 0;
	border: none;
	background: #FFF;
	padding: 50px 40px;
	border-radius: 0;
	position: relative;
}

div#wrapper div#container form#mailformpro dl dt {
	float: none;
	width: auto;
	clear: both;
	font-size: 16px;
	padding: 0 0 8px 0;
	text-align: left;
	border-top: none;
	margin: 25px 0 0 0;
	font-weight: 600;
	color: #2c2c2c;
}

div#wrapper div#container form#mailformpro dl dt:first-child {
	margin-top: 0;
}

div#wrapper div#container form#mailformpro dl dt,
div#wrapper div#container form#mailformpro dl dt span {
	vertical-align: middle;
	line-height: 1.5;
}

div#wrapper div#container form#mailformpro dl dt span {
	margin-top: 0;
}

div#wrapper div#container form#mailformpro dl dd {
	border: none;
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
}

.mfp_rows {
	clear: both;
}

.mfp_rows:after {
	content: "";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}

.mfp_rows input[type="text"],
.mfp_rows input[type="email"],
.mfp_rows input[type="tel"],
.mfp_rows input[type="number"],
.mfp_rows input[type="date"],
.mfp_rows input[type="file"],
.mfp_rows select,
.mfp_rows button,
form#mailformpro .mfp_rows label {
	width: 100%;
	min-width: 100%;
	word-break: break-all;
	white-space: normal;
}

.mfp_rows textarea {
	width: 100%;
	min-width: 100%;
}

.mfp_rows .mfp_col1,.mfp_rows .mfp_col2,.mfp_rows .mfp_col3,.mfp_rows .mfp_col4,.mfp_rows .mfp_col5,.mfp_rows .mfp_col6,.mfp_rows .mfp_col7,.mfp_rows .mfp_col8,.mfp_rows .mfp_col9,.mfp_rows .mfp_col10,.mfp_rows .mfp_col25 {
	float: left;
	padding: 0 1.5%;
}

.mfp_rows .mfp_col1 {width: 10%;}
.mfp_rows .mfp_col2 {width: 20%;}
.mfp_rows .mfp_col3 {width: 30%;}
.mfp_rows .mfp_col4 {width: 40%;}
.mfp_rows .mfp_col5 {width: 50%;}
.mfp_rows .mfp_col6 {width: 60%;}
.mfp_rows .mfp_col7 {width: 70%;}
.mfp_rows .mfp_col8 {width: 80%;}
.mfp_rows .mfp_col9 {width: 90%;}
.mfp_rows .mfp_col10 {width: 100%;}
.mfp_rows .mfp_col25 {width: 25%;}

/* フォーム要素のスタイル */
.mfp_element_text,
.mfp_element_email,
.mfp_element_tel,
.mfp_element_textarea {
	border: 2px solid #e8e6e0;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	padding: 12px 16px;
	margin: 5px 0;
	vertical-align: middle;
	font-size: 16px;
	transition: all 0.3s ease;
	background: #ffffff;
}

.mfp_element_text:focus,
.mfp_element_email:focus,
.mfp_element_tel:focus,
.mfp_element_textarea:focus {
	border-color: #d4af37;
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
	outline: none;
	background: #ffffff;
}

.mfp_element_textarea {
	min-height: 120px;
	resize: vertical;
	font-family: inherit;
	line-height: 1.5;
}

/* 必須マークのスタイル */
.must {
	display: inline-block;
	background: linear-gradient(135deg, #d4af37, #b8941f);
	border: none;
	text-shadow: none;
	padding: 4px 8px;
	font-size: 11px;
	color: #FFF;
	margin-right: 8px;
	border-radius: 4px;
	font-weight: 600;
	box-shadow: 0 2px 4px rgba(212, 175, 55, 0.3);
}

/* チェックボックスのスタイル */
.mfp_rows label {
	display: flex;
	align-items: center;
	padding: 15px;
	border: 2px solid #e8e6e0;
	border-radius: 8px;
	background: #faf9f7;
	margin: 5px 0;
	cursor: pointer;
	transition: all 0.3s ease;
}

.mfp_rows label:hover {
	border-color: #d4af37;
	background: #fefcf8;
}

.mfp_rows input[type="checkbox"] {
	width: auto;
	margin-right: 12px;
	transform: scale(1.2);
}

/* 送信ボタンのスタイル */
.mfp_buttons {
	clear: both;
	padding: 30px 0 0 0;
	text-align: center;
}

.mfp_buttons button {
	background: linear-gradient(135deg, #d4af37 0%, #f4e4bc 100%);
	border: none;
	border-radius: 8px;
	padding: 15px 40px;
	font-size: 18px;
	font-weight: 600;
	color: #2c2c2c;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

.mfp_buttons button:hover {
	background: linear-gradient(135deg, #b8941f 0%, #e6d39a 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.mfp_buttons button:active {
	transform: translateY(0);
}

/* エラー表示のスタイル */
div.mfp_err {
	clear: both;
	display: none;
	text-align: left;
	margin: 8px 0 0 0;
	padding: 8px 12px;
	color: #e74c3c;
	font-size: 14px;
	line-height: 1.4;
	background: #fdf2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	background-image: none;
}

/* フォーム送信後にエラーが発生した場合のみ適用 */
.mfp_parent_error {
	border-color: #e74c3c !important;
	background: #fdf2f2 !important;
}

/* エラー状態の入力フィールド */
.mfp_parent_error input,
.mfp_parent_error textarea {
	border-color: #e74c3c !important;
	background: #fdf2f2 !important;
}

.problem {
	background-color: #fdf2f2 !important;
}

/* 初期状態でのエラー表示を防ぐ */
.mfp_element_text:not(.mfp_parent_error),
.mfp_element_email:not(.mfp_parent_error),
.mfp_element_tel:not(.mfp_parent_error),
.mfp_element_textarea:not(.mfp_parent_error) {
	border-color: #e8e6e0 !important;
	background: #ffffff !important;
}

/* フォーム送信後にエラーが発生した場合のみ赤く表示 */
.mfp_parent_error .mfp_element_text,
.mfp_parent_error .mfp_element_email,
.mfp_parent_error .mfp_element_tel,
.mfp_parent_error .mfp_element_textarea {
	border-color: #e74c3c !important;
	background: #fdf2f2 !important;
}

/* レスポンシブデザイン */
@media screen and (max-width: 800px) {
	body {
		padding: 10px;
	}
	
	div#wrapper {
		border-radius: 10px;
		margin: 0;
		width: 100%;
	}
	
	div#wrapper div#header {
		padding: 40px 25px;
	}
	
	div#wrapper div#header h1 {
		font-size: 26px;
	}
	
	div#wrapper div#header p {
		font-size: 15px;
	}
	
	div#wrapper div#container {
		padding: 35px 25px;
	}
	
	div#wrapper div#container form#mailformpro dl dt {
		font-size: 16px;
		padding: 0 0 8px 0;
	}
	
	.mfp_rows .mfp_col5 {
		width: 100%;
		padding: 0 0 10px 0;
	}
	
	.mfp_rows .mfp_col5:last-child {
		padding-bottom: 0;
	}
	
	.mfp_element_text,
	.mfp_element_email,
	.mfp_element_tel,
	.mfp_element_textarea {
		font-size: 16px; /* iOSのズーム防止 */
	}
	
	.mfp_buttons button {
		width: 100%;
		padding: 18px 20px;
		font-size: 16px;
	}
}

@media screen and (max-width: 480px) {
	div#wrapper div#header {
		padding: 35px 20px;
	}
	
	div#wrapper div#header h1 {
		font-size: 22px;
	}
	
	div#wrapper div#header p {
		font-size: 14px;
	}
	
	div#wrapper div#container {
		padding: 30px 20px;
	}
	
	.mfp_element_text,
	.mfp_element_email,
	.mfp_element_tel,
	.mfp_element_textarea {
		padding: 10px 12px;
		font-size: 16px;
	}
}