/*===============================================*/

/*  form.css */

/*===============================================*/

/*//////////////////////////////////

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

	
/*modal
---------------------------*/
.modal{
    display: none;
    height: 100vh;
    position: fixed;
	z-index: 100000000;
    top: 0;
    width: 100%; }
	
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%; }
	
.modal__content{
    background: #fff;
    left: 50%;
    padding: 30px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 60%; }


/*- @media 959xp -*/
@media screen and (max-width: 959px){
.modal{height: 100%;width: 100%; }
.modal__bg{height: 100%;width: 100%; }
.modal__content{overflow-y:scroll; padding:30px 10px 0;width: 90%;height: 95%; } }


/**/

.formWrap {
	margin: 0px auto;
	padding:0px;
	width: 100%;
	box-sizing: border-box; }

.formWrap h3 {
	margin-bottom:30px;
	font-size:18px;
	line-height:30px;
	font-weight:600;
	text-align:center;
	letter-spacing: 0.1em; }

.formWrap h3 span {
	color:#ff2a00; }

section.thanks{
	margin:0px auto;
	padding:150px 0;
	width:100%;
	height:auto; }

section.thanks h2,section.thanks p{
	width:100%;
	height:auto;
	text-align:center;
	font-size:18px;
	line-height:30px; }

/**/

section.formArea{}

section.formArea .formInner{
	margin:0px auto 0px;
	padding:0px 20px 0px;
	width:100%;
	box-sizing: border-box; }

section.formArea .formInner dl{
	margin: 0px 0px 30px 0px;
	padding:0px 0px 0px 0px;
	clear:both;
	overflow:hidden; }
section.formArea .formInner dl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	
section.formArea .formInner dl dt{
	margin: 0px 0px 0px 0px;
	padding:10px 20px 0px 0px;
	width:25%;
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
	float:left;
	box-sizing: border-box; }
	
section.formArea .formInner dl dt img{width:40px;float:right;}
	
section.formArea .formInner dl dd{
	margin: 0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	width:75%;
	float:right; }


.close-btn{
	margin: 40px auto 0;
	width: 100%;
	text-align: center;
	font-size:18px;
	line-height:18px;
	letter-spacing: 0.1em;
	font-weight: ;
	font-feature-settings : "palt";
	font-family: latoB; }

/*- @media 959xp -*/
@media screen and (max-width: 959px){
.close-btn{margin: 40px auto; } }

/* input */
input[type=text],
input[type=password],
textarea,
select{
  background: #dedede;
  margin-right:px;
  padding: 18px;
  font-size:16px;
  border:1px solid #fff;
  transition:border-color .1s linear;
  -webkit-transition:border-color .1s linear;
  -moz-transition:border-color .1s linear;
  -ms-transition:border-color .1s linear;
  outline: none; }

input[type=text]:focus,
input[type=password]:focus,
textarea:focus{
  background: #fff!important;
  border:solid 2px #fd0000!important;
  padding: 17px!important; }

input[type=text].ss-size{width:20px;}
input[type=text].s-size{width:60px;}
input[type=text].m-size{width:120px;}
input[type=text].l-size{width:364px;}
input[type=text].ll-size{width:780px;}
input[type=text].fit-size{width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;}
label{margin-right: 10px;}
input[type=text],
input[type=password],
input[type=submit],
input[type=button],
textarea,
select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  appearance:none;
  border-radius: 0; }

select{margin-bottom: 10px; width: 100%; color: #777 ;}
select.s-size{width: 25%;}
select.sm-size{width: 50%;}
select.m-size{width: 100%;}
textarea{width:100%; height: 350px; box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;}

@media screen and (max-width: 959px){select.sm-size{width: 100%;}}

:-moz-any(select):before {
  background-color: #dedede; /* this is necessary for overcome the caret default browser */
  pointer-events: none; /* https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events  */
  z-index: 1; /* this is necessary for overcome the pseudo element */ }

select{
  background:#dedede url(../images/form/icon-arw.png) no-repeat 96%;
  background:none\9;
  text-indent: .01px; /*Firefox*/
  text-overflow: ""; /*Firefox*/ 
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; }

select::-ms-expand{
  display:none; }

select:focus{
  padding: 18px 20px 18px 18px;
  background:#f4f4f4 url(../images/form/icon-arw.png) no-repeat 90%;
  background:none\9;
  text-indent: .01px; /*Firefox*/
  text-overflow: ""; /*Firefox*/ }

.complete{
  background:#fff!important;
  border:solid 1px #d1d1d1!important; }

.form-title{
  /*margin-bottom:15px;*/
  padding-left:10px;
  font-size:16px;
  color: #777 ;
  min-width: 174px;
  display: inline-block; }

.btnbox{margin:0 0 0 0;}

input[type=submit]{
	outline: none; }

input[type=submit].btn,
input[type=button].btn {
	display: block;
	margin: 0 auto;
	width: 100%;
	padding: 20px;
	color:#ffffff;
	background: #000;
	border: none;
	text-align: center;
	text-decoration: none;
	font-size: 112%;
	line-height: 2;
	overflow: hidden;
	will-change: transition;
	transition: 0.3s all cubic-bezier(0.215, 0.61, 0.355, 1);
	-webkit-transition: 0.3s all cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition: 0.3s all cubic-bezier(0.215, 0.61, 0.355, 1);
	-ms-transition: 0.3s all cubic-bezier(0.215, 0.61, 0.355, 1); }

input[type=submit].btn:hover,
input[type=button].btn:hover {
	background: #aca07d;
	color: white; }



/**/
input[type="radio"] {
  display: none;
  /*checked時の見た目*/
}
input[type="radio"] + label {
  display:inline-block;
  cursor: pointer;
  margin: 10px 10px 0;
  /*通常時の見た目*/
  /*hover時の見た目*/
}
input[type="radio"] + label::before {
  width: 30px;
  height: 30px;
  display: inline-block;
  content: "";
  border-radius: 17px;
  vertical-align: middle;
  border: 1px solid #dddddd;
  background-color: #fff;
  margin: -2px 5px 0 0;
  -webkit-transition: .1s;
  transition: .1s;
}
input[type="radio"] + label:hover {
  color: #808080; }

input[type="radio"] + label:hover::before {
  background-color: #fff; }

input[type="radio"]:checked + label {
  color: #8ec54a;
  cursor: default; }

input[type="radio"]:checked + label::before {
  background-color: #8ec54a !important;
  box-shadow: inset 0 0 0 5px #fff; }


/**/
input[type="checkbox"] {
  display: none;
  /*checked時の見た目*/ }

input[type="checkbox"] + label {
  display: inline-block;
  cursor: pointer;
  margin: 10px 10px;
  /*通常時の見た目*/
  /*hover時の見た目*/ }

.clm2 input[type="checkbox"] + label {width: 40%;}
.clm3 input[type="checkbox"] + label{ width: 28%;}
.suti input[type=text]{margin-bottom: 15px;}
.zyusin input[type="checkbox"] + label {display: block; }

input[type="checkbox"] + label::before {
  width: 30px;
  height: 30px;
  display: inline-block;
  content: "";
  vertical-align: middle;
  border: 1px solid #fff;
  background-color: #fff;
  margin: -2px 5px 0 0;
  -webkit-transition: .1s;
  transition: .1s; }

input[type="checkbox"] + label:hover {
  color: #808080; }

input[type="checkbox"] + label:hover::before {
  background-color: #fff; }

input[type="checkbox"]:checked + label {
  color: #8ec54a;
  cursor: default; }

input[type="checkbox"]:checked + label::before {
  background-color: #8ec54a !important;
  box-shadow: inset 0 0 0 5px #fff; }


/*===============================================*/

/*  for tablet     画面の横幅が768px-958pxまで */

/*===============================================*/

@media screen and (max-width: 959px){
	
/*entry
--------------------------------*/
.formWrap {width: 100%;}
.formWrap h3 {width: 90%; margin:0 auto 50px;font-size:18px;line-height:30px;text-align:left; }

section.formArea{width:100%;}	
section.formArea .formInner dl dt{margin: 0px 0px 10px 0px;width:100%;float:none;font-size:18px;}
section.formArea .formInner dl dd{width:100%;float:none;}


}
/*===============================================*/





/*===============================================*/

/*  for SP   画面の横幅が768px以下 */

/*===============================================*/

@media screen and (max-width: 768px){
	
/*entry
--------------------------------*/
.contact-form{margin:30px auto; }
.formWrap {padding:0 0;}
.formWrap h4 {margin:0 auto 30px; font-size: 16px; }
.clm2 input[type="checkbox"] + label {width: 100%;}
.clm3 input[type="checkbox"] + label {width: 100%;}

}
/*===============================================*/