@charset "utf-8";

/* =========================================================
   KING CORPORATION - Calendar LP : Form pages
   (loaded after style.css ; reuses LP tokens / header / footer)
   ========================================================= */

.form_sec { background: #fff; padding: 56px 0 90px; }
.form_lead {
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.9;
	color: #444;
	margin: 0 0 48px;
}
.form_lead .req_note { color: #e60012; }

.form_area { max-width: 960px; margin: 0 auto; }

/* ---- form rows (dl) ---- */
.form_list { width: 100%; }
.form_list > dt {
	float: left;
	clear: left;
	width: 220px;
	padding: 18px 0 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.5;
}
.form_list > dd {
	margin-left: 220px;
	padding: 12px 0;
	border-bottom: 1px solid #ededed;
	min-height: 64px;
}
.form_list > dt + dd { } /* spacing handled by padding */

.req {
	display: inline-block;
	background: #e60012;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 2px;
	margin-left: 8px;
	vertical-align: 2px;
}

/* ---- fields ---- */
.form_list input[type="text"],
.form_list input[type="email"],
.form_list input[type="tel"],
.form_list textarea,
.form_list select {
	width: 100%;
	font-family: inherit;
	font-size: 1.5rem;
	color: #282828;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 2px;
	padding: 13px 14px;
	-webkit-appearance: none;
	appearance: none;
}
.form_list input::placeholder,
.form_list textarea::placeholder { color: #b3b3b3; }
.form_list input:focus,
.form_list textarea:focus,
.form_list select:focus {
	outline: none;
	border-color: #2578d8;
	box-shadow: 0 0 0 2px rgba(37,120,216,.12);
}
.form_list textarea { height: 150px; resize: vertical; line-height: 1.6; }

.field_note { display: block; font-size: 1.3rem; color: #888; margin-top: 6px; }

/* ---- select arrow ---- */
.sele_wrap { position: relative; display: inline-block; width: 100%; }
.sele_wrap.is-short { max-width: 300px; }
.sele_wrap::after {
	content: "";
	position: absolute;
	right: 14px; top: 50%;
	width: 8px; height: 8px;
	border-right: 2px solid #555;
	border-bottom: 2px solid #555;
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}
.sele_wrap select { padding-right: 34px; }

/* ---- address block ---- */
.addr_row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.addr_row:last-child { margin-bottom: 0; }
.addr_row > span { flex: 0 0 70px; font-size: 1.4rem; color: #555; }
.addr_zip { max-width: 200px !important; }
.addr_row .sele_wrap { max-width: 280px; }

/* ---- radio ---- */
.radio_wrap { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 4px 0; }
.radio_wrap.is-stack { flex-direction: column; gap: 12px; }
.radio_wrap label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 1.5rem;
	cursor: pointer;
}
.radio_wrap input[type="radio"] {
	width: 18px; height: 18px;
	accent-color: #2578d8;
	cursor: pointer;
}
.other_inline { display: inline-flex; align-items: center; gap: 6px; }
.other_inline input[type="text"] { width: 220px; padding: 8px 10px; }

/* ---- quantity ---- */
.qty_wrap { display: flex; align-items: center; gap: 8px; }
.qty_wrap input { max-width: 200px; }
.qty_wrap .qty_unit { font-size: 1.4rem; color: #555; }

/* ---- privacy / submit ---- */
.privacy_check { text-align: center; margin: 40px 0 30px; }
.privacy_check label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 1.5rem;
	cursor: pointer;
}
.privacy_check input[type="checkbox"] { width: 18px; height: 18px; accent-color: #2578d8; }
.privacy_check a { color: #2578d8; text-decoration: underline; }

.submit_wrap { text-align: center; }
.form_submit {
	appearance: none;
	min-width: 360px;
	background: #282828;
	color: #fff;
	border: none;
	font-family: inherit;
	font-size: 1.7rem;
	font-weight: 700;
	padding: 20px 40px;
	border-radius: 2px;
	cursor: pointer;
	transition: all .3s;
}
.form_submit:hover { background: #2578d8; }
.form_submit:disabled { background: #bbb; cursor: not-allowed; }

/* =========================================================
   Confirm page (入力内容のご確認)
   ========================================================= */
.form_confirm > dd {
	display: flex;
	align-items: center;
	font-size: 1.5rem;
	color: #282828;
	line-height: 1.7;
	word-break: break-all;
}
.submit_wrap_confirm {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 40px;
}
.submit_wrap_confirm .form_submit { order: 1; }
.form_back {
	order: 2;
	appearance: none;
	background: none;
	border: none;
	color: #2578d8;
	font-family: inherit;
	font-size: 1.4rem;
	text-decoration: underline;
	cursor: pointer;
	padding: 4px 8px;
	transition: opacity .3s;
}
.form_back:hover { opacity: .65; }

/* =========================================================
   Thanks / Error page (送信完了・エラー)
   ========================================================= */
.form_thanks { max-width: 760px; margin: 0 auto; text-align: center; }
.form_thanks p { font-size: 1.6rem; line-height: 1.95; color: #444; margin: 0 0 16px; }
.form_thanks p:last-of-type { margin-bottom: 0; }
.form_thanks .submit_wrap { margin-top: 44px; }
.form_back_link {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	line-height: 1.45;
}

/* =========================================================
   Responsive (SP)
   ========================================================= */
@media screen and (max-width: 768px) {
	.form_sec { padding: 36px 0 60px; }
	.form_lead { font-size: 1.4rem; margin-bottom: 32px; }

	.form_confirm > dd { font-size: 1.45rem; }
	.form_thanks p { font-size: 1.4rem; }
	.form_back_link { width: 100%; }

	.form_list > dt {
		float: none;
		width: auto;
		padding: 0 0 8px;
		font-size: 1.45rem;
	}
	.form_list > dd {
		margin-left: 0;
		padding: 0 0 18px;
		min-height: 0;
	}
	.form_list > dd { border-bottom: none; }
	.form_list > dt { padding-top: 18px; border-top: 1px solid #ededed; }
	.form_list > dt:first-child { border-top: none; padding-top: 0; }

	.sele_wrap.is-short, .addr_row .sele_wrap { max-width: 100%; }
	.addr_zip { max-width: 160px !important; }
	.addr_row { flex-wrap: wrap; gap: 8px; }
	.addr_row > span { flex-basis: 70px; }

	.radio_wrap { gap: 12px 18px; }
	.other_inline input[type="text"] { width: 150px; }

	.form_submit { min-width: 0; width: 100%; font-size: 1.55rem; padding: 18px; }
}