@charset "utf-8";

/**
 *
 *  option　- オプション
 *
 */

/*--------------------------------------------------------------------------
   overwrite
---------------------------------------------------------------------------*/

.inner-navi02 li {
	width: auto;
	margin-right: 12px;
}

/*.ttl-type01 span{
	background:#F6F6F7;
}*/

.banner-box {
	padding:0 0 35px;
}

table th, table td {
	border: 1px solid #000!important;
}

/* .option-box
--------------------------------------------------*/
.option-box,
.option-box *,
.option-box-nolink,
.option-box-nolink * {
	box-sizing:border-box;
}

.options {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	overflow:hidden;
	margin:30px auto;
}
.option-box,
.option-box-nolink {
	display:block;
	background:#FBFBFB;
	width:470px;
	height:290px;
	margin:0 0 30px;
	padding:0;
	border:2px solid #C8CBD2;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	box-sizing:border-box;
	overflow:hidden;
	position:relative;
}

.option-box .option-main,
.option-box-nolink .option-main {
	display:block;
	overflow:hidden;
	color:#455D6B;
	padding:35px 35px 10px 175px;
}

.option-groupware{
	height: auto;
}

.option-box .option-main h2,
.option-box-nolink .option-main h2 {
	font-size:22px;
	font-size:2.2rem;
	font-weight:bold;
	line-height:1.1;
	padding-bottom:10px;
	margin-bottom:10px;
	border-bottom:3px solid #E4E4E4;
}

.option-box .option-main p,
.option-box-nolink .option-main p{
	font-size:14px;
	font-size:1.4rem;
	font-weight:normal;
	line-height:1.5;
	word-break:break-all;
}

.option-domain {background:url(/rentalserver/option/images/bg_domain.png) no-repeat left center;}
.option-ssl {background:url(/rentalserver/option/images/bg_ssl.png) no-repeat right center;}
.option-mail {background:url(/rentalserver/option/images/bg_mail.png) no-repeat left center;}
.option-cdn {background:url(/rentalserver/option/images/bg_cdn.png) no-repeat right center;}
.option-groupware {background:url(/rentalserver/option/images/bg_groupware.png) no-repeat right 0 bottom -40px;}
.option-operation {background:url(/rentalserver/option/images/bg_operation.png) no-repeat left 0 bottom 50px;}

.option-domain .option-main {background:url(/rentalserver/option/images/icon_domain.png) no-repeat 52px center;}
.option-ssl .option-main {background:url(/rentalserver/option/images/icon_ssl.png) no-repeat 64px center;}
.option-mail .option-main {background:url(/rentalserver/option/images/icon_mail.png) no-repeat 50px center;}
.option-cdn .option-main {background:url(/rentalserver/option/images/icon_cdn.png) no-repeat 58px center;}
.option-groupware .option-main {background:url(/rentalserver/option/images/icon_groupware.png) no-repeat 35px 70%;}
.option-operation .option-main {background:url(/rentalserver/option/images/icon_operation.png) no-repeat 58px center;}

.option-sub {
	z-index:9999;
	text-align:center;
}

.option_feature {
	width:90%;
	margin:0 auto;
}

.option_feature th{
	padding:5px;
	font-size:15px;
	font-size:1.5rem;
	line-height:1.2;
	background-color:#000;
	/*opacity:0.9;*/
	color:#FFDF00;
	font-weight:bold;
}

.option-ssl .option_feature th {
	color:#9DDB1C;
}

.option-ssl .option_feature th span {
	padding:0 1px;
	font-size:35px;
	font-size:3.5rem;
	vertical-align:sub;
	line-height:1;
}

.option_feature td {
	padding:7px 10px;
	text-align:left;
	font-size:13px;
	font-size:1.3rem;
	line-height:1.3;
	color:#000;
	/*opacity:0.9;*/
	background-color:#fff;
}
.option_btn_detail {
	display:block;
	overflow:hidden;
	width:100%;
	height:50px;
	margin:0 auto;
	display:block;
	background:#00437F url("/rentalserver/shared/images/ico_arw_order.png") no-repeat scroll 150px center;
	text-align:center;
	position:absolute;
	bottom:0;
	padding:11px 0 0;
}
.option_btn_detail a {
	color:#fff;
	font-size:15px;
	font-size:1.5rem;
	text-decoration:none;
	font-weight:bold;
}

.option_feature li{
	width:90%;
	margin:0 auto;
	border: 2px solid #FF0000;
    background: white;
	line-height: 1.5;
	text-align: left;
	 padding: 5px;
}


.cybozu {
    margin: 0 15px;
    padding: 30px 0 10px;
    text-align: center;
    border-top: 1px solid #C8CBD2;
}
.cybozu h3 {}
.cybozu p span {
    margin: 0 auto 20px;
}
.cybozu p + p {
    margin: 0 30px 20px;
    line-height: 1.5;
    text-align: left;
}
.cybozu ul {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.cybozu li {
     -webkit-flex-grow: 0;
    flex-grow: 0;
    width:47.5%;
    min-height: 100px;
    padding-top: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid #C8CBD2;
    border-radius: 7px;
	background-color: #fff;
}
.cybozu li:nth-of-type(n+3) {
    margin-top: 10px;
    padding-top: 20px;
}
.cybozu li:hover {
    border-color:#43BBE9;
}
.cybozu li a {
    display: block;
    text-decoration: none;
    color: #2C3A43;
}
.cybozu li span {
    display: block;
    line-height: 1.2;
    text-align: center;
    font-size: 14px;
    font-size: 1.4rem;
}

.groupware-box {
	margin:20px 15px 0;
}
.groupware-box dl{
	width:100%;
	padding:30px 0;
	border-top:1px solid #C8CBD2;
	overflow:hidden;
}
.groupware-box dt{
	width:40%;
	float:left;
	text-align:center;
}
.groupware-box dt span{
	display:block;
	padding-top:20px;
}
.groupware-box dd{
	width:60%;
	float:right;
	color:#455D6B;
	line-height:1.5;
	font-size:13px;
	font-size:1.3rem;
}
.option-groupware .btn-navy{
	display:block;
	width:120px;
	height:40px;
	padding-top:10px;
}
.option-groupware .btn-navy a{
	padding:5px 0 3px;
	font-size:13px;
	font-size:1.3rem;
	font-weight:normal;
	box-shadow:1px 1px 0 #00284d;
}

.garoon_logo img {
	width: 125px;
}


/* .option-box マウスオーバー時
--------------------------------------------------*/
.option-box:hover{
	/*background:#F6FBFF;*/
	opacity:0.9;
	border:2px solid #43BBE9;
}

/*----------------------------------------------------------------------------------------------------
	for タブレット（1039px以下）
-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1039px) {
	.options {
		justify-content: center;
	}
	.option-box, .option-box-nolink,
	.option-box:nth-child(2), .option-box-nolink {
		float: none;
		margin: 0 auto 15px;
		width: 100%;
		max-width: 470px;
		height: auto;
		min-height: 290px;
	}
}
/*----------------------------------------------------------------------------------------------------
	for SP（768px以下）
-----------------------------------------------------------------------------------------------------*/
@media (max-width: 768px) {
	.option_btn_detail {
		background-image: none;
	}
	.option-domain .option-main,
	.option-ssl .option-main,
	.option-mail .option-main,
	.option-groupware .option-main,
	.option-operation .option-main {
		background: none;
	}
	.option-box .option-main,
	.option-box-nolink .option-main {
		padding: 35px;
	}
	.option-sub {
		padding-bottom: 100px;
	}
	.cybozu li {
		width: 100%;
		margin-bottom: 5px;
	}
	.cybozu li:nth-of-type(n+3) {
		margin-top: 0;
	}
}