@charset "UTF-8";

/* ----------------------------------------
joinus
---------------------------------------- */

#joinus h2.joinus-title{
	margin:0.5em 0 0.5em 0;
	font-size:1.81rem;
	font-weight:normal;
}

#joinus h2.joinus-title img{
	padding-bottom:0.125em;
}

#joinus .flow-arrow{
	width:100%;
	max-width:50px;
	max-height:50px;
}

#joinus .flow-arrow-long{
	width:100%;
	max-width:50px;
	height:327px;
	
}

@media screen and (min-width: 0px) and (max-width: 991px){
	#joinus .flow-arrow-long{
		height:351px;
	}
}

@media screen and (min-width: 0px) and (max-width: 575px){
	#joinus .flow-arrow-long{
		height:426px;
	}
}

#joinus .flow-mail-icon{
	width:100%;
	max-width:100px;
}

.steps{
	width:99%;
	max-width:720px;
}

.steps .steps-item{
	padding:0;
}

.steps .step-indicator{
	display:block;
	clip-path:polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%);
	overflow:visible;
	width:120%;
	height:48px;
	background:#fff0f6;
	line-height:3em;
	color:#f069b2;
	font-weight:bold;
}

.steps .step-indicator.disabled{
	clip-path:polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
	background:#bc034a;
	color:#ffffff;
}

.steps .step-indicator.active{
	clip-path:polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%);
	background:#f069b2;
	color:#ffffff;
}

.steps .steps-item:first-child .step-indicator.active{
	clip-path:polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}

.steps .step-indicator.step1{
	background-image:url('/joinus/images/step_number_010.svg');
}

.steps .step-indicator.step2{
	background-image:url('/joinus/images/step_number_020.svg');
}

.steps .step-indicator.step3{
	background-image:url('/joinus/images/step_number_030.svg');
}

.steps .step-indicator.step4{
	background-image:url('/joinus/images/step_number_040.svg');
}

.steps .step-indicator.step5{
	background-image:url('/joinus/images/step_number_050.svg');
}

.steps .step-indicator.step6{
	background-image:url('/joinus/images/step_number_060.svg');
}

.steps .step-indicator.step7{
	background-image:url('/joinus/images/step_number_070.svg');
}

.steps .step-indicator.step8{
	background-image:url('/joinus/images/step_number_080.svg');
}

.steps .step-indicator.step9{
	background-image:url('/joinus/images/step_number_090.svg');
}

.steps .step-indicator.step10{
	background-image:url('/joinus/images/step_number_100.svg');
}

.steps .step-indicator.step1.disabled,
.steps .step-indicator.step1.active{
	background-image:url('/joinus/images/step_number_011.svg');
}

.steps .step-indicator.step2.disabled,
.steps .step-indicator.step2.active{
	background-image:url('/joinus/images/step_number_021.svg');
}

.steps .step-indicator.step3.disabled,
.steps .step-indicator.step3.active{
	background-image:url('/joinus/images/step_number_031.svg');
}

.steps .step-indicator.step4.disabled,
.steps .step-indicator.step4.active{
	background-image:url('/joinus/images/step_number_041.svg');
}

.steps .step-indicator.step5.disabled,
.steps .step-indicator.step5.active{
	background-image:url('/joinus/images/step_number_051.svg');
}

.steps .step-indicator.step6.disabled,
.steps .step-indicator.step6.active{
	background-image:url('/joinus/images/step_number_061.svg');
}

.steps .step-indicator.step7.disabled,
.steps .step-indicator.step7.active{
	background-image:url('/joinus/images/step_number_071.svg');
}

.steps .step-indicator.step8.disabled,
.steps .step-indicator.step8.active{
	background-image:url('/joinus/images/step_number_081.svg');
}

.steps .step-indicator.step9.disabled,
.steps .step-indicator.step9.active{
	background-image:url('/joinus/images/step_number_091.svg');
}

.steps .step-indicator.step10.disabled,
.steps .step-indicator.step10.active{
	background-image:url('/joinus/images/step_number_101.svg');
}

.steps .step-indicator.step1,
.steps .step-indicator.step2,
.steps .step-indicator.step3,
.steps .step-indicator.step4,
.steps .step-indicator.step5,
.steps .step-indicator.step6,
.steps .step-indicator.step7,
.steps .step-indicator.step8,
.steps .step-indicator.step9,
.steps .step-indicator.step10{
	background-position:50% 50%;
	background-size:23px;
	background-repeat:no-repeat;
}




.badge{
	transform: translateY(-0.2em);
}








/* ----------------------------------------
card_input
---------------------------------------- */
.input-cnumber,
.input-scode-1{
	width:100%;
	max-width:5em;
}

@media screen and (min-width: 0px) and (max-width: 575px){
	.input-cnumber,
	.input-scode-1{
		max-width:inherit;
	}
}

.expiration-1{
	width:5em;
}

.expiration-2{
	width:7em;
}








/* ----------------------------------------
card_regist_complete
---------------------------------------- */
.cc-detail{
	margin:auto;
	padding:1em;
}

@media screen and (min-width: 0px) and (max-width: 575px){
	.cc-detail{
		font-size:0.85rem;
	}
}

.cc-logo{
	width:100%;
	max-width:100px;
}








/* ----------------------------------------
#agreement
---------------------------------------- */

#agreement .terms{
	overflow:scroll;
	border:solid 1px #dee2e6;
	height:300px;
	overflow-y:scroll;
	padding:30px;
	line-height:1.6em;
	word-wrap:break-all;
	word-wrap:break-word;
}

#agreement .terms a{
	display:inline;
}

#agreement .terms p{
	margin-bottom:0;
	line-height:2.0em;
/* 	text-align:justify; */
}

#agreement .terms li{
	margin-bottom:0;
	line-height:2.0em;
}

#agreement .terms ol ul li{
	list-style-type:disc;
}

#agreement h3{
	margin:3.0em 0 0.5em 0;
	font-size:1.25rem;
}

#agreement .terms h3{
	margin:3.0em 0 1.5em 0;
	font-size:1.38rem;
}

#agreement .terms h4{
	margin:3.0em 0 1.5em 0;
	font-size:1.38rem;
}

#agreement .terms h5{
	margin-top:2.0em;
}

#agreement .terms .indent-m1{
	text-indent:-2.8em;margin-left:2.8em;
}

#agreement .terms .indent-m2{
	text-indent:-2em;margin-left:4em;
}

@media screen and (min-width: 0px) and (max-width: 767px){
	#agreement .terms{
		border:solid 1px #dee2e6;
/* 		height:auto; */
		padding:15px;
		line-height:1.6em;
	}
}

@media screen and (min-width: 0px) and (max-width: 575px){
}