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

/*  form.css */

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

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

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

:root {
	--clr-main: #232323;	
	--clr-sub:#004ea2;
	--clr-blue:#004ea2;
	--clr-lightBlue:#dfe2f2;
	--clr-red: #e83928;
	--clr-wh: #fff;
	--clr-gry: #eeefef;
}


.contact {}

.contact h3 {
	margin-bottom:min(4vw,40px);
	text-align:center;}

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

section.thanks h2{
	margin-bottom: 20px;
	width:100%;
	height:auto;
	text-align:center;
	font-size:20px;
	line-height:30px; }

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

section.thanks p span{
	margin-top: 30px;
	display: block;
	text-align:center;
	font-size:18px;
	line-height:30px; }
/**/

section.formArea{}

/**/

section.formArea .formInner{
	margin:0px auto 0px;
	padding:0px 0px 0px;
	width:100%; }

section.formArea .formInner dl{
	margin: 0px 0px 30px 0px;
	padding:0;
	clear:both;
	overflow:hidden; }
section.formArea .formInner dl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	
section.formArea .formInner dl dt{
    position: relative;
	margin: 0px 0px 0px 0px;
	padding:10px 20px 0px 0px;
	width:35%;
	float:left;
    font-weight: 600;}
	
section.formArea .formInner dl dt img{width:40px; position: absolute; top:20px; right:10px;}

.icon-required{
	display: inline-block;
	margin-right: 4px;
	padding: 6px 6px;
	background-color: #e8340c;
	text-align: center; 
	font-size: 10px;
	line-height: 1;
	color:#fff; 
	border-radius: 3px; vertical-align: middle;}

  .formInner-Ttl{
	display: inline-block;
  width: 160px;
	padding: 1.2rem;
	background-color: var(--clr-blue);
	text-align: center; 
	font-size: 14px;
	line-height: 1;
	color:#fff; 
	border-radius: 3px; vertical-align: middle;}
	
	
section.formArea .formInner dl dd{
	margin: 0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	width:65%;
	float:right; vertical-align: middle;}

.pp-scroll {
    height: 290px;
    margin-bottom: 20px;
    padding: 3rem;
    overflow-x: hidden;
    overflow-y: scroll;
    border: #dddddd 1px solid;
    font-weight: 600!important;
}
	

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

input[type=text]:focus,
input[type=password]:focus,
textarea:focus{
  background: #fff!important;
  border:solid 2px var(--clr-blue)!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;}
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: 10px; }

select{width: 100%;}
select.s-size{width: 25%;}
select.m-size{width: 50%;}
textarea{width:100%; height: 350px; box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;}

:-moz-any(select):before {
  background-color: #fff; /* 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{
  padding-right: 35px;
  background:#fff url(../images/common/icon-arw.png) no-repeat 95%;
  background:none\9;
  text-indent: .01px; /*Firefox*/
  text-overflow: ""; /*Firefox*/ }

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

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

.complete{
  background:#ededed!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 auto;}

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

input[type=submit].btn,
input[type=button].btn {
	display: block;
	margin:0 0 0 auto;
	width: 75%;
	padding: 15px;
	color:#ffffff;
	background: #989898;
	border: none;
	text-align: center;
	text-decoration: none;
	font-size: 112%;
	line-height: 2;
	font-weight: 600;
	overflow: hidden;
	will-change: transition;
	border-radius: 50px;
	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: var(--clr-blue);
	color: white; }



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

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

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

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


/**/
input[type="checkbox"] {
	transform: scale(1.5);
  /*checked時の見た目*/ }

input:invalid {
  border: solid 1px red;
}

/**/
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 #dddddd;
  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: var(--clr-blue);
  cursor: default; }

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


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

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

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

@media screen and (max-width: 959px){
input[type=submit].btn,
input[type=button].btn {margin:30px 0 0;width: 100%;}

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





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

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

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


@media screen and (max-width: 768px){
section.formArea .formInner dl dt img{width:40px; position: absolute; top:10px; right:0px;}
.contact {}
.contact h3 {text-align: left;}

section.formArea .formInner dl{margin: 0px 0px 24px 0px; }
section.formArea .formInner dl dt{padding:0px 0px 0px 0px; width:100%; margin-bottom: 8px;}


.formInner-Ttl{
	display: inline-block;
  width: 160px;
	padding: 1.2rem;}
	
section.formArea .formInner dl dd{width:100%;float:left; vertical-align: middle;}

.pp-scroll {
    height: 290px;
    margin-bottom: 20px;
    padding: 3rem;
    overflow-x: hidden;
    overflow-y: scroll;
    border: #dddddd 1px solid;
    font-weight: 600!important;
}
	
/**/
section.thanks{padding:50px 20px;width:100%; }
section.thanks h2{text-align:left; }
section.thanks p{text-align:left; }
section.thanks p span{text-align:left; }
}
/*===============================================*/




/* 送信ボタン 一時停止（押せない状態） */
input[type=submit].btn:disabled,
input[type=submit].btn:disabled:hover,
input[type=button].btn:disabled,
input[type=button].btn:disabled:hover {
	background: #c8c8c8;
	color: #ffffff;
	cursor: not-allowed;
	opacity: 0.7; }