@charset "UTF-8";

/* ------------------------------------------------------------
  PCスタイル
 ------------------------------------------------------------ */
@media screen and (min-width: 768px) {
	/* ページヘッダー */
	.pageCtc_ttl {
		padding: 22px 48px;
	}
	.ctcTtl_fig {
		width: 280px;
		height: 245px;
		position: absolute;
		left: -275px;
		bottom: -103px;
	}

	/* 切り替えタブ（問合せ・査定） */
	.contact_tab_area {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		border-bottom: 1px solid #000;
		margin-top: 130px;
	}
	.tab_lead {
		font-size: 1.875rem; /* 30px */
		font-weight: 500;
		color: #1aad6b;
	}
	.contact_tab {
		width: 390px;
		height: 85px;
		margin: 45px 0 -1px;
		font-size: 18px;
		font-weight: 500;
		position: relative;
		z-index: 0;
	}
	.contact_tab li {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200px;
		height: 85px;
		border: 1px solid #000;
		border-bottom: none;
		border-radius: 40px 40px 0 0;
	}
	.contact_tab li:first-child {
		text-align: center;
		background: #ecf3ee;
		line-height: 1.2;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
	}
	.contact_tab li:last-child {
		border-bottom: 1px solid #000;
		background: #fffdf3;
		line-height: 1.2;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 1;
		transform-origin: center bottom;
	}
	.contact_tab li:last-child a {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		border-radius: 40px 40px 0 0;
		text-decoration: none;
		color: #000;
	}
	.contact_tab li:last-child:hover {
		transform: scale(1.1);
	}

	/* お客様専用入力フォーム */
	.ctc_cust {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 90px 0 100px;
		border-bottom: 1px solid #000;
		background: #ecf3ee;
	}
	.ctc_custTtl {
		line-height: 1.1;
		text-align: center;
	}
	.ctc_custTtl:after {
		content: "";
		display: block;
		width: calc( 2.5rem * 8);
		height: 2.625rem;
		background: url('../img/contact/fig_ttlunder_6char.svg') no-repeat left bottom / contain;
		position: absolute;
		bottom: -24px;
		left: -10px;
	}
	.contact_body {
		width: 800px;
	}
	.contact_note {
		padding: 0 35px;
		margin-top: 65px;
		text-align: center;
	}
	.contact_transfer {
		width: 100%;
		padding-bottom: 40px;
		border-bottom: 1px solid #000;
		text-align: center;
	}
	div.wpcf7 {
		width: 800px;
		margin-top: 50px;
	}

	form {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-top: 50px;
	}
	form p {
		display: grid;
		grid-template-columns: 8rem max-content 1fr;
		gap: 0 20px;
		align-items: center;
		width: 100%;
		margin-bottom: 50px;
		font-weight: 500;
		line-height: 1;
	}
	form p span.rqd {
		display: inline-block;
		padding: 4px 4px 6px;
		background: #1aad6b;
		color: #fff;
	}
	form p span.any {
		display: inline-block;
		border: 1px solid #1aad6b;
		padding: 3px 3px 5px;
		background: #fff;
		color: #1aad6b;
	}
	form p.inquiry_cat {
		grid-template-columns: 8rem max-content max-content;
	}
	form p.customer_msg {
		align-items: flex-start;
		padding-bottom: 50px;
		border-bottom: 1px solid #000;
	}
	select.pulldown {
		display: inline-block;
		width: 100%;
		height: 60px;
		padding: 0 46px 0 30px;
		border: 1px solid #000;
		border-radius: 30px;
		/* デフォルトの矢印を消す */
		-webkit-appearance: none;
		appearance: none;
		/* 矢印を背景として設定 */
		background-image: url("../img/contact/fig_select_arrow.svg");
		background-repeat: no-repeat;
		background-size: 16px;
		background-position: right 1.5rem center;
	}
	form p input {
		display: inline-block;
		width: 100%;
		height: 60px;
		padding: 0 30px;
		border: 1px solid #000;
		border-radius: 30px;
	}
	textarea.cust_msg {
		display: inline-block;
		width: 100%;
		padding: 30px 46px 0 30px;
		border: 1px solid #000;
		border-radius: 30px;
		line-height: 1.5;
	}

	/* 確認ボタン */
	input.confirm_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200px;
		height: 80px;
		padding: 0 20px;
		border: 1px solid #000;
		border-radius: 40px;
		background: #1aad6b url('../img/contact/fig_confirm_arrowW.svg') no-repeat right 24px center / 8px 14px;
		font-weight: 500;
		color: #fff;
		transition: var(--hover-speed);
	}
	input.confirm_btn:hover {
		border: 1px solid #1aad6b;
		background: #fff url('../img/contact/fig_confirm_arrowG.svg') no-repeat right 24px center / 8px 14px;
		color: #1aad6b;
		transition: var(--hover-speed);
	}
}


/* ------------------------------------------------------------
  SPスタイル
 ------------------------------------------------------------ */
@media screen and (max-width: 767px) {

	/* ページヘッダー・イラスト */
	.ctcTtl_fig {
		width: 228px;
		height: 200px;
		position: absolute;
		right: 0;
		bottom: -150px;
		left: 0;
		margin: 0 auto;
	}

	/* 切り替えタブ（問合せ・査定） */
	.contact_tab_area {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		border-bottom: 1px solid #000;
		margin-top: 45px;
	}
	.tab_lead {
		font-size: 1.4375rem; /* 23px */
		font-weight: 500;
		color: #1aad6b;
		line-height: 1.2;
		text-align: center;
	}
	.contact_tab {
		width: 290px;
		height: 71px;
		margin: 45px 0 -1px;
		font-size: 18px;
		font-weight: 500;
		position: relative;
		z-index: 0;
	}
	.contact_tab li {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 150px;
		height: 71px;
		border: 1px solid #000;
		border-bottom: none;
		border-radius: 30px 30px 0 0;
	}
	.contact_tab li:first-child {
		text-align: center;
		background: #ecf3ee;
		line-height: 1.2;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
	}
	.contact_tab li:last-child {
		border-bottom: 1px solid #000;
		background: #fffdf3;
		line-height: 1.2;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 1;
		transform-origin: center bottom;
	}
	.contact_tab li:last-child a {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		border-radius: 40px 40px 0 0;
		text-decoration: none;
		color: #000;
	}

	/* お客様専用入力フォーム */
	.ctc_cust {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 45px 24px 24px;
		border-bottom: 1px solid #000;
		background: #ecf3ee;
	}
	.ctc_custTtl {
		line-height: 1.1;
		text-align: center;
	}
	.ctc_custTtl:after {
		content: "";
		display: block;
		width: calc( 2.0625rem * 7.5 ); /* 33px * 6 */
		height: 2.25rem; /* 36px */
		background: url('../img/contact/fig_ttlunder_6char.svg') no-repeat left bottom / contain;
		position: absolute;
		bottom: -10px;
		left: -10px;
	}
	.contact_body {
		margin-top: 36px;
		text-align: justify;
	}
	.wpcf7 {
		margin-top: 45px;
	}
	form {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	form p {
		width: 100%;
		margin-bottom: 1rem;
		font-weight: 500;
		line-height: 1;
	}
	form p span {
		margin-left: 10px;
	}
	form p span.rqd {
		display: inline-block;
		padding: 4px 4px 6px;
		background: #1aad6b;
		color: #fff;
	}
	form p span.any {
		display: inline-block;
		border: 1px solid #1aad6b;
		padding: 3px 3px 5px;
		background: #fff;
		color: #1aad6b;
	}
	.wpcf7-form-control-wrap {
		display: block;
		margin: 10px 0 0;
	}
	select.pulldown {
		display: block;
		width: 100%;
		height: 60px;
		padding: 0 46px 0 30px;
		border: 1px solid #000;
		border-radius: 30px;
		/* デフォルトの矢印を消す */
		-webkit-appearance: none;
		appearance: none;
		/* 矢印を背景として設定 */
		background-image: url("../img/contact/fig_select_arrow.svg");
		background-repeat: no-repeat;
		background-size: 18px;
		background-position: right 1.5rem center;
	}
	form p input {
		display: inline-block;
		width: 100%;
		height: 60px;
		padding: 0 30px;
		border: 1px solid #000;
		border-radius: 30px;
	}
	textarea.cust_msg {
		display: inline-block;
		width: 100%;
		padding: 30px 46px 0 30px;
		border: 1px solid #000;
		border-radius: 30px;
		line-height: 1.4;
	}
	.customer_msg {
		padding-bottom: 36px;
		margin-bottom: 36px;
		border-bottom: 1px solid #000;
	}

	/* 確認ボタン */
	input.confirm_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200px;
		height: 80px;
		padding: 0 20px;
		border: 1px solid #000;
		border-radius: 40px;
		background: #1aad6b url('../img/contact/fig_confirm_arrowW.svg') no-repeat right 24px center / 8px 14px;
		font-weight: 500;
		color: #fff;
		transition: var(--hover-speed);
	}


}