/*  variables.scss
---------------------------------------------- */
/*  color
---------------------------------------------- */
/*  breakpoint
---------------------------------------------- */
/*  mixins.scss
---------------------------------------------- */
/*  media
---------------------------------------------- */
/*  font-up-on-mobile
---------------------------------------------- */
/*  about.scss
---------------------------------------------- */
#p-contact {
  background: url("../image/about/background.webp") no-repeat center 17vw/cover;
}

.inner {
  width: 900rem;
  margin-inline: auto;
}


#contactBox {
  margin-bottom: 150rem;
}

/* 詳細 */

.contTitle {
  padding: 0 0 20px;
  margin-bottom: 20rem;
  border-bottom: 1px solid #877016;
  font-size: 30rem;
  color: #877016;
}

.contLead {
  line-height: 2.4;
}

.indenTxt {
  text-indent: -1.1em;
  padding-left: 1.1em;
}

.mb30 {
  margin-bottom: 30rem;
}

.mb60 {
  margin-bottom: 60rem;
}

.unders {
	text-decoration:underline;
}
.unders:hover {
	opacity:0.7;
}

.contTable {
	width: 100%;
  box-sizing: border-box;
}

.contTable th,
.contTable td {
	border-bottom: 1px solid #898989;
	box-sizing: border-box;
	padding: 30rem 0;
}

.contTable tr:last-child th,
.contTable tr:last-child td {
  border-bottom: none;
}

.contTable th {
	font-weight: 400;
	width: 40%;
	vertical-align:top;
}

#contactBox input[type="text"],
#contactBox input[type="tel"],
#contactBox input[type="email"] {
	border: 1px solid #898989;
	height: 40px;
	padding: 20px 2%;
	font-family: inherit;
	line-height: 1.2;
	background: #fff;
	box-sizing: border-box;
}

#contactBox input[type="radio"],
#contactBox input[type="checkbox"] {
	vertical-align: top;
	margin-top: 0;
	margin-right: 10px;
}

#contactBox input[type="checkbox"] {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid #898989;
  background: #fff;
  vertical-align: -5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  top: -3px;
}

#contactBox input[type="checkbox"]:checked:before {
  position: absolute;
  top: 1px;
  left: 5px;
  transform: rotate(50deg);
  width: 6px;
  height: 11px;
  border-right: 2px solid #898989;
  border-bottom: 2px solid #898989;
  content: '';
}

#contactBox textarea {
	border: 1px solid #898989;
	padding: 10px 2%;
	width: 100%;
	height: 180px;
	font-family: inherit;
	line-height: 1.6;
	background: #fff;
	box-sizing: border-box;
}


#contactBox .veryShort {
	width: 25%;
}

#contactBox .short {
	width: 50%;
}

#contactBox .middle {
	width: 70%;
}

#contactBox .long {
	width: 100%;
}

input::placeholder,
textarea::placeholder {
  color: #999;
	font-size:12rem;
}

/* Edge */
input::-ms-input-placeholder,
textarea::-ms-input-placeholder{
  color: #999;
	font-size:12rem;
}

.submitBtn {
	position: relative;
  display: flex;
  width: 400px;
  height: 60rem;
  align-items: center;
  padding: 0 55rem 0 15rem;
  background: #DC9576;
  background: linear-gradient(90deg, rgb(220, 149, 118) 0%, rgb(187, 85, 53) 100%);
  font-size: 17rem;
  color: #ffffff;
  line-height: 1.2em;
  font-weight: 500;
  transition: 0.3s;
}

.backBtn {
	position: relative;
  display: flex;
  width: 400px;
  height: 60rem;
  align-items: center;
  padding: 0 55rem 0 15rem;
  background: #999;
  background: linear-gradient(90deg, #999,#666);
  font-size: 17rem;
  color: #ffffff;
  line-height: 1.2em;
  font-weight: 500;
  transition: 0.3s;
}

@media screen and (max-width: 768px) {
  .submitBtn,
  .backBtn {
    font-size: 30.6rem;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .submitBtn,
  .backBtn {
    height: 100rem;
  }
}

.subBtn {
  position: relative;
}

.subBtn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15rem;
  display: block;
  width: 46rem;
  height: 8rem;
  background: url("../image/common/parts/btn_arrow.svg") center/contain no-repeat;
  transform: translateY(-50%);
  transition: 0.3s;
}

@media screen and (max-width: 768px) {
  .subBtn::after {
    width: 92rem;
    height: 16rem;
  }
	
	input::placeholder,
	textarea::placeholder {
		font-size:24rem;
	}

	/* Edge */
	input::-ms-input-placeholder,
	textarea::-ms-input-placeholder{
  		font-size:24rem;
	}
	
}

.submitBtn:hover {
	transition: 0.3s;
}

.subBtn:hover::after {
  transform: translate(10rem, -50%);
  transition: 0.3s;
}

.submitArea {
	display: flex;
	justify-content: center;
}

.submitArea li:nth-child(n + 2) {
	margin-left: 30px;
}


.exCaution {
	margin: 30px 0 20px;
}


.checkArea {
	text-align: center;
	margin: 20rem 0 50rem;
}

.checkArea a {
  text-decoration: underline;
}


.redColor {
  color: #f00;
}

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

.inner {
  width: 90%;
}

.contTitle {
    font-size: 50rem;
    line-height: 1.2;
    margin: 0 0 30rem;
}

.contTable th,
	.contTable td {
		display: block;
		padding: 15px 0;
	}

	.contTable th {
		width: auto;
		border-top: none;
		border-bottom: none;
		text-align: center;
		border-bottom: 1px solid #00193a;
	}


	#contactBox textarea {
		height: 150px;
	}



	#contactBox .veryShort {
		width: 50%;
	}
	
	#contactBox .short,
	#contactBox .middle,
	#contactBox .long {
		width: 100%;
	}

	
	.submitArea {
		display: block;
	}
	
	.submitArea li {
		text-align: center;
	}

	.submitArea li:nth-child(n + 2) {
		margin: 30px 0 0;	
	}
	


}