@charset "UTF-8";

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

/* --------------------------------------------------
スマートフォン向け（画面767px以下）
-------------------------------------------------- */

/* --------------------------------------------------
top slider
-------------------------------------------------- */
.top_slider {
  width:100%;
  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-sp.png) repeat-x 50% 85%;
  background-size:contain;
}
.top_slide-wrap .main-image.green {
  background:#90c31f url(../../images/slide/main_image/main-image-cloud-sp.png) repeat-x 50% 80%;
  background-size:contain;
}
.top_slide-wrap .main-image .inner {
  width:100%;
  margin:0 auto;
  text-align:center;
  padding:40px 0 0 0;
}
.top_slide-wrap .main-image .inner h1 {
  font-size:22px;
  color:#fff;
  letter-spacing:0.1em;
}
.top_slide-wrap .main-image .lead-copy {
  color:#fff;
  font-size:14px;
}
.slide-link {
  font-size:14px;
  display:inline-block;
  background:#ffea00;
  border-radius:2em;
  line-height:2em;
  padding:0 1em;
  margin:5px 0 0 0;
  color:#333;
  text-decoration:none;
}
.slide-link::after {
  content:"";
  display:inline-block;
  width:0.6em;
  height:0.6em;
  border-top:2px solid #333;
  border-right:2px solid #333;
	-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;
  font-size:26px;
  line-height:40px;
  border-bottom:1px solid #2ec0dd;
}
.top_service h2 span {
  line-height:45px;
  padding:0 0 5px 0;
  border-bottom:5px solid #2ec0dd;
}
  
.list--top_service {
  width:100%;
  height:auto;
  margin:0 auto;
  list-style:none;
  padding:0 20px;
} 
.list--top_service li {
  width:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-justify-content:space-around;
  justify-content:space-around;
  padding:20px 0;
  border-bottom:1px solid #eaeaea;
}
.top_service-image {
  width:100px;
  height:75px;
  margin:0 auto;
}
.top_service-copy {
  font-size:12px;
  width:60%;
  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:30px 0;
}
.top_security h2 {
  text-align:center;
}
.top_security h2 img {
  width:100%;
  height:auto;
  padding:0 20px;
}
.top_security-image {
  position:relative;
  margin:20px auto 0 auto;
}

/*security-item*/
.security-item-01,
.security-item-02,
.security-item-03,
.security-item-04,
.security-item-05,
.security-item-06,
.security-item-07 {
  position:relative;
  width:100%;
  padding:10px 90px 10px 20px;
  background:#fff;
  border-bottom:2px solid #f7f7f7;
}
.security-title {
  font-size:16px;
  font-weight:bold;
  height:auto;
}
.security-title span.number {
  display:inline-block;
  background:#333;
  color:#fff;
  width:1.5em;
  height:1.5em;
  text-align:center;
  border-radius:50%;
  margin:0 5px 0 0;
}
.security-copy {
  margin:5px auto 0 auto;
  font-size:12px;
  min-height:5em;
}
.security-category {
  display:none;
}
.security-link {
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  padding:0;
}
.security-link a {
  display:block;
  width:100%;
  height:100%;
}
.security-link img {
  display:none;
}
.security-link::before {
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  width:24px;
  height:100%;
}
.security-item-01 .security-link::before,
.security-item-02 .security-link::before,
.security-item-03 .security-link::before {
  background:#4bd7f3;
}
.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:#90c31f;
}
.security-link::after {
  content:"";
  position:absolute;
  bottom:50%;
  right:9px;
  margin-right:-1px;
	width: 10px;
	height: 10px;
	border-bottom: 3px solid rgba(255,255,255,0.5);
	border-right: 3px solid rgba(255,255,255,0.5);
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
  
}
.security-item-01 .security-link,
.security-item-02 .security-link,
.security-item-03 .security-link,
.security-item-04 .security-link,
.security-item-05 .security-link,
.security-item-06 .security-link,
.security-item-07 .security-link {
  background:transparent;
}

/* --------------------------------------------------
top_buy
-------------------------------------------------- */
.top_buy {
  width:100%;
  height:auto;
  padding:30px 0;
}
.top_buy h2 {
  text-align:center;
  font-size:24px;
}
.top_buy--inner {
  width:100%;
  height:auto;
  margin:20px auto 0 auto;
  padding:0 20px;
}
.top_buy--item {
  width:100%;
  height:auto;
}
.top_buy--item h3 {
  background:#f6f6f6;
  font-size:16px;
  text-align:center;
  padding:10px;
}
.top_buy--item h3.blue { border-bottom:5px solid #4bd7f3;}
.top_buy--item h3.green { border-bottom:5px solid #90c31f; margin-top:30px;}
.top_buy--item > p {
  margin:10px auto 0 auto;
  padding:0 5px;
  font-size:12px;
}
.top_buy--link_item {
  text-align:center;
  margin:10px auto 0 auto;
}
.top_buy--link_item a {
  display:block;
}

/* --------------------------------------------------
top_support
-------------------------------------------------- */
.top_support {
  width:100%;
  height:auto;
  padding:30px 0;
  background:#f7f7f7;
}
.top_support h2 {
  text-align:center;
  font-size:24px;
}
.top_support--inner {
  width:100%;
  height:auto;
  margin:20px auto 0 auto;
  padding:0 20px;
}
.top_support--item-left {
  width:100%;
  height:auto;
  text-align:center;
}
.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:100%;
  height:auto;
}
.top_support--item-right h3 {
  background:#fff;
  font-size:16px;
  text-align:center;
  padding:10px;
  margin:20px auto 0 auto;
}
.top_support--item-right h3.blue {
  border-bottom:5px solid #4bd7f3;
}
.list__top-support {
  list-style:none;
  margin:20px auto 0 auto;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-justify-content:space-around;
  justify-content:space-around;
}
.list__top-support li {
  width:70px;
  height:80px;
}
.list__top-support li a {
  margin:0 auto;
  display:block;
  position:relative;
  width:65px;
  height:65px;
  border-radius:50%;
  background:#fff;
  padding:10px 0 0 0;
	box-shadow: 0 3px 0 rgba(0,0,0,0.2);
  text-align:center;
}
.list__top-support li img {
  width:60px;
  height:45px;
}