/*//////// form ///////////*/

select,option,input,textarea,
button{
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border:0;
    background:white;
    }
button.img_btn{
	background:transparent;
	}

.formarea .req:after{
	content:"*";
	color:red;
	padding-left:5px;
	}

.formarea dl{
	padding: 0 20px;
	margin:15px 0;
	font-size:clamp(14px,1.6vw,16px);
	display: flex;
	align-items:center;
	}
.formarea dl dt{
	width:180px;
	text-align: right;
	}
.formarea dl dd{
	width:100%;
	text-align: left;
	padding-left:20px;
	}
.formarea input,
.formarea textarea,
.formarea select{
	padding:7px;
	margin:5px 0;
	width:70%;
	background:white;
	font-size:1.2em;
  border:1px solid #adadad;
	}
.formarea input:focus,
.formarea textarea:focus{
	border-color:#5e5e5e;
	}
	.formarea textarea{
		width:100%;
	}
.formarea input[type="checkbox"]{
	width:30px;
	height: 30px ;
	vertical-align: middle;
	position: relative;
  cursor: pointer;
	}
.formarea input[type="checkbox"]:checked:before{
	content:"";
	display: block;
	border-right:4px solid #238BE6;
	border-bottom:4px solid #238BE6;
	width:8px;
	height: 16px;
	z-index: 5;
	transform:rotate(45deg) translate(-6px,-6px);
	-webkit-transform:rotate(45deg) translate(-6px,-6px);
	}
.formarea input[type="radio"]{
	width:25px;
	height: 25px ;
	vertical-align: middle;
	position: relative;
	border-radius:30px;
  cursor: pointer;
  margin-right:10px;
	}
.formarea input[type="radio"]:checked:before{
	content:"";
	display: block;
	background:#238BE6;
	width:10px;
	height:10px;
	border-radius:10px;

	}
.formarea .inline{
	display: inline-block;
	width:auto;
	}
.formarea ul[class*="col"]{
  display: flex;
  flex-wrap: wrap;
}
.formarea ul.col2 li{
  width:45%;
}
.formarea ul.col3 li{
  width:30%;
}
.formarea ul.col4 li{
  width:25%;
}

.formarea .submit_area{
	margin:50px auto;
	}
  .formarea .submit_area p{
    text-align: center;
  }
.formarea .submit_btn{
  display: block;
	margin:15px auto;
	text-align: center;
	font:clamp(16px,2.1vw,23px) 'Noto Sans JP', sans-serif;
  font-weight: 500;
	cursor:pointer;
	width:min(400px,80%);
	color:white;
	transition:.3s all ease;
  background:#A83375;
  padding:1em 1.25em;
  position: relative;
	}
.formarea .submit_btn:hover{
	box-shadow:0 6px 6px rgba(0,0,0,.25);
  background:#c9438f;
	}

.formarea .submit_btn:hover:after{
  opacity:1;
}
.formarea .submit_btn span{
position: relative;
z-index: 5;
}
.formarea .submit_btn[disabled="disabled"]{
	color:white;
	}
.formarea .submit_btn[disabled="disabled"]:hover{
	cursor:auto;
	box-shadow:none;
	}

.formarea .back_btn{
  display: block;
	margin:15px auto;
	text-align: center;
	font:clamp(16px,2.1vw,23px) 'Noto Sans JP', sans-serif;
  font-weight: 500;
	cursor:pointer;
	width:min(400px,80%);
	color:white;
	transition:.3s all ease;
  background:#5e5e5e;
  padding:1em 1.25em;
  position: relative;
	}
.formarea .back_btn:hover{
	box-shadow:0 6px 6px rgba(0,0,0,.25);
	}


  .formarea .kakushi{
    height: 0;
    visibility: hidden;
  }
  
/*///// error ///////////*/

.formarea{
  .title{
    font-size:2rem;
    margin:4% auto;
  }
  .error {
    display: block;
    color:red;
    text-align: left;
    }
  input.error,
  textarea.error {
    border:1px solid red !important;
  }
  .error-message .title h3{
    text-align: center;
    }
  .error-message .section ul {
    list-style: none;
    padding-left:20px;
    }
  .error-message .message ul li{
    text-align: center;
    list-style: none;
    }
}


/*////////////////////////////////////////////////////////*/
	@media screen and (max-width:1024px){
		/** フォーム **/

	.formarea dl{
		width:100%;
		box-sizing:border-box;
		padding:0 20px;
		}
	.formarea dl dt{
		font-size:1.0em;
		}

	.form input[type="email"],
	.form input[type="text"]{
		font-size:1.5em;
		}
	.formarea .submit_btn {
		height:auto;
		margin:50px auto 25px ;
	}
	.formarea .err_msg {
			color : #ff0000;
			font-weight:bold;
			font-size: 1em;
	}

	/* ■ //フォーム ■ */
	/*///////////////// 769 /////////////////////////*/
	}

/*////////////////////////////////////////////////////////*/
@media screen and (max-width:835px){
  .formarea ul.col4 li{
    width:50%;
  }
	.formarea dl{
		display: block;
		margin:0 0 5px 0;
	}
	.formarea dl dt{
		width:auto;
		text-align: left;
	}
	.formarea dl dd{
		width:100%;
	}
	.formarea input, .formarea select{
		font-size:1rem;
	}

	/*///////////////// 835px ///////////////////////////////*/
}
@media screen and (max-width:640px){


	/*///////////////// 640 ///////////////////////////////*/
}



/*////////////////////////////////////////////////////////*/
@media screen and (max-width:429px){

  .formarea input{
    width:100%;
  }
  .formarea dl {
      padding: 0 0px;
    }
  .formarea ul.el{
    display: block;
  }
/*///////////////// 429px ///////////////////////////////*/
}