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

/*===============================================
●共通
===============================================*/
.contentsTop p a.pcNoCall {
	text-decoration: none;
	color: #778288;
}
#mainImage div {background: url("../../images/contact/mainImg.jpg") no-repeat center center / cover;}

/* contact
-----------------------------------------------*/
.contact .contentsTop .linkBtnBox {display: flex;}

/* contactForm
-----------------------------------------------*/
#contactForm .linkBtn a {
	font-size: 1em;
}
.confirmTable th {width: 32%;}
.contactTable td,
.confirmTable td {word-break: break-all;}
.contactTable td input,
.contactTable td textarea {
	color: #636b70;
	border-radius: unset;
	padding: 0.5em;
}
.contactTable td input::placeholder {color: #c0c0c0;}
.contactTable td input::-ms-input-placeholder {color: #c0c0c0;}
.contactTable td input:-ms-input-placeholder {color: #c0c0c0;}
.linkBtn {
	display: flex;
	justify-content: center;
}
#confirmBtn .btn02 {margin-right: 10%;}
#confirmBtn .btn02 a {border: 1px solid #aaa;}

/* resultWrap
-----------------------------------------------*/
.resultWrap .btn02 {text-align: center;}
.resultWrap .pageTitle h1 {text-align: left;}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px) {
	
	.errMsg {text-align: left;}
	
	/* contentsTop
	-----------------------------------------------*/
	.contentsTop {margin-bottom: 3.5em;}
	.contentsTop .linkBtnBox {flex-direction: column;}
	.contentsTop .linkBtnBox div:not(:last-child) {margin-bottom: 1.5em;}
	.contentsTop .linkBtnBox .linkBtn a {
		width: 255px;
		padding: 0.7em;
	}
	.contentsTop p a.pcNoCall {font-size: 1.6em;}
	.contentsTop p.time {font-size: 1.07em;}
	article.contentsTop #contactInfo {
		font-size: 1.15em;
	}
	
	/* contactForm
	-----------------------------------------------*/
	#contactForm {margin-bottom: 6em;}
	#contactForm h3 {
		font-size: 1.5em;
		margin-bottom: 1em;
	}
	#contactForm p {
		font-size: 1.15em;
	}
	.contactTable,
	.confirmTable {
		font-size: 1.15em;
		margin: 0 auto 3em;
	}
	.contactTable {width: 80%;}
	.confirmTable {width: 100%;}
	.contactTable th,
	.contactTable td {
		display: block;
		text-align: center;
	}
	.contactTable th,
	.confirmTable th,
	.confirmTable td {padding: 1em;}
	.confirmTable tr {border-bottom: 1px solid #778288;}
	.confirmTable th {
		min-width: 125px;
	}
	.confirmTable th,
	.confirmTable td {
		vertical-align: middle;
	}
	#confirmBtn {flex-direction: column;}
	#confirmBtn .btn02,
	#confirmBtn .btn01 {text-align: center;}
	#confirmBtn .btn02 {
		margin-bottom: 2em;
		width: 100%;
	}
	#confirmBtn a {width: 80%;}
	
	/* contactConfirmWrap */
	#contactConfirmWrap #formArea {padding-top: 0.5em;}
	#contactConfirmWrap .pageTitle h1 {padding-left: 0.4em;}
	
	/*  resultWrap
	-----------------------------------------------*/
	.resultWrap {
		padding: 0.5em 1em 4em;
	}
	.resultWrap .pageTitle {margin-bottom: 3.5em;}
	.resultWrap .pageTitle h1 {padding-left: 0.1em;}
	.resultWrap h2 {
		font-size: 1.4em;
		margin-bottom: 2em;
	}
	.resultWrap > p {
		font-size: 1.15em;
		line-height: 1.75;
	}
	.resultWrap p:first-of-type {margin-bottom: 1.5em;}
	.resultWrap p:nth-of-type(2) {margin-bottom: 3em;}
	
}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px) {
	
	/* メイン画像 */
	.mv {padding :12% 0;}
	
	/* contentsTop
	-----------------------------------------------*/
	article.contentsTop {margin-bottom: 7em;}
	article.contentsTop .linkBtnBox,
	article.contentsTop .linkBtnBox .linkBtn a {padding: 0.5em 1em;}
	article.contentsTop .linkBtnBox {justify-content: center;}
	article.contentsTop .linkBtnBox div:not(:last-child) {margin-right: 2em;}
	article.contentsTop .linkBtnBox .linkBtn a {
		width: 240px;
	}
	article.contentsTop p a.pcNoCall {
		font-size: 1.8em;
	}
	article.contentsTop p.time {font-size: 1.21em;}
	article.contentsTop #contactInfo {
		font-size: 1.2em;
	}
	
	/* contactForm
	-----------------------------------------------*/
	#contactForm {margin-bottom: 7em;}
	#contactForm h3 {
		font-size: 1.8em;
		margin-bottom: 1.8em;
	}
	#contactForm p {
		font-size: 1.2em;
	}
	table.contactTable {
		font-size: 1.2em;
		border-spacing: 16px;
		border-collapse: inherit;
		width: 80%;
		margin-bottom:  2.1em;
	}
	.contactTable th {
		width: 20%;
		text-align: right;
		padding-right: 2em;
	}
	.contactTable td {width: 42%;}
	table.confirmTable {
		font-size: 1.2em;
		margin: 0 auto 3em;
		border-collapse: collapse;
		width: 80%;
	}
	.confirmTable th,
	.confirmTable td {
		border-bottom: 1px solid #778288;
		padding: 1em;
	}
	.confirmTable th {text-align: left;}
	
	/* contactConfirmWrap */
	#contactConfirmWrap #formArea {
		padding-top: 0.3em;
	}
	
	/* resultWrap
	-----------------------------------------------*/
	.resultWrap {
		padding: 0.2em 0 8em;
	}
	.resultWrap .pageTitle {margin-bottom: 7em;}
	.resultWrap h2 {
		font-size: 1.8em;
		margin-bottom: 2em;
	}
	.resultWrap p {
		font-size: 1.2em;
		line-height: 1.8;
	}
	.resultWrap p:first-of-type {margin-bottom: 2em;}
	.resultWrap p:nth-of-type(2) {margin-bottom: 3em;}
	
}

/*===============================================
●画面の横幅が420px以上(調整用)
===============================================*/
@media screen and (min-width: 420px) {
	.contactTable #err_TelNo .errMsg,
	.formTable #err_TelNo .errMsg {width: 270px;}
}