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

/************************************************************************************
smaller than 640
*************************************************************************************/
@media only screen and (max-width: 640px) {
	html{
		-webkit-text-size-adjust: none;
	}
	body{
		line-height: 1.4;
		font-size: 14px;
	}
	
	.pc_view{
		display: none;
	}
	.sp_view{
		display: block;
	}

	#wrapper{
		min-width: 0;
		overflow: hidden;
	}
	
	.sns_area{
		width: 96%;
		padding: 10px 2% 0;
	}
	.sns_area li{
		margin: 0 5px 5px;
	}
	.fb-like {
		line-height: 1.0;
	}
	.fb_area{
		width: 100%;
	}


	/************************************
	header
	************************************/
	header{
		width: 100%;
		padding: 0 0 5%;
		text-align: left;
	}
	header h1{
		padding: 5% 0 3%;
	}
	header h1 img{
		width: 100%;
	}
	header p{
		width: 96%;
		margin: 0 auto;
	}


	/************************************
	section
	************************************/
	section h2{
		width: 100%;
		margin: 0 0 -10%;
	}
	section h2 img{
		width: 100%;
	}

	/************************************
	article
	************************************/
	article .outline{
		width: 98%;
	}
	article .outline img{
		max-width: 100%;
	}

	.step1{
		padding: 12% 0 8%;
	}
	.step1 dl{
		margin: 0 auto;
	}
	.step1 dl + dl{
		margin: 8% auto 0;
	}
/* 	.step1 #qr-code img:nth-of-type(1){
		width: 50%;
	}
	.step1 #qr-code img:nth-of-type(2){
		width: 40%;
	}
	.step1 #app_sotre li{
		width: 45%;
	} */

	.step2{
		padding: 6% 0 8%;
	}
	.step2 > div{
		width: 100%;
		float: none;
	}
	.step2 > div > img{
		max-width: 80%;
		display: block;
		margin: 0 auto 3%;
	}
	.step2 > img{
		width: 96%;
		margin: 0 auto;
		display: block;
		float: none;
	}

	.step3{
		padding: 8% 0 0 0;
	}
	.step3 p{
		width: 100%;
		margin: 0 0 5%;
	}
	.step3 > img{
		width: 90%;
		margin: 0 auto;
		display: block;
		position: static;
	}


	/************************************
	aside
	************************************/
	aside .attention{
		width: 94%;
		padding: 5% 0;
	}
	aside .attention li:last-of-type{
		width: 100%;
		margin: 5% 0 0;
		text-align: center;
		position: static;
	}
}