@charset "utf-8";
/*===============================================*/

/*  form.css */

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


/**/
.rec-Form{
	position: relative;
	padding: min(140px,5vw) 1.6rem;}

.rec-Form-Wrap{
	max-width: 768px;
	margin: 0 auto;

	dl{margin-bottom: 40px; 
		dt{margin: 16px 0 8px;  }
		dd{ }} 

	.--Ttl{

		h3{margin-bottom: min(48px,5vw); text-align: center;}
		h4{text-align: center;}

		p{
			margin-bottom: min(32px,5vw);
			text-align: center;}} }


.pp-scroll {
    height: 240px;
    margin-bottom: 20px;
    padding: 3rem;
    overflow-x: hidden;
    overflow-y: scroll;
    border: #dddddd 1px solid;

    h4{color: #EC5962;}
    p{margin-top: 1rem; padding-left:1em; text-indent:-1em; line-height: 1.8!important;}
}

/**/
@media screen and (max-width: 959px){
.rec-Form-Wrap{

	dl{margin-bottom: 24px; 
		dt{margin: 16px 0 8px;  }
		dd{ }} }

.top-Contact__Ttl{
    p{
        margin-bottom: 24px;
        text-align: center;}}

.pp-scroll {
    height: 240px;
    margin-bottom: 10px;
    padding: 1rem;

    h4{color: #EC5962;}
    p{margin-top: 1rem; padding-left:1em; text-indent:-1em; line-height: 1.8!important;}
}

}





/**/
.radio-check-btn{
li{margin-top:0px; 
p{} } }

/**/
.check-box-btn{
li{margin-right:16px; 
p{} } }

/**/
.form-2clm{
li{ font-weight: 600; margin-right: 32px;
p{} } }


/**/
.icon-required{
	display: inline-block;
	margin-right: 8px;
	padding: 4px 6px;
	background-color: #F37070;
	text-align: center; 
	font-size: 12px;
	line-height: 12px;
	color:#fff; 
	border-radius: 3px;
    font-weight: 400!important;}



/**/
label {
  position: relative;
  cursor: pointer;
  padding-left: 0px;}

/*radio----------*/
/*radio---------mw wp formで使うcss*/

.radio_btn input[type=radio].radio_btn_item{
display: none;
}
.radio_btn label {
display: inline-block;font-weight: 600!important;
}
.radio_btn .radio_btn_item + span {
/*padding-left: 25px;*/
display: inline-block;
position: relative;
}
.radio_btn .radio_btn_item + span::after,
.radio_btn .radio_btn_item + span::before {
border-radius: 50%;
content: '';
display: block;
position: absolute;
}
.radio_btn .radio_btn_item + span::before {
border: 1px solid #DBDBDB;
left: 0;
top: 6px;
height: 17px;
width: 17px;
}
.radio_btn .radio_btn_item + span::after{
background-color: #4ABCD2;
height: 9px;
left: 4px;
opacity: 0;
top: 10px;
width: 9px;
}
.radio_btn .radio_btn_item:checked + span::after {
opacity: 1;
}


/*radio----------通常htmlで使うcss

.radioBtn {
  font-weight: 500;
	font-size: 1.6rem;
}

.radioBtn::before,
.radioBtn::after {
  content: "";
  display: block; 
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
  top: 13px;}

.radioBtn::before {
  background-color: #fff;
  border: 1px solid #DBDBDB;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  left: 10px;
}

.radioBtn::after {
  background-color: #4ABCD2;
  border-radius: 50%;
  opacity: 0;
  width: 8px;
  height: 8px;
  left: 16px;
}

input:checked + .radioBtn::after {
  opacity: 1;
}

input:checked + .radioBtn::before {
  border: 1px solid #4ABCD2;
}*/


/*checkBox----------*/
/*checkBox----------mw wp formで使うcss*/

.check_btn input[type=checkbox].check_btn_item{
display: none;
}
.check_btn label {
display: inline-block;font-weight: 600!important;
}
.check_btn .check_btn_item + span {
padding-left: 28px;
display: inline-block;
position: relative;
}
.check_btn .check_btn_item + span::after,
.check_btn .check_btn_item + span::before {
content: '';
display: block;
position: absolute;
top: 5px;
}
.check_btn .check_btn_item + span::before {
border: 1px solid #DBDBDB;
border-radius: 3px;
left: 0;
height: 20px;
width: 20px;
}
.check_btn .check_btn_item + span::after{
border: none;
width: 10px;
height: 10px;
left: 5px;
opacity: 0;
top: 10px;
background-color: #4ABCD2;
}
.check_btn .check_btn_item:checked + span::after {
opacity: 1;
}

/*checkBox----------通常htmlで使うcss

.checkBox {
  font-weight: 500;
	font-size: 1.8rem;
}

.checkBox::before,
.checkBox::after {
  content: "";
  display: block; 
  position: absolute;
  transform: translateY(-50%);
  top: 55%;}

.checkBox::before {
  background-color: #fff;
  border: 1px solid #DBDBDB;
  width: 20px;
  height: 20px;
  left: 5px;
}

.checkBox::after {
  background-color: #4ABCD2;
  opacity: 0;
  width: 8px;
  height: 8px;
  left: 11px;
}

input:checked + .checkBox::before { border: 1px solid #4ABCD2;}

input:checked + .checkBox::after {
  opacity: 1;
    border: 1px solid #4ABCD2;
}*/


.visually-hidden {
 position: absolute;
 white-space: nowrap;
 border: 0;
 clip: rect(0 0 0 0);
 clip-path: inset(50%);
 overflow: hidden;
 height: 1px;
 width: 1px;
 margin: -1px;
 padding: 0;
}


@media screen and (max-width: 600px){
.step-Body__Form{margin:0px auto 18px;
.radio-check{margin-bottom: 24px;li{margin-top:8px; } }
dl{margin-bottom: 18px; 
dt{margin-bottom: 4px;  }
dd{ }} }

label {padding-left: 30px;}
label::before,
label::after {top: 10px;}
	
.checkBox::before,
.checkBox::after {top: 14px;}

}




/*! #######################################################################

	input

####################################################################### */

input[type=text],
input[type=password],
textarea,
select{
  background: #fff;
  padding: 1.6rem;
  font-size:1.4rem;
  border:1px solid #DBDBDB;
  transition:border-color .1s linear;
  outline: none; 
	border-radius: 5px!important; 
	overflow: hidden;

}

input[type=password].fit-size {
    width: 100%;
    box-sizing: border-box; }

input[type=text]:focus,
input[type=password]:focus,
textarea:focus{
  background: #fff!important;
  border:solid 1px #4ABCD2!important;
  padding: 1.6rem; 
	border-radius: 5px;
    box-shadow: 0px 0px 0px 2px rgba(74, 188, 210, 1); }

/**/
input[type=text]:focus.error-msg,
input[type=password]:focus.error-msg,
textarea:focus.error-msg{
  background: #FDF2F2!important;
  border:solid 1px #EC5962!important;
  padding: 1rem; 
	border-radius: 5px; 
    box-shadow: 0px 0px 0px 0px rgba(74, 188, 210, 1); }

::placeholder {
  color: #A5A5A5;
	font-family:'Noto Sans JP', sans-serif!important; 
	font-weight: 400;
}



input[type=text].ss-size{width:20px;}
input[type=text].s-size{width:60px;}
input[type=text].m-size{width:240px;}
input[type=text].l-size{width:70%;}
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: 0; }

select{width: 100%;}
select.s-size{width: 25%;}
select.m-size{width: 240px;}
textarea{width:100%; height: 150px; 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{
  background:#fff url(../images/common/icon_arrow.svg) no-repeat 97%;
  background:none\9;
  text-indent: .01px; /*Firefox*/
  text-overflow: ""; /*Firefox*/ 
	font-family:'Noto Sans JP', sans-serif!important; }

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

select:focus{
  background:#fff url(../images/common/icon_arrow.svg) no-repeat 97%;
  background:none\9;
  text-indent: .01px; /*Firefox*/
  text-overflow: ""; /*Firefox*/ 
	color:#121212;}

.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:100px auto 0; 
	width: 100%; 
	text-align: center;
	
	input{
	margin:0 auto;
		border-radius: 5px;
	font-family:'Noto Sans JP', sans-serif!important;}

    button{
	margin:0 auto;
		border-radius: 5px;
	font-family:'Noto Sans JP', sans-serif!important;}
}


/**/

button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
font-family:'Noto Sans JP', sans-serif!important;
}


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


/**/

.button-Cntct{
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: 0.25s cubic-bezier(.55,.01,1,.5); 
	padding:1.6rem 1.6rem;
	width: min(90%, 300px);
	height:auto;
	font-size: 1.6rem;
    line-height: 1;
	font-weight: 700;
	text-align: center; }

.hvr-Primary{color: #333333!important; background: #fff; border: 3px solid #333333; border-radius: 5px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
&:hover{color: #333333!important; border-radius: 5px; border: 3px solid #4ABCD2; background:#4ABCD2; letter-spacing: 0.15em; box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.5);} }

/**/
.btn_back{
  border: none;
  outline: none;
  background: none;

	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	padding:1.6rem;
	width: min(90%, 100px);
	height:auto;
	font-size: 1.6rem;
    line-height: 1;
	font-weight: 500;
	text-align: center; }

.hvr-Back{color: #fff!important; background: #707070; border-radius: 3px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2); }


@media screen and (max-width: 600px){
.btnbox{margin:50px auto 0; width: 100%; text-align: center; button{margin:0 auto;}}
input[type=text].m-size{width:100%;}
input[type=text].l-size{width:100%;}
}