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

div.mainimage {
	padding: 30px 0;
	
	/* 背景画像・背景グラデーション */
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1ea8d8+20,7b5ec3+80 */
	background: url(../img/common/bg.png), #1ea8d8; /* Old browsers */
	background: url(../img/common/bg.png),-moz-linear-gradient(left,  #1ea8d8 20%, #187fc3 80%); /* FF3.6-15 */
	background: url(../img/common/bg.png),-webkit-linear-gradient(left,  #1ea8d8 20%,#187fc3 80%); /* Chrome10-25,Safari5.1-6 */
	background: url(../img/common/bg.png),linear-gradient(to right,  #1ea8d8 20%,#187fc3 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ea8d8', endColorstr='#187fc3',GradientType=1 ); /* IE6-9 */
	
	/* 背景画像乗算 */
	background-blend-mode: multiply;

}

div.mainimage div.inner {
	width: 85%;
	max-width: 875px;
	margin: 0 auto;
	padding: 30px 0;
}

div.mainimage div.inner ul {
	margin: 50px 0 0;
}

div.mainimage div.inner ul li {
	margin: 0 0 20px;
}

ul.btn {
	margin: 30px 0 0;
}

ul.btn li {
	margin: 0 5% 30px;
}

div.flow {
	padding: 50px 0;
	
	/* 背景画像・背景グラデーション */
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1ea8d8+20,7b5ec3+80 */
	background: #1ea8d8; /* Old browsers */
	background: -moz-linear-gradient(left,  #1ea8d8 20%, #187fc3 80%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #1ea8d8 20%,#187fc3 80%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #1ea8d8 20%,#187fc3 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ea8d8', endColorstr='#187fc3',GradientType=1 ); /* IE6-9 */

}

div.flow h2 {
	width: 70%;
	max-width: 580px;
	margin: 0 auto 50px;
	
}

div.flow ul {
	margin: 0 auto;
	width: 90%;
}

div.flow ul li:first-child {
	margin: 0 0 20px;
}

div.flow p.link a {
	display: block;
	text-align: center;
	font-size: 138%;
	color: #fff;
	margin: 30px 0 0;
}


div.download {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

div.download h2 { width: 50%; }

div.download ul {
	width: 90%;
	margin: 0 auto 20px;
	text-align: right;
}

div.download ul li { margin: 0 0 20px; }
div.download ul li:first-child img { width: 78%; }


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

.sp { display: none !important; }
.pc { display: block !important; }

div.mainimage {
	padding: 50px 0;
}

div.mainimage div.inner { padding: 50px 0; }

div.mainimage div.inner ul li {
	width: 29.3%;
	float: left;
	margin: 0 2% 0;
}

ul.btn {
	max-width: 1000px;
	margin: 30px auto;
}

ul.btn li {
	float: left;
	width: 46%;
	margin: 0 2%;
}	

div.flow { padding: 80px 0; }

div.flow ul {
	max-width: 1000px;
}

div.flow ul li {
	float: left;
	margin: 0;
}

div.flow ul li:first-child {
	width: 61%;
	margin: 0;
}

div.flow ul li:last-child {
	width: 39%;
}

div.flow p.link a { margin: 50px 0 0; }

div.download {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

div.download h2 {
	float: left;
	width:32%;
	max-width: 320px;
}

div.download ul {
	float: right;
	width: 60%;
	margin: 75px 0 0;
}

div.download ul li { margin: 0 0 30px; }
div.download ul li:first-child img { width: 80%; }

}