@charset "utf-8";
/*////////////////////////////////////////////////

  colopla
	Copyright (c)COLOPL, Inc. All Rights Reserved.
	CreationDate: 2011-01
	
////////////////////////////////////////////////*/

#head{
	width:100%;
	padding:5px 0;
	border-bottom:1px solid #ccc;
}
.shinsai{
	width:880px;
	margin:0 auto;
	padding:10px 0 0 0;
}
.shinsai p{
	margin:0 0 10px 0;
	line-height:150%;
}
header{
	position:relative;
	width:920px;
	margin:0 auto;
}
.colopl{
	position:absolute;
	right:0;
}

#container{
	border-top:1px solid #fff;
	background:#EEEEEE;
}
#bodyLine{
	width:922px;
	margin:0 auto;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
}
#contents{
	position:relative;
	width:920px;
	margin:0 auto;
	background:#fff;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
}
#contents h1{
	text-align:center;
}
#contents h1 img{
	margin:20px 0 20px 0;
}

#mainArea{
	position:relative;
}
#mainArea h2{
	position:absolute;
	top:32px;
	left:568px;
}
#mainArea .free{
	position:absolute;
	top:155px;
	left:660px;
}
#mainArea .qr{
	position:absolute;
	top:171px;
	left:796px;
	border:1px solid #EA71A2;
}

#mainArea .mail{
	position:absolute;
	top:140px;
	left:570px;
}
#mainArea .smartphoneArea{
	position:absolute;
	top:270px;
	left:696px;
}
#mainArea .smartphoneArea h3{
	margin:0 0 5px 0;
}

#how{
	width:900px;
	margin:0 auto 25px;
}
#how h2{
	margin:0 0 15px 0;
}
#how div{
	width:170px;
	float:left;
}
#how .howtoBox{
	margin:0 10px 0 0;
}

#how h3{
	font-size:13px;
	color:#EA71A0;
	margin:6px 0;
	 line-height:150%;
}
#how p{
 font-size:12px;
 line-height:150%;
}



#contents .join{
	position:relative;
	width:880px;
	height:120px;
	margin:0 auto 20px;
	padding-top:13px;
	background:url(../image/bg_join.gif) 10px top no-repeat;
}
#contents .join .free{
	position:absolute;
	left:5px;
	top:0;
}
#contents .join .access{
	margin:0 0 0 30px;
}
#contents .join .access .qr{
	margin:0 0 0 10px;
	padding:1px;
	border:1px solid #ccc;
	vertical-align:top;
}
#contents .mail2{
	position:absolute;
	top:38px;
	left:450px;
}
#contents .join .smartphone{
	position:absolute;
	left:140px;
	top:68px;
	width:620px;
}
#contents .join .smartphone .and{
	margin:15px 0 0 0;
}
#contents .join .smartphone .btn{
	float:right;
}
#contents .join .smartphone .btn img{
	margin-left:5px;
}


#contents .sbmBtn{
	width:900px;
	margin:0 auto 35px;
	padding:10px 0 10px 0;
	border-top:1px solid #ccc;;
	border-bottom:1px solid #ccc;
}

footer{
	text-align:center;
	font-size:11px;
	padding:0 0 15px 0;
}



#how{
	overflow: hidden;
}
#how:after{
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}
/*\*/
* html #how{
    height: 1em;
    overflow: visible;
}
/**/