@charset "utf-8";

/*
service/index.html 
---------------------------------------------------------- */

#service_index .section{
	margin-bottom:40px;
	position:relative;
}

/* 詳細 */
#service_index .more{
	position:absolute;
	top:16px;
	right:0;
}
#service_index .more a{
	display:block;
	width:59px;
	height:22px;
	line-height:22px;
	text-indent:14px;
	font-size:12px;
	background:url(/images/top/p_list.gif) no-repeat 0 0;
	text-decoration:none;
}

/* キャンペーン */
.news_ticker{
	display: table;
	width: 100%;
	margin-bottom: 20px;
	border: 1px solid #d6d6d6;
	font-size:11px;
	
	background: #eee; /* Old browsers */
	background: -moz-linear-gradient(top,  #b9b7b7 1%, #eeeeee 8%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#b9b7b7), color-stop(8%,#eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #b9b7b7 1%,#eeeeee 8%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #b9b7b7 1%,#eeeeee 8%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #b9b7b7 1%,#eeeeee 8%); /* IE10+ */
	background: linear-gradient(to bottom,  #b9b7b7 1%,#eeeeee 8%); /* W3C */
	}
	.news_ticker:before{
		content:'キャンペーン実施中';
		display: table-cell;
		width:128px;
		vertical-align: middle;
		background: #f90;
		color: #fff;
		text-align:center;
		}
	.news_ticker li{
		margin:7px 0 7px 16px;
		}
	.news_ticker a{
		text-decoration: underline;
		}
	.news_ticker a:hover{
		text-decoration: none;
		}

/* プランの紹介 */
#service_index .plan{
	margin-bottom:-10px;
	background:#eee;
}
#service_index .plan li{
	float:left;
	margin:5px 0 5px 5px;
	background:#fff;
	border:1px solid #d9d9d9;
	text-align:center;
}
#service_index .plan .shared{width:163px;}
#service_index .plan .shared a{width:165px;}
#service_index .plan .shared.recommend{width:197px;}
#service_index .plan .shared.recommend a{width:199px;}
#service_index .plan .private{width:350px;}
#service_index .plan .private a{width:352px;}
#service_index .plan .privatecloud{width:707px;}
#service_index .plan .privatecloud a{width:709px;}
#service_index .plan a{
	display:block;
	position:relative;
	padding:74px 0 8px;
	color:#000;
	text-decoration: none;
}
#service_index .plan a:after{
	content:'';
	position:absolute;
	right:1px;
	bottom:-1px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 12px 12px;
	border-color: transparent transparent #3599f6 transparent;
}
#service_index .plan .tit_shared_b,
#service_index .plan .tit_shared_s,
#service_index .plan .tit_shared_g,
#service_index .plan .tit_shared_p,
#service_index .plan .tit_managed,
#service_index .plan .tit_self,
#service_index .plan .tit_selfplus,
#service_index .plan .tit_privatecloud{
	position:absolute;
	top:-1px;
	left:-1px;
	display: block;
	width: 100%;
	height: 64px;
	background-image: url(/images/service/service_top/ico_sprite2.png);
	background-repeat: no-repeat;

	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#service_index .plan a .tit_shared_b{background-position: 0 0;}
#service_index .plan a:hover .tit_shared_b{background-position: 0 -64px;}
#service_index .plan a .tit_shared_s{background-position: -165px 0;}
#service_index .plan a:hover .tit_shared_s{background-position: -165px -64px;}
#service_index .plan a .tit_shared_g{background-position: -364px 0;}
#service_index .plan a:hover .tit_shared_g{background-position: -364px -64px;}
#service_index .plan a .tit_shared_p{background-position: -529px 0;}
#service_index .plan a:hover .tit_shared_p{background-position: -529px -64px;}
#service_index .plan a .tit_managed{background-position: 0 -128px;}
#service_index .plan a:hover .tit_managed{background-position: 0 -192px;}
#service_index .plan a .tit_self{background-position: -352px -128px;}
#service_index .plan a:hover .tit_self{background-position: -352px -192px;}
#service_index .plan a .tit_privatecloud{background-position: 0 -256px;}
#service_index .plan a:hover .tit_privatecloud{background-position: 0 -320px;}

#service_index .plan .text{
	display: block;
	margin:0 15px 8px;
	padding-bottom:8px;
	border-bottom:1px solid #d9d9d9;
}
#service_index .plan .price,
#service_index .plan .spec{
	font-size: 16px;
	font-weight: bold;
}
#service_index .plan .day{
	display: block;
	margin-bottom: 5px;
}
#service_index .plan .day strong{
	font-size: 20px;
	font-weight: bold;
}
#service_index .plan .price{
	color: #f41044;
	padding-left: 2em;
}
#service_index .plan .shared.recommend .price{
	padding-left: 4em;
}
#service_index .plan .shared.recommend .spec{
	padding-left: 3em;
}