@charset "UTF-8";
/* ==============================================
   外構工事プログレス滋賀 - contact.css (お問い合わせページ)
   PC first / breakpoints: 1200 / 960 / 568
============================================== */

.cf { padding: 0 0 60px; }
.cf_intro { text-align: center; font-size: 17px; letter-spacing: .1em; line-height: 1.75; color: var(--color_text); margin-bottom: 60px; }

.cf_form { max-width: 1120px; margin: 0 auto; }
.cf_card {
	background: #fff; border-radius: 10px;
	box-shadow: 0 0 4px rgba(34,34,34,.12); overflow: hidden;
}
.cf_row { display: grid; grid-template-columns: 350px 1fr; border-bottom: 1px solid var(--color_border); }
.cf_row:last-of-type { border-bottom: none; }

.cf_label {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: var(--color_green); color: #fff;
	font-family: var(--font_sans); font-weight: 500; font-size: 17px; letter-spacing: .1em;
	padding: 20px;
}
.cf_required {
	display: inline-block; background: #e5e54a; color: var(--color_green);
	font-family: var(--font_sans); font-weight: 500; font-size: 13px; letter-spacing: .05em;
	padding: 2px 8px; border-radius: 4px; line-height: 1.6; flex-shrink: 0;
}

.cf_field { padding: 20px; }

.cf_input, .cf_textarea, select.cf_input {
	width: 100%; display: block; background: #f5f5f5; border: none; border-radius: 4px;
	font-family: var(--font_sans); font-size: 16px; letter-spacing: .1em; color: var(--color_text);
	padding: 0 20px; height: 50px;
}
.cf_input::placeholder, .cf_textarea::placeholder { color: #666; }
.cf_input-fixed { background: #d9d9d9; color: #000; appearance: none; }
.cf_textarea { height: 238px; padding: 16px 20px; resize: vertical; line-height: 1.75; }
.cf_hint { margin-top: 10px; font-size: 14px; letter-spacing: .1em; color: #666; }

.cf_radio_list { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; height: 50px; }
.cf_radio { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; letter-spacing: .1em; color: var(--color_text); cursor: pointer; }
.cf_radio input { width: 18px; height: 18px; accent-color: var(--color_green); cursor: pointer; }

.cf_address { display: flex; flex-direction: column; gap: 10px; }
.cf_address_zip { display: flex; align-items: center; gap: 8px; }
.cf_address_mark { flex-shrink: 0; font-size: 16px; letter-spacing: .1em; color: var(--color_text); }
.cf_address_zip .cf_input { width: 310px; }
.cf_input-fixed { width: 310px; }

.cf_privacy { text-align: center; font-size: 14px; letter-spacing: .1em; color: #666; margin-top: 40px; }
.cf_privacy a { color: #666; text-decoration: underline; }

.cf_submit {
	position: relative; display: flex; align-items: center; justify-content: center;
	margin: 20px auto 0; padding: 0; width: 509px; max-width: 100%; height: 81px;
	background: url(../img/common/arr_white_right.svg) right 32px center / 18px 13px no-repeat, var(--color_orange);
	border: none; border-radius: 999px; outline: none; -webkit-appearance: none; appearance: none; box-shadow: none;
	color: #fff; font-size: 20px; line-height: 1; letter-spacing: .1em; cursor: pointer;
}

@media only screen and (max-width: 1200px) {
	.cf { padding: 60px 0; }
}
@media only screen and (max-width: 960px) {
	.cf_intro { margin-bottom: 30px; }
	.cf_row { grid-template-columns: 1fr; }
	.cf_label { padding: 14px 20px; }
	.cf_field { padding: 20px; }
	.cf_radio_list { height: auto; gap: 12px; flex-direction: column; align-items: flex-start; }
	.cf_address_zip .cf_input, .cf_input-fixed { width: 100%; max-width: 310px; }
}
@media only screen and (max-width: 568px) {
	.cf { padding: 30px 0 40px; }
	.cf_intro { font-size: 15px; text-align: left; margin-bottom: 24px; }
	.cf_card { border-radius: 6px; }
	.cf_label { font-size: 15px; gap: 10px; }
	.cf_required { font-size: 12px; }
	.cf_input, .cf_textarea, select.cf_input { font-size: 14px; padding: 0 16px; }
	.cf_radio { font-size: 14px; }
	.cf_textarea { height: 140px; padding: 14px 16px; }
	.cf_hint { font-size: 13px; }
	.cf_privacy { margin-top: 28px; }
	.cf_submit { height: 52px; font-size: 16px; max-width: 294px; background-position: right 20px center; background-size: 14px 10px; }
}

/* ==============================================
   お問い合わせ完了 (page-sent.php)
============================================== */
.sent { padding: 0 0 60px; background: var(--color_bg_alt); }

.sent_heading {
	font-family: var(--font_serif); font-weight: 600;
	font-size: 32px; letter-spacing: .1em; color: var(--color_text); text-align: center;
}
.sent_heading_divider {
	position: relative; display: block; width: 170px; height: 10px; margin: 16px auto 0;
}
.sent_heading_divider::before {
	content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
	background: #DAD0BB; transform: translate(-50%, -50%) rotate(45deg);
}
.sent_heading_divider::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 170px; height: 1px; transform: translate(-50%, -50%);
	background:
		linear-gradient(#DAD0BB, #DAD0BB) left center / 72px 1px no-repeat,
		linear-gradient(#DAD0BB, #DAD0BB) right center / 72px 1px no-repeat;
}

.sent_card {
	display: flex; align-items: center; gap: 32px;
	max-width: 1120px; margin: 60px auto 0; background: #fff; border-radius: 10px;
	box-shadow: 0 0 4px rgba(34,34,34,.12); padding: 40px 60px;
}
.sent_icon {
	flex-shrink: 0; width: 115px; height: 115px; border-radius: 50%; background: var(--color_cream);
	display: flex; align-items: center; justify-content: center;
}
.sent_icon img { width: 56px; height: 36px; object-fit: contain; }
.sent_text { font-size: 16px; letter-spacing: .1em; line-height: 1.75; color: var(--color_text); }
.is_green { color: var(--color_green); font-weight: 500; }

@media only screen and (max-width: 1200px) {
	.sent { padding: 60px 0; }
}
@media only screen and (max-width: 960px) {
	.sent_heading { font-size: 24px; }
	.sent_card { margin-top: 44px; }
}
@media only screen and (max-width: 568px) {
	.sent { padding: 30px 0 40px; }
	.sent_heading { font-size: 20px; }
	.sent_heading_divider { width: 130px; }
	.sent_heading_divider::after { width: 130px; background-size: 55px 1px, 55px 1px; }
	.sent_card {
		display: block; margin-top: 24px; padding: 20px; border-radius: 6px;
	}
	.sent_card::after { content: ""; display: table; clear: both; }
	.sent_icon { float: left; width: 77px; height: 77px; margin: 0 16px 8px 0; }
	.sent_icon img { width: 38px; height: 24px; }
	.sent_text { font-size: 14px; }
}