@charset "utf-8";

.contact-section{
  width: 100%;
  color: #fefefe;
  background-color: black;
  height: auto;
  margin: 0 auto;
}

.contact-contents{
  width: 70%;
  display: block;
  margin: 0 auto;
  padding: 150px 0;
  max-width: 860px;
}

@media screen and (max-width: 480px){
  .contact-contents{
    width: 85%;
  }
}

.contact-wrapper dl{
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #ccc;
  padding: 2rem 0;
}

@media screen and (max-width: 768px){
  .contact-wrapper dl{
    display: block;
    font-size: 15px;
  }
}

.contact-wrapper dt{
  width: 250px;
  color: #fefefe;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
  padding-left: 10px;
}

@media screen and (max-width: 768px){
  .contact-wrapper dt{
    width: 100%;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-bottom: 2rem;
    padding-left: 0;
  }
}

.contact-wrapper dd{
  flex: 1;
}

.contact-wrapper input{
  margin-right: 10px;
}

.contact-wrapper input[type="text"]{
  font-size: 16px;
  padding: 10px 2%;
  width: 80%;
  border-radius: 5px;
  border: none;
  margin-bottom: 20px;
}

.contact-wrapper input[type="text"]:last-of-type{
  margin-bottom: 0;
}

@media screen and (max-width: 768px){
  .contact-wrapper input[type="text"]{
    font-size: 15px;
  }
}

.contact-wrapper label{
  display: block;
  margin-bottom: 30px;
  margin-right: 1rem;
}

.contact-wrapper label.gender{
  display: inline-block;
  margin-bottom: 0;
}

.contact-wrapper label:last-of-type{
  margin-bottom: 0;
}

@media screen and (max-width: 768px){
  .contact-wrapper label{
    margin-bottom: 25px;
  }
}

.contact-wrapper input[type="radio"]{
  display: inline-block;
  margin-top: 10px;
}

@media screen and (max-width: 768px){
  .contact-wrapper input[type="radio"]{
    margin-top: 0;
  }
}

.contact-wrapper input.w60{
  width: 60%;
  min-width: 180px;
}

.contact-wrapper input.w95{
  width: 95%;
}


.required,.optional{
  font-size: 13px;
  color: white;
  padding: 8px 10px;
  border-radius: 3px;
  margin-right: 2.5rem;
}

@media screen and (max-width: 768px){
  .required,.optional{
    margin-right: 1rem;
  }
}

.required{
  background: #765b10;
}

.optional{
  background: #707070;
}

#form_submit{
  text-align: center;
  margin: 4rem 0;
}

input[type="submit"],input[type="button"]{
  cursor: pointer;
  padding: 0.8rem 1rem !important;
  width: 48%;
  max-width: 300px;
  border-radius: 10px;
  font-size: 16px;
  background-color: #947A53;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  border: none;
}

@media screen and (max-width: 768px){
  input[type="submit"],input[type="button"]{
    width: 100%;
  }
}

/* 確認画面ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

#formWrap {
	margin:0 auto;
	line-height:120%;
	font-size:90%;
  color: #fff;
}
table.formTable{
  width:100%;
	margin:0 auto;
	border-collapse:collapse;
  margin-bottom: 4rem;
}
table.formTable td,table.formTable th{
  color:#333;
  background-color: #fefefe;
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:40%;
	font-weight:normal;
	text-align:left;
}
p.error_messe{
	margin:5px 0;
	color:red;
}
.confirm-text{
  margin: 1rem;
}
.confirm-btn-wrap{
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:768px) {
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
form input[type="submit"], form input[type="reset"], form input[type="button"] {
  margin-bottom: 2rem;
}
.confirm-btn-wrap{
  display: block;
}
}


/* サンクスページーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー  */

.thanks-txt{
  display: block;
  text-align: center;
  line-height: 2;
  border: 1px solid #fefefe;
  padding: 2rem;
  margin: 3rem 0 0;
}

.thanks-txt span{
  display: block;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 1rem;
}

.thanks-btn{
  margin-top: 3rem;
  text-align: center;
  text-decoration: underline;
}

@media screen and (max-width:768px) {
  .thanks-txt{
    font-size: 15px;
    text-align: left;
  }
  .thanks-txt span{
    font-size: 20px;
  }
}