@charset "utf-8";

/* CSS Document */
.accListLi a{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.accListLi{
	display:inline-block;
	position:relative;

	margin-top:7px;
	margin-right:5px;
	margin-left:5px;
	margin-bottom:7px;
	padding:10px;

	width:23%;
	height:225px;

	background:#fff;
}
.acText{
	/*font-size: medium;*/
	padding:5px 0px;
}
.acImg{
	text-align:center;
	/*padding:10px;*/
	position:relative;
}
.sysListImg{
	max-height:115px;
}
.sysOpOk{
	position:absolute;
	top:-1px;
}
.sysOpOk img{
	height:116px;
	width:100%;
}
.caption{
	color:#FF608C;
	/*font-size:small;*/
}

.opBtn{
	position:absolute;
	width:90%;
	bottom:10px;
	left:5%;
	
	padding:5px;
	
	text-align:center;
	background:#ededed;
	
	/* border-radius */
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	/* box-shadow */
	box-shadow:rgba(0, 0, 0, 0.2) 0px 2px 1px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.2) 0px 2px 1px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.2) 0px 2px 1px 0px;
}
.optionModal{
	display:none;
}
.opImg{
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
	
	max-width:420px;
}
.opImg img{
	max-height:315px;
}
.opCap{
	margin:10px;
	max-width:400px;
}

.optionFeeBg{
	width:100%;
	height:40px;
	position:relative;

	/* border-radius */
	border-radius:8px 8px 0px 0px;
	-webkit-border-radius:8px 8px 0px 0px;
	-moz-border-radius:8px 8px 0px 0px;
}
.optionFeeBg>div{
/*	background:url(../images/featherH.png);
	background-size: contain;
	background-repeat:no-repeat;
	background-position:bottom right;*/

	background:url(../images/featherH.png), url(../images/bgHalfTrans.png);
	background-size: contain, auto;
	background-repeat:no-repeat, repeat;
	background-position:bottom right;
}
div.optionFeeBlock >div>div{
/*	background:url(../images/bgHalfTrans.png);
	background-size:auto;
	background-repeat:repeat;
*/}


/*見出し背景色*/
#sysOp>div:nth-of-type(1) >div{background:#ffdede;}
#sysOp>div:nth-of-type(2) >div{background:#ffeaca;}
#sysOp>div:nth-of-type(3) >div{background:#fffbb8;}
#sysOp>div:nth-of-type(4) >div{background:#e3ffbf;}
#sysOp>div:nth-of-type(5) >div{background:#cdf9b6;}
#sysOp>div:nth-of-type(6) >div{background:#c1fffe;}
#sysOp>div:nth-of-type(7) >div{background:#c1e4ff;}
#sysOp>div:nth-of-type(8) >div{background:#deceff;}
#sysOp>div:nth-of-type(9) >div{background:#d8d8d8;}
#sysOp>div:nth-of-type(10)>div{background:#cdc8a8;}

/*リンク背景色*/
div#optionNav ul li:nth-of-type(1) {background:#ffdede;}
div#optionNav ul li:nth-of-type(2) {background:#ffeaca;}
div#optionNav ul li:nth-of-type(3) {background:#fffbb8;}
div#optionNav ul li:nth-of-type(4) {background:#e3ffbf;}
div#optionNav ul li:nth-of-type(5) {background:#cdf9b6;}
div#optionNav ul li:nth-of-type(6) {background:#c1fffe;}
div#optionNav ul li:nth-of-type(7) {background:#c1e4ff;}
div#optionNav ul li:nth-of-type(8) {background:#deceff;}
div#optionNav ul li:nth-of-type(9) {background:#d8d8d8;}
div#optionNav ul li:nth-of-type(10){background:#cdc8a8;}


.optionFeeBg img{
	height:40px;
}





#optionNav{
	height:80px;
	margin-bottom:20px;
}
#optionNav ul{
	margin:0 auto;
	width:100%;
	font-size:0;

	border-top:1px solid #fff;
	border-left:1px solid #fff;
}
#optionNav ul li{
	width:20%;
	display: inline-block;
}
#optionNav ul li img{
	/*height:40px;*/
}
#optionNav ul li a{
	display:block;
	width:100%;
	height:40px;
	color:#666;
	line-height:40px;
	font-weight:bold;
	text-decoration:none;
	text-align:center;

	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
}
#optionNav ul li:hover	{
	filter:alpha(opacity=90);
	opacity:0.9;
}



	/*
	tablet
	*/
	@media screen and (min-width: 600px) and (max-width: 860px) {
	.accListLi{
		display:inline-block;
		position:relative;
	
		margin-top:14px;
		margin-right:0.75%;
		margin-left:0.75%;
		padding:10px;
	
		width:22.5%;
		height:200px;
	
		background:#fff;
	}
	.sysListImg{
		max-height:70px;
	}
	.sysOpOk{
		position:absolute;
		top:-1px;
	}
	.sysOpOk img{
		height:71px;
	}

	}



		/*
		SP
		*/
		@media screen and (min-width: 0px) and (max-width: 599px) {
		.accListLi{
			display:inline-block;
			position:relative;
		
			margin-top:5px;
			margin-right:0.5%;
			margin-left:0.5%;
			padding:5px;
		
			width:22.5%;
			height:175px;
		
			background:#fff;
		}
		.sysListImg{
			max-height:40px;
		}
		.opBtn{
			position:absolute;
			width:90%;
			bottom:5px;
			left:5%;
			
			padding:5px;
			
			text-align:center;
			background:#ededed;
		}
		.sysListImg{
			max-height:35px;
		}
		.sysOpOk{
			position:absolute;
			top:-1px;
		}
		.sysOpOk img{
			height:36px;
		}

		}