@charset "UTF-8";
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/* =======================================================
*							Common
* ======================================================= */
body {
	margin: 0;
	padding: 0;
	color: #333333;
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	min-width: 430px;
	-ms-touch-action: auto;
	touch-action: auto;
	background:#999;
	background: -moz-linear-gradient(top, #999);
	background: -webkit-linear-gradient(top, #999);
	background: linear-gradient(#999);
}
article, aside, details, footer, header, main, menu, nav, section, summary {
	display: block;
}
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd {
	margin: 0;
	padding: 0;
}
a {
	color: #333333;
	-webkit-transition: 0.2s all;
	-moz-transition: 0.2s all;
	-o-transition: 0.2s all;
	transition: 0.2s all;
	text-decoration: none;
	outline: none;
}
a:not(.button):hover {
	color: #0e6697;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	opacity: 0.8;
}
.button {
	display: inline-block;
	width: 180px;
	height: 49px;
	text-align: center;
	text-decoration: none;
	outline: none;

	border: 1px solid #679cfa;
	background-color: #679cfa;
	background-image: -webkit-linear-gradient(top, #679cfa, #407ae1);
	background-image: linear-gradient(to bottom, #679cfa, #407ae1);
	border-radius: 4px;
	color: #fff;
	line-height: 50px;
	-webkit-transition: none;
	transition: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
	.button::before,
	.button::after {
		position: absolute;
		z-index: -1;
		display: block;
		content: '';
	}
		.button,
		.button::before,
		.button::after {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

		.button:hover {
			border:1px solid #407ae1;
			background-color: #407ae1;
			background-image: -webkit-linear-gradient(top, #407ae1, #679cfa);
			background-image: linear-gradient(to bottom, #407ae1, #679cfa);
		}
		.button:active {
			border:1px solid #4e87ed;
			background-color: #4e87ed;
			background-image: -webkit-linear-gradient(top, #4e87ed, #518cf4);
			background-image: linear-gradient(to bottom, #4e87ed, #518cf4);
			box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
			/* color: #1679a1; */
			text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
		}

.button.back {
	margin-right: 20px;
	width: 100px;
	border: 1px solid #7d7d7d;
	background-color: #7d7d7d;
	background-image: -webkit-linear-gradient(top, #7d7d7d, #5e5e5e);
	background-image: linear-gradient(to bottom, #7d7d7d, #5e5e5e);
}
	.button.back:hover {
		border:1px solid #646464;
		background-color: #646464;
		background-image: -webkit-linear-gradient(top, #646464, #484848);
		background-image: linear-gradient(to bottom, #646464, #484848);
	}

	.button.back + .button {
		width: 330px;
	}

/* =======================================================
*
*	Main Contents
*
* ======================================================= */
#MainContents{
	/* max-width: 680px; */
	margin: 10px auto;
	padding: 24px 20px;
	width: 95%;


	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 10px #333;
	-moz-box-shadow: 0px 0px 10px #333;
	box-shadow: 0px 0px 10px #333;
	background-color: #fff;
}
	#MainContents h1.h1_title{
		position: relative;
		background-color: #6495ed ;
		color: #ffffff;
		-webkit-border-radius: 10px;
		        border-radius: 10px;
		margin: 0 0 10px;
		padding:5px 10px 5px 5px;
		font-size: 22px;
	}
		#MainContents h1.h1_title:before{
			position: relative;
			content: "●";
			top: 5px;
			font-size: 40px;
			line-height: 0;
		}

/* 一覧 */
	#softList{ }
		#softList li{
			position: relative;
			overflow: hidden;
			display: block;
			width: 100%;
			min-height: 170px;
			margin: 0;
			padding: 25px 0 15px 180px;
			border-bottom: 1px dashed #333333;
		}
			#softList li img{
				position: absolute;
				width: 150px;
				top: 10px;
				left: 10px;
			}
			#softList li h2{
				line-height: 1.2em;
				font-size: 20px;
				margin-bottom: 15px;
			}
				#softList li h2 span{
					display: block;
					width: 100%;
					height: 100%;
				}
			#softList li p{
				font-size: 13px;
				max-width: 500px;
				margin: 0;
				padding-right: 200px;
			}
			#softList li > a.button {
				position: absolute;
				right: 0;
				bottom: 10px;
			}
				@media screen and (max-width:650px){
					#softList li h2{
						padding: 0 15px 0 0;
					}
					#softList li p{
						font-size: 13px;
						width: 100%;
						margin: 0 0 10px;
						padding: 0 15px 0 0;
					}
					#softList li > a.button {
						position: static;
						float: right;
						margin-right: 15px;
					}
				}

/* 詳細 */
#SoftDetail{
	position: relative;
	overflow: hidden;
	margin: 0 0 10px;
}
	#SoftDetail #mainINFO{
		float: right;
		width: 55%;
		padding: 20px 0 0;
	}
	#SoftDetail #mainIMG{
		float: left;
		width: 43%;
	}
		#SoftDetail #mainIMG img{
			width: 100%;
			height: auto;
		}
	#SoftDetail h1{
		margin: 0 0 20px 0;
		padding-bottom: 10px;
		line-height: 1.2em;
		border-bottom: 3px solid #6495ed ;
	}
	#SoftDetail ul#imgList{
		margin: 0 0 0 0;
	}
		#SoftDetail ul#imgList li{
			display: inline-block;
			width: 23%;
			cursor: pointer;
		}
			#SoftDetail ul#imgList li img{
				width: 100%;
			}
	#SoftDetail #dlBTN{
		margin: 20px 0 0 0;
		float: right;
	}

h2#about{
	font-size: 18px;
	font-weight: bold;
	border-bottom: 1px solid #6495ed ;
	margin: 0 0 10px;
	padding: 0 0 0 0px;
}
	#about_txt{
		clear: both;
		margin: 0 0 60px;
		font-size: 15px;
		line-height: 1.4em;
	}

		@media screen and (max-width:520px){
			#SoftDetail{
			}
				#SoftDetail #mainINFO{
					padding: 0px 0 0;
				}
				#SoftDetail h1{
					margin: 0 0 10px 0;
				}
				#SoftDetail #dlBTN{
					margin-top: 5px;
					margin-right: 15px;
				}
				.button.back {
					margin-right: 20px;
				}
				.button.back + .button {
					width: 240px;
				}
		}
		@media screen and (max-width:430px){
			#SoftDetail ul#imgList li{
				width: 20%;
			}
			#SoftDetail #dlBTN{
				margin-top: 5px;
				margin-right: 15px;
			}
				#SoftDetail #dlBTN .button{
					width: 150px;
				}
			.button.back {
				margin-right: 10px;
			}
			.button.back + .button {
				width: 180px;
			}

		}