@charset "utf-8";

.ttl {
  background-image: url("../img/common/ttl_bg_common.png");
}

.page-contact{
	width:920px;
	margin:0 auto;
}

.page-contact .contact-message p{
	margin-bottom:20px;
}

.page-contact .contact-message span{
	display:block;
	margin:10px 0 0;
	font-size:11px;
	font-size:1.1rem;
}

.page-contact .contact-message span{
	margin:20px 0;
}

.page-contact .contact-message span:first-child{
	margin:0;
}

.page-contact .contact-message span span,
.page-contact #form-box table th span{
	display:inline;
	color:#C14911;
}

.page-contact #form-box{
	margin-top:20px;
	padding:40px;
	background-color:#F4F3F0;
	border:1px solid #E1DDCC;
}

.page-contact #form-box table{
	border-collapse:collapse;
	border-spacing: 0;
	/*width:70%;
	margin:0 auto;*/
}

.page-contact #form-box table:last-child{
	margin-bottom:0;
}

.page-contact #form-box table tr:last-child{
	border-bottom:none;
}

.page-contact #form-box table th,
.page-contact #form-box table td{
	padding:20px 20px;
}

.page-contact #form-box table tr th{
	width:30%;
	text-align:right;
	vertical-align:middle;
}

.page-contact #form-box table tr td{
	width:70%;
}

.page-contact #form-box input[type="text"]{
	width:100%;
	padding:10px;
	background-color:#fff;
	border:1px solid #E1DDCC;
	border-radius:3px;
}

.page-contact #form-box textarea{
	width:100%;
	padding:10px;
	background-color:#fff;
	border:1px solid #E1DDCC;
	border-radius:3px;
	height:190px;
}

.page-contact #form-box input[type=radio]{
	display:none;
}

.page-contact #form-box .radio{
	position:relative;
	display:block;
	margin:0;
	padding:10px 20px 10px 25px;
	border-radius:3px;
	font-weight:normal;
	vertical-align:middle;
	cursor:pointer;
	-webkit-transition:background-color 0.2s linear;
	transition:background-color 0.2s linear;
}

.page-contact #form-box .radio:after{
	content:"";
	position:absolute;
	top:50%;
	left:0;
	display:block;
	margin-top:-9px;
	width:16px;
	height:16px;
	background-color: #fff;
	border:1px solid #dcdcdc;
	border-radius:3px;
	-webkit-transition:border-color 0.2s linear;
	transition:border-color 0.2s linear;
	z-index: 1;
}

.page-contact #form-box .radio:before{
	content:"";
	position:absolute;
	top:50%;
	left:3px;
	display:block;
	margin-top:-6px;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:#8F6D48;
	opacity:0;
	-webkit-transition:opacity 0.2s linear;
	transition:opacity 0.2s linear;
	z-index: 2;
}

.page-contact #form-box input[type=radio]:checked + .radio:before{
	opacity:1;
}

.page-contact #form-box p{
	text-align:center;
}

.page-contact #form-box p a{
	color:#8F6D48;
	text-decoration:underline;
}

.page-contact #form-box p a:hover{
	text-decoration:none;
}


@media screen and (max-width: 940px){

.page-contact{
	width:94%;
}

}

@media screen and (max-width: 767px){

.page-contact #form-box{
	margin-top:20px;
	padding:20px 15px;
}

.page-contact #form-box table{
	width:100%;
	padding:20px;
}

.page-contact #form-box table:last-child{
	margin-bottom:0;
}

.page-contact #form-box table th{
	padding:0;
}

.page-contact #form-box table td{
	padding:5px 0 20px;
}


.page-contact #form-box table tr th{
	display:block;
	width:100%;
	text-align:left;
}

.page-contact #form-box table tr td{
	display:block;
	width:100%;
}
.page-contact #form-box p{
	text-align:left;
}


}




.stepbar {
 position: relative;
 width: 100%;
 text-align: center;
}
.stepbar::after {
 content: "";
 display: block;
 clear: both;
}
.stepbar .step {
 position: relative;
 float: left;
 display: inline-block;
 line-height: 40px;
 padding: 0 40px 0 20px;
 background-color: #222;
 color: #fff;
 text-align: center;
}
.stepbar .step:before, .stepbar .step:after {
 position: absolute;
 left: -15px;
 display: block;
 content: "";
 background-color: #222;
 border-left: 4px solid #fff;
 width: 20px;
 height: 20px;
}
.stepbar .step:after {
 top: 0;
 -moz-transform: skew(30deg);
 -ms-transform: skew(30deg);
 -webkit-transform: skew(30deg);
 transform: skew(30deg);
}
.stepbar .step:before {
 bottom: 0;
 -moz-transform: skew(-30deg);
 -ms-transform: skew(-30deg);
 -webkit-transform: skew(-30deg);
 transform: skew(-30deg);
}
.stepbar .step:first-child {
 -moz-border-radius-topleft: 4px;
 -webkit-border-top-left-radius: 4px;
 border-top-left-radius: 4px;
 -moz-border-radius-bottomleft: 4px;
 -webkit-border-bottom-left-radius: 4px;
 border-bottom-left-radius: 4px;
}
.stepbar .step:first-child:before, .stepbar .step:first-child:after {
 content: none;
}
.stepbar .step:last-child {
 -moz-border-radius-topright: 4px;
 -webkit-border-top-right-radius: 4px;
 border-top-right-radius: 4px;
 -moz-border-radius-bottomright: 4px;
 -webkit-border-bottom-right-radius: 4px;
 border-bottom-right-radius: 4px;
}
.stepbar .step.current {
 background-color: #74A813;
 font-weight: 700;
}
.stepbar .step.current:before, .stepbar .step.current:after {
 background-color: #74A813;
}
.stepbar.step3 .step {
 width: 33.333%;
}
@media screen and (max-width:767px) {
 .stepbar .step {
  font-size: 10px;
  font-size: 1rem;
 }
}
.btn::after {
 content: "";
 position: absolute;
 top: 50%;
 display: block;
 width: 6px;
 height: 8px;
 margin: -4px 0 0 0;
 -webkit-transition: all 0.3s 0s cubic-bezier(0.215, 0.61, 0.355, 1);
 transition: all 0.3s 0s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.btn {
 position: relative;
 display: inline-block;
 background-color: #74A813;
 border-radius: 2px;
 color: #fff;
 text-align: center;
 cursor: pointer;
 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
}
a.btn:hover {
 color: #fff;
}
.btn-formchk {
 display: block;
 margin: 40px auto 0;
 padding: 10px;
 width: 60%;
 background-color: #111;
 font-size: 15px;
 font-size: 1.5rem;
 font-weight: 700;
 letter-spacing: .2em;
 text-align: center;
}
.btn-formchkback {
 display: block;
 margin: 40px auto 0;
 padding: 10px;
 width: 40%;
 background-color: #ccc;
 font-size: 13px;
 font-size: 1.3rem;
 letter-spacing: .2em;
 text-align: center;
 color: #111;
}
.btn-formchk:hover, .btn-formchkback:hover {
 color: #fff;
 background-color: #74A813;
}