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

html,body{
	margin:0;
	padding:0;
	font-family: Roboto/*Android 4系*/, 'Droid Sans'/*Android 3系*/, Meiryo/*Windows 7/Vista */, 'ＭＳ Ｐゴシック'/*Windows*/, 'Hiragino Kaku Gothic ProN'
	
	/*Mac*/, sans-serif;
	-webkit-text-size-adjust:none;
}
article,nav,section{
	display:block;
}

article{
	clear:both;
}

h1{
	color: #808080;
	font-weight:normal;
}
h2{
	font-weight:normal;
}

h3{
	font-weight:normal;
}

header{
	font-size:18pt;
	font-family:"Myriad Web Pro", sans-serif;
	padding-left:5px;
}

#navigation{
	background-color:#000;
	color:#fff;
}

a.navlink{
	display:inline-block;
	margin:0 1em;
	font-size:9pt;
}

.copy{
	position:relative;
	top:402px;
	left:0px;
	padding:0 0 0 325px;
	width:50%;
	font-family:"Myriad Web Pro", sans-serif;
	font-size:10pt;
	font-weight:normal;
	line-height:160%;
}
#appname{
	font-size:16pt;
	font-weight:bold;

}
#showcase{
	width:100%;
	height:500px;
	background-image:url(lumia/img/top.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	background-size:cover;
	margin-bottom:20px;
}
#spec{
	padding:5px 40px 20px 40px;
	text-align:right;
	margin:0;
	border-bottom:1px solid #ccc;
}
#spec>a{
	display:inline-block;
	font-family:sans-serif;
	text-align:center;
	width:6em;
	padding:4.2em .2em .2em .2em;
	background-position:center top;
	background-repeat:no-repeat;
	background-size:4em;
	font-size:10pt;
}

#store_banner{
	float:left;
}

.ios{
	background-image:url(img/ios.png);
}
.android{
	background-image:url(img/android.png);
}
.camera{
	background-image:url(img/camera.png);
}
.win{
	min-width:120px;
	float:left;
	background-image:url(img/win.png);
}

#features,#lead,#next_step,#info,#about,#download{
	font-size:100%;
	padding:0 1em;
	box-sizing:border-box;
	line-height:18pt;
	text-align:left;
}
.ftr>h2{
	font-size:12pt;
	font-weight:bold;
	line-height:0%;
	color:#0076BC;
}
.ftr{
	border:1px solid #000;
	-moz-border-radius:8px / 8px;
    border-radius:8px / 8px;
	padding:1em;
	font-size:90%;
}
.column>h2{
	font-size:16pt;
	font-weight:bold;
}
.column>h3{
	font-size:14pt;
	font-weight:bold;
	margin-top:2em;
}
.column{
	width:30%;
	margin-right:2%;
	float:left;
	background:#fff;
	min-height:440px;
	padding:1%

}
.column:nth-child(3){
	margin-right:0;
}
.half>h1{
	font-size:24pt;
}
.half>h2{
    position: relative;
    padding: 0 0 0 1em;
    font-size: 20pt;
}
 
.half>h2:before {
    content: "";
    position: absolute;
    background: #0076BC;
    top: 50%;
    left: 0;
    margin-top :-10px;
    height: 20px;
    width: 20px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    box-shadow: 1px 1px 1px #0076BC inset;
    -moz-box-shadow: 1px 1px 1px #0076BC inset;
    -webkit-box-shadow: 1px 1px 1px #0076BC inset;
    -o-box-shadow: 1px 1px 1px #0076BC inset;
    -ms-box-shadow: 1px 1px 1px #0076BC inset;
}
.half{
	width:47%;
	margin-right:2%;
	float:left;
	background:#fff;
	min-height:440px;
	padding:1%

}
.half:nth-child(2){
	margin-right:0;
}

.full>h1{
	font-size:24pt;
}
.full>h2{
    position: relative;
    padding: 0 0 0 1em;
    font-size: 22pt;
}
 
.full>h2:before {
    content: "";
    position: absolute;
    background: #0076BC;
    top: 50%;
    left: 0;
    margin-top :-10px;
    height: 20px;
    width: 20px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    box-shadow: 1px 1px 1px #0076BC inset;
    -moz-box-shadow: 1px 1px 1px #0076BC inset;
    -webkit-box-shadow: 1px 1px 1px #0076BC inset;
    -o-box-shadow: 1px 1px 1px #0076BC inset;
    -ms-box-shadow: 1px 1px 1px #0076BC inset;
}
.full{
	width:98%;
	background:#fff;
	padding:1%;
}
.full:nth-child(2){
	margin-right:0;
}

#img03{
	width:100%;
	height:500px;
	margin-top:2em;
}
#left-img{
	float:left;
	margin-right:2em;
}

footer{
	text-align:center;
	margin-bottom:10px;
}

.infoImage{
	width:40%;
	float:right;
	padding-left:20px;
}

#qr{
	position:absolute;
	bottom:0px;
	left:45px;
}
#dlbtn {
	display: block;
	width: 200px;
	padding:10px;
	position: absolute;
	left: 82px;
	text-align: center;
	font-size: 22px;
	line-height: 1.5;
	border: 1px solid #ffcd02;
	border-radius: 10px;
	box-shadow:
		0px 1px 2px rgba(000,000,000,0.3),
		inset 0px 0px 2px rgba(255,255,255,0.8);
	color:#ffffff;
	background: #ffdb4c;
	background: -moz-linear-gradient(top,  #ffdb4c 0%, #ffcd02 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdb4c), color-stop(100%,#ffcd02));
	background: -webkit-linear-gradient(top,  #ffdb4c 0%,#ffcd02 100%);
	background: -o-linear-gradient(top,  #ffdb4c 0%,#ffcd02 100%);
	background: -ms-linear-gradient(top,  #ffdb4c 0%,#ffcd02 100%);
	background: linear-gradient(to bottom,  #ffdb4c 0%,#ffcd02 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdb4c', endColorstr='#ffcd02',GradientType=0 );
}
#dlbtn:hover {
	border-color: #ffd620;
	background: #ffe660;
	background: -moz-linear-gradient(top,  #ffe660 0%, #ffd620 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe660), color-stop(100%,#ffd620));
	background: -webkit-linear-gradient(top,  #ffe660 0%,#ffd620 100%);
	background: -o-linear-gradient(top,  #ffe660 0%,#ffd620 100%);
	background: -ms-linear-gradient(top,  #ffe660 0%,#ffd620 100%);
	background: linear-gradient(to bottom,  #ffe660 0%,#ffd620 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe660', endColorstr='#ffd620',GradientType=0 );
	text-decoration: none;
}
#dlbtn a{
	text-decoration:none;
	color:#000;
}

#dlbtn2 {
	display: block;
	width: 98%;
	padding:10px;
	position: relative;
	left: 0;
	text-align: center;
	font-size: 22px;
	line-height: 1.5;
	border: 1px solid #ffcd02;
	border-radius: 10px;
	box-shadow:
		0px 1px 2px rgba(000,000,000,0.3),
		inset 0px 0px 2px rgba(255,255,255,0.8);
	color:#ffffff;
	background: #ffdb4c;
	background: -moz-linear-gradient(top,  #ffdb4c 0%, #ffcd02 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdb4c), color-stop(100%,#ffcd02));
	background: -webkit-linear-gradient(top,  #ffdb4c 0%,#ffcd02 100%);
	background: -o-linear-gradient(top,  #ffdb4c 0%,#ffcd02 100%);
	background: -ms-linear-gradient(top,  #ffdb4c 0%,#ffcd02 100%);
	background: linear-gradient(to bottom,  #ffdb4c 0%,#ffcd02 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdb4c', endColorstr='#ffcd02',GradientType=0 );
}
#dlbtn2:hover {
	border-color: #ffd620;
	background: #ffe660;
	background: -moz-linear-gradient(top,  #ffe660 0%, #ffd620 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe660), color-stop(100%,#ffd620));
	background: -webkit-linear-gradient(top,  #ffe660 0%,#ffd620 100%);
	background: -o-linear-gradient(top,  #ffe660 0%,#ffd620 100%);
	background: -ms-linear-gradient(top,  #ffe660 0%,#ffd620 100%);
	background: linear-gradient(to bottom,  #ffe660 0%,#ffd620 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe660', endColorstr='#ffd620',GradientType=0 );
	text-decoration: none;
}
#dlbtn2 a{
	text-decoration:none;
	color:#000;
}

#ftbtn {
	display: block;
	width: 200px;
	padding:10px;
	position: absolute;
	left: 82px;
	text-align: center;
	font-size: 22px;
	line-height: 1.5;
	border: 1px solid #006FC9;
	border-radius: 10px;
	box-shadow:
		0px 1px 2px rgba(000,000,000,0.3),
		inset 0px 0px 2px rgba(255,255,255,0.8);
	color:#ffffff;
	background: #006FC9;
	background: -moz-linear-gradient(top,  #006FC9 0%, #003F72 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#006FC9), color-stop(100%,#003F72));
	background: -webkit-linear-gradient(top,  #006FC9 0%,#003F72 100%);
	background: -o-linear-gradient(top,  #006FC9 0%,#003F72 100%);
	background: -ms-linear-gradient(top,  #006FC9 0%,#003F72 100%);
	background: linear-gradient(to bottom,  #006FC9 0%,#003F72 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdb4c', endColorstr='#ffcd02',GradientType=0 );
}
#ftbtn:hover {
	border-color: #007DE2;
	background: #004D8C;
	background: -moz-linear-gradient(top,  #007DE2 0%, #004D8C 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#007DE2), color-stop(100%,#004D8C));
	background: -webkit-linear-gradient(top,  #007DE2 0%,#004D8C 100%);
	background: -o-linear-gradient(top,  #007DE2 0%,#004D8C 100%);
	background: -ms-linear-gradient(top,  #007DE2 0%,#004D8C 100%);
	background: linear-gradient(to bottom,  #007DE2 0%,#004D8C 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe660', endColorstr='#ffd620',GradientType=0 );
	text-decoration: none;
}
#ftbtn a{
	text-decoration:none;
	color:#FFF;
}

#cambtn {
	display: block;
	position: relative;
	width: 98%;
	padding: 20px 10px;
	background-color: #003F72;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	font-weight: normal;
	font-size: 16px;
	line-height: 1.5;
	border-radius: 10px;
	box-shadow:
		0px 1px 2px rgba(000,000,000,0.3),
			inset 0px 0px 2px rgba(255,255,255,0.5);
}
#cambtn:hover {
	background-color: #00579D;
}
#cambtn a{
	text-decoration:none;
	color:#ffffff;
}
#cambtn .txt{
	font-size: 200%;
	font-weight:bold;
}
/*==================================================
 * Effect 6
 * ===============================================*/
.curved
{
  	position:relative;
	margin-bottom:20px;
}
.curved:before,.curved:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.3);
    box-shadow:0 0 20px rgba(0,0,0,0.3);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.curved:after
{
	right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
			progid:DXImageTransform.Microsoft.dropshadow(enable=true,OffX=3, OffY=7, Color='#11000000', Positive='true');
}

/* スマホ用サイズ指定 */
@media screen and (max-width: 600px) {
	body{
		font-family:sans-serif;
		-webkit-text-size-adjust:none;
	}
	header{font-size:12pt;}
	.copy{
		position:relative;
		top:375px;
		width:86%;
		font-size:12pt;
		padding:0 0 0 5%;
		line-height:160%;
	}
	#appname{font-size:21pt;}
	#spec>a{font-size:6pt;}
	#features{font-size:10pt;padding:0; border-top:none;}
	#features>h2{font-size:11pt;}
	#store_banner{
		float:none;
		text-align:center;
	}
	#showcase{
		background-color:#ccc;
		height:500px;
		width:100%;
		background-image:url(lumia/img/top_phone.jpg);
		background-position:center top;
		background-repeat:no-repeat;
		background-size:cover;
	}
	.column,.half,.full{
		font-size:10pt;
		box-sizing:border-box;
		padding:1em;
		border-bottom:5pt;
		width:100%;
		float:none;
		border-top:1px solid rgba(0,0,0,0.08);
	}
	.curved:before,.curved:after
	{
		-webkit-box-shadow:0 0 10px rgba(0,0,0,0.3);
		-moz-box-shadow:0 0 10px rgba(0,0,0,0.3);
		box-shadow:0 0 10px rgba(0,0,0,0.3);
	}
	.infoImage{
		width:98%;
		float:none;
		padding-left:0;
	}
	#dlbtn {
		display: block;
		width: 100%;
		position: relative;
		padding: 10px;
		margin-bottom:2%;
		left: 0;
	}
	#ftbtn {
		display: block;
		width: 100%;
		position: relative;
		padding: 10px;
		margin-bottom:2%;
		left: 0;
	}
	#qr,#dlbtn2,#cambtn{
		display: block;
	}
	

}
/* タブレット用サイズ指定 */
@media screen and (min-width: 601px) and (max-width: 1280px) {
	#showcase{
		width:100%;
		height:0;
		padding-top:39%;
		background-image:url(lumia/img/top.jpg);
		background-position:center top;
		background-repeat:no-repeat;
		background-size:cover;
		margin-bottom:20px;
	}
	.copy{
		position:relative;
		top:-90px;
		left:0;
		width:50%;
		font-family:"Myriad Web Pro", sans-serif;
		font-size:10pt;
		font-weight:normal;
		line-height:160%;
	}
	#info .full{
		min-height:100px;
	}
}
/* PC用サイズ指定 */
@media screen and (min-width: 1281px) {
	body{
		width:1280px;
		margin:0 auto -10px auto;
		-webkit-box-shadow:0 0 10px rgba(0,0,0,0.3);
		-moz-box-shadow:0 0 10px rgba(0,0,0,0.3);
		box-shadow:0 0 10px rgba(0,0,0,0.3);
		text-align:justify;
	}
	article{
		-webkit-box-shadow:none;
		-moz-box-shadow:none;
		box-shadow:none;
	}
	html{
		background:#fff;
		text-align:center;
	}
	#info .full{
		min-height:100px;
	}
}