@charset "utf-8";
/*==============================
お問合せ 
contactContents
==============================*/

/*===============================================
●共通
===============================================*/
.contactContents table {width: 100%;}
.contactContents .telBox{
	width: 90%;
	max-width: 700px;
	border: 1px solid #BAA288;
	text-align: center;
}
.contactContents .telBox h2 {
	font-weight: bold;
	color: #794913;
}
.contactContents .telBox a {
	justify-content: center;
	color: #794913;
}
.contactContents .telBox svg {
	width: 1em;
	height: 1em;
}
.contactContents .telBox p {text-align: center;}
.contactContents .telBox .openingHours {font-weight: bold;}
.contactContents .telBox #holiday {
	font-size: 0.875em;
	line-height:1.5em;
}
svg .tel02_st1 { fill: #E63438;}
svg .tel02_st2 { fill: #fff;}

.PanfBox { display: none;}

/* formSelectBox */
#formSelectBox #formSelect {
	display: flex;
	justify-content: space-between;
}
#formSelectBox #formSelect li {
	display: block;
	width: 49%;
	font-weight: bold;
	text-align: center;
	background-color: #E2E2E2;
	color: #333;
	position: relative;
	cursor: pointer;
}
#formSelectBox #formSelect li.active {
	background-color: #E63438;
	color: #fff;
	pointer-events: none;
}
#formSelectBox #formSelect li:after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -9px;
	left: 0;
	width: 0px;
	height: 0px;
	margin: auto;
	border-style: solid;
	border-color: #E2E2E2 transparent transparent transparent;
	border-width: 11px 8px 0 8px;
}
#formSelectBox #formSelect li.active:after {border-color: #E63438 transparent transparent transparent;}

/* form */
#contactForm table {margin-bottom: 3em;}
#contactForm table tr:first-child {border-top: 1px solid #DFDFDF;}
#contactForm table tr {border-bottom: 1px solid #DFDFDF;}
#contactForm table th {
	color: #794913;
	font-weight: bold;
}
#contactForm table td {line-height: normal;}
select,
input,
textarea {padding: 0.5em;}
input[type="radio"] {border-radius: 50%;}
input:-ms-input-placeholder {color: #ccc;}
input::-ms-input-placeholder { color: #ccc;}
input::placeholder {color: #ccc;}

#nameSmall {
	font-size: 0.8em;
	display: block;
}

/* btn */
.btn01,
.btn02 {
	max-width: 200px;
	margin : 0 auto;
}
.btn02 {margin-bottom: 1.5em;}
.btn03 {max-width: 250px;}
.contactBtn a {
	display: block;
	border: 1px solid #794913;
	padding: 1em 2em;
	position: relative;
	font-weight: bold;
	color: #794913;
	text-align: center;
	border-radius: 2em;
}
.btn01 a,
.btn03 a {
	border: 1px solid #794913;
	color: #794913;
}
.btn01 a:hover,
.btn03 a:hover {
	background-color: #794913;
	color: #fff;
}
.btn02 a {
	border: 1px solid #aaa;
	color: #aaa;
}
.btn02 a:hover {
	background-color: #aaa;
	color: #fff;
}
.contactContents p {line-height: 1.88em;}

.labelBox {
	max-width: 816px;
	display: flex;
	flex-wrap: wrap;
	display: -ms-flexbox;/*IE用*/
	-ms-flex-wrap: wrap;/*IE用*/
	margin-bottom: 1em;
}
.labelBox label { display: inline-block;}

.scheduledText { font-size: 0.857em}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px){
	
	/*#container {padding-bottom: 4em;}*/
	#container {padding-bottom: 2em;}
	
	/* telBox */
	.contactContents .catDescription {margin-bottom: 2em;}
	.contactContents .telBox {
		padding: 1em;
		border-radius: 1em;
		margin: 5em auto 0;
	}
	.contactContents .telBox h2 { font-size: 1.12em;}
	.contactContents .telBox a {
		font-size: 1.8em;
		margin: 0.5em 0;
	}
	.contactContents .telBox .openingHours {margin-bottom: 0.2em;}
	
	/* formSelectBox */
	#formSelectBox #formSelect {margin-bottom: 2em;}
	#formSelectBox #formSelect li {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30px;
		font-size: 0.93em;
		line-height: 1.3em;
		padding: 0.5em 0;
	}
	
	/* form */
	#contactForm table th,
	#contactForm table td {
		display: block;
		width: 100%;
	}
	#contactForm table th {padding: 1.3em 0 1em;}
	#contactForm table td {padding-bottom: 1.3em;}
}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px){
	
	#container {padding-bottom: 3em;}
	
	/* telBox */
	.contactContents .catDescription {margin-bottom: 8%;}
	.contactContents .telBox {
		padding: 1.87em;
		border-radius: 1.5em;
		margin: 10em auto 0;
	}
	.contactContents .telBox h2 { font-size: 1.25em;}
	.contactContents .telBox a {
		font-size: 2.8em;
		margin: 0.5em 0;
	}
	
	/* formSelectBox */
	#formSelectBox #formSelect {margin-bottom: 3em;}
	#formSelectBox #formSelect li {
		padding: 1.5% 0;
		border-radius: 30px;
	}
	#formSelectBox #formSelect li:hover {opacity: 0.7;}
	#formSelectBox #formSelect li.active:hover {opacity: 1;}
	
	/* form*/
	#contactForm table th,
	#contactForm table td {padding: 4% 0;}
	#contactForm table th {
		width: 23%;
		min-width: 240px;
		vertical-align: middle;
	}
	#contactForm table td {width: 100%;}
	
	/* btn */
	#btnBox {
		display: flex;
		max-width: 500px;
		margin: 0 auto;
	}
}