@charset "UTF-8";

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

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

/* --------------------------------------------------
Body
-------------------------------------------------- */
body {
	color:#333;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}


/* --------------------------------------------------
link
-------------------------------------------------- */
a:link, a:visited { color:#2ec0dd; }
a:hover, a:active { text-decoration:underline; }


/* --------------------------------------------------
style setting
-------------------------------------------------- */
.inner-top { /*margin-top打ち消し用*/
  margin-top:0 !important;
}
.mt10 { margin-top:10px !important; }
.mt20 { margin-top:20px !important; }
.mt30 { margin-top:30px !important; }
.mt40 { margin-top:40px !important; }
.mt50 { margin-top:50px !important; }
.mt60 { margin-top:60px !important; }


/* --------------------------------------------------
Button
-------------------------------------------------- */
.btn {
  display:inline-block;
	position:relative;
	border-radius:5px;
	text-align:center;
  font-weight:bold;
	padding:10px;
	-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;
  text-decoration:none;
}
.btn::before {
	content:"";
	position:absolute;
	right:15px;
	top:50%;
	width: 12px;
	height: 12px;
	margin-top:-6px;
	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);
}
.btn.block {
	display:block;
}
.btn.standard {
  font-size:14px;
	color:#fff;
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 0 rgba(0,0,0,0.2);
  background:#2ec0dd;
} .btn.standard:hover { background:#0795b1; text-decoration:none;}

.btn.trial {
	color:#fff;
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 0 rgba(0,0,0,0.2);
  background:#90c31f;
} .btn.trial:hover { background:#79b000;}

.btn.office {
	color:#fff;
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 0 rgba(0,0,0,0.2);
  background:#1992d4;
} .btn.office:hover { background:#0079bb;}

.btn.garoon {
	color:#fff;
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 0 rgba(0,0,0,0.2);
  background:#003399;
} .btn.garoon:hover { background:#002a64;}

.btn.kintone {
	color:#554000;
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 0 rgba(0,0,0,0.2);
  background:#ffbf00;
} .btn.kintone:hover { color:#554000; background:#ffce3b;}

.btn.mailwise {
	color:#fff;
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 0 rgba(0,0,0,0.2);
  background:#dd2f4d;
} .btn.mailwise:hover { background:#c00a29;}

.btn.kunai {
	color:#fff;
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
	box-shadow: 0 2px 0 rgba(0,0,0,0.2);
  background:#333;
} .btn.kunai:hover { background:#111;}

.btn.title-set {
	font-size:14px;
	line-height:1.2em;
  padding:15px;
}
.btn.title-set span {
	font-size:11px !important;
	display:block;
}
.btn.large {
  font-size:16px;
	padding:18px 40px;
}
.btn.title-set.large {
	font-size:16px;
}


/* --------------------------------------------------
ICO:target="_blank" another link
-------------------------------------------------- */
/* target="_blank" の時にアイコン表示【一括指定】 */
.list--footer_sitemap_menu li a[target="_blank"]::after {
	content:"";
	position:absolute;
	width:1em;
	height:1em;
	line-height:1em;
	background:url(../../images/common/ico-another_link_gray.svg) no-repeat 50% 50%;
	background-size:contain;
	margin:0.2em 0 0 0.5em;
}
.another-link::after {
  content:"";
  display:inline-block;
	width: 1em !important;
	height: 1em !important;
  margin:0 5px;
	background:url(../../images/common/ico-another_link_gray.svg) no-repeat 50% 50%;
}
.another-link-wht::after {
  content:"";
  display:inline-block;
	width: 1em !important;
	height: 1em !important;
  margin:0 5px;
	background:url(../../images/common/ico-another_link.svg) no-repeat 50% 50%;
}
.another-link-blue::after {
  content:"";
  display:inline-block;
	width: 1em !important;
	height: 1em !important;
  margin:0 5px;
	background:url(../../images/common/ico-another_link_blue.svg) no-repeat 50% 50%;
}
a.btn.another-link-wht::after {
  content:"";
  display:inline-block;
	width: 0.85em !important;
	height: 0.85em !important;
  margin:0 0 0 5px;
  vertical-align:baseline;
	background:url(../../images/common/ico-another_link.svg) no-repeat 50% 50%;
}

/* other blank */
.list__panel li a[target="_blank"]::after{
  content:"";
  position:absolute;
  bottom:50%;
  right:4px;
	width: 12px !important;
	height: 12px !important;
	margin:0 0 -6px 5px !important;
	border:none !important;
	-webkit-transform:none !important;
	-ms-transform:none !important;
	transform:none !important;
	background:url(../../images/common/ico-another_link.svg) no-repeat 50% 50%;
}
.list__text li a[target="_blank"]::after{
  content:"";
  display:inline-block;
	width: 12px !important;
	height: 12px !important;
  margin:0 0 0 5px;
  opacity:0.3;
	background:url(../../images/common/ico-another_link.svg) no-repeat 50% 50%;
}
.top_service-link a[target="_blank"]::after {
  content:"";
  display:inline-block;
	width: 12px !important;
	height: 12px !important;
  margin:0 0 0 5px;
	background:url(../../images/common/ico-another_link.svg) no-repeat 50% 50%;
}
.list__top-support li a[target="_blank"]::after {
	content:"";
	position:absolute;
  bottom:5px;
  left:50%;
	width:10px;
	height:10px;
	background:url(../../images/common/ico-another_link_gray.svg) no-repeat 50% 50%;
	background-size:contain;
  margin-left:-5px;
  opacity:0.3;
}
.service_item-link a[target="_blank"]::after {
  content:"";
  display:inline-block;
	width: 12px !important;
	height: 12px !important;
  margin:0 0 0 5px;
	background:url(../../images/common/ico-another_link.svg) no-repeat 50% 50%;
}