/* お問い合わせフォーム（[gakumas_contact]。includes/contact.php）。トップ・カードのページと同じ、グレーの枠線＋黄色 */

.gkh-contact {
	--gkh-border: #cccccc;
	--gkh-line: #ffd400;
	--gkh-text: #222222;

	margin: 1.5em 0;
	color: var(--gkh-text);
}

.gkh-contact *,
.gkh-contact *::before,
.gkh-contact *::after {
	box-sizing: border-box;
}

.gkh-contact-form {
	padding: 1.2em 1.4em;
	border: 2px solid var(--gkh-border);
	border-radius: 8px;
	background: #ffffff;
}

.gkh-contact-row {
	margin-bottom: 1.1em;
}

.gkh-contact-row label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 0.35em;
	font-size: 0.92em;
	font-weight: bold;
}

.gkh-contact-req,
.gkh-contact-opt {
	padding: 0 0.6em;
	border-radius: 999px;
	font-size: 0.75em;
	font-weight: bold;
	line-height: 1.7;
}

.gkh-contact-req {
	background: #e60012;
	color: #ffffff;
}

.gkh-contact-opt {
	background: #eeeeee;
	color: #666666;
}

.gkh-contact input[type="text"],
.gkh-contact input[type="email"],
.gkh-contact input[type="url"],
.gkh-contact select,
.gkh-contact textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.55em 0.7em;
	border: 2px solid var(--gkh-border);
	border-radius: 6px;
	background: #ffffff;
	color: inherit;
	font: inherit;
	font-size: 16px; /* スマホで入力時に拡大されないように */
}

.gkh-contact input:focus,
.gkh-contact select:focus,
.gkh-contact textarea:focus {
	border-color: var(--gkh-line);
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.3);
}

.gkh-contact-agree {
	margin: 0.4em 0 1.2em;
	font-size: 0.92em;
	text-align: center;
}

.gkh-contact-submit {
	text-align: center;
}

.gkh-contact-submit button {
	min-width: 12em;
	padding: 0.7em 2em;
	border: none;
	border-bottom: 4px solid #d4af00;
	border-radius: 8px;
	background: var(--gkh-line);
	color: #222222;
	font-size: 1em;
	font-weight: bold;
	cursor: pointer;
}

.gkh-contact-submit button:hover {
	filter: brightness(1.05);
}

/* ロボットだけが埋める欄（人には見せない） */
.gkh-contact-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gkh-contact-done,
.gkh-contact-errors {
	margin: 0 0 1em;
	padding: 0.9em 1.1em;
	border: 2px solid;
	border-radius: 8px;
	font-size: 0.92em;
}

.gkh-contact-done {
	border-color: #6cc287;
	background: #eefaf1;
}

.gkh-contact-errors {
	border-color: #e88b8b;
	background: #fdf0f0;
}

.gkh-contact-errors p,
.gkh-contact-errors ul {
	margin: 0;
}

.gkh-contact-errors ul {
	padding-left: 1.3em;
}

@media (max-width: 600px) {
	.gkh-contact-form {
		padding: 1em;
	}
}