@charset "UTF-8";

/* //////////////////////////////////////////////////
Cybozu, Inc. WEB SITE 2016
COPYRIGHT © Cybozu, Inc.
ALL RIGHTS RESERVED.
////////////////////////////////////////////////// */

/* --------------------------------------------------
top slider
-------------------------------------------------- */
.top_slider {
  width:100%;
  min-width:1000px;
  height:380px;
  margin:0 auto;
}
.top_slide-wrap {
  position:relative;
  width:100%;
  height:380px;
}
.top_slide-wrap .main-image {
  position:absolute;
  top:0;
  left:0;
}

.top_slide-wrap .main-image a {
  display:block;
  width:100%;
  height:380px;
  text-decoration:none;
}
.top_slide-wrap .main-image a:hover {
  text-decoration:none;
}
.top_slide-wrap .main-image {
  width:100%;
  height:380px;
  background:#2ec0dd url(../images/slide/main_image/main-image-cloud.png) repeat-x 50% 50%;
}
.top_slide-wrap .main-image.green {
  background:#90c31f url(../images/slide/main_image/main-image-cloud.png) repeat-x 50% 50%;
}
.top_slide-wrap .main-image .inner {
  width:980px;
  margin:0 auto;
  padding:130px 0 0 0;
}
.top_slide-wrap .main-image .inner h1 {
  font-size:32px;
  color:#fff;
  letter-spacing:0.1em;
}
.top_slide-wrap .main-image .lead-copy {
  color:#fff;
  font-size:20px;
}
.slide-link {
  margin:5px 0 0 0;
  color:#ffea00;
}
.slide-link::after {
  content:"";
  display:inline-block;
  width:0.6em;
  height:0.6em;
  border-top:2px solid #ffea00;
  border-right:2px solid #ffea00;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.slide-link:hover {
  text-decoration:underline;
}


/* --------------------------------------------------
top_service
-------------------------------------------------- */
.top_service {
  width:100%;
  height:auto;
  padding:30px 0 60px 0;
}
.top_service h2 {
 text-align:center;
 margin-bottom: 1em;
 padding-bottom: .4em;
 position: relative;
 font-size: 32px;
 border-bottom: none;
 font-weight: 200;
}
.top_service h2 span {
  line-height:45px;
  padding:0 0 5px 0;
}
  
.list--top_service {
  width:1000px;
  height:auto;
  margin:40px auto 0 auto;
  list-style:none;
  border-left:1px solid #e5e5e5;
} 
.list--top_service li {
  width:250px;
  border-right:1px solid #e5e5e5;
}
.top_service-image {
  width:200px;
  height:140px;
  margin:0 auto;
}
.top_service-copy {
  font-size:14px;
  width:220px;
  height:auto;
  margin:0 auto;
}
.top_service-link {
  width:200px;
  margin:10px auto 0 auto;
}

/* --------------------------------------------------
top_security
-------------------------------------------------- */
.top_security {
  width:100%;
  height:auto;
  background:#f7f7f7;
  padding:60px 0;
}
.top_security h2 {
  text-align:center;
}
.top_security-image {
  position:relative;
  border:8px solid #ebebeb;
  border-radius:50%;
  width:500px;
  height:500px;
  margin:60px auto 0 auto;
  background:url(../images/common/security--top-image_cloud.png) no-repeat 50% 50%;
}

/*security-item*/
.security-item-01,
.security-item-02,
.security-item-03,
.security-item-04,
.security-item-05,
.security-item-06,
.security-item-07 {
  position:absolute;
}
.security-item-01 { top:0; left:-190px; text-align:right;}
.security-item-02 { top:-30px; right:-100px; text-align:left;}
.security-item-03 { top:115px; right:-250px; text-align:left;}
.security-item-04 { top:330px; right:-230px; text-align:left;}
.security-item-05 { top:435px; right:-40px; text-align:left;}
.security-item-06 { bottom:10px; left:-220px; text-align:right;}
.security-item-07 { top:190px; left:-250px; text-align:right;}

.security-category {
  font-size:11px;
  display:inline-block;
  position:relative;
  background:#fff;
  padding:2px 5px;
}
.security-item-01 .security-category,
.security-item-02 .security-category,
.security-item-03 .security-category {
  color:#4bd7f3;
  border:1px solid #4bd7f3;
}
.security-item-04 .security-category,
.security-item-05 .security-category,
.security-item-06 .security-category,
.security-item-07 .security-category {
  color:#90c31f;
  border:1px solid #90c31f;
}
.security-item-01 .security-category::after,
.security-item-02 .security-category::after,
.security-item-03 .security-category::after,
.security-item-04 .security-category::after,
.security-item-05 .security-category::after,
.security-item-06 .security-category::after,
.security-item-07 .security-category::after {
  content:"";
  position:absolute;
  top:50%;
  margin-top:-5px;
  border:5px solid transparent;
}
.security-item-01 .security-category::after {
  right:-10px;
  border-left:5px solid #4bd7f3;
}
.security-item-02 .security-category::after,
.security-item-03 .security-category::after {
  left:-10px;
  border-right:5px solid #4bd7f3;
}
.security-item-04 .security-category::after,
.security-item-05 .security-category::after {
  left:-10px;
  border-right:5px solid #90c31f;
}
.security-item-06 .security-category::after,
.security-item-07 .security-category::after {
  right:-10px;
  border-left:5px solid #90c31f;
}
.security-title {
  margin:3px auto 0 auto;
  font-weight:bold;
}
.security-title span.number {
  border-radius:50%;
  display:inline-block;
  text-align:center;
  width:1.5em;
  height:1.5em;
  line-height:1.5em;
  color:#fff;
  font-size:14px;
  background:#333;
  margin:0 5px 0 0;
  vertical-align:middle;
}
.security-copy {
  margin:3px auto 0 auto;
  font-size:12px;
}

.security-link {
  position:absolute;
  top:0;
  width:90px;
  height:90px;
  padding:0 5px 20px 5px;
  border-radius:50%;
}
.security-link img {
  width:75px;
  height:75px;
}
.security-item-01 .security-link,
.security-item-02 .security-link,
.security-item-03 .security-link {
  background:#4bd7f3;
  border:2px solid rgba(114,194,211,1);
	box-shadow: 0 5px 0 rgba(114,194,211,1);
}

.security-item-04 .security-link,
.security-item-05 .security-link,
.security-item-06 .security-link,
.security-item-07 .security-link {
  background:#90c31f;
  border:2px solid rgba(133,175,40,1);
	box-shadow: 0 5px 0 rgba(133,175,40,1);
}
.security-item-01 .security-link { right:-100px;}
.security-item-02 .security-link { left:-100px;}
.security-item-03 .security-link { left:-100px;}
.security-item-04 .security-link { left:-100px;}
.security-item-05 .security-link { left:-100px;}
.security-item-06 .security-link { right:-100px;}
.security-item-07 .security-link { right:-100px;}

.security-item-01 .security-link:hover,
.security-item-02 .security-link:hover,
.security-item-03 .security-link:hover {
  background:#6be1f9;
}

.security-item-04 .security-link:hover,
.security-item-05 .security-link:hover,
.security-item-06 .security-link:hover,
.security-item-07 .security-link:hover {
  background:#acdf3c;
}

.security-link:active {
  top:2px;
}
.security-link a {
  display:block;
  padding:0 0 20px 0;
}
.security-link::before {
  content:"";
  position:absolute;
  z-index:900;
	bottom:5px;
	left: 50%;
	width: 14px;
	height: 14px;
  margin-left:-7px;
	border-radius: 100%;
}
.security-link::after {
  content:"";
  position:absolute;
  z-index:9998;
	bottom:5px;
	left: 50%;
	width: 8px;
	height: 8px;
  margin-left:-4px;
  border:4px solid transparent;
  border-top:4px solid #fff;
}

.security-item-01 .security-link::before,
.security-item-02 .security-link::before,
.security-item-03 .security-link::before {
  background:#6be1f9;
}

.security-item-04 .security-link::before,
.security-item-05 .security-link::before,
.security-item-06 .security-link::before,
.security-item-07 .security-link::before {
  background:#a5d43e;
}





/* --------------------------------------------------
top_buy
-------------------------------------------------- */
.top_buy {
  width:100%;
  height:auto;
  padding:60px 0;
}
.top_buy h2 {
  text-align:center;
 margin-bottom: 1em;
 padding-bottom: .4em;
 position: relative;
 font-size: 32px;
 border-bottom: none;
 font-weight: 200;
}
.top_buy--inner {
  width:1000px;
  height:auto;
  margin:40px auto 0 auto;
}
.top_buy--item {
  width:480px;
  height:auto;
}
.top_buy--item h3 {
  background:#f6f6f6;
  font-size:20px;
  text-align:center;
  padding:10px;
	font-family:
	'M+ P Type-2 (basic latin) Light',
	'M+ Type-2 (general-j) Light', sans-serif;
}
.top_buy--item h3.blue { border-bottom:5px solid #4bd7f3;}
.top_buy--item h3.green { border-bottom:5px solid #90c31f;}
.top_buy--item > p {
  margin:15px auto 0 auto;
  padding:0 5px;
}
.top_buy--link_item {
  text-align:center;
  margin:10px auto 0 auto;
}
.top_buy--link_item a {
  width:220px;
}

/* --------------------------------------------------
top_support
-------------------------------------------------- */
.top_support {
  width:100%;
  height:auto;
  padding:60px 0;
  background:#f7f7f7;
}
.top_support h2 {
  text-align:center;
  font-size:36px;
	font-family:
	'M+ P Type-2 (basic latin) Thin',
	'M+ Type-2 (general-j) Thin', sans-serif;
}
.top_support--inner {
  width:1000px;
  height:auto;
  margin:40px auto 0 auto;
}
.top_support--item-left {
  width:380px;
  height:auto;
}
.top_support--item-left img {
  width:auto;
  max-width:100%;
  height:auto;
  border:2px solid #fff;
	box-shadow: 0 3px 0 rgba(0,0,0,0.2);
}
.top_support--item-left img:hover {
  opacity:0.75;
}
.top_support--item-right {
  width:580px;
  height:auto;
}
.top_support--item-right h3 {
  background:#fff;
  font-size:20px;
  text-align:center;
  padding:10px;
	font-family:
	'M+ P Type-2 (basic latin) Light',
	'M+ Type-2 (general-j) Light', sans-serif;
}
.top_support--item-right h3.blue {
  border-bottom:5px solid #4bd7f3;
}
.list__top-support {
  list-style:none;
  margin:20px auto 0 auto;
}
.list__top-support li {
  position:relative;
  width:128px;
  height:128px;
  border-radius:50%;
  background:#fff;
	box-shadow: 0 3px 0 rgba(0,0,0,0.2);
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.list__top-support li a {
  display:block;
  text-align:center;
  padding:25px 0 0 0;
}
.list__top-support li a img {
  width:100px;
  height:75px;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
/*.list__top-support li a:hover {
  padding:20px 0 0 0;
}*/
.list__top-support li:hover img {
  width:100px;
  height:75px;
}
.list__top-support li.of:hover{
	box-shadow: 0 0 0 2px #1992d4;
}
.list__top-support li.gr:hover{
	box-shadow: 0 0 0 2px #003399;
}
.list__top-support li.ki:hover{
	box-shadow: 0 0 0 2px #ffbf00;
}
.list__top-support li.mw:hover{
	box-shadow: 0 0 0 2px #dd2f4d;
}