@charset "utf-8";

/*===============================================
    リフォーム専用お問い合わせ
===============================================*/
@media screen and (min-width: 641px) {
	article#contact {
		background-image: url(../images/contact/pc_title_bg.gif);
	}
	#contact h1 {
		margin-bottom: 95px;
		background-image: url(../images/contact/pc_title.png);
	}
	ul.telcont {
		display: flex;
		justify-content: center;
		text-indent: -9999px;
	}
	ul.telcont li:first-child {
		width: 604px; height: 100px;
		background: url(../images/contact/pc_tel01.gif) left top no-repeat;
	}
	ul.telcont li:last-child {
		width: 356px; height: 100px;
		background: url(../images/contact/pc_tel02.gif) left top no-repeat;
	}
}
@media screen and (max-width:640px) {
	article#contact {
		background-image: url(../images/contact/sp_title_bg.gif);
	}
	#contact h1 {
		margin-bottom: 20.78125vw;
		background-image: url(../images/contact/sp_title.png);
	}
	ul.telcont {
		width: 96.875vw;
		margin: 0 auto;
		text-indent: -9999px;
	}
	ul.telcont li:first-child {
		width: 100%; height: 20.9375vw;
		background: url(../images/contact/sp_tel01.gif) left top no-repeat;
		background-size: 100%;
	}
	ul.telcont li a {
		display: block;
		width: 100%; height: 20.9375vw;
		background: url(../images/contact/sp_tel02.gif) left top no-repeat;
		background-size: 100%;
	}
}


/* ---------------------------------------------------------------------------------
	フォーム
--------------------------------------------------------------------------------- */
input, textarea, select, option {
	color: #333;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
#inquiry input.sample {
	color: #999;
}

@media screen and (min-width: 641px) {
	#inquiry {
		width: 880px;
		margin: 0 auto;
	}
	#inquiry h2 {
		height: 26px;
		margin: 78px 0 32px;
		text-indent: -9999px;
	}
	#inquiry h2:first-of-type { background: url(../images/contact/pc_sub01.gif) center top no-repeat; }
	#inquiry h2:last-of-type { background: url(../images/contact/pc_sub02.gif) center top no-repeat; }

	#inquiry dl {
		display: flex;
		padding: 19px 0;
		line-height: 1.4;
		border-bottom: 1px dotted #555;
	}
	#inquiry dt {
		width: 300px;
		font-size: 20px;
		margin-left: 140px;
		text-indent: -140px;
	}
	#inquiry .status, #inquiry .any {
		display: inline-block;
		width: 90px;
		margin: 2px 50px 0 0;
		font-weight: bold;
		line-height: 26px;
		text-indent: 0;
		text-align: center;
		white-space: nowrap;
		color: #fff;
		background: #ff7373;
		border: 2px solid #ff7373;
		box-sizing: border-box;
	}
	#inquiry .any {
		color: #ff7373;
		background: #fff;
	}
	#inquiry dd {
		width: 440px;
	}
	#inquiry dd.choice {
		margin-top: 5px;
	}
	#inquiry dd span {
		display: block;
		margin-top: 5px;
		font-size: 14px;
	}
	#inquiry dd input, #inquiry textarea {
		width: 440px;
		padding: 5px 10px;
		font-size: 16px;
		line-height: 20px;
		vertical-align: top;
		border: 1px solid #333;
		box-sizing: border-box;
	}
	#inquiry input[type="radio"], #inquiry input[type="checkbox"] {
		width: auto;
		height: 18px;
	}
	#inquiry textarea {
		height: 170px;
	}
	#inquiry select {
		width: 220px;
		padding: 3px 10px;
		font-size: 16px;
		line-height: 20px;
	}
	#inquiry dd ul {
		display: flex;
		flex-wrap: wrap;
	}
	#inquiry dd ul li:not(:nth-last-of-type(2)):not(:last-of-type) {
		margin-bottom: 16px;
	}
	#inquiry dd ul li {
		width: 220px;
	}
	#inquiry dd ul li:nth-of-type(2), #inquiry dd ul li:nth-of-type(3) {
		width: 100%;
	}

	#inquiry .sendbtn {
		display: flex;
		justify-content: center;
		text-align: center;
		margin: 50px 0 80px;
	}
	#inquiry .sendbtn input {
		width: 280px;
		height: 50px;
		margin: 0 20px;
		text-indent: -9999px;
		cursor: pointer;
		border: none;
		background: left top no-repeat;
	}
	#inquiry .sendbtn input.btn_conf { background-image: url(../images/contact/pc_btn_conf.gif); }
	#inquiry .sendbtn input.btn_modify { background-image: url(../images/contact/pc_btn_modify.gif); }
	#inquiry .sendbtn input.btn_send { background-image: url(../images/contact/pc_btn_send.gif); }
	#inquiry .sendbtn input.btn_back { background-image: url(../images/contact/pc_btn_back.gif); }
}
@media screen and (max-width:640px) {
	input[type="submit"] {
		-webkit-appearance: none;
		border-radius: 0;
	}

	#inquiry h2 {
		height:6.5625vw;
		margin-top: 9.375vw;
		text-indent: -9999px;
		background: center top no-repeat;
		background-size: 100%;
	}
	#inquiry h2:first-of-type { background-image: url(../images/contact/sp_sub01.gif); }
	#inquiry h2:last-of-type { background-image: url(../images/contact/sp_sub02.gif); }

	#inquiry dl, #inquiry dd input, textarea, select, option {
		font-size: 4.375vw;
		line-height: 1.64;
	}
	#inquiry dl {
		width: 96.875vw;
		margin: 0 auto;
		padding: 4.375vw 0;
		border-bottom: 1px dotted #555;
	}
	#inquiry dt {
		margin-bottom: 3.125vw;
		margin-left: 21.875vw;
		text-indent: -21.875vw;
	}
	#inquiry .status, #inquiry .any {
		display: inline-block;
		width: 17.1875vw;
		margin: 0 4.6875vw 0 0;
		font-weight: bold;
		text-indent: 0;
		text-align: center;
		white-space: nowrap;
		color: #fff;
		background: #ff7373;
		border: 2px solid #ff7373;
		box-sizing: border-box;
	}
	#inquiry .any {
		color: #ff7373;
		background: #fff;
	}
	#inquiry dd {
		width: 100%;
	}
	#inquiry dd span {
		display: block;
		margin-top: 5px;
		font-size: 3.75vw;
	}
	#inquiry dd input, #inquiry textarea {
		width: 100%;
		padding: 1% 3%;
		vertical-align: top;
		border: 1px solid #333;
		box-sizing: border-box;
	}
	#inquiry input[type="radio"], #inquiry input[type="checkbox"] {
		width: auto;
		height: 18px;
	}
	#inquiry textarea {
		height: 32vw;
	}
	#inquiry select {
		width: 100%;
		padding: 1% 3%;
	}
	#inquiry dd ul {
		display: flex;
		flex-wrap: wrap;
	}
	#inquiry dd ul li {
		margin-right: 0.5em;
	}

	#inquiry .sendbtn {
		width: 96.875vw;
		margin: 9.375vw auto 0;
	}
	#inquiry .sendbtn input {
		width: 100%;
		height: 15.625vw;
		margin-bottom: 4.6875vw;
		text-indent: -9999px;
		border: none;
		background: left top no-repeat;
		background-size: 100%;
	}
	#inquiry .sendbtn input.btn_conf { background-image: url(../images/contact/sp_btn_conf.gif); }
	#inquiry .sendbtn input.btn_modify { background-image: url(../images/contact/sp_btn_modify.gif); }
	#inquiry .sendbtn input.btn_send { background-image: url(../images/contact/sp_btn_send.gif); }
	#inquiry .sendbtn input.btn_back { background-image: url(../images/contact/sp_btn_back.gif); }
}