/* :::::::::::::::::: regist :::::::::::::::::: */

.main.regist {
	overflow: inherit;
}

.registArea {
	text-align: center;
}
.registArea .tr{
	display: flex;
	flex-direction: column;
}

.registArea .accountMax{
	font-size: 3rem;
	font-weight: 500;
	position: relative;
}
.registArea .accountMax .unit{
	font-size: 1rem;
	display: inline-block;
	position: absolute;
	bottom: 0;
}
.registArea .planList{
	margin: 15px 0;
}
.registArea .planList .plan{
	display: inline-block;
	border: solid 8px #ccc;
	padding: 15px 15px 5px;
	margin: 5px 15px;
	cursor: pointer;
}
.registArea .planList .plan:hover{
	opacity: 0.9;
}
.registArea .planList .plan.on{
	border: solid 8px #FF5900;
}
.registArea .plan.standard{
	color: #fff;
	background: #6B705C;
}
.registArea .plan.business{
	color: #fff;
	background: #4A4B6F;
}

.registArea .orderForm{
	text-align: left;
	max-width: 900px;
	margin: 30px auto 0;
}

.registArea .orderForm .submit{
	text-align: center;
	position: relative;
}
.registArea .orderForm .account{
	text-align: center;
	vertical-align: middle;
}
.registArea .orderForm .account input {
	font-size: 1.25rem;
	width: 100px;
	height: auto;
	display: inline-block;
	margin: 0 5px;
}
.registArea .orderForm .account .accountMax{
	font-size: 2rem;
	font-weight: 500;
}
.registArea .orderForm input[type="submit"] {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.75;
	color: #fff;
	background: #ff8025;
	text-align: center;
	vertical-align: top;
	padding: 5px 8px 8px;
	margin: 5px auto;
	display: inline-block;
	border: none;
	border-radius: 3px;
	position: relative;
	transition: all 0.25s ease-out;
	width: 150px;
}
.registArea .orderForm .wpcf7-spinner{
	position: absolute;
	top: 13px;
}
.registArea .wpcf7 .wpcf7-response-output{
	text-align: center;
	padding: 5px 5px 8px;
}

.registArea .plan .name{
	font-size: 1.25rem;
}
.registArea .plan .info{
	font-size: 1.125rem;
	margin: 0 0 5px;
}
.registArea .plan .monthly{
	font-size: 1.5rem;
	font-weight: 500;
}
.registArea .plan .yearly{
	
}
.registArea .plan .label{
	font-size: 0.75rem;
	display: inline-block;
	margin-right: 5px;
}
.registArea .plan .monthly .label{
	font-size: 0.875rem;
	vertical-align: middle;
	margin-right: 8px;
}
.registArea .plan .unit{
	font-size: 0.75rem;
	display: inline-block;
	margin: 0 2px;
}
.registArea .plan .monthly .unit{
	font-size: 0.875rem;
}
.registArea .plan .tax{
	font-size: 0.75rem;
}

.registArea .planList .plan .desc{
	font-size: 0.875rem;
}

.planFormArea{
	margin: 90px 0 60px;
}


.registArea .form,
.registArea .swpm-validate-form {
	text-align: left;
	display: inline-block;
	position: relative;
}

.registArea input[type='text'], .registArea input[type='password'] {
	width: 100%;
}

.registArea input#last_name, .registArea input#first_name {
	width: 200px;
	display: inline-block;
}

.registArea td>label {
	margin: 0 15px 15px 0;
}

.registArea .name label {
	display: inline-block;
	margin: 0 5px 0 0;
}

.registArea tr, .registArea td {
	position: relative;
}

.registArea .button {
	text-align: center;
	margin-top: 20px;
}

.registArea .formError .formErrorContent {
	min-width: 200px;
}

.registArea #swpm_message.swpm_error ul{
	font-size: 0.875rem;
	color: #e62c2a;
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.formArea {
	text-align: left;
}

.formArea .error {
	font-size: 0.875rem;
	color: #e62c2a;
}
.formArea .required{
	color: #e62c2a;
}
.formArea .label{
	color: #888;
	width: 150px;
}
.formArea input,
.formArea select{
	display: inline-block;
}
.formArea input[name="uname"] {
	width: 300px;
	margin-right: 5px;
}

.formArea select[name="levelid"]{
	width: auto;
	min-width: 200px;
}

.formArea .levelArea .btn a{
	color: #e62c2a;
	background: #fff;
	border: solid 1px #e62c2a;
	margin-left: 15px;
}
.formArea .levelArea .btn a:hover {
	color: #fff;
	background: #e62c2a;
}

.formArea .button{
	position: relative;
}
.regist .loading{
	position: absolute;
	top: 2px;
	left: calc(50% - 145px);
}

/* :::::::::::::::::: smartphone :::::::::::::::::: */

/* 575px smartphone*/
@media (max-width: 575px) {
	
	
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.registArea .tr{
		flex-direction: row;
		margin-bottom: 15px;
	}
	.registArea .td{
		width: calc(100% - 165px);
	}

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	
}