@charset "utf-8";

/**
 *
 *  Groupware - cybozu.com ZL
 *
 */

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

.ttl-type01{
	font-size:26px;
	font-size:2.6rem;
	color:#334A5F;
	margin:40px 0;
}
p.lead-t{
	line-height:2.0;
	font-size:15px;
	font-size:1.5rem;
}
.ttl-type01 + p.lead-t{
	padding-top:0;
}
p.small{
	padding:5px 0 0;
	line-height:1.6;
	text-indent:-25px;
	margin-left:25px;
}
p.notes {
    line-height:1.5;
    font-size: 13px;
    font-size: 1.3rem;
}
p.right {
	float: none;
	text-align: right!important;
}

/*----------------------------------------------------------------------
	Sec01
----------------------------------------------------------------------*/
#Sec01{
	width:100%;
	overflow:hidden;
}
#Sec01 p{
	font-size: 15px;
	font-size: 1.5rem;
	line-height:1.8;
}

#Sec01 h3.cybozu-logo {
	width: 100%;
	max-width: 554px;
	margin: 0 auto;
}


/*----------------------------------------------------------------------
	Sec02
----------------------------------------------------------------------*/
#Sec02 {
    background: #D1E1F5;
	padding:40px 0 70px;
}
#Sec02 h2.ttl-type01 span {
    background: #D1E1F5;
}
#Sec02 .service {
    width: 100%;
    padding: 20px 0 120px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
	flex-wrap: wrap;
}
#Sec02 .service dl {
    background: #FFF;
    width: 24%;
    padding-bottom: 10px;
    position: relative;
}
#Sec02 .service dl:before {
    display: block;
    content: "";
    background: #FFF;
    width: 2px;
    height: 75px;
    position: absolute;
    left: 50%;
    bottom: -75px;
}
#Sec02 .service dl:after {
    display: block;
    content: "";
    background: #FFF;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    bottom: -75px;
    margin-left: -12px;
}

#Sec02 .service dt {
    padding: 20px 0;
    text-align: center;
    position: relative;
}
#Sec02 .service dt span {
    display: block;
    text-align: center;
    line-height: 1.35;
    font-size: 17px;
    font-size: 1.7rem;
    font-weight: bold;
}
#Sec02 .service dt span.new {
    position: absolute;
    right: -4px;
    top: -4px;
}
#Sec02 .service dt span.img{
    height: 80px;
    line-height: 80px;
}
#Sec02 .service dt span.img img {
    max-width:170px;
    height:auto;
    vertical-align: middle;
}
#Sec02 .service dl:first-child dt span.img img {
    max-width:150px;
}
#Sec02 .service dd {
}
#Sec02 .service dd p {
    padding: 0 20px 20px;
    min-height: 200px;
    line-height: 1.6;
    font-size: 15px;
    font-size: 1.5rem;
}
#Sec02 .service dd span {
    display: block;
    width: 90%;
	max-width: 300px;
    margin:0 auto 10px;
}

#Sec02 .service-lower {
    width: 100%;
    background: #FFF;
    padding: 0 0 40px;
    position: relative;
}
#Sec02 .service-lower:before {
    display: block;
    content: "";
    background: #FFF;
    width: 750px;
    height: 2px;
    position: absolute;
    left: 50%;
    top: -60px;
    margin-left: -375px;
}
#Sec02 .service-lower:after {
    display: block;
    content: "";
    background: #FFF;
    width: 2px;
    height: 60px;
    position: absolute;
    left: 50%;
    top: -60px;
}

#Sec02 .service-lower h4 {
    background: #568EDA;
    padding: 10px 0;
    color: #FFF;
    font-size: 22px;
    font-size: 2.2rem;
    text-align: center;
    font-weight: bold;
}
#Sec02 .service-lower p {
    float:left;
    padding: 30px 120px 0;
}
#Sec02 .service-lower p img {
    width: 258px;
    height: auto;
}
#Sec02 .service-lower ul {
    padding-top: 30px;
    padding-left: 500px;
}

/*
.merit-box{
	overflow:hidden;
	margin-right:-40px;
	padding:0 0 40px;
	font-size:0;
}
.merit-box dl{
	width:300px;
	min-height:220px;
	margin-right:39px;
	font-size:15px;
	font-size:1.5rem;
	line-height:1.5;
	display:inline-block;
	vertical-align:top;
}
.merit-box dt{
	background:#568EDA;
	padding:20px 0;
	margin:0 0 25px;
	color:#FFF;
	font-size:25px;
	font-size:2.5rem;
	font-weight:bold;
	text-align:center;
	line-height:1.2;
}
.merit-box dd{
	text-align:center;
}
.merit-box dd p{
	text-align:left;
}
.merit-box dd img{
	margin:0 auto;
}
*/

/*----------------------------------------------------------------------
	Sec03
----------------------------------------------------------------------*/
#Sec03{
	padding:70px 0;
}

#Sec03 h4 {
    background: #568EDA;
    padding: 5px 0;
    color: #FFF;
    font-size: 20px;
    font-size: 2.0rem;
    text-align: center;
    font-weight: bold;
}
#Sec03 h5 {
    font-size: 22px;
    font-size: 2.2rem;
}

ul.service-example {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
	flex-wrap: wrap;
}
ul.service-example li {
	width: 100%;
    max-width: 400px;
    height: 100px;
    line-height: 100px;
    border: 3px solid #568EDA;
    border-radius: 10px;
    position: relative;
}
ul.service-example li:first-child:after {
    display: block;
    content: "×";
    color: #568EDA;
    font-size: 40px;
    font-size: 4.0rem;
    font-weight: bold;
    position: absolute;
    right: -60px;
    top: 0;
}
ul.service-example li img {
    max-width:150px;
    height:auto;
    vertical-align: middle;
}
ul.service-example li span {
    display: inline-block;
    padding: 0 50px 0 30px ;
    color: #568EDA;
    font-weight: bold;
    float: left;
}



/*----------------------------------------------------------------------
	Sec04
----------------------------------------------------------------------*/
#Sec04{
	padding:0 0 10px;
    margin-top: -60px;
    padding-top: 60px;
}
#Sec04 h3 {
    font-size:22px;
    font-size:2.2rem;
}
.priceTable{
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
.priceTable th ,
.priceTable td {
    padding: 12px 15px;
	text-align: center;
    line-height: 1.35;
	vertical-align: middle;
    font-weight: normal;
	border: 1px solid rgb(204,204,204);
}
.priceTable thead th img {
    max-width: 120px;
    height:auto;
}
.priceTable thead th.cybozu img {
    max-width: 85px;
}
.priceTable thead th.none {
    border: none;
}
.priceTable tbody th {
    background: #2C425A;
	color:#FFF;
}
.priceTable td {
	background:#FFF;
}
.priceTable.spec td {
    text-align: left;
}
.scroll_box table {
	width: 980px;
}


/*----------------------------------------------------------------------
	Sec05
----------------------------------------------------------------------*/
#Sec05{
    margin-top: -110px;
    padding-top: 110px;
}
#Sec05 p{
	padding-bottom: 30px;
	font-size: 15px;
	font-size: 1.5rem;
	line-height:1.8;
}

ol.decimal{
	padding-top:30px;
}
ol.decimal li{
	padding:0 0 3px;
}


/*----------------------------------------------------------------------
	Sec06
----------------------------------------------------------------------*/
#Sec06{
}

.service-box{
	padding:50px 0;
	line-height:1.6;
	font-size:15px;
	font-size:1.5rem;
	box-sizing:border-box;
	overflow:hidden;
}
.service-box.mail{
	background:#FFEFBF;
}
.service-box.cybozu10{
	background:#E7EFFA;
}
.service-box .img{
	display:table-cell;
	width:200px;
	height:100px;
	text-align:center;
	vertical-align:middle;
	float:left;
}
.service-box.mail .img{
	height:120px;
	padding-top:30px;
}
.service-box .img a:hover{
	opacity:0.7;
}
.service-box h4{
    padding: 0 0 10px;
    text-align: center;
	font-size:23px;
	font-size:2.3rem;
}
.service-box p{
	padding:5px 0 0;

	line-height:1.6 !important;
}
.service-box p b{
	font-size:16px !important;
	font-size:1.6rem !important;
}
.service-box .recomend{
	padding:10px 0;
	display:flex;
}
.service-box .recomend p{
	background:#FFF;
	padding:23px 20px 0 !important;
	margin:0 !important;
	vertical-align:middle;
}
.service-box .recomend ul{
	background:#FFF4D2;
	padding:5px 50px;
	border:2px solid #FFF;
}


/*----------------------------------------------------------------------
	Support
----------------------------------------------------------------------*/
#Support{
	background: url(/rentalserver/shared/images/info_bg.jpg) no-repeat 50% 0 / cover;
	padding:30px 0;
	border-top: 1px solid #c5d6e7;
	overflow:hidden;
}
#Support .sec-inner{
	width:740px;
	margin:0 auto;
	padding:20px 0;
	overflow:hidden
}
#Support .sec-inner h3{
	font-size:18px;
	font-size:1.8rem;
	line-height:1.4;
	color:#004381;
}
#Support .sec-inner h3 + p{
	float:left;
}
#Support .sec-inner h3 + p + p{
	float:right;
	margin-right:3px;
}
#Support .sec-inner .btn-contact a,
#Support .sec-inner .btn-order a {
	padding:25px 0 0;
	height:70px;
}


/*----------------------------------------------------------------------------------------------------
	for タブレット（1039px以下）
-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1039px) {
	#Sec02 .service dl {
		width: 49%;
		margin-bottom: 15px;
	}
	#Sec02 .service dl:nth-child(3),
	#Sec02 .service dl:nth-child(4) {
		margin-bottom: 0;
	}
	#Sec02 .service dd p {
		min-height: 150px;
	}
	#Sec02 .service-lower {
		padding: 0;
	}
	#Sec02 .service-lower p {
		float: none;
		padding: 30px 0 0;
		text-align: center;
	}
	#Sec02 .service-lower ul {
		padding: 20px 10px 20px 50px;
	}
	ul.service-example {
		display: block;
	}
	ul.service-example li {
		margin: 0 auto 30px;
	}
	ul.service-example li:first-child:after {
		width: 30px;
		top: auto;
		bottom: -65px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	#Sec03 h5 {
		text-align: center;
	}
	.scroll_box {
		padding-bottom: 15px;
	}
}
/*----------------------------------------------------------------------------------------------------
	for SP（768px以下）
-----------------------------------------------------------------------------------------------------*/
@media (max-width: 768px) {
	.ttl-type01 {
		font-size: 1.8rem;
	}
	.ttl-type01.line-2 span {
		padding: 0 15px 10px;
	}
	#Sec02 .service dl {
		width: 100%;
	}
	#Sec02 .service dl:nth-child(3) {
		margin-bottom: 15px;
	}
	#Sec02 .service dd p {
		min-height: auto;
	}
	#Sec02 .service-lower:before {
		content: none;
	}
	#Sec02 .service-lower h4 {
		font-size: 1.8rem;
		padding: 10px;
	}
	#Sec03 h4 {
		line-height: 1.2;
		padding: 10px;
	}
	ul.service-example li {
		margin-bottom: 35px;
		height: auto;
		text-align: center;
		line-height: 80px;
	}
	ul.service-example li span {
		float: none;
		padding: 0;
		display: block;
	}
	ul.service-example li img {
		margin-top: -60px;
	}
	ul.service-example li:first-child:after {
		bottom: -58px;
	}
	.service-box.mail .img {
		float: none;
		display: block;
		width: auto;
		height: auto;
		padding-top: 0;
	}
	.service-box .recomend {
		display: block;
	}
	.service-box .recomend p {
		text-align: center;
		padding: 23px 20px 17px !important;
	}
	.service-box .recomend ul {
		padding: 20px 50px;
	}
	.service-box .img {
		float: none;
		display: block;
		width: auto;
	}
	#Support .sec-inner {
		width: 95%;
	}
	#Support .sec-inner h3 + p {
		float: none;
		margin-bottom: 10px;
	}
	#Support .sec-inner h3 + p + p {
		float: none;
	}
	.btn-order a,
	.btn-contact a {
		width: 100%;
		max-width: 350px;
	}
}