@charset "UTF-8";
/* CSS Document */

#wrapper{
	padding: 0 0 183px 0;
}
@media screen and (max-width:668px){
	#wrapper{
		padding: 0 0 177px 0;
	}
}

#client{
	margin: 0 0 40px 0;
	font-size: 4.0rem;
	color: #FA8700;
	text-align: center;
}
.guid{
	padding: 50px 40px 60px 40px;
	border-radius: 5px;
	text-align: center;
}
.guidHead{
	margin: 0 0 8px 0;
	font-size: 2.0rem;
	font-weight: bold;
}
.guidHead:before{
	font-family: "Font Awesome 5 Free";
	content: '\f06a';
	font-size: 2.2rem;
	font-weight: bold;
	margin: 0 5px 0 0;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.guidHead > .guideArea{
	margin: 18px 0 0 0;
}
.guidHead > .guideArea a span{
	width: 280px;
	padding: 8px 0;
	font-size: 1.5rem;
	background: #e8e8e8;
	border-radius: 4px;
	display: inline-block;
	position: relative;
}
.guidHead > .guideArea a span:before{
	content: '';
	width: 12px;
	height: 8px;
	background: url(../images/ico_arrowGr.svg) no-repeat;
	background-size: contain;
	position: absolute;
	right: 21px;
	top: 45%;
	transform: translateY(-50%);
	transition:right 0.2s;
}
.guidHead > .guideArea a span:hover:before{
	right: 16px;
}
@media screen and (max-width:668px){
	#client{
		margin: 0 0 15px 0;
		font-size: 2.7rem;
	}
	.guid{
		padding: 20px;
	}
	.guidHead{
		margin: 0 0 14px 0;
		font-size: 1.6rem;
		line-height: 150%;
	}
	.guidHead:before{
		font-size: 2.0rem;
		margin: 0 5px 0 0;
	}
	.guidHead > .guideArea{
		margin: 14px 0 0 0;
	}
	.guidHead > .guideArea a span{
		width: 90%;
		font-size: 1.4rem;
	}
}

.termArea{
	min-width: 770px;
	text-align: left;
	margin: 38px 0 0 0;
	display: inline-block;
}
.term{
	margin: 0 0 15px 0;
	display: -ms-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-align-items: center;
	align-items: center;
}
.term:last-child{
	margin: 0;
}
.termHead{
	width: 200px;
	margin: 0 15px 0 0;
	padding: 3px 10px;
	font-size: 1.6rem;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	letter-spacing: 0.1rem;
	background: #5db25f;
	border-radius: 15px;
	display: block;
	position: relative;
}
.termTxt {
	font-size: 2.0rem;
	font-weight: bold;
	color: #5db25f;
	letter-spacing: 0.3rem;
	line-height: 100%;
}
.termTxt span {
	font-size: 3.4rem;
	letter-spacing: 0.1rem;
}
@media screen and (max-width:668px){
	.termArea{
		min-width: 100%;
		text-align: left;
		margin: 15px 0;
	}
	.term{
		width: 100%;
		margin: 0 0 12px 0;
		display: block;
	}
	.termHead{
		min-width: 50%;
		max-width: 90%;
		width: 250px;
		margin: 0 auto 12px auto;
		padding: 3px 10px;
		font-size: 1.4rem;
		line-height: 130%;
		display: block;
	}
	.termTxt {
		font-size: 1.3rem;
		text-align: center;
		line-height: 160%;
	}
	.termTxt:after{
		padding: 0 5px;
		font-size: 1.0rem;
		vertical-align: text-top;
		line-height: 150%;
	}
	.termTxt span {
		font-size: 2.1rem;
	}
	p.note{
		text-align: left;
	}
}
.btnClmn li:not(:last-child) {
	margin: 0 0 0 17px;
}
.topBtnArea{
	margin: 60px 0 0 0;
	-ms-flex-direction:row-reverse;
	flex-direction:row-reverse;
}
.topBtnArea a{
	padding: 25px 25px 23px 25px;
	text-align: center;
	display: block;
}
.btnFaq,
.btnRegist{
	overflow: hidden;
	position: relative;
}
.btnFaq:before,
.btnRegist:before{
	content: '';
	width: 335px;
	height: 65px;
	position: absolute;
	top: 0;
	left: 0;
	transition: all .5s ease-out;
	display: block;
}
.btnFaq:before{
	background: url(../images/bg_faq01.png) center center no-repeat;
	background-size:100%;
}
.btnRegist:before{
	background: url(../images/bg_register01.png) center center no-repeat;
	background-size:100%;
}
.btnFaq:hover:before,
.btnRegist:hover:before{
	transform: scale(1.2);
}
.topBtnArea span{
	padding: 0 0 0 35px;
	color: #FFF;
	position: relative;
}
.btnFaq span:before,.btnRegist span:before{
	content: '';
	width: 25px;
	height: 25px;
	border-radius: 13px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.btnFaq span:before{
	background: url(../images/ico_faq.svg) center center no-repeat #5db25f;
	background-size: 15px 15px;
}
.btnRegist span:before{
	background: url(../images/ico_register.svg) center center no-repeat #5db25f;
	background-size: 14px 14px;
}
@media screen and (max-width:668px){
	.btnClmn li:not(:last-child) {
		margin: 0 0 15px 0;
	}
	.topBtnArea{
		margin: 35px 0 0 0;
	}
	.btnFaq:before,
	.btnRegist:before{
		width: 100%;
		height: 100%;
	}
	.topBtnArea span{
		padding: 0 0 0 35px;
		color: #FFF;
		position: relative;
	}
	.btnFaq span:before,.btnRegist span:before{
		content: '';
		width: 25px;
		height: 25px;
		border-radius: 13px;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	.btnFaq span:before{
		background: url(../images/ico_faq.svg) center center no-repeat #5db25f;
		background-size: 15px 15px;
	}
	.btnRegist span:before{
		background: url(../images/ico_register.svg) center center no-repeat #5db25f;
		background-size: 14px 14px;
	}
}

/* footer */
#footIn{
	width: 100%;
	height: auto;
	padding: 20px 0;
	color: #FFF;
	display: block;
	text-align: center;
}
#loginFoot{
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #FFF;
}
.loginTxt{
	margin: 0 0 5px 0;
	font-size: 2.0rem;
}
.loginTxt span{
	font-size: 1.4rem;
	vertical-align: middle;
}
@media screen and (max-width:668px){
	#footIn{
		height: auto;
		padding: 10px 0;
		text-align: left;
	}
	#loginFoot{
		margin: 0 0 10px 0;
		padding: 0 15px 10px 15px;
	}
	.loginTxt{
		margin: 0 0 5px 0;
		font-size: 2.0rem;
		text-align: center;
	}
	.loginTxt span{
		font-size: 1.4rem;
		vertical-align: middle;
	}
	#loginFoot p{
		font-size: 1.2rem;
		line-height: 140%;
	}
	#copyright{
		text-align: center;
	}
}
.linkArea{
	margin: 20px 0 0 0;
	display: -ms-flex;
	display: flex;
	-ms-justify-content: center;
	justify-content: center;
	flex-direction: column;
}
.linkArea .txtLink{
	margin: 20px auto 0 auto;
	display: block;
}