@charset "utf-8";
/* CSS Document */

/*共通 *****************************************************************/
#contact .required { color: #cc0000; }
#contact input[type="text"],
#contact input[type="tel"],
#contact input[type="email"],
#contact textarea,
#contact input[type="submit"],
#contact input[type="button"] {
	font-family: "Lato", "Zen Kaku Gothic New", sans-serif; }
#contact input[type="text"],
#contact input[type="tel"],
#contact input[type="email"],
#contact textarea {
	width: 100%; padding: 7px; border-radius: var(--border-radius-s); background: #e5f1ff; border: 1px solid #c8c8c8; font-size: 1.6rem; }
#contact input[type="checkbox"] { margin-right: 6px; translate: 1px 2px; }
#contact textarea { height: 104px; }
#contact input[type="submit"],
#contact input[type="button"] {
	padding: 12px 16px; background: transparent; border: none; color: #fff; cursor: pointer;}
#contact input[type="submit"] { width: calc(100% - 1.6em); padding-right: 0; }
#contact input[type="button"] { width: 100%; }

#contact .submit-btn,
#contact .back-btn {
	width: 48%; min-width: 200px; max-width: 260px; margin: 24px auto 0; }
#contact .submit-btn .button,
#contact .back-btn .button { border-radius: 50px; }
#contact .submit-btn .button { background: var(--color-toto); }
#contact .back-btn .button { background: var(--color-gy-02); }
#contact .submit-btn .button.arw-link::after { padding-left: 0; filter: none; }

@media (max-width: 600px) {
	#contact input[type="text"],
	#contact input[type="tel"],
	#contact input[type="email"],
	#contact textarea {
		background: #fff; border-color: var(--color-gy-02); }
}





/*お問い合わせフォームのページ ****************************************************/
#contact #main-area .cont-wrap {
	justify-content: center; align-items: flex-start; gap: 0 6%; padding-top: 80px; padding-bottom: 120px; }

/*テキストエリア（左側） --------------------*/
#contact .text-area { flex-wrap: wrap; width: 24%; min-width: 240px; }
#contact .text-area .summary {
	width: 100%; margin-bottom: 32px; text-align: justify; }
#contact .text-area .summary .required { display: block; }
/*お急ぎの方 -----*/
#contact .text-area .hurry { width: 100%; margin-bottom: 72px; }
#contact .text-area .telno { line-height: 1.4; }
#contact .text-area .telno a {
	margin-left: .4em; pointer-events: none; font-weight: bold; font-size: var(--font-size-04); color: var(--color-toto); white-space: nowrap; }
#contact .text-area .telno span { font-size: var(--font-size-06); }
#contact .text-area .telno .text-sml { white-space: nowrap; }
/*故障の方 -----*/
#contact .text-area .broken { width: 100%; }
#contact .text-area .broken .button { width: 100%; }
#contact .text-area .broken .button a { text-align: left; }
#contact .text-area .broken .text-sml {
	display: block; margin-top: 6px; font-weight: normal; }
/*h3の設定 -----*/
#contact .text-area h3 {
	padding-left: 40px; white-space: nowrap; position: relative; }
#contact .text-area .broken h3 { margin-bottom: 8px; }
#contact .text-area h3::before,
#contact .text-area h3::after {
	content: ""; display: block; width: 32px; aspect-ratio: 1; position: absolute; left: 0; bottom: 0; }
#contact .text-area h3::before { border-radius: 60px; }
#contact .text-area h3::after {
	background-position: center; background-repeat: no-repeat; }
#contact .text-area .hurry h3::before { background: var(--color-toto); }
#contact .text-area .broken h3::before { background: var(--color-gr-01); }
#contact .text-area .hurry h3::after {
	background-size: 60%; background-image: url("../assets/images/icon-phone.svg"); }
#contact .text-area .broken h3::after {
	background-size: 75%; background-image: url("../assets/images/icon-construction.svg"); }

/*フォームエリア（右側） --------------------*/
#contact .form-area {
	width: 50%; min-width: 400px; padding: 32px 4% 48px; border-radius: var(--border-radius-reg); background: #fff; box-shadow: 0 2px 8px #00000033; }
#contact .form-area h2 { margin-top: 0; margin-bottom: 12px; letter-spacing: 0; }
#contact .form-area .form-list { margin-bottom: 12px; }
#contact .form-area .form-list.policy {
	margin: 16px 0 24px; font-size: var(--font-size-02); }
#contact .form-area .required { margin-left: .5em; }

#contact .form-area .item-title { font-size: var(--font-size-03); }
#contact .form-area .e {
	display: none; color: #cc0000; font-size: var(--font-size-02); }
#contact .form-area label { cursor: pointer; }

@media (max-width: 767px) {
	#contact #main-area .cont-wrap { flex-wrap: wrap; padding-top: 40px; }
	#contact .text-area,
	#contact .form-area { width: 100%; }
	#contact .text-area .summary { margin-bottom: 40px; }
	@media (min-width: 601px) {
		#contact .text-area { flex-wrap: wrap; }
		#contact .text-area .hurry,
		#contact .text-area .broken { width: 48%; }
	}
}
@media (max-width: 600px) {
	#contact .text-area .summary { order: 1; }
	#contact .text-area .hurry { order: 3; }
	#contact .text-area .broken {
		order: 2; max-width: 360px; margin-bottom: 48px; padding: 20px 5% 24px; border: 1px solid var(--color-gy-02); border-radius: var(--border-radius-reg); }
	#contact .form-area {
		min-width: auto; padding: 0; background: none; box-shadow: none; }
	#contact .form-area input[type="text"],
	#contact .form-area input[type="tel"],
	#contact .form-area input[type="email"],
	#contact .form-area textarea {
		background: #fff; border-color: var(--color-gy-02); }
}





/*確認・エラー・サンクスページ *************************************************/
#contact.check #main-area .cont-wrap,
#contact.error #main-area .cont-wrap,
#contact.thanks #main-area .cont-wrap { max-width: 560px; }

/*確認ページ --------------------*/
#contact.check #main-area .cont-wrap .text { margin-bottom: 32px; }
#contact.check #table_check { margin-bottom: 32px; }
#contact.check #table_check .table-list {
	padding: 8px; border-bottom: 1px solid var(--color-gy-01); }
#contact.check #table_check .komoku {width: 33%; text-align: left; }
#contact.check #table_check .naiyou { width: 67%; }
#contact.check .btn-list { justify-content: center; gap: 0 2%; }
#contact.check .btn-list .submit-btn,
#contact.check .btn-list .back-btn { width: 40%; min-width: auto; margin: 0; }

#contact.error .btn-list .back-btn { margin-top: 64px; }

@media (max-width: 520px) {
	#contact.check #table_check .table-list { flex-wrap: wrap; }
	#contact.check #table_check .komoku { width: 100%; font-weight: bold; }
	#contact.check #table_check .naiyou { width: 100%; padding-left: 1em; }
}