/* commont start */
*{
	margin: 0;
	padding: 0;	
	box-sizing: border-box;
	border: none;
}
.body{
	width: 1200px;
	margin: 0 auto;
}
.blue{
	color: #0066ff;
}
.line{
	display: inline-block;
	border-bottom: 5px solid #ffba00;
}	
.green{
	color: #00aea4;
}
.b{
	font-weight: bold;
}
div.reflection {
    height: 100%;
    width: 30px;
    position: absolute;
    top: -180px;
    left: 0;
    background-color: #fff;
    opacity: 0;
    transform: rotate(45deg);
    animation: reflection 3s cubic-bezier(0, 0.3, 0.6, 0)infinite;
}
@keyframes reflection {
	0% { transform: scale(0) rotate(45deg); opacity: 0; }
	80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { transform: scale(4) rotate(45deg); opacity: 1; }
	100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
.reflection__wrap{
	position: relative;
	overflow: hidden;
	margin: auto;
	width: fit-content;
	padding: 0 0 10px 0;
}
.reflection__inner{
	height: calc(100% + 8px);
    width: 100%;
    position: relative;
    overflow: hidden;
    transform: translateY(calc(-100% + 8px));
}
/* commont end */

/* header start */
.header{
	padding: 20px 0 0;
}
	.header__figure{
		width: 966px;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: left;
		margin-bottom: 20px;
	}
	.header__figure img{
		width: 300px;
	}
	.header__figure figcaption{
		font-weight: bold;
		font-size: 14px;
		margin-left: 30px;
	}
	.header-figcation__span--green{
		color: #01B1A7;
		font-size: 16px;
	}
	.header-figcation__span--blue{
		color: #005AAA;
		font-size: 16px;
	}
		
		.header__img{
			width: 100%;
			vertical-align: top;
		}

/* header end */

/* main start */
.main{
	background-color: #E7FFFF;
}
	.main__fieldset{
		width: 966px;
		margin: auto;
		padding: 100px 0;
		position: relative;
	}
		.main__legend{
			text-align: center;
			font-weight: bold;
			padding-top: 50px;
		}
			.main__legend span:nth-of-type(1),
			.main__legend span:nth-of-type(2){
				color: #1F8CE9;
				font-size: 20px;
			}
			.main__legend span:nth-of-type(3){
				color: #F67599;
				font-size: 22px;
			}
	.main__form--body{
		padding: 15px 5% 0;
		height: 425px;
		border: 1px solid #00B1A7;
		position: relative;
		background-color: #ffffff;
	}
		.main__form--body table{
			width: 100%;
		}
		.main__form--body tr:nth-of-type(11) td{
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
		}
	.main__form{
		width: calc(966px * 0.6);
		margin: 0 auto 0;
	}
	.main__form::after{
		/* content: ""; */
		display: inline-block;
		position: absolute;
		width: 300px;
		height: 435px;
		background: url(../images/background-before.png) no-repeat;
		background-size: contain;
		left: -100px;
		bottom: 0;
	}
	.main__form::before{
		content: "";
		display: inline-block;
		position: absolute;
		width: 322px;
		height: 287px;
		background: url(../images/background-before.png) no-repeat;
		background-size: contain;
		right: -120px;
		bottom: 0;
	}
	.main__form--steps{
		background-color: #00B1A7;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-around;
		padding: 10px;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		position: relative;
	}
		.main__form--steps .step{
			width: calc(88% / 5);
			background-color: #37a9d6;
			border-radius: 50px;
			line-height: 25px;
			text-align: center;
			font-size: 11px;
			position: relative;
			color: #b8e4f5;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 1px 5px;
		}
		.main__form--steps .step::after{
			content: '';
			width: 50px;
			height: 5px;
			background-color: #37a9d6;
			position: absolute;
			top: 50%;
			right: 0;
			transform: translate(100%,-50%);
			z-index: 0;
		}
		.main__form--steps .step:nth-of-type(5):after{
			content: none;
		}
			.main__span--circle{
				text-align: center;
				background-color: #1a90be;
				color: #fff;
				border-radius: 50%;
				width: 18px;
				height: 18px;
				font-size: 14px;
				padding: 1px;
				display: inline-block;
				line-height: 18px;
				margin-right: 3px;
			}
			.main__span--text{
				display: inline-block;
				width: calc(100% - 18px);
			}
			.main__form--steps .text{
				font-size: 12px;
				font-weight: bold;
				width: fit-content;
				color: #ffffff;
			}
				.main__form--steps .text span{
					font-size: 16px;
				}
			.main__form--steps .current{
				background-color: #fff;
			}
				.main__form--steps .current .main__span--text{
					color: #37a9d6;
				}

			.steps-bar{
				height: 20px;
				width: 85%;
				background-color: #eee;
				border-radius: 20px;
			}
			.step-progress{
				background-color: #5AE4D8;
				height: 100%;
				border-radius: 20px;
				width: 0%;
				transition: 1s;
			}
			.step-number{
				color: #ffffff;
				font-weight: bold;
			}
			.step-back{
				/* display: none; */
				cursor: pointer;
			}
			.step-back a::before {
				content: '';
				position: absolute;
				left: 8px;
				top: 50%;
				-webkit-transform: translate(3px, -50%) rotate(45deg);
				transform: translate(3px, -50%) rotate(45deg);
				border-left: 3px solid #ffffff;
				border-bottom: 3px solid #ffffff;
				width: 12px;
				height: 12px;
			}


				.main__form th{
					width: 100%;
					text-align: left;
					padding: 5px 0;
				}
				.main__form td{
					width: 100%;
					padding: 5px 0;
				}
				.form__span-pink{
					background-color: #f66d73;
					color:#ffffff;
					font-size: 12px;
					padding: 3px 6px;
					border-radius: 4px;
					margin-right: 8px;
				}
				.form__span-grey{
					color: #9c9c9c;
					font-size: 12px;
					padding: 3px 6px;
					border-radius: 4px;
					margin-right: 8px;
					border: 1px solid #9c9c9c;
				}
				.form__radio input{
					display: none;
				}
				.form__radio nobr{
					width: calc(98% / 3);
					margin: 5px 0;
				}
				.form__radio label{
					display: inline-block;
					width: 100%;
					padding: 15px 8px;
					border-radius: 8px;
					background-color: #eee;
					text-align: center;
					cursor: pointer;
					color: #333;
					font-weight: bold;
				}
				label[for=user_cagetory_type_5]{
					display: none;
				}
				.form__radio--selected{
					background-color: #01B2A7 !important;
					color: #fff !important;
				}
				.form__flex--between{
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
				}
				.form__flex--left{
					display: flex;
					justify-content: left;
				}
				.form__flex--center{
					align-items: center;
				}
				.form__input input{
					border: 1px solid #00B1A7;
					border-radius: 4px;
					font-size: 18px;
					height: 54px;
					padding: 8px 16px;
				}
				.form__input--subtitle{
					margin-bottom: 10px;
					font-size: 12px;
				}
				.form__input--subtitle>span:first-child{
					padding: 5px 10px;
					background-color: #DDDDDD;
					color: #ffffff;
					font-weight: bold;
				}
				.form__input--subtitle>span:first-child.must{
					background-color: #00B1A7;
				}
				.form__select{
					position: relative;
					border: 1px solid #00B1A7;
					font-size: 18px;
					padding: 5px 8px;
					width: 40%;
    				height: 54px;
					border-radius: 4px;
					/* appearance: none; */
					/* display: none; */
				}
				#birthday_year,
				#birthday_month,
				#birthday_day{
					border: 1px solid #00B1A7;
					border-radius: 4px;
					font-size: 18px;
    				height: 54px;
					width: calc(95%/3);
				}
				[name='user_address_1']{
					margin-left: 10px;
				}
				.form__span--toggle{
					margin-top: 23px;
					padding: 2px 24px 2px 13px;
					background-color: #e6e6e6;
					border-radius: 20px;
					display: inline-block;
					font-size: 12px;
					font-weight: 700;
					cursor: pointer;
					position: relative;
				}
				.form__span--toggle::after{
					font-family: Font Awesome\ 5 Free;
					content: "\F107";
					position: absolute;
					right: 3px;
					width: 14px;
					height: 14px;
					font-size: 11px;
					color: #333;
					padding: 2px;
					background-color: #fff;
					border-radius: 50%;
					text-align: center;
				}
				.form__span--toggle-open::after{
					content: "\F106";
				}
				.main__form th.width30{
					width: 35%;
				}
				.main__form td.width70{
					width: 65%;
				}
				.form__input input.width100{
					width: 100%;
				}
				.back_btn{
					display: block;
					/* background-color: #d8d8d8; */
					font-size: 14px;
					font-weight: bold;
					width: 66px;
					height: 38px;
					line-height: 38px;
					/* position: absolute; */
					left: 0;
					top: 50%;
					/* transform: translate(100%,-50%); */
					text-decoration: none;
					color: #767171;
					text-align: center;
					border-radius: 5px;
					margin: auto;
				}
				.next_btn{
					font-weight: bold;
					color: #fff;
					border-radius: 20px;
					margin: 0 40px;
					display: block;
					position: relative;
					background-image: linear-gradient(0deg,#EEEEEE 0,#EEEEEE);
					box-shadow: 0px 8px 0px #a7a7a7;
					height: 50px;
					line-height: 50px;
					width: 270px;
					font-size: 18px;
					text-decoration: none;
					text-align: center;
				}
				.next_btn::after{
					content: '▶';
				}
				.next_btn--on::before{
					content: "";
					position: absolute;
					background: url(../images/step__flow.png) no-repeat;
					background-size: contain;
					display: inline-block;
					width: 30px;
					height: 30px;
					right: -35px;
					animation: step__flow 1s ease-in-out 0s infinite alternate;
					top: calc(50% - 15px);
				}
				.next_btn--on{
					background-image: linear-gradient(0deg,#FEC12D 0,#FEC12D) !important;
					box-shadow: 0px 8px 0px #C69100 !important;
				}
					.next_btn img{
						width: 250px;
						vertical-align: top;
					}
				.submit_btn{
					font-weight: bold;
					color: #fff;
					border-radius: 8px;
					margin: 0 50px;
					display: block;
					position: relative;
					background-image: linear-gradient(0deg,#EEEEEE 0,#EEEEEE);
					height: 100px;
					line-height: 100px;
					width: 270px;
					font-size: 18px;
					text-decoration: none;
					text-align: center;
				}
				.submit_btn--on{
					background-image: linear-gradient(0deg,#FDC22E 0,#FF8D02);
				}
				.submit_btn--on::before{
					content: "";
					position: absolute;
					background: url(../images/step__flow.png) no-repeat;
					background-size: contain;
					display: inline-block;
					width: 30px;
					height: 30px;
					right: -35px;
					animation: step__flow 1s ease-in-out 0s infinite alternate;
					top: calc(50% - 15px);
				}
				.step_btn{
					position: relative;
					overflow: hidden;
				}
				.step2,
				.step3,
				.step4,
				.step5,
				.step6,
				.step7{
					display: none;
				}
				.step__btn-wrap{
					width: 100%;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translate(-50%,-15px);
					/* display: none; */
				}
				.form__span--num{
					color: #f66d73;
					font-weight: bold;
				}
				.form__postal{
					position: relative;
				}
				.form__postal--absolute{
					position: absolute;
					top: 0;
					transform: translateX(50%);
					background-color: #ffffff;
					display: none;
				}
				.step__flow--after{
					position: relative;
				}
				.step__flow--after::after{
					content: "";
					position: absolute;
					background: url(../images/step__flow.png) no-repeat;
					background-size: contain;
					display: inline-block;
					width: 30px;
					height: 30px;
					right: -35px;
					animation: step__flow 1s ease-in-out 0s infinite alternate;
				}
				#no_finger .step__flow--after::after{
					content: none;
				}
				.step__flow{
					width: 40px;
					height: 40px;
					transition: transform .3s ease-in-out,transform .3s ease-in-out;
					position: absolute;
					top: 15px;
					right: 0px;
				}
				.step__flow::after{
					content: "";
					background: url(../images/step__flow.png) no-repeat;
					background-size: contain;
					display: inline-block;
					width: 30px;
					height: 30px;
					animation: step__flow 1s ease-in-out 0s infinite alternate;
				}
				@keyframes step__flow{
					0%{transform:translateX(2px);transform:translateX(2px)}
					to{ransform:translateX(-4px);transform:translateX(-4px)}
				}
/* main end */

/* step start */
.Step{
	width: 100%;
	background-color: #f4f4f4;
	margin-bottom: 40px;
}
/* step start */

.footer{
	width: 100%;
	background-color: #333;
}
	.footer_box{
		width: 1200px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		padding: 40px 0;
		color: #ffffff;
	}
	.footer_box a{
		color: #ffffff;
	}
		.footer_box p{
			font-size: 14px;
			line-height: 25px;
		}