/* なおぽラボの問い合わせのページの書式。元は wp4 のプラグイン naopo-lab-contact の assets/contact.css(1.0.0)。2026-10-28 プラグインを消すため生成の資料へ移した */
.naopo-contact-form {
	max-width: 760px;
	margin-top: 2rem;
	padding: clamp(20px, 4vw, 34px);
	border: 1px solid var(--line, #dce4ef);
	border-top: 5px solid var(--accent, #ffb000);
	border-radius: 14px;
	background: var(--surface, #fff);
	box-shadow: 7px 7px 0 #e1e9f4;
}

.naopo-contact-field {
	margin: 0 0 1.5rem;
}

.naopo-contact-field label {
	display: block;
	margin-bottom: 0.45rem;
	color: var(--ink, #13233a);
	font-weight: 700;
}

.naopo-contact-field input,
.naopo-contact-field select,
.naopo-contact-field textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.85rem 0.95rem;
	border: 1px solid var(--line, #dce4ef);
	border-radius: 8px;
	background: #fff;
	color: inherit;
	font: inherit;
}

.naopo-contact-field input:focus,
.naopo-contact-field select:focus,
.naopo-contact-field textarea:focus {
	outline: 3px solid rgba(37, 99, 235, 0.18);
	border-color: var(--brand, #2563eb);
}

.naopo-contact-help {
	display: block;
	margin-top: 0.45rem;
	color: var(--muted, #617089);
	font-size: 0.875rem;
}

.naopo-contact-consent {
	margin: 1.5rem 0;
}

.naopo-contact-submit button {
	min-width: 180px;
	padding: 0.9rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--brand, #2563eb);
	box-shadow: 3px 3px 0 #b9d8ff;
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.naopo-contact-submit button:hover,
.naopo-contact-submit button:focus-visible {
	background: var(--brand-dark, #1749b0);
}

.naopo-contact-notice {
	max-width: 760px;
	margin: 1.5rem 0;
	padding: 1rem 1.2rem;
	border-radius: 8px;
}

.naopo-contact-notice.is-success {
	background: #eaf2ff;
	color: #1749b0;
}

.naopo-contact-notice.is-error {
	background: #fff0f0;
	color: #8a2525;
}

.naopo-contact-trap {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

@media (max-width: 600px) {
	.naopo-contact-form {
		box-shadow: 4px 4px 0 #e1e9f4;
	}
}