/* ============================================================
 * contact.css（contact.html から外だし）
 * ============================================================ */

.contact-page {
	background: #f3f4f6;
	padding: 46px 0 90px;
}

.contact-page-container {
	max-width: 1320px;
}

.contact-page-header {
	text-align: center;
	margin-bottom: 42px;
}

.contact-page-title {
	font-size: 36px;
	font-weight: 800;
	line-height: 1.25;
	color: #111827;
	margin-bottom: 16px;
}

.contact-page-subtitle {
	font-size: 20px;
	line-height: 1.8;
	color: #6b7280;
	margin-bottom: 0;
}

.contact-method-row {
	max-width: 980px;
	margin: 0 auto 38px;
}

.contact-method-col {
	margin-bottom: 24px;
}

.contact-method-card {
	background: #ffffff;
	border: 1px solid #dbe3ee;
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
	padding: 28px 18px 24px;
	text-align: center;
	height: 100%;
}

.contact-method-icon {
	width: 82px;
	height: 82px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	font-size: 34px;
}

.contact-method-icon.blue {
	background: #dbeafe;
	color: #2563eb;
}

.contact-method-icon.orange {
	background: #ffedd5;
	color: #ff6a00;
}

.contact-method-icon.green {
	background: #dcfce7;
	color: #16a34a;
}

.contact-method-title {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.5;
	color: #111827;
	margin-bottom: 14px;
}

.contact-method-value {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.6;
	margin-bottom: 6px;
}

.contact-method-value a {
	text-decoration: none;
}

.contact-method-value.phone a {
	color: #2563eb;
}

.contact-method-value.mail a {
	color: #ff6a00;
}

.contact-method-note {
	font-size: 15px;
	line-height: 1.7;
	color: #6b7280;
	margin-bottom: 0;
}

.contact-line-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 132px;
	height: 44px;
	padding: 0 18px;
	border-radius: 12px;
	background: #16c34a;
	color: #ffffff;
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;
	margin-bottom: 10px;
	transition: all 0.2s ease;
}

.contact-line-btn:hover {
	color: #ffffff;
	text-decoration: none;
	background: #10b041;
}

.contact-form-card {
	max-width: 980px;
	margin: 0 auto 30px;
	background: #ffffff;
	border: 1px solid #dbe3ee;
	border-radius: 18px;
	box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
	padding: 42px 38px 26px;
}

.contact-form-title {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.5;
	color: #111827;
	margin-bottom: 26px;
}

.contact-form-group {
	margin-bottom: 22px;
}

.contact-form-label {
	display: inline-block;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.5;
	color: #111827;
	margin-bottom: 10px;
}

.contact-form-label .required {
	color: #ef4444;
	margin-left: 4px;
}

.contact-form-control,
.contact-form-select,
.contact-form-textarea {
	width: 100%;
	border: 1px solid #d1d5db;
	border-radius: 12px;
	background: #ffffff;
	font-size: 16px;
	line-height: 1.5;
	color: #111827;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form-control,
.contact-form-select {
	height: 56px;
	padding: 0 16px;
}

.contact-form-textarea {
	min-height: 190px;
	padding: 16px;
	resize: vertical;
}

.contact-form-control::placeholder,
.contact-form-textarea::placeholder {
	color: #9ca3af;
}

.contact-form-control:focus,
.contact-form-select:focus,
.contact-form-textarea:focus {
	outline: none;
	border-color: #93c5fd;
	box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.12);
}

.contact-submit-wrap {
	text-align: center;
	padding-top: 2px;
}

.contact-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 190px;
	height: 68px;
	padding: 0 30px;
	border: none;
	border-radius: 14px;
	background: #ff6a00;
	color: #ffffff;
	font-size: 22px;
	font-weight: 800;
	box-shadow: 0 12px 26px rgba(255, 106, 0, 0.22);
	transition: all 0.2s ease;
}

.contact-submit-btn:hover {
	background: #f25f00;
}

.contact-submit-note {
	font-size: 15px;
	line-height: 1.8;
	color: #6b7280;
	margin-top: 14px;
	margin-bottom: 0;
}

.contact-privacy-card {
	max-width: 980px;
	margin: 0 auto;
	background: #edf4ff;
	border: 1px solid #d4e3fb;
	border-radius: 16px;
	padding: 28px 30px;
}

.contact-privacy-title {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.5;
	color: #111827;
	margin-bottom: 12px;
}

.contact-privacy-text {
	font-size: 15px;
	line-height: 1.9;
	color: #4b5563;
	margin-bottom: 0;
}

@media (max-width: 1199.98px) {
	.contact-page-title {
		font-size: 52px;
	}
}

@media (max-width: 991.98px) {
	.contact-page {
		padding: 34px 0 72px;
	}

	.contact-page-title {
		font-size: 42px;
	}

	.contact-page-subtitle {
		font-size: 18px;
	}

	.contact-method-row {
		margin-bottom: 28px;
	}

	.contact-form-card {
		padding: 34px 24px 24px;
	}
}

@media (max-width: 767.98px) {
	.contact-page {
		padding: 28px 0 56px;
	}

	.contact-page-header {
		margin-bottom: 30px;
	}

	.contact-page-title {
		font-size: 34px;
	}

	.contact-page-subtitle {
		font-size: 16px;
	}

	.contact-method-card {
		padding: 24px 16px 22px;
	}

	.contact-method-icon {
		width: 72px;
		height: 72px;
		font-size: 30px;
	}

	.contact-form-card {
		padding: 26px 18px 20px;
	}

	.contact-form-title {
		font-size: 22px;
		margin-bottom: 22px;
	}

	.contact-form-group {
		margin-bottom: 18px;
	}

	.contact-form-control,
	.contact-form-select {
		height: 52px;
		font-size: 15px;
	}

	.contact-form-textarea {
		min-height: 160px;
		font-size: 15px;
	}

	.contact-submit-btn {
		min-width: 160px;
		height: 60px;
		font-size: 18px;
	}

	.contact-privacy-card {
		padding: 22px 18px;
	}
}