html{
	font-size: 62.5%;		
}

h2 {
font-weight: inherit;
font-size: inherit;
text-align: inherit;
margin: 0;
line-height: inherit;
}

a{
	color: #000;
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}

.no-scroll{
	position: fixed;
	overflow: scroll;
}
.no-scroll-body{
	position: fixed;
	overflow: hidden;
}


#use-apps .list{
	opacity: 0;
	-webkit-transform: translateY(50px);
	-ms-transform: translateY(50px);
	-o-transform: translateY(50px);
	transform: translateY(50px);
	-webkit-transition: transform 300ms ease, opacity 300ms ease;
	-o-transition: transform 300ms ease, opacity 300ms ease;
	transition: transform 300ms ease, opacity 300ms ease;		
}
#use-apps .list.on{
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

#use-store .store-list li{
	opacity: 0;
	-webkit-transform: translateY(50px);
	-ms-transform: translateY(50px);
	-o-transform: translateY(50px);
	transform: translateY(50px);
	-webkit-transition: transform 300ms ease, opacity 300ms ease;
	-o-transition: transform 300ms ease, opacity 300ms ease;
	transition: transform 300ms ease, opacity 300ms ease;	
}
#use-store .store-list li.on{
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

#faq .faq-list li{
	opacity: 0;
	-webkit-transform: translateY(50px);
	-ms-transform: translateY(50px);
	-o-transform: translateY(50px);
	transform: translateY(50px);
	-webkit-transition: transform 300ms ease, opacity 300ms ease;
	-o-transition: transform 300ms ease, opacity 300ms ease;
	transition: transform 300ms ease, opacity 300ms ease;		
}
#faq .faq-list li.on{
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);	
}


.motion-up{
	opacity: 0;
	-webkit-transform: translateY(50px);
	-ms-transform: translateY(50px);
	-o-transform: translateY(50px);
	transform: translateY(50px);
	-webkit-transition: transform 300ms ease, opacity 300ms ease;
	-o-transition: transform 300ms ease, opacity 300ms ease;
	transition: transform 300ms ease, opacity 300ms ease;		
}
.motion-up.on{
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}


.mode-ios .btn-dl li:nth-child(2){
	display: none !important;
}
.mode-android .btn-dl li:nth-child(1){
	display: none !important;
}

body{
	font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
}

/* --- 非表示 ---- */
#campaign{
	display: none;
}
#service{
	margin: 0;
}
/* --- /非表示 ---- */

@media screen and (min-width: 769px) {

	.sp{
		display: none;
	}
	.ignore-pc{
		display: none;
	}
	body{
		font-size: 1.4rem;
	}
	#gfooter a,footer small{
		font-size: 1.2rem;
	}
	#wrap{
		position: relative;
		background: #f1f1f1;
		overflow: hidden;

	}
	section + section{
		margin: 65px 0 0;
	}

	/* kv
	--------------------------------------------------------------- */

	#kv{
		width: 100%;
		height: 635px;
		overflow: hidden;
		background: url(../img/kv_bg.jpg) 50% 50% no-repeat;
		background-size: cover;
	}
	.kv-box{
		margin: auto;
	}
	.kv-inner{
		width: 960px;
		height: 635px;
		box-sizing: border-box;
		-webkit-transform-origin: top left;
		-moz-transform-origin: top left;
		-ms-transform-origin: top left;
		-o-transform-origin: top left;
		transform-origin: top left;
	}
	.kv-inner .kv-txt{
		position: relative;
		float: left;
		width: 50%;
		height: 100%;
		box-sizing: border-box;
	}
	.kv-inner .kv-txt .kv-txt-elm{
		position: absolute;
		top: 50%;
		width: 100%;
		padding: 0 0 0 30px;

		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);

		box-sizing: border-box;

	}
	.kv-inner .kv-txt h1{
		margin: auto;
		padding: 50px 0 0;
		width: 289px;
		opacity: 0;
		-webkit-transition: opacity 300ms ease;
		-o-transition: opacity 300ms ease;
		transition: opacity 300ms ease;
	}
	.kv-inner .kv-txt h1.on{
		opacity: 1;	
	}

	.kv-inner .kv-txt h1 img{
		width: 100%;
		height: auto;
	}

	.kv-inner .kv-txt .catch{
		text-align: center;
		opacity: 0;
		-webkit-transform: translateY(20px);
		-ms-transform: translateY(20px);
		-o-transform: translateY(20px);
		transform: translateY(20px);

		-webkit-transition: transform 300ms ease ,opacity 300ms ease;
		-o-transition: transform 300ms ease ,opacity 300ms ease;
		transition: transform 300ms ease ,opacity 300ms ease;
	}
	.kv-inner .kv-txt .catch.on{
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);		
	}

	.kv-inner .kv-txt .catch span{
		position: relative;
		display: inline-block;
		font-size: 2.4rem;
		text-align: center;
		font-weight: bold;
	}
	.kv-inner .kv-txt .catch span:before,
	.kv-inner .kv-txt .catch span:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		height: 35px;
		width: 4px;
		background: #000;
	}

	.kv-inner .kv-txt .catch span:before{
		left: -20px;
		-webkit-transform: rotate(-30deg);
		-ms-transform: rotate(-30deg);
		-o-transform: rotate(-30deg);
		transform: rotate(-30deg);
	}
	.kv-inner .kv-txt .catch span:after{
		right: -20px;
		-webkit-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
		-o-transform: rotate(30deg);
		transform: rotate(30deg);
	}

	.kv-inner .kv-txt .lead{
		padding: 45px 0 0;
		font-size: 2.4rem;
		font-weight: bold;
		line-height: 1.8;
		text-align: center;
		opacity: 0;
		letter-spacing: -1px;
		-webkit-transition: opacity 300ms ease;
		-o-transition: opacity 300ms ease;
		transition: opacity 300ms ease;

	}
	.kv-inner .kv-txt .lead.on{
		opacity: 1;
	}



	.kv-inner .kv-phone{
		float: right;
		width: 50%;
		height: 100%;
		box-sizing: border-box;

	}
	.kv-inner .kv-phone .kv-phone-elm{
		position: relative;
		height: 100%;
	}

	.kv-inner figure{
		position: absolute;
		width: 100%;
		padding: 0 10px 0 30px;
		max-width: 420px;
		bottom: 0;
		right: 0;
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		-o-transform: translateY(100%);
		transform: translateY(100%);
		
		-webkit-transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
		-o-transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
		transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

		box-sizing: border-box;

	}
	.kv-inner figure.on{
		-webkit-transform: translateY(80px);
		-ms-transform: translateY(80px);
		-o-transform: translateY(80px);
		transform: translateY(80px);		
	}

	.kv-inner figure img{
		width: 100%;
		height: auto;
	}


	/* contents
	--------------------------------------------------------------- */


	.contents{
		padding: 70px 60px;
	}	

	.contents section{
		padding: 0 15px;
		background: #fff;
		box-sizing: border-box;
	}
	.col{
		margin: 0 auto;
		padding: 100px 0;
		max-width: 960px;
		box-sizing: border-box;
	}
	.contents-header{
		padding: 0 0 100px;
	}
	.contents-header h2{
		font-weight: bold;
		text-align: center;
		font-size: 3.6rem;
		letter-spacing: 4px;
		line-height: 1;
	}
	.contents-header h2 span{
		display: block;
	}
	.contents-header h2 span + span{
		margin: 20px 0 0;
	}
	.contents-header h2 span i{
		position: relative;
		display: inline-block;
		padding: 0 0 10px;
	}
	.contents-header h2 span i:after{
		position: absolute;
		content: "";
		bottom: 0;
		left: -15px;
		display: block;
		height: 4px;
		width: 0;
		background: #000;

		-webkit-transition: width 200ms ease;
		-o-transition: width 200ms ease;
		transition: width 200ms ease;

	}
	.contents-header h2 span.on i:after{
		width: calc(100% + 30px);
	}


/*	.contents .detail h3{
		font-size: 3.2rem;
		font-weight: bold;
		color: #004098;
	}
*/
	.contents .detail .notice{
		padding: 80px 0 0;
	}
	.contents .detail .notice li{
		font-size: 1.4rem;
	}
	.contents .detail .notice li + li{
		margin: 10px 0 0;
	}




	/* flow
	--------------------------------------------------------------- */


	.flow-box figure{
		position: relative;
		width: 480px;
	}
	.flow-box figure img{
		width: 100%;
		height: auto;
	}
	.flow-box figure span{
		position: absolute;
		display: block;
		text-indent: -9999px;
		width: 121px;
		height: 121px;
	}
	.flow-box figure span:after{
		content: "";
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 14px 30px 14px;	
		border-color:  transparent transparent #074296 transparent;
		z-index: 1000;
	}
	.flow-box .flow-txt{
		position: relative;
		width: 480px;
	}

	.flow-box .flow-txt-inner{
		position: absolute;
		top: 50%;
		width: 100%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		text-align: center;
	}
	.flow-box .flow-txt-inner dl{
		display: inline-block;
		text-align: left;
	}
	.flow-box .flow-txt dl dt{
		font-size: 4rem;
		font-weight: bold;
		line-height: 1.5;
		color: #004098;
	}
	.flow-box .flow-txt dl dd{
		padding: 25px 0 0;
		font-size: 1.8rem;
		line-height: 1.5;
	}
	.flow-box + .flow-box{
		margin-top: 100px;
	}
	
	.flow-box1 .flow-box-inner{
		display: flex;
		width: 960px;
		-webkit-transform-origin: top left;
		-moz-transform-origin: top left;
		-ms-transform-origin: top left;
		-o-transform-origin: top left;
		transform-origin: top left;
	}
	.flow-box2 .flow-box-inner{
		display: flex;
		width: 960px;
		-webkit-transform-origin: top left;
		-moz-transform-origin: top left;
		-ms-transform-origin: top left;
		-o-transform-origin: top left;
		transform-origin: top left;

		justify-content: space-between;
		flex-direction: row-reverse;

	}



	.flow-box1 figure span:after{
		left: 4px;
		bottom: 4px;
		-webkit-transform: rotate(-135deg);
		-ms-transform: rotate(-135deg);
		-o-transform: rotate(-135deg);
		transform: rotate(-135deg);
	}
	.flow-box2 figure span:after{
		right: 4px;
		bottom: 4px;
		-webkit-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		-o-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	.flow-box1 figure span{
		top: -30px;
		right: 10px;
		-webkit-transform-origin: bottom left;
		-moz-transform-origin: bottom left;
		-ms-transform-origin: bottom left;
		-o-transform-origin: bottom left;
		transform-origin: bottom left;
	}
	.flow-box2 figure span{
		top: -30px;
		left: -30px;
		-webkit-transform-origin: bottom right;
		-moz-transform-origin: bottom right;
		-ms-transform-origin: bottom right;
		-o-transform-origin: bottom right;
		transform-origin: bottom right;
	}
	


	.flow-box .flow-txt{
		opacity: 0;
		-webkit-transform: translateY(50px);
		-ms-transform: translateY(50px);
		-o-transform: translateY(50px);
		transform: translateY(50px);
		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;
	}
	.flow-box .flow-txt.on{
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}

	.flow-box figure span{
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);	
		-webkit-transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
		-o-transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
		transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
	}
	.flow-box figure span.on{
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);	
	}



	#howto .flow-box figure:before{
		position: absolute;
		content: '';
		left: 50%;
		display: block;
		width: 41px;
		height: 81px;
		background: url(../img/obj_l.png) 0 0 no-repeat;
		background-size: 100% 100%;
		opacity: 0;
		-webkit-transform: translateX(30px);
		-ms-transform: translateX(30px);
		-o-transform: translateX(30px);
		transform: translateX(30px);
		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;

	}
	#howto .flow-box figure:after{
		position: absolute;
		content: '';
		right: 50%;
		display: block;
		width: 41px;
		height: 81px;
		background: url(../img/obj_r.png) 0 0 no-repeat;
		background-size: 100% 100%;
		opacity: 0;
		-webkit-transform: translateX(-30px);
		-ms-transform: translateX(-30px);
		-o-transform: translateX(-30px);
		transform: translateX(-30px);
		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;
	}
	.step1 figure:before{
		top: 170px;
		margin: 0 0 0 -160px;
	}
	.step1 figure:after{
		top: 170px;
		margin: 0 -160px 0 0;
	}
	.step2 figure:before{
		top: 130px;
		margin: 0 0 0 -190px;
	}
	.step2 figure:after{
		top: 130px;
		margin: 0 -190px 0 0;
	}
	.step3 figure:before{
		top: 180px;
		margin: 0 0 0 -170px;
	}
	.step3 figure:after{
		top: 180px;
		margin: 0 -170px 0 0;
	}
	.step4 figure:before{
		top: 110px;
		margin: 0 0 0 -190px;
	}
	.step4 figure:after{
		top: 110px;
		margin: 0 -190px 0 0;
	}

	#howto .flow-box figure img{
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
		-webkit-transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.3);
		-o-transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.3);
		transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.3);
	}
	#howto .flow-box.on figure img{
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);	
	}
	#howto .flow-box figure.on:before,
	#howto .flow-box figure.on:after{
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}


	/* btn
	--------------------------------------------------------------- */
	.btn-list{
		padding: 100px 0 0;
		opacity: 0;
		-webkit-transform: translateY(20px);
		-ms-transform: translateY(20px);
		-o-transform: translateY(20px);
		transform: translateY(20px);

		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;
	}
	.btn-list.on{
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	.btn-list.hidden{
		display: none;
	}
	.btn-list.visible{
		display: block;
	}
	
	#kv .btn-list{
		padding: 40px 0 0;
	}
	#kv .btn-list a{
		max-width: inherit;
	}	
/*	#use-apps .btn-list{
		padding: 0;
	}*/
	/*非表示*/
	#faq .btn-list{
		display: none;
		padding: 40px 0 0;
	}

	.btn-list a{
		position: relative;
		display: block;
		margin:auto;
		max-width: 405px;
		width: 100%;
		height: 50px;
		background: #074296;
		border-radius: 25px;
		color: #fff;
		font-size: 1.8rem;
		font-weight: bold;
		text-align: center;
		line-height: 50px;
	}

	.btn-list a:after{
		position: absolute;
		content: "";
		margin:auto;
		top: 0;
		bottom: 0;
		right: 20px;
		display: block;
		width: 10px;
		height: 15px;
		background: url(../img/arrow_btn.png) 50% 50% no-repeat;
		background-size: 100% 100%;
	}
	.btn-list a:hover{
		text-decoration: none;
		opacity: 0.7;
		-webkit-transition: opacity 300ms ease;
		-o-transition: opacity 300ms ease;
		transition: opacity 300ms ease;
	}


	/* campaign
	--------------------------------------------------------------- */
	
	#campaign figure{
		margin: 20px 0 0;
		width: 100%;
	}




	/* service
	--------------------------------------------------------------- */
	#service .point-txt h3{
		display: none;
	}
	#service .point-header h3{
		text-align: center;
		font-size: 4rem;
		font-weight: bold;
		color: #004098;
	}
	#service .point-header{
		position: relative;
	}
	#service .point-header span{
		position: absolute;
		display: block;
		text-indent: -9999px;
		width: 120px;
		height: 120px;
		background: url(../img/bal_point.png) 50% 50% no-repeat;	
	}
	#service .point-header span:after{
		content: "";
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 14px 30px 14px;	
		border-color:  transparent transparent #074296 transparent;
		z-index: 1000;
	}
	#service .point-header span:after{
		right: 4px;
		bottom: 4px;
		-webkit-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		-o-transform: rotate(135deg);
		transform: rotate(135deg);
	}

	#service .point-box-inner{
		margin-top: 90px;
	}

	#service .point-inner{
		display: flex;
		width: 960px;
		transform-origin: top left;
	}
	#service .point-box-inner .point-fig{
		margin-top: -40px;
		width: 380px;
	}
	#service .point-box-inner .point-fig figure{
		position: relative;
		text-align: center;
	}
	#service .point-box-inner .point-fig figure img{
		width: auto;
		height: 169px;
	}
	#service .point-box-inner .point-txt{
		padding: 0 0 0 30px;
		width: calc(100% - 380px);
		box-sizing: border-box;
	}
	#service .point-box-inner .point-txt p{
		font-size: 18px;
	}


	#service .point-header h3{
		opacity: 0;
		-webkit-transform: translateY(50px);
		-ms-transform: translateY(50px);
		-o-transform: translateY(50px);
		transform: translateY(50px);
		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;
	}
	#service .point-header h3.on{
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	#service .point-header span{
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);	
		-webkit-transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
		-o-transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
		transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
	}
	#service .point-header span.on{
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);	
	}



	#service .point-box figure:before{
		position: absolute;
		content: '';
		top: 50%;
		left: 50%;
		margin-left: -160px;
		display: block;
		width: 41px;
		height: 81px;
		background: url(../img/obj_l.png) 0 0 no-repeat;
		background-size: 100% 100%;
		opacity: 0;
		-webkit-transform: translateX(30px);
		-ms-transform: translateX(30px);
		-o-transform: translateX(30px);
		transform: translateX(30px);
		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;

	}
	#service .point-box figure:after{
		position: absolute;
		content: '';
		top: 50%;
		right: 50%;
		margin-right: -160px;
		display: block;
		width: 41px;
		height: 81px;
		background: url(../img/obj_r.png) 0 0 no-repeat;
		background-size: 100% 100%;
		opacity: 0;
		-webkit-transform: translateX(-30px);
		-ms-transform: translateX(-30px);
		-o-transform: translateX(-30px);
		transform: translateX(-30px);
		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;
	}
	#service .point-box figure.on:before,
	#service .point-box figure.on:after{
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}
	#service .point-box figure img{
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
		-webkit-transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.3);
		-o-transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.3);
		transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.3);
	}
	#service .point-box.on figure img{
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);	
	}

	#service .point-box .point-txt{
		opacity: 0;
		-webkit-transform: translateY(50px);
		-ms-transform: translateY(50px);
		-o-transform: translateY(50px);
		transform: translateY(50px);
		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;
	}
	#service .point-box .point-txt.on{
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}



	/* howto
	--------------------------------------------------------------- */

	#howto .step1 figure span{
		background: url(../img/bal_step1.png) 50% 50% no-repeat;		
	}
	#howto .step2 figure span{
		background: url(../img/bal_step2.png) 50% 50% no-repeat;		
	}
	#howto .step3 figure span{
		background: url(../img/bal_step3.png) 50% 50% no-repeat;		
	}
	#howto .step4 figure span{
		background: url(../img/bal_step4.png) 50% 50% no-repeat;		
	}


	/* use-apps
	--------------------------------------------------------------- */

	#use-apps .appli-list > ul{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	#use-apps .appli-list > ul > li{
		width: calc(50% - 40px);
	}
	#use-apps .appli-list > ul > li:nth-child(even){
		margin-left: 80px; 
	}
	#use-apps .appli-list > ul > li:nth-child(n+3){
		margin-top: 80px;

	}

	#use-apps .btn-dl{
		margin: 40px 0 0;
		font-size: 0;
		text-align: center;
	}
	#use-apps .btn-dl li{
		display: inline-block;
		width: calc(50% - 5px);
	}
	#use-apps .btn-dl li + li{
		margin: 0 0 0 10px;
	}

	#use-apps .appli-list li a{
		display: block;
		color: #000;
		-webkit-transition: opacity 300ms ease;
		-o-transition: opacity 300ms ease;
		transition: opacity 300ms ease;
	}
	#use-apps .appli-list li a:hover{
		opacity: 0.7;
	}
	#use-apps .btn-dl img{
		width: 100%;
		height: auto;
	}
	#use-apps figure{
		margin: auto;
		width: 140px;
		border: 2px solid #ccccca;
		border-radius: 28px;
		overflow: hidden;
	}
	#use-apps figure img{
		width: 100%;
		height: auto;
	}
	#use-apps li span{
		display: block;
		padding: 30px 0 0;
		text-align: center;
		color: #000;
		font-weight: bold;
		font-size: 1.6rem;
		line-height: 1.5;
	}


	/* use-store
	--------------------------------------------------------------- */

	#use-store .store-list ul{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	#use-store .store-list li{
		width: 20%;
	}
	#use-store .store-list li + li{
		margin-left: 70px; 
	}
	#use-store .store-list li:nth-child(n+6){
		margin-top: 40px;
	}
	#use-store .store-list li:first-child figure{
		margin: auto;
		background: none;
	}
	#use-store .store-list li:first-child figure{
		margin: auto;
		background: none;
	}
	#use-store .store-list li a{
		display: block;
		color: #000;
		-webkit-transition: opacity 300ms ease;
		-o-transition: opacity 300ms ease;
		transition: opacity 300ms ease;
	}
	#use-store .store-list li a:hover{
		opacity: 0.7;
	}
	#use-store figure{
		margin: auto;
		overflow: hidden;
		background: #ddd;
	}
	#use-store figure img{
		width: 100%;
		height: auto;
	}
	#use-store li span{
		display: block;
		padding: 20px 0 0;
		text-align: center;
		color: #000;
		font-size: 1.6rem;
		line-height: 1.5;
	}

	/* faq
	--------------------------------------------------------------- */

	#faq .faq-list li{
		padding: 40px 30px;
		border-bottom: 1px solid #b9b9b9;
		font-size: 1.8rem;
		line-height: 1.5;
	}
	#faq .faq-list li:first-child{
		border-top: 1px solid #b9b9b9;
	}
	#faq .faq-list dl dt{
		position: relative;
		padding: 0 0 0 50px;
	}
	#faq .faq-list dl dd{
		position: relative;
		margin-top: 30px;
		padding: 0 0 0 50px;
	}
	#faq .faq-list dl dt:before{
		position: absolute;
		top: 0;
		left: 0;
		content: "Q.";
		font-size: 2.4rem;
		line-height: 1;
		font-weight: bold;
	}
	#faq .faq-list dl dd:before{
		position: absolute;
		top: 0;
		left: 0;
		content: "A.";
		font-size: 2.4rem;
		line-height: 1;
		font-weight: bold;
		color: #074296;

	}
	#faq .faq-list li a{
		color: #333;
		text-decoration: underline;
	}
	#faq .faq-list li a:hover{
		text-decoration: none;
	}

	/* attention
	--------------------------------------------------------------- */
	
	#attention{
		padding: 0 60px 140px;
		background: #fff;
	}
	#attention .col{
		padding: 100px 0 0;
	}
	#attention .attention-header{
		padding-bottom: 80px;
	}
	#attention h3{
		text-align: center;
		font-size: 2.8rem;
		font-weight: bold;
	}
	#attention .attention-box{
		line-height: 1.8;
	}
	#attention .attention-box ul{
		margin-top: 90px;
	}

	#attention .attention-box li{
		text-indent: -1em;
		padding: 0 0 0 1em;
	}	
	#attention .attention-box li + li{
		margin: 10px 0 0;
	}	



	/* btn-pt
	--------------------------------------------------------------- */
	.btn-pt{
		position: absolute;
		right: 10px;
		bottom: 10px;
		z-index: 900;
		opacity: 0;
		-webkit-transition: opacity ease 200ms;
		-o-transition: opacity ease 200ms;
		transition: opacity ease 200ms;

	}
	.btn-pt.on{
		opacity: 1;
	}

	.btn-pt a{
		position: relative;
		display: block;
		width: 60px;
		height: 60px;
		border-radius: 30px;
		text-indent: -9999px;
		background: #000;
	}
	.btn-pt a:after{
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -30px 0 0 -30px;
		display: block;
		width: 60px;
		height: 60px;
		border-radius: 30px;
		text-indent: -9999px;
		background: url(../img/arrow_pt.png) 50% 50% no-repeat;
		background-size: 22px 14px;

		-webkit-transition: transform ease 200ms;
		-o-transition: transform ease 200ms;
		transition: transform ease 200ms;

	}
	.btn-pt a:hover:after{
		-webkit-transform: translateY(-5px);
		-ms-transform: translateY(-5px);
		-o-transform: translateY(-5px);
		transform: translateY(-5px);
	}



}




@media screen and (min-width: 769px) and (max-width: 1000px) {

	.contents{
		padding: 70px 30px;
	}	

}



@media screen and (max-width: 768px) {


	.pc{
		display: none;
	}
	.ignore-sp{
		display: none;
	}

	#wrap{
		position: relative;
		background: #f1f1f1;
	}

	body{
		font-size: 1.2rem;
	}
	#gfooter a{
		font-size: 1.2rem;
	}


	section + section{
		margin: 15px 0 0;
	}



	/* kv
	--------------------------------------------------------------- */

	#kv{
		width: 100%;
		height: 500px;
		overflow: hidden;
		background: url(../img/kv_bg.jpg) 50% 50% no-repeat;
		background-size: cover;
	}
	.kv-box{
		margin: auto;
	}
	.kv-inner{
		padding: 0 25px;
		width: 375px;
		height: 500px;
		box-sizing: border-box;
		-webkit-transform-origin: top left;
		-moz-transform-origin: top left;
		-ms-transform-origin: top left;
		-o-transform-origin: top left;
		transform-origin: top left;
	}
	.kv-inner .kv-txt{
		position: relative;
		margin: auto;
		width: 100%;
		max-width: 325px;
		box-sizing: border-box;
		z-index: 10;
	}
	.kv-inner .kv-txt .kv-txt-elm{
		position: absolute;
		top: 25px;
		width: 100%;
		box-sizing: border-box;

	}
	.kv-inner .kv-txt h1{
		margin: auto;
		padding: 20px 0 0;
		width: 187px;
		opacity: 0;
		-webkit-transition: opacity 300ms ease;
		-o-transition: opacity 300ms ease;
		transition: opacity 300ms ease;
	}
	.kv-inner .kv-txt h1.on{
		opacity: 1;	
	}

	.kv-inner .kv-txt h1 img{
		width: 100%;
		height: auto;
	}

	.kv-inner .kv-txt .catch{
		text-align: center;
		opacity: 0;
		-webkit-transform: translateY(20px);
		-ms-transform: translateY(20px);
		-o-transform: translateY(20px);
		transform: translateY(20px);

		-webkit-transition: transform 300ms ease ,opacity 300ms ease;
		-o-transition: transform 300ms ease ,opacity 300ms ease;
		transition: transform 300ms ease ,opacity 300ms ease;
	}
	.kv-inner .kv-txt .catch.on{
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);		
	}

	.kv-inner .kv-txt .catch span{
		position: relative;
		display: inline-block;
		font-size: 1.9rem;
		text-align: center;
		font-weight: bold;
	}
	.kv-inner .kv-txt .catch span:before,
	.kv-inner .kv-txt .catch span:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		height: 18px;
		width: 2px;
		background: #000;
	}

	.kv-inner .kv-txt .catch span:before{
		left: -10px;
		-webkit-transform: rotate(-30deg);
		-ms-transform: rotate(-30deg);
		-o-transform: rotate(-30deg);
		transform: rotate(-30deg);
	}
	.kv-inner .kv-txt .catch span:after{
		right: -10px;
		-webkit-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
		-o-transform: rotate(30deg);
		transform: rotate(30deg);
	}

	.kv-inner .kv-txt .lead{
		padding: 20px 0 0;
		font-size: 1.6rem;
		font-weight: bold;
		line-height: 1.8;
		text-align: center;
		opacity: 0;
		-webkit-transition: opacity 300ms ease;
		-o-transition: opacity 300ms ease;
		transition: opacity 300ms ease;

	}
	.kv-inner .kv-txt .lead.on{
		opacity: 1;
	}



	.kv-inner .kv-phone{
		margin: auto;
		width: 175px;
		height: 100%;
		box-sizing: border-box;

	}
	.kv-inner .kv-phone .kv-phone-elm{
		position: relative;
		height: 100%;
	}

	.kv-inner figure{
		position: absolute;
		width: 100%;
		max-width: 420px;
		bottom: 0;
		right: 0;
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		-o-transform: translateY(100%);
		transform: translateY(100%);
		
		-webkit-transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
		-o-transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
		transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

		box-sizing: border-box;

	}
	.kv-inner figure.on{
		-webkit-transform: translateY(80px);
		-ms-transform: translateY(80px);
		-o-transform: translateY(80px);
		transform: translateY(80px);		
	}

	.kv-inner figure img{
		width: 100%;
		height: auto;
	}

	#kv .btn-list{
		padding: 20px 0 0;
	}
	#kv .btn-list a{
		max-width: inherit;
		height: 35px;
		line-height: 35px;
	}	


	/* contents
	--------------------------------------------------------------- */


	.contents{
		padding: 15px;
		overflow: hidden;
	}	

	.contents section{
		background: #fff;
	}
	.col{
		margin: 0 auto;
		padding: 30px;
		max-width: 960px;
	}
	.contents-header{
		padding: 0 0 30px;
	}
	.contents-header h2{
		font-weight: bold;
		text-align: center;
		font-size: 1.6rem;
		letter-spacing: 4px;
		line-height: 1;
	}
	.contents-header h2 span{
		display: block;
	}
	.contents-header h2 span + span{
		margin: 10px 0 0;
	}
	.contents-header h2 span i{
		position: relative;
		display: inline-block;
		padding: 0 0 5px;
	}
	.contents-header h2 span i:after{
		position: absolute;
		content: "";
		bottom: 0;
		left: -5px;
		display: block;
		height: 2px;
		width: 0;
		background: #000;

		-webkit-transition: width 200ms ease;
		-o-transition: width 200ms ease;
		transition: width 200ms ease;

	}
	.contents-header h2 span.on i:after{
		width: calc(100% + 10px);
	}


	.contents .detail h3{
		font-size: 1.4rem;
		font-weight: bold;
		color: #004098;
	}

	.contents .detail .notice{
		padding: 30px 0 0;
	}
	.contents .detail .notice li{
		font-size: 1.2rem;
		text-indent: -1em;
		padding: 0 0 0 1em;
		line-height: 1.5;
	}
	.contents .detail .notice li + li{
		margin: 10px 0 0;
	}


	/* service
	--------------------------------------------------------------- */

	#service .point-header h3{
		display: none;
	}
	#service .point-txt h3{
		text-align: center;
		font-size: 2.3rem;
		font-weight: bold;
		color: #004098;
	}
	#service .point-header{
		position: relative;
		transform-origin: top left;	
	}
	#service .point-header span{
		position: absolute;
		left: -15px;
		top: -15px;
		display: block;
		text-indent: -9999px;
		width: 120px;
		height: 120px;
		background: url(../img/bal_point.png) 50% 50% no-repeat;	
	}
	#service .point-header span:after{
		content: "";
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 14px 30px 14px;	
		border-color:  transparent transparent #074296 transparent;
		z-index: 1000;
	}
	#service .point-header span:after{
		right: 4px;
		bottom: 4px;
		-webkit-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		-o-transform: rotate(135deg);
		transform: rotate(135deg);
	}

	#service .point-box-inner .point-fig{
		margin:auto;
	}
	#service .point-box-inner .point-fig-inner{
		width: 660px;
		transform-origin: top left;	
	}
	#service .point-box-inner .point-fig figure{
		position: relative;
		margin:auto;
		text-align: center;
		width: 250px;
	}
	#service .point-box-inner .point-fig figure img{
		width: 100%;
		height: 240px;
	}
	#service .point-box-inner .point-txt{
		padding-top: 45px;
		box-sizing: border-box;
	}
	#service .point-box-inner .point-txt p{
		padding-top: 45px;
		font-size: 1.4rem;
	}
	#service .point-box-inner .point-txt p br{
		display: none;
	}

	#service .point-header h3{
		opacity: 0;
		-webkit-transform: translateY(50px);
		-ms-transform: translateY(50px);
		-o-transform: translateY(50px);
		transform: translateY(50px);
		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;
	}
	#service .point-header h3.on{
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	#service .point-header span{
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);	
		-webkit-transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
		-o-transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
		transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
	}
	#service .point-header span.on{
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);	
	}



	#service .point-box figure:before{
		position: absolute;
		content: '';
		top: 50%;
		left: 50%;
		margin-left: -220px;
		display: block;
		width: 48px;
		height: 97px;
		background: url(../img/obj_l.png) 0 0 no-repeat;
		background-size: 100% 100%;
		opacity: 0;
		-webkit-transform: translateX(30px);
		-ms-transform: translateX(30px);
		-o-transform: translateX(30px);
		transform: translateX(30px);
		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;

	}
	#service .point-box figure:after{
		position: absolute;
		content: '';
		top: 50%;
		right: 50%;
		margin-right: -220px;
		display: block;
		width: 48px;
		height: 97px;
		background: url(../img/obj_r.png) 0 0 no-repeat;
		background-size: 100% 100%;
		opacity: 0;
		-webkit-transform: translateX(-30px);
		-ms-transform: translateX(-30px);
		-o-transform: translateX(-30px);
		transform: translateX(-30px);
		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;
	}
	#service .point-box figure.on:before,
	#service .point-box figure.on:after{
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}
	#service .point-box figure img{
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
		-webkit-transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.3);
		-o-transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.3);
		transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.3);
	}
	#service .point-box.on figure img{
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);	
	}

	#service .point-box .point-txt{
		opacity: 0;
		-webkit-transform: translateY(50px);
		-ms-transform: translateY(50px);
		-o-transform: translateY(50px);
		transform: translateY(50px);
		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;
	}
	#service .point-box .point-txt.on{
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}





	/* flow
	--------------------------------------------------------------- */


	.flow-box .flow-fig-inner{
		width: 660px;
		-webkit-transform-origin: top left;
		-moz-transform-origin: top left;
		-ms-transform-origin: top left;
		-o-transform-origin: top left;
		transform-origin: top left;		
	}
	.flow-box figure{
		position: relative;
	}
	.flow-box figure img{
		width: 100%;
		height: auto;
	}
	.flow-box figure span{
		position: absolute;
		display: block;
		text-indent: -9999px;
		width: 121px;
		height: 121px;
	}
	.flow-box figure span:after{
		content: "";
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 14px 30px 14px;	
		border-color:  transparent transparent #074296 transparent;
		z-index: 1000;
	}


	.flow-box .flow-txt{
		position: relative;
	}
	.flow-box .flow-txt dl{
/*		padding: 20px 0 0;
*/	}
	.flow-box .flow-txt dl dt{
		font-size: 2.3rem;
		font-weight: bold;
		line-height: 1.5;
		color: #004098;
		text-align: center;
	}
	.flow-box .flow-txt dl dd{
		padding: 15px 0 0;
		font-size: 1.4rem;
		line-height: 1.5;
	}
	.flow-box .flow-txt dl dd br{
		display: none;
	}
	.flow-box + .flow-box{
		margin-top: 40px;
	}

	.flow-box1 figure span:after{
		right: 2px;
		bottom: 2px;
		-webkit-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		-o-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	.flow-box2 figure span:after{
		right: 2px;
		bottom: 2px;
		-webkit-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		-o-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	.flow-box1 figure span{
		top: -15px;
		left: -15px;
		-webkit-transform-origin: bottom right;
		-moz-transform-origin: bottom right;
		-ms-transform-origin: bottom right;
		-o-transform-origin: bottom right;
		transform-origin: bottom right;
	}
	.flow-box2 figure span{
		top: -15px;
		left: -15px;
		-webkit-transform-origin: bottom right;
		-moz-transform-origin: bottom right;
		-ms-transform-origin: bottom right;
		-o-transform-origin: bottom right;
		transform-origin: bottom right;
	}
	
	/*motion*/

	.flow-box .flow-txt{
		opacity: 0;
		-webkit-transform: translateY(50px);
		-ms-transform: translateY(50px);
		-o-transform: translateY(50px);
		transform: translateY(50px);
		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;
	}
	.flow-box .flow-txt.on{
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}

	.flow-box figure span{
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);	
		-webkit-transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
		-o-transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
		transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
	}
	.flow-box figure span.on{
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);	
	}

	#howto .flow-box figure:before{
		position: absolute;
		content: '';
		left: 50%;
		display: block;
		width: 48px;
		height: 97px;
		background: url(../img/obj_l.png) 0 0 no-repeat;
		background-size: 100% 100%;
		opacity: 0;
		-webkit-transform: translateX(30px);
		-ms-transform: translateX(30px);
		-o-transform: translateX(30px);
		transform: translateX(30px);
		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;

	}
	#howto .flow-box figure:after{
		position: absolute;
		content: '';
		right: 50%;
		display: block;
		width: 48px;
		height: 97px;
		background: url(../img/obj_r.png) 0 0 no-repeat;
		background-size: 100% 100%;
		opacity: 0;
		-webkit-transform: translateX(-30px);
		-ms-transform: translateX(-30px);
		-o-transform: translateX(-30px);
		transform: translateX(-30px);
		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;
	}
	.step1 figure:before{
		top: 230px;
		margin: 0 0 0 -235px;
	}
	.step1 figure:after{
		top: 230px;
		margin: 0 -235px 0 0;
	}
	.step2 figure:before{
		top: 180px;
		margin: 0 0 0 -265px;
	}
	.step2 figure:after{
		top: 180px;
		margin: 0 -265px 0 0;
	}
	.step3 figure:before{
		top: 240px;
		margin: 0 0 0 -225px;
	}
	.step3 figure:after{
		top: 240px;
		margin: 0 -225px 0 0;
	}
	.step4 figure:before{
		top: 180px;
		margin: 0 0 0 -265px;
	}
	.step4 figure:after{
		top: 180px;
		margin: 0 -265px 0 0;
	}


	/*motion*/
	#service .flow-box1 figure{
		opacity: 0;
		-webkit-transform: translateY(50px);
		-ms-transform: translateY(50px);
		-o-transform: translateY(50px);
		transform: translateY(50px);
		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;

	}
	#service .flow-box2 figure{
		opacity: 0;
		-webkit-transform: translateY(50px);
		-ms-transform: translateY(50px);
		-o-transform: translateY(50px);
		transform: translateY(50px);

		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;

	}
	#service .flow-box figure.on,
	#service .flow-box figure.on{
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);		
	}

	#howto .flow-box figure img{
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
		-webkit-transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.3);
		-o-transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.3);
		transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.3);
	}
	#howto .flow-box.on figure img{
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);	
	}
	#howto .flow-box figure.on:before,
	#howto .flow-box figure.on:after{
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}



	/* btn
	--------------------------------------------------------------- */
	.btn-list{
		padding: 25px 0 0;
		opacity: 0;
		-webkit-transform: translateY(20px);
		-ms-transform: translateY(20px);
		-o-transform: translateY(20px);
		transform: translateY(20px);

		-webkit-transition: transform 300ms ease, opacity 300ms ease;
		-o-transition: transform 300ms ease, opacity 300ms ease;
		transition: transform 300ms ease, opacity 300ms ease;
	}
	.btn-list.on{
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	.btn-list.hidden{
		display: none;
	}
	.btn-list.visible{
		display: block;
	}
	

/*	#use-apps .btn-list{
		padding: 0;
	}*/
	/*非表示*/
	#faq .btn-list{
		display: none;
	}

	.btn-list a{
		position: relative;
		display: block;
		margin:auto;
		max-width: 405px;
		width: 100%;
		height: 45px;
		background: #074296;
		border-radius: 25px;
		color: #fff;
		font-size: 1.2rem;
		font-weight: bold;
		text-align: center;
		line-height: 45px;
	}

	.btn-list a:after{
		position: absolute;
		content: "";
		margin:auto;
		top: 0;
		bottom: 0;
		right: 15px;
		display: block;
		width: 7px;
		height: 11px;
		background: url(../img/arrow_btn.png) 50% 50% no-repeat;
		background-size: 100% 100%;
	}


	/* campaign
	--------------------------------------------------------------- */
	
	#campaign figure{
		margin: 15px 0 0;
		width: 100%;
	}


	/* service
	--------------------------------------------------------------- */

	#service .point1 figure span{
		background: url(../img/bal_point1.png) 50% 50% no-repeat;
		background-size: 100% 100%;		
	}
	#service .point2 figure span{
		background: url(../img/bal_point2.png) 50% 50% no-repeat;
		background-size: 100% 100%;		
	}
	#service .point3 figure span{
		background: url(../img/bal_point3.png) 50% 50% no-repeat;
		background-size: 100% 100%;		
	}


	/* howto
	--------------------------------------------------------------- */

	#howto .step1 figure span{
		background: url(../img/bal_step1.png) 50% 50% no-repeat;		
		background-size: 100% 100%;
	}
	#howto .step2 figure span{
		background: url(../img/bal_step2.png) 50% 50% no-repeat;		
		background-size: 100% 100%;
	}
	#howto .step3 figure span{
		background: url(../img/bal_step3.png) 50% 50% no-repeat;		
		background-size: 100% 100%;
	}
	#howto .step4 figure span{
		background: url(../img/bal_step4.png) 50% 50% no-repeat;		
		background-size: 100% 100%;
	}


	/* use-apps
	--------------------------------------------------------------- */

	#use-apps .appli-list > ul{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	#use-apps .appli-list > ul > li{
		width: calc(50% - 10px);
	}
	#use-apps .appli-list > ul > li:nth-child(n+3){
		margin-top: 20px;
	}
	#use-apps .btn-dl{
		margin: 20px 0 0;
	}
	#use-apps .btn-dl li{
		margin: auto;
		width: 100%;
		max-width: 145px;
	}
	#use-apps .btn-dl li + li{
		margin-top: 10px;
	}
	#use-apps .btn-dl img{
		width: 100%;
		height: auto;
	}

	#use-apps .app-list img{
		width: 100%;
		height: auto;
	}
	#use-apps figure{
		margin: auto;
		width: 90px;
		border: 1px solid #ccccca;
		border-radius: 14px;
		overflow: hidden;
	}
	#use-apps figure img{
		width: 100%;
		height: auto;
	}
	#use-apps li span{
		display: block;
		padding: 15px 0 0;
		text-align: center;
		color: #000;
		font-size: 1.2rem;
		font-weight: bold;
		line-height: 1.5;
	}


	/* use-store
	--------------------------------------------------------------- */

	#use-store .store-list ul{
		display: flex;
		margin: 0 -18px;
		justify-content: center;
		flex-wrap: wrap;
	}
	#use-store .store-list li{
		padding: 0 18px;
		width: calc(100% / 3);
		box-sizing: border-box;
	}
	#use-store .store-list li{
	}
	#use-store .store-list li:nth-child(n+4){
		margin-top: 20px;
	}
	#use-store .store-list li:first-child figure{
		margin: auto;
		background: none;
	}
	#use-store .store-list li a{
		display: block;
		color: #000;
	}
	#use-store figure{
		margin: auto;
		overflow: hidden;
		background: #ddd;
	}
	#use-store figure img{
		width: 100%;
		height: auto;
	}
	#use-store li span{
		display: block;
		padding: 10px 0 0;
		text-align: center;
		color: #000;
		font-size: 1.0rem;
		line-height: 1.5;
	}

	/* faq
	--------------------------------------------------------------- */

	#faq .faq-list li{
		padding: 20px 15px;
		border-bottom: 1px solid #b9b9b9;
		font-size: 1.2rem;
		line-height: 1.5;
	}
	#faq .faq-list li:first-child{
		border-top: 1px solid #b9b9b9;
	}
	#faq .faq-list dl dt{
		position: relative;
		padding: 0 0 0 25px;
	}
	#faq .faq-list dl dd{
		position: relative;
		margin-top: 20px;
		padding: 0 0 0 25px;
	}
	#faq .faq-list dl dt:before{
		position: absolute;
		top: 0;
		left: 0;
		content: "Q.";
		font-size: 1.5rem;
		line-height: 1;
		font-weight: bold;
	}
	#faq .faq-list dl dd:before{
		position: absolute;
		top: 0;
		left: 0;
		content: "A.";
		font-size: 1.5rem;
		line-height: 1;
		font-weight: bold;
		color: #074296;

	}
	#faq .faq-list li a{
		color: #333;
		text-decoration: underline;
	}

	/* attention
	--------------------------------------------------------------- */
	
	#attention{
		padding: 0 0 85px;
		background: #fff;
	}
	#attention .col{
		margin-bottom: 0;
		padding: 0 25px;
	}
	#attention .attention-header{
		padding: 30px 0;
	}
	#attention h3{
		text-align: center;
		font-size: 1.6rem;
		font-weight: bold;
	}
	#attention .attention-box{
		line-height: 1.8;
	}
	#attention .attention-box ul{
		margin-top: 50px;
	}
	#attention .attention-box li{
		text-indent: -1em;
		padding: 0 0 0 1em;
	}	
	#attention .attention-box li + li{
		margin: 10px 0 0;
	}	



	/* btn-pt
	--------------------------------------------------------------- */
	.btn-pt{
		position: absolute;
		right: 10px;
		bottom: 10px;
		z-index: 900;
		opacity: 0;
		-webkit-transition: opacity ease 200ms;
		-o-transition: opacity ease 200ms;
		transition: opacity ease 200ms;

	}
	.btn-pt.on{
		opacity: 1;
	}

	.btn-pt a{
		position: relative;
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 20px;
		text-indent: -9999px;
		background: #000;
	}
	.btn-pt a:after{
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -20px 0 0 -20px;
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 20px;
		text-indent: -9999px;
		background: url(../img/arrow_pt.png) 50% 50% no-repeat;
		background-size: 15px 9px;

		-webkit-transition: transform ease 200ms;
		-o-transition: transform ease 200ms;
		transition: transform ease 200ms;

	}


}