@charset "UTF-8";

/* 見出し：サイトカラー（Tailwind brand パレットに準拠） */
form#sp_form1 dl dt {
	color: #faf7fc;
	font-weight: 600;
	margin: 1em 1em 0.5em;
	background: linear-gradient(135deg, #8560ae 0%, #6e4d91 45%, #5c4178 100%);
	padding: 0.45rem 0.65rem;
	border-radius: 0.5rem;
	box-shadow: 0 1px 2px rgba(74, 54, 98, 0.14);
}

/* 見出し内の注釈のみ（dd 内の span まで当てると白背景で文字が消える） */
form#sp_form1 dl dt span {
	font-size: 0.8rem;
	color: rgba(250, 247, 252, 0.92);
}

form#sp_form1 dl dd {
	margin: 0.5em 1em 1em;
	color: #292524;
}

/* テキストフィールド・選択は常時枠線（初見でも入力欄と分かる） */
form#sp_form1 dd input[type="text"],
form#sp_form1 dd input[type="password"],
form#sp_form1 dd input:not([type]),
form#sp_form1 dd select,
form#sp_form1 dd textarea {
	box-sizing: border-box;
	border: 1px solid #a8a29e;
	border-radius: 0.5rem;
	background-color: #fff;
}

form#sp_form1 dd input[type="text"],
form#sp_form1 dd input[type="password"],
form#sp_form1 dd input:not([type]),
form#sp_form1 dd select {
	height: 2.5em;
	width: 96%;
	padding: 0.35em 0.6em;
}

form#sp_form1 dd textarea {
	height: 3em;
	width: 96%;
	padding: 0.35em 0.6em;
}

/* 生年月日（年/月/日）：スマホでも崩れない並び */
form#sp_form1 .sp-birthdate {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 0.35rem;
	align-items: center;
}

form#sp_form1 .sp-birthdate input[type="text"],
form#sp_form1 .sp-birthdate select {
	width: 100%;
	min-width: 0;
	padding: 0.35em 0.5em;
}

form#sp_form1 .sp-birthdate .sp-birthdate__year {
	width: 100%;
}

form#sp_form1 .sp-birthdate .sp-birthdate__month,
form#sp_form1 .sp-birthdate .sp-birthdate__day {
	width: 100%;
}

form#sp_form1 .sp-birthdate select:required:invalid {
	color: #a8a29e;
}

form#sp_form1 .sp-birthdate select:required:valid {
	color: #292524;
}

form#sp_form1 .sp-birthdate input::placeholder {
	color: #a8a29e;
}

form#sp_form1 dd textarea:focus,
form#sp_form1 dd textarea:hover {
	height: 10em;
}

#main #sp_form_wrap p {
	margin: 0 0 0.75em;
}

#main #sp_form_wrap input[type="text"]:focus,
#main #sp_form_wrap input[type="password"]:focus,
#main #sp_form_wrap input:not([type]):focus,
#main #sp_form_wrap textarea:focus,
#main #sp_form_wrap select:focus {
	background-color: #ffc;
}

#main #sp_form_wrap ul {
	list-style-type: none;
}

form#sp_form1 dd input[type="submit"] {
	cursor: pointer;
	font-size: 130%;
	font-weight: bold;
	padding: 0.55rem 1.35rem;
	color: #faf7fc;
	border: 1px solid #5c4178;
	background: linear-gradient(135deg, #9d7ec4 0%, #8560ae 42%, #6e4d91 100%);
	border-radius: 9999px;
	box-shadow: 0 2px 8px rgba(94, 65, 120, 0.28);
	min-height: 44px;
	-webkit-appearance: none;
	appearance: none;
}

form#sp_form1 dd input[type="submit"].sd {
	width: 45%;
}

form#sp_form1 dd input[type="submit"]:hover {
	opacity: 0.95;
	filter: brightness(1.06);
}

form#sp_form1 dd input[type="submit"]:focus-visible {
	outline: 2px solid #8560ae;
	outline-offset: 3px;
}

ul#sq li {
	display: inline;
}

/* チェック・ラジオはフォーム内のみ（旧グローバル指定はレイアウト崩れの原因のため撤廃） */
form#sp_form1 input[type="radio"],
form#sp_form1 input[type="checkbox"] {
	position: relative;
	top: 0;
	vertical-align: middle;
}

#xsubmit[type="submit"][disabled] {
	cursor: not-allowed;
	background: #e7e5e4;
	background-image: none;
	border-color: #d6d3d1;
	color: #a8a29e;
	box-shadow: none;
	opacity: 1;
}