@charset "utf-8";

/*===============================================
●共通
===============================================*/

/* メイン画像 */
#bkgImg {background-image: url("../../images/contact/mainImg.jpg");}

/* お電話でのお問合せ
---------------------------------------- */
#heading a {color: #0675D2;}

/* telBox */
#telBox {
	border: 2px solid #004FB8;
	display: flex;
}
#telBox h3,
#phoneNumber ul li:last-of-type {font-family: "游ゴシック", sans-serif;}
#telBox h3 {font-weight: bold;}
#telBox #iconTel span svg {fill: #004FB8;}
#phoneNumber {display: flex;}
#phoneNumber ul {color: #004FB8;}
#phoneNumber ul li {font-weight: 500;}
#phoneNumber ul li:first-of-type {
	font-family: "Roboto", sans-serif;
	line-height: normal;
}

/* メールフォーム
---------------------------------------- */
input, button, textarea, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #707070;
}
select, input, textarea {padding: 0.5em;}
select::-ms-expand {display: none;}
input {border-radius: 0;}

/* フォームエラー */
.formError {
	display: flex;
	color: #D90000;
}

/* テーブル */
.contactTable td {color: #333;}
.contactTable th {
	font-family: "游ゴシック", sans-serif;
	font-weight: bold;
	color: #004FB8;
}

/* お問合せ項目 */
.selectBox select {
	padding-right: 1em;
	cursor: pointer;
	background: transparent;
	background-image: none;
	box-shadow: none;
	border-radius: 0;
}
.selectBox.sList {
	position: relative;
	background: #ffffff;
}
.selectBox.sList::before {
	position: absolute;
	top: 1.25em;
	right: 0.8em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #003693;
	pointer-events: none;
}

/* 必須項目 */
.requiredIcon {
	display: block;
	position: relative;
}
.requiredIcon::after {
	position: absolute;
	content: "必須";
	display: inline-block;
	padding: 0.1em 0.2em;
	background-color: #F58A2D;
	color: #fff;
	font-size: 0.84em;
	font-family: "YuGothic",sans-serif;
	font-weight: normal;
	line-height: 1.5em;
}

/* 確認画面ボタン */
.btn01 a {font-family: 'Noto Sans JP', sans-serif;}
.btn01 a {padding: 0.846em 0;}
.btn01 a:after {padding: 0.846em 0;}

/* confirm 戻る 送信ボタン
---------------------------------------- */
.btnBox {display: flex;}

/* result
---------------------------------------- */
.result p {
	font-size: 1.12em;
	line-height: 2em;
}

/*===============================================
●画面の横幅が769px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px){
	
	/* お電話でのお問合せ
	---------------------------------------- */
	.tit01 {padding-top: 4em;}
	#telBox {
		margin: 4em 0 1em;
		padding: 2em 1em 1.5em;
		justify-content: center;
	}
	#telBox h3 {
		font-size: 1.3em;
		line-height: 1em;
		margin-bottom: 0.7em;
	}
	#phoneNumber ul li:first-of-type {
		font-size: 2em;
		letter-spacing: 1px;
	}
	#phoneNumber ul li:last-of-type {font-size: 1em;}
	#telBox #iconTel span svg {
		width: 25px;
		height: 22px;
	}
	#phoneNumber {align-items: flex-start;}
	#phoneNumber #iconTel {margin-top: 0.5em;}
	
	
	/* メールフォーム
	---------------------------------------- */
	input, textarea, .widthlm {width: 100%!important;}
	textarea {border-radius: 0;}
	
	/* フォームエラー */
	.formError {
		display: flex;
		color: #D90000;
	}
	.errMsg {font-size: 0.8em;}
	
	/* テーブル */
	.contactTable th, .contactTable td {
		display: block;
		width: 100%;
	}
	.contactTable th,
	.contactTable td {
		font-size: 1em;
		line-height: 1.5em;
		padding: 1em 0;
	}
	.contactTable th {
		min-width: 140px;
		padding: 0.5em;
		background-color: #F3FAFF;
	}
	
	/* お問合せ項目 */
	.selectBox.sList.widthml select {width: 100%!important;}
	
	/* 必須項目 */
	.requiredIcon::after {
		top: 0.2em;
		right: 0;
	}
	
	/* 確認画面ボタン */
	.btn01 {
		width: 80%;
		margin: 2em auto 4em;
		text-align: center;
	}
	
	/* confirm 戻る 送信ボタン
	---------------------------------------- */
	.btnBox {
		flex-wrap: wrap;
		margin: 4em auto;
	}
	.btnBox .btn01 {margin: 0 auto;}
	.btnBox .btnBack {margin-bottom: 2em;}
	
	
	/* result
	---------------------------------------- */
	.result {
		padding-top: 4em;
		padding-bottom: 4em;
	}
}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px){
	
	/* お電話でのお問合せ
	---------------------------------------- */
	.tit01 {margin: 6.3em 0 7.1em 0;}
	#heading p {line-height: 2em;}
	
	/* telBox */
	#telBox {
		padding: 3.272% 0.5%;
		justify-content: space-around;
		margin: 4.64em 0 9.2em;
	}
	#telWrap {
		max-width: 690px;
		display: flex;
		justify-content: space-between;
	}
	#telWrap {align-items: center;}
	#phoneNumber {align-items: flex-start;}
	#phoneNumber ul li:first-of-type {
		font-size: 3.71em;
		letter-spacing: 2px;
	}
	#telBox h3,
	#phoneNumber ul li:last-of-type {
		font-size: 1.28em;
		line-height: 1em;
	}
	#telBox h3 {margin-right: 2.5em;}
	#telBox #iconTel span svg {
		width: 2.5em;
		height: 3em;
	}
	#phoneNumber #iconTel {margin: 1em 0.5em 0 0;}
	
	/* メールフォーム
	---------------------------------------- */
	
	/* テーブル */
	.contactTable tr {
		border-top: #DEDEDE 1px solid;
		border-bottom: #DEDEDE 1px solid;
	}
	.contactTable th {
		min-width: 180px;
		width: 24%;
	}
	.contactTable th,
	.contactTable td {
		font-size: 1.2em;
		padding: 1.2em 0;
		line-height: 2.125em;
	}
	.contactTable td {
		padding: 1.2em 1.8em;;
		border-left: 1px solid #E3E3E3;
	}
	
	/* お問合せ項目 */
	.selectBox select {width: 100%;}

	/* 必須項目 */
	.requiredIcon {width: 72%;}
	.requiredIcon::after {
		top: 0.5em;
		right: -2.4em;
	}
	
	/* 確認画面ボタン */
	.btn01 {
		margin: 10% 0;
		text-align: center;
	}
	.btn01 a {width: 20.834%;}
	
	/* エラーメッセージ */
	.note {display: block;}
	.note {
		color: #D90000;
		font-size: 0.75em;
		line-height: 1em;
	}
	
	/* confirm 戻る 送信ボタン
	---------------------------------------- */
	.btnBox .btn01 {width: 100%;}
	
	/* result 
	---------------------------------------- */
	.result {
		padding-top: 7.1em;
		padding-bottom: 7.1em;
	}
	
}