@charset "UTF-8";
.er {color:red;}
.stepwrap {
	position:relative;
	margin: 0 auto;
	width: 200px;
}
.stepwrap span.ac {
	width:15px;
	height:15px;
	position:absolute;
	top: 1px;
	left: 38px;
 	border-radius: 50%;
	background:#182246;
	z-index:100;
	border:1px solid #fff;
	-moz-transition:all .5s ;
  -webkit-transition: all .5s ;
  -o-transition: all .5s ;
  -ms-transition: all .5s ;
  transition: all .5s ;
	animation: wobble 1s linear both  infinite;
}
@media(max-width:767px){
	.stepwrap span.ac {
		left: 39px;
	}
}
@keyframes wobble {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

#form{ }
#form .step{
	padding-bottom:3px;
	text-align: center;
	position:relative;
	counter-reset:number;
}
#form .step li{
	display: inline-block;
	background: #d3d3d3;
	color:#fff;
	border-radius: 50px;
	width: 18px;
	height: 18px;
	font-weight: bold;
	margin:0 5px;
	position:relative;
	line-height:1;
}
#form .step li span {
	display:block;
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 0.66rem;
	line-height:1;
	z-index: 101;
}
#form .step li:after {
	content:"";
	width:0px;
	display:none;
	position:absolute;
	top:8px;
	height:3px;
	-moz-transition:all .5s ;
  -webkit-transition: all .5s ;
  -o-transition: all .5s ;
  -ms-transition: all .5s ;
  transition: all .5s ;
	line-height:1;
}
#form .step li.active{
	background:none;
}
#form .step li.active {
	background:#182246;
}
#form .step li.active:after {
	width: 60px;
	background:#182246;
}
#form .step li:last-child:after {
	display:none;
}

#form .step:before {
	content:"";
	display:none;
	height:3px;
	width:120px;
	background:#d3d3d3;
	position:absolute;
	left:50%;
	margin-left:-60px;
	top:8px;
}
#form .step li.active{
	background:#182246;
}
#form dl{
	color:#000;
	padding:20px 0 12px;
	border-bottom: 1px solid #172145;
}
#form dl:last-of-type{
	border-bottom: none;
}
#form dl dt{
	font-size: 1.06rem;
	font-weight: bold;
	text-align: left;
	width: 100%;
	box-sizing: border-box;
}
#form dl dt.hissu:after{
	content:"必須";
  font-size: 0.73rem;
  font-weight: normal;
  color: #fff;
  background: #ee827c;
  border-radius: 5px;
  margin-left: 13px;
  display: inline-block;
  padding: 3px 8px;
  line-height: 1em;
  top: -3px;
  position: relative;
}
#form dl dd{
	width: 100%;
  display: -webkit-flex;
  display: flex;
 	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
}
#form dl dd p {width:100%;}
#form dl dd input[type="radio"]{
	display: none;
}
#form dl dd input[type="text"],#form dl dd input[type="email"],#form dl dd input[type="tel"]{
	border-radius: 10px;
	box-sizing:border-box;
	border:solid 1px #ccc;
	font-size: 1.0rem;
	padding:16px;
	margin-left:15px;
	width:100%;
	max-width:400px;
}

#form dl dd label{
	border-radius: 10px;
	border:solid 1px #cccccc;
	display: flex;
	align-items: center;
	justify-content: center;
	background:#fff;
	box-sizing:border-box;
	line-height:1.5;
	margin: 0 0 8px 15px;
	width:47%;
	text-align:center;
	height: 60px;
}
#form dl dd label.w100 {width:100%;}
#form dl dd label:last-of-type{ margin-right:0;}
#form dl dd a{
	border-radius: 10px;
	border:solid 1px #cccccc;
	display: flex;
	align-items: center;
	justify-content: center;
	background:#fff;
	box-sizing:border-box;
	line-height:1.5;
	margin: 0 0 8px 15px;
	width:47%;
	text-align:center;
	height: 60px;	
}

#form dl dd select{
	background: #fff;
	border-radius: 10px;
	border:solid 1px #cccccc;
	box-sizing:border-box;
	font-size: 1.0rem;
	line-height:1.5;
	margin-left: 15px;
	width:100%;
	height: 60px;
}

#form dl dd input[type="radio"]:checked + label{
	border:solid 1px #18a755;
	background: #18a755;
	color:#fff;
}

#form dl dd input::placeholder {
  color: #999;
}
/* Edge */
#form dl dd input::-ms-input-placeholder {
  color: #999;
}

#form .btn{
	text-align: center;
	padding:5px 0 0;
}
#form .btn {
}
#form .btn .nxtbtn{
	display:block;
	background: #4286f5 url("../assets/img/arrow1.png") no-repeat 94% center;
	background-size: 8px auto;
	box-shadow:0px 5px 3px rgba(236,236,236,.6);
	border-radius: 50px;
	color:#fff;
	font-size: 1.0rem;
	font-weight: bold;
	padding:16px 0;
	text-align:center;
	text-decoration: none;
	width: 33%;
	margin: 20px auto 0;
}
#form .btn .pvbtn{
	display:inline-block;
	color:#555;
	border-bottom:solid 3px #eee;
	border-radius: 50px;
	font-size:0.8em;
	font-weight: normal;
	padding:8px;
	text-decoration: none;
	border:none;
	text-align:center;
	margin:10px auto 0;
}

#success{
	padding:60px 0;
}
.pn {
	background:#fff;
	border-radius: 0;
	padding: 40px 60px;
	box-sizing: border-box;
	display: none;
}
.current {
	display:block;
}

.error_msg {
	width:100%;
	display:none;
	color:red;
	font-size:12px;
	text-align:left;
	margin-left: 15px;
}

.check-text{
	font-size: 0.8rem;
	text-align: center;
	margin: 10px 0 -15px;
}
.check-text a{
	text-decoration: underline;
}
@media(min-width:768px){
	#form dl dd input[type="text"], #form dl dd input[type="email"], #form dl dd input[type="tel"] {
		max-width:360px;
    margin-right: 15px;
    width: 43%;
	}

}
@media(max-width:767px){
	#form dl{
		display: block;
		padding: 0 0 3px;
	}
	#form dl dt{
		font-size: 0.9rem;
		margin: 5px 0;
		padding-left: 0;
		width: 100%;
	}
	#form dl dt.hissu:after{
		font-size: 0.65rem;
		top: -1px;
		margin-left: 8px;
		padding: 2px 5px;
	}
	#form dl dd{
		font-size: 0.8rem;
		margin:0 5px 5px 0;
		width: 100%;
	}
	#form dl dd label{
		box-sizing: border-box;
		margin:0 5px 5px 0;
		width: 48%;
		height: 38px;
		font-size: 13px;
	}
	#form dl dd select{
		font-size: 16px;
		margin:0 5px 5px 0;
		width: 100%;
		height: 46px;
	}
	#form dl dd input[type="text"], #form dl dd input[type="email"], #form dl dd input[type="tel"]{
		border-radius: 4px;
		font-size: 16px;
		padding: 12px 10px;
		margin-left: 0;
	}
	#form dl dd a{
		    width: 48%;
    height: 38px;
    font-size: 13px;
		margin-left:5px;
	}
	#form .btn .nxtbtn{
		background-size: 6px;
		border: none;
		box-sizing: border-box;
		margin: 6px 0;
		padding: 10px 0;
		width: 100%;
	}
	#form .btn .pvbtn{
		margin-top: 0;
	}

	.pn{
		border-radius: 10px;
		padding:10px 16px;
	}
	.error_msg{
		margin-left: 0;
	}
	.check-text{
		font-size: 0.73rem;
		text-align: center;
		margin: 10px 0 0;
		line-height: 1.25em;
	}
}